@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/atomic/text-lockup/large.mjs

@@ -1,12 +1,12 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
-import { createDiv } from "../../model/elements/index.mjs";
-import { sansSmall } from "../../model/elements/headline.mjs";
-import { ribbon } from "../../model/elements/text.mjs";
-import { simpleLarge, simpleLargest } from "../../model/elements/rich-text.mjs";
-import { gridStacked } from "../../model/elements/layout.mjs";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 const large = ({
   eyebrow,
-  ribbon: ribbon$1,
+  ribbon,
   headlineComposite,
   text,
   textLargest,
@@ -14,84 +14,72 @@ const large = ({
   isThemeDark,
   additionalStyles
 }) => {
-  const children = [];
+  const container = new ElementBuilder().withClassName("text-lockup-large").withStyles({
+    element: {
+      zIndex: "9",
+      position: "relative",
+      ...additionalStyles
+    }
+  });
   if (eyebrow) {
-    children.push(
-      sansSmall({
-        element: eyebrow,
-        elementStyles: {
-          element: {
-            textTransform: "uppercase",
-            fontWeight: 600,
-            color: token.color.black
-          },
-          siblingAfter: {
-            marginTop: token.spacing.sm
-          }
-        },
-        isThemeDark
+    const eyebrowElement = new ElementBuilder(eyebrow).styled(
+      typography.sans.compose("small", {
+        theme: theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      element: {
+        textTransform: "uppercase",
+        fontWeight: 600,
+        ...!isThemeDark && { color: token.color.black }
+      },
+      siblingAfter: {
+        marginTop: token.spacing.sm
+      }
+    }).build();
+    container.withChild(eyebrowElement);
   }
-  if (ribbon$1) {
-    children.push(
-      ribbon({
-        element: ribbon$1,
-        elementStyles: {
-          siblingAfter: {
-            marginTop: token.spacing.sm
-          }
-        }
-      })
-    );
+  if (ribbon) {
+    const ribbonElement = new ElementBuilder(ribbon).styled(elementStyles.text.decoration.ribbon).withStyles({
+      siblingAfter: {
+        marginTop: token.spacing.sm
+      }
+    }).build();
+    container.withChild(ribbonElement);
   }
   if (headlineComposite) {
-    children.push(headlineComposite);
+    container.withChild(headlineComposite);
   }
   if (text) {
-    children.push(
-      simpleLarge({
-        element: text,
-        elementStyles: {
-          siblingAfter: {
-            marginTop: token.spacing.lg
-          }
-        },
-        isThemeDark
+    const textElement = new ElementBuilder(text).styled(
+      elementStyles.text.rich.composeSimple({
+        size: "large",
+        theme: theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      siblingAfter: {
+        marginTop: token.spacing.lg
+      }
+    }).build();
+    container.withChild(textElement);
   }
   if (textLargest) {
-    children.push(
-      simpleLargest({
-        element: textLargest,
-        elementStyles: {
-          siblingAfter: {
-            marginTop: token.spacing.lg
-          }
-        },
-        isThemeDark
+    const textLargestElement = new ElementBuilder(textLargest).styled(
+      elementStyles.text.rich.composeSimple({
+        size: "largest",
+        theme: theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      siblingAfter: {
+        marginTop: token.spacing.lg
+      }
+    }).build();
+    container.withChild(textLargestElement);
   }
   if (actions) {
-    children.push(
-      gridStacked({
-        element: actions
-      })
-    );
+    const actionsElement = new ElementBuilder(actions).styled(layout.grid.stacked).build();
+    container.withChild(actionsElement);
   }
-  return createDiv({
-    className: "text-lockup-large",
-    children,
-    elementStyles: {
-      element: {
-        zIndex: "9",
-        position: "relative",
-        ...additionalStyles
-      }
-    }
-  });
+  return container.build();
 };
 export {
   large as default

package/dist/atomic/text-lockup/large.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"large.mjs","sources":["../../../source/atomic/text-lockup/large.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\ninterface TypeTextLockupLarge {\n  headlineComposite?: ElementVisual | null;\n  eyebrow?: HTMLElement | null;\n  ribbon?: HTMLElement | null;\n  text?: HTMLElement | null;\n  textLargest?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n  additionalStyles?: Record<string, unknown>;\n}\n\nexport default ({\n  eyebrow,\n  ribbon,\n  headlineComposite,\n  text,\n  textLargest,\n  actions,\n  isThemeDark,\n  additionalStyles,\n}: TypeTextLockupLarge) => {\n  const children: ElementVisual[] = [];\n\n  if (eyebrow) {\n    children.push(\n      ElementModel.headline.sansSmall({\n        element: eyebrow,\n        elementStyles: {\n          element: {\n            textTransform: 'uppercase',\n            fontWeight: 600,\n            color: token.color.black,\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (ribbon) {\n    children.push(\n      ElementModel.text.ribbon({\n        element: ribbon,\n        elementStyles: {\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  if (headlineComposite) {\n    children.push(headlineComposite);\n  }\n\n  if (text) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: text,\n        elementStyles: {\n          siblingAfter: {\n            marginTop: token.spacing.lg,\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (textLargest) {\n    children.push(\n      ElementModel.richText.simpleLargest({\n        element: textLargest,\n        elementStyles: {\n          siblingAfter: {\n            marginTop: token.spacing.lg,\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridStacked({\n        element: actions,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'text-lockup-large',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: '9',\n        position: 'relative',\n        ...additionalStyles,\n      },\n    },\n  });\n};\n"],"names":["ribbon","ElementModel.headline.sansSmall","ElementModel.text.ribbon","ElementModel.richText.simpleLarge","ElementModel.richText.simpleLargest","ElementModel.layout.gridStacked","ElementModel.createDiv"],"mappings":";;;;;;AAeA,MAAA,QAAe,CAAC;AAAA,EACd;AAAA,EAAA,QACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,WAA4B,CAAA;AAElC,MAAI,SAAS;AACX,aAAS;AAAA,MACPC,UAAgC;AAAA,QAC9B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,OAAO,MAAM,MAAM;AAAA,UAAA;AAAA,UAErB,cAAc;AAAA,YACZ,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAID,UAAQ;AACV,aAAS;AAAA,MACPE,OAAyB;AAAA,QACvB,SAASF;AAAAA,QACT,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,mBAAmB;AACrB,aAAS,KAAK,iBAAiB;AAAA,EACjC;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPG,YAAkC;AAAA,QAChC,SAAS;AAAA,QACT,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,aAAa;AACf,aAAS;AAAA,MACPC,cAAoC;AAAA,QAClC,SAAS;AAAA,QACT,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,aAAS;AAAA,MACPC,YAAgC;AAAA,QAC9B,SAAS;AAAA,MAAA,CACV;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"large.mjs","sources":["../../../source/atomic/text-lockup/large.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { ElementModel } from '../../_types';\n\ninterface TypeTextLockupLarge {\n  headlineComposite?: ElementModel<HTMLElement> | null;\n  eyebrow?: HTMLElement | null;\n  ribbon?: HTMLElement | null;\n  text?: HTMLElement | null;\n  textLargest?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n  additionalStyles?: Record<string, unknown>;\n}\n\nexport default ({\n  eyebrow,\n  ribbon,\n  headlineComposite,\n  text,\n  textLargest,\n  actions,\n  isThemeDark,\n  additionalStyles,\n}: TypeTextLockupLarge) => {\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-large')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n        ...additionalStyles,\n      },\n    });\n\n  if (eyebrow) {\n    const eyebrowElement = new ElementBuilder(eyebrow)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          textTransform: 'uppercase',\n          fontWeight: 600,\n          ...(!isThemeDark && { color: token.color.black }),\n        },\n        siblingAfter: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(eyebrowElement);\n  }\n\n  if (ribbon) {\n    const ribbonElement = new ElementBuilder(ribbon)\n      .styled(elementStyles.text.decoration.ribbon)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(ribbonElement);\n  }\n\n  if (headlineComposite) {\n    container.withChild(headlineComposite);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          size: 'large',\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (textLargest) {\n    const textLargestElement = new ElementBuilder(textLargest)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          size: 'largest',\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n\n    container.withChild(textLargestElement);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.stacked)\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":[],"mappings":";;;;;;AAmBA,MAAA,QAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,mBAAmB,EACjC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,EACL,CACD;AAEH,MAAI,SAAS;AACX,UAAM,iBAAiB,IAAI,eAAe,OAAO,EAC9C;AAAA,MACC,WAAW,KAAK,QAAQ,SAAS;AAAA,QAC/B,OAAO,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,IAAA,EAEF,WAAW;AAAA,MACV,SAAS;AAAA,QACP,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,GAAI,CAAC,eAAe,EAAE,OAAO,MAAM,MAAM,MAAA;AAAA,MAAM;AAAA,MAEjD,cAAc;AAAA,QACZ,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B,CACD,EACA,MAAA;AAEH,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,MAAI,QAAQ;AACV,UAAM,gBAAgB,IAAI,eAAe,MAAM,EAC5C,OAAO,cAAc,KAAK,WAAW,MAAM,EAC3C,WAAW;AAAA,MACV,cAAc;AAAA,QACZ,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B,CACD,EACA,MAAA;AAEH,cAAU,UAAU,aAAa;AAAA,EACnC;AAEA,MAAI,mBAAmB;AACrB,cAAU,UAAU,iBAAiB;AAAA,EACvC;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAI,eAAe,IAAI,EACxC;AAAA,MACC,cAAc,KAAK,KAAK,cAAc;AAAA,QACpC,MAAM;AAAA,QACN,OAAO,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,IAAA,EAEF,WAAW;AAAA,MACV,cAAc;AAAA,QACZ,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B,CACD,EACA,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,aAAa;AACf,UAAM,qBAAqB,IAAI,eAAe,WAAW,EACtD;AAAA,MACC,cAAc,KAAK,KAAK,cAAc;AAAA,QACpC,MAAM;AAAA,QACN,OAAO,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,IAAA,EAEF,WAAW;AAAA,MACV,cAAc;AAAA,QACZ,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B,CACD,EACA,MAAA;AAEH,cAAU,UAAU,kBAAkB;AAAA,EACxC;AAEA,MAAI,SAAS;AACX,UAAM,iBAAiB,IAAI,eAAe,OAAO,EAC9C,OAAO,OAAO,KAAK,OAAO,EAC1B,MAAA;AAEH,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,SAAO,UAAU,MAAA;AACnB;"}

package/dist/atomic/text-lockup/medium.d.ts

@@ -1,19 +1,15 @@
-import { ElementVisual } from '../../_types';
+import { ElementModel } from '../../_types';
 interface TypeTextLockupMedium {
     actions?: HTMLElement | null;
-    compositeHeadline?: ElementVisual | null;
-    eventDetails?: ElementVisual;
+    compositeHeadline?: ElementModel<HTMLElement> | null;
+    eventDetails?: ElementModel<HTMLElement>;
     headline?: HTMLElement | null;
     isThemeDark?: boolean;
     isThemeMaryland?: boolean;
     ribbon?: HTMLElement | null;
-    compositeStats?: ElementVisual | null;
+    compositeStats?: ElementModel<HTMLElement> | null;
     text?: HTMLElement | null;
 }
-declare const _default: ({ actions, eventDetails, compositeHeadline, compositeStats, headline, isThemeDark, isThemeMaryland, ribbon, text, }: TypeTextLockupMedium) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: ({ actions, eventDetails, compositeHeadline, compositeStats, headline, isThemeDark, isThemeMaryland, ribbon, text, }: TypeTextLockupMedium) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=medium.d.ts.map

package/dist/atomic/text-lockup/medium.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"medium.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/medium.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B;yBAOe,qHAUb,oBAAoB;;;;;AAVvB,wBAgHE"}
+{"version":3,"file":"medium.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/medium.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IACrD,YAAY,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAClD,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B;yBAOe,qHAUb,oBAAoB;AAVvB,wBA4HE"}

package/dist/atomic/text-lockup/medium.js

@@ -1,10 +1,12 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
-const index = require("../../model/elements/index.js");
-const text = require("../../model/elements/text.js");
-const headline = require("../../model/elements/headline.js");
-const richText = require("../../model/elements/rich-text.js");
-const layout = require("../../model/elements/layout.js");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const elementStyles = require("@universityofmaryland/web-styles-library/element");
+const layout = require("@universityofmaryland/web-styles-library/layout");
+const animation = require("@universityofmaryland/web-styles-library/animation");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
+const dom = require("@universityofmaryland/web-utilities-library/dom");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -22,6 +24,10 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
+const layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
+const animation__namespace = /* @__PURE__ */ _interopNamespaceDefault(animation);
 const BREAKPOINTS = {
   large: `@container (min-width: 600px)`
 };
@@ -30,103 +36,89 @@ const medium = ({
   eventDetails,
   compositeHeadline,
   compositeStats,
-  headline: headline$1,
+  headline,
   isThemeDark,
   isThemeMaryland,
   ribbon,
-  text: text$1
+  text
 }) => {
-  const children = [];
+  const finalIsThemeDark = isThemeDark || isThemeMaryland;
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("text-lockup-medium").withStyles({
+    element: {
+      zIndex: "9",
+      position: "relative"
+    }
+  });
   if (ribbon) {
-    children.push(
-      text.ribbon({
-        element: ribbon,
-        elementStyles: {
-          siblingAfter: {
-            marginTop: token__namespace.spacing.sm
-          }
-        }
-      })
-    );
+    const ribbonElement = new webBuilderLibrary.ElementBuilder(ribbon).styled(elementStyles__namespace.text.decoration.ribbon).withStyles({
+      siblingAfter: {
+        marginTop: token__namespace.spacing.sm
+      }
+    }).build();
+    container.withChild(ribbonElement);
   }
   if (compositeHeadline) {
-    children.push(compositeHeadline);
+    container.withChild(compositeHeadline);
   }
-  if (headline$1 && !compositeHeadline) {
-    children.push(
-      headline.sansLargest({
-        element: headline$1,
-        elementStyles: {
-          element: {
-            color: `${token__namespace.color.black}`,
-            fontWeight: 800,
-            textTransform: "uppercase",
-            textWrap: "balance",
-            [`${BREAKPOINTS.large}`]: {
-              maxWidth: "90%"
-            }
-          },
-          siblingAfter: {
-            marginTop: token__namespace.spacing.sm
-          }
-        }
+  if (headline && !compositeHeadline) {
+    const headlineStyles = {
+      ...typography__namespace.sans.compose("largest", {
+        theme: theme.theme.fontColor(finalIsThemeDark)
+      }),
+      ...animation__namespace.line.composeSlideUnder({
+        color: theme.theme.foreground(finalIsThemeDark)
       })
-    );
+    };
+    const headlineElement = new webBuilderLibrary.ElementBuilder(headline).styled(headlineStyles).withStyles({
+      element: {
+        fontWeight: 800,
+        textTransform: "uppercase",
+        textWrap: "balance",
+        [`${BREAKPOINTS.large}`]: {
+          maxWidth: "90%"
+        }
+      },
+      siblingAfter: {
+        marginTop: token__namespace.spacing.sm
+      }
+    }).withModifier((el) => dom.wrapTextNodeInSpan(el)).build();
+    container.withChild(headlineElement);
   }
   if (eventDetails) {
-    children.push(
-      index.createDiv({
-        className: "text-lockup-medium-event-details",
-        children: [eventDetails],
-        elementStyles: {
-          siblingAfter: {
-            marginTop: token__namespace.spacing.md
-          }
-        }
-      })
-    );
+    const eventDetailsElement = new webBuilderLibrary.ElementBuilder().withClassName("text-lockup-medium-event-details").withChild(eventDetails).withStyles({
+      siblingAfter: {
+        marginTop: token__namespace.spacing.md
+      }
+    }).build();
+    container.withChild(eventDetailsElement);
   }
-  if (text$1) {
-    children.push(
-      richText.advanced({
-        element: text$1,
-        elementStyles: {
-          siblingAfter: {
-            marginTop: token__namespace.spacing.md
-          }
-        },
-        isThemeDark: isThemeDark || isThemeMaryland || false
+  if (text) {
+    const textElement = new webBuilderLibrary.ElementBuilder(text).styled(
+      elementStyles__namespace.text.rich.composeAdvanced({
+        theme: theme.theme.fontColor(finalIsThemeDark)
       })
-    );
+    ).withStyles({
+      siblingAfter: {
+        marginTop: token__namespace.spacing.md
+      }
+    }).build();
+    container.withChild(textElement);
   }
   if (compositeStats) {
-    children.push(compositeStats);
+    container.withChild(compositeStats);
   }
   if (actions) {
-    children.push(
-      layout.gridStacked({
-        element: actions,
-        elementStyles: {
-          element: {
-            marginTop: token__namespace.spacing.md,
-            [`${BREAKPOINTS.large}`]: {
-              marginTop: token__namespace.spacing.lg
-            }
-          }
-        }
-      })
-    );
-  }
-  return index.createDiv({
-    className: "text-lockup-medium",
-    children,
-    elementStyles: {
+    const actionsElement = new webBuilderLibrary.ElementBuilder(actions).styled(layout__namespace.grid.stacked).withStyles({
       element: {
-        zIndex: "9",
-        position: "relative"
+        marginTop: token__namespace.spacing.md,
+        [`${BREAKPOINTS.large}`]: {
+          marginTop: token__namespace.spacing.lg
+        }
       }
-    }
-  });
+    }).build();
+    container.withChild(actionsElement);
+  }
+  return container.build();
 };
 module.exports = medium;
 //# sourceMappingURL=medium.js.map

package/dist/atomic/text-lockup/medium.js.map

@@ -1 +1 @@
-{"version":3,"file":"medium.js","sources":["../../../source/atomic/text-lockup/medium.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\ninterface TypeTextLockupMedium {\n  actions?: HTMLElement | null;\n  compositeHeadline?: ElementVisual | null;\n  eventDetails?: ElementVisual;\n  headline?: HTMLElement | null;\n  isThemeDark?: boolean;\n  isThemeMaryland?: boolean;\n  ribbon?: HTMLElement | null;\n  compositeStats?: ElementVisual | null;\n  text?: HTMLElement | null;\n}\n\nconst BREAKPOINTS = {\n  medium: `@container (min-width: 400px)`,\n  large: `@container (min-width: 600px)`,\n};\n\nexport default ({\n  actions,\n  eventDetails,\n  compositeHeadline,\n  compositeStats,\n  headline,\n  isThemeDark,\n  isThemeMaryland,\n  ribbon,\n  text,\n}: TypeTextLockupMedium) => {\n  const children: ElementVisual[] = [];\n\n  if (ribbon) {\n    children.push(\n      ElementModel.text.ribbon({\n        element: ribbon,\n        elementStyles: {\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  if (compositeHeadline) {\n    children.push(compositeHeadline);\n  }\n\n  if (headline && !compositeHeadline) {\n    children.push(\n      ElementModel.headline.sansLargest({\n        element: headline,\n        elementStyles: {\n          element: {\n            color: `${token.color.black}`,\n            fontWeight: 800,\n            textTransform: 'uppercase',\n            textWrap: 'balance',\n\n            [`${BREAKPOINTS.large}`]: {\n              maxWidth: '90%',\n            },\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  if (eventDetails) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-medium-event-details',\n        children: [eventDetails],\n        elementStyles: {\n          siblingAfter: {\n            marginTop: token.spacing.md,\n          },\n        },\n      }),\n    );\n  }\n\n  if (text) {\n    children.push(\n      ElementModel.richText.advanced({\n        element: text,\n        elementStyles: {\n          siblingAfter: {\n            marginTop: token.spacing.md,\n          },\n        },\n        isThemeDark: isThemeDark || isThemeMaryland || false,\n      }),\n    );\n  }\n\n  if (compositeStats) {\n    children.push(compositeStats);\n  }\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridStacked({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.md,\n\n            [`${BREAKPOINTS.large}`]: {\n              marginTop: token.spacing.lg,\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'text-lockup-medium',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    },\n  });\n};\n"],"names":["headline","text","ElementModel.text.ribbon","token","ElementModel.headline.sansLargest","ElementModel.createDiv","ElementModel.richText.advanced","ElementModel.layout.gridStacked"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,cAAc;AAAA,EAElB,OAAO;AACT;AAEA,MAAA,SAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,UACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,MACAC;AACF,MAA4B;AAC1B,QAAM,WAA4B,CAAA;AAElC,MAAI,QAAQ;AACV,aAAS;AAAA,MACPC,YAAyB;AAAA,QACvB,SAAS;AAAA,QACT,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAWC,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,mBAAmB;AACrB,aAAS,KAAK,iBAAiB;AAAA,EACjC;AAEA,MAAIH,cAAY,CAAC,mBAAmB;AAClC,aAAS;AAAA,MACPI,qBAAkC;AAAA,QAChC,SAASJ;AAAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,OAAO,GAAGG,iBAAM,MAAM,KAAK;AAAA,YAC3B,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,UAAU;AAAA,YAEV,CAAC,GAAG,YAAY,KAAK,EAAE,GAAG;AAAA,cACxB,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,UAEF,cAAc;AAAA,YACZ,WAAWA,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,cAAc;AAChB,aAAS;AAAA,MACPE,gBAAuB;AAAA,QACrB,WAAW;AAAA,QACX,UAAU,CAAC,YAAY;AAAA,QACvB,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAWF,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAIF,QAAM;AACR,aAAS;AAAA,MACPK,kBAA+B;AAAA,QAC7B,SAASL;AAAAA,QACT,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAWE,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF,aAAa,eAAe,mBAAmB;AAAA,MAAA,CAChD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,gBAAgB;AAClB,aAAS,KAAK,cAAc;AAAA,EAC9B;AAEA,MAAI,SAAS;AACX,aAAS;AAAA,MACPI,mBAAgC;AAAA,QAC9B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAWJ,iBAAM,QAAQ;AAAA,YAEzB,CAAC,GAAG,YAAY,KAAK,EAAE,GAAG;AAAA,cACxB,WAAWA,iBAAM,QAAQ;AAAA,YAAA;AAAA,UAC3B;AAAA,QACF;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOE,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"medium.js","sources":["../../../source/atomic/text-lockup/medium.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { ElementModel } from '../../_types';\n\ninterface TypeTextLockupMedium {\n  actions?: HTMLElement | null;\n  compositeHeadline?: ElementModel<HTMLElement> | null;\n  eventDetails?: ElementModel<HTMLElement>;\n  headline?: HTMLElement | null;\n  isThemeDark?: boolean;\n  isThemeMaryland?: boolean;\n  ribbon?: HTMLElement | null;\n  compositeStats?: ElementModel<HTMLElement> | null;\n  text?: HTMLElement | null;\n}\n\nconst BREAKPOINTS = {\n  medium: `@container (min-width: 400px)`,\n  large: `@container (min-width: 600px)`,\n};\n\nexport default ({\n  actions,\n  eventDetails,\n  compositeHeadline,\n  compositeStats,\n  headline,\n  isThemeDark,\n  isThemeMaryland,\n  ribbon,\n  text,\n}: TypeTextLockupMedium) => {\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-medium')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (ribbon) {\n    const ribbonElement = new ElementBuilder(ribbon)\n      .styled(elementStyles.text.decoration.ribbon)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(ribbonElement);\n  }\n\n  if (compositeHeadline) {\n    container.withChild(compositeHeadline);\n  }\n\n  if (headline && !compositeHeadline) {\n    const headlineStyles = {\n      ...typography.sans.compose('largest', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(finalIsThemeDark),\n      }),\n    };\n\n    const headlineElement = new ElementBuilder(headline)\n      .styled(headlineStyles)\n      .withStyles({\n        element: {\n          fontWeight: 800,\n          textTransform: 'uppercase',\n          textWrap: 'balance',\n\n          [`${BREAKPOINTS.large}`]: {\n            maxWidth: '90%',\n          },\n        },\n        siblingAfter: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(headlineElement);\n  }\n\n  if (eventDetails) {\n    const eventDetailsElement = new ElementBuilder()\n      .withClassName('text-lockup-medium-event-details')\n      .withChild(eventDetails)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.md,\n        },\n      })\n      .build();\n\n    container.withChild(eventDetailsElement);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeAdvanced({\n          theme: theme.fontColor(finalIsThemeDark),\n        }),\n      )\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.md,\n        },\n      })\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (compositeStats) {\n    container.withChild(compositeStats);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.stacked)\n      .withStyles({\n        element: {\n          marginTop: token.spacing.md,\n\n          [`${BREAKPOINTS.large}`]: {\n            marginTop: token.spacing.lg,\n          },\n        },\n      })\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["ElementBuilder","elementStyles","token","typography","theme","animationStyles","wrapTextNodeInSpan","layout"],"mappings":"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"}

package/dist/atomic/text-lockup/medium.mjs

@@ -1,9 +1,11 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
-import { createDiv } from "../../model/elements/index.mjs";
-import { ribbon } from "../../model/elements/text.mjs";
-import { sansLargest } from "../../model/elements/headline.mjs";
-import { advanced } from "../../model/elements/rich-text.mjs";
-import { gridStacked } from "../../model/elements/layout.mjs";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import * as animation from "@universityofmaryland/web-styles-library/animation";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+import { wrapTextNodeInSpan } from "@universityofmaryland/web-utilities-library/dom";
 const BREAKPOINTS = {
   large: `@container (min-width: 600px)`
 };
@@ -15,100 +17,86 @@ const medium = ({
   headline,
   isThemeDark,
   isThemeMaryland,
-  ribbon: ribbon$1,
+  ribbon,
   text
 }) => {
-  const children = [];
-  if (ribbon$1) {
-    children.push(
-      ribbon({
-        element: ribbon$1,
-        elementStyles: {
-          siblingAfter: {
-            marginTop: token.spacing.sm
-          }
-        }
-      })
-    );
+  const finalIsThemeDark = isThemeDark || isThemeMaryland;
+  const container = new ElementBuilder().withClassName("text-lockup-medium").withStyles({
+    element: {
+      zIndex: "9",
+      position: "relative"
+    }
+  });
+  if (ribbon) {
+    const ribbonElement = new ElementBuilder(ribbon).styled(elementStyles.text.decoration.ribbon).withStyles({
+      siblingAfter: {
+        marginTop: token.spacing.sm
+      }
+    }).build();
+    container.withChild(ribbonElement);
   }
   if (compositeHeadline) {
-    children.push(compositeHeadline);
+    container.withChild(compositeHeadline);
   }
   if (headline && !compositeHeadline) {
-    children.push(
-      sansLargest({
-        element: headline,
-        elementStyles: {
-          element: {
-            color: `${token.color.black}`,
-            fontWeight: 800,
-            textTransform: "uppercase",
-            textWrap: "balance",
-            [`${BREAKPOINTS.large}`]: {
-              maxWidth: "90%"
-            }
-          },
-          siblingAfter: {
-            marginTop: token.spacing.sm
-          }
-        }
+    const headlineStyles = {
+      ...typography.sans.compose("largest", {
+        theme: theme.fontColor(finalIsThemeDark)
+      }),
+      ...animation.line.composeSlideUnder({
+        color: theme.foreground(finalIsThemeDark)
       })
-    );
+    };
+    const headlineElement = new ElementBuilder(headline).styled(headlineStyles).withStyles({
+      element: {
+        fontWeight: 800,
+        textTransform: "uppercase",
+        textWrap: "balance",
+        [`${BREAKPOINTS.large}`]: {
+          maxWidth: "90%"
+        }
+      },
+      siblingAfter: {
+        marginTop: token.spacing.sm
+      }
+    }).withModifier((el) => wrapTextNodeInSpan(el)).build();
+    container.withChild(headlineElement);
   }
   if (eventDetails) {
-    children.push(
-      createDiv({
-        className: "text-lockup-medium-event-details",
-        children: [eventDetails],
-        elementStyles: {
-          siblingAfter: {
-            marginTop: token.spacing.md
-          }
-        }
-      })
-    );
+    const eventDetailsElement = new ElementBuilder().withClassName("text-lockup-medium-event-details").withChild(eventDetails).withStyles({
+      siblingAfter: {
+        marginTop: token.spacing.md
+      }
+    }).build();
+    container.withChild(eventDetailsElement);
   }
   if (text) {
-    children.push(
-      advanced({
-        element: text,
-        elementStyles: {
-          siblingAfter: {
-            marginTop: token.spacing.md
-          }
-        },
-        isThemeDark: isThemeDark || isThemeMaryland || false
+    const textElement = new ElementBuilder(text).styled(
+      elementStyles.text.rich.composeAdvanced({
+        theme: theme.fontColor(finalIsThemeDark)
       })
-    );
+    ).withStyles({
+      siblingAfter: {
+        marginTop: token.spacing.md
+      }
+    }).build();
+    container.withChild(textElement);
   }
   if (compositeStats) {
-    children.push(compositeStats);
+    container.withChild(compositeStats);
   }
   if (actions) {
-    children.push(
-      gridStacked({
-        element: actions,
-        elementStyles: {
-          element: {
-            marginTop: token.spacing.md,
-            [`${BREAKPOINTS.large}`]: {
-              marginTop: token.spacing.lg
-            }
-          }
-        }
-      })
-    );
-  }
-  return createDiv({
-    className: "text-lockup-medium",
-    children,
-    elementStyles: {
+    const actionsElement = new ElementBuilder(actions).styled(layout.grid.stacked).withStyles({
       element: {
-        zIndex: "9",
-        position: "relative"
+        marginTop: token.spacing.md,
+        [`${BREAKPOINTS.large}`]: {
+          marginTop: token.spacing.lg
+        }
       }
-    }
-  });
+    }).build();
+    container.withChild(actionsElement);
+  }
+  return container.build();
 };
 export {
   medium as default