@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

package/dist/composite/footer/elements/main-section/row-logo/index.js

@@ -1,22 +1,21 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const Styles = require("@universityofmaryland/web-styles-library");
-const social = require("../social.js");
-const callToAction = require("../call-to-action.js");
-const contact = require("./contact.js");
-const logo = require("./logo.js");
-const globals = require("../../../globals.js");
-const { MEDIUM, LARGE } = globals.BREAKPOINTS;
-const createRowLogo = (props) => {
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { token, layout } from "@universityofmaryland/web-styles-library";
+import { createCompositeFooterSocial } from "../social.js";
+import { createCompositeFooterCallToAction } from "../call-to-action.js";
+import { createCompositeFooterContact } from "./contact.js";
+import { createCompositeFooterLogo } from "./logo.js";
+import { BREAKPOINTS } from "../../../globals.js";
+const { MEDIUM, LARGE } = BREAKPOINTS;
+const CreateRowLogoElement = (props) => {
   const { isThemeLight, isTypeSimple } = props;
-  const logoElement = logo(props);
-  const contactElement = contact(props);
-  const thirdColumnElement = isTypeSimple && social(props) || callToAction(props);
-  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("umd-footer-row-logo-container-wrapper").withStyles({
+  const logoElement = createCompositeFooterLogo(props);
+  const contactElement = createCompositeFooterContact(props);
+  const thirdColumnElement = isTypeSimple && createCompositeFooterSocial(props) || createCompositeFooterCallToAction(props);
+  const wrapper = new ElementBuilder().withClassName("umd-footer-row-logo-container-wrapper").withStyles({
     element: {
       [`@container (min-width: ${LARGE}px)`]: {
         display: "flex",
-        padding: `${Styles.token.spacing["5xl"]} 0 ${Styles.token.spacing["2xl"]}`
+        padding: `${token.spacing["5xl"]} 0 ${token.spacing["2xl"]}`
       },
       [`@container (max-width: ${LARGE - 1}px)`]: {
         ["& > .umd-footer-call-to-action-container"]: {
@@ -26,21 +25,21 @@ const createRowLogo = (props) => {
       [`@container (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px)`]: {
         display: "grid",
         gridTemplateColumns: "1fr 1fr",
-        gap: Styles.token.spacing.md
+        gap: token.spacing.md
       }
     }
   }).withChildren(logoElement, contactElement, thirdColumnElement).build();
-  const lock = new webBuilderLibrary.ElementBuilder().withClassName("umd-footer-row-logo-container-lock").withStyles({
+  const lock = new ElementBuilder().withClassName("umd-footer-row-logo-container-lock").withStyles({
     element: {
-      ...Styles.layout.space.horizontal.larger
+      ...layout.space.horizontal.larger
     }
   }).withChild(wrapper).build();
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-footer-row-logo-container").withStyles({
+  return new ElementBuilder().withClassName("umd-footer-row-logo-container").withStyles({
     element: {
-      backgroundColor: !isThemeLight && Styles.token.color.black || Styles.token.color.gray.lightest,
+      backgroundColor: !isThemeLight && token.color.black || token.color.gray.lightest,
       [`@container (max-width: ${LARGE - 1}px)`]: {
-        paddingTop: Styles.token.spacing["2xl"],
-        paddingBottom: Styles.token.spacing["md"],
+        paddingTop: token.spacing["2xl"],
+        paddingBottom: token.spacing["md"],
         ...isTypeSimple && {
           [`& .umd-footer-element-wrapper`]: {
             display: "none"
@@ -50,5 +49,8 @@ const createRowLogo = (props) => {
     }
   }).withChild(lock).build();
 };
-module.exports = createRowLogo;
+const createCompositeFooterRowLogo = CreateRowLogoElement;
+export {
+  createCompositeFooterRowLogo
+};
 //# sourceMappingURL=index.js.map

package/dist/composite/footer/elements/main-section/row-logo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/index.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { token, layout } from '@universityofmaryland/web-styles-library';\nimport createSocialCampaignColumns from '../social';\nimport createCallToActionContainer from '../call-to-action';\nimport createContactContainer from './contact';\nimport createLogoContainer from './logo';\nimport { BREAKPOINTS } from '../../../globals';\nimport { RowLogoProps } from '../../../_types';\nimport { type UMDElement } from '../../../../../_types';\n\nconst { MEDIUM, LARGE } = BREAKPOINTS;\n\nexport default (props: RowLogoProps): UMDElement => {\n  const { isThemeLight, isTypeSimple } = props;\n\n  const logoElement = createLogoContainer(props);\n  const contactElement = createContactContainer(props);\n\n  const thirdColumnElement =\n    (isTypeSimple && createSocialCampaignColumns(props)) ||\n    createCallToActionContainer(props);\n\n  const wrapper = new ElementBuilder()\n    .withClassName('umd-footer-row-logo-container-wrapper')\n    .withStyles({\n      element: {\n        [`@container (min-width: ${LARGE}px)`]: {\n          display: 'flex',\n          padding: `${token.spacing['5xl']} 0 ${token.spacing['2xl']}`,\n        },\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          ['& > .umd-footer-call-to-action-container']: {\n            display: 'none',\n          },\n        },\n\n        [`@container (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px)`]: {\n          display: 'grid',\n          gridTemplateColumns: '1fr 1fr',\n          gap: token.spacing.md,\n        },\n      },\n    })\n    .withChildren(logoElement, contactElement, thirdColumnElement)\n    .build();\n\n  const lock = new ElementBuilder()\n    .withClassName('umd-footer-row-logo-container-lock')\n    .withStyles({\n      element: {\n        ...layout.space.horizontal.larger,\n      },\n    })\n    .withChild(wrapper)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-row-logo-container')\n    .withStyles({\n      element: {\n        backgroundColor:\n          (!isThemeLight && token.color.black) || token.color.gray.lightest,\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          paddingTop: token.spacing['2xl'],\n          paddingBottom: token.spacing['md'],\n\n          ...(isTypeSimple && {\n            [`& .umd-footer-element-wrapper`]: {\n              display: 'none',\n            },\n          }),\n        },\n      },\n    })\n    .withChild(lock)\n    .build();\n};\n"],"names":["BREAKPOINTS","createLogoContainer","createContactContainer","createSocialCampaignColumns","createCallToActionContainer","ElementBuilder","token","layout"],"mappings":";;;;;;;;AAUA,MAAM,EAAE,QAAQ,MAAA,IAAUA,QAAAA;AAE1B,MAAA,gBAAe,CAAC,UAAoC;AAClD,QAAM,EAAE,cAAc,aAAA,IAAiB;AAEvC,QAAM,cAAcC,KAAoB,KAAK;AAC7C,QAAM,iBAAiBC,QAAuB,KAAK;AAEnD,QAAM,qBACH,gBAAgBC,OAA4B,KAAK,KAClDC,aAA4B,KAAK;AAEnC,QAAM,UAAU,IAAIC,kBAAAA,eAAA,EACjB,cAAc,uCAAuC,EACrD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,QACtC,SAAS;AAAA,QACT,SAAS,GAAGC,OAAAA,MAAM,QAAQ,KAAK,CAAC,MAAMA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA,MAAA;AAAA,MAG5D,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,QAC1C,CAAC,0CAA0C,GAAG;AAAA,UAC5C,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MAGF,CAAC,0BAA0B,MAAM,uBAAuB,KAAK,KAAK,GAAG;AAAA,QACnE,SAAS;AAAA,QACT,qBAAqB;AAAA,QACrB,KAAKA,OAAAA,MAAM,QAAQ;AAAA,MAAA;AAAA,IACrB;AAAA,EACF,CACD,EACA,aAAa,aAAa,gBAAgB,kBAAkB,EAC5D,MAAA;AAEH,QAAM,OAAO,IAAID,kBAAAA,eAAA,EACd,cAAc,oCAAoC,EAClD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAGE,OAAAA,OAAO,MAAM,WAAW;AAAA,IAAA;AAAA,EAC7B,CACD,EACA,UAAU,OAAO,EACjB,MAAA;AAEH,SAAO,IAAIF,kBAAAA,eAAA,EACR,cAAc,+BAA+B,EAC7C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,iBACG,CAAC,gBAAgBC,aAAM,MAAM,SAAUA,OAAAA,MAAM,MAAM,KAAK;AAAA,MAE3D,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,QAC1C,YAAYA,OAAAA,MAAM,QAAQ,KAAK;AAAA,QAC/B,eAAeA,OAAAA,MAAM,QAAQ,IAAI;AAAA,QAEjC,GAAI,gBAAgB;AAAA,UAClB,CAAC,+BAA+B,GAAG;AAAA,YACjC,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD,EACA,UAAU,IAAI,EACd,MAAA;AACL;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/index.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { token, layout } from '@universityofmaryland/web-styles-library';\nimport { createCompositeFooterSocial as createSocialCampaignColumns } from '../social';\nimport { createCompositeFooterCallToAction as createCallToActionContainer } from '../call-to-action';\nimport { createCompositeFooterContact as createContactContainer } from './contact';\nimport { createCompositeFooterLogo as createLogoContainer } from './logo';\nimport { BREAKPOINTS } from '../../../globals';\nimport { RowLogoProps } from '../../../_types';\nimport { type UMDElement } from '../../../../../_types';\n\nconst { MEDIUM, LARGE } = BREAKPOINTS;\n\nconst CreateRowLogoElement = (props: RowLogoProps): UMDElement => {\n  const { isThemeLight, isTypeSimple } = props;\n\n  const logoElement = createLogoContainer(props);\n  const contactElement = createContactContainer(props);\n\n  const thirdColumnElement =\n    (isTypeSimple && createSocialCampaignColumns(props)) ||\n    createCallToActionContainer(props);\n\n  const wrapper = new ElementBuilder()\n    .withClassName('umd-footer-row-logo-container-wrapper')\n    .withStyles({\n      element: {\n        [`@container (min-width: ${LARGE}px)`]: {\n          display: 'flex',\n          padding: `${token.spacing['5xl']} 0 ${token.spacing['2xl']}`,\n        },\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          ['& > .umd-footer-call-to-action-container']: {\n            display: 'none',\n          },\n        },\n\n        [`@container (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px)`]: {\n          display: 'grid',\n          gridTemplateColumns: '1fr 1fr',\n          gap: token.spacing.md,\n        },\n      },\n    })\n    .withChildren(logoElement, contactElement, thirdColumnElement)\n    .build();\n\n  const lock = new ElementBuilder()\n    .withClassName('umd-footer-row-logo-container-lock')\n    .withStyles({\n      element: {\n        ...layout.space.horizontal.larger,\n      },\n    })\n    .withChild(wrapper)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-row-logo-container')\n    .withStyles({\n      element: {\n        backgroundColor:\n          (!isThemeLight && token.color.black) || token.color.gray.lightest,\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          paddingTop: token.spacing['2xl'],\n          paddingBottom: token.spacing['md'],\n\n          ...(isTypeSimple && {\n            [`& .umd-footer-element-wrapper`]: {\n              display: 'none',\n            },\n          }),\n        },\n      },\n    })\n    .withChild(lock)\n    .build();\n};\n\nexport const createCompositeFooterRowLogo = CreateRowLogoElement;\n"],"names":["createLogoContainer","createContactContainer","createSocialCampaignColumns","createCallToActionContainer"],"mappings":";;;;;;;AAUA,MAAM,EAAE,QAAQ,MAAA,IAAU;AAE1B,MAAM,uBAAuB,CAAC,UAAoC;AAChE,QAAM,EAAE,cAAc,aAAA,IAAiB;AAEvC,QAAM,cAAcA,0BAAoB,KAAK;AAC7C,QAAM,iBAAiBC,6BAAuB,KAAK;AAEnD,QAAM,qBACH,gBAAgBC,4BAA4B,KAAK,KAClDC,kCAA4B,KAAK;AAEnC,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,uCAAuC,EACrD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,QACtC,SAAS;AAAA,QACT,SAAS,GAAG,MAAM,QAAQ,KAAK,CAAC,MAAM,MAAM,QAAQ,KAAK,CAAC;AAAA,MAAA;AAAA,MAG5D,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,QAC1C,CAAC,0CAA0C,GAAG;AAAA,UAC5C,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MAGF,CAAC,0BAA0B,MAAM,uBAAuB,KAAK,KAAK,GAAG;AAAA,QACnE,SAAS;AAAA,QACT,qBAAqB;AAAA,QACrB,KAAK,MAAM,QAAQ;AAAA,MAAA;AAAA,IACrB;AAAA,EACF,CACD,EACA,aAAa,aAAa,gBAAgB,kBAAkB,EAC5D,MAAA;AAEH,QAAM,OAAO,IAAI,eAAA,EACd,cAAc,oCAAoC,EAClD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG,OAAO,MAAM,WAAW;AAAA,IAAA;AAAA,EAC7B,CACD,EACA,UAAU,OAAO,EACjB,MAAA;AAEH,SAAO,IAAI,eAAA,EACR,cAAc,+BAA+B,EAC7C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,iBACG,CAAC,gBAAgB,MAAM,MAAM,SAAU,MAAM,MAAM,KAAK;AAAA,MAE3D,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,QAC1C,YAAY,MAAM,QAAQ,KAAK;AAAA,QAC/B,eAAe,MAAM,QAAQ,IAAI;AAAA,QAEjC,GAAI,gBAAgB;AAAA,UAClB,CAAC,+BAA+B,GAAG;AAAA,YACjC,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD,EACA,UAAU,IAAI,EACd,MAAA;AACL;AAEO,MAAM,+BAA+B;"}

package/dist/composite/footer/elements/main-section/row-logo/logo.d.ts

@@ -1,5 +1,4 @@
 import { LogoProps } from '../../../_types';
 import { UMDElement } from '../../../../../_types';
-declare const _default: (props: LogoProps) => UMDElement;
-export default _default;
+export declare const createCompositeFooterLogo: (props: LogoProps) => UMDElement;
 //# sourceMappingURL=logo.d.ts.map

package/dist/composite/footer/elements/main-section/row-logo/logo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/logo.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;yBA4ExC,OAAO,SAAS,KAAG,UAAU;AAA7C,wBAME"}
+{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/logo.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAoFxD,eAAO,MAAM,yBAAyB,UARJ,SAAS,KAAG,UAQY,CAAC"}

package/dist/composite/footer/elements/main-section/row-logo/logo.js

@@ -1,29 +1,10 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const Logos = require("@universityofmaryland/web-icons-library/logos");
-const campaign = require("../campaign.js");
-const callToAction = require("../call-to-action.js");
-const globals = require("../../../globals.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const Logos__namespace = /* @__PURE__ */ _interopNamespaceDefault(Logos);
-const { LARGE } = globals.BREAKPOINTS;
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as Logos from "@universityofmaryland/web-icons-library/logos";
+import { createCompositeFooterCampaign } from "../campaign.js";
+import { createCompositeFooterCallToAction } from "../call-to-action.js";
+import { BREAKPOINTS } from "../../../globals.js";
+const { LARGE } = BREAKPOINTS;
 const createLogoLinkElement = (props) => {
   const { slotLogo, isThemeLight } = props;
   const createDefaultLogoLink = () => {
@@ -35,11 +16,11 @@ const createLogoLinkElement = (props) => {
       "aria-label",
       "Link to the University of Maryland homepage"
     );
-    logoLink2.innerHTML = !isThemeLight ? `${Logos__namespace.umd.dark}` : `${Logos__namespace.umd.light}`;
+    logoLink2.innerHTML = !isThemeLight ? `${Logos.umd.dark}` : `${Logos.umd.light}`;
     return logoLink2;
   };
   const logoLink = slotLogo ?? createDefaultLogoLink();
-  return new webBuilderLibrary.ElementBuilder(logoLink).withClassName("umd-footer-logo-container_link").withStyles({
+  return new ElementBuilder(logoLink).withClassName("umd-footer-logo-container_link").withStyles({
     element: {
       maxWidth: "310px",
       alignSelf: "flex-start",
@@ -52,12 +33,12 @@ const createLogoLinkElement = (props) => {
   }).build();
 };
 const createContainer = (logoLinkElement, campaignElement, callToActionElement) => {
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-footer-logo-container").withChildren(logoLinkElement, campaignElement, callToActionElement).withStyles({
+  return new ElementBuilder().withClassName("umd-footer-logo-container").withChildren(logoLinkElement, campaignElement, callToActionElement).withStyles({
     element: {
       marginTop: "5px",
       [`@container (max-width: ${LARGE - 1}px)`]: {
         [`& .umd-footer-call-to-action-container`]: {
-          marginTop: token__namespace.spacing.md
+          marginTop: token.spacing.md
         }
       },
       [`@container (min-width: ${LARGE}px)`]: {
@@ -71,11 +52,14 @@ const createContainer = (logoLinkElement, campaignElement, callToActionElement)
     }
   }).build();
 };
-const createLogoContainer = (props) => {
+const CreateLogoElement = (props) => {
   const logoLinkElement = createLogoLinkElement(props);
-  const campaignElement = campaign(props);
-  const callToActionElement = callToAction(props);
+  const campaignElement = createCompositeFooterCampaign(props);
+  const callToActionElement = createCompositeFooterCallToAction(props);
   return createContainer(logoLinkElement, campaignElement, callToActionElement);
 };
-module.exports = createLogoContainer;
+const createCompositeFooterLogo = CreateLogoElement;
+export {
+  createCompositeFooterLogo
+};
 //# sourceMappingURL=logo.js.map

package/dist/composite/footer/elements/main-section/row-logo/logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo.js","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/logo.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Logos from '@universityofmaryland/web-icons-library/logos';\nimport createCampaignRow from '../campaign';\nimport createCallToAction from '../call-to-action';\nimport { BREAKPOINTS } from '../../../globals';\nimport { LogoProps } from '../../../_types';\nimport { type UMDElement } from '../../../../../_types';\n\nconst { LARGE } = BREAKPOINTS;\n\nconst createLogoLinkElement = (\n  props: Pick<LogoProps, 'isThemeLight' | 'slotLogo'>,\n): UMDElement => {\n  const { slotLogo, isThemeLight } = props;\n\n  const createDefaultLogoLink = () => {\n    const logoLink = document.createElement('a');\n    logoLink.setAttribute('href', 'https://umd.edu');\n    logoLink.setAttribute('target', '_blank');\n    logoLink.setAttribute('rel', 'noopener noreferrer');\n    logoLink.setAttribute(\n      'aria-label',\n      'Link to the University of Maryland homepage',\n    );\n\n    logoLink.innerHTML = !isThemeLight\n      ? `${Logos.umd.dark}`\n      : `${Logos.umd.light}`;\n\n    return logoLink;\n  };\n\n  const logoLink = slotLogo ?? createDefaultLogoLink();\n\n  return new ElementBuilder(logoLink)\n    .withClassName('umd-footer-logo-container_link')\n    .withStyles({\n      element: {\n        maxWidth: '310px',\n        alignSelf: 'flex-start',\n        backgroundSize: 0,\n        display: 'block !important',\n\n        [`& svg`]: {\n          width: '100%',\n        },\n      },\n    })\n    .build();\n};\n\nconst createContainer = (\n  logoLinkElement: UMDElement,\n  campaignElement: UMDElement,\n  callToActionElement: UMDElement,\n): UMDElement => {\n  return new ElementBuilder()\n    .withClassName('umd-footer-logo-container')\n    .withChildren(logoLinkElement, campaignElement, callToActionElement)\n    .withStyles({\n      element: {\n        marginTop: '5px',\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          [`& .umd-footer-call-to-action-container`]: {\n            marginTop: token.spacing.md,\n          },\n        },\n        [`@container (min-width: ${LARGE}px)`]: {\n          [`& > .campaign-column-wrapper`]: {\n            display: 'none',\n          },\n\n          ['& > .umd-footer-call-to-action-container']: {\n            display: 'none',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: LogoProps): UMDElement => {\n  const logoLinkElement = createLogoLinkElement(props);\n  const campaignElement = createCampaignRow(props);\n  const callToActionElement = createCallToAction(props);\n\n  return createContainer(logoLinkElement, campaignElement, callToActionElement);\n};\n"],"names":["BREAKPOINTS","logoLink","Logos","ElementBuilder","token","createCampaignRow","createCallToAction"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,EAAE,UAAUA,QAAAA;AAElB,MAAM,wBAAwB,CAC5B,UACe;AACf,QAAM,EAAE,UAAU,aAAA,IAAiB;AAEnC,QAAM,wBAAwB,MAAM;AAClC,UAAMC,YAAW,SAAS,cAAc,GAAG;AAC3CA,cAAS,aAAa,QAAQ,iBAAiB;AAC/CA,cAAS,aAAa,UAAU,QAAQ;AACxCA,cAAS,aAAa,OAAO,qBAAqB;AAClDA,cAAS;AAAA,MACP;AAAA,MACA;AAAA,IAAA;AAGFA,cAAS,YAAY,CAAC,eAClB,GAAGC,iBAAM,IAAI,IAAI,KACjB,GAAGA,iBAAM,IAAI,KAAK;AAEtB,WAAOD;AAAAA,EACT;AAEA,QAAM,WAAW,YAAY,sBAAA;AAE7B,SAAO,IAAIE,kBAAAA,eAAe,QAAQ,EAC/B,cAAc,gCAAgC,EAC9C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,SAAS;AAAA,MAET,CAAC,OAAO,GAAG;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,kBAAkB,CACtB,iBACA,iBACA,wBACe;AACf,SAAO,IAAIA,kBAAAA,eAAA,EACR,cAAc,2BAA2B,EACzC,aAAa,iBAAiB,iBAAiB,mBAAmB,EAClE,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW;AAAA,MAEX,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,QAC1C,CAAC,wCAAwC,GAAG;AAAA,UAC1C,WAAWC,iBAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,MAEF,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,QACtC,CAAC,8BAA8B,GAAG;AAAA,UAChC,SAAS;AAAA,QAAA;AAAA,QAGX,CAAC,0CAA0C,GAAG;AAAA,UAC5C,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAA,sBAAe,CAAC,UAAiC;AAC/C,QAAM,kBAAkB,sBAAsB,KAAK;AACnD,QAAM,kBAAkBC,SAAkB,KAAK;AAC/C,QAAM,sBAAsBC,aAAmB,KAAK;AAEpD,SAAO,gBAAgB,iBAAiB,iBAAiB,mBAAmB;AAC9E;;"}
+{"version":3,"file":"logo.js","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/logo.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Logos from '@universityofmaryland/web-icons-library/logos';\nimport { createCompositeFooterCampaign as createCampaignRow } from '../campaign';\nimport { createCompositeFooterCallToAction as createCallToAction } from '../call-to-action';\nimport { BREAKPOINTS } from '../../../globals';\nimport { LogoProps } from '../../../_types';\nimport { type UMDElement } from '../../../../../_types';\n\nconst { LARGE } = BREAKPOINTS;\n\nconst createLogoLinkElement = (\n  props: Pick<LogoProps, 'isThemeLight' | 'slotLogo'>,\n): UMDElement => {\n  const { slotLogo, isThemeLight } = props;\n\n  const createDefaultLogoLink = () => {\n    const logoLink = document.createElement('a');\n    logoLink.setAttribute('href', 'https://umd.edu');\n    logoLink.setAttribute('target', '_blank');\n    logoLink.setAttribute('rel', 'noopener noreferrer');\n    logoLink.setAttribute(\n      'aria-label',\n      'Link to the University of Maryland homepage',\n    );\n\n    logoLink.innerHTML = !isThemeLight\n      ? `${Logos.umd.dark}`\n      : `${Logos.umd.light}`;\n\n    return logoLink;\n  };\n\n  const logoLink = slotLogo ?? createDefaultLogoLink();\n\n  return new ElementBuilder(logoLink)\n    .withClassName('umd-footer-logo-container_link')\n    .withStyles({\n      element: {\n        maxWidth: '310px',\n        alignSelf: 'flex-start',\n        backgroundSize: 0,\n        display: 'block !important',\n\n        [`& svg`]: {\n          width: '100%',\n        },\n      },\n    })\n    .build();\n};\n\nconst createContainer = (\n  logoLinkElement: UMDElement,\n  campaignElement: UMDElement,\n  callToActionElement: UMDElement,\n): UMDElement => {\n  return new ElementBuilder()\n    .withClassName('umd-footer-logo-container')\n    .withChildren(logoLinkElement, campaignElement, callToActionElement)\n    .withStyles({\n      element: {\n        marginTop: '5px',\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          [`& .umd-footer-call-to-action-container`]: {\n            marginTop: token.spacing.md,\n          },\n        },\n        [`@container (min-width: ${LARGE}px)`]: {\n          [`& > .campaign-column-wrapper`]: {\n            display: 'none',\n          },\n\n          ['& > .umd-footer-call-to-action-container']: {\n            display: 'none',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst CreateLogoElement = (props: LogoProps): UMDElement => {\n  const logoLinkElement = createLogoLinkElement(props);\n  const campaignElement = createCampaignRow(props);\n  const callToActionElement = createCallToAction(props);\n\n  return createContainer(logoLinkElement, campaignElement, callToActionElement);\n};\n\nexport const createCompositeFooterLogo = CreateLogoElement;\n"],"names":["logoLink","createCampaignRow","createCallToAction"],"mappings":";;;;;;AASA,MAAM,EAAE,UAAU;AAElB,MAAM,wBAAwB,CAC5B,UACe;AACf,QAAM,EAAE,UAAU,aAAA,IAAiB;AAEnC,QAAM,wBAAwB,MAAM;AAClC,UAAMA,YAAW,SAAS,cAAc,GAAG;AAC3CA,cAAS,aAAa,QAAQ,iBAAiB;AAC/CA,cAAS,aAAa,UAAU,QAAQ;AACxCA,cAAS,aAAa,OAAO,qBAAqB;AAClDA,cAAS;AAAA,MACP;AAAA,MACA;AAAA,IAAA;AAGFA,cAAS,YAAY,CAAC,eAClB,GAAG,MAAM,IAAI,IAAI,KACjB,GAAG,MAAM,IAAI,KAAK;AAEtB,WAAOA;AAAAA,EACT;AAEA,QAAM,WAAW,YAAY,sBAAA;AAE7B,SAAO,IAAI,eAAe,QAAQ,EAC/B,cAAc,gCAAgC,EAC9C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,SAAS;AAAA,MAET,CAAC,OAAO,GAAG;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,kBAAkB,CACtB,iBACA,iBACA,wBACe;AACf,SAAO,IAAI,eAAA,EACR,cAAc,2BAA2B,EACzC,aAAa,iBAAiB,iBAAiB,mBAAmB,EAClE,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW;AAAA,MAEX,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,QAC1C,CAAC,wCAAwC,GAAG;AAAA,UAC1C,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,MAEF,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,QACtC,CAAC,8BAA8B,GAAG;AAAA,UAChC,SAAS;AAAA,QAAA;AAAA,QAGX,CAAC,0CAA0C,GAAG;AAAA,UAC5C,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,oBAAoB,CAAC,UAAiC;AAC1D,QAAM,kBAAkB,sBAAsB,KAAK;AACnD,QAAM,kBAAkBC,8BAAkB,KAAK;AAC/C,QAAM,sBAAsBC,kCAAmB,KAAK;AAEpD,SAAO,gBAAgB,iBAAiB,iBAAiB,mBAAmB;AAC9E;AAEO,MAAM,4BAA4B;"}

package/dist/composite/footer/elements/main-section/social.d.ts

@@ -1,5 +1,4 @@
 import { SocialCampaignColumnsProps } from '../../_types';
 import { UMDElement } from '../../../../_types';
-declare const _default: (props: SocialCampaignColumnsProps) => UMDElement;
-export default _default;
+export declare const createCompositeFooterSocial: (props: SocialCampaignColumnsProps) => UMDElement;
 //# sourceMappingURL=social.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"social.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"names":[],"mappings":"AAaA,OAAO,EAAe,0BAA0B,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;yBA0KrC,OAAO,0BAA0B,KAAG,UAAU;AAA9D,wBAgCE"}
+{"version":3,"file":"social.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"names":[],"mappings":"AAaA,OAAO,EAAe,0BAA0B,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AA4MrD,eAAO,MAAM,2BAA2B,UAlCJ,0BAA0B,KAAG,UAkCH,CAAC"}

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

@@ -1,22 +1,21 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const Styles = require("@universityofmaryland/web-styles-library");
-const social = require("@universityofmaryland/web-icons-library/social");
-const campaign = require("./campaign.js");
-const globals = require("../../globals.js");
+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 { createCompositeFooterCampaign } from "./campaign.js";
+import { BREAKPOINTS } from "../../globals.js";
 const ATTRIBUTE_LAYOUT = "layout";
 const LAYOUT_GRID = "grid";
-const { LARGE } = globals.BREAKPOINTS;
+const { LARGE } = BREAKPOINTS;
 const GetSocialIcon = ({ link }) => {
   const url = link.getAttribute("href") || null;
   if (!url) return link;
-  if (url.match(/facebook.com/)) link.innerHTML = social.facebook;
-  if (url.match(/x.com/)) link.innerHTML = social.x;
-  if (url.match(/instagram.com/)) link.innerHTML = social.instagram;
-  if (url.match(/youtube.com/)) link.innerHTML = social.youtube;
-  if (url.match(/twitter.com/)) link.innerHTML = social.twitter;
-  if (url.match(/linkedin.com/)) link.innerHTML = social.linkedin;
-  if (url.match(/threads.net/)) link.innerHTML = social.threads;
+  if (url.match(/facebook.com/)) link.innerHTML = facebook;
+  if (url.match(/x.com/)) link.innerHTML = x;
+  if (url.match(/instagram.com/)) link.innerHTML = instagram;
+  if (url.match(/youtube.com/)) link.innerHTML = youtube;
+  if (url.match(/twitter.com/)) link.innerHTML = twitter;
+  if (url.match(/linkedin.com/)) link.innerHTML = linkedin;
+  if (url.match(/threads.net/)) link.innerHTML = threads;
   return link;
 };
 const CreateSocialRow = (props) => {
@@ -56,17 +55,17 @@ const CreateSocialRow = (props) => {
       })
     );
   }
-  const headline = new webBuilderLibrary.ElementBuilder("p").withClassName("umd-footer-social-container_headline").withStyles({
+  const headline = new ElementBuilder("p").withClassName("umd-footer-social-container_headline").withStyles({
     element: {
       paddingTop: "3px",
       fontWeight: 700,
-      ...Styles.typography.elements.interativeMedium
+      ...typography.elements.interativeMedium
     }
   }).withText("Stay Connected").build();
   const socialLinkChildren = socialLinks.map(
-    (link) => new webBuilderLibrary.ElementBuilder(GetSocialIcon({ link })).withClassName("umd-footer-social-link").withStyles({
+    (link) => new ElementBuilder(GetSocialIcon({ link })).withClassName("umd-footer-social-link").withStyles({
       element: {
-        backgroundColor: Styles.token.color.gray.darker,
+        backgroundColor: token.color.gray.darker,
         height: "32px",
         width: "32px",
         display: "flex",
@@ -74,41 +73,41 @@ const CreateSocialRow = (props) => {
         justifyContent: "center",
         transition: "background-color .5s",
         ["& > *, & path"]: {
-          fill: `${Styles.token.color.white} !important`,
+          fill: `${token.color.white} !important`,
           transition: "fill .5s",
           maxHeight: "20px !important"
         },
         ["&:hover"]: {
-          backgroundColor: Styles.token.color.gray.light,
+          backgroundColor: token.color.gray.light,
           ["& path"]: {
-            fill: `${Styles.token.color.gray.dark} !important`
+            fill: `${token.color.gray.dark} !important`
           }
         },
         ...isThemeLight && {
-          backgroundColor: Styles.token.color.gray.light,
+          backgroundColor: token.color.gray.light,
           ["&:hover"]: {
-            backgroundColor: Styles.token.color.gray.dark,
+            backgroundColor: token.color.gray.dark,
             ["& path"]: {
-              fill: `${Styles.token.color.gray.light} !important`
+              fill: `${token.color.gray.light} !important`
             }
           },
           ["& > *, & path"]: {
-            fill: `${Styles.token.color.black} !important`
+            fill: `${token.color.black} !important`
           }
         }
       }
     }).build()
   );
   const gridColumns = Math.min(socialLinks.length, 3);
-  const linksWrapper = new webBuilderLibrary.ElementBuilder().withClassName("umd-footer-social-container_wrapper").withStyles({
+  const linksWrapper = new ElementBuilder().withClassName("umd-footer-social-container_wrapper").withStyles({
     element: {
       display: "grid",
       gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
-      gridGap: Styles.token.spacing.xs,
-      marginLeft: Styles.token.spacing.xs
+      gridGap: token.spacing.xs,
+      marginLeft: token.spacing.xs
     }
   }).withChildren(...socialLinkChildren).withAttribute("count", `${socialLinks.length}`).build();
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-footer-social-container").withStyles({
+  return new ElementBuilder().withClassName("umd-footer-social-container").withStyles({
     element: {
       marginLeft: "auto",
       display: "flex",
@@ -121,7 +120,7 @@ const CreateSocialRow = (props) => {
       },
       [`@container (min-width: 1000px)`]: {
         justifyContent: "flex-end",
-        paddingLeft: Styles.token.spacing["2xl"]
+        paddingLeft: token.spacing["2xl"]
       }
     }
   }).withChildren(headline, linksWrapper).withModifier((el) => {
@@ -130,14 +129,14 @@ const CreateSocialRow = (props) => {
     }
   }).build();
 };
-const createSocialCampaignColumns = (props) => {
+const CreateSocialElement = (props) => {
   const socialContainer = CreateSocialRow(props);
-  const campaignContainer = campaign(props);
+  const campaignContainer = createCompositeFooterCampaign(props);
   const { isTypeSimple } = props;
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-footer-social-column_wrapper").withStyles({
+  return new ElementBuilder().withClassName("umd-footer-social-column_wrapper").withStyles({
     element: {
       [`@container  (max-width: ${LARGE - 1}px)`]: {
-        marginTop: Styles.token.spacing.md,
+        marginTop: token.spacing.md,
         [`& > .campaign-column-wrapper`]: {
           display: "none"
         },
@@ -154,5 +153,8 @@ const createSocialCampaignColumns = (props) => {
     }
   }).withChildren(socialContainer, campaignContainer).build();
 };
-module.exports = createSocialCampaignColumns;
+const createCompositeFooterSocial = CreateSocialElement;
+export {
+  createCompositeFooterSocial
+};
 //# sourceMappingURL=social.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"social.js","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 { SocialProps, SocialCampaignColumnsProps } from '../../_types';\nimport { type UMDElement } from '../../../../_types';\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 = (\n  props: Pick<SocialProps, 'isThemeLight' | 'slotSocialLinks'>,\n): 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":["BREAKPOINTS","iconFacebook","iconX","iconInstagram","iconYoutube","iconTwitter","iconLinkedIn","iconThreads","ElementBuilder","typography","token","createCampaignRow"],"mappings":"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"}
+{"version":3,"file":"social.js","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 { createCompositeFooterCampaign as createCampaignRow } from './campaign';\nimport { BREAKPOINTS } from '../../globals';\nimport { SocialProps, SocialCampaignColumnsProps } from '../../_types';\nimport { type UMDElement } from '../../../../_types';\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 = (\n  props: Pick<SocialProps, 'isThemeLight' | 'slotSocialLinks'>,\n): 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\nconst CreateSocialElement = (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\nexport const createCompositeFooterSocial = CreateSocialElement;\n"],"names":["iconFacebook","iconX","iconInstagram","iconYoutube","iconTwitter","iconLinkedIn","iconThreads","createCampaignRow"],"mappings":"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"}

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

@@ -1,4 +1,3 @@
 import { UtilityProps } from '../../_types';
-declare const _default: (props: Pick<UtilityProps, "isThemeLight" | "slotUtilityLinks">) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export default _default;
+export declare const createCompositeFooterUtilitySection: (props: Pick<UtilityProps, "isThemeLight" | "slotUtilityLinks">) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 //# 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,YAAY,EAAE,MAAM,cAAc,CAAC;yBA6C1C,OAAO,IAAI,CAAC,YAAY,EAAE,cAAc,GAAG,kBAAkB,CAAC;AADhE,wBAuGE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAqJ5C,eAAO,MAAM,mCAAmC,UAxGvC,IAAI,CAAC,YAAY,EAAE,cAAc,GAAG,kBAAkB,CAAC,kFAwGc,CAAC"}

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

@@ -1,9 +1,8 @@
-"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 globals = require("../../globals.js");
-const { LARGE } = globals.BREAKPOINTS;
+import { token, layout, animation, typography } from "@universityofmaryland/web-styles-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { wrapLinkForAnimation } from "@universityofmaryland/web-utilities-library/animation";
+import { BREAKPOINTS } from "../../globals.js";
+const { LARGE } = BREAKPOINTS;
 const requiredSubLinks = [
   {
     title: "Privacy Policy",
@@ -15,29 +14,29 @@ const requiredSubLinks = [
   }
 ];
 const createUtilityContainerLink = (link) => {
-  return new webBuilderLibrary.ElementBuilder(link).withClassName("umd-footer-utility-container-link").build();
+  return new ElementBuilder(link).withClassName("umd-footer-utility-container-link").build();
 };
 const createSubLink = ({ title, url }) => {
-  const span = new webBuilderLibrary.ElementBuilder("span").withClassName("umd-footer-utility-container-sublink-text").withText(title).build();
+  const span = new 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 link = new ElementBuilder(anchor).withClassName("umd-footer-utility-container-sublink").withChild(span).build();
+  return new ElementBuilder().withClassName("umd-footer-utility-container-link-wrapper").withChild(createUtilityContainerLink(link.element)).build();
 };
-const createUtility = (props) => {
+const CreateUtilitySectionElement = (props) => {
   const { isThemeLight, slotUtilityLinks } = props;
   const linkElements = [];
   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();
+  const copyRightElement = new ElementBuilder(copyRightPara).withClassName("umd-footer-utility-container-copyright").build();
   if (slotUtilityLinks) {
     const slottedLinks = Array.from(
       slotUtilityLinks.querySelectorAll("a")
     );
     slottedLinks.forEach((link) => {
-      animation.wrapLinkForAnimation({ element: link });
+      wrapLinkForAnimation({ element: link });
       linkElements.push(createUtilityContainerLink(link));
     });
   }
@@ -46,57 +45,60 @@ const createUtility = (props) => {
     linkElements.push(createSubLink(link));
   });
   linkElements.push(copyRight);
-  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("umd-footer-utility-container-lock").withStyles({
+  const wrapper = new ElementBuilder().withClassName("umd-footer-utility-container-lock").withStyles({
     element: {
-      ...Styles.layout.space.horizontal.larger,
+      ...layout.space.horizontal.larger,
       [`@container (max-width: ${LARGE - 1}px)`]: {
         "& > *:not(:first-child)": {
-          marginTop: Styles.token.spacing.sm
+          marginTop: 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}`
+          marginLeft: token.spacing.sm,
+          paddingLeft: token.spacing.sm,
+          backgroundPosition: `${token.spacing.sm} 100%`,
+          borderLeft: `1px solid ${token.color.gray.dark}`
         }
       },
       ["& a, & p"]: {
-        color: Styles.token.color.gray.light
+        color: token.color.gray.light
       },
       ["& a"]: {
-        ...isThemeLight && { color: Styles.token.color.gray.dark }
+        ...isThemeLight && { color: token.color.gray.dark }
       },
       ["& p"]: {
         display: "flex",
         alignItems: "center",
-        ...isThemeLight && { color: Styles.token.color.black }
+        ...isThemeLight && { color: token.color.black }
       }
     }
   }).withChildren(...linkElements).build();
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-footer-utility-container").withStyles({
+  return new ElementBuilder().withClassName("umd-footer-utility-container").withStyles({
     element: {
-      padding: `${Styles.token.spacing.sm} 0`,
-      backgroundColor: Styles.token.color.gray.darker,
+      padding: `${token.spacing.sm} 0`,
+      backgroundColor: token.color.gray.darker,
       ...isThemeLight && {
-        backgroundColor: Styles.token.color.gray.light
+        backgroundColor: token.color.gray.light
       },
       ["& *"]: {
-        ...Styles.typography.sans.smaller
+        ...typography.sans.smaller
       },
       ["& a"]: {
         display: "block",
-        ...Styles.animation.line.slideUnderWhite,
+        ...animation.line.slideUnderWhite,
         ...isThemeLight && {
-          color: Styles.token.color.black,
-          ...Styles.animation.line.slideUnderBlack
+          color: token.color.black,
+          ...animation.line.slideUnderBlack
         }
       }
     }
   }).withChild(wrapper).build();
 };
-module.exports = createUtility;
+const createCompositeFooterUtilitySection = CreateUtilitySectionElement;
+export {
+  createCompositeFooterUtilitySection
+};
 //# sourceMappingURL=index.js.map