@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/atomic/events/sign.js

@@ -1,8 +1,9 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
-const index = require("../../model/elements/index.js");
-const event = require("../../model/elements/event.js");
-const headline = require("../../model/elements/headline.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 theme = require("@universityofmaryland/web-utilities-library/theme");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -20,6 +21,8 @@ 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 makeDateElement = ({
   element,
   isMonth,
@@ -35,24 +38,29 @@ const makeDateElement = ({
     dateElement.appendChild(element);
   }
   if (isDay && isLargeSize && !isMultiDay) {
-    return headline.sansExtraLarge({
-      element: dateElement,
-      isThemeDark
-    });
+    return new webBuilderLibrary.ElementBuilder(dateElement).styled(
+      typography__namespace.sans.compose("extralarge", {
+        theme: theme.theme.fontColor(isThemeDark)
+      })
+    ).build();
   }
   if (isDay) {
-    return headline.sansLarger({
-      element: dateElement,
-      isThemeDark
-    });
+    return new webBuilderLibrary.ElementBuilder(dateElement).styled(
+      typography__namespace.sans.compose("larger", {
+        theme: theme.theme.fontColor(isThemeDark)
+      })
+    ).build();
   }
   if (isMonth && isLargeSize && !isMultiDay) {
-    return headline.sansSmall({
-      element: dateElement,
-      isThemeDark
-    });
+    return new webBuilderLibrary.ElementBuilder(dateElement).styled(
+      typography__namespace.sans.compose("small", {
+        theme: theme.theme.fontColor(isThemeDark)
+      })
+    ).build();
   }
-  return headline.sansMin({ element: dateElement, isThemeDark });
+  return new webBuilderLibrary.ElementBuilder(dateElement).styled(
+    typography__namespace.sans.compose("min", { theme: theme.theme.fontColor(isThemeDark) })
+  ).build();
 };
 const makeStartDateBlock = ({
   startMonth,
@@ -60,51 +68,46 @@ const makeStartDateBlock = ({
   isLargeSize,
   isMultiDay,
   isThemeDark
-}) => index.createParagraph({
-  className: "event-sign-start",
-  elementStyles: {
+}) => {
+  const monthElement = makeDateElement({
+    element: startMonth,
+    isMonth: true,
+    isLargeSize,
+    isMultiDay,
+    isThemeDark
+  });
+  const dayElement = makeDateElement({
+    element: startDay,
+    isDay: true,
+    isLargeSize,
+    isMultiDay,
+    isThemeDark
+  });
+  return new webBuilderLibrary.ElementBuilder("p").withClassName("event-sign-start").withStyles({
     subElement: {
       color: token__namespace.color.black
     }
-  },
-  children: [
-    makeDateElement({
-      element: startMonth,
-      isMonth: true,
-      isLargeSize,
-      isMultiDay,
-      isThemeDark
-    }),
-    makeDateElement({
-      element: startDay,
-      isDay: true,
-      isLargeSize,
-      isMultiDay,
-      isThemeDark
-    })
-  ]
-});
+  }).withChildren(monthElement, dayElement).build();
+};
 const makeEndDateBlock = ({
   endMonth,
   endDay,
   isThemeDark
-}) => index.createParagraph({
-  className: "event-sign-end",
-  children: [
-    makeDateElement({
-      element: endMonth,
-      isMonth: true,
-      isMultiDay: true,
-      isThemeDark
-    }),
-    makeDateElement({
-      element: endDay,
-      isDay: true,
-      isMultiDay: true,
-      isThemeDark
-    })
-  ]
-});
+}) => {
+  const monthElement = makeDateElement({
+    element: endMonth,
+    isMonth: true,
+    isMultiDay: true,
+    isThemeDark
+  });
+  const dayElement = makeDateElement({
+    element: endDay,
+    isDay: true,
+    isMultiDay: true,
+    isThemeDark
+  });
+  return new webBuilderLibrary.ElementBuilder("p").withClassName("event-sign-end").withChildren(monthElement, dayElement).build();
+};
 const sign = (props) => {
   const {
     startMonth,
@@ -117,47 +120,35 @@ const sign = (props) => {
   const isTheSameMonth = endMonth === startMonth;
   const isTheSameDay = endDay === startDay;
   const isMultiDay = !isTheSameMonth || !isTheSameDay;
-  let children = [];
-  children.push(
-    makeStartDateBlock({
-      startMonth,
-      startDay,
-      isLargeSize,
-      isMultiDay,
-      isThemeDark
-    })
-  );
-  if (isMultiDay && endDay && endMonth) {
-    const srOnly = index.createSpan({
-      className: "sr-only"
-    });
-    const dash = index.createSpan({
-      className: "dash",
-      elementStyles: {
-        element: {
-          width: "10px",
-          height: "3px",
-          margin: "13px 5px 0",
-          display: "block",
-          backgroundColor: isThemeDark ? "white" : "black"
-        }
+  const startBlock = makeStartDateBlock({
+    startMonth,
+    startDay,
+    isLargeSize,
+    isMultiDay,
+    isThemeDark
+  });
+  const container = new webBuilderLibrary.ElementBuilder().styled(elementStyles__namespace.event.sign.container).withChild(startBlock);
+  if (isMultiDay && !!endDay && !!endMonth) {
+    const srOnly = new webBuilderLibrary.ElementBuilder("span").withClassName("sr-only").withHTML("to").build();
+    const dash = new webBuilderLibrary.ElementBuilder("span").withClassName("dash").withStyles({
+      element: {
+        width: "10px",
+        height: "3px",
+        margin: "13px 5px 0",
+        display: "block",
+        backgroundColor: isThemeDark ? "white" : "black"
       }
+    }).build();
+    const endBlock = makeEndDateBlock({
+      endDay,
+      endMonth,
+      isThemeDark
     });
-    srOnly.element.innerHTML = "to";
-    children.push(
-      srOnly,
-      dash,
-      makeEndDateBlock({
-        endDay,
-        endMonth,
-        isThemeDark
-      })
-    );
+    container.withChild(srOnly);
+    container.withChild(dash);
+    container.withChild(endBlock);
   }
-  return event.signContainer({
-    element: document.createElement("div"),
-    children
-  });
+  return container.build();
 };
 module.exports = sign;
 //# sourceMappingURL=sign.js.map

package/dist/atomic/events/sign.js.map

@@ -1 +1 @@
-{"version":3,"file":"sign.js","sources":["../../../source/atomic/events/sign.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\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: 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","token","ElementModel.createSpan","ElementModel.event.signContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAOM;AACJ,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,MAAI,OAAO,YAAY,UAAU;AAC/B,gBAAY,YAAY;AAAA,EAC1B,OAAO;AACL,gBAAY,YAAY,OAAO;AAAA,EACjC;AAEA,MAAI,SAAS,eAAe,CAAC,YAAY;AACvC,WAAOA,wBAAqC;AAAA,MAC1C,SAAS;AAAA,MACT;AAAA,IAAA,CACD;AAAA,EACH;AAEA,MAAI,OAAO;AACT,WAAOC,oBAAiC;AAAA,MACtC,SAAS;AAAA,MACT;AAAA,IAAA,CACD;AAAA,EACH;AAEA,MAAI,WAAW,eAAe,CAAC,YAAY;AACzC,WAAOC,mBAAgC;AAAA,MACrC,SAAS;AAAA,MACT;AAAA,IAAA,CACD;AAAA,EACH;AAEA,SAAOC,SAAAA,QAA8B,EAAE,SAAS,aAAa,aAAa;AAC5E;AAEA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAOEC,sBAA6B;AAAA,EAC3B,WAAW;AAAA,EACX,eAAe;AAAA,IACb,YAAY;AAAA,MACV,OAAOC,iBAAM,MAAM;AAAA,IAAA;AAAA,EACrB;AAAA,EAEF,UAAU;AAAA,IACR,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,IACD,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,EAAA;AAEL,CAAC;AAEH,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,MAKED,sBAA6B;AAAA,EAC3B,WAAW;AAAA,EACX,UAAU;AAAA,IACR,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ;AAAA,IAAA,CACD;AAAA,IACD,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,OAAO;AAAA,MACP,YAAY;AAAA,MACZ;AAAA,IAAA,CACD;AAAA,EAAA;AAEL,CAAC;AAEH,MAAA,OAAe,CAAC,UAOV;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAAA,IACZ;AACJ,QAAM,iBAAiB,aAAa;AACpC,QAAM,eAAe,WAAW;AAChC,QAAM,aAAa,CAAC,kBAAkB,CAAC;AACvC,MAAI,WAA4B,CAAA;AAEhC,WAAS;AAAA,IACP,mBAAmB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,EAAA;AAGH,MAAI,cAAc,UAAU,UAAU;AACpC,UAAM,SAASE,MAAAA,WAAwB;AAAA,MACrC,WAAW;AAAA,IAAA,CACZ;AACD,UAAM,OAAOA,MAAAA,WAAwB;AAAA,MACnC,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,iBAAiB,cAAc,UAAU;AAAA,QAAA;AAAA,MAC3C;AAAA,IACF,CACD;AAED,WAAO,QAAQ,YAAY;AAE3B,aAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,oBAAiC;AAAA,IACtC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC;AAAA,EAAA,CACD;AACH;;"}
+{"version":3,"file":"sign.js","sources":["../../../source/atomic/events/sign.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 { theme } from '@universityofmaryland/web-utilities-library/theme';\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 new ElementBuilder(dateElement)\n      .styled(\n        typography.sans.compose('extralarge', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .build();\n  }\n\n  if (isDay) {\n    return new ElementBuilder(dateElement)\n      .styled(\n        typography.sans.compose('larger', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .build();\n  }\n\n  if (isMonth && isLargeSize && !isMultiDay) {\n    return new ElementBuilder(dateElement)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .build();\n  }\n\n  return new ElementBuilder(dateElement)\n    .styled(\n      typography.sans.compose('min', { theme: theme.fontColor(isThemeDark) }),\n    )\n    .build();\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  const monthElement = makeDateElement({\n    element: startMonth,\n    isMonth: true,\n    isLargeSize,\n    isMultiDay,\n    isThemeDark,\n  });\n  const dayElement = makeDateElement({\n    element: startDay,\n    isDay: true,\n    isLargeSize,\n    isMultiDay,\n    isThemeDark,\n  });\n\n  return new ElementBuilder('p')\n    .withClassName('event-sign-start')\n    .withStyles({\n      subElement: {\n        color: token.color.black,\n      },\n    })\n    .withChildren(monthElement, dayElement)\n    .build();\n};\n\nconst makeEndDateBlock = ({\n  endMonth,\n  endDay,\n  isThemeDark,\n}: {\n  endDay: string | HTMLElement;\n  endMonth: string | HTMLElement;\n  isThemeDark?: boolean;\n}) => {\n  const monthElement = makeDateElement({\n    element: endMonth,\n    isMonth: true,\n    isMultiDay: true,\n    isThemeDark,\n  });\n  const dayElement = makeDateElement({\n    element: endDay,\n    isDay: true,\n    isMultiDay: true,\n    isThemeDark,\n  });\n\n  return new ElementBuilder('p')\n    .withClassName('event-sign-end')\n    .withChildren(monthElement, dayElement)\n    .build();\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\n  const startBlock = makeStartDateBlock({\n    startMonth,\n    startDay,\n    isLargeSize,\n    isMultiDay,\n    isThemeDark,\n  });\n\n  const container = new ElementBuilder()\n    .styled(elementStyles.event.sign.container)\n    .withChild(startBlock);\n\n  if (isMultiDay && !!endDay && !!endMonth) {\n    const srOnly = new ElementBuilder('span')\n      .withClassName('sr-only')\n      .withHTML('to')\n      .build();\n\n    const dash = new ElementBuilder('span')\n      .withClassName('dash')\n      .withStyles({\n        element: {\n          width: '10px',\n          height: '3px',\n          margin: '13px 5px 0',\n          display: 'block',\n          backgroundColor: isThemeDark ? 'white' : 'black',\n        },\n      })\n      .build();\n\n    const endBlock = makeEndDateBlock({\n      endDay: endDay!,\n      endMonth: endMonth!,\n      isThemeDark,\n    });\n\n    container.withChild(srOnly);\n    container.withChild(dash);\n    container.withChild(endBlock);\n  }\n\n  return container.build();\n};\n"],"names":["ElementBuilder","typography","theme","token","elementStyles"],"mappings":"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"}

package/dist/atomic/events/sign.mjs

@@ -1,7 +1,8 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
-import { createParagraph, createSpan } from "../../model/elements/index.mjs";
-import { signContainer } from "../../model/elements/event.mjs";
-import { sansExtraLarge, sansLarger, sansSmall, sansMin } from "../../model/elements/headline.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 { theme } from "@universityofmaryland/web-utilities-library/theme";
 const makeDateElement = ({
   element,
   isMonth,
@@ -17,24 +18,29 @@ const makeDateElement = ({
     dateElement.appendChild(element);
   }
   if (isDay && isLargeSize && !isMultiDay) {
-    return sansExtraLarge({
-      element: dateElement,
-      isThemeDark
-    });
+    return new ElementBuilder(dateElement).styled(
+      typography.sans.compose("extralarge", {
+        theme: theme.fontColor(isThemeDark)
+      })
+    ).build();
   }
   if (isDay) {
-    return sansLarger({
-      element: dateElement,
-      isThemeDark
-    });
+    return new ElementBuilder(dateElement).styled(
+      typography.sans.compose("larger", {
+        theme: theme.fontColor(isThemeDark)
+      })
+    ).build();
   }
   if (isMonth && isLargeSize && !isMultiDay) {
-    return sansSmall({
-      element: dateElement,
-      isThemeDark
-    });
+    return new ElementBuilder(dateElement).styled(
+      typography.sans.compose("small", {
+        theme: theme.fontColor(isThemeDark)
+      })
+    ).build();
   }
-  return sansMin({ element: dateElement, isThemeDark });
+  return new ElementBuilder(dateElement).styled(
+    typography.sans.compose("min", { theme: theme.fontColor(isThemeDark) })
+  ).build();
 };
 const makeStartDateBlock = ({
   startMonth,
@@ -42,51 +48,46 @@ const makeStartDateBlock = ({
   isLargeSize,
   isMultiDay,
   isThemeDark
-}) => createParagraph({
-  className: "event-sign-start",
-  elementStyles: {
+}) => {
+  const monthElement = makeDateElement({
+    element: startMonth,
+    isMonth: true,
+    isLargeSize,
+    isMultiDay,
+    isThemeDark
+  });
+  const dayElement = makeDateElement({
+    element: startDay,
+    isDay: true,
+    isLargeSize,
+    isMultiDay,
+    isThemeDark
+  });
+  return new ElementBuilder("p").withClassName("event-sign-start").withStyles({
     subElement: {
       color: token.color.black
     }
-  },
-  children: [
-    makeDateElement({
-      element: startMonth,
-      isMonth: true,
-      isLargeSize,
-      isMultiDay,
-      isThemeDark
-    }),
-    makeDateElement({
-      element: startDay,
-      isDay: true,
-      isLargeSize,
-      isMultiDay,
-      isThemeDark
-    })
-  ]
-});
+  }).withChildren(monthElement, dayElement).build();
+};
 const makeEndDateBlock = ({
   endMonth,
   endDay,
   isThemeDark
-}) => createParagraph({
-  className: "event-sign-end",
-  children: [
-    makeDateElement({
-      element: endMonth,
-      isMonth: true,
-      isMultiDay: true,
-      isThemeDark
-    }),
-    makeDateElement({
-      element: endDay,
-      isDay: true,
-      isMultiDay: true,
-      isThemeDark
-    })
-  ]
-});
+}) => {
+  const monthElement = makeDateElement({
+    element: endMonth,
+    isMonth: true,
+    isMultiDay: true,
+    isThemeDark
+  });
+  const dayElement = makeDateElement({
+    element: endDay,
+    isDay: true,
+    isMultiDay: true,
+    isThemeDark
+  });
+  return new ElementBuilder("p").withClassName("event-sign-end").withChildren(monthElement, dayElement).build();
+};
 const sign = (props) => {
   const {
     startMonth,
@@ -99,47 +100,35 @@ const sign = (props) => {
   const isTheSameMonth = endMonth === startMonth;
   const isTheSameDay = endDay === startDay;
   const isMultiDay = !isTheSameMonth || !isTheSameDay;
-  let children = [];
-  children.push(
-    makeStartDateBlock({
-      startMonth,
-      startDay,
-      isLargeSize,
-      isMultiDay,
-      isThemeDark
-    })
-  );
-  if (isMultiDay && endDay && endMonth) {
-    const srOnly = createSpan({
-      className: "sr-only"
-    });
-    const dash = createSpan({
-      className: "dash",
-      elementStyles: {
-        element: {
-          width: "10px",
-          height: "3px",
-          margin: "13px 5px 0",
-          display: "block",
-          backgroundColor: isThemeDark ? "white" : "black"
-        }
+  const startBlock = makeStartDateBlock({
+    startMonth,
+    startDay,
+    isLargeSize,
+    isMultiDay,
+    isThemeDark
+  });
+  const container = new ElementBuilder().styled(elementStyles.event.sign.container).withChild(startBlock);
+  if (isMultiDay && !!endDay && !!endMonth) {
+    const srOnly = new ElementBuilder("span").withClassName("sr-only").withHTML("to").build();
+    const dash = new ElementBuilder("span").withClassName("dash").withStyles({
+      element: {
+        width: "10px",
+        height: "3px",
+        margin: "13px 5px 0",
+        display: "block",
+        backgroundColor: isThemeDark ? "white" : "black"
       }
+    }).build();
+    const endBlock = makeEndDateBlock({
+      endDay,
+      endMonth,
+      isThemeDark
     });
-    srOnly.element.innerHTML = "to";
-    children.push(
-      srOnly,
-      dash,
-      makeEndDateBlock({
-        endDay,
-        endMonth,
-        isThemeDark
-      })
-    );
+    container.withChild(srOnly);
+    container.withChild(dash);
+    container.withChild(endBlock);
   }
-  return signContainer({
-    element: document.createElement("div"),
-    children
-  });
+  return container.build();
 };
 export {
   sign as default

package/dist/atomic/events/sign.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sign.mjs","sources":["../../../source/atomic/events/sign.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\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: 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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"}
+{"version":3,"file":"sign.mjs","sources":["../../../source/atomic/events/sign.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 { theme } from '@universityofmaryland/web-utilities-library/theme';\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 new ElementBuilder(dateElement)\n      .styled(\n        typography.sans.compose('extralarge', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .build();\n  }\n\n  if (isDay) {\n    return new ElementBuilder(dateElement)\n      .styled(\n        typography.sans.compose('larger', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .build();\n  }\n\n  if (isMonth && isLargeSize && !isMultiDay) {\n    return new ElementBuilder(dateElement)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .build();\n  }\n\n  return new ElementBuilder(dateElement)\n    .styled(\n      typography.sans.compose('min', { theme: theme.fontColor(isThemeDark) }),\n    )\n    .build();\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  const monthElement = makeDateElement({\n    element: startMonth,\n    isMonth: true,\n    isLargeSize,\n    isMultiDay,\n    isThemeDark,\n  });\n  const dayElement = makeDateElement({\n    element: startDay,\n    isDay: true,\n    isLargeSize,\n    isMultiDay,\n    isThemeDark,\n  });\n\n  return new ElementBuilder('p')\n    .withClassName('event-sign-start')\n    .withStyles({\n      subElement: {\n        color: token.color.black,\n      },\n    })\n    .withChildren(monthElement, dayElement)\n    .build();\n};\n\nconst makeEndDateBlock = ({\n  endMonth,\n  endDay,\n  isThemeDark,\n}: {\n  endDay: string | HTMLElement;\n  endMonth: string | HTMLElement;\n  isThemeDark?: boolean;\n}) => {\n  const monthElement = makeDateElement({\n    element: endMonth,\n    isMonth: true,\n    isMultiDay: true,\n    isThemeDark,\n  });\n  const dayElement = makeDateElement({\n    element: endDay,\n    isDay: true,\n    isMultiDay: true,\n    isThemeDark,\n  });\n\n  return new ElementBuilder('p')\n    .withClassName('event-sign-end')\n    .withChildren(monthElement, dayElement)\n    .build();\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\n  const startBlock = makeStartDateBlock({\n    startMonth,\n    startDay,\n    isLargeSize,\n    isMultiDay,\n    isThemeDark,\n  });\n\n  const container = new ElementBuilder()\n    .styled(elementStyles.event.sign.container)\n    .withChild(startBlock);\n\n  if (isMultiDay && !!endDay && !!endMonth) {\n    const srOnly = new ElementBuilder('span')\n      .withClassName('sr-only')\n      .withHTML('to')\n      .build();\n\n    const dash = new ElementBuilder('span')\n      .withClassName('dash')\n      .withStyles({\n        element: {\n          width: '10px',\n          height: '3px',\n          margin: '13px 5px 0',\n          display: 'block',\n          backgroundColor: isThemeDark ? 'white' : 'black',\n        },\n      })\n      .build();\n\n    const endBlock = makeEndDateBlock({\n      endDay: endDay!,\n      endMonth: endMonth!,\n      isThemeDark,\n    });\n\n    container.withChild(srOnly);\n    container.withChild(dash);\n    container.withChild(endBlock);\n  }\n\n  return container.build();\n};\n"],"names":[],"mappings":"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"}

package/dist/atomic/layout/block/stacked.d.ts

@@ -1,32 +1,20 @@
-import { UMDElement } from '../../../_types';
+import { ElementModel } from '../../../_types';
 interface BoxProps {
     hasBorder?: boolean;
     isThemeDark?: boolean;
     isTransparent?: boolean;
 }
 export declare const image: ({ customStyles, children, hasBorder, isThemeDark, }: BoxProps & {
-    children: UMDElement[];
+    children: ElementModel[];
     customStyles?: Record<string, any>;
-}) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+}) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export declare const textContainer: ({ children, customStyles, hasBorder, isThemeDark, isTransparent, }: BoxProps & {
     customStyles?: Record<string, any>;
-    children: UMDElement[];
-}) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+    children: ElementModel[];
+}) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export declare const container: ({ children, customStyles, hasBorder, isThemeDark, isTransparent, }: BoxProps & {
     customStyles?: Record<string, any>;
-    children: UMDElement[];
-}) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+    children: ElementModel[];
+}) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=stacked.d.ts.map

package/dist/atomic/layout/block/stacked.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/block/stacked.ts"],"names":[],"mappings":"AAOA,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;;;;CA+CG,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;;;;CA4BG,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"}
+{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/block/stacked.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMpD,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,YAAY,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC,kFAgDA,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,oEAM3B,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B,kFA6BA,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,oEAMvB,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B,kFAyCA,CAAC"}