@universityofmaryland/web-elements-library 1.4.0 → 1.4.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/README.md +1 -1
- package/dist/atomic/events/sign.d.ts.map +1 -1
- package/dist/atomic/events/sign.js +6 -0
- package/dist/atomic/events/sign.js.map +1 -1
- package/dist/atomic/events/sign.mjs +6 -0
- package/dist/atomic/events/sign.mjs.map +1 -1
- package/dist/atomic/layout/block/stacked.d.ts.map +1 -1
- package/dist/atomic/layout/block/stacked.js +14 -8
- package/dist/atomic/layout/block/stacked.js.map +1 -1
- package/dist/atomic/layout/block/stacked.mjs +14 -8
- package/dist/atomic/layout/block/stacked.mjs.map +1 -1
- package/dist/composite/card/list.d.ts.map +1 -1
- package/dist/composite/card/list.js +2 -0
- package/dist/composite/card/list.js.map +1 -1
- package/dist/composite/card/list.mjs +2 -0
- package/dist/composite/card/list.mjs.map +1 -1
- package/dist/composite/hero/overlay.d.ts.map +1 -1
- package/dist/composite/hero/overlay.js +6 -0
- package/dist/composite/hero/overlay.js.map +1 -1
- package/dist/composite/hero/overlay.mjs +6 -0
- package/dist/composite/hero/overlay.mjs.map +1 -1
- package/dist/composite/hero/standard.d.ts.map +1 -1
- package/dist/composite/hero/standard.js +10 -4
- package/dist/composite/hero/standard.js.map +1 -1
- package/dist/composite/hero/standard.mjs +10 -4
- package/dist/composite/hero/standard.mjs.map +1 -1
- package/dist/composite/media/elements/gif.d.ts.map +1 -1
- package/dist/composite/media/elements/gif.js +7 -0
- package/dist/composite/media/elements/gif.js.map +1 -1
- package/dist/composite/media/elements/gif.mjs +7 -0
- package/dist/composite/media/elements/gif.mjs.map +1 -1
- package/dist/composite/pathway/hero.d.ts.map +1 -1
- package/dist/composite/pathway/hero.js +2 -1
- package/dist/composite/pathway/hero.js.map +1 -1
- package/dist/composite/pathway/hero.mjs +2 -1
- package/dist/composite/pathway/hero.mjs.map +1 -1
- package/package.json +1 -1
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":"sign.d.ts","sourceRoot":"","sources":["../../../source/atomic/events/sign.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sign.d.ts","sourceRoot":"","sources":["../../../source/atomic/events/sign.ts"],"names":[],"mappings":"yBAmHgB,OAAO;IACrB,UAAU,EAAE,MAAM,GAAG,WAAW,CAAC;IACjC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;;;;;AAPD,wBAiEE"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
const Styles = require("@universityofmaryland/web-styles-library");
|
|
2
3
|
const index = require("../../model/elements/index.js");
|
|
3
4
|
const event = require("../../model/elements/event.js");
|
|
4
5
|
const headline = require("../../model/elements/headline.js");
|
|
@@ -44,6 +45,11 @@ const makeStartDateBlock = ({
|
|
|
44
45
|
isThemeDark
|
|
45
46
|
}) => index.createParagraph({
|
|
46
47
|
className: "event-sign-start",
|
|
48
|
+
elementStyles: {
|
|
49
|
+
subElement: {
|
|
50
|
+
color: Styles.token.color.black
|
|
51
|
+
}
|
|
52
|
+
},
|
|
47
53
|
children: [
|
|
48
54
|
makeDateElement({
|
|
49
55
|
element: startMonth,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sign.js","sources":["../../../source/atomic/events/sign.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\nconst makeDateElement = ({\n element,\n isMonth,\n isDay,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n}: {\n element: string | HTMLElement;\n isMonth?: boolean;\n isDay?: boolean;\n isLargeSize?: boolean;\n isMultiDay?: boolean;\n isThemeDark?: boolean;\n}) => {\n const dateElement = document.createElement('span');\n if (typeof element === 'string') {\n dateElement.innerHTML = element;\n } else {\n dateElement.appendChild(element);\n }\n\n if (isDay && isLargeSize && !isMultiDay) {\n return ElementModel.headline.sansExtraLarge({\n element: dateElement,\n isThemeDark,\n });\n }\n\n if (isDay) {\n return ElementModel.headline.sansLarger({\n element: dateElement,\n isThemeDark,\n });\n }\n\n if (isMonth && isLargeSize && !isMultiDay) {\n return ElementModel.headline.sansSmall({\n element: dateElement,\n isThemeDark,\n });\n }\n\n return ElementModel.headline.sansMin({ element: dateElement, isThemeDark });\n};\n\nconst makeStartDateBlock = ({\n startMonth,\n startDay,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n}: {\n startMonth: string | HTMLElement;\n startDay: string | HTMLElement;\n isLargeSize?: boolean;\n isMultiDay?: boolean;\n isThemeDark?: boolean;\n}) =>\n ElementModel.createParagraph({\n className: 'event-sign-start',\n children: [\n makeDateElement({\n element: startMonth,\n isMonth: true,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n }),\n makeDateElement({\n element: startDay,\n isDay: true,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n }),\n ],\n });\n\nconst makeEndDateBlock = ({\n endMonth,\n endDay,\n isThemeDark,\n}: {\n endDay: string | HTMLElement;\n endMonth: string | HTMLElement;\n isThemeDark?: boolean;\n}) =>\n ElementModel.createParagraph({\n className: 'event-sign-end',\n children: [\n makeDateElement({\n element: endMonth,\n isMonth: true,\n isMultiDay: true,\n isThemeDark,\n }),\n makeDateElement({\n element: endDay,\n isDay: true,\n isMultiDay: true,\n isThemeDark,\n }),\n ],\n });\n\nexport default (props: {\n startMonth: string | HTMLElement;\n startDay: string | HTMLElement;\n endDay?: string | HTMLElement;\n endMonth?: string | HTMLElement;\n isThemeDark?: boolean;\n isLargeSize?: boolean;\n}) => {\n const {\n startMonth,\n startDay,\n endDay,\n endMonth,\n isThemeDark,\n isLargeSize = false,\n } = props;\n const isTheSameMonth = endMonth === startMonth;\n const isTheSameDay = endDay === startDay;\n const isMultiDay = !isTheSameMonth || !isTheSameDay;\n let children: ElementVisual[] = [];\n\n children.push(\n makeStartDateBlock({\n startMonth,\n startDay,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n }),\n );\n\n if (isMultiDay && endDay && endMonth) {\n const srOnly = ElementModel.createSpan({\n className: 'sr-only',\n });\n const dash = ElementModel.createSpan({\n className: 'dash',\n elementStyles: {\n element: {\n width: '10px',\n height: '3px',\n margin: '13px 5px 0',\n display: 'block',\n backgroundColor: isThemeDark ? 'white' : 'black',\n },\n },\n });\n\n srOnly.element.innerHTML = 'to';\n\n children.push(\n srOnly,\n dash,\n makeEndDateBlock({\n endDay,\n endMonth,\n isThemeDark,\n }),\n );\n }\n\n return ElementModel.event.signContainer({\n element: document.createElement('div'),\n children,\n });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","ElementModel.headline.sansLarger","ElementModel.headline.sansSmall","ElementModel.headline.sansMin","ElementModel.createParagraph","ElementModel.createSpan","ElementModel.event.signContainer"],"mappings":"
|
|
1
|
+
{"version":3,"file":"sign.js","sources":["../../../source/atomic/events/sign.ts"],"sourcesContent":["import Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\nconst makeDateElement = ({\n element,\n isMonth,\n isDay,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n}: {\n element: string | HTMLElement;\n isMonth?: boolean;\n isDay?: boolean;\n isLargeSize?: boolean;\n isMultiDay?: boolean;\n isThemeDark?: boolean;\n}) => {\n const dateElement = document.createElement('span');\n if (typeof element === 'string') {\n dateElement.innerHTML = element;\n } else {\n dateElement.appendChild(element);\n }\n\n if (isDay && isLargeSize && !isMultiDay) {\n return ElementModel.headline.sansExtraLarge({\n element: dateElement,\n isThemeDark,\n });\n }\n\n if (isDay) {\n return ElementModel.headline.sansLarger({\n element: dateElement,\n isThemeDark,\n });\n }\n\n if (isMonth && isLargeSize && !isMultiDay) {\n return ElementModel.headline.sansSmall({\n element: dateElement,\n isThemeDark,\n });\n }\n\n return ElementModel.headline.sansMin({ element: dateElement, isThemeDark });\n};\n\nconst makeStartDateBlock = ({\n startMonth,\n startDay,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n}: {\n startMonth: string | HTMLElement;\n startDay: string | HTMLElement;\n isLargeSize?: boolean;\n isMultiDay?: boolean;\n isThemeDark?: boolean;\n}) =>\n ElementModel.createParagraph({\n className: 'event-sign-start',\n elementStyles: {\n subElement: {\n color: Styles.token.color.black,\n },\n },\n children: [\n makeDateElement({\n element: startMonth,\n isMonth: true,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n }),\n makeDateElement({\n element: startDay,\n isDay: true,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n }),\n ],\n });\n\nconst makeEndDateBlock = ({\n endMonth,\n endDay,\n isThemeDark,\n}: {\n endDay: string | HTMLElement;\n endMonth: string | HTMLElement;\n isThemeDark?: boolean;\n}) =>\n ElementModel.createParagraph({\n className: 'event-sign-end',\n children: [\n makeDateElement({\n element: endMonth,\n isMonth: true,\n isMultiDay: true,\n isThemeDark,\n }),\n makeDateElement({\n element: endDay,\n isDay: true,\n isMultiDay: true,\n isThemeDark,\n }),\n ],\n });\n\nexport default (props: {\n startMonth: string | HTMLElement;\n startDay: string | HTMLElement;\n endDay?: string | HTMLElement;\n endMonth?: string | HTMLElement;\n isThemeDark?: boolean;\n isLargeSize?: boolean;\n}) => {\n const {\n startMonth,\n startDay,\n endDay,\n endMonth,\n isThemeDark,\n isLargeSize = false,\n } = props;\n const isTheSameMonth = endMonth === startMonth;\n const isTheSameDay = endDay === startDay;\n const isMultiDay = !isTheSameMonth || !isTheSameDay;\n let children: ElementVisual[] = [];\n\n children.push(\n makeStartDateBlock({\n startMonth,\n startDay,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n }),\n );\n\n if (isMultiDay && endDay && endMonth) {\n const srOnly = ElementModel.createSpan({\n className: 'sr-only',\n });\n const dash = ElementModel.createSpan({\n className: 'dash',\n elementStyles: {\n element: {\n width: '10px',\n height: '3px',\n margin: '13px 5px 0',\n display: 'block',\n backgroundColor: isThemeDark ? 'white' : 'black',\n },\n },\n });\n\n srOnly.element.innerHTML = 'to';\n\n children.push(\n srOnly,\n dash,\n makeEndDateBlock({\n endDay,\n endMonth,\n isThemeDark,\n }),\n );\n }\n\n return ElementModel.event.signContainer({\n element: document.createElement('div'),\n children,\n });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","ElementModel.headline.sansLarger","ElementModel.headline.sansSmall","ElementModel.headline.sansMin","ElementModel.createParagraph","ElementModel.createSpan","ElementModel.event.signContainer"],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import Styles__default from "@universityofmaryland/web-styles-library";
|
|
1
2
|
import { createParagraph, createSpan } from "../../model/elements/index.mjs";
|
|
2
3
|
import { signContainer } from "../../model/elements/event.mjs";
|
|
3
4
|
import { sansExtraLarge, sansLarger, sansSmall, sansMin } from "../../model/elements/headline.mjs";
|
|
@@ -43,6 +44,11 @@ const makeStartDateBlock = ({
|
|
|
43
44
|
isThemeDark
|
|
44
45
|
}) => createParagraph({
|
|
45
46
|
className: "event-sign-start",
|
|
47
|
+
elementStyles: {
|
|
48
|
+
subElement: {
|
|
49
|
+
color: Styles__default.token.color.black
|
|
50
|
+
}
|
|
51
|
+
},
|
|
46
52
|
children: [
|
|
47
53
|
makeDateElement({
|
|
48
54
|
element: startMonth,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sign.mjs","sources":["../../../source/atomic/events/sign.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\nconst makeDateElement = ({\n element,\n isMonth,\n isDay,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n}: {\n element: string | HTMLElement;\n isMonth?: boolean;\n isDay?: boolean;\n isLargeSize?: boolean;\n isMultiDay?: boolean;\n isThemeDark?: boolean;\n}) => {\n const dateElement = document.createElement('span');\n if (typeof element === 'string') {\n dateElement.innerHTML = element;\n } else {\n dateElement.appendChild(element);\n }\n\n if (isDay && isLargeSize && !isMultiDay) {\n return ElementModel.headline.sansExtraLarge({\n element: dateElement,\n isThemeDark,\n });\n }\n\n if (isDay) {\n return ElementModel.headline.sansLarger({\n element: dateElement,\n isThemeDark,\n });\n }\n\n if (isMonth && isLargeSize && !isMultiDay) {\n return ElementModel.headline.sansSmall({\n element: dateElement,\n isThemeDark,\n });\n }\n\n return ElementModel.headline.sansMin({ element: dateElement, isThemeDark });\n};\n\nconst makeStartDateBlock = ({\n startMonth,\n startDay,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n}: {\n startMonth: string | HTMLElement;\n startDay: string | HTMLElement;\n isLargeSize?: boolean;\n isMultiDay?: boolean;\n isThemeDark?: boolean;\n}) =>\n ElementModel.createParagraph({\n className: 'event-sign-start',\n children: [\n makeDateElement({\n element: startMonth,\n isMonth: true,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n }),\n makeDateElement({\n element: startDay,\n isDay: true,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n }),\n ],\n });\n\nconst makeEndDateBlock = ({\n endMonth,\n endDay,\n isThemeDark,\n}: {\n endDay: string | HTMLElement;\n endMonth: string | HTMLElement;\n isThemeDark?: boolean;\n}) =>\n ElementModel.createParagraph({\n className: 'event-sign-end',\n children: [\n makeDateElement({\n element: endMonth,\n isMonth: true,\n isMultiDay: true,\n isThemeDark,\n }),\n makeDateElement({\n element: endDay,\n isDay: true,\n isMultiDay: true,\n isThemeDark,\n }),\n ],\n });\n\nexport default (props: {\n startMonth: string | HTMLElement;\n startDay: string | HTMLElement;\n endDay?: string | HTMLElement;\n endMonth?: string | HTMLElement;\n isThemeDark?: boolean;\n isLargeSize?: boolean;\n}) => {\n const {\n startMonth,\n startDay,\n endDay,\n endMonth,\n isThemeDark,\n isLargeSize = false,\n } = props;\n const isTheSameMonth = endMonth === startMonth;\n const isTheSameDay = endDay === startDay;\n const isMultiDay = !isTheSameMonth || !isTheSameDay;\n let children: ElementVisual[] = [];\n\n children.push(\n makeStartDateBlock({\n startMonth,\n startDay,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n }),\n );\n\n if (isMultiDay && endDay && endMonth) {\n const srOnly = ElementModel.createSpan({\n className: 'sr-only',\n });\n const dash = ElementModel.createSpan({\n className: 'dash',\n elementStyles: {\n element: {\n width: '10px',\n height: '3px',\n margin: '13px 5px 0',\n display: 'block',\n backgroundColor: isThemeDark ? 'white' : 'black',\n },\n },\n });\n\n srOnly.element.innerHTML = 'to';\n\n children.push(\n srOnly,\n dash,\n makeEndDateBlock({\n endDay,\n endMonth,\n isThemeDark,\n }),\n );\n }\n\n return ElementModel.event.signContainer({\n element: document.createElement('div'),\n children,\n });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","ElementModel.headline.sansLarger","ElementModel.headline.sansSmall","ElementModel.headline.sansMin","ElementModel.createParagraph","ElementModel.createSpan","ElementModel.event.signContainer"],"mappings":"
|
|
1
|
+
{"version":3,"file":"sign.mjs","sources":["../../../source/atomic/events/sign.ts"],"sourcesContent":["import Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\nconst makeDateElement = ({\n element,\n isMonth,\n isDay,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n}: {\n element: string | HTMLElement;\n isMonth?: boolean;\n isDay?: boolean;\n isLargeSize?: boolean;\n isMultiDay?: boolean;\n isThemeDark?: boolean;\n}) => {\n const dateElement = document.createElement('span');\n if (typeof element === 'string') {\n dateElement.innerHTML = element;\n } else {\n dateElement.appendChild(element);\n }\n\n if (isDay && isLargeSize && !isMultiDay) {\n return ElementModel.headline.sansExtraLarge({\n element: dateElement,\n isThemeDark,\n });\n }\n\n if (isDay) {\n return ElementModel.headline.sansLarger({\n element: dateElement,\n isThemeDark,\n });\n }\n\n if (isMonth && isLargeSize && !isMultiDay) {\n return ElementModel.headline.sansSmall({\n element: dateElement,\n isThemeDark,\n });\n }\n\n return ElementModel.headline.sansMin({ element: dateElement, isThemeDark });\n};\n\nconst makeStartDateBlock = ({\n startMonth,\n startDay,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n}: {\n startMonth: string | HTMLElement;\n startDay: string | HTMLElement;\n isLargeSize?: boolean;\n isMultiDay?: boolean;\n isThemeDark?: boolean;\n}) =>\n ElementModel.createParagraph({\n className: 'event-sign-start',\n elementStyles: {\n subElement: {\n color: Styles.token.color.black,\n },\n },\n children: [\n makeDateElement({\n element: startMonth,\n isMonth: true,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n }),\n makeDateElement({\n element: startDay,\n isDay: true,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n }),\n ],\n });\n\nconst makeEndDateBlock = ({\n endMonth,\n endDay,\n isThemeDark,\n}: {\n endDay: string | HTMLElement;\n endMonth: string | HTMLElement;\n isThemeDark?: boolean;\n}) =>\n ElementModel.createParagraph({\n className: 'event-sign-end',\n children: [\n makeDateElement({\n element: endMonth,\n isMonth: true,\n isMultiDay: true,\n isThemeDark,\n }),\n makeDateElement({\n element: endDay,\n isDay: true,\n isMultiDay: true,\n isThemeDark,\n }),\n ],\n });\n\nexport default (props: {\n startMonth: string | HTMLElement;\n startDay: string | HTMLElement;\n endDay?: string | HTMLElement;\n endMonth?: string | HTMLElement;\n isThemeDark?: boolean;\n isLargeSize?: boolean;\n}) => {\n const {\n startMonth,\n startDay,\n endDay,\n endMonth,\n isThemeDark,\n isLargeSize = false,\n } = props;\n const isTheSameMonth = endMonth === startMonth;\n const isTheSameDay = endDay === startDay;\n const isMultiDay = !isTheSameMonth || !isTheSameDay;\n let children: ElementVisual[] = [];\n\n children.push(\n makeStartDateBlock({\n startMonth,\n startDay,\n isLargeSize,\n isMultiDay,\n isThemeDark,\n }),\n );\n\n if (isMultiDay && endDay && endMonth) {\n const srOnly = ElementModel.createSpan({\n className: 'sr-only',\n });\n const dash = ElementModel.createSpan({\n className: 'dash',\n elementStyles: {\n element: {\n width: '10px',\n height: '3px',\n margin: '13px 5px 0',\n display: 'block',\n backgroundColor: isThemeDark ? 'white' : 'black',\n },\n },\n });\n\n srOnly.element.innerHTML = 'to';\n\n children.push(\n srOnly,\n dash,\n makeEndDateBlock({\n endDay,\n endMonth,\n isThemeDark,\n }),\n );\n }\n\n return ElementModel.event.signContainer({\n element: document.createElement('div'),\n children,\n });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","ElementModel.headline.sansLarger","ElementModel.headline.sansSmall","ElementModel.headline.sansMin","ElementModel.createParagraph","Styles","ElementModel.createSpan","ElementModel.event.signContainer"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/block/stacked.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/block/stacked.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAMlD,UAAU,QAAQ;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,KAAK,GAAI,qDAKnB,QAAQ,GAAG;IACZ,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC;;;;CAuDG,CAAC;AAEL,eAAO,MAAM,aAAa,GAAI,oEAM3B,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,UAAU,EAAE,CAAC;CACxB;;;;CAoCG,CAAC;AAEL,eAAO,MAAM,SAAS,GAAI,oEAMvB,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,UAAU,EAAE,CAAC;CACxB;;;;CAwCG,CAAC"}
|
|
@@ -37,6 +37,8 @@ const image = ({
|
|
|
37
37
|
elementStyles: {
|
|
38
38
|
element: {
|
|
39
39
|
height: "auto",
|
|
40
|
+
position: "relative",
|
|
41
|
+
zIndex: 99,
|
|
40
42
|
// Gif Overwrite
|
|
41
43
|
[`&:has(.${Styles__namespace.element.asset.gif.toggle.className})`]: {
|
|
42
44
|
aspectRatio: "4 / 3"
|
|
@@ -96,15 +98,19 @@ const textContainer = ({
|
|
|
96
98
|
paddingTop: Styles__namespace.token.spacing.md
|
|
97
99
|
}
|
|
98
100
|
),
|
|
99
|
-
...media.createContainerQuery(
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
101
|
+
...media.createContainerQuery(
|
|
102
|
+
"min-width",
|
|
103
|
+
mediumBreakpointStart,
|
|
104
|
+
{
|
|
105
|
+
paddingTop: Styles__namespace.token.spacing.lg,
|
|
106
|
+
...hasBorder && {
|
|
107
|
+
padding: Styles__namespace.token.spacing.md
|
|
108
|
+
},
|
|
109
|
+
...isThemeDark && !isTransparent && {
|
|
110
|
+
padding: Styles__namespace.token.spacing.md
|
|
111
|
+
}
|
|
106
112
|
}
|
|
107
|
-
|
|
113
|
+
),
|
|
108
114
|
...customStyles
|
|
109
115
|
}
|
|
110
116
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stacked.js","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from 'utilities';\nimport {
|
|
1
|
+
{"version":3,"file":"stacked.js","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { type UMDElement } from '../../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\ninterface BoxProps {\n hasBorder?: boolean;\n isThemeDark?: boolean;\n isTransparent?: boolean;\n}\n\nexport const image = ({\n customStyles = {},\n children,\n hasBorder = false,\n isThemeDark = false,\n}: BoxProps & {\n children: UMDElement[];\n customStyles?: Record<string, any>;\n}) =>\n ElementModel.createDiv({\n className: 'layout-block-stacked-image',\n children,\n elementStyles: {\n element: {\n height: 'auto',\n position: 'relative',\n zIndex: 99,\n\n // Gif Overwrite\n [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {\n aspectRatio: '4 / 3',\n },\n\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n marginLeft: Styles.token.spacing.sm,\n marginBottom: Styles.token.spacing.md,\n width: '120px',\n float: 'right',\n alignSelf: 'flex-start',\n\n ...(isThemeDark && {\n marginRight: 0,\n marginTop: 0,\n }),\n }),\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n display: 'block',\n },\n ),\n\n ...theme.media.createRangeContainerQuery(\n mediumBreakpointStart,\n mediumBreakpoint,\n {\n ...(hasBorder && {\n marginLeft: Styles.token.spacing.sm,\n }),\n },\n ),\n\n ...customStyles,\n\n '& img': {\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n },\n });\n\nexport const textContainer = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: UMDElement[];\n}) =>\n ElementModel.createDiv({\n className: 'layout-block-stacked-text',\n children,\n elementStyles: {\n element: {\n maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n paddingTop: Styles.token.spacing.md,\n },\n ),\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n paddingTop: Styles.token.spacing.lg,\n\n ...(hasBorder && {\n padding: Styles.token.spacing.md,\n }),\n\n ...(isThemeDark &&\n !isTransparent && {\n padding: Styles.token.spacing.md,\n }),\n },\n ),\n\n ...customStyles,\n },\n },\n });\n\nexport const container = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: UMDElement[];\n}) =>\n ElementModel.createDiv({\n className: 'layout-block-stacked-container',\n children,\n elementStyles: {\n element: {\n containerType: 'inline-size',\n height: '100%',\n\n ...(isThemeDark && {\n backgroundColor: Styles.token.color.gray.darker,\n }),\n\n ...(isTransparent && {\n backgroundColor: 'transparent',\n }),\n\n ...(hasBorder && {\n border: `1px solid ${Styles.token.color.gray.light}`,\n }),\n\n ...(hasBorder &&\n isThemeDark && {\n border: `1px solid ${Styles.token.color.gray.darker}`,\n }),\n\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n ...(isThemeDark &&\n !isTransparent && {\n padding: Styles.token.spacing.md,\n }),\n\n ...(hasBorder && {\n padding: Styles.token.spacing.md,\n }),\n }),\n\n ...customStyles,\n },\n },\n });\n"],"names":["Styles","ElementModel.createDiv","theme.media.createContainerQuery","theme.media.createRangeContainerQuery"],"mappings":"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"}
|
|
@@ -18,6 +18,8 @@ const image = ({
|
|
|
18
18
|
elementStyles: {
|
|
19
19
|
element: {
|
|
20
20
|
height: "auto",
|
|
21
|
+
position: "relative",
|
|
22
|
+
zIndex: 99,
|
|
21
23
|
// Gif Overwrite
|
|
22
24
|
[`&:has(.${Styles.element.asset.gif.toggle.className})`]: {
|
|
23
25
|
aspectRatio: "4 / 3"
|
|
@@ -77,15 +79,19 @@ const textContainer = ({
|
|
|
77
79
|
paddingTop: Styles.token.spacing.md
|
|
78
80
|
}
|
|
79
81
|
),
|
|
80
|
-
...createContainerQuery(
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
82
|
+
...createContainerQuery(
|
|
83
|
+
"min-width",
|
|
84
|
+
mediumBreakpointStart,
|
|
85
|
+
{
|
|
86
|
+
paddingTop: Styles.token.spacing.lg,
|
|
87
|
+
...hasBorder && {
|
|
88
|
+
padding: Styles.token.spacing.md
|
|
89
|
+
},
|
|
90
|
+
...isThemeDark && !isTransparent && {
|
|
91
|
+
padding: Styles.token.spacing.md
|
|
92
|
+
}
|
|
87
93
|
}
|
|
88
|
-
|
|
94
|
+
),
|
|
89
95
|
...customStyles
|
|
90
96
|
}
|
|
91
97
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stacked.mjs","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from 'utilities';\nimport {
|
|
1
|
+
{"version":3,"file":"stacked.mjs","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { type UMDElement } from '../../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\ninterface BoxProps {\n hasBorder?: boolean;\n isThemeDark?: boolean;\n isTransparent?: boolean;\n}\n\nexport const image = ({\n customStyles = {},\n children,\n hasBorder = false,\n isThemeDark = false,\n}: BoxProps & {\n children: UMDElement[];\n customStyles?: Record<string, any>;\n}) =>\n ElementModel.createDiv({\n className: 'layout-block-stacked-image',\n children,\n elementStyles: {\n element: {\n height: 'auto',\n position: 'relative',\n zIndex: 99,\n\n // Gif Overwrite\n [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {\n aspectRatio: '4 / 3',\n },\n\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n marginLeft: Styles.token.spacing.sm,\n marginBottom: Styles.token.spacing.md,\n width: '120px',\n float: 'right',\n alignSelf: 'flex-start',\n\n ...(isThemeDark && {\n marginRight: 0,\n marginTop: 0,\n }),\n }),\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n display: 'block',\n },\n ),\n\n ...theme.media.createRangeContainerQuery(\n mediumBreakpointStart,\n mediumBreakpoint,\n {\n ...(hasBorder && {\n marginLeft: Styles.token.spacing.sm,\n }),\n },\n ),\n\n ...customStyles,\n\n '& img': {\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n },\n });\n\nexport const textContainer = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: UMDElement[];\n}) =>\n ElementModel.createDiv({\n className: 'layout-block-stacked-text',\n children,\n elementStyles: {\n element: {\n maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n paddingTop: Styles.token.spacing.md,\n },\n ),\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n paddingTop: Styles.token.spacing.lg,\n\n ...(hasBorder && {\n padding: Styles.token.spacing.md,\n }),\n\n ...(isThemeDark &&\n !isTransparent && {\n padding: Styles.token.spacing.md,\n }),\n },\n ),\n\n ...customStyles,\n },\n },\n });\n\nexport const container = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: UMDElement[];\n}) =>\n ElementModel.createDiv({\n className: 'layout-block-stacked-container',\n children,\n elementStyles: {\n element: {\n containerType: 'inline-size',\n height: '100%',\n\n ...(isThemeDark && {\n backgroundColor: Styles.token.color.gray.darker,\n }),\n\n ...(isTransparent && {\n backgroundColor: 'transparent',\n }),\n\n ...(hasBorder && {\n border: `1px solid ${Styles.token.color.gray.light}`,\n }),\n\n ...(hasBorder &&\n isThemeDark && {\n border: `1px solid ${Styles.token.color.gray.darker}`,\n }),\n\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n ...(isThemeDark &&\n !isTransparent && {\n padding: Styles.token.spacing.md,\n }),\n\n ...(hasBorder && {\n padding: Styles.token.spacing.md,\n }),\n }),\n\n ...customStyles,\n },\n },\n });\n"],"names":["ElementModel.createDiv","theme.media.createContainerQuery","theme.media.createRangeContainerQuery"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../source/composite/card/list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../source/composite/card/list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;yBA6GzB,OAAO,aAAa;;;;;AAApC,wBAgDE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.js","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { textLockup, assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { CardListProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nconst makeDateColumn = (dateSign: UMDElement) =>\n ElementModel.createDiv({\n className: 'card-list-date-sign-wrapper',\n elementStyles: {\n element: {\n width: `${Styles.token.spacing.xl}`,\n order: 1,\n alignSelf: 'flex-start',\n\n ...theme.media.createContainerQuery('max-width', mediumBreakpoint, {\n display: 'none',\n }),\n ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n width: `${Styles.token.spacing['8xl']}`,\n }),\n },\n },\n children: [dateSign],\n });\n\nconst makeTextColumn = (props: CardListProps) =>\n ElementModel.createDiv({\n className: 'card-list-text-wrapper',\n elementStyles: {\n element: {\n flex: '1 0',\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n paddingRight: `${Styles.token.spacing.md}`,\n order: '2',\n },\n ),\n\n ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n width: '208px',\n }),\n },\n },\n children: [textLockup.small(props)],\n });\n\nconst makeImageColumn = ({\n image,\n isAligned,\n}: {\n image: NonNullable<CardListProps['image']>;\n isAligned?: CardListProps['isAligned'];\n}) =>\n ElementModel.createDiv({\n className: 'card-list-image-wrapper',\n elementStyles: {\n element: {\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n marginLeft: Styles.token.spacing.min,\n marginBottom: Styles.token.spacing.md,\n width: '120px',\n float: 'right',\n\n ...(isAligned && {\n height: '104px',\n }),\n }),\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n display: 'block',\n width: '160px',\n order: '3',\n\n ...(isAligned && {\n height: '160px',\n }),\n },\n ),\n\n ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n width: '208px',\n }),\n\n '& img': {\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n },\n children: [\n assets.image.background({\n element: image,\n isScaled: isAligned,\n isGifAllowed: false,\n }),\n ],\n });\n\nexport default (props: CardListProps) => {\n const { image, isAligned, isThemeDark, dateSign } = props;\n let children: UMDElement[] = [];\n\n if (image) {\n children.push(makeImageColumn({ image, isAligned }));\n }\n\n if (dateSign) {\n children.push(makeDateColumn(dateSign));\n }\n\n children.push(makeTextColumn(props));\n\n const wrapper = ElementModel.createDiv({\n className: 'card-list-wrapper',\n elementStyles: {\n element: {\n containerType: 'inline-size',\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n display: 'flex',\n justifyContent: 'space-between',\n },\n ),\n },\n },\n children,\n });\n\n return ElementModel.createDiv({\n className: 'card-list-container',\n elementStyles: {\n element: {\n height: '100%',\n overflow: 'hidden',\n\n ...(isThemeDark && {\n backgroundColor: Styles.token.color.black,\n color: Styles.token.color.white,\n }),\n },\n },\n children: [wrapper],\n });\n};\n"],"names":["Styles","ElementModel.createDiv","theme.media.createContainerQuery","textLockup.small","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkBA,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAClE,MAAM,wBAAwBA,kBAAO,MAAM,MAAM,iBAAiB,OAAO;AACzE,MAAM,mBAAmBA,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAEnE,MAAM,iBAAiB,CAAC,aACtBC,gBAAuB;AAAA,EACrB,WAAW;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAO,GAAGD,kBAAO,MAAM,QAAQ,EAAE;AAAA,MACjC,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,GAAGE,MAAAA,qBAAiC,aAAa,kBAAkB;AAAA,QACjE,SAAS;AAAA,MAAA,CACV;AAAA,MACD,GAAGA,MAAAA,qBAAiC,aAAa,kBAAkB;AAAA,QACjE,OAAO,GAAGF,kBAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,MAAA,CACtC;AAAA,IAAA;AAAA,EACH;AAAA,EAEF,UAAU,CAAC,QAAQ;AACrB,CAAC;AAEH,MAAM,iBAAiB,CAAC,UACtBC,gBAAuB;AAAA,EACrB,WAAW;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,MACP,MAAM;AAAA,MAEN,GAAGC,MAAAA;AAAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,UACE,cAAc,GAAGF,kBAAO,MAAM,QAAQ,EAAE;AAAA,UACxC,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAGF,GAAGE,MAAAA,qBAAiC,aAAa,kBAAkB;AAAA,QACjE,OAAO;AAAA,MAAA,CACR;AAAA,IAAA;AAAA,EACH;AAAA,EAEF,UAAU,CAACC,MAAAA,sBAAiB,KAAK,CAAC;AACpC,CAAC;AAEH,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AACF,MAIEF,gBAAuB;AAAA,EACrB,WAAW;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,MACP,GAAGC,MAAAA,qBAAiC,aAAa,iBAAiB;AAAA,QAChE,YAAYF,kBAAO,MAAM,QAAQ;AAAA,QACjC,cAAcA,kBAAO,MAAM,QAAQ;AAAA,QACnC,OAAO;AAAA,QACP,OAAO;AAAA,
|
|
1
|
+
{"version":3,"file":"list.js","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { textLockup, assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { CardListProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nconst makeDateColumn = (dateSign: UMDElement) =>\n ElementModel.createDiv({\n className: 'card-list-date-sign-wrapper',\n elementStyles: {\n element: {\n width: `${Styles.token.spacing.xl}`,\n order: 1,\n alignSelf: 'flex-start',\n\n ...theme.media.createContainerQuery('max-width', mediumBreakpoint, {\n display: 'none',\n }),\n ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n width: `${Styles.token.spacing['8xl']}`,\n }),\n },\n },\n children: [dateSign],\n });\n\nconst makeTextColumn = (props: CardListProps) =>\n ElementModel.createDiv({\n className: 'card-list-text-wrapper',\n elementStyles: {\n element: {\n flex: '1 0',\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n paddingRight: `${Styles.token.spacing.md}`,\n order: '2',\n },\n ),\n\n ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n width: '208px',\n }),\n },\n },\n children: [textLockup.small(props)],\n });\n\nconst makeImageColumn = ({\n image,\n isAligned,\n}: {\n image: NonNullable<CardListProps['image']>;\n isAligned?: CardListProps['isAligned'];\n}) =>\n ElementModel.createDiv({\n className: 'card-list-image-wrapper',\n elementStyles: {\n element: {\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n marginLeft: Styles.token.spacing.min,\n marginBottom: Styles.token.spacing.md,\n width: '120px',\n float: 'right',\n position: 'relative',\n zIndex: 99,\n\n ...(isAligned && {\n height: '104px',\n }),\n }),\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n display: 'block',\n width: '160px',\n order: '3',\n\n ...(isAligned && {\n height: '160px',\n }),\n },\n ),\n\n ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n width: '208px',\n }),\n\n '& img': {\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n },\n children: [\n assets.image.background({\n element: image,\n isScaled: isAligned,\n isGifAllowed: false,\n }),\n ],\n });\n\nexport default (props: CardListProps) => {\n const { image, isAligned, isThemeDark, dateSign } = props;\n let children: UMDElement[] = [];\n\n if (image) {\n children.push(makeImageColumn({ image, isAligned }));\n }\n\n if (dateSign) {\n children.push(makeDateColumn(dateSign));\n }\n\n children.push(makeTextColumn(props));\n\n const wrapper = ElementModel.createDiv({\n className: 'card-list-wrapper',\n elementStyles: {\n element: {\n containerType: 'inline-size',\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n display: 'flex',\n justifyContent: 'space-between',\n },\n ),\n },\n },\n children,\n });\n\n return ElementModel.createDiv({\n className: 'card-list-container',\n elementStyles: {\n element: {\n height: '100%',\n overflow: 'hidden',\n\n ...(isThemeDark && {\n backgroundColor: Styles.token.color.black,\n color: Styles.token.color.white,\n }),\n },\n },\n children: [wrapper],\n });\n};\n"],"names":["Styles","ElementModel.createDiv","theme.media.createContainerQuery","textLockup.small","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkBA,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAClE,MAAM,wBAAwBA,kBAAO,MAAM,MAAM,iBAAiB,OAAO;AACzE,MAAM,mBAAmBA,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAEnE,MAAM,iBAAiB,CAAC,aACtBC,gBAAuB;AAAA,EACrB,WAAW;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAO,GAAGD,kBAAO,MAAM,QAAQ,EAAE;AAAA,MACjC,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,GAAGE,MAAAA,qBAAiC,aAAa,kBAAkB;AAAA,QACjE,SAAS;AAAA,MAAA,CACV;AAAA,MACD,GAAGA,MAAAA,qBAAiC,aAAa,kBAAkB;AAAA,QACjE,OAAO,GAAGF,kBAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,MAAA,CACtC;AAAA,IAAA;AAAA,EACH;AAAA,EAEF,UAAU,CAAC,QAAQ;AACrB,CAAC;AAEH,MAAM,iBAAiB,CAAC,UACtBC,gBAAuB;AAAA,EACrB,WAAW;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,MACP,MAAM;AAAA,MAEN,GAAGC,MAAAA;AAAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,UACE,cAAc,GAAGF,kBAAO,MAAM,QAAQ,EAAE;AAAA,UACxC,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAGF,GAAGE,MAAAA,qBAAiC,aAAa,kBAAkB;AAAA,QACjE,OAAO;AAAA,MAAA,CACR;AAAA,IAAA;AAAA,EACH;AAAA,EAEF,UAAU,CAACC,MAAAA,sBAAiB,KAAK,CAAC;AACpC,CAAC;AAEH,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AACF,MAIEF,gBAAuB;AAAA,EACrB,WAAW;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,MACP,GAAGC,MAAAA,qBAAiC,aAAa,iBAAiB;AAAA,QAChE,YAAYF,kBAAO,MAAM,QAAQ;AAAA,QACjC,cAAcA,kBAAO,MAAM,QAAQ;AAAA,QACnC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,GAAI,aAAa;AAAA,UACf,QAAQ;AAAA,QAAA;AAAA,MACV,CACD;AAAA,MAED,GAAGE,MAAAA;AAAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,UACE,SAAS;AAAA,UACT,OAAO;AAAA,UACP,OAAO;AAAA,UAEP,GAAI,aAAa;AAAA,YACf,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,MACF;AAAA,MAGF,GAAGA,MAAAA,qBAAiC,aAAa,kBAAkB;AAAA,QACjE,OAAO;AAAA,MAAA,CACR;AAAA,MAED,SAAS;AAAA,QACP,GAAGA,MAAAA,qBAAiC,aAAa,iBAAiB;AAAA,UAChE,QAAQ;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAAA,EAEF,UAAU;AAAA,IACRE,WAAwB;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,IAAA,CACf;AAAA,EAAA;AAEL,CAAC;AAEH,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,EAAE,OAAO,WAAW,aAAa,aAAa;AACpD,MAAI,WAAyB,CAAA;AAE7B,MAAI,OAAO;AACT,aAAS,KAAK,gBAAgB,EAAE,OAAO,UAAA,CAAW,CAAC;AAAA,EACrD;AAEA,MAAI,UAAU;AACZ,aAAS,KAAK,eAAe,QAAQ,CAAC;AAAA,EACxC;AAEA,WAAS,KAAK,eAAe,KAAK,CAAC;AAEnC,QAAM,UAAUH,MAAAA,UAAuB;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QAEf,GAAGC,MAAAA;AAAAA,UACD;AAAA,UACA;AAAA,UACA;AAAA,YACE,SAAS;AAAA,YACT,gBAAgB;AAAA,UAAA;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,IAEF;AAAA,EAAA,CACD;AAED,SAAOD,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QAEV,GAAI,eAAe;AAAA,UACjB,iBAAiBD,kBAAO,MAAM,MAAM;AAAA,UACpC,OAAOA,kBAAO,MAAM,MAAM;AAAA,QAAA;AAAA,MAC5B;AAAA,IACF;AAAA,IAEF,UAAU,CAAC,OAAO;AAAA,EAAA,CACnB;AACH;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.mjs","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { textLockup, assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { CardListProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nconst makeDateColumn = (dateSign: UMDElement) =>\n ElementModel.createDiv({\n className: 'card-list-date-sign-wrapper',\n elementStyles: {\n element: {\n width: `${Styles.token.spacing.xl}`,\n order: 1,\n alignSelf: 'flex-start',\n\n ...theme.media.createContainerQuery('max-width', mediumBreakpoint, {\n display: 'none',\n }),\n ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n width: `${Styles.token.spacing['8xl']}`,\n }),\n },\n },\n children: [dateSign],\n });\n\nconst makeTextColumn = (props: CardListProps) =>\n ElementModel.createDiv({\n className: 'card-list-text-wrapper',\n elementStyles: {\n element: {\n flex: '1 0',\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n paddingRight: `${Styles.token.spacing.md}`,\n order: '2',\n },\n ),\n\n ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n width: '208px',\n }),\n },\n },\n children: [textLockup.small(props)],\n });\n\nconst makeImageColumn = ({\n image,\n isAligned,\n}: {\n image: NonNullable<CardListProps['image']>;\n isAligned?: CardListProps['isAligned'];\n}) =>\n ElementModel.createDiv({\n className: 'card-list-image-wrapper',\n elementStyles: {\n element: {\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n marginLeft: Styles.token.spacing.min,\n marginBottom: Styles.token.spacing.md,\n width: '120px',\n float: 'right',\n\n ...(isAligned && {\n height: '104px',\n }),\n }),\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n display: 'block',\n width: '160px',\n order: '3',\n\n ...(isAligned && {\n height: '160px',\n }),\n },\n ),\n\n ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n width: '208px',\n }),\n\n '& img': {\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n },\n children: [\n assets.image.background({\n element: image,\n isScaled: isAligned,\n isGifAllowed: false,\n }),\n ],\n });\n\nexport default (props: CardListProps) => {\n const { image, isAligned, isThemeDark, dateSign } = props;\n let children: UMDElement[] = [];\n\n if (image) {\n children.push(makeImageColumn({ image, isAligned }));\n }\n\n if (dateSign) {\n children.push(makeDateColumn(dateSign));\n }\n\n children.push(makeTextColumn(props));\n\n const wrapper = ElementModel.createDiv({\n className: 'card-list-wrapper',\n elementStyles: {\n element: {\n containerType: 'inline-size',\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n display: 'flex',\n justifyContent: 'space-between',\n },\n ),\n },\n },\n children,\n });\n\n return ElementModel.createDiv({\n className: 'card-list-container',\n elementStyles: {\n element: {\n height: '100%',\n overflow: 'hidden',\n\n ...(isThemeDark && {\n backgroundColor: Styles.token.color.black,\n color: Styles.token.color.white,\n }),\n },\n },\n children: [wrapper],\n });\n};\n"],"names":["ElementModel.createDiv","theme.media.createContainerQuery","textLockup.small","assets.image.background"],"mappings":";;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,OAAO,MAAM,MAAM,iBAAiB,MAAM;AAClE,MAAM,wBAAwB,OAAO,MAAM,MAAM,iBAAiB,OAAO;AACzE,MAAM,mBAAmB,OAAO,MAAM,MAAM,iBAAiB,MAAM;AAEnE,MAAM,iBAAiB,CAAC,aACtBA,UAAuB;AAAA,EACrB,WAAW;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAO,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,MACjC,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,GAAGC,qBAAiC,aAAa,kBAAkB;AAAA,QACjE,SAAS;AAAA,MAAA,CACV;AAAA,MACD,GAAGA,qBAAiC,aAAa,kBAAkB;AAAA,QACjE,OAAO,GAAG,OAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,MAAA,CACtC;AAAA,IAAA;AAAA,EACH;AAAA,EAEF,UAAU,CAAC,QAAQ;AACrB,CAAC;AAEH,MAAM,iBAAiB,CAAC,UACtBD,UAAuB;AAAA,EACrB,WAAW;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,MACP,MAAM;AAAA,MAEN,GAAGC;AAAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,UACE,cAAc,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,UACxC,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAGF,GAAGA,qBAAiC,aAAa,kBAAkB;AAAA,QACjE,OAAO;AAAA,MAAA,CACR;AAAA,IAAA;AAAA,EACH;AAAA,EAEF,UAAU,CAACC,sBAAiB,KAAK,CAAC;AACpC,CAAC;AAEH,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AACF,MAIEF,UAAuB;AAAA,EACrB,WAAW;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,MACP,GAAGC,qBAAiC,aAAa,iBAAiB;AAAA,QAChE,YAAY,OAAO,MAAM,QAAQ;AAAA,QACjC,cAAc,OAAO,MAAM,QAAQ;AAAA,QACnC,OAAO;AAAA,QACP,OAAO;AAAA,
|
|
1
|
+
{"version":3,"file":"list.mjs","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { textLockup, assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { CardListProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nconst makeDateColumn = (dateSign: UMDElement) =>\n ElementModel.createDiv({\n className: 'card-list-date-sign-wrapper',\n elementStyles: {\n element: {\n width: `${Styles.token.spacing.xl}`,\n order: 1,\n alignSelf: 'flex-start',\n\n ...theme.media.createContainerQuery('max-width', mediumBreakpoint, {\n display: 'none',\n }),\n ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n width: `${Styles.token.spacing['8xl']}`,\n }),\n },\n },\n children: [dateSign],\n });\n\nconst makeTextColumn = (props: CardListProps) =>\n ElementModel.createDiv({\n className: 'card-list-text-wrapper',\n elementStyles: {\n element: {\n flex: '1 0',\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n paddingRight: `${Styles.token.spacing.md}`,\n order: '2',\n },\n ),\n\n ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n width: '208px',\n }),\n },\n },\n children: [textLockup.small(props)],\n });\n\nconst makeImageColumn = ({\n image,\n isAligned,\n}: {\n image: NonNullable<CardListProps['image']>;\n isAligned?: CardListProps['isAligned'];\n}) =>\n ElementModel.createDiv({\n className: 'card-list-image-wrapper',\n elementStyles: {\n element: {\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n marginLeft: Styles.token.spacing.min,\n marginBottom: Styles.token.spacing.md,\n width: '120px',\n float: 'right',\n position: 'relative',\n zIndex: 99,\n\n ...(isAligned && {\n height: '104px',\n }),\n }),\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n display: 'block',\n width: '160px',\n order: '3',\n\n ...(isAligned && {\n height: '160px',\n }),\n },\n ),\n\n ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n width: '208px',\n }),\n\n '& img': {\n ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n },\n children: [\n assets.image.background({\n element: image,\n isScaled: isAligned,\n isGifAllowed: false,\n }),\n ],\n });\n\nexport default (props: CardListProps) => {\n const { image, isAligned, isThemeDark, dateSign } = props;\n let children: UMDElement[] = [];\n\n if (image) {\n children.push(makeImageColumn({ image, isAligned }));\n }\n\n if (dateSign) {\n children.push(makeDateColumn(dateSign));\n }\n\n children.push(makeTextColumn(props));\n\n const wrapper = ElementModel.createDiv({\n className: 'card-list-wrapper',\n elementStyles: {\n element: {\n containerType: 'inline-size',\n\n ...theme.media.createContainerQuery(\n 'min-width',\n mediumBreakpointStart,\n {\n display: 'flex',\n justifyContent: 'space-between',\n },\n ),\n },\n },\n children,\n });\n\n return ElementModel.createDiv({\n className: 'card-list-container',\n elementStyles: {\n element: {\n height: '100%',\n overflow: 'hidden',\n\n ...(isThemeDark && {\n backgroundColor: Styles.token.color.black,\n color: Styles.token.color.white,\n }),\n },\n },\n children: [wrapper],\n });\n};\n"],"names":["ElementModel.createDiv","theme.media.createContainerQuery","textLockup.small","assets.image.background"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/overlay.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/overlay.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAsOjC,OAAO,gBAAgB;;;;;AAAvC,wBA8DE"}
|
|
@@ -112,6 +112,12 @@ const createAsset = ({
|
|
|
112
112
|
children,
|
|
113
113
|
elementStyles: {
|
|
114
114
|
element: {
|
|
115
|
+
[`@media (${Styles__namespace.token.media.queries.large.max})`]: {
|
|
116
|
+
[`&:has(.${Styles__namespace.element.asset.gif.toggle.className})`]: {
|
|
117
|
+
minHeight: "56vw",
|
|
118
|
+
display: "grid"
|
|
119
|
+
}
|
|
120
|
+
},
|
|
115
121
|
[`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
|
|
116
122
|
position: "absolute",
|
|
117
123
|
width: "60%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.js","sources":["../../../source/composite/hero/overlay.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroOverlayProps } from './_types';\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\nconst keyFrameHeroResize = `\n @keyframes hero-overlay-resize {\n from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n }\n`;\n\nconst keyFrameHeroSlideUp = `\n @keyframes 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 createVideoAsset = (video: HTMLVideoElement) => {\n return assets.video.observedAutoPlay({\n video,\n isScaled: true,\n });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n return assets.image.background({\n element: image,\n isScaled: true,\n isGifAllowed: true,\n isShowCaption: true,\n });\n};\n\nconst buildAssetChildren = ({\n image,\n video,\n}: Pick<HeroOverlayProps, 'image' | 'video'>): ElementVisual[] => {\n if (video && video instanceof HTMLVideoElement) {\n return [createVideoAsset(video)];\n }\n\n if (image) {\n return [createImageAsset(image)];\n }\n\n return [assets.image.placeholder.fearlessForward()];\n};\n\nconst createAsset = ({\n image,\n video,\n includesAnimation,\n}: Pick<HeroOverlayProps, 'image' | 'video' | 'includesAnimation'>) => {\n const children = buildAssetChildren({ image, video });\n\n if (children.length === 0) {\n return null;\n }\n\n return ElementModel.createDiv({\n className: 'umd-hero-overlay__asset',\n children,\n elementStyles: {\n element: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n position: 'absolute',\n width: '60%',\n height: `calc(100% - ${Styles.token.spacing['5xl']})`,\n right: 0,\n top: 0,\n overflow: 'visible',\n\n ...(includesAnimation && {\n [`@media (prefers-reduced-motion: no-preference)`]: {\n animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n },\n }),\n },\n\n ['& img, & video']: {\n height: '100%',\n minHeight: '300px',\n },\n },\n },\n });\n};\n\nconst createHeadline = (props: Pick<HeroOverlayProps, '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 headlineElement = ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles: {\n element: {\n textTransform: 'uppercase',\n textWrap: 'pretty',\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n isThemeDark: true,\n });\n\n return headlineElement;\n};\n\nconst createTextContent = (\n props: Pick<HeroOverlayProps, 'eyebrow' | 'headline' | 'text' | 'actions'>,\n) => {\n const textLockupElement = textLockup.large({\n ribbon: props.eyebrow,\n headlineComposite: createHeadline(props),\n text: props.text,\n actions: props.actions,\n isThemeDark: true,\n });\n\n return ElementModel.createDiv({\n className: 'umd-hero-overlay__text-content',\n children: [textLockupElement],\n elementStyles: {\n element: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n maxWidth: '55%',\n },\n\n [`& .${Styles.element.text.rich.simpleLargeDark.className}`]: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n maxWidth: '60%',\n },\n },\n },\n },\n });\n};\n\nconst createText = (\n props: Pick<\n HeroOverlayProps,\n 'eyebrow' | 'headline' | 'text' | 'actions' | 'includesAnimation'\n >,\n) => {\n const { includesAnimation } = props;\n const textContent = createTextContent(props);\n\n const lock = ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [textContent],\n elementStyles: {\n element: {\n height: '100%',\n width: '100%',\n position: 'relative',\n },\n },\n });\n\n return ElementModel.createDiv({\n className: 'umd-hero-overlay__text',\n children: [lock],\n elementStyles: {\n element: {\n padding: `${Styles.token.spacing.lg} 0`,\n display: 'flex',\n position: 'relative',\n zIndex: 999,\n width: '100%',\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n padding: `${Styles.token.spacing['5xl']} 0`,\n\n ...(includesAnimation && {\n [`@media (prefers-reduced-motion: no-preference)`]: {\n animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n },\n }),\n },\n },\n },\n });\n};\n\nexport default (props: HeroOverlayProps) => {\n const text = createText(props);\n const asset = createAsset(props);\n\n const children: ElementVisual[] = [text];\n if (asset) {\n children.push(asset);\n }\n\n const container = ElementModel.createDiv({\n className: 'umd-hero-overlay__container',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n backgroundColor: Styles.token.color.black,\n overflow: 'clip',\n\n [`@container (${Styles.token.media.queries.large.max})`]: {\n display: 'flex',\n flexDirection: 'column-reverse',\n },\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n minHeight: '640px',\n display: 'flex',\n alignItems: 'center',\n\n ['&:before']: {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: '50px',\n top: 0,\n height: '100%',\n background:\n 'linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)',\n zIndex: 999,\n },\n },\n\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n minHeight: '764px',\n },\n },\n },\n });\n\n const composite = ElementModel.createDiv({\n className: 'umd-hero-overlay',\n children: [container],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n },\n },\n });\n\n composite.styles += keyFrameHeroResize;\n composite.styles += keyFrameHeroSlideUp;\n\n return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","ElementModel.createDiv","Styles","headline","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"overlay.js","sources":["../../../source/composite/hero/overlay.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroOverlayProps } from './_types';\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\nconst keyFrameHeroResize = `\n @keyframes hero-overlay-resize {\n from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n }\n`;\n\nconst keyFrameHeroSlideUp = `\n @keyframes 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 createVideoAsset = (video: HTMLVideoElement) => {\n return assets.video.observedAutoPlay({\n video,\n isScaled: true,\n });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n return assets.image.background({\n element: image,\n isScaled: true,\n isGifAllowed: true,\n isShowCaption: true,\n });\n};\n\nconst buildAssetChildren = ({\n image,\n video,\n}: Pick<HeroOverlayProps, 'image' | 'video'>): ElementVisual[] => {\n if (video && video instanceof HTMLVideoElement) {\n return [createVideoAsset(video)];\n }\n\n if (image) {\n return [createImageAsset(image)];\n }\n\n return [assets.image.placeholder.fearlessForward()];\n};\n\nconst createAsset = ({\n image,\n video,\n includesAnimation,\n}: Pick<HeroOverlayProps, 'image' | 'video' | 'includesAnimation'>) => {\n const children = buildAssetChildren({ image, video });\n\n if (children.length === 0) {\n return null;\n }\n\n return ElementModel.createDiv({\n className: 'umd-hero-overlay__asset',\n children,\n elementStyles: {\n element: {\n [`@media (${Styles.token.media.queries.large.max})`]: {\n [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {\n minHeight: '56vw',\n display: 'grid',\n },\n },\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n position: 'absolute',\n width: '60%',\n height: `calc(100% - ${Styles.token.spacing['5xl']})`,\n right: 0,\n top: 0,\n overflow: 'visible',\n\n ...(includesAnimation && {\n [`@media (prefers-reduced-motion: no-preference)`]: {\n animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n },\n }),\n },\n\n ['& img, & video']: {\n height: '100%',\n minHeight: '300px',\n },\n },\n },\n });\n};\n\nconst createHeadline = (props: Pick<HeroOverlayProps, '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 headlineElement = ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles: {\n element: {\n textTransform: 'uppercase',\n textWrap: 'pretty',\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n isThemeDark: true,\n });\n\n return headlineElement;\n};\n\nconst createTextContent = (\n props: Pick<HeroOverlayProps, 'eyebrow' | 'headline' | 'text' | 'actions'>,\n) => {\n const textLockupElement = textLockup.large({\n ribbon: props.eyebrow,\n headlineComposite: createHeadline(props),\n text: props.text,\n actions: props.actions,\n isThemeDark: true,\n });\n\n return ElementModel.createDiv({\n className: 'umd-hero-overlay__text-content',\n children: [textLockupElement],\n elementStyles: {\n element: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n maxWidth: '55%',\n },\n\n [`& .${Styles.element.text.rich.simpleLargeDark.className}`]: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n maxWidth: '60%',\n },\n },\n },\n },\n });\n};\n\nconst createText = (\n props: Pick<\n HeroOverlayProps,\n 'eyebrow' | 'headline' | 'text' | 'actions' | 'includesAnimation'\n >,\n) => {\n const { includesAnimation } = props;\n const textContent = createTextContent(props);\n\n const lock = ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [textContent],\n elementStyles: {\n element: {\n height: '100%',\n width: '100%',\n position: 'relative',\n },\n },\n });\n\n return ElementModel.createDiv({\n className: 'umd-hero-overlay__text',\n children: [lock],\n elementStyles: {\n element: {\n padding: `${Styles.token.spacing.lg} 0`,\n display: 'flex',\n position: 'relative',\n zIndex: 999,\n width: '100%',\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n padding: `${Styles.token.spacing['5xl']} 0`,\n\n ...(includesAnimation && {\n [`@media (prefers-reduced-motion: no-preference)`]: {\n animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n },\n }),\n },\n },\n },\n });\n};\n\nexport default (props: HeroOverlayProps) => {\n const text = createText(props);\n const asset = createAsset(props);\n\n const children: ElementVisual[] = [text];\n if (asset) {\n children.push(asset);\n }\n\n const container = ElementModel.createDiv({\n className: 'umd-hero-overlay__container',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n backgroundColor: Styles.token.color.black,\n overflow: 'clip',\n\n [`@container (${Styles.token.media.queries.large.max})`]: {\n display: 'flex',\n flexDirection: 'column-reverse',\n },\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n minHeight: '640px',\n display: 'flex',\n alignItems: 'center',\n\n ['&:before']: {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: '50px',\n top: 0,\n height: '100%',\n background:\n 'linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)',\n zIndex: 999,\n },\n },\n\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n minHeight: '764px',\n },\n },\n },\n });\n\n const composite = ElementModel.createDiv({\n className: 'umd-hero-overlay',\n children: [container],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n },\n },\n });\n\n composite.styles += keyFrameHeroResize;\n composite.styles += keyFrameHeroSlideUp;\n\n return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","ElementModel.createDiv","Styles","headline","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|
|
@@ -94,6 +94,12 @@ const createAsset = ({
|
|
|
94
94
|
children,
|
|
95
95
|
elementStyles: {
|
|
96
96
|
element: {
|
|
97
|
+
[`@media (${Styles.token.media.queries.large.max})`]: {
|
|
98
|
+
[`&:has(.${Styles.element.asset.gif.toggle.className})`]: {
|
|
99
|
+
minHeight: "56vw",
|
|
100
|
+
display: "grid"
|
|
101
|
+
}
|
|
102
|
+
},
|
|
97
103
|
[`@container (${Styles.token.media.queries.tablet.min})`]: {
|
|
98
104
|
position: "absolute",
|
|
99
105
|
width: "60%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.mjs","sources":["../../../source/composite/hero/overlay.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroOverlayProps } from './_types';\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\nconst keyFrameHeroResize = `\n @keyframes hero-overlay-resize {\n from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n }\n`;\n\nconst keyFrameHeroSlideUp = `\n @keyframes 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 createVideoAsset = (video: HTMLVideoElement) => {\n return assets.video.observedAutoPlay({\n video,\n isScaled: true,\n });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n return assets.image.background({\n element: image,\n isScaled: true,\n isGifAllowed: true,\n isShowCaption: true,\n });\n};\n\nconst buildAssetChildren = ({\n image,\n video,\n}: Pick<HeroOverlayProps, 'image' | 'video'>): ElementVisual[] => {\n if (video && video instanceof HTMLVideoElement) {\n return [createVideoAsset(video)];\n }\n\n if (image) {\n return [createImageAsset(image)];\n }\n\n return [assets.image.placeholder.fearlessForward()];\n};\n\nconst createAsset = ({\n image,\n video,\n includesAnimation,\n}: Pick<HeroOverlayProps, 'image' | 'video' | 'includesAnimation'>) => {\n const children = buildAssetChildren({ image, video });\n\n if (children.length === 0) {\n return null;\n }\n\n return ElementModel.createDiv({\n className: 'umd-hero-overlay__asset',\n children,\n elementStyles: {\n element: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n position: 'absolute',\n width: '60%',\n height: `calc(100% - ${Styles.token.spacing['5xl']})`,\n right: 0,\n top: 0,\n overflow: 'visible',\n\n ...(includesAnimation && {\n [`@media (prefers-reduced-motion: no-preference)`]: {\n animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n },\n }),\n },\n\n ['& img, & video']: {\n height: '100%',\n minHeight: '300px',\n },\n },\n },\n });\n};\n\nconst createHeadline = (props: Pick<HeroOverlayProps, '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 headlineElement = ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles: {\n element: {\n textTransform: 'uppercase',\n textWrap: 'pretty',\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n isThemeDark: true,\n });\n\n return headlineElement;\n};\n\nconst createTextContent = (\n props: Pick<HeroOverlayProps, 'eyebrow' | 'headline' | 'text' | 'actions'>,\n) => {\n const textLockupElement = textLockup.large({\n ribbon: props.eyebrow,\n headlineComposite: createHeadline(props),\n text: props.text,\n actions: props.actions,\n isThemeDark: true,\n });\n\n return ElementModel.createDiv({\n className: 'umd-hero-overlay__text-content',\n children: [textLockupElement],\n elementStyles: {\n element: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n maxWidth: '55%',\n },\n\n [`& .${Styles.element.text.rich.simpleLargeDark.className}`]: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n maxWidth: '60%',\n },\n },\n },\n },\n });\n};\n\nconst createText = (\n props: Pick<\n HeroOverlayProps,\n 'eyebrow' | 'headline' | 'text' | 'actions' | 'includesAnimation'\n >,\n) => {\n const { includesAnimation } = props;\n const textContent = createTextContent(props);\n\n const lock = ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [textContent],\n elementStyles: {\n element: {\n height: '100%',\n width: '100%',\n position: 'relative',\n },\n },\n });\n\n return ElementModel.createDiv({\n className: 'umd-hero-overlay__text',\n children: [lock],\n elementStyles: {\n element: {\n padding: `${Styles.token.spacing.lg} 0`,\n display: 'flex',\n position: 'relative',\n zIndex: 999,\n width: '100%',\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n padding: `${Styles.token.spacing['5xl']} 0`,\n\n ...(includesAnimation && {\n [`@media (prefers-reduced-motion: no-preference)`]: {\n animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n },\n }),\n },\n },\n },\n });\n};\n\nexport default (props: HeroOverlayProps) => {\n const text = createText(props);\n const asset = createAsset(props);\n\n const children: ElementVisual[] = [text];\n if (asset) {\n children.push(asset);\n }\n\n const container = ElementModel.createDiv({\n className: 'umd-hero-overlay__container',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n backgroundColor: Styles.token.color.black,\n overflow: 'clip',\n\n [`@container (${Styles.token.media.queries.large.max})`]: {\n display: 'flex',\n flexDirection: 'column-reverse',\n },\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n minHeight: '640px',\n display: 'flex',\n alignItems: 'center',\n\n ['&:before']: {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: '50px',\n top: 0,\n height: '100%',\n background:\n 'linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)',\n zIndex: 999,\n },\n },\n\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n minHeight: '764px',\n },\n },\n },\n });\n\n const composite = ElementModel.createDiv({\n className: 'umd-hero-overlay',\n children: [container],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n },\n },\n });\n\n composite.styles += keyFrameHeroResize;\n composite.styles += keyFrameHeroSlideUp;\n\n return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","ElementModel.createDiv","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"overlay.mjs","sources":["../../../source/composite/hero/overlay.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroOverlayProps } from './_types';\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\nconst keyFrameHeroResize = `\n @keyframes hero-overlay-resize {\n from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n }\n`;\n\nconst keyFrameHeroSlideUp = `\n @keyframes 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 createVideoAsset = (video: HTMLVideoElement) => {\n return assets.video.observedAutoPlay({\n video,\n isScaled: true,\n });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n return assets.image.background({\n element: image,\n isScaled: true,\n isGifAllowed: true,\n isShowCaption: true,\n });\n};\n\nconst buildAssetChildren = ({\n image,\n video,\n}: Pick<HeroOverlayProps, 'image' | 'video'>): ElementVisual[] => {\n if (video && video instanceof HTMLVideoElement) {\n return [createVideoAsset(video)];\n }\n\n if (image) {\n return [createImageAsset(image)];\n }\n\n return [assets.image.placeholder.fearlessForward()];\n};\n\nconst createAsset = ({\n image,\n video,\n includesAnimation,\n}: Pick<HeroOverlayProps, 'image' | 'video' | 'includesAnimation'>) => {\n const children = buildAssetChildren({ image, video });\n\n if (children.length === 0) {\n return null;\n }\n\n return ElementModel.createDiv({\n className: 'umd-hero-overlay__asset',\n children,\n elementStyles: {\n element: {\n [`@media (${Styles.token.media.queries.large.max})`]: {\n [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {\n minHeight: '56vw',\n display: 'grid',\n },\n },\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n position: 'absolute',\n width: '60%',\n height: `calc(100% - ${Styles.token.spacing['5xl']})`,\n right: 0,\n top: 0,\n overflow: 'visible',\n\n ...(includesAnimation && {\n [`@media (prefers-reduced-motion: no-preference)`]: {\n animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n },\n }),\n },\n\n ['& img, & video']: {\n height: '100%',\n minHeight: '300px',\n },\n },\n },\n });\n};\n\nconst createHeadline = (props: Pick<HeroOverlayProps, '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 headlineElement = ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles: {\n element: {\n textTransform: 'uppercase',\n textWrap: 'pretty',\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n isThemeDark: true,\n });\n\n return headlineElement;\n};\n\nconst createTextContent = (\n props: Pick<HeroOverlayProps, 'eyebrow' | 'headline' | 'text' | 'actions'>,\n) => {\n const textLockupElement = textLockup.large({\n ribbon: props.eyebrow,\n headlineComposite: createHeadline(props),\n text: props.text,\n actions: props.actions,\n isThemeDark: true,\n });\n\n return ElementModel.createDiv({\n className: 'umd-hero-overlay__text-content',\n children: [textLockupElement],\n elementStyles: {\n element: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n maxWidth: '55%',\n },\n\n [`& .${Styles.element.text.rich.simpleLargeDark.className}`]: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n maxWidth: '60%',\n },\n },\n },\n },\n });\n};\n\nconst createText = (\n props: Pick<\n HeroOverlayProps,\n 'eyebrow' | 'headline' | 'text' | 'actions' | 'includesAnimation'\n >,\n) => {\n const { includesAnimation } = props;\n const textContent = createTextContent(props);\n\n const lock = ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [textContent],\n elementStyles: {\n element: {\n height: '100%',\n width: '100%',\n position: 'relative',\n },\n },\n });\n\n return ElementModel.createDiv({\n className: 'umd-hero-overlay__text',\n children: [lock],\n elementStyles: {\n element: {\n padding: `${Styles.token.spacing.lg} 0`,\n display: 'flex',\n position: 'relative',\n zIndex: 999,\n width: '100%',\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n padding: `${Styles.token.spacing['5xl']} 0`,\n\n ...(includesAnimation && {\n [`@media (prefers-reduced-motion: no-preference)`]: {\n animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n },\n }),\n },\n },\n },\n });\n};\n\nexport default (props: HeroOverlayProps) => {\n const text = createText(props);\n const asset = createAsset(props);\n\n const children: ElementVisual[] = [text];\n if (asset) {\n children.push(asset);\n }\n\n const container = ElementModel.createDiv({\n className: 'umd-hero-overlay__container',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n backgroundColor: Styles.token.color.black,\n overflow: 'clip',\n\n [`@container (${Styles.token.media.queries.large.max})`]: {\n display: 'flex',\n flexDirection: 'column-reverse',\n },\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n minHeight: '640px',\n display: 'flex',\n alignItems: 'center',\n\n ['&:before']: {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: '50px',\n top: 0,\n height: '100%',\n background:\n 'linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)',\n zIndex: 999,\n },\n },\n\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n minHeight: '764px',\n },\n },\n },\n });\n\n const composite = ElementModel.createDiv({\n className: 'umd-hero-overlay',\n children: [container],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n },\n },\n });\n\n composite.styles += keyFrameHeroResize;\n composite.styles += keyFrameHeroSlideUp;\n\n return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","ElementModel.createDiv","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/standard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/standard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;yBAsQlC,OAAO,iBAAiB;;;;;AAAxC,wBA+CE"}
|
|
@@ -193,7 +193,8 @@ const createText = (props) => {
|
|
|
193
193
|
const {
|
|
194
194
|
isTextCenter = false,
|
|
195
195
|
isHeightSmall = false,
|
|
196
|
-
includesAnimation
|
|
196
|
+
includesAnimation,
|
|
197
|
+
isThemeDark
|
|
197
198
|
} = props;
|
|
198
199
|
const text = large({
|
|
199
200
|
headlineComposite: createHeadline(props),
|
|
@@ -260,7 +261,7 @@ const createText = (props) => {
|
|
|
260
261
|
});
|
|
261
262
|
};
|
|
262
263
|
const standard = (props) => {
|
|
263
|
-
const { isHeightSmall } = props;
|
|
264
|
+
const { isHeightSmall, isThemeDark } = props;
|
|
264
265
|
const asset = createAsset(props);
|
|
265
266
|
const text = createText(props);
|
|
266
267
|
const composite = index.createDiv({
|
|
@@ -271,6 +272,9 @@ const standard = (props) => {
|
|
|
271
272
|
position: "relative",
|
|
272
273
|
overflow: "hidden",
|
|
273
274
|
containerType: "inline-size",
|
|
275
|
+
...isThemeDark && {
|
|
276
|
+
backgroundColor: Styles__namespace.token.color.black
|
|
277
|
+
},
|
|
274
278
|
[`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
|
|
275
279
|
...!isHeightSmall && {
|
|
276
280
|
height: "75vh",
|
|
@@ -285,8 +289,10 @@ const standard = (props) => {
|
|
|
285
289
|
},
|
|
286
290
|
subElement: {
|
|
287
291
|
[`@container (${Styles__namespace.token.media.queries.large.max})`]: {
|
|
288
|
-
[
|
|
289
|
-
|
|
292
|
+
[`*:not(.${Styles__namespace.element.asset.image.caption.className})`]: {
|
|
293
|
+
...!isThemeDark && {
|
|
294
|
+
color: `${Styles__namespace.token.color.black} !important`
|
|
295
|
+
}
|
|
290
296
|
}
|
|
291
297
|
}
|
|
292
298
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"standard.js","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStandardProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n SLIDE_UP: {\n DURATION: '1s',\n TRANSFORM: {\n FROM: 'translateY(25px)',\n TO: 'translateY(0)',\n },\n OPACITY: {\n FROM: 0.2,\n TO: 1,\n },\n },\n SCALE_DOWN: {\n DURATION: '1s',\n TRANSFORM: {\n FROM: 'scale(1.1)',\n TO: 'scale(1)',\n },\n },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n @keyframes 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 keyFrameHeroScaleDown = `\n @keyframes hero-scale-down {\n from {\n transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n }\n to {\n transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n }\n }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n return assets.video.observedAutoPlay({\n video,\n isScaled: true,\n });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n return assets.image.background({\n element: image,\n isScaled: true,\n isGifAllowed: true,\n isShowCaption: true,\n });\n};\n\nconst buildAssetChildren = ({\n image,\n video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementVisual[] => {\n const children: ElementVisual[] = [];\n\n if (video) {\n children.push(createVideoAsset(video));\n }\n\n if (image && !video) {\n children.push(createImageAsset(image));\n }\n\n if (!image && !video) {\n children.push(assets.image.placeholder.fearlessForward());\n }\n\n return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n return {\n element: {\n [`@container (${Styles.token.media.queries.large.max})`]: {\n aspectRatio: '16 / 9',\n },\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n },\n\n [`&:before`]: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n background:\n 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n zIndex: '99',\n },\n },\n\n ['& img']: {\n ...(includesAnimation && {\n [`@media (prefers-reduced-motion: no-preference)`]: {\n animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n },\n }),\n },\n },\n };\n};\n\nconst createAsset = ({\n image,\n video,\n includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n const children = buildAssetChildren({ image, video });\n const elementStyles = buildAssetStyles(includesAnimation);\n\n return ElementModel.createDiv({\n className: 'umd-hero-default__asset',\n children,\n elementStyles,\n });\n};\n\nconst createHeadline = (\n props: Pick<HeroStandardProps, 'headline' | 'isHeightSmall' | 'isThemeDark'>,\n) => {\n const { headline, isHeightSmall, isThemeDark } = props;\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n if (!headline) return null;\n\n const tabletStyles = {\n maxWidth: '700px',\n marginLeft: 'auto',\n marginRight: 'auto',\n color: Styles.token.color.white,\n };\n\n const desktopStyles = {\n maxWidth: '816px',\n ...(isOverwriteHeadline && { fontSize: '80px' }),\n };\n\n const headlineElement = ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles: {\n element: {\n textTransform: 'uppercase',\n [`@media (${Styles.token.media.queries.tablet.min})`]: tabletStyles,\n [`@media (${Styles.token.media.queries.desktop.min})`]: desktopStyles,\n },\n subElement: {\n color: 'currentColor',\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.sm,\n },\n },\n isThemeDark,\n });\n\n return headlineElement;\n};\n\nconst createText = (props: HeroStandardProps) => {\n const {\n isTextCenter = false,\n isHeightSmall = false,\n includesAnimation,\n } = props;\n\n const text = textLockup.large({\n headlineComposite: createHeadline(props),\n ribbon: props.eyebrow,\n textLargest: props.text,\n actions: props.actions,\n isThemeDark: true,\n });\n\n const textContainer = ElementModel.createDiv({\n className: 'umd-hero-default__text',\n children: [text],\n elementStyles: {\n element: {\n display: 'flex',\n alignItems: 'flex-end',\n height: '100%',\n ...(isTextCenter && {\n textAlign: 'center',\n justifyContent: 'center',\n marginLeft: 'auto',\n marginRight: 'auto',\n maxWidth: '928px',\n }),\n\n ...(includesAnimation && {\n animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n }),\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n maxWidth: '736px',\n paddingTop: `${Styles.token.spacing['2xl']}`,\n paddingBottom: `${Styles.token.spacing['2xl']}`,\n ...(!isTextCenter && {\n width: '80%',\n }),\n ...(isHeightSmall && {\n minHeight: '400px',\n alignItems: 'flex-end',\n display: 'flex',\n }),\n },\n\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n maxWidth: '808px',\n },\n },\n },\n });\n\n return ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [textContainer],\n elementStyles: {\n element: {\n height: '100%',\n width: '100%',\n position: 'relative',\n zIndex: 99,\n\n [`@container (${Styles.token.media.queries.tablet.max})`]: {\n paddingTop: `${Styles.token.spacing.sm}`,\n\n [`&:has(.${Styles.element.text.decoration.ribbon.className})`]: {\n paddingTop: `0`,\n marginTop: '-14px',\n },\n },\n },\n },\n });\n};\n\nexport default (props: HeroStandardProps) => {\n const { isHeightSmall } = props;\n const asset = createAsset(props);\n const text = createText(props);\n\n const composite = ElementModel.createDiv({\n className: 'umd-hero-default',\n children: [asset, text],\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n containerType: 'inline-size',\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n ...(!isHeightSmall && {\n height: '75vh',\n minHeight: '480px',\n }),\n },\n\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(!isHeightSmall && {\n minHeight: '720px',\n }),\n },\n },\n subElement: {\n [`@container (${Styles.token.media.queries.large.max})`]: {\n ['*']: {\n color: `${Styles.token.color.black} !important`,\n },\n },\n },\n },\n });\n\n composite.styles += keyFrameHeroScaleDown;\n composite.styles += keyFrameHeroSlideUp;\n\n return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","Styles","ElementModel.createDiv","headline","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,mBAAmB;AAAA,EACvB,UAAU;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,IAEN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,YAAY;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,MAAM,sBAAsB;AAAA;AAAA;AAAA,mBAGT,iBAAiB,SAAS,UAAU,IAAI;AAAA,iBAC1C,iBAAiB,SAAS,QAAQ,IAAI;AAAA;AAAA;AAAA,mBAGpC,iBAAiB,SAAS,UAAU,EAAE;AAAA,iBACxC,iBAAiB,SAAS,QAAQ,EAAE;AAAA;AAAA;AAAA;AAKrD,MAAM,wBAAwB;AAAA;AAAA;AAAA,mBAGX,iBAAiB,WAAW,UAAU,IAAI;AAAA;AAAA;AAAA,mBAG1C,iBAAiB,WAAW,UAAU,EAAE;AAAA;AAAA;AAAA;AAK3D,MAAM,mBAAmB,CAAC,UAA4B;AACpD,SAAOA,iBAA8B;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,EAAA,CACX;AACH;AAEA,MAAM,mBAAmB,CAAC,UAA4B;AACpD,SAAOC,WAAwB;AAAA,IAC7B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,EAAA,CAChB;AACH;AAEA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,WAA4B,CAAA;AAElC,MAAI,OAAO;AACT,aAAS,KAAK,iBAAiB,KAAK,CAAC;AAAA,EACvC;AAEA,MAAI,SAAS,CAAC,OAAO;AACnB,aAAS,KAAK,iBAAiB,KAAK,CAAC;AAAA,EACvC;AAEA,MAAI,CAAC,SAAS,CAAC,OAAO;AACpB,aAAS,KAAKC,YAAyB,iBAAiB;AAAA,EAC1D;AAEA,SAAO;AACT;AAEA,MAAM,mBAAmB,CAAC,sBAAgC;AACxD,SAAO;AAAA,IACL,SAAS;AAAA,MACP,CAAC,eAAeC,kBAAO,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,QACxD,aAAa;AAAA,MAAA;AAAA,MAGf,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QACzD,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MAAA;AAAA,MAGZ,CAAC,UAAU,GAAG;AAAA,QACZ,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACzD,SAAS;AAAA,UACT,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,YACE;AAAA,UACF,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,MAGF,CAAC,OAAO,GAAG;AAAA,QACT,GAAI,qBAAqB;AAAA,UACvB,CAAC,gDAAgD,GAAG;AAAA,YAClD,WAAW,4BAA4B,iBAAiB,WAAW,QAAQ;AAAA,UAAA;AAAA,QAC7E;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAAwE;AACtE,QAAM,WAAW,mBAAmB,EAAE,OAAO,OAAO;AACpD,QAAM,gBAAgB,iBAAiB,iBAAiB;AAExD,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EAAA,CACD;AACH;AAEA,MAAM,iBAAiB,CACrB,UACG;AACH,QAAM,YAAEC,YAAU,eAAe,YAAA,IAAgB;AACjD,QAAM,iBAAiBA,YAAU,aAAa,KAAA,EAAO,UAAU;AAC/D,QAAM,sBAAsB,iBAAiB,MAAM;AAEnD,MAAI,CAACA,WAAU,QAAO;AAEtB,QAAM,eAAe;AAAA,IACnB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,OAAOF,kBAAO,MAAM,MAAM;AAAA,EAAA;AAG5B,QAAM,gBAAgB;AAAA,IACpB,UAAU;AAAA,IACV,GAAI,uBAAuB,EAAE,UAAU,OAAA;AAAA,EAAO;AAGhD,QAAM,kBAAkBG,SAAAA,mBAAyC;AAAA,IAC/D,SAASD;AAAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,CAAC,WAAWF,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QACvD,CAAC,WAAWA,kBAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,MAAA;AAAA,MAE1D,YAAY;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,MAET,cAAc;AAAA,QACZ,WAAWA,kBAAO,MAAM,QAAQ;AAAA,MAAA;AAAA,IAClC;AAAA,IAEF;AAAA,EAAA,CACD;AAED,SAAO;AACT;AAEA,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB;AAAA,EAAA,IACE;AAEJ,QAAM,OAAOI,MAAiB;AAAA,IAC5B,mBAAmB,eAAe,KAAK;AAAA,IACvC,QAAQ,MAAM;AAAA,IACd,aAAa,MAAM;AAAA,IACnB,SAAS,MAAM;AAAA,IACf,aAAa;AAAA,EAAA,CACd;AAED,QAAM,gBAAgBH,MAAAA,UAAuB;AAAA,IAC3C,WAAW;AAAA,IACX,UAAU,CAAC,IAAI;AAAA,IACf,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,GAAI,gBAAgB;AAAA,UAClB,WAAW;AAAA,UACX,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,aAAa;AAAA,UACb,UAAU;AAAA,QAAA;AAAA,QAGZ,GAAI,qBAAqB;AAAA,UACvB,WAAW,0BAA0B,iBAAiB,SAAS,QAAQ;AAAA,QAAA;AAAA,QAGzE,CAAC,eAAeD,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACzD,UAAU;AAAA,UACV,YAAY,GAAGA,kBAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,UAC1C,eAAe,GAAGA,kBAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,UAC7C,GAAI,CAAC,gBAAgB;AAAA,YACnB,OAAO;AAAA,UAAA;AAAA,UAET,GAAI,iBAAiB;AAAA,YACnB,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAGF,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UAC1D,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAOK,6BAA0C;AAAA,IAC/C,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,UAAU,CAAC,aAAa;AAAA,IACxB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,CAAC,eAAeL,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACzD,YAAY,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,UAEtC,CAAC,UAAUA,kBAAO,QAAQ,KAAK,WAAW,OAAO,SAAS,GAAG,GAAG;AAAA,YAC9D,YAAY;AAAA,YACZ,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAA,WAAe,CAAC,UAA6B;AAC3C,QAAM,EAAE,kBAAkB;AAC1B,QAAM,QAAQ,YAAY,KAAK;AAC/B,QAAM,OAAO,WAAW,KAAK;AAE7B,QAAM,YAAYC,MAAAA,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,UAAU,CAAC,OAAO,IAAI;AAAA,IACtB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAe;AAAA,QACf,CAAC,eAAeD,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACzD,GAAI,CAAC,iBAAiB;AAAA,YACpB,QAAQ;AAAA,YACR,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,QAGF,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UAC1D,GAAI,CAAC,iBAAiB;AAAA,YACpB,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,MAEF,YAAY;AAAA,QACV,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,UACxD,CAAC,GAAG,GAAG;AAAA,YACL,OAAO,GAAGA,kBAAO,MAAM,MAAM,KAAK;AAAA,UAAA;AAAA,QACpC;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,YAAU,UAAU;AACpB,YAAU,UAAU;AAEpB,SAAO;AACT;;"}
|
|
1
|
+
{"version":3,"file":"standard.js","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStandardProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n SLIDE_UP: {\n DURATION: '1s',\n TRANSFORM: {\n FROM: 'translateY(25px)',\n TO: 'translateY(0)',\n },\n OPACITY: {\n FROM: 0.2,\n TO: 1,\n },\n },\n SCALE_DOWN: {\n DURATION: '1s',\n TRANSFORM: {\n FROM: 'scale(1.1)',\n TO: 'scale(1)',\n },\n },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n @keyframes 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 keyFrameHeroScaleDown = `\n @keyframes hero-scale-down {\n from {\n transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n }\n to {\n transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n }\n }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n return assets.video.observedAutoPlay({\n video,\n isScaled: true,\n });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n return assets.image.background({\n element: image,\n isScaled: true,\n isGifAllowed: true,\n isShowCaption: true,\n });\n};\n\nconst buildAssetChildren = ({\n image,\n video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementVisual[] => {\n const children: ElementVisual[] = [];\n\n if (video) {\n children.push(createVideoAsset(video));\n }\n\n if (image && !video) {\n children.push(createImageAsset(image));\n }\n\n if (!image && !video) {\n children.push(assets.image.placeholder.fearlessForward());\n }\n\n return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n return {\n element: {\n [`@container (${Styles.token.media.queries.large.max})`]: {\n aspectRatio: '16 / 9',\n },\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n },\n\n [`&:before`]: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n background:\n 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n zIndex: '99',\n },\n },\n\n ['& img']: {\n ...(includesAnimation && {\n [`@media (prefers-reduced-motion: no-preference)`]: {\n animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n },\n }),\n },\n },\n };\n};\n\nconst createAsset = ({\n image,\n video,\n includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n const children = buildAssetChildren({ image, video });\n const elementStyles = buildAssetStyles(includesAnimation);\n\n return ElementModel.createDiv({\n className: 'umd-hero-default__asset',\n children,\n elementStyles,\n });\n};\n\nconst createHeadline = (\n props: Pick<HeroStandardProps, 'headline' | 'isHeightSmall' | 'isThemeDark'>,\n) => {\n const { headline, isHeightSmall, isThemeDark } = props;\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n if (!headline) return null;\n\n const tabletStyles = {\n maxWidth: '700px',\n marginLeft: 'auto',\n marginRight: 'auto',\n color: Styles.token.color.white,\n };\n\n const desktopStyles = {\n maxWidth: '816px',\n ...(isOverwriteHeadline && { fontSize: '80px' }),\n };\n\n const headlineElement = ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles: {\n element: {\n textTransform: 'uppercase',\n [`@media (${Styles.token.media.queries.tablet.min})`]: tabletStyles,\n [`@media (${Styles.token.media.queries.desktop.min})`]: desktopStyles,\n },\n subElement: {\n color: 'currentColor',\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.sm,\n },\n },\n isThemeDark,\n });\n\n return headlineElement;\n};\n\nconst createText = (props: HeroStandardProps) => {\n const {\n isTextCenter = false,\n isHeightSmall = false,\n includesAnimation,\n isThemeDark,\n } = props;\n\n const text = textLockup.large({\n headlineComposite: createHeadline(props),\n ribbon: props.eyebrow,\n textLargest: props.text,\n actions: props.actions,\n isThemeDark: true,\n });\n\n const textContainer = ElementModel.createDiv({\n className: 'umd-hero-default__text',\n children: [text],\n elementStyles: {\n element: {\n display: 'flex',\n alignItems: 'flex-end',\n height: '100%',\n ...(isTextCenter && {\n textAlign: 'center',\n justifyContent: 'center',\n marginLeft: 'auto',\n marginRight: 'auto',\n maxWidth: '928px',\n }),\n\n ...(includesAnimation && {\n animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n }),\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n maxWidth: '736px',\n paddingTop: `${Styles.token.spacing['2xl']}`,\n paddingBottom: `${Styles.token.spacing['2xl']}`,\n ...(!isTextCenter && {\n width: '80%',\n }),\n ...(isHeightSmall && {\n minHeight: '400px',\n alignItems: 'flex-end',\n display: 'flex',\n }),\n },\n\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n maxWidth: '808px',\n },\n },\n },\n });\n\n return ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [textContainer],\n elementStyles: {\n element: {\n height: '100%',\n width: '100%',\n position: 'relative',\n zIndex: 99,\n\n [`@container (${Styles.token.media.queries.tablet.max})`]: {\n paddingTop: `${Styles.token.spacing.sm}`,\n\n [`&:has(.${Styles.element.text.decoration.ribbon.className})`]: {\n paddingTop: `0`,\n marginTop: '-14px',\n },\n },\n },\n },\n });\n};\n\nexport default (props: HeroStandardProps) => {\n const { isHeightSmall, isThemeDark } = props;\n const asset = createAsset(props);\n const text = createText(props);\n\n const composite = ElementModel.createDiv({\n className: 'umd-hero-default',\n children: [asset, text],\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n containerType: 'inline-size',\n\n ...(isThemeDark && {\n backgroundColor: Styles.token.color.black,\n }),\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n ...(!isHeightSmall && {\n height: '75vh',\n minHeight: '480px',\n }),\n },\n\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(!isHeightSmall && {\n minHeight: '720px',\n }),\n },\n },\n subElement: {\n [`@container (${Styles.token.media.queries.large.max})`]: {\n [`*:not(.${Styles.element.asset.image.caption.className})`]: {\n ...(!isThemeDark && {\n color: `${Styles.token.color.black} !important`,\n }),\n },\n },\n },\n },\n });\n\n composite.styles += keyFrameHeroScaleDown;\n composite.styles += keyFrameHeroSlideUp;\n\n return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","Styles","ElementModel.createDiv","headline","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|
|
@@ -175,7 +175,8 @@ const createText = (props) => {
|
|
|
175
175
|
const {
|
|
176
176
|
isTextCenter = false,
|
|
177
177
|
isHeightSmall = false,
|
|
178
|
-
includesAnimation
|
|
178
|
+
includesAnimation,
|
|
179
|
+
isThemeDark
|
|
179
180
|
} = props;
|
|
180
181
|
const text = large({
|
|
181
182
|
headlineComposite: createHeadline(props),
|
|
@@ -242,7 +243,7 @@ const createText = (props) => {
|
|
|
242
243
|
});
|
|
243
244
|
};
|
|
244
245
|
const standard = (props) => {
|
|
245
|
-
const { isHeightSmall } = props;
|
|
246
|
+
const { isHeightSmall, isThemeDark } = props;
|
|
246
247
|
const asset = createAsset(props);
|
|
247
248
|
const text = createText(props);
|
|
248
249
|
const composite = createDiv({
|
|
@@ -253,6 +254,9 @@ const standard = (props) => {
|
|
|
253
254
|
position: "relative",
|
|
254
255
|
overflow: "hidden",
|
|
255
256
|
containerType: "inline-size",
|
|
257
|
+
...isThemeDark && {
|
|
258
|
+
backgroundColor: Styles.token.color.black
|
|
259
|
+
},
|
|
256
260
|
[`@container (${Styles.token.media.queries.tablet.min})`]: {
|
|
257
261
|
...!isHeightSmall && {
|
|
258
262
|
height: "75vh",
|
|
@@ -267,8 +271,10 @@ const standard = (props) => {
|
|
|
267
271
|
},
|
|
268
272
|
subElement: {
|
|
269
273
|
[`@container (${Styles.token.media.queries.large.max})`]: {
|
|
270
|
-
[
|
|
271
|
-
|
|
274
|
+
[`*:not(.${Styles.element.asset.image.caption.className})`]: {
|
|
275
|
+
...!isThemeDark && {
|
|
276
|
+
color: `${Styles.token.color.black} !important`
|
|
277
|
+
}
|
|
272
278
|
}
|
|
273
279
|
}
|
|
274
280
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"standard.mjs","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStandardProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n SLIDE_UP: {\n DURATION: '1s',\n TRANSFORM: {\n FROM: 'translateY(25px)',\n TO: 'translateY(0)',\n },\n OPACITY: {\n FROM: 0.2,\n TO: 1,\n },\n },\n SCALE_DOWN: {\n DURATION: '1s',\n TRANSFORM: {\n FROM: 'scale(1.1)',\n TO: 'scale(1)',\n },\n },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n @keyframes 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 keyFrameHeroScaleDown = `\n @keyframes hero-scale-down {\n from {\n transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n }\n to {\n transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n }\n }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n return assets.video.observedAutoPlay({\n video,\n isScaled: true,\n });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n return assets.image.background({\n element: image,\n isScaled: true,\n isGifAllowed: true,\n isShowCaption: true,\n });\n};\n\nconst buildAssetChildren = ({\n image,\n video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementVisual[] => {\n const children: ElementVisual[] = [];\n\n if (video) {\n children.push(createVideoAsset(video));\n }\n\n if (image && !video) {\n children.push(createImageAsset(image));\n }\n\n if (!image && !video) {\n children.push(assets.image.placeholder.fearlessForward());\n }\n\n return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n return {\n element: {\n [`@container (${Styles.token.media.queries.large.max})`]: {\n aspectRatio: '16 / 9',\n },\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n },\n\n [`&:before`]: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n background:\n 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n zIndex: '99',\n },\n },\n\n ['& img']: {\n ...(includesAnimation && {\n [`@media (prefers-reduced-motion: no-preference)`]: {\n animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n },\n }),\n },\n },\n };\n};\n\nconst createAsset = ({\n image,\n video,\n includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n const children = buildAssetChildren({ image, video });\n const elementStyles = buildAssetStyles(includesAnimation);\n\n return ElementModel.createDiv({\n className: 'umd-hero-default__asset',\n children,\n elementStyles,\n });\n};\n\nconst createHeadline = (\n props: Pick<HeroStandardProps, 'headline' | 'isHeightSmall' | 'isThemeDark'>,\n) => {\n const { headline, isHeightSmall, isThemeDark } = props;\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n if (!headline) return null;\n\n const tabletStyles = {\n maxWidth: '700px',\n marginLeft: 'auto',\n marginRight: 'auto',\n color: Styles.token.color.white,\n };\n\n const desktopStyles = {\n maxWidth: '816px',\n ...(isOverwriteHeadline && { fontSize: '80px' }),\n };\n\n const headlineElement = ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles: {\n element: {\n textTransform: 'uppercase',\n [`@media (${Styles.token.media.queries.tablet.min})`]: tabletStyles,\n [`@media (${Styles.token.media.queries.desktop.min})`]: desktopStyles,\n },\n subElement: {\n color: 'currentColor',\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.sm,\n },\n },\n isThemeDark,\n });\n\n return headlineElement;\n};\n\nconst createText = (props: HeroStandardProps) => {\n const {\n isTextCenter = false,\n isHeightSmall = false,\n includesAnimation,\n } = props;\n\n const text = textLockup.large({\n headlineComposite: createHeadline(props),\n ribbon: props.eyebrow,\n textLargest: props.text,\n actions: props.actions,\n isThemeDark: true,\n });\n\n const textContainer = ElementModel.createDiv({\n className: 'umd-hero-default__text',\n children: [text],\n elementStyles: {\n element: {\n display: 'flex',\n alignItems: 'flex-end',\n height: '100%',\n ...(isTextCenter && {\n textAlign: 'center',\n justifyContent: 'center',\n marginLeft: 'auto',\n marginRight: 'auto',\n maxWidth: '928px',\n }),\n\n ...(includesAnimation && {\n animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n }),\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n maxWidth: '736px',\n paddingTop: `${Styles.token.spacing['2xl']}`,\n paddingBottom: `${Styles.token.spacing['2xl']}`,\n ...(!isTextCenter && {\n width: '80%',\n }),\n ...(isHeightSmall && {\n minHeight: '400px',\n alignItems: 'flex-end',\n display: 'flex',\n }),\n },\n\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n maxWidth: '808px',\n },\n },\n },\n });\n\n return ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [textContainer],\n elementStyles: {\n element: {\n height: '100%',\n width: '100%',\n position: 'relative',\n zIndex: 99,\n\n [`@container (${Styles.token.media.queries.tablet.max})`]: {\n paddingTop: `${Styles.token.spacing.sm}`,\n\n [`&:has(.${Styles.element.text.decoration.ribbon.className})`]: {\n paddingTop: `0`,\n marginTop: '-14px',\n },\n },\n },\n },\n });\n};\n\nexport default (props: HeroStandardProps) => {\n const { isHeightSmall } = props;\n const asset = createAsset(props);\n const text = createText(props);\n\n const composite = ElementModel.createDiv({\n className: 'umd-hero-default',\n children: [asset, text],\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n containerType: 'inline-size',\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n ...(!isHeightSmall && {\n height: '75vh',\n minHeight: '480px',\n }),\n },\n\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(!isHeightSmall && {\n minHeight: '720px',\n }),\n },\n },\n subElement: {\n [`@container (${Styles.token.media.queries.large.max})`]: {\n ['*']: {\n color: `${Styles.token.color.black} !important`,\n },\n },\n },\n },\n });\n\n composite.styles += keyFrameHeroScaleDown;\n composite.styles += keyFrameHeroSlideUp;\n\n return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","ElementModel.createDiv","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"standard.mjs","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStandardProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n SLIDE_UP: {\n DURATION: '1s',\n TRANSFORM: {\n FROM: 'translateY(25px)',\n TO: 'translateY(0)',\n },\n OPACITY: {\n FROM: 0.2,\n TO: 1,\n },\n },\n SCALE_DOWN: {\n DURATION: '1s',\n TRANSFORM: {\n FROM: 'scale(1.1)',\n TO: 'scale(1)',\n },\n },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n @keyframes 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 keyFrameHeroScaleDown = `\n @keyframes hero-scale-down {\n from {\n transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n }\n to {\n transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n }\n }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n return assets.video.observedAutoPlay({\n video,\n isScaled: true,\n });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n return assets.image.background({\n element: image,\n isScaled: true,\n isGifAllowed: true,\n isShowCaption: true,\n });\n};\n\nconst buildAssetChildren = ({\n image,\n video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementVisual[] => {\n const children: ElementVisual[] = [];\n\n if (video) {\n children.push(createVideoAsset(video));\n }\n\n if (image && !video) {\n children.push(createImageAsset(image));\n }\n\n if (!image && !video) {\n children.push(assets.image.placeholder.fearlessForward());\n }\n\n return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n return {\n element: {\n [`@container (${Styles.token.media.queries.large.max})`]: {\n aspectRatio: '16 / 9',\n },\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n },\n\n [`&:before`]: {\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n background:\n 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n zIndex: '99',\n },\n },\n\n ['& img']: {\n ...(includesAnimation && {\n [`@media (prefers-reduced-motion: no-preference)`]: {\n animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n },\n }),\n },\n },\n };\n};\n\nconst createAsset = ({\n image,\n video,\n includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n const children = buildAssetChildren({ image, video });\n const elementStyles = buildAssetStyles(includesAnimation);\n\n return ElementModel.createDiv({\n className: 'umd-hero-default__asset',\n children,\n elementStyles,\n });\n};\n\nconst createHeadline = (\n props: Pick<HeroStandardProps, 'headline' | 'isHeightSmall' | 'isThemeDark'>,\n) => {\n const { headline, isHeightSmall, isThemeDark } = props;\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n if (!headline) return null;\n\n const tabletStyles = {\n maxWidth: '700px',\n marginLeft: 'auto',\n marginRight: 'auto',\n color: Styles.token.color.white,\n };\n\n const desktopStyles = {\n maxWidth: '816px',\n ...(isOverwriteHeadline && { fontSize: '80px' }),\n };\n\n const headlineElement = ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles: {\n element: {\n textTransform: 'uppercase',\n [`@media (${Styles.token.media.queries.tablet.min})`]: tabletStyles,\n [`@media (${Styles.token.media.queries.desktop.min})`]: desktopStyles,\n },\n subElement: {\n color: 'currentColor',\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.sm,\n },\n },\n isThemeDark,\n });\n\n return headlineElement;\n};\n\nconst createText = (props: HeroStandardProps) => {\n const {\n isTextCenter = false,\n isHeightSmall = false,\n includesAnimation,\n isThemeDark,\n } = props;\n\n const text = textLockup.large({\n headlineComposite: createHeadline(props),\n ribbon: props.eyebrow,\n textLargest: props.text,\n actions: props.actions,\n isThemeDark: true,\n });\n\n const textContainer = ElementModel.createDiv({\n className: 'umd-hero-default__text',\n children: [text],\n elementStyles: {\n element: {\n display: 'flex',\n alignItems: 'flex-end',\n height: '100%',\n ...(isTextCenter && {\n textAlign: 'center',\n justifyContent: 'center',\n marginLeft: 'auto',\n marginRight: 'auto',\n maxWidth: '928px',\n }),\n\n ...(includesAnimation && {\n animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n }),\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n maxWidth: '736px',\n paddingTop: `${Styles.token.spacing['2xl']}`,\n paddingBottom: `${Styles.token.spacing['2xl']}`,\n ...(!isTextCenter && {\n width: '80%',\n }),\n ...(isHeightSmall && {\n minHeight: '400px',\n alignItems: 'flex-end',\n display: 'flex',\n }),\n },\n\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n maxWidth: '808px',\n },\n },\n },\n });\n\n return ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [textContainer],\n elementStyles: {\n element: {\n height: '100%',\n width: '100%',\n position: 'relative',\n zIndex: 99,\n\n [`@container (${Styles.token.media.queries.tablet.max})`]: {\n paddingTop: `${Styles.token.spacing.sm}`,\n\n [`&:has(.${Styles.element.text.decoration.ribbon.className})`]: {\n paddingTop: `0`,\n marginTop: '-14px',\n },\n },\n },\n },\n });\n};\n\nexport default (props: HeroStandardProps) => {\n const { isHeightSmall, isThemeDark } = props;\n const asset = createAsset(props);\n const text = createText(props);\n\n const composite = ElementModel.createDiv({\n className: 'umd-hero-default',\n children: [asset, text],\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n containerType: 'inline-size',\n\n ...(isThemeDark && {\n backgroundColor: Styles.token.color.black,\n }),\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n ...(!isHeightSmall && {\n height: '75vh',\n minHeight: '480px',\n }),\n },\n\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(!isHeightSmall && {\n minHeight: '720px',\n }),\n },\n },\n subElement: {\n [`@container (${Styles.token.media.queries.large.max})`]: {\n [`*:not(.${Styles.element.asset.image.caption.className})`]: {\n ...(!isThemeDark && {\n color: `${Styles.token.color.black} !important`,\n }),\n },\n },\n },\n },\n });\n\n composite.styles += keyFrameHeroScaleDown;\n composite.styles += keyFrameHeroSlideUp;\n\n return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","ElementModel.createDiv","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/elements/gif.ts"],"names":[],"mappings":"yBAGgB,WAAW;IAAE,KAAK,EAAE,gBAAgB,CAAA;CAAE;;;;;;AAAtD,
|
|
1
|
+
{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/elements/gif.ts"],"names":[],"mappings":"yBAGgB,WAAW;IAAE,KAAK,EAAE,gBAAgB,CAAA;CAAE;;;;;;AAAtD,wBA6EE"}
|
|
@@ -21,6 +21,13 @@ const gif = ({ image }) => {
|
|
|
21
21
|
if (containerWidth > 0) {
|
|
22
22
|
const calculatedHeight = Math.round(containerWidth * aspectRatio);
|
|
23
23
|
container.style.height = `${calculatedHeight}px`;
|
|
24
|
+
} else {
|
|
25
|
+
container.style.width = `${image.naturalWidth}px`;
|
|
26
|
+
setTimeout(() => {
|
|
27
|
+
const containerWidth2 = container.offsetWidth;
|
|
28
|
+
const calculatedHeight = Math.round(containerWidth2 * aspectRatio);
|
|
29
|
+
container.style.height = `${calculatedHeight}px`;
|
|
30
|
+
}, 100);
|
|
24
31
|
}
|
|
25
32
|
};
|
|
26
33
|
const resizeObserver = new ResizeObserver(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gif.js","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n const container = document.createElement('div');\n\n const calculateHeight = () => {\n if (!image.naturalWidth || !image.naturalHeight) return;\n\n const aspectRatio = image.naturalHeight / image.naturalWidth;\n const containerWidth = container.offsetWidth;\n\n if (containerWidth > 0) {\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n }\n };\n\n const resizeObserver = new ResizeObserver(() => {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n });\n\n if (image.complete && image.naturalWidth) {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n } else {\n image.addEventListener('load', calculateHeight);\n }\n\n setTimeout(() => {\n resizeObserver.observe(container);\n }, 0);\n\n const elementModel = ElementModel.create({\n element: container,\n className: 'media-gif',\n children: [\n assets.image.background({\n element: image,\n isShowCaption: true,\n isScaled: false,\n isGifAllowed: true,\n customStyles: {\n width: 'auto',\n height: '100%',\n display: 'block',\n },\n }),\n ],\n elementStyles: {\n element: {\n maxHeight: '100%',\n maxWidth: '100%',\n position: 'relative',\n display: 'block',\n overflow: 'hidden',\n },\n },\n });\n\n return {\n ...elementModel,\n destroy: () => {\n resizeObserver.disconnect();\n image.removeEventListener('load', calculateHeight);\n },\n };\n};\n"],"names":["ElementModel.create","assets.image.background"],"mappings":";;;;;;;;;;;;;;AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,
|
|
1
|
+
{"version":3,"file":"gif.js","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n const container = document.createElement('div');\n\n const calculateHeight = () => {\n if (!image.naturalWidth || !image.naturalHeight) return;\n\n const aspectRatio = image.naturalHeight / image.naturalWidth;\n const containerWidth = container.offsetWidth;\n\n if (containerWidth > 0) {\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n } else {\n container.style.width = `${image.naturalWidth}px`;\n\n setTimeout(() => {\n const containerWidth = container.offsetWidth;\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n }, 100);\n }\n };\n\n const resizeObserver = new ResizeObserver(() => {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n });\n\n if (image.complete && image.naturalWidth) {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n } else {\n image.addEventListener('load', calculateHeight);\n }\n\n setTimeout(() => {\n resizeObserver.observe(container);\n }, 0);\n\n const elementModel = ElementModel.create({\n element: container,\n className: 'media-gif',\n children: [\n assets.image.background({\n element: image,\n isShowCaption: true,\n isScaled: false,\n isGifAllowed: true,\n customStyles: {\n width: 'auto',\n height: '100%',\n display: 'block',\n },\n }),\n ],\n elementStyles: {\n element: {\n maxHeight: '100%',\n maxWidth: '100%',\n position: 'relative',\n display: 'block',\n overflow: 'hidden',\n },\n },\n });\n\n return {\n ...elementModel,\n destroy: () => {\n resizeObserver.disconnect();\n image.removeEventListener('load', calculateHeight);\n },\n };\n};\n"],"names":["containerWidth","ElementModel.create","assets.image.background"],"mappings":";;;;;;;;;;;;;;AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,MAAAA,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,MACRC,WAAwB;AAAA,QACtB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,cAAc;AAAA,QACd,cAAc;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX,CACD;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;;"}
|
|
@@ -20,6 +20,13 @@ const gif = ({ image }) => {
|
|
|
20
20
|
if (containerWidth > 0) {
|
|
21
21
|
const calculatedHeight = Math.round(containerWidth * aspectRatio);
|
|
22
22
|
container.style.height = `${calculatedHeight}px`;
|
|
23
|
+
} else {
|
|
24
|
+
container.style.width = `${image.naturalWidth}px`;
|
|
25
|
+
setTimeout(() => {
|
|
26
|
+
const containerWidth2 = container.offsetWidth;
|
|
27
|
+
const calculatedHeight = Math.round(containerWidth2 * aspectRatio);
|
|
28
|
+
container.style.height = `${calculatedHeight}px`;
|
|
29
|
+
}, 100);
|
|
23
30
|
}
|
|
24
31
|
};
|
|
25
32
|
const resizeObserver = new ResizeObserver(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gif.mjs","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n const container = document.createElement('div');\n\n const calculateHeight = () => {\n if (!image.naturalWidth || !image.naturalHeight) return;\n\n const aspectRatio = image.naturalHeight / image.naturalWidth;\n const containerWidth = container.offsetWidth;\n\n if (containerWidth > 0) {\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n }\n };\n\n const resizeObserver = new ResizeObserver(() => {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n });\n\n if (image.complete && image.naturalWidth) {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n } else {\n image.addEventListener('load', calculateHeight);\n }\n\n setTimeout(() => {\n resizeObserver.observe(container);\n }, 0);\n\n const elementModel = ElementModel.create({\n element: container,\n className: 'media-gif',\n children: [\n assets.image.background({\n element: image,\n isShowCaption: true,\n isScaled: false,\n isGifAllowed: true,\n customStyles: {\n width: 'auto',\n height: '100%',\n display: 'block',\n },\n }),\n ],\n elementStyles: {\n element: {\n maxHeight: '100%',\n maxWidth: '100%',\n position: 'relative',\n display: 'block',\n overflow: 'hidden',\n },\n },\n });\n\n return {\n ...elementModel,\n destroy: () => {\n resizeObserver.disconnect();\n image.removeEventListener('load', calculateHeight);\n },\n };\n};\n"],"names":["ElementModel.create","assets.image.background"],"mappings":";;;;;;;;;;;;;AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,
|
|
1
|
+
{"version":3,"file":"gif.mjs","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n const container = document.createElement('div');\n\n const calculateHeight = () => {\n if (!image.naturalWidth || !image.naturalHeight) return;\n\n const aspectRatio = image.naturalHeight / image.naturalWidth;\n const containerWidth = container.offsetWidth;\n\n if (containerWidth > 0) {\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n } else {\n container.style.width = `${image.naturalWidth}px`;\n\n setTimeout(() => {\n const containerWidth = container.offsetWidth;\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n }, 100);\n }\n };\n\n const resizeObserver = new ResizeObserver(() => {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n });\n\n if (image.complete && image.naturalWidth) {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n } else {\n image.addEventListener('load', calculateHeight);\n }\n\n setTimeout(() => {\n resizeObserver.observe(container);\n }, 0);\n\n const elementModel = ElementModel.create({\n element: container,\n className: 'media-gif',\n children: [\n assets.image.background({\n element: image,\n isShowCaption: true,\n isScaled: false,\n isGifAllowed: true,\n customStyles: {\n width: 'auto',\n height: '100%',\n display: 'block',\n },\n }),\n ],\n elementStyles: {\n element: {\n maxHeight: '100%',\n maxWidth: '100%',\n position: 'relative',\n display: 'block',\n overflow: 'hidden',\n },\n },\n });\n\n return {\n ...elementModel,\n destroy: () => {\n resizeObserver.disconnect();\n image.removeEventListener('load', calculateHeight);\n },\n };\n};\n"],"names":["containerWidth","ElementModel.create","assets.image.background"],"mappings":";;;;;;;;;;;;;AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,MACRC,eAAwB;AAAA,QACtB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,cAAc;AAAA,QACd,cAAc;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX,CACD;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;"}
|
|
@@ -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;yBAgSe,OAAO,gBAAgB;;;;;AAAvC,wBAgBE"}
|
|
@@ -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 }),\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,cAAc;AACpB,MAAM,eAAe;AACrB,MAAM,cAAc;AAEpB,MAAM,mBAAmB;AAAA,EACvB,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,UAAU;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,IAEN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAEJ;AAGA,MAAM,wBAAwB;AAAA;AAAA,wBAEN,iBAAiB,OAAO,UAAU,IAAI;AAAA,sBACxC,iBAAiB,OAAO,UAAU,EAAE;AAAA;AAAA;AAI1D,MAAM,yBAAyB;AAAA;AAAA;AAAA,mBAGZ,iBAAiB,SAAS,UAAU,IAAI;AAAA,iBAC1C,iBAAiB,SAAS,QAAQ,IAAI;AAAA;AAAA;AAAA,mBAGpC,iBAAiB,SAAS,UAAU,EAAE;AAAA,iBACxC,iBAAiB,SAAS,QAAQ,EAAE;AAAA;AAAA;AAAA;AAKrD,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAGM;AACJ,QAAM,WAA4B,CAAA;AAElC,MAAI,CAAC,SAAS,CAAC,MAAO;AAEtB,MAAI,OAAO;AACT,aAAS;AAAA,MACPA,iBAA8B;AAAA,QAC5B;AAAA,QACA,UAAU;AAAA,QACV,yBAAyB;AAAA,UACvB,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,QAAA;AAAA,MACd,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS,CAAC,OAAO;AACnB,aAAS;AAAA,MACPC,WAAwB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QAEV,CAAC,0BAA0B,WAAW,KAAK,GAAG;AAAA,UAC5C,aAAa;AAAA,UACb,WAAW;AAAA,QAAA;AAAA,QAGb,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,UAC7C,OAAO;AAAA,UACP,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,QAAQ;AAAA,UAER,GAAI,CAAC,uBAAuB;AAAA,YAC1B,MAAM;AAAA,YACN,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,QAGF,CAAC,gBAAgB,GAAG;AAAA,UAClB,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,YAC7C,GAAI,qBAAqB;AAAA,cACvB,GAAGC,gCAAsC;AAAA,gBACvC,WAAW,gCAAgC,iBAAiB,OAAO,QAAQ;AAAA,cAAA,CAC5E;AAAA,YAAA;AAAA,UACH;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,iBAAiB,CAAC,UAA8C;AACpE,QAAM,EAAA,UAAEC,eAAa;AACrB,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,QAAM,gBAAgB;AAAA,IACpB,SAAS;AAAA,MACP,OAAOA,kBAAO,MAAM,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,WAAW,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,MACrC,GAAG;AAAA,IAAA;AAAA,IAEL,cAAc;AAAA,MACZ,WAAW,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,IAAA;AAAA,EACvC;AAGF,SAAOC,4BAAyC;AAAA,IAC9C,SAASF;AAAAA,IACT;AAAA,EAAA,CACD;AACH;AAEA,MAAM,mBAAmB,CACvB,UAIG;AACH,QAAM,EAAE,UAAAA,WAAU,SAAS,MAAM,GAAG,SAAS;AAE7C,SAAOG,MAAiB;AAAA,IACtB,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,mBAAmB,eAAe,EAAE,UAAAH,WAAU;AAAA,IAC9C,kBAAkB;AAAA,MAChB,UAAU;AAAA,IAAA;AAAA,EACZ,CACD;AACH;AAEA,MAAM,oBAAoB,CAAC,UACzBF,gBAAuB;AAAA,EACrB,WAAW;AAAA,EACX,UAAU,CAAC,iBAAiB,KAAK,CAAC;AAAA,EAClC,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAO;AAAA,MAEP,CAAC,2BAA2B,WAAW,KAAK,GAAG;AAAA,QAC7C,SAAS,GAAGG,kBAAO,MAAM,QAAQ,EAAE;AAAA,MAAA;AAAA,MAGrC,CAAC,2BAA2B,YAAY,KAAK,GAAG;AAAA,QAC9C,SAAS,GAAGA,kBAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,QAEvC,GAAI,MAAM,uBAAuB;AAAA,UAC/B,cAAc;AAAA,QAAA;AAAA,QAGhB,GAAI,CAAC,MAAM,uBAAuB;AAAA,UAChC,aAAa;AAAA,QAAA;AAAA,QAGf,GAAI,MAAM,qBAAqB;AAAA,UAC7B,GAAGF,gCAAsC;AAAA,YACvC,WAAW,kCAAkC,iBAAiB,SAAS,QAAQ;AAAA,UAAA,CAChF;AAAA,QAAA;AAAA,MACH;AAAA,MAGF,CAAC,2BAA2B,WAAW,KAAK,GAAG;AAAA,QAC7C,SAAS,GAAGE,kBAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,MAAA;AAAA,IACzC;AAAA,EACF;AAEJ,CAAC;AAEH,MAAM,mBAAmB,CAAC,UACxBG,6BAA0C;AAAA,EACxC,SAAS,SAAS,cAAc,KAAK;AAAA,EACrC,UAAU,CAAC,kBAAkB,KAAK,CAAC;AAAA,EACnC,eAAe;AAAA,IACb,SAAS;AAAA,MACP,UAAU;AAAA,MAEV,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,QAC7C,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,QAEX,GAAI,MAAM,uBAAuB;AAAA,UAC/B,cAAcH,kBAAO,MAAM,QAAQ,KAAK;AAAA,QAAA;AAAA,QAG1C,GAAI,CAAC,MAAM,uBAAuB;AAAA,UAChC,aAAaA,kBAAO,MAAM,QAAQ,KAAK;AAAA,UACvC,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAGF,CAAC,0BAA0B,WAAW,KAAK,GAAG;AAAA,QAC5C,GAAI,CAAC,MAAM,uBAAuB;AAAA,UAChC,cAAcA,kBAAO,MAAM,QAAQ,KAAK;AAAA,QAAA;AAAA,QAG1C,GAAI,MAAM,uBAAuB;AAAA,UAC/B,aAAaA,kBAAO,MAAM,QAAQ,KAAK;AAAA,QAAA;AAAA,MACzC;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;AAEH,MAAM,gBAAgB,CAAC,UAA4B;AACjD,QAAM,EAAE,sBAAsB,MAAA,IAAU;AACxC,QAAM,cAAc,kBAAkB,KAAK;AAC3C,QAAM,WAA4B,CAAA;AAElC,MAAI,aAAa;AACf,aAAS,KAAK,WAAW;AAAA,EAC3B;AAEA,WAAS,KAAK,iBAAiB,KAAK,CAAC;AAErC,SAAOH,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QAEV,GAAI,uBAAuB;AAAA,UACzB,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,YAC7C,aAAa;AAAA,UAAA;AAAA,QACf;AAAA,QAGF,GAAI,CAAC,uBAAuB;AAAA,UAC1B,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,YAC7C,cAAc;AAAA,UAAA;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,IAEF;AAAA,EAAA,CACD;AACH;AAEA,MAAA,OAAe,CAAC,UAA4B;AAC1C,QAAM,YAAYA,MAAAA,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,UAAU,CAAC,cAAc,KAAK,CAAC;AAAA,IAC/B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,YAAU,UAAU;AACpB,YAAU,UAAU;AAEpB,SAAO;AACT;;"}
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,cAAc;AACpB,MAAM,eAAe;AACrB,MAAM,cAAc;AAEpB,MAAM,mBAAmB;AAAA,EACvB,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,UAAU;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,IAEN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAEJ;AAGA,MAAM,wBAAwB;AAAA;AAAA,wBAEN,iBAAiB,OAAO,UAAU,IAAI;AAAA,sBACxC,iBAAiB,OAAO,UAAU,EAAE;AAAA;AAAA;AAI1D,MAAM,yBAAyB;AAAA;AAAA;AAAA,mBAGZ,iBAAiB,SAAS,UAAU,IAAI;AAAA,iBAC1C,iBAAiB,SAAS,QAAQ,IAAI;AAAA;AAAA;AAAA,mBAGpC,iBAAiB,SAAS,UAAU,EAAE;AAAA,iBACxC,iBAAiB,SAAS,QAAQ,EAAE;AAAA;AAAA;AAAA;AAKrD,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAGM;AACJ,QAAM,WAA4B,CAAA;AAElC,MAAI,CAAC,SAAS,CAAC,MAAO;AAEtB,MAAI,OAAO;AACT,aAAS;AAAA,MACPA,iBAA8B;AAAA,QAC5B;AAAA,QACA,UAAU;AAAA,QACV,yBAAyB;AAAA,UACvB,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,QAAA;AAAA,MACd,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS,CAAC,OAAO;AACnB,aAAS;AAAA,MACPC,WAAwB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAe;AAAA,QACf,cAAc;AAAA,MAAA,CACf;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QAEV,CAAC,0BAA0B,WAAW,KAAK,GAAG;AAAA,UAC5C,aAAa;AAAA,UACb,WAAW;AAAA,QAAA;AAAA,QAGb,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,UAC7C,OAAO;AAAA,UACP,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,QAAQ;AAAA,UAER,GAAI,CAAC,uBAAuB;AAAA,YAC1B,MAAM;AAAA,YACN,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,QAGF,CAAC,gBAAgB,GAAG;AAAA,UAClB,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,YAC7C,GAAI,qBAAqB;AAAA,cACvB,GAAGC,gCAAsC;AAAA,gBACvC,WAAW,gCAAgC,iBAAiB,OAAO,QAAQ;AAAA,cAAA,CAC5E;AAAA,YAAA;AAAA,UACH;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,iBAAiB,CAAC,UAA8C;AACpE,QAAM,EAAA,UAAEC,eAAa;AACrB,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,QAAM,gBAAgB;AAAA,IACpB,SAAS;AAAA,MACP,OAAOA,kBAAO,MAAM,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,WAAW,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,MACrC,GAAG;AAAA,IAAA;AAAA,IAEL,cAAc;AAAA,MACZ,WAAW,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,IAAA;AAAA,EACvC;AAGF,SAAOC,4BAAyC;AAAA,IAC9C,SAASF;AAAAA,IACT;AAAA,EAAA,CACD;AACH;AAEA,MAAM,mBAAmB,CACvB,UAIG;AACH,QAAM,EAAE,UAAAA,WAAU,SAAS,MAAM,GAAG,SAAS;AAE7C,SAAOG,MAAiB;AAAA,IACtB,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,mBAAmB,eAAe,EAAE,UAAAH,WAAU;AAAA,IAC9C,kBAAkB;AAAA,MAChB,UAAU;AAAA,IAAA;AAAA,EACZ,CACD;AACH;AAEA,MAAM,oBAAoB,CAAC,UACzBF,gBAAuB;AAAA,EACrB,WAAW;AAAA,EACX,UAAU,CAAC,iBAAiB,KAAK,CAAC;AAAA,EAClC,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAO;AAAA,MAEP,CAAC,2BAA2B,WAAW,KAAK,GAAG;AAAA,QAC7C,SAAS,GAAGG,kBAAO,MAAM,QAAQ,EAAE;AAAA,MAAA;AAAA,MAGrC,CAAC,2BAA2B,YAAY,KAAK,GAAG;AAAA,QAC9C,SAAS,GAAGA,kBAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,QAEvC,GAAI,MAAM,uBAAuB;AAAA,UAC/B,cAAc;AAAA,QAAA;AAAA,QAGhB,GAAI,CAAC,MAAM,uBAAuB;AAAA,UAChC,aAAa;AAAA,QAAA;AAAA,QAGf,GAAI,MAAM,qBAAqB;AAAA,UAC7B,GAAGF,gCAAsC;AAAA,YACvC,WAAW,kCAAkC,iBAAiB,SAAS,QAAQ;AAAA,UAAA,CAChF;AAAA,QAAA;AAAA,MACH;AAAA,MAGF,CAAC,2BAA2B,WAAW,KAAK,GAAG;AAAA,QAC7C,SAAS,GAAGE,kBAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,MAAA;AAAA,IACzC;AAAA,EACF;AAEJ,CAAC;AAEH,MAAM,mBAAmB,CAAC,UACxBG,6BAA0C;AAAA,EACxC,SAAS,SAAS,cAAc,KAAK;AAAA,EACrC,UAAU,CAAC,kBAAkB,KAAK,CAAC;AAAA,EACnC,eAAe;AAAA,IACb,SAAS;AAAA,MACP,UAAU;AAAA,MAEV,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,QAC7C,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,QAEX,GAAI,MAAM,uBAAuB;AAAA,UAC/B,cAAcH,kBAAO,MAAM,QAAQ,KAAK;AAAA,QAAA;AAAA,QAG1C,GAAI,CAAC,MAAM,uBAAuB;AAAA,UAChC,aAAaA,kBAAO,MAAM,QAAQ,KAAK;AAAA,UACvC,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAGF,CAAC,0BAA0B,WAAW,KAAK,GAAG;AAAA,QAC5C,GAAI,CAAC,MAAM,uBAAuB;AAAA,UAChC,cAAcA,kBAAO,MAAM,QAAQ,KAAK;AAAA,QAAA;AAAA,QAG1C,GAAI,MAAM,uBAAuB;AAAA,UAC/B,aAAaA,kBAAO,MAAM,QAAQ,KAAK;AAAA,QAAA;AAAA,MACzC;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;AAEH,MAAM,gBAAgB,CAAC,UAA4B;AACjD,QAAM,EAAE,sBAAsB,MAAA,IAAU;AACxC,QAAM,cAAc,kBAAkB,KAAK;AAC3C,QAAM,WAA4B,CAAA;AAElC,MAAI,aAAa;AACf,aAAS,KAAK,WAAW;AAAA,EAC3B;AAEA,WAAS,KAAK,iBAAiB,KAAK,CAAC;AAErC,SAAOH,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QAEV,GAAI,uBAAuB;AAAA,UACzB,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,YAC7C,aAAa;AAAA,UAAA;AAAA,QACf;AAAA,QAGF,GAAI,CAAC,uBAAuB;AAAA,UAC1B,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,YAC7C,cAAc;AAAA,UAAA;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,IAEF;AAAA,EAAA,CACD;AACH;AAEA,MAAA,OAAe,CAAC,UAA4B;AAC1C,QAAM,YAAYA,MAAAA,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,UAAU,CAAC,cAAc,KAAK,CAAC;AAAA,IAC/B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,YAAU,UAAU;AACpB,YAAU,UAAU;AAEpB,SAAO;AACT;;"}
|
|
@@ -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 }),\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 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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"}
|