@universityofmaryland/web-elements-library 1.4.7 → 1.5.0-beta.0

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 { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport {\n  createSocialCampaignColumns,\n  SocialContainerStyles,\n  SOCIAL_COLUMN_WRAPPER,\n  type SocialCampaignColumnsProps,\n} from '../social';\nimport {\n  createCallToAction as createCallToActionContainer,\n  CallToActionStyles,\n  CALL_TO_ACTION_CONTAINER,\n  type CallToActionProps,\n} from '../call-to-action';\nimport {\n  createContact as createContactContainer,\n  ContactContainerStyles,\n  type ContactProps,\n} from './contact';\nimport { createLogo as createLogoContainer, LogoContainerStyles } from './logo';\nimport { BREAKPOINTS, VARIABLES, ELEMENTS, REFERENCES } from '../../../globals';\n\nconst { MEDIUM, LARGE } = BREAKPOINTS;\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { ELEMENT_NAME } = VARIABLES;\nconst { IS_THEME_LIGHT, IS_VERSION_SIMPLE } = REFERENCES;\n\nconst ROW_LOGO_CONTAINER = 'umd-footer-row-logo-container';\nconst ROW_LOGO_CONTAINER_WRAPPER = 'umd-footer-row-logo-container-wrapper';\nconst ROW_LOGO_CONTAINER_LOCK = 'umd-footer-row-logo-container-lock';\n\nconst ctaOverwriteStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LOGO_CONTAINER_WRAPPER} > .${CALL_TO_ACTION_CONTAINER} {\n      display: none;\n    }\n  }\n`;\n\n// prettier-ignore\nconst themeOverwriteStyles = `\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LOGO_CONTAINER} {\n    background-color: ${token.color.gray.lightest} !important;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ELEMENT_WRAPPER}${IS_VERSION_SIMPLE} .${ROW_LOGO_CONTAINER} .${SOCIAL_COLUMN_WRAPPER} {\n      display: none;\n    }\n  }\n`;\n\n// prettier-ignore\nexport const RowLogoStyles = `\n  .${ROW_LOGO_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LOGO_CONTAINER} {\n      padding-top: ${token.spacing['2xl']};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {\n    .${ROW_LOGO_CONTAINER_WRAPPER} {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LOGO_CONTAINER} {\n      padding-bottom: ${token.spacing['md']} ;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LOGO_CONTAINER_WRAPPER} {\n      display: flex;\n      padding: ${token.spacing['5xl']} 0 ${token.spacing['2xl']};\n    }\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ROW_LOGO_CONTAINER_LOCK}`]: layout.space.horizontal.larger \n    },\n  })}\n\n  ${LogoContainerStyles}\n  ${ContactContainerStyles}\n  ${SocialContainerStyles}\n  ${CallToActionStyles}\n  ${ctaOverwriteStyles}\n  ${themeOverwriteStyles}\n`;\n\nexport interface RowLogoProps\n  extends SocialCampaignColumnsProps,\n    CallToActionProps,\n    ContactProps {}\n\nexport const createRowLogo = (props: RowLogoProps) => {\n  const { isTypeSimple } = props;\n  const container = document.createElement('div');\n  const lock = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  container.classList.add(ROW_LOGO_CONTAINER);\n  wrapper.classList.add(ROW_LOGO_CONTAINER_WRAPPER);\n  lock.classList.add(ROW_LOGO_CONTAINER_LOCK);\n\n  const makeThirdColumn = () => {\n    if (isTypeSimple) {\n      const socialColumnWrapper = createSocialCampaignColumns(props);\n      wrapper.appendChild(socialColumnWrapper);\n    } else {\n      const ctaWrapper = createCallToActionContainer(props);\n      wrapper.appendChild(ctaWrapper);\n    }\n  };\n\n  const logoElement = createLogoContainer(props);\n  const contactElement = createContactContainer(props);\n  wrapper.appendChild(logoElement);\n  wrapper.appendChild(contactElement);\n\n  makeThirdColumn();\n  lock.appendChild(wrapper);\n  container.appendChild(lock);\n  return container;\n};\n"],"names":["BREAKPOINTS","ELEMENTS","VARIABLES","REFERENCES","CALL_TO_ACTION_CONTAINER","token","SOCIAL_COLUMN_WRAPPER","Utils.theme.convertJSSObjectToStyles","layout","LogoContainerStyles","ContactContainerStyles","SocialContainerStyles","CallToActionStyles","createSocialCampaignColumns","createCallToActionContainer","createLogoContainer","createContactContainer"],"mappings":";;;;;;;;;AAsBA,MAAM,EAAE,QAAQ,MAAA,IAAUA,QAAAA;AAC1B,MAAM,EAAE,oBAAoBC,QAAAA;AAC5B,MAAM,EAAE,iBAAiBC,QAAAA;AACzB,MAAM,EAAE,gBAAgB,kBAAA,IAAsBC,QAAAA;AAE9C,MAAM,qBAAqB;AAC3B,MAAM,6BAA6B;AACnC,MAAM,0BAA0B;AAEhC,MAAM,qBAAqB;AAAA,eACZ,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,0BAA0B,OAAOC,qCAAwB;AAAA;AAAA;AAAA;AAAA;AAOhE,MAAM,uBAAuB;AAAA,KACxB,eAAe,GAAG,cAAc,KAAK,kBAAkB;AAAA,wBACpCC,aAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA,eAGlC,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,eAAe,GAAG,iBAAiB,KAAK,kBAAkB,KAAKC,4BAAqB;AAAA;AAAA;AAAA;AAAA;AAOpF,MAAM,gBAAgB;AAAA,KACxB,kBAAkB;AAAA,wBACCD,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,eAG1B,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,kBAAkB;AAAA,qBACJA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,eAI1B,YAAY,gBAAgB,MAAM,uBAAuB,KAAK;AAAA,OACtE,0BAA0B;AAAA;AAAA;AAAA,aAGpBA,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAId,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,kBAAkB;AAAA,wBACDA,OAAAA,MAAM,QAAQ,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,eAI5B,YAAY,gBAAgB,KAAK;AAAA,OACzC,0BAA0B;AAAA;AAAA,iBAEhBA,OAAAA,MAAM,QAAQ,KAAK,CAAC,MAAMA,aAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,IAI3DE,+BAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,uBAAuB,EAAE,GAAGC,OAAAA,OAAO,MAAM,WAAW;AAAA,EAAA;AAE7D,CAAC,CAAC;AAAA;AAAA,IAEAC,KAAAA,mBAAmB;AAAA,IACnBC,QAAAA,sBAAsB;AAAA,IACtBC,OAAAA,qBAAqB;AAAA,IACrBC,aAAAA,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,oBAAoB;AAAA;AAQjB,MAAM,gBAAgB,CAAC,UAAwB;AACpD,QAAM,EAAE,iBAAiB;AACzB,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,OAAO,SAAS,cAAc,KAAK;AACzC,QAAM,UAAU,SAAS,cAAc,KAAK;AAE5C,YAAU,UAAU,IAAI,kBAAkB;AAC1C,UAAQ,UAAU,IAAI,0BAA0B;AAChD,OAAK,UAAU,IAAI,uBAAuB;AAE1C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc;AAChB,YAAM,sBAAsBC,OAAAA,4BAA4B,KAAK;AAC7D,cAAQ,YAAY,mBAAmB;AAAA,IACzC,OAAO;AACL,YAAM,aAAaC,aAAAA,mBAA4B,KAAK;AACpD,cAAQ,YAAY,UAAU;AAAA,IAChC;AAAA,EACF;AAEA,QAAM,cAAcC,KAAAA,WAAoB,KAAK;AAC7C,QAAM,iBAAiBC,QAAAA,cAAuB,KAAK;AACnD,UAAQ,YAAY,WAAW;AAC/B,UAAQ,YAAY,cAAc;AAElC,kBAAA;AACA,OAAK,YAAY,OAAO;AACxB,YAAU,YAAY,IAAI;AAC1B,SAAO;AACT;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/index.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport createSocialCampaignColumns, {\n  type SocialCampaignColumnsProps,\n} from '../social';\nimport createCallToActionContainer, {\n  type CallToActionProps,\n} from '../call-to-action';\nimport createContactContainer, { type ContactProps } from './contact';\nimport createLogoContainer, { LogoProps } from './logo';\nimport { BREAKPOINTS } from '../../../globals';\nimport { BaseProps } from '../../../_types';\nimport { type ElementVisual } from '../../../../../_types';\n\nconst { MEDIUM, LARGE } = BREAKPOINTS;\n\nexport interface RowLogoProps\n  extends SocialCampaignColumnsProps,\n    BaseProps,\n    LogoProps,\n    CallToActionProps,\n    ContactProps {}\n\nexport default (props: RowLogoProps): ElementVisual => {\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 = ElementModel.createDiv({\n    className: 'umd-footer-row-logo-container-wrapper',\n    children: [logoElement, contactElement, thirdColumnElement],\n    elementStyles: {\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  });\n\n  const lock = ElementModel.createDiv({\n    className: 'umd-footer-row-logo-container-lock',\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        ...layout.space.horizontal.larger,\n      },\n    },\n  });\n\n  const rowLogoContainer = ElementModel.createDiv({\n    className: 'umd-footer-row-logo-container',\n    children: [lock],\n    elementStyles: {\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  });\n\n  return rowLogoContainer;\n};\n"],"names":["BREAKPOINTS","createLogoContainer","createContactContainer","createSocialCampaignColumns","createCallToActionContainer","ElementModel.createDiv","token","layout"],"mappings":";;;;;;;;AAcA,MAAM,EAAE,QAAQ,MAAA,IAAUA,QAAAA;AAS1B,MAAA,gBAAe,CAAC,UAAuC;AACrD,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,UAAUC,MAAAA,UAAuB;AAAA,IACrC,WAAW;AAAA,IACX,UAAU,CAAC,aAAa,gBAAgB,kBAAkB;AAAA,IAC1D,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,SAAS;AAAA,UACT,SAAS,GAAGC,OAAAA,MAAM,QAAQ,KAAK,CAAC,MAAMA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA,QAAA;AAAA,QAG5D,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC1C,CAAC,0CAA0C,GAAG;AAAA,YAC5C,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAGF,CAAC,0BAA0B,MAAM,uBAAuB,KAAK,KAAK,GAAG;AAAA,UACnE,SAAS;AAAA,UACT,qBAAqB;AAAA,UACrB,KAAKA,OAAAA,MAAM,QAAQ;AAAA,QAAA;AAAA,MACrB;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,OAAOD,MAAAA,UAAuB;AAAA,IAClC,WAAW;AAAA,IACX,UAAU,CAAC,OAAO;AAAA,IAClB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAGE,OAAAA,OAAO,MAAM,WAAW;AAAA,MAAA;AAAA,IAC7B;AAAA,EACF,CACD;AAED,QAAM,mBAAmBF,MAAAA,UAAuB;AAAA,IAC9C,WAAW;AAAA,IACX,UAAU,CAAC,IAAI;AAAA,IACf,eAAe;AAAA,MACb,SAAS;AAAA,QACP,iBACG,CAAC,gBAAgBC,aAAM,MAAM,SAAUA,OAAAA,MAAM,MAAM,KAAK;AAAA,QAE3D,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC1C,YAAYA,OAAAA,MAAM,QAAQ,KAAK;AAAA,UAC/B,eAAeA,OAAAA,MAAM,QAAQ,IAAI;AAAA,UAEjC,GAAI,gBAAgB;AAAA,YAClB,CAAC,+BAA+B,GAAG;AAAA,cACjC,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAO;AACT;;"}

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

@@ -1,108 +1,68 @@
 import { token, layout } from "@universityofmaryland/web-styles-library";
-import { convertJSSObjectToStyles } from "../../../../../utilities/theme/index.mjs";
-import { SOCIAL_COLUMN_WRAPPER, SocialContainerStyles, createSocialCampaignColumns } from "../social.mjs";
-import { CallToActionStyles, CALL_TO_ACTION_CONTAINER, createCallToAction } from "../call-to-action.mjs";
-import { ContactContainerStyles, createContact } from "./contact.mjs";
-import { LogoContainerStyles, createLogo } from "./logo.mjs";
-import { ELEMENTS, REFERENCES, VARIABLES, BREAKPOINTS } from "../../../globals.mjs";
+import { createDiv } from "../../../../../model/elements/index.mjs";
+import createSocialCampaignColumns from "../social.mjs";
+import createCallToActionContainer from "../call-to-action.mjs";
+import createContactContainer from "./contact.mjs";
+import createLogoContainer from "./logo.mjs";
+import { BREAKPOINTS } from "../../../globals.mjs";
 const { MEDIUM, LARGE } = BREAKPOINTS;
-const { ELEMENT_WRAPPER } = ELEMENTS;
-const { ELEMENT_NAME } = VARIABLES;
-const { IS_THEME_LIGHT, IS_VERSION_SIMPLE } = REFERENCES;
-const ROW_LOGO_CONTAINER = "umd-footer-row-logo-container";
-const ROW_LOGO_CONTAINER_WRAPPER = "umd-footer-row-logo-container-wrapper";
-const ROW_LOGO_CONTAINER_LOCK = "umd-footer-row-logo-container-lock";
-const ctaOverwriteStyles = `
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${ROW_LOGO_CONTAINER_WRAPPER} > .${CALL_TO_ACTION_CONTAINER} {
-      display: none;
-    }
-  }
-`;
-const themeOverwriteStyles = `
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LOGO_CONTAINER} {
-    background-color: ${token.color.gray.lightest} !important;
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${ELEMENT_WRAPPER}${IS_VERSION_SIMPLE} .${ROW_LOGO_CONTAINER} .${SOCIAL_COLUMN_WRAPPER} {
-      display: none;
-    }
-  }
-`;
-const RowLogoStyles = `
-  .${ROW_LOGO_CONTAINER} {
-    background-color: ${token.color.black};
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${ROW_LOGO_CONTAINER} {
-      padding-top: ${token.spacing["2xl"]};
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {
-    .${ROW_LOGO_CONTAINER_WRAPPER} {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: ${token.spacing.md};
-    }
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${ROW_LOGO_CONTAINER} {
-      padding-bottom: ${token.spacing["md"]} ;
+const createRowLogo = (props) => {
+  const { isThemeLight, isTypeSimple } = props;
+  const logoElement = createLogoContainer(props);
+  const contactElement = createContactContainer(props);
+  const thirdColumnElement = isTypeSimple && createSocialCampaignColumns(props) || createCallToActionContainer(props);
+  const wrapper = createDiv({
+    className: "umd-footer-row-logo-container-wrapper",
+    children: [logoElement, contactElement, thirdColumnElement],
+    elementStyles: {
+      element: {
+        [`@container (min-width: ${LARGE}px)`]: {
+          display: "flex",
+          padding: `${token.spacing["5xl"]} 0 ${token.spacing["2xl"]}`
+        },
+        [`@container (max-width: ${LARGE - 1}px)`]: {
+          ["& > .umd-footer-call-to-action-container"]: {
+            display: "none"
+          }
+        },
+        [`@container (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px)`]: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: token.spacing.md
+        }
+      }
     }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${ROW_LOGO_CONTAINER_WRAPPER} {
-      display: flex;
-      padding: ${token.spacing["5xl"]} 0 ${token.spacing["2xl"]};
+  });
+  const lock = createDiv({
+    className: "umd-footer-row-logo-container-lock",
+    children: [wrapper],
+    elementStyles: {
+      element: {
+        ...layout.space.horizontal.larger
+      }
     }
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${ROW_LOGO_CONTAINER_LOCK}`]: layout.space.horizontal.larger
-  }
-})}
-
-  ${LogoContainerStyles}
-  ${ContactContainerStyles}
-  ${SocialContainerStyles}
-  ${CallToActionStyles}
-  ${ctaOverwriteStyles}
-  ${themeOverwriteStyles}
-`;
-const createRowLogo = (props) => {
-  const { isTypeSimple } = props;
-  const container = document.createElement("div");
-  const lock = document.createElement("div");
-  const wrapper = document.createElement("div");
-  container.classList.add(ROW_LOGO_CONTAINER);
-  wrapper.classList.add(ROW_LOGO_CONTAINER_WRAPPER);
-  lock.classList.add(ROW_LOGO_CONTAINER_LOCK);
-  const makeThirdColumn = () => {
-    if (isTypeSimple) {
-      const socialColumnWrapper = createSocialCampaignColumns(props);
-      wrapper.appendChild(socialColumnWrapper);
-    } else {
-      const ctaWrapper = createCallToAction(props);
-      wrapper.appendChild(ctaWrapper);
+  });
+  const rowLogoContainer = createDiv({
+    className: "umd-footer-row-logo-container",
+    children: [lock],
+    elementStyles: {
+      element: {
+        backgroundColor: !isThemeLight && token.color.black || token.color.gray.lightest,
+        [`@container (max-width: ${LARGE - 1}px)`]: {
+          paddingTop: token.spacing["2xl"],
+          paddingBottom: token.spacing["md"],
+          ...isTypeSimple && {
+            [`& .umd-footer-element-wrapper`]: {
+              display: "none"
+            }
+          }
+        }
+      }
     }
-  };
-  const logoElement = createLogo(props);
-  const contactElement = createContact(props);
-  wrapper.appendChild(logoElement);
-  wrapper.appendChild(contactElement);
-  makeThirdColumn();
-  lock.appendChild(wrapper);
-  container.appendChild(lock);
-  return container;
+  });
+  return rowLogoContainer;
 };
 export {
-  RowLogoStyles,
-  createRowLogo
+  createRowLogo as default
 };
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/index.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport {\n  createSocialCampaignColumns,\n  SocialContainerStyles,\n  SOCIAL_COLUMN_WRAPPER,\n  type SocialCampaignColumnsProps,\n} from '../social';\nimport {\n  createCallToAction as createCallToActionContainer,\n  CallToActionStyles,\n  CALL_TO_ACTION_CONTAINER,\n  type CallToActionProps,\n} from '../call-to-action';\nimport {\n  createContact as createContactContainer,\n  ContactContainerStyles,\n  type ContactProps,\n} from './contact';\nimport { createLogo as createLogoContainer, LogoContainerStyles } from './logo';\nimport { BREAKPOINTS, VARIABLES, ELEMENTS, REFERENCES } from '../../../globals';\n\nconst { MEDIUM, LARGE } = BREAKPOINTS;\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { ELEMENT_NAME } = VARIABLES;\nconst { IS_THEME_LIGHT, IS_VERSION_SIMPLE } = REFERENCES;\n\nconst ROW_LOGO_CONTAINER = 'umd-footer-row-logo-container';\nconst ROW_LOGO_CONTAINER_WRAPPER = 'umd-footer-row-logo-container-wrapper';\nconst ROW_LOGO_CONTAINER_LOCK = 'umd-footer-row-logo-container-lock';\n\nconst ctaOverwriteStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LOGO_CONTAINER_WRAPPER} > .${CALL_TO_ACTION_CONTAINER} {\n      display: none;\n    }\n  }\n`;\n\n// prettier-ignore\nconst themeOverwriteStyles = `\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LOGO_CONTAINER} {\n    background-color: ${token.color.gray.lightest} !important;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ELEMENT_WRAPPER}${IS_VERSION_SIMPLE} .${ROW_LOGO_CONTAINER} .${SOCIAL_COLUMN_WRAPPER} {\n      display: none;\n    }\n  }\n`;\n\n// prettier-ignore\nexport const RowLogoStyles = `\n  .${ROW_LOGO_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LOGO_CONTAINER} {\n      padding-top: ${token.spacing['2xl']};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {\n    .${ROW_LOGO_CONTAINER_WRAPPER} {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LOGO_CONTAINER} {\n      padding-bottom: ${token.spacing['md']} ;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LOGO_CONTAINER_WRAPPER} {\n      display: flex;\n      padding: ${token.spacing['5xl']} 0 ${token.spacing['2xl']};\n    }\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ROW_LOGO_CONTAINER_LOCK}`]: layout.space.horizontal.larger \n    },\n  })}\n\n  ${LogoContainerStyles}\n  ${ContactContainerStyles}\n  ${SocialContainerStyles}\n  ${CallToActionStyles}\n  ${ctaOverwriteStyles}\n  ${themeOverwriteStyles}\n`;\n\nexport interface RowLogoProps\n  extends SocialCampaignColumnsProps,\n    CallToActionProps,\n    ContactProps {}\n\nexport const createRowLogo = (props: RowLogoProps) => {\n  const { isTypeSimple } = props;\n  const container = document.createElement('div');\n  const lock = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  container.classList.add(ROW_LOGO_CONTAINER);\n  wrapper.classList.add(ROW_LOGO_CONTAINER_WRAPPER);\n  lock.classList.add(ROW_LOGO_CONTAINER_LOCK);\n\n  const makeThirdColumn = () => {\n    if (isTypeSimple) {\n      const socialColumnWrapper = createSocialCampaignColumns(props);\n      wrapper.appendChild(socialColumnWrapper);\n    } else {\n      const ctaWrapper = createCallToActionContainer(props);\n      wrapper.appendChild(ctaWrapper);\n    }\n  };\n\n  const logoElement = createLogoContainer(props);\n  const contactElement = createContactContainer(props);\n  wrapper.appendChild(logoElement);\n  wrapper.appendChild(contactElement);\n\n  makeThirdColumn();\n  lock.appendChild(wrapper);\n  container.appendChild(lock);\n  return container;\n};\n"],"names":["Utils.theme.convertJSSObjectToStyles","createCallToActionContainer","createLogoContainer","createContactContainer"],"mappings":";;;;;;;AAsBA,MAAM,EAAE,QAAQ,MAAA,IAAU;AAC1B,MAAM,EAAE,oBAAoB;AAC5B,MAAM,EAAE,iBAAiB;AACzB,MAAM,EAAE,gBAAgB,kBAAA,IAAsB;AAE9C,MAAM,qBAAqB;AAC3B,MAAM,6BAA6B;AACnC,MAAM,0BAA0B;AAEhC,MAAM,qBAAqB;AAAA,eACZ,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,0BAA0B,OAAO,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAOhE,MAAM,uBAAuB;AAAA,KACxB,eAAe,GAAG,cAAc,KAAK,kBAAkB;AAAA,wBACpC,MAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA,eAGlC,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,eAAe,GAAG,iBAAiB,KAAK,kBAAkB,KAAK,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAOpF,MAAM,gBAAgB;AAAA,KACxB,kBAAkB;AAAA,wBACC,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,eAG1B,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,kBAAkB;AAAA,qBACJ,MAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,eAI1B,YAAY,gBAAgB,MAAM,uBAAuB,KAAK;AAAA,OACtE,0BAA0B;AAAA;AAAA;AAAA,aAGpB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAId,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,kBAAkB;AAAA,wBACD,MAAM,QAAQ,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,eAI5B,YAAY,gBAAgB,KAAK;AAAA,OACzC,0BAA0B;AAAA;AAAA,iBAEhB,MAAM,QAAQ,KAAK,CAAC,MAAM,MAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,IAI3DA,yBAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,uBAAuB,EAAE,GAAG,OAAO,MAAM,WAAW;AAAA,EAAA;AAE7D,CAAC,CAAC;AAAA;AAAA,IAEA,mBAAmB;AAAA,IACnB,sBAAsB;AAAA,IACtB,qBAAqB;AAAA,IACrB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,oBAAoB;AAAA;AAQjB,MAAM,gBAAgB,CAAC,UAAwB;AACpD,QAAM,EAAE,iBAAiB;AACzB,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,OAAO,SAAS,cAAc,KAAK;AACzC,QAAM,UAAU,SAAS,cAAc,KAAK;AAE5C,YAAU,UAAU,IAAI,kBAAkB;AAC1C,UAAQ,UAAU,IAAI,0BAA0B;AAChD,OAAK,UAAU,IAAI,uBAAuB;AAE1C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc;AAChB,YAAM,sBAAsB,4BAA4B,KAAK;AAC7D,cAAQ,YAAY,mBAAmB;AAAA,IACzC,OAAO;AACL,YAAM,aAAaC,mBAA4B,KAAK;AACpD,cAAQ,YAAY,UAAU;AAAA,IAChC;AAAA,EACF;AAEA,QAAM,cAAcC,WAAoB,KAAK;AAC7C,QAAM,iBAAiBC,cAAuB,KAAK;AACnD,UAAQ,YAAY,WAAW;AAC/B,UAAQ,YAAY,cAAc;AAElC,kBAAA;AACA,OAAK,YAAY,OAAO;AACxB,YAAU,YAAY,IAAI;AAC1B,SAAO;AACT;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/index.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport createSocialCampaignColumns, {\n  type SocialCampaignColumnsProps,\n} from '../social';\nimport createCallToActionContainer, {\n  type CallToActionProps,\n} from '../call-to-action';\nimport createContactContainer, { type ContactProps } from './contact';\nimport createLogoContainer, { LogoProps } from './logo';\nimport { BREAKPOINTS } from '../../../globals';\nimport { BaseProps } from '../../../_types';\nimport { type ElementVisual } from '../../../../../_types';\n\nconst { MEDIUM, LARGE } = BREAKPOINTS;\n\nexport interface RowLogoProps\n  extends SocialCampaignColumnsProps,\n    BaseProps,\n    LogoProps,\n    CallToActionProps,\n    ContactProps {}\n\nexport default (props: RowLogoProps): ElementVisual => {\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 = ElementModel.createDiv({\n    className: 'umd-footer-row-logo-container-wrapper',\n    children: [logoElement, contactElement, thirdColumnElement],\n    elementStyles: {\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  });\n\n  const lock = ElementModel.createDiv({\n    className: 'umd-footer-row-logo-container-lock',\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        ...layout.space.horizontal.larger,\n      },\n    },\n  });\n\n  const rowLogoContainer = ElementModel.createDiv({\n    className: 'umd-footer-row-logo-container',\n    children: [lock],\n    elementStyles: {\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  });\n\n  return rowLogoContainer;\n};\n"],"names":["ElementModel.createDiv"],"mappings":";;;;;;;AAcA,MAAM,EAAE,QAAQ,MAAA,IAAU;AAS1B,MAAA,gBAAe,CAAC,UAAuC;AACrD,QAAM,EAAE,cAAc,aAAA,IAAiB;AAEvC,QAAM,cAAc,oBAAoB,KAAK;AAC7C,QAAM,iBAAiB,uBAAuB,KAAK;AAEnD,QAAM,qBACH,gBAAgB,4BAA4B,KAAK,KAClD,4BAA4B,KAAK;AAEnC,QAAM,UAAUA,UAAuB;AAAA,IACrC,WAAW;AAAA,IACX,UAAU,CAAC,aAAa,gBAAgB,kBAAkB;AAAA,IAC1D,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,SAAS;AAAA,UACT,SAAS,GAAG,MAAM,QAAQ,KAAK,CAAC,MAAM,MAAM,QAAQ,KAAK,CAAC;AAAA,QAAA;AAAA,QAG5D,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC1C,CAAC,0CAA0C,GAAG;AAAA,YAC5C,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAGF,CAAC,0BAA0B,MAAM,uBAAuB,KAAK,KAAK,GAAG;AAAA,UACnE,SAAS;AAAA,UACT,qBAAqB;AAAA,UACrB,KAAK,MAAM,QAAQ;AAAA,QAAA;AAAA,MACrB;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,OAAOA,UAAuB;AAAA,IAClC,WAAW;AAAA,IACX,UAAU,CAAC,OAAO;AAAA,IAClB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG,OAAO,MAAM,WAAW;AAAA,MAAA;AAAA,IAC7B;AAAA,EACF,CACD;AAED,QAAM,mBAAmBA,UAAuB;AAAA,IAC9C,WAAW;AAAA,IACX,UAAU,CAAC,IAAI;AAAA,IACf,eAAe;AAAA,MACb,SAAS;AAAA,QACP,iBACG,CAAC,gBAAgB,MAAM,MAAM,SAAU,MAAM,MAAM,KAAK;AAAA,QAE3D,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC1C,YAAY,MAAM,QAAQ,KAAK;AAAA,UAC/B,eAAe,MAAM,QAAQ,IAAI;AAAA,UAEjC,GAAI,gBAAgB;AAAA,YAClB,CAAC,+BAA+B,GAAG;AAAA,cACjC,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAO;AACT;"}

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

