@universityofmaryland/web-elements-library 1.5.2 → 1.5.5

package/dist/composite/hero/minimal.js

@@ -1,13 +1,18 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
+const Styles = require("@universityofmaryland/web-styles-library");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
 require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-styles-library/layout");
+require("@universityofmaryland/web-styles-library/animation");
+require("@universityofmaryland/web-styles-library/typography");
 require("@universityofmaryland/web-utilities-library/media");
 require("@universityofmaryland/web-utilities-library/dom");
 require("@universityofmaryland/web-icons-library/controls");
 require("@universityofmaryland/web-icons-library/communication");
 require("@universityofmaryland/web-icons-library/files");
 require("@universityofmaryland/web-icons-library/brand");
-const index = require("../../model/elements/index.js");
 require("@universityofmaryland/web-icons-library/arrows");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
@@ -24,9 +29,6 @@ require("@universityofmaryland/web-icons-library/social");
 require("../../atomic/text-lockup/date.js");
 const large = require("../../atomic/text-lockup/large.js");
 require("../../atomic/text-lockup/small.js");
-require("@universityofmaryland/web-styles-library/typography");
-const layout = require("../../model/elements/layout.js");
-const headline = require("../../model/elements/headline.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -44,6 +46,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
 const createImageAsset = (image) => {
   return background({
     element: image,
@@ -73,56 +76,50 @@ const createAsset = ({ image }) => {
   if (children.length === 0) {
     return null;
   }
-  return index.createDiv({
-    className: "umd-hero-minimal__asset",
-    children,
-    elementStyles: {
-      element: {
+  return new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-minimal__asset").withChildren(...children).withStyles({
+    element: {
+      [`@container (${token__namespace.media.queries.tablet.min})`]: {
+        position: "absolute",
+        right: 0,
+        top: 0,
+        width: "50%",
+        height: "100%"
+      },
+      ["& img"]: {
         [`@container (${token__namespace.media.queries.tablet.min})`]: {
-          position: "absolute",
-          right: 0,
-          top: 0,
-          width: "50%",
-          height: "100%"
-        },
-        ["& img"]: {
-          [`@container (${token__namespace.media.queries.tablet.min})`]: {
-            objectFit: "cover",
-            objectPosition: "center",
-            height: "100%",
-            width: "100%"
-          }
+          objectFit: "cover",
+          objectPosition: "center",
+          height: "100%",
+          width: "100%"
         }
       }
     }
-  });
+  }).build();
 };
 const createHeadline = (props) => {
-  const { headline: headline$1, isThemeDark, isThemeMaryland } = props;
-  const characterCount = headline$1?.textContent?.trim().length || 0;
+  const { headline, isThemeDark, isThemeMaryland } = props;
+  const finalIsThemeDark = isThemeDark || isThemeMaryland;
+  const characterCount = headline?.textContent?.trim().length || 0;
   const isOverwriteHeadline = characterCount > 40;
-  if (!headline$1) return null;
-  const desktopStyles = {
-    [`@container (${token__namespace.media.queries.desktop.min})`]: {
-      ...isOverwriteHeadline && {
-        fontSize: "64px"
-      }
-    }
-  };
-  return headline.campaignLarge({
-    element: headline$1,
-    elementStyles: {
-      element: {
-        fontWeight: 800,
-        textTransform: "uppercase",
-        ...desktopStyles
-      },
-      siblingAfter: {
-        marginTop: token__namespace.spacing.sm
+  if (!headline) return null;
+  return new webBuilderLibrary.ElementBuilder(headline).styled(
+    Styles__namespace.typography.campaign.compose("large", {
+      theme: theme.theme.fontColor(finalIsThemeDark)
+    })
+  ).withStyles({
+    element: {
+      fontWeight: 800,
+      textTransform: "uppercase",
+      [`@container (${token__namespace.media.queries.desktop.min})`]: {
+        ...isOverwriteHeadline && {
+          fontSize: "64px"
+        }
       }
     },
-    isThemeDark: isThemeDark || isThemeMaryland
-  });
+    siblingAfter: {
+      marginTop: token__namespace.spacing.sm
+    }
+  }).build();
 };
 const buildTextWrapperStyles = (isThemeDark, isThemeMaryland) => {
   return {
@@ -157,54 +154,38 @@ const createText = (props, hasAsset) => {
     actions: props.actions,
     isThemeDark: isThemeDark || isThemeMaryland || false
   });
-  const textWrapper = index.createDiv({
-    className: "umd-hero-minimal__text-wrapper",
-    children: [textLockupElement],
-    elementStyles: buildTextWrapperStyles(isThemeDark, isThemeMaryland)
-  });
-  const textContainer = index.createDiv({
-    className: "umd-hero-minimal__text",
-    children: [textWrapper],
-    elementStyles: buildTextContainerStyles(hasAsset)
-  });
-  return layout.spaceHorizontalLarger({
-    element: document.createElement("div"),
-    children: [textContainer],
-    elementStyles: {
-      element: {
-        height: "100%",
-        width: "100%",
-        position: "relative"
-      }
+  const textWrapper = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-minimal__text-wrapper").withChild(textLockupElement).withStyles(buildTextWrapperStyles(isThemeDark, isThemeMaryland)).build();
+  const textContainer = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-minimal__text").withChild(textWrapper).withStyles(buildTextContainerStyles(hasAsset)).build();
+  return new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(textContainer).withStyles({
+    element: {
+      height: "100%",
+      width: "100%",
+      position: "relative"
     }
-  });
+  }).build();
 };
 const minimal = (props) => {
   const asset = createAsset(props);
   const text = createText(props, !!asset);
-  const children = [text];
-  if (asset) {
-    children.push(asset);
-  }
-  return index.createDiv({
-    className: "umd-hero-minimal",
-    children,
-    elementStyles: {
-      element: {
-        backgroundColor: getBackgroundColor(props),
-        position: "relative",
-        display: "flex",
-        containerType: "inline-size",
-        [`@container (${token__namespace.media.queries.large.max})`]: {
-          flexDirection: "column-reverse"
-        },
-        [`@container (${token__namespace.media.queries.tablet.min})`]: {
-          minHeight: "288px",
-          alignItems: "center"
-        }
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-minimal").withChild(text).withStyles({
+    element: {
+      backgroundColor: getBackgroundColor(props),
+      position: "relative",
+      display: "flex",
+      containerType: "inline-size",
+      [`@container (${token__namespace.media.queries.large.max})`]: {
+        flexDirection: "column-reverse"
+      },
+      [`@container (${token__namespace.media.queries.tablet.min})`]: {
+        minHeight: "288px",
+        alignItems: "center"
       }
     }
   });
+  if (asset) {
+    container.withChild(asset);
+  }
+  return container.build();
 };
 module.exports = minimal;
 //# sourceMappingURL=minimal.js.map

package/dist/composite/hero/minimal.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimal.js","sources":["../../../source/composite/hero/minimal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroMinimalProps } from './_types';\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}: Pick<HeroMinimalProps, 'image'>): ElementVisual[] => {\n  if (!image) return [];\n  return [createImageAsset(image)];\n};\n\nconst getBorderColor = (isThemeDark?: boolean, isThemeMaryland?: boolean) => {\n  return isThemeDark || isThemeMaryland ? token.color.gold : token.color.red;\n};\n\nconst getBackgroundColor = (props: HeroMinimalProps) => {\n  const { isThemeDark, isThemeLight, isThemeMaryland } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return 'transparent';\n};\n\nconst createAsset = ({ image }: Pick<HeroMinimalProps, 'image'>) => {\n  const children = buildAssetChildren({ image });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-minimal__asset',\n    children,\n    elementStyles: {\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          right: 0,\n          top: 0,\n          width: '50%',\n          height: '100%',\n        },\n\n        ['& img']: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            objectFit: 'cover',\n            objectPosition: 'center',\n            height: '100%',\n            width: '100%',\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroMinimalProps,\n    'headline' | 'isThemeDark' | 'isThemeLight' | 'isThemeMaryland'\n  >,\n) => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 40;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '64px',\n      }),\n    },\n  };\n\n  return ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    },\n    isThemeDark: isThemeDark || isThemeMaryland,\n  });\n};\n\nconst buildTextWrapperStyles = (\n  isThemeDark?: boolean,\n  isThemeMaryland?: boolean,\n) => {\n  return {\n    element: {\n      paddingLeft: token.spacing.md,\n      borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,\n\n      [`@container (${token.media.queries.desktop.min})`]: {\n        paddingLeft: token.spacing.lg,\n      },\n    },\n  };\n};\n\nconst buildTextContainerStyles = (hasAsset: boolean) => {\n  return {\n    element: {\n      padding: `${token.spacing.xl} 0`,\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        ...(hasAsset && {\n          padding: `${token.spacing['4xl']} 0`,\n          width: `calc(50% - ${token.spacing['4xl']})`,\n        }),\n      },\n    },\n  };\n};\n\nconst createText = (props: HeroMinimalProps, hasAsset: boolean) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    eyebrow: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'umd-hero-minimal__text-wrapper',\n    children: [textLockupElement],\n    elementStyles: buildTextWrapperStyles(isThemeDark, isThemeMaryland),\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-minimal__text',\n    children: [textWrapper],\n    elementStyles: buildTextContainerStyles(hasAsset),\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      },\n    },\n  });\n};\n\nexport default (props: HeroMinimalProps) => {\n  const asset = createAsset(props);\n  const text = createText(props, !!asset);\n\n  const children: ElementVisual[] = [text];\n  if (asset) {\n    children.push(asset);\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-minimal',\n    children,\n    elementStyles: {\n      element: {\n        backgroundColor: getBackgroundColor(props),\n        position: 'relative',\n        display: 'flex',\n        containerType: 'inline-size',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '288px',\n          alignItems: 'center',\n        },\n      },\n    },\n  });\n};\n"],"names":["assets.image.background","token","ElementModel.createDiv","headline","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"minimal.js","sources":["../../../source/composite/hero/minimal.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type ElementModel } from '../../_types';\nimport { type HeroMinimalProps } from './_types';\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}: Pick<HeroMinimalProps, 'image'>): ElementModel<HTMLElement>[] => {\n  if (!image) return [];\n  return [createImageAsset(image)];\n};\n\nconst getBorderColor = (isThemeDark?: boolean, isThemeMaryland?: boolean) => {\n  return isThemeDark || isThemeMaryland ? token.color.gold : token.color.red;\n};\n\nconst getBackgroundColor = (props: HeroMinimalProps) => {\n  const { isThemeDark, isThemeLight, isThemeMaryland } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return 'transparent';\n};\n\nconst createAsset = ({ image }: Pick<HeroMinimalProps, 'image'>) => {\n  const children = buildAssetChildren({ image });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-minimal__asset')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          right: 0,\n          top: 0,\n          width: '50%',\n          height: '100%',\n        },\n\n        ['& img']: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            objectFit: 'cover',\n            objectPosition: 'center',\n            height: '100%',\n            width: '100%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroMinimalProps,\n    'headline' | 'isThemeDark' | 'isThemeLight' | 'isThemeMaryland'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 40;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('large', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '64px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst buildTextWrapperStyles = (\n  isThemeDark?: boolean,\n  isThemeMaryland?: boolean,\n) => {\n  return {\n    element: {\n      paddingLeft: token.spacing.md,\n      borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,\n\n      [`@container (${token.media.queries.desktop.min})`]: {\n        paddingLeft: token.spacing.lg,\n      },\n    },\n  };\n};\n\nconst buildTextContainerStyles = (hasAsset: boolean) => {\n  return {\n    element: {\n      padding: `${token.spacing.xl} 0`,\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        ...(hasAsset && {\n          padding: `${token.spacing['4xl']} 0`,\n          width: `calc(50% - ${token.spacing['4xl']})`,\n        }),\n      },\n    },\n  };\n};\n\nconst createText = (props: HeroMinimalProps, hasAsset: boolean) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    eyebrow: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textWrapper = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text-wrapper')\n    .withChild(textLockupElement)\n    .withStyles(buildTextWrapperStyles(isThemeDark, isThemeMaryland))\n    .build();\n\n  const textContainer = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text')\n    .withChild(textWrapper)\n    .withStyles(buildTextContainerStyles(hasAsset))\n    .build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContainer)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n};\n\nexport default (props: HeroMinimalProps) => {\n  const asset = createAsset(props);\n  const text = createText(props, !!asset);\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-minimal')\n    .withChild(text)\n    .withStyles({\n      element: {\n        backgroundColor: getBackgroundColor(props),\n        position: 'relative',\n        display: 'flex',\n        containerType: 'inline-size',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '288px',\n          alignItems: 'center',\n        },\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n\n  return container.build();\n};\n"],"names":["assets.image.background","token","ElementBuilder","Styles","theme","textLockup.large"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,mBAAmB,CAAC,UAA4B;AACpD,SAAOA,WAAwB;AAAA,IAC7B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,EAAA,CAChB;AACH;AAEA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AACF,MAAoE;AAClE,MAAI,CAAC,MAAO,QAAO,CAAA;AACnB,SAAO,CAAC,iBAAiB,KAAK,CAAC;AACjC;AAEA,MAAM,iBAAiB,CAAC,aAAuB,oBAA8B;AAC3E,SAAO,eAAe,kBAAkBC,iBAAM,MAAM,OAAOA,iBAAM,MAAM;AACzE;AAEA,MAAM,qBAAqB,CAAC,UAA4B;AACtD,QAAM,EAAE,aAAa,cAAc,gBAAA,IAAoB;AAEvD,MAAI,YAAa,QAAOA,iBAAM,MAAM;AACpC,MAAI,gBAAiB,QAAOA,iBAAM,MAAM;AACxC,MAAI,aAAc,QAAOA,iBAAM,MAAM,KAAK;AAC1C,SAAO;AACT;AAEA,MAAM,cAAc,CAAC,EAAE,YAA6C;AAClE,QAAM,WAAW,mBAAmB,EAAE,OAAO;AAE7C,MAAI,SAAS,WAAW,GAAG;AACzB,WAAO;AAAA,EACT;AAEA,SAAO,IAAIC,kBAAAA,eAAA,EACR,cAAc,yBAAyB,EACvC,aAAa,GAAG,QAAQ,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,eAAeD,iBAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAClD,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,MAGV,CAAC,OAAO,GAAG;AAAA,QACT,CAAC,eAAeA,iBAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UAClD,WAAW;AAAA,UACX,gBAAgB;AAAA,UAChB,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,iBAAiB,CACrB,UAIqC;AACrC,QAAM,EAAE,UAAU,aAAa,gBAAA,IAAoB;AACnD,QAAM,mBAAmB,eAAe;AACxC,QAAM,iBAAiB,UAAU,aAAa,KAAA,EAAO,UAAU;AAC/D,QAAM,sBAAsB,iBAAiB;AAE7C,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO,IAAIC,kBAAAA,eAAe,QAAQ,EAC/B;AAAA,IACCC,kBAAO,WAAW,SAAS,QAAQ,SAAS;AAAA,MAC1C,OAAOC,MAAAA,MAAM,UAAU,gBAAgB;AAAA,IAAA,CACxC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,MAEf,CAAC,eAAeH,iBAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QACnD,GAAI,uBAAuB;AAAA,UACzB,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,IAEF,cAAc;AAAA,MACZ,WAAWA,iBAAM,QAAQ;AAAA,IAAA;AAAA,EAC3B,CACD,EACA,MAAA;AACL;AAEA,MAAM,yBAAyB,CAC7B,aACA,oBACG;AACH,SAAO;AAAA,IACL,SAAS;AAAA,MACP,aAAaA,iBAAM,QAAQ;AAAA,MAC3B,YAAY,aAAa,eAAe,aAAa,eAAe,CAAC;AAAA,MAErE,CAAC,eAAeA,iBAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QACnD,aAAaA,iBAAM,QAAQ;AAAA,MAAA;AAAA,IAC7B;AAAA,EACF;AAEJ;AAEA,MAAM,2BAA2B,CAAC,aAAsB;AACtD,SAAO;AAAA,IACL,SAAS;AAAA,MACP,SAAS,GAAGA,iBAAM,QAAQ,EAAE;AAAA,MAE5B,CAAC,eAAeA,iBAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAClD,GAAI,YAAY;AAAA,UACd,SAAS,GAAGA,iBAAM,QAAQ,KAAK,CAAC;AAAA,UAChC,OAAO,cAAcA,iBAAM,QAAQ,KAAK,CAAC;AAAA,QAAA;AAAA,MAC3C;AAAA,IACF;AAAA,EACF;AAEJ;AAEA,MAAM,aAAa,CAAC,OAAyB,aAAsB;AACjE,QAAM,EAAE,aAAa,gBAAA,IAAoB;AAEzC,QAAM,oBAAoBI,MAAiB;AAAA,IACzC,SAAS,MAAM;AAAA,IACf,mBAAmB,eAAe,KAAK;AAAA,IACvC,MAAM,MAAM;AAAA,IACZ,SAAS,MAAM;AAAA,IACf,aAAa,eAAe,mBAAmB;AAAA,EAAA,CAChD;AAED,QAAM,cAAc,IAAIH,kBAAAA,eAAA,EACrB,cAAc,gCAAgC,EAC9C,UAAU,iBAAiB,EAC3B,WAAW,uBAAuB,aAAa,eAAe,CAAC,EAC/D,MAAA;AAEH,QAAM,gBAAgB,IAAIA,kBAAAA,eAAA,EACvB,cAAc,wBAAwB,EACtC,UAAU,WAAW,EACrB,WAAW,yBAAyB,QAAQ,CAAC,EAC7C,MAAA;AAEH,SAAO,IAAIA,kBAAAA,eAAA,EACR,OAAOC,kBAAO,OAAO,MAAM,WAAW,MAAM,EAC5C,UAAU,aAAa,EACvB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,MAAA;AACL;AAEA,MAAA,UAAe,CAAC,UAA4B;AAC1C,QAAM,QAAQ,YAAY,KAAK;AAC/B,QAAM,OAAO,WAAW,OAAO,CAAC,CAAC,KAAK;AAEtC,QAAM,YAAY,IAAID,kBAAAA,eAAA,EACnB,cAAc,kBAAkB,EAChC,UAAU,IAAI,EACd,WAAW;AAAA,IACV,SAAS;AAAA,MACP,iBAAiB,mBAAmB,KAAK;AAAA,MACzC,UAAU;AAAA,MACV,SAAS;AAAA,MACT,eAAe;AAAA,MAEf,CAAC,eAAeD,iBAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,QACjD,eAAe;AAAA,MAAA;AAAA,MAGjB,CAAC,eAAeA,iBAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAClD,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAEH,MAAI,OAAO;AACT,cAAU,UAAU,KAAK;AAAA,EAC3B;AAEA,SAAO,UAAU,MAAA;AACnB;;"}

package/dist/composite/hero/minimal.mjs

@@ -1,12 +1,17 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
 import "@universityofmaryland/web-utilities-library/media";
 import "@universityofmaryland/web-utilities-library/dom";
 import "@universityofmaryland/web-icons-library/controls";
 import "@universityofmaryland/web-icons-library/communication";
 import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
-import { createDiv } from "../../model/elements/index.mjs";
 import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
@@ -23,9 +28,6 @@ import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import large from "../../atomic/text-lockup/large.mjs";
 import "../../atomic/text-lockup/small.mjs";
-import "@universityofmaryland/web-styles-library/typography";
-import { spaceHorizontalLarger } from "../../model/elements/layout.mjs";
-import { campaignLarge } from "../../model/elements/headline.mjs";
 const createImageAsset = (image) => {
   return imageContainer({
     element: image,
@@ -55,56 +57,50 @@ const createAsset = ({ image }) => {
   if (children.length === 0) {
     return null;
   }
-  return createDiv({
-    className: "umd-hero-minimal__asset",
-    children,
-    elementStyles: {
-      element: {
+  return new ElementBuilder().withClassName("umd-hero-minimal__asset").withChildren(...children).withStyles({
+    element: {
+      [`@container (${token.media.queries.tablet.min})`]: {
+        position: "absolute",
+        right: 0,
+        top: 0,
+        width: "50%",
+        height: "100%"
+      },
+      ["& img"]: {
         [`@container (${token.media.queries.tablet.min})`]: {
-          position: "absolute",
-          right: 0,
-          top: 0,
-          width: "50%",
-          height: "100%"
-        },
-        ["& img"]: {
-          [`@container (${token.media.queries.tablet.min})`]: {
-            objectFit: "cover",
-            objectPosition: "center",
-            height: "100%",
-            width: "100%"
-          }
+          objectFit: "cover",
+          objectPosition: "center",
+          height: "100%",
+          width: "100%"
         }
       }
     }
-  });
+  }).build();
 };
 const createHeadline = (props) => {
   const { headline, isThemeDark, isThemeMaryland } = props;
+  const finalIsThemeDark = isThemeDark || isThemeMaryland;
   const characterCount = headline?.textContent?.trim().length || 0;
   const isOverwriteHeadline = characterCount > 40;
   if (!headline) return null;
-  const desktopStyles = {
-    [`@container (${token.media.queries.desktop.min})`]: {
-      ...isOverwriteHeadline && {
-        fontSize: "64px"
-      }
-    }
-  };
-  return campaignLarge({
-    element: headline,
-    elementStyles: {
-      element: {
-        fontWeight: 800,
-        textTransform: "uppercase",
-        ...desktopStyles
-      },
-      siblingAfter: {
-        marginTop: token.spacing.sm
+  return new ElementBuilder(headline).styled(
+    Styles.typography.campaign.compose("large", {
+      theme: theme.fontColor(finalIsThemeDark)
+    })
+  ).withStyles({
+    element: {
+      fontWeight: 800,
+      textTransform: "uppercase",
+      [`@container (${token.media.queries.desktop.min})`]: {
+        ...isOverwriteHeadline && {
+          fontSize: "64px"
+        }
       }
     },
-    isThemeDark: isThemeDark || isThemeMaryland
-  });
+    siblingAfter: {
+      marginTop: token.spacing.sm
+    }
+  }).build();
 };
 const buildTextWrapperStyles = (isThemeDark, isThemeMaryland) => {
   return {
@@ -139,54 +135,38 @@ const createText = (props, hasAsset) => {
     actions: props.actions,
     isThemeDark: isThemeDark || isThemeMaryland || false
   });
-  const textWrapper = createDiv({
-    className: "umd-hero-minimal__text-wrapper",
-    children: [textLockupElement],
-    elementStyles: buildTextWrapperStyles(isThemeDark, isThemeMaryland)
-  });
-  const textContainer = createDiv({
-    className: "umd-hero-minimal__text",
-    children: [textWrapper],
-    elementStyles: buildTextContainerStyles(hasAsset)
-  });
-  return spaceHorizontalLarger({
-    element: document.createElement("div"),
-    children: [textContainer],
-    elementStyles: {
-      element: {
-        height: "100%",
-        width: "100%",
-        position: "relative"
-      }
+  const textWrapper = new ElementBuilder().withClassName("umd-hero-minimal__text-wrapper").withChild(textLockupElement).withStyles(buildTextWrapperStyles(isThemeDark, isThemeMaryland)).build();
+  const textContainer = new ElementBuilder().withClassName("umd-hero-minimal__text").withChild(textWrapper).withStyles(buildTextContainerStyles(hasAsset)).build();
+  return new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(textContainer).withStyles({
+    element: {
+      height: "100%",
+      width: "100%",
+      position: "relative"
     }
-  });
+  }).build();
 };
 const minimal = (props) => {
   const asset = createAsset(props);
   const text = createText(props, !!asset);
-  const children = [text];
-  if (asset) {
-    children.push(asset);
-  }
-  return createDiv({
-    className: "umd-hero-minimal",
-    children,
-    elementStyles: {
-      element: {
-        backgroundColor: getBackgroundColor(props),
-        position: "relative",
-        display: "flex",
-        containerType: "inline-size",
-        [`@container (${token.media.queries.large.max})`]: {
-          flexDirection: "column-reverse"
-        },
-        [`@container (${token.media.queries.tablet.min})`]: {
-          minHeight: "288px",
-          alignItems: "center"
-        }
+  const container = new ElementBuilder().withClassName("umd-hero-minimal").withChild(text).withStyles({
+    element: {
+      backgroundColor: getBackgroundColor(props),
+      position: "relative",
+      display: "flex",
+      containerType: "inline-size",
+      [`@container (${token.media.queries.large.max})`]: {
+        flexDirection: "column-reverse"
+      },
+      [`@container (${token.media.queries.tablet.min})`]: {
+        minHeight: "288px",
+        alignItems: "center"
       }
     }
   });
+  if (asset) {
+    container.withChild(asset);
+  }
+  return container.build();
 };
 export {
   minimal as default

package/dist/composite/hero/minimal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"minimal.mjs","sources":["../../../source/composite/hero/minimal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroMinimalProps } from './_types';\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}: Pick<HeroMinimalProps, 'image'>): ElementVisual[] => {\n  if (!image) return [];\n  return [createImageAsset(image)];\n};\n\nconst getBorderColor = (isThemeDark?: boolean, isThemeMaryland?: boolean) => {\n  return isThemeDark || isThemeMaryland ? token.color.gold : token.color.red;\n};\n\nconst getBackgroundColor = (props: HeroMinimalProps) => {\n  const { isThemeDark, isThemeLight, isThemeMaryland } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return 'transparent';\n};\n\nconst createAsset = ({ image }: Pick<HeroMinimalProps, 'image'>) => {\n  const children = buildAssetChildren({ image });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-minimal__asset',\n    children,\n    elementStyles: {\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          right: 0,\n          top: 0,\n          width: '50%',\n          height: '100%',\n        },\n\n        ['& img']: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            objectFit: 'cover',\n            objectPosition: 'center',\n            height: '100%',\n            width: '100%',\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroMinimalProps,\n    'headline' | 'isThemeDark' | 'isThemeLight' | 'isThemeMaryland'\n  >,\n) => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 40;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '64px',\n      }),\n    },\n  };\n\n  return ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    },\n    isThemeDark: isThemeDark || isThemeMaryland,\n  });\n};\n\nconst buildTextWrapperStyles = (\n  isThemeDark?: boolean,\n  isThemeMaryland?: boolean,\n) => {\n  return {\n    element: {\n      paddingLeft: token.spacing.md,\n      borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,\n\n      [`@container (${token.media.queries.desktop.min})`]: {\n        paddingLeft: token.spacing.lg,\n      },\n    },\n  };\n};\n\nconst buildTextContainerStyles = (hasAsset: boolean) => {\n  return {\n    element: {\n      padding: `${token.spacing.xl} 0`,\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        ...(hasAsset && {\n          padding: `${token.spacing['4xl']} 0`,\n          width: `calc(50% - ${token.spacing['4xl']})`,\n        }),\n      },\n    },\n  };\n};\n\nconst createText = (props: HeroMinimalProps, hasAsset: boolean) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    eyebrow: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'umd-hero-minimal__text-wrapper',\n    children: [textLockupElement],\n    elementStyles: buildTextWrapperStyles(isThemeDark, isThemeMaryland),\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-minimal__text',\n    children: [textWrapper],\n    elementStyles: buildTextContainerStyles(hasAsset),\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      },\n    },\n  });\n};\n\nexport default (props: HeroMinimalProps) => {\n  const asset = createAsset(props);\n  const text = createText(props, !!asset);\n\n  const children: ElementVisual[] = [text];\n  if (asset) {\n    children.push(asset);\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-minimal',\n    children,\n    elementStyles: {\n      element: {\n        backgroundColor: getBackgroundColor(props),\n        position: 'relative',\n        display: 'flex',\n        containerType: 'inline-size',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '288px',\n          alignItems: 'center',\n        },\n      },\n    },\n  });\n};\n"],"names":["assets.image.background","ElementModel.createDiv","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"minimal.mjs","sources":["../../../source/composite/hero/minimal.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type ElementModel } from '../../_types';\nimport { type HeroMinimalProps } from './_types';\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}: Pick<HeroMinimalProps, 'image'>): ElementModel<HTMLElement>[] => {\n  if (!image) return [];\n  return [createImageAsset(image)];\n};\n\nconst getBorderColor = (isThemeDark?: boolean, isThemeMaryland?: boolean) => {\n  return isThemeDark || isThemeMaryland ? token.color.gold : token.color.red;\n};\n\nconst getBackgroundColor = (props: HeroMinimalProps) => {\n  const { isThemeDark, isThemeLight, isThemeMaryland } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return 'transparent';\n};\n\nconst createAsset = ({ image }: Pick<HeroMinimalProps, 'image'>) => {\n  const children = buildAssetChildren({ image });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-minimal__asset')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          right: 0,\n          top: 0,\n          width: '50%',\n          height: '100%',\n        },\n\n        ['& img']: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            objectFit: 'cover',\n            objectPosition: 'center',\n            height: '100%',\n            width: '100%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroMinimalProps,\n    'headline' | 'isThemeDark' | 'isThemeLight' | 'isThemeMaryland'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 40;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('large', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '64px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst buildTextWrapperStyles = (\n  isThemeDark?: boolean,\n  isThemeMaryland?: boolean,\n) => {\n  return {\n    element: {\n      paddingLeft: token.spacing.md,\n      borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,\n\n      [`@container (${token.media.queries.desktop.min})`]: {\n        paddingLeft: token.spacing.lg,\n      },\n    },\n  };\n};\n\nconst buildTextContainerStyles = (hasAsset: boolean) => {\n  return {\n    element: {\n      padding: `${token.spacing.xl} 0`,\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        ...(hasAsset && {\n          padding: `${token.spacing['4xl']} 0`,\n          width: `calc(50% - ${token.spacing['4xl']})`,\n        }),\n      },\n    },\n  };\n};\n\nconst createText = (props: HeroMinimalProps, hasAsset: boolean) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    eyebrow: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textWrapper = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text-wrapper')\n    .withChild(textLockupElement)\n    .withStyles(buildTextWrapperStyles(isThemeDark, isThemeMaryland))\n    .build();\n\n  const textContainer = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text')\n    .withChild(textWrapper)\n    .withStyles(buildTextContainerStyles(hasAsset))\n    .build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContainer)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n};\n\nexport default (props: HeroMinimalProps) => {\n  const asset = createAsset(props);\n  const text = createText(props, !!asset);\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-minimal')\n    .withChild(text)\n    .withStyles({\n      element: {\n        backgroundColor: getBackgroundColor(props),\n        position: 'relative',\n        display: 'flex',\n        containerType: 'inline-size',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '288px',\n          alignItems: 'center',\n        },\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n\n  return container.build();\n};\n"],"names":["assets.image.background","textLockup.large"],"mappings":"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"}

package/dist/composite/hero/overlay.d.ts

@@ -1,8 +1,4 @@
 import { HeroOverlayProps } from './_types';
-declare const _default: (props: HeroOverlayProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: HeroOverlayProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=overlay.d.ts.map

package/dist/composite/hero/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/overlay.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAsOjC,OAAO,gBAAgB;;;;;AAAvC,wBA8DE"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/overlay.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAmOjC,OAAO,gBAAgB;AAAvC,wBA8DE"}