@universityofmaryland/web-elements-library 1.5.3 → 1.5.6

package/dist/composite/footer/elements/main-section/social.mjs

@@ -1,8 +1,8 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { token, typography } from "@universityofmaryland/web-styles-library";
 import { facebook, x, instagram, youtube, twitter, linkedin, threads } from "@universityofmaryland/web-icons-library/social";
 import createCampaignRow from "./campaign.mjs";
 import { BREAKPOINTS } from "../../globals.mjs";
-import { createDiv, create } from "../../../../model/elements/index.mjs";
 const ATTRIBUTE_LAYOUT = "layout";
 const LAYOUT_GRID = "grid";
 const { LARGE } = BREAKPOINTS;
@@ -55,126 +55,103 @@ const CreateSocialRow = (props) => {
       })
     );
   }
-  const headline = create({
-    element: document.createElement("p"),
-    className: "umd-footer-social-container_headline",
-    elementStyles: {
-      element: {
-        paddingTop: "3px",
-        fontWeight: 700,
-        ...typography.elements.interativeMedium
-      }
+  const headline = new ElementBuilder("p").withClassName("umd-footer-social-container_headline").withStyles({
+    element: {
+      paddingTop: "3px",
+      fontWeight: 700,
+      ...typography.elements.interativeMedium
     }
-  });
-  headline.element.innerText = "Stay Connected";
+  }).withText("Stay Connected").build();
   const socialLinkChildren = socialLinks.map(
-    (link) => create({
-      element: GetSocialIcon({ link }),
-      className: "umd-footer-social-link",
-      elementStyles: {
-        element: {
-          backgroundColor: token.color.gray.darker,
-          height: "32px",
-          width: "32px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          transition: "background-color .5s",
-          ["& > *, & path"]: {
-            fill: `${token.color.white} !important`,
-            transition: "fill .5s",
-            maxHeight: "20px !important"
-          },
+    (link) => new ElementBuilder(GetSocialIcon({ link })).withClassName("umd-footer-social-link").withStyles({
+      element: {
+        backgroundColor: token.color.gray.darker,
+        height: "32px",
+        width: "32px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "background-color .5s",
+        ["& > *, & path"]: {
+          fill: `${token.color.white} !important`,
+          transition: "fill .5s",
+          maxHeight: "20px !important"
+        },
+        ["&:hover"]: {
+          backgroundColor: token.color.gray.light,
+          ["& path"]: {
+            fill: `${token.color.gray.dark} !important`
+          }
+        },
+        ...isThemeLight && {
+          backgroundColor: token.color.gray.light,
           ["&:hover"]: {
-            backgroundColor: token.color.gray.light,
+            backgroundColor: token.color.gray.dark,
             ["& path"]: {
-              fill: `${token.color.gray.dark} !important`
+              fill: `${token.color.gray.light} !important`
             }
           },
-          ...isThemeLight && {
-            backgroundColor: token.color.gray.light,
-            ["&:hover"]: {
-              backgroundColor: token.color.gray.dark,
-              ["& path"]: {
-                fill: `${token.color.gray.light} !important`
-              }
-            },
-            ["& > *, & path"]: {
-              fill: `${token.color.black} !important`
-            }
+          ["& > *, & path"]: {
+            fill: `${token.color.black} !important`
           }
         }
       }
-    })
+    }).build()
   );
   const gridColumns = Math.min(socialLinks.length, 3);
-  const linksWrapper = createDiv({
-    className: "umd-footer-social-container_wrapper",
-    children: socialLinkChildren,
-    elementStyles: {
-      element: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
-        gridGap: token.spacing.xs,
-        marginLeft: token.spacing.xs
-      }
+  const linksWrapper = new ElementBuilder().withClassName("umd-footer-social-container_wrapper").withStyles({
+    element: {
+      display: "grid",
+      gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+      gridGap: token.spacing.xs,
+      marginLeft: token.spacing.xs
     }
-  });
-  linksWrapper.element.setAttribute("count", `${socialLinks.length}`);
-  const containerChildren = [headline, linksWrapper];
-  const container = createDiv({
-    className: "umd-footer-social-container",
-    children: containerChildren,
-    elementStyles: {
-      element: {
-        marginLeft: "auto",
-        display: "flex",
-        alignItems: "center",
+  }).withChildren(...socialLinkChildren).withAttribute("count", `${socialLinks.length}`).build();
+  return new ElementBuilder().withClassName("umd-footer-social-container").withStyles({
+    element: {
+      marginLeft: "auto",
+      display: "flex",
+      alignItems: "center",
+      alignSelf: "flex-start",
+      ["& > p"]: {
         alignSelf: "flex-start",
-        ["& > p"]: {
-          alignSelf: "flex-start",
-          paddingTop: "3px",
-          fontWeight: 700
-        },
-        [`@container (min-width: 1000px)`]: {
-          justifyContent: "flex-end",
-          paddingLeft: token.spacing["2xl"]
-        }
+        paddingTop: "3px",
+        fontWeight: 700
+      },
+      [`@container (min-width: 1000px)`]: {
+        justifyContent: "flex-end",
+        paddingLeft: token.spacing["2xl"]
       }
     }
-  });
-  if (socialLinks.length >= 4) {
-    container.element.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);
-  }
-  return container;
+  }).withChildren(headline, linksWrapper).withModifier((el) => {
+    if (socialLinks.length >= 4) {
+      el.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);
+    }
+  }).build();
 };
 const createSocialCampaignColumns = (props) => {
   const socialContainer = CreateSocialRow(props);
   const campaignContainer = createCampaignRow(props);
   const { isTypeSimple } = props;
-  return createDiv({
-    className: "umd-footer-social-column_wrapper",
-    children: [socialContainer, campaignContainer],
-    elementStyles: {
-      element: {
-        [`@container  (max-width: ${LARGE - 1}px)`]: {
-          marginTop: token.spacing.md,
-          [`& > .campaign-column-wrapper`]: {
-            display: "none"
-          },
-          ...isTypeSimple && {
-            display: "none"
-          }
+  return new ElementBuilder().withClassName("umd-footer-social-column_wrapper").withStyles({
+    element: {
+      [`@container  (max-width: ${LARGE - 1}px)`]: {
+        marginTop: token.spacing.md,
+        [`& > .campaign-column-wrapper`]: {
+          display: "none"
         },
-        [`@container (min-width: ${LARGE}px)`]: {
-          marginLeft: "auto",
-          [`.umd-footer-contact-container &`]: {
-            display: "none"
-          }
+        ...isTypeSimple && {
+          display: "none"
+        }
+      },
+      [`@container (min-width: ${LARGE}px)`]: {
+        marginLeft: "auto",
+        [`.umd-footer-contact-container &`]: {
+          display: "none"
         }
       }
     }
-  });
+  }).withChildren(socialContainer, campaignContainer).build();
 };
 export {
   createSocialCampaignColumns as default

package/dist/composite/footer/elements/main-section/social.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"social.mjs","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport {\n  facebook as iconFacebook,\n  x as iconX,\n  linkedin as iconLinkedIn,\n  twitter as iconTwitter,\n  youtube as iconYoutube,\n  instagram as iconInstagram,\n  threads as iconThreads,\n} from '@universityofmaryland/web-icons-library/social';\nimport createCampaignRow from './campaign';\nimport { BREAKPOINTS } from '../../globals';\nimport { BaseProps } from '../../_types';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../../_types';\n\ninterface SocialProps extends BaseProps {\n  slotSocialLinks?: HTMLSlotElement;\n}\n\nexport interface SocialCampaignColumnsProps extends SocialProps {}\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_GRID = 'grid';\nconst { LARGE } = BREAKPOINTS;\n\nconst GetSocialIcon = ({ link }: { link: HTMLAnchorElement }) => {\n  const url = link.getAttribute('href') || null;\n  if (!url) return link;\n\n  if (url.match(/facebook.com/)) link.innerHTML = iconFacebook;\n  if (url.match(/x.com/)) link.innerHTML = iconX;\n  if (url.match(/instagram.com/)) link.innerHTML = iconInstagram;\n  if (url.match(/youtube.com/)) link.innerHTML = iconYoutube;\n  if (url.match(/twitter.com/)) link.innerHTML = iconTwitter;\n  if (url.match(/linkedin.com/)) link.innerHTML = iconLinkedIn;\n  if (url.match(/threads.net/)) link.innerHTML = iconThreads;\n\n  return link;\n};\n\nconst CreateSocialRow = (props: SocialProps): ElementVisual => {\n  const { isThemeLight, slotSocialLinks } = props;\n\n  let socialLinks: HTMLAnchorElement[] = [];\n\n  if (slotSocialLinks) {\n    const socialLinksClone = slotSocialLinks.cloneNode(true) as HTMLSlotElement;\n    socialLinks = Array.from(\n      socialLinksClone.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n  }\n\n  if (socialLinks.length === 0) {\n    const socialLink = ({ url, label }: { label: string; url: string }) => {\n      const link = document.createElement('a');\n      link.setAttribute('href', url);\n      link.setAttribute('target', '_blank');\n      link.setAttribute('rel', 'noopener noreferrer');\n      link.setAttribute('aria-label', label);\n      return link;\n    };\n\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.youtube.com/user/UMD2101',\n        label: 'Link to the youtube channel for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.facebook.com/UnivofMaryland',\n        label: 'Link to the facebook page for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.instagram.com/univofmaryland',\n        label: 'Link to the instagram page for the University of Maryland',\n      }),\n    );\n  }\n\n  const headline = ElementModel.create({\n    element: document.createElement('p'),\n    className: 'umd-footer-social-container_headline',\n    elementStyles: {\n      element: {\n        paddingTop: '3px',\n        fontWeight: 700,\n        ...typography.elements.interativeMedium,\n      },\n    },\n  });\n  headline.element.innerText = 'Stay Connected';\n\n  const socialLinkChildren = socialLinks.map((link) =>\n    ElementModel.create({\n      element: GetSocialIcon({ link }),\n      className: 'umd-footer-social-link',\n      elementStyles: {\n        element: {\n          backgroundColor: token.color.gray.darker,\n          height: '32px',\n          width: '32px',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          transition: 'background-color .5s',\n\n          ['& > *, & path']: {\n            fill: `${token.color.white} !important`,\n            transition: 'fill .5s',\n            maxHeight: '20px !important',\n          },\n\n          ['&:hover']: {\n            backgroundColor: token.color.gray.light,\n\n            ['& path']: {\n              fill: `${token.color.gray.dark} !important`,\n            },\n          },\n\n          ...(isThemeLight && {\n            backgroundColor: token.color.gray.light,\n\n            ['&:hover']: {\n              backgroundColor: token.color.gray.dark,\n\n              ['& path']: {\n                fill: `${token.color.gray.light} !important`,\n              },\n            },\n\n            ['& > *, & path']: {\n              fill: `${token.color.black} !important`,\n            },\n          }),\n        },\n      },\n    }),\n  );\n\n  const gridColumns = Math.min(socialLinks.length, 3);\n\n  const linksWrapper = ElementModel.createDiv({\n    className: 'umd-footer-social-container_wrapper',\n    children: socialLinkChildren,\n    elementStyles: {\n      element: {\n        display: 'grid',\n        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n        gridGap: token.spacing.xs,\n        marginLeft: token.spacing.xs,\n      },\n    },\n  });\n  linksWrapper.element.setAttribute('count', `${socialLinks.length}`);\n\n  const containerChildren = [headline, linksWrapper];\n\n  const container = ElementModel.createDiv({\n    className: 'umd-footer-social-container',\n    children: containerChildren,\n    elementStyles: {\n      element: {\n        marginLeft: 'auto',\n        display: 'flex',\n        alignItems: 'center',\n        alignSelf: 'flex-start',\n\n        ['& > p']: {\n          alignSelf: 'flex-start',\n          paddingTop: '3px',\n          fontWeight: 700,\n        },\n\n        [`@container (min-width: 1000px)`]: {\n          justifyContent: 'flex-end',\n          paddingLeft: token.spacing['2xl'],\n        },\n      },\n    },\n  });\n\n  if (socialLinks.length >= 4) {\n    container.element.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);\n  }\n\n  return container;\n};\n\nexport default (props: SocialCampaignColumnsProps): ElementVisual => {\n  const socialContainer = CreateSocialRow(props);\n  const campaignContainer = createCampaignRow(props);\n  const { isTypeSimple } = props;\n\n  return ElementModel.createDiv({\n    className: 'umd-footer-social-column_wrapper',\n    children: [socialContainer, campaignContainer],\n    elementStyles: {\n      element: {\n        [`@container  (max-width: ${LARGE - 1}px)`]: {\n          marginTop: token.spacing.md,\n\n          [`& > .campaign-column-wrapper`]: {\n            display: 'none',\n          },\n\n          ...(isTypeSimple && {\n            display: 'none',\n          }),\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          marginLeft: 'auto',\n\n          [`.umd-footer-contact-container &`]: {\n            display: 'none',\n          },\n        },\n      },\n    },\n  });\n};\n"],"names":["iconFacebook","iconX","iconInstagram","iconYoutube","iconTwitter","iconLinkedIn","iconThreads","ElementModel.create","ElementModel.createDiv"],"mappings":"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"}
+{"version":3,"file":"social.mjs","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { token, typography } from '@universityofmaryland/web-styles-library';\nimport {\n  facebook as iconFacebook,\n  x as iconX,\n  linkedin as iconLinkedIn,\n  twitter as iconTwitter,\n  youtube as iconYoutube,\n  instagram as iconInstagram,\n  threads as iconThreads,\n} from '@universityofmaryland/web-icons-library/social';\nimport createCampaignRow from './campaign';\nimport { BREAKPOINTS } from '../../globals';\nimport { BaseProps } from '../../_types';\nimport { type UMDElement } from '../../../../_types';\n\ninterface SocialProps extends BaseProps {\n  slotSocialLinks?: HTMLSlotElement;\n}\n\nexport interface SocialCampaignColumnsProps extends SocialProps {}\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_GRID = 'grid';\nconst { LARGE } = BREAKPOINTS;\n\nconst GetSocialIcon = ({ link }: { link: HTMLAnchorElement }) => {\n  const url = link.getAttribute('href') || null;\n  if (!url) return link;\n\n  if (url.match(/facebook.com/)) link.innerHTML = iconFacebook;\n  if (url.match(/x.com/)) link.innerHTML = iconX;\n  if (url.match(/instagram.com/)) link.innerHTML = iconInstagram;\n  if (url.match(/youtube.com/)) link.innerHTML = iconYoutube;\n  if (url.match(/twitter.com/)) link.innerHTML = iconTwitter;\n  if (url.match(/linkedin.com/)) link.innerHTML = iconLinkedIn;\n  if (url.match(/threads.net/)) link.innerHTML = iconThreads;\n\n  return link;\n};\n\nconst CreateSocialRow = (props: SocialProps): UMDElement => {\n  const { isThemeLight, slotSocialLinks } = props;\n\n  let socialLinks: HTMLAnchorElement[] = [];\n\n  if (slotSocialLinks) {\n    const socialLinksClone = slotSocialLinks.cloneNode(true) as HTMLSlotElement;\n    socialLinks = Array.from(\n      socialLinksClone.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n  }\n\n  if (socialLinks.length === 0) {\n    const socialLink = ({ url, label }: { label: string; url: string }) => {\n      const link = document.createElement('a');\n      link.setAttribute('href', url);\n      link.setAttribute('target', '_blank');\n      link.setAttribute('rel', 'noopener noreferrer');\n      link.setAttribute('aria-label', label);\n      return link;\n    };\n\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.youtube.com/user/UMD2101',\n        label: 'Link to the youtube channel for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.facebook.com/UnivofMaryland',\n        label: 'Link to the facebook page for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.instagram.com/univofmaryland',\n        label: 'Link to the instagram page for the University of Maryland',\n      }),\n    );\n  }\n\n  const headline = new ElementBuilder('p')\n    .withClassName('umd-footer-social-container_headline')\n    .withStyles({\n      element: {\n        paddingTop: '3px',\n        fontWeight: 700,\n        ...typography.elements.interativeMedium,\n      },\n    })\n    .withText('Stay Connected')\n    .build();\n\n  const socialLinkChildren = socialLinks.map((link) =>\n    new ElementBuilder(GetSocialIcon({ link }))\n      .withClassName('umd-footer-social-link')\n      .withStyles({\n        element: {\n          backgroundColor: token.color.gray.darker,\n          height: '32px',\n          width: '32px',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          transition: 'background-color .5s',\n\n          ['& > *, & path']: {\n            fill: `${token.color.white} !important`,\n            transition: 'fill .5s',\n            maxHeight: '20px !important',\n          },\n\n          ['&:hover']: {\n            backgroundColor: token.color.gray.light,\n\n            ['& path']: {\n              fill: `${token.color.gray.dark} !important`,\n            },\n          },\n\n          ...(isThemeLight && {\n            backgroundColor: token.color.gray.light,\n\n            ['&:hover']: {\n              backgroundColor: token.color.gray.dark,\n\n              ['& path']: {\n                fill: `${token.color.gray.light} !important`,\n              },\n            },\n\n            ['& > *, & path']: {\n              fill: `${token.color.black} !important`,\n            },\n          }),\n        },\n      })\n      .build(),\n  );\n\n  const gridColumns = Math.min(socialLinks.length, 3);\n\n  const linksWrapper = new ElementBuilder()\n    .withClassName('umd-footer-social-container_wrapper')\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n        gridGap: token.spacing.xs,\n        marginLeft: token.spacing.xs,\n      },\n    })\n    .withChildren(...socialLinkChildren)\n    .withAttribute('count', `${socialLinks.length}`)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-social-container')\n    .withStyles({\n      element: {\n        marginLeft: 'auto',\n        display: 'flex',\n        alignItems: 'center',\n        alignSelf: 'flex-start',\n\n        ['& > p']: {\n          alignSelf: 'flex-start',\n          paddingTop: '3px',\n          fontWeight: 700,\n        },\n\n        [`@container (min-width: 1000px)`]: {\n          justifyContent: 'flex-end',\n          paddingLeft: token.spacing['2xl'],\n        },\n      },\n    })\n    .withChildren(headline, linksWrapper)\n    .withModifier((el) => {\n      if (socialLinks.length >= 4) {\n        el.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);\n      }\n    })\n    .build();\n};\n\nexport default (props: SocialCampaignColumnsProps): UMDElement => {\n  const socialContainer = CreateSocialRow(props);\n  const campaignContainer = createCampaignRow(props);\n  const { isTypeSimple } = props;\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-social-column_wrapper')\n    .withStyles({\n      element: {\n        [`@container  (max-width: ${LARGE - 1}px)`]: {\n          marginTop: token.spacing.md,\n\n          [`& > .campaign-column-wrapper`]: {\n            display: 'none',\n          },\n\n          ...(isTypeSimple && {\n            display: 'none',\n          }),\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          marginLeft: 'auto',\n\n          [`.umd-footer-contact-container &`]: {\n            display: 'none',\n          },\n        },\n      },\n    })\n    .withChildren(socialContainer, campaignContainer)\n    .build();\n};\n"],"names":["iconFacebook","iconX","iconInstagram","iconYoutube","iconTwitter","iconLinkedIn","iconThreads"],"mappings":"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"}

package/dist/composite/footer/elements/utility-section/index.d.ts

@@ -2,10 +2,6 @@ import { BaseProps } from '../../_types';
 export interface UtilityProps extends Pick<BaseProps, 'isThemeLight'> {
     slotUtilityLinks?: HTMLElement | null;
 }
-declare const _default: (props: UtilityProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: UtilityProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/footer/elements/utility-section/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC;IACnE,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACvC;yBAkDe,OAAO,YAAY;;;;;AAAnC,wBAiGE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC;IACnE,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACvC;yBA2Ce,OAAO,YAAY;AAAnC,wBAqGE"}

package/dist/composite/footer/elements/utility-section/index.js

@@ -1,7 +1,7 @@
 "use strict";
 const Styles = require("@universityofmaryland/web-styles-library");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
 const animation = require("@universityofmaryland/web-utilities-library/animation");
-const index = require("../../../../model/elements/index.js");
 const globals = require("../../globals.js");
 const { LARGE } = globals.BREAKPOINTS;
 const requiredSubLinks = [
@@ -15,41 +15,23 @@ const requiredSubLinks = [
   }
 ];
 const createUtilityContainerLink = (link) => {
-  return index.create({
-    element: link,
-    className: "umd-footer-utility-container-link"
-  });
+  return new webBuilderLibrary.ElementBuilder(link).withClassName("umd-footer-utility-container-link").build();
 };
 const createSubLink = ({ title, url }) => {
-  const span = index.createSpan({
-    className: "umd-footer-utility-container-sublink-text"
-  });
-  const link = index.create({
-    element: document.createElement("a"),
-    className: "umd-footer-utility-container-sublink",
-    children: [span],
-    attributes: [
-      {
-        href: url
-      },
-      {
-        target: "_blank"
-      },
-      { rel: "noopener noreferrer" }
-    ]
-  });
-  span.element.innerText = title;
-  return index.createDiv({
-    className: "umd-footer-utility-container-link-wrapper",
-    children: [createUtilityContainerLink(link.element)]
-  });
+  const span = new webBuilderLibrary.ElementBuilder("span").withClassName("umd-footer-utility-container-sublink-text").withText(title).build();
+  const anchor = document.createElement("a");
+  anchor.setAttribute("href", url);
+  anchor.setAttribute("target", "_blank");
+  anchor.setAttribute("rel", "noopener noreferrer");
+  const link = new webBuilderLibrary.ElementBuilder(anchor).withClassName("umd-footer-utility-container-sublink").withChild(span).build();
+  return new webBuilderLibrary.ElementBuilder().withClassName("umd-footer-utility-container-link-wrapper").withChild(createUtilityContainerLink(link.element)).build();
 };
 const createUtility = (props) => {
   const { isThemeLight, slotUtilityLinks } = props;
   const linkElements = [];
-  const copyRightElement = index.createParagraph({
-    className: "umd-footer-utility-container-copyright"
-  });
+  const copyRightPara = document.createElement("p");
+  copyRightPara.innerHTML = `©${(/* @__PURE__ */ new Date()).getFullYear()} UNIVERSITY OF MARYLAND`;
+  const copyRightElement = new webBuilderLibrary.ElementBuilder(copyRightPara).withClassName("umd-footer-utility-container-copyright").build();
   if (slotUtilityLinks) {
     const slottedLinks = Array.from(
       slotUtilityLinks.querySelectorAll("a")
@@ -63,67 +45,58 @@ const createUtility = (props) => {
   requiredSubLinks.forEach((link) => {
     linkElements.push(createSubLink(link));
   });
-  copyRightElement.element.innerHTML = `©${(/* @__PURE__ */ new Date()).getFullYear()} UNIVERSITY OF MARYLAND`;
   linkElements.push(copyRight);
-  const wrapper = index.createDiv({
-    className: "umd-footer-utility-container-lock",
-    children: linkElements,
-    elementStyles: {
-      element: {
-        ...Styles.layout.space.horizontal.larger,
-        [`@container (max-width: ${LARGE - 1}px)`]: {
-          "& > *:not(:first-child)": {
-            marginTop: Styles.token.spacing.sm
-          }
-        },
-        [`@container (min-width: ${LARGE}px)`]: {
-          display: "flex",
-          alignItems: "center",
-          [`& > *:not(:first-child)`]: {
-            marginLeft: Styles.token.spacing.sm,
-            paddingLeft: Styles.token.spacing.sm,
-            backgroundPosition: `${Styles.token.spacing.sm} 100%`,
-            borderLeft: `1px solid ${Styles.token.color.gray.dark}`
-          }
-        },
-        ["& a, & p"]: {
-          color: Styles.token.color.gray.light
-        },
-        ["& a"]: {
-          ...isThemeLight && { color: Styles.token.color.gray.dark }
-        },
-        ["& p"]: {
-          display: "flex",
-          alignItems: "center",
-          ...isThemeLight && { color: Styles.token.color.black }
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("umd-footer-utility-container-lock").withStyles({
+    element: {
+      ...Styles.layout.space.horizontal.larger,
+      [`@container (max-width: ${LARGE - 1}px)`]: {
+        "& > *:not(:first-child)": {
+          marginTop: Styles.token.spacing.sm
+        }
+      },
+      [`@container (min-width: ${LARGE}px)`]: {
+        display: "flex",
+        alignItems: "center",
+        [`& > *:not(:first-child)`]: {
+          marginLeft: Styles.token.spacing.sm,
+          paddingLeft: Styles.token.spacing.sm,
+          backgroundPosition: `${Styles.token.spacing.sm} 100%`,
+          borderLeft: `1px solid ${Styles.token.color.gray.dark}`
         }
+      },
+      ["& a, & p"]: {
+        color: Styles.token.color.gray.light
+      },
+      ["& a"]: {
+        ...isThemeLight && { color: Styles.token.color.gray.dark }
+      },
+      ["& p"]: {
+        display: "flex",
+        alignItems: "center",
+        ...isThemeLight && { color: Styles.token.color.black }
       }
     }
-  });
-  return index.createDiv({
-    className: "umd-footer-utility-container",
-    children: [wrapper],
-    elementStyles: {
-      element: {
-        padding: `${Styles.token.spacing.sm} 0`,
-        backgroundColor: Styles.token.color.gray.darker,
+  }).withChildren(...linkElements).build();
+  return new webBuilderLibrary.ElementBuilder().withClassName("umd-footer-utility-container").withStyles({
+    element: {
+      padding: `${Styles.token.spacing.sm} 0`,
+      backgroundColor: Styles.token.color.gray.darker,
+      ...isThemeLight && {
+        backgroundColor: Styles.token.color.gray.light
+      },
+      ["& *"]: {
+        ...Styles.typography.sans.smaller
+      },
+      ["& a"]: {
+        display: "block",
+        ...Styles.animation.line.slideUnderWhite,
         ...isThemeLight && {
-          backgroundColor: Styles.token.color.gray.light
-        },
-        ["& *"]: {
-          ...Styles.typography.sans.smaller
-        },
-        ["& a"]: {
-          display: "block",
-          ...Styles.animation.line.slideUnderWhite,
-          ...isThemeLight && {
-            color: Styles.token.color.black,
-            ...Styles.animation.line.slideUnderBlack
-          }
+          color: Styles.token.color.black,
+          ...Styles.animation.line.slideUnderBlack
         }
       }
     }
-  });
+  }).withChild(wrapper).build();
 };
 module.exports = createUtility;
 //# sourceMappingURL=index.js.map

package/dist/composite/footer/elements/utility-section/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n  token,\n  layout,\n  animation,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { ElementModel } from 'model';\nimport { BREAKPOINTS } from '../../globals';\nimport { type BaseProps } from '../../_types';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface UtilityProps extends Pick<BaseProps, 'isThemeLight'> {\n  slotUtilityLinks?: HTMLElement | null;\n}\n\nconst { LARGE } = BREAKPOINTS;\n\nconst requiredSubLinks = [\n  {\n    title: 'Privacy Policy',\n    url: 'https://www.umd.edu/privacy-notice',\n  },\n  {\n    title: 'Web Accessibility',\n    url: 'https://www.umd.edu/web-accessibility',\n  },\n];\n\nconst createUtilityContainerLink = (link: HTMLElement) => {\n  return ElementModel.create({\n    element: link,\n    className: 'umd-footer-utility-container-link',\n  });\n};\n\nconst createSubLink = ({ title, url }: { title: string; url: string }) => {\n  const span = ElementModel.createSpan({\n    className: 'umd-footer-utility-container-sublink-text',\n  });\n\n  const link = ElementModel.create({\n    element: document.createElement('a'),\n    className: 'umd-footer-utility-container-sublink',\n    children: [span],\n    attributes: [\n      {\n        href: url,\n      },\n      {\n        target: '_blank',\n      },\n      { rel: 'noopener noreferrer' },\n    ],\n  });\n\n  span.element.innerText = title;\n\n  return ElementModel.createDiv({\n    className: 'umd-footer-utility-container-link-wrapper',\n    children: [createUtilityContainerLink(link.element)],\n  });\n};\n\nexport default (props: UtilityProps) => {\n  const { isThemeLight, slotUtilityLinks } = props;\n  const linkElements: ElementVisual[] = [];\n  const copyRightElement = ElementModel.createParagraph({\n    className: 'umd-footer-utility-container-copyright',\n  });\n  if (slotUtilityLinks) {\n    const slottedLinks = Array.from(\n      slotUtilityLinks.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n\n    slottedLinks.forEach((link) => {\n      wrapLinkForAnimation({ element: link });\n      linkElements.push(createUtilityContainerLink(link));\n    });\n  }\n  const copyRight = createUtilityContainerLink(copyRightElement.element);\n\n  requiredSubLinks.forEach((link) => {\n    linkElements.push(createSubLink(link));\n  });\n\n  copyRightElement.element.innerHTML = `©${new Date().getFullYear()} UNIVERSITY OF MARYLAND`;\n\n  linkElements.push(copyRight);\n\n  const wrapper = ElementModel.createDiv({\n    className: 'umd-footer-utility-container-lock',\n    children: linkElements,\n    elementStyles: {\n      element: {\n        ...layout.space.horizontal.larger,\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          '& > *:not(:first-child)': {\n            marginTop: token.spacing.sm,\n          },\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *:not(:first-child)`]: {\n            marginLeft: token.spacing.sm,\n            paddingLeft: token.spacing.sm,\n            backgroundPosition: `${token.spacing.sm} 100%`,\n            borderLeft: `1px solid ${token.color.gray.dark}`,\n          },\n        },\n\n        ['& a, & p']: {\n          color: token.color.gray.light,\n        },\n\n        ['& a']: {\n          ...(isThemeLight && { color: token.color.gray.dark }),\n        },\n\n        ['& p']: {\n          display: 'flex',\n          alignItems: 'center',\n\n          ...(isThemeLight && { color: token.color.black }),\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-footer-utility-container',\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        padding: `${token.spacing.sm} 0`,\n        backgroundColor: token.color.gray.darker,\n\n        ...(isThemeLight && {\n          backgroundColor: token.color.gray.light,\n        }),\n\n        ['& *']: {\n          ...typography.sans.smaller,\n        },\n\n        ['& a']: {\n          display: 'block',\n          ...animation.line.slideUnderWhite,\n\n          ...(isThemeLight && {\n            color: token.color.black,\n            ...animation.line.slideUnderBlack,\n          }),\n        },\n      },\n    },\n  });\n};\n"],"names":["BREAKPOINTS","ElementModel.create","ElementModel.createSpan","ElementModel.createDiv","ElementModel.createParagraph","wrapLinkForAnimation","layout","token","typography","animation"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n  token,\n  layout,\n  animation,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { BREAKPOINTS } from '../../globals';\nimport { type BaseProps } from '../../_types';\nimport { type UMDElement } from '../../../../_types';\n\nexport interface UtilityProps extends Pick<BaseProps, 'isThemeLight'> {\n  slotUtilityLinks?: HTMLElement | null;\n}\n\nconst { LARGE } = BREAKPOINTS;\n\nconst requiredSubLinks = [\n  {\n    title: 'Privacy Policy',\n    url: 'https://www.umd.edu/privacy-notice',\n  },\n  {\n    title: 'Web Accessibility',\n    url: 'https://www.umd.edu/web-accessibility',\n  },\n];\n\nconst createUtilityContainerLink = (link: HTMLElement) => {\n  return new ElementBuilder(link)\n    .withClassName('umd-footer-utility-container-link')\n    .build();\n};\n\nconst createSubLink = ({ title, url }: { title: string; url: string }) => {\n  const span = new ElementBuilder('span')\n    .withClassName('umd-footer-utility-container-sublink-text')\n    .withText(title)\n    .build();\n\n  const anchor = document.createElement('a');\n  anchor.setAttribute('href', url);\n  anchor.setAttribute('target', '_blank');\n  anchor.setAttribute('rel', 'noopener noreferrer');\n\n  const link = new ElementBuilder(anchor)\n    .withClassName('umd-footer-utility-container-sublink')\n    .withChild(span)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-utility-container-link-wrapper')\n    .withChild(createUtilityContainerLink(link.element))\n    .build();\n};\n\nexport default (props: UtilityProps) => {\n  const { isThemeLight, slotUtilityLinks } = props;\n  const linkElements: UMDElement[] = [];\n\n  const copyRightPara = document.createElement('p');\n  copyRightPara.innerHTML = `©${new Date().getFullYear()} UNIVERSITY OF MARYLAND`;\n\n  const copyRightElement = new ElementBuilder(copyRightPara)\n    .withClassName('umd-footer-utility-container-copyright')\n    .build();\n\n  if (slotUtilityLinks) {\n    const slottedLinks = Array.from(\n      slotUtilityLinks.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n\n    slottedLinks.forEach((link) => {\n      wrapLinkForAnimation({ element: link });\n      linkElements.push(createUtilityContainerLink(link));\n    });\n  }\n\n  const copyRight = createUtilityContainerLink(copyRightElement.element);\n\n  requiredSubLinks.forEach((link) => {\n    linkElements.push(createSubLink(link));\n  });\n\n  linkElements.push(copyRight);\n\n  const wrapper = new ElementBuilder()\n    .withClassName('umd-footer-utility-container-lock')\n    .withStyles({\n      element: {\n        ...layout.space.horizontal.larger,\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          '& > *:not(:first-child)': {\n            marginTop: token.spacing.sm,\n          },\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *:not(:first-child)`]: {\n            marginLeft: token.spacing.sm,\n            paddingLeft: token.spacing.sm,\n            backgroundPosition: `${token.spacing.sm} 100%`,\n            borderLeft: `1px solid ${token.color.gray.dark}`,\n          },\n        },\n\n        ['& a, & p']: {\n          color: token.color.gray.light,\n        },\n\n        ['& a']: {\n          ...(isThemeLight && { color: token.color.gray.dark }),\n        },\n\n        ['& p']: {\n          display: 'flex',\n          alignItems: 'center',\n\n          ...(isThemeLight && { color: token.color.black }),\n        },\n      },\n    })\n    .withChildren(...linkElements)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-utility-container')\n    .withStyles({\n      element: {\n        padding: `${token.spacing.sm} 0`,\n        backgroundColor: token.color.gray.darker,\n\n        ...(isThemeLight && {\n          backgroundColor: token.color.gray.light,\n        }),\n\n        ['& *']: {\n          ...typography.sans.smaller,\n        },\n\n        ['& a']: {\n          display: 'block',\n          ...animation.line.slideUnderWhite,\n\n          ...(isThemeLight && {\n            color: token.color.black,\n            ...animation.line.slideUnderBlack,\n          }),\n        },\n      },\n    })\n    .withChild(wrapper)\n    .build();\n};\n"],"names":["BREAKPOINTS","ElementBuilder","wrapLinkForAnimation","layout","token","typography","animation"],"mappings":"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"}