@@ -1,8 +1,10 @@
 import { CampaignProps } from '../campaign';
 import { CallToActionProps } from '../call-to-action';
 import { BaseProps } from '../../../_types';
-export declare const LogoContainerStyles: string;
+import { ElementVisual } from '../../../../../_types';
 export interface LogoProps extends BaseProps, CampaignProps, CallToActionProps {
+    slotLogo: HTMLImageElement | HTMLAnchorElement | null;
 }
-export declare const createLogo: (props: LogoProps) => HTMLDivElement;
+declare const _default: (props: LogoProps) => ElementVisual;
+export default _default;
 //# 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":"AAEA,OAAO,EAGL,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AACrB,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAuC5C,eAAO,MAAM,mBAAmB,QAc/B,CAAC;AAEF,MAAM,WAAW,SACf,SAAQ,SAAS,EACf,aAAa,EACb,iBAAiB;CAAG;AAExB,eAAO,MAAM,UAAU,GAAI,OAAO,SAAS,mBA0B1C,CAAC"}
+{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/logo.ts"],"names":[],"mappings":"AAGA,OAA0B,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AACpE,OAA2B,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE/E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAI3D,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,aAAa,EAAE,iBAAiB;IAC5E,QAAQ,EAAE,gBAAgB,GAAG,iBAAiB,GAAG,IAAI,CAAC;CACvD;yBAsEe,OAAO,SAAS,KAAG,aAAa;AAAhD,wBAQE"}

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

@@ -1,81 +1,88 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Styles = require("@universityofmaryland/web-styles-library");
-const logos = require("../../../../../utilities/assets/logos.js");
-require("../../../../../node_modules/postcss/lib/postcss.js");
-require("../../../../../node_modules/postcss-nesting/dist/index.js");
-require("../../../../../node_modules/postcss-js/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const Logos = require("@universityofmaryland/web-icons-library/logos");
+const index = require("../../../../../model/elements/index.js");
 const campaign = require("../campaign.js");
 const callToAction = require("../call-to-action.js");
 const globals = require("../../../globals.js");
-const { LARGE } = globals.BREAKPOINTS;
-const { ELEMENT_NAME } = globals.VARIABLES;
-const { ELEMENT_WRAPPER } = globals.ELEMENTS;
-const { IS_VERSION_SIMPLE } = globals.REFERENCES;
-const LOGO_CONTAINER = "umd-footer-logo-container";
-const LOGO_CONTAINER_LINK = "umd-footer-logo-container_link";
-const ctaOverwriteStyles = `
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${LOGO_CONTAINER} .${callToAction.CALL_TO_ACTION_CONTAINER} {
-      margin-top: ${Styles.token.spacing.md};
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${LOGO_CONTAINER} .${callToAction.CALL_TO_ACTION_CONTAINER} {
-      display: none;
+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]
+        });
+      }
     }
   }
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${ELEMENT_WRAPPER}${IS_VERSION_SIMPLE} .${LOGO_CONTAINER} .${callToAction.CALL_TO_ACTION_CONTAINER} {
-      display: none;
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const Logos__namespace = /* @__PURE__ */ _interopNamespaceDefault(Logos);
+const { LARGE } = globals.BREAKPOINTS;
+const createLogoLinkElement = (isThemeLight, logo) => {
+  const createDefaultLogoLink = () => {
+    const logoLink2 = document.createElement("a");
+    logoLink2.setAttribute("href", "https://umd.edu");
+    logoLink2.setAttribute("target", "_blank");
+    logoLink2.setAttribute("rel", "noopener noreferrer");
+    logoLink2.setAttribute(
+      "aria-label",
+      "Link to the University of Maryland homepage"
+    );
+    logoLink2.innerHTML = !isThemeLight ? `${Logos__namespace.umd.dark}` : `${Logos__namespace.umd.light}`;
+    return logoLink2;
+  };
+  const logoLink = logo ?? createDefaultLogoLink();
+  return index.create({
+    element: logoLink,
+    className: "umd-footer-logo-container_link",
+    elementStyles: {
+      element: {
+        maxWidth: "310px",
+        alignSelf: "flex-start",
+        backgroundSize: 0,
+        display: "block !important",
+        [`& svg`]: {
+          width: "100%"
+        }
+      }
     }
-  }
-`;
-const campaignOverwriteStyles = `
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${LOGO_CONTAINER} .${campaign.CAMPAIGN_COLUMN_WRAPPER} {
-      display: none;
+  });
+};
+const createContainer = (logoLinkElement, campaignElement, callToActionElement) => {
+  return index.createDiv({
+    className: "umd-footer-logo-container",
+    children: [logoLinkElement, campaignElement, callToActionElement],
+    elementStyles: {
+      element: {
+        [`@container (max-width: ${LARGE - 1}px)`]: {
+          [`& .umd-footer-call-to-action-container`]: {
+            marginTop: token__namespace.spacing.md
+          }
+        },
+        [`@container (min-width: ${LARGE}px)`]: {
+          [`& > .campaign-column-wrapper`]: {
+            display: "none"
+          },
+          ["& > .umd-footer-call-to-action-container"]: {
+            display: "none"
+          }
+        }
+      }
     }
-  }
-`;
-const LogoContainerStyles = `
-  .${LOGO_CONTAINER_LINK} {
-    max-width: 310px;
-    align-self: flex-start;
-    background-size: 0;
-    display: block !important;
-  }
-
-  .${LOGO_CONTAINER_LINK} svg {
-    width: 100%;
-  }
-
-  ${campaignOverwriteStyles}
-  ${ctaOverwriteStyles}
-`;
-const createLogo = (props) => {
-  const { isThemeLight } = props;
-  const container = document.createElement("div");
-  const logoLink = document.createElement("a");
-  const campaignContainer = campaign.createCampaign(props);
-  const ctaWrapper = callToAction.createCallToAction(props);
-  logoLink.classList.add(LOGO_CONTAINER_LINK);
-  logoLink.setAttribute("href", "https://umd.edu");
-  logoLink.setAttribute("target", "_blank");
-  logoLink.setAttribute("rel", "noopener noreferrer");
-  logoLink.setAttribute(
-    "aria-label",
-    "Link to the Unvieristy of Maryland homepage"
-  );
-  logoLink.innerHTML = !isThemeLight ? `${logos.DARK_LOGO}` : `${logos.LIGHT_LOGO}`;
-  container.classList.add(LOGO_CONTAINER);
-  container.appendChild(logoLink);
-  container.appendChild(campaignContainer);
-  container.appendChild(ctaWrapper);
-  return container;
+  });
+};
+const createLogoContainer = (props) => {
+  const { isThemeLight, slotLogo } = props;
+  const logoLinkElement = createLogoLinkElement(isThemeLight, slotLogo);
+  const campaignElement = campaign(props);
+  const callToActionElement = callToAction(props);
+  return createContainer(logoLinkElement, campaignElement, callToActionElement);
 };
-exports.LogoContainerStyles = LogoContainerStyles;
-exports.createLogo = createLogo;
+module.exports = createLogoContainer;
 //# 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 { token } from '@universityofmaryland/web-styles-library';\nimport * as utilities from 'utilities';\nimport {\n  createCampaign as createCampaignRow,\n  CAMPAIGN_COLUMN_WRAPPER,\n  type CampaignProps,\n} from '../campaign';\nimport {\n  createCallToAction as createCallToActionContainer,\n  CALL_TO_ACTION_CONTAINER,\n  type CallToActionProps,\n} from '../call-to-action';\nimport { BREAKPOINTS, ELEMENTS, VARIABLES, REFERENCES } from '../../../globals';\nimport { BaseProps } from '../../../_types';\n\nconst { LARGE } = BREAKPOINTS;\nconst { ELEMENT_NAME } = VARIABLES;\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { IS_VERSION_SIMPLE } = REFERENCES;\n\nconst LOGO_CONTAINER = 'umd-footer-logo-container';\nconst LOGO_CONTAINER_LINK = 'umd-footer-logo-container_link';\n\n// prettier-ignore\nconst ctaOverwriteStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${LOGO_CONTAINER} .${CALL_TO_ACTION_CONTAINER} {\n      margin-top: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${LOGO_CONTAINER} .${CALL_TO_ACTION_CONTAINER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ELEMENT_WRAPPER}${IS_VERSION_SIMPLE} .${LOGO_CONTAINER} .${CALL_TO_ACTION_CONTAINER} {\n      display: none;\n    }\n  }\n`;\n\nconst campaignOverwriteStyles = `\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${LOGO_CONTAINER} .${CAMPAIGN_COLUMN_WRAPPER} {\n      display: none;\n    }\n  }\n`;\n\nexport const LogoContainerStyles = `\n  .${LOGO_CONTAINER_LINK} {\n    max-width: 310px;\n    align-self: flex-start;\n    background-size: 0;\n    display: block !important;\n  }\n\n  .${LOGO_CONTAINER_LINK} svg {\n    width: 100%;\n  }\n\n  ${campaignOverwriteStyles}\n  ${ctaOverwriteStyles}\n`;\n\nexport interface LogoProps\n  extends BaseProps,\n    CampaignProps,\n    CallToActionProps {}\n\nexport const createLogo = (props: LogoProps) => {\n  const { isThemeLight } = props;\n  const container = document.createElement('div');\n  const logoLink = document.createElement('a');\n  const campaignContainer = createCampaignRow(props);\n  const ctaWrapper = createCallToActionContainer(props);\n\n  logoLink.classList.add(LOGO_CONTAINER_LINK);\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 Unvieristy of Maryland homepage',\n  );\n\n  logoLink.innerHTML = !isThemeLight\n    ? `${utilities.asset.logo.DARK_LOGO}`\n    : `${utilities.asset.logo.LIGHT_LOGO}`;\n\n  container.classList.add(LOGO_CONTAINER);\n  container.appendChild(logoLink);\n  container.appendChild(campaignContainer);\n  container.appendChild(ctaWrapper);\n\n  return container;\n};\n"],"names":["BREAKPOINTS","VARIABLES","ELEMENTS","REFERENCES","CALL_TO_ACTION_CONTAINER","token","CAMPAIGN_COLUMN_WRAPPER","createCampaignRow","createCallToActionContainer","utilities.asset.logo.DARK_LOGO","utilities.asset.logo.LIGHT_LOGO"],"mappings":";;;;;;;;;;AAeA,MAAM,EAAE,UAAUA,QAAAA;AAClB,MAAM,EAAE,iBAAiBC,QAAAA;AACzB,MAAM,EAAE,oBAAoBC,QAAAA;AAC5B,MAAM,EAAE,sBAAsBC,QAAAA;AAE9B,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAG5B,MAAM,qBAAqB;AAAA,eACZ,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,cAAc,KAAKC,qCAAwB;AAAA,oBAC9BC,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAIrB,YAAY,gBAAgB,KAAK;AAAA,OACzC,cAAc,KAAKD,qCAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,eAKnC,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,eAAe,GAAG,iBAAiB,KAAK,cAAc,KAAKA,qCAAwB;AAAA;AAAA;AAAA;AAAA;AAM1F,MAAM,0BAA0B;AAAA,eACjB,YAAY,gBAAgB,KAAK;AAAA,OACzC,cAAc,KAAKE,gCAAuB;AAAA;AAAA;AAAA;AAAA;AAM1C,MAAM,sBAAsB;AAAA,KAC9B,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOnB,mBAAmB;AAAA;AAAA;AAAA;AAAA,IAIpB,uBAAuB;AAAA,IACvB,kBAAkB;AAAA;AAQf,MAAM,aAAa,CAAC,UAAqB;AAC9C,QAAM,EAAE,iBAAiB;AACzB,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,WAAW,SAAS,cAAc,GAAG;AAC3C,QAAM,oBAAoBC,SAAAA,eAAkB,KAAK;AACjD,QAAM,aAAaC,aAAAA,mBAA4B,KAAK;AAEpD,WAAS,UAAU,IAAI,mBAAmB;AAC1C,WAAS,aAAa,QAAQ,iBAAiB;AAC/C,WAAS,aAAa,UAAU,QAAQ;AACxC,WAAS,aAAa,OAAO,qBAAqB;AAClD,WAAS;AAAA,IACP;AAAA,IACA;AAAA,EAAA;AAGF,WAAS,YAAY,CAAC,eAClB,GAAGC,MAAAA,SAA8B,KACjC,GAAGC,MAAAA,UAA+B;AAEtC,YAAU,UAAU,IAAI,cAAc;AACtC,YAAU,YAAY,QAAQ;AAC9B,YAAU,YAAY,iBAAiB;AACvC,YAAU,YAAY,UAAU;AAEhC,SAAO;AACT;;;"}
+{"version":3,"file":"logo.js","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/logo.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as Logos from '@universityofmaryland/web-icons-library/logos';\nimport { ElementModel } from 'model';\nimport createCampaignRow, { type CampaignProps } from '../campaign';\nimport createCallToAction, { type CallToActionProps } from '../call-to-action';\nimport { BREAKPOINTS } from '../../../globals';\nimport { BaseProps } from '../../../_types';\nimport { type ElementVisual } from '../../../../../_types';\n\nconst { LARGE } = BREAKPOINTS;\n\nexport interface LogoProps extends BaseProps, CampaignProps, CallToActionProps {\n  slotLogo: HTMLImageElement | HTMLAnchorElement | null;\n}\n\nconst createLogoLinkElement = (\n  isThemeLight?: boolean,\n  logo?: HTMLImageElement | HTMLAnchorElement | null,\n): ElementVisual => {\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 ? `${Logos.umd.dark}` : `${Logos.umd.light}`;\n\n    return logoLink;\n  };\n\n  const logoLink = logo ?? createDefaultLogoLink();\n\n  return ElementModel.create({\n    element: logoLink,\n    className: 'umd-footer-logo-container_link',\n    elementStyles: {\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  });\n};\n\nconst createContainer = (\n  logoLinkElement: ElementVisual,\n  campaignElement: ElementVisual,\n  callToActionElement: ElementVisual,\n): ElementVisual => {\n  return ElementModel.createDiv({\n    className: 'umd-footer-logo-container',\n    children: [logoLinkElement, campaignElement, callToActionElement],\n    elementStyles: {\n      element: {\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  });\n};\n\nexport default (props: LogoProps): ElementVisual => {\n  const { isThemeLight, slotLogo } = props;\n\n  const logoLinkElement = createLogoLinkElement(isThemeLight, slotLogo);\n  const campaignElement = createCampaignRow(props);\n  const callToActionElement = createCallToAction(props);\n\n  return createContainer(logoLinkElement, campaignElement, callToActionElement);\n};\n"],"names":["BREAKPOINTS","logoLink","Logos","ElementModel.create","ElementModel.createDiv","token","createCampaignRow","createCallToAction"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,EAAE,UAAUA,QAAAA;AAMlB,MAAM,wBAAwB,CAC5B,cACA,SACkB;AAClB,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,eAAe,GAAGC,iBAAM,IAAI,IAAI,KAAK,GAAGA,iBAAM,IAAI,KAAK;AAE7E,WAAOD;AAAAA,EACT;AAEA,QAAM,WAAW,QAAQ,sBAAA;AAEzB,SAAOE,aAAoB;AAAA,IACzB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,SAAS;AAAA,QAET,CAAC,OAAO,GAAG;AAAA,UACT,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,kBAAkB,CACtB,iBACA,iBACA,wBACkB;AAClB,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,iBAAiB,iBAAiB,mBAAmB;AAAA,IAChE,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC1C,CAAC,wCAAwC,GAAG;AAAA,YAC1C,WAAWC,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,CAAC,8BAA8B,GAAG;AAAA,YAChC,SAAS;AAAA,UAAA;AAAA,UAGX,CAAC,0CAA0C,GAAG;AAAA,YAC5C,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAA,sBAAe,CAAC,UAAoC;AAClD,QAAM,EAAE,cAAc,SAAA,IAAa;AAEnC,QAAM,kBAAkB,sBAAsB,cAAc,QAAQ;AACpE,QAAM,kBAAkBC,SAAkB,KAAK;AAC/C,QAAM,sBAAsBC,aAAmB,KAAK;AAEpD,SAAO,gBAAgB,iBAAiB,iBAAiB,mBAAmB;AAC9E;;"}

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

@@ -1,81 +1,71 @@
-import { token } from "@universityofmaryland/web-styles-library";
-import { DARK_LOGO, LIGHT_LOGO } from "../../../../../utilities/assets/logos.mjs";
-import "../../../../../node_modules/postcss/lib/postcss.mjs";
-import "../../../../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../../../../node_modules/postcss-js/index.mjs";
-import { CAMPAIGN_COLUMN_WRAPPER, createCampaign } from "../campaign.mjs";
-import { CALL_TO_ACTION_CONTAINER, createCallToAction } from "../call-to-action.mjs";
-import { VARIABLES, BREAKPOINTS, ELEMENTS, REFERENCES } from "../../../globals.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as Logos from "@universityofmaryland/web-icons-library/logos";
+import { create, createDiv } from "../../../../../model/elements/index.mjs";
+import createCampaignRow from "../campaign.mjs";
+import createCallToActionContainer from "../call-to-action.mjs";
+import { BREAKPOINTS } from "../../../globals.mjs";
 const { LARGE } = BREAKPOINTS;
-const { ELEMENT_NAME } = VARIABLES;
-const { ELEMENT_WRAPPER } = ELEMENTS;
-const { IS_VERSION_SIMPLE } = REFERENCES;
-const LOGO_CONTAINER = "umd-footer-logo-container";
-const LOGO_CONTAINER_LINK = "umd-footer-logo-container_link";
-const ctaOverwriteStyles = `
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${LOGO_CONTAINER} .${CALL_TO_ACTION_CONTAINER} {
-      margin-top: ${token.spacing.md};
+const createLogoLinkElement = (isThemeLight, logo) => {
+  const createDefaultLogoLink = () => {
+    const logoLink2 = document.createElement("a");
+    logoLink2.setAttribute("href", "https://umd.edu");
+    logoLink2.setAttribute("target", "_blank");
+    logoLink2.setAttribute("rel", "noopener noreferrer");
+    logoLink2.setAttribute(
+      "aria-label",
+      "Link to the University of Maryland homepage"
+    );
+    logoLink2.innerHTML = !isThemeLight ? `${Logos.umd.dark}` : `${Logos.umd.light}`;
+    return logoLink2;
+  };
+  const logoLink = logo ?? createDefaultLogoLink();
+  return create({
+    element: logoLink,
+    className: "umd-footer-logo-container_link",
+    elementStyles: {
+      element: {
+        maxWidth: "310px",
+        alignSelf: "flex-start",
+        backgroundSize: 0,
+        display: "block !important",
+        [`& svg`]: {
+          width: "100%"
+        }
+      }
     }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${LOGO_CONTAINER} .${CALL_TO_ACTION_CONTAINER} {
-      display: none;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${ELEMENT_WRAPPER}${IS_VERSION_SIMPLE} .${LOGO_CONTAINER} .${CALL_TO_ACTION_CONTAINER} {
-      display: none;
-    }
-  }
-`;
-const campaignOverwriteStyles = `
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${LOGO_CONTAINER} .${CAMPAIGN_COLUMN_WRAPPER} {
-      display: none;
+  });
+};
+const createContainer = (logoLinkElement, campaignElement, callToActionElement) => {
+  return createDiv({
+    className: "umd-footer-logo-container",
+    children: [logoLinkElement, campaignElement, callToActionElement],
+    elementStyles: {
+      element: {
+        [`@container (max-width: ${LARGE - 1}px)`]: {
+          [`& .umd-footer-call-to-action-container`]: {
+            marginTop: token.spacing.md
+          }
+        },
+        [`@container (min-width: ${LARGE}px)`]: {
+          [`& > .campaign-column-wrapper`]: {
+            display: "none"
+          },
+          ["& > .umd-footer-call-to-action-container"]: {
+            display: "none"
+          }
+        }
+      }
     }
-  }
-`;
-const LogoContainerStyles = `
-  .${LOGO_CONTAINER_LINK} {
-    max-width: 310px;
-    align-self: flex-start;
-    background-size: 0;
-    display: block !important;
-  }
-
-  .${LOGO_CONTAINER_LINK} svg {
-    width: 100%;
-  }
-
-  ${campaignOverwriteStyles}
-  ${ctaOverwriteStyles}
-`;
-const createLogo = (props) => {
-  const { isThemeLight } = props;
-  const container = document.createElement("div");
-  const logoLink = document.createElement("a");
-  const campaignContainer = createCampaign(props);
-  const ctaWrapper = createCallToAction(props);
-  logoLink.classList.add(LOGO_CONTAINER_LINK);
-  logoLink.setAttribute("href", "https://umd.edu");
-  logoLink.setAttribute("target", "_blank");
-  logoLink.setAttribute("rel", "noopener noreferrer");
-  logoLink.setAttribute(
-    "aria-label",
-    "Link to the Unvieristy of Maryland homepage"
-  );
-  logoLink.innerHTML = !isThemeLight ? `${DARK_LOGO}` : `${LIGHT_LOGO}`;
-  container.classList.add(LOGO_CONTAINER);
-  container.appendChild(logoLink);
-  container.appendChild(campaignContainer);
-  container.appendChild(ctaWrapper);
-  return container;
+  });
+};
+const createLogoContainer = (props) => {
+  const { isThemeLight, slotLogo } = props;
+  const logoLinkElement = createLogoLinkElement(isThemeLight, slotLogo);
+  const campaignElement = createCampaignRow(props);
+  const callToActionElement = createCallToActionContainer(props);
+  return createContainer(logoLinkElement, campaignElement, callToActionElement);
 };
 export {
-  LogoContainerStyles,
-  createLogo
+  createLogoContainer as default
 };
 //# sourceMappingURL=logo.mjs.map