@universityofmaryland/web-elements-library 1.4.8 → 1.5.0

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

@@ -1,17 +1,9 @@
 import { token, animation, typography } from "@universityofmaryland/web-styles-library";
-import { linkWithSpan } from "../../../../../utilities/markup/create.mjs";
-import { animationLinkSpan } from "../../../../../utilities/markup/modify.mjs";
-import { convertJSSObjectToStyles } from "../../../../../utilities/theme/index.mjs";
-import { SOCIAL_COLUMN_WRAPPER, createSocialCampaignColumns } from "../social.mjs";
-import { VARIABLES, BREAKPOINTS, ELEMENTS, REFERENCES } from "../../../globals.mjs";
+import { wrapLinkForAnimation } from "@universityofmaryland/web-utilities-library/animation";
+import createSocialCampaignColumns from "../social.mjs";
+import { createDiv, create } from "../../../../../model/elements/index.mjs";
+import { BREAKPOINTS } from "../../../globals.mjs";
 const { MEDIUM, LARGE } = BREAKPOINTS;
-const { ELEMENT_WRAPPER } = ELEMENTS;
-const { ELEMENT_NAME } = VARIABLES;
-const { IS_THEME_LIGHT } = REFERENCES;
-const CONTACT_CONTAINER = "umd-footer-contact-container";
-const CONTACT_LIST_HEADLINE = "umd-footer-contact-list-headline";
-const CONTACT_LIST_ADDRESS = "umd-footer-contact-list-address";
-const CONTACT_LINKS_LIST = "umd-footer-contact-links-list";
 const DEFAULT_HEADLINE_LINK = {
   url: "https://www.usmd.edu/",
   title: "The Flagship Institution of the State of Maryland"
@@ -29,215 +21,190 @@ const DEFAULT_PHONE = {
   title: "301.405.1000",
   label: "Call: 301-405-1000"
 };
-const socialOverwriteStyles = `
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${CONTACT_CONTAINER} .${SOCIAL_COLUMN_WRAPPER} {
-      display: none;
+const createContactListHeadline = ({
+  props,
+  element,
+  children
+}) => {
+  const { isThemeLight } = props;
+  return create({
+    element: element ?? document.createElement("p"),
+    className: "umd-footer-contact-list-headline",
+    children: children ?? [],
+    elementStyles: {
+      element: {
+        marginBottom: token.spacing.min,
+        color: token.color.white,
+        fontWeight: 700,
+        ...typography.elements.interativeMedium,
+        ["& span"]: {
+          ...isThemeLight && {
+            color: token.color.black
+          }
+        },
+        [`& a`]: {
+          ...animation.line.slideUnderWhite,
+          ...isThemeLight && {
+            ...animation.line.slideUnderBlack
+          }
+        },
+        [`& p`]: {
+          lineHeight: "1.4em"
+        },
+        [`@container (max-width: ${MEDIUM - 1}px)`]: {
+          paddingTop: token.spacing.md
+        }
+      }
     }
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${CONTACT_CONTAINER} .${SOCIAL_COLUMN_WRAPPER} {
-      margin-top: ${token.spacing.md};
-    }
-  }
-`;
-const HeadlineStyles = `
-  .${CONTACT_LIST_HEADLINE} {
-    margin-bottom: ${token.spacing.min};
-    color: ${token.color.white};
-  }
-
-  .${CONTACT_LIST_HEADLINE} * {
-    font-weight: 700;
-    color: ${token.color.white};
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${CONTACT_LIST_HEADLINE} a`]: animation.line.slideUnderWhite
-  }
-})}
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${CONTACT_LIST_HEADLINE}`]: typography.elements.interativeMedium
-  }
-})}
-
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${CONTACT_LIST_HEADLINE},
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${CONTACT_LIST_HEADLINE} * {
-    color: ${token.color.black};
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${CONTACT_LIST_HEADLINE} a`]: animation.line.slideUnderBlack
-  }
-})}
-`;
-const AddressStyles = `
-  .${CONTACT_LIST_ADDRESS} + * {
-    margin-top: 2px;
-  }
-
-  .${CONTACT_LIST_ADDRESS} * {
-    display: block;
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${CONTACT_LIST_ADDRESS} *`]: typography.sans.small
-  }
-})}
-`;
-const LinkListStyles = `
-  .${CONTACT_LINKS_LIST} {
-    display: flex;
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${CONTACT_LINKS_LIST} *`]: typography.sans.small
-  }
-})}
-
-  .${CONTACT_LINKS_LIST} a {
-    display: block;
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${CONTACT_LINKS_LIST} a`]: animation.line.slideUnderWhite
-  }
-})}
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${CONTACT_LINKS_LIST} a`]: animation.line.slideUnderBlack
-  }
-})}
-
-  .${CONTACT_LINKS_LIST} a:not(:first-child) {
-    position: relative;
-    margin-left: ${token.spacing.min};
-    padding-left: ${token.spacing.min};
-    position: relative;
-    background-position: 10px 100%;
-  }
-
-  .${CONTACT_LINKS_LIST} a:not(:first-child):before {
-    content: "";
-    display: inline-block;
-    height: 3px;
-    width: 3px;
-    background-color: ${token.color.white};
-    border-radius: 50%;
-    position: absolute;
-    top: 50%;
-    left: 0;
-  }
-
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} a:not(:first-child):before {
-    background-color: ${token.color.black};
-  }
-`;
-const ContactContainerStyles = `
-  .${CONTACT_CONTAINER} {
-    background-color: currnetColor;
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${MEDIUM - 1}px) {
-    .${CONTACT_CONTAINER} {
-      padding-top: ${token.spacing["md"]};
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${CONTACT_CONTAINER} {
-      padding-left: ${token.spacing["2xl"]};
+  });
+};
+const createDefaultHeadline = (props) => {
+  const headlineLink = linkWithSpan(props, DEFAULT_HEADLINE_LINK);
+  return createContactListHeadline({ props, children: [headlineLink] });
+};
+const createAddress = (address) => {
+  return create({
+    element: address,
+    className: "umd-footer-contact-list-address",
+    elementStyles: {
+      element: {
+        [`& *`]: {
+          display: "block",
+          ...typography.sans.small
+        },
+        ["& + *"]: {
+          marginTop: "2px"
+        }
+      }
     }
-  }
-
-  .${CONTACT_CONTAINER} p {
-    line-height: 1.4em;
-  }
-
-  ${HeadlineStyles}
-  ${AddressStyles}
-  ${LinkListStyles}
-  ${socialOverwriteStyles}
-`;
-const createDefaultHeadline = () => {
-  const headline = document.createElement("p");
-  const headlineLink = linkWithSpan(DEFAULT_HEADLINE_LINK);
-  headline.classList.add(CONTACT_LIST_HEADLINE);
-  headline.appendChild(headlineLink);
-  return headline;
+  });
 };
 const createDefaultAddress = () => {
   const address = document.createElement("address");
   const addressParagraphOne = document.createElement("p");
   const addressParagraphTwo = document.createElement("p");
-  address.classList.add(CONTACT_LIST_ADDRESS);
   addressParagraphOne.innerHTML = DEFAULT_ADDRESS_TITLE;
-  addressParagraphTwo.innerHTML = `${DEFAULT_ADDRESS_ONE} ${DEFAULT_ADDRESS_TWO} `;
+  addressParagraphTwo.innerHTML = `${DEFAULT_ADDRESS_ONE} ${DEFAULT_ADDRESS_TWO}`;
   address.appendChild(addressParagraphOne);
   address.appendChild(addressParagraphTwo);
-  return address;
+  return createAddress(address);
 };
-const createAddress = ({ slotAddress }) => {
-  if (slotAddress) {
-    slotAddress.classList.add(CONTACT_LIST_ADDRESS);
-  }
-  return slotAddress;
+const linkWithSpan = (props, {
+  url,
+  title,
+  label
+}) => {
+  const link = document.createElement("a");
+  const span = document.createElement("span");
+  const { isThemeLight } = props;
+  link.setAttribute("href", url);
+  link.setAttribute("target", "_blank");
+  link.setAttribute("rel", "noopener noreferrer");
+  if (label) link.setAttribute("aria-label", label);
+  span.innerText = title;
+  link.appendChild(span);
+  return create({
+    className: "umd-element-footer-contact-link",
+    element: link,
+    elementStyles: {
+      element: {
+        display: "block",
+        ...animation.line.slideUnderWhite,
+        ...isThemeLight && {
+          ...animation.line.slideUnderBlack
+        },
+        [`&:not(:first-child)`]: {
+          position: "relative",
+          marginLeft: token.spacing.min,
+          paddingLeft: token.spacing.min,
+          backgroundPosition: "10px 100%"
+        },
+        [`&:not(:first-child)::before`]: {
+          content: '""',
+          display: "inline-block",
+          height: "3px",
+          width: "3px",
+          backgroundColor: token.color.white,
+          borderRadius: "50%",
+          position: "absolute",
+          top: "50%",
+          left: 0
+        }
+      }
+    }
+  });
+};
+const createContactLinksList = ({
+  element,
+  children
+}) => {
+  return create({
+    element: element ?? document.createElement("p"),
+    className: "umd-footer-contact-links-list",
+    children: children ?? [],
+    elementStyles: {
+      element: {
+        display: "flex",
+        [`& *`]: {
+          ...typography.sans.small
+        }
+      }
+    }
+  });
 };
-const createDefaultLinks = () => {
-  const contactList = document.createElement("p");
-  contactList.classList.add(CONTACT_LINKS_LIST);
-  contactList.appendChild(linkWithSpan(DEFAULT_EMAIL));
-  contactList.appendChild(linkWithSpan(DEFAULT_PHONE));
-  return contactList;
+const createDefaultLinks = (props) => {
+  const email = linkWithSpan(props, DEFAULT_EMAIL);
+  const phone = linkWithSpan(props, DEFAULT_PHONE);
+  return createContactLinksList({ children: [email, phone] });
 };
-const createContact = (props) => {
+const createContactContainer = (props) => {
   const { slotAddress, slotHeadline, slotContentLinks } = props;
-  const contactContainer = document.createElement("div");
   const socialContainer = createSocialCampaignColumns(props);
   const hasSlot = slotAddress || slotHeadline || slotContentLinks;
-  const makeContactSlot = () => {
-    const address = createAddress({ slotAddress });
+  const contactChildren = [];
+  if (hasSlot) {
     if (slotHeadline) {
-      animationLinkSpan({
-        element: slotHeadline
-      });
-      slotHeadline.classList.add(CONTACT_LIST_HEADLINE);
-      contactContainer.appendChild(slotHeadline);
+      wrapLinkForAnimation({ element: slotHeadline });
+      contactChildren.push(
+        createContactListHeadline({ props, element: slotHeadline })
+      );
     }
-    if (address) {
-      contactContainer.appendChild(address);
+    if (slotAddress) {
+      contactChildren.push(createAddress(slotAddress));
     }
     if (slotContentLinks) {
-      slotContentLinks.classList.add(CONTACT_LINKS_LIST);
-      contactContainer.appendChild(slotContentLinks);
+      contactChildren.push(
+        createContactLinksList({ element: slotContentLinks })
+      );
+    }
+  } else {
+    contactChildren.push(createDefaultHeadline(props));
+    contactChildren.push(createDefaultAddress());
+    contactChildren.push(createDefaultLinks(props));
+  }
+  contactChildren.push(socialContainer);
+  return createDiv({
+    className: "umd-footer-contact-container",
+    children: contactChildren,
+    elementStyles: {
+      element: {
+        ["& p"]: {
+          lineHeight: "1.4em"
+        },
+        ["& > .umd-footer-social-column_wrapper"]: {
+          display: "block"
+        },
+        [`@container (max-width: ${MEDIUM - 1})`]: {
+          paddingTop: token.spacing.md
+        },
+        [`@container (min-width: ${LARGE}px)`]: {
+          paddingLeft: token.spacing["xl"]
+        }
+      }
     }
-  };
-  const makeDefaultSlot = () => {
-    const defaultContactWrapper = document.createElement("div");
-    const headline = createDefaultHeadline();
-    const address = createDefaultAddress();
-    const contactList = createDefaultLinks();
-    contactContainer.appendChild(headline);
-    contactContainer.appendChild(address);
-    contactContainer.appendChild(contactList);
-    contactContainer.appendChild(defaultContactWrapper);
-  };
-  hasSlot ? makeContactSlot() : makeDefaultSlot();
-  contactContainer.classList.add(CONTACT_CONTAINER);
-  contactContainer.appendChild(socialContainer);
-  return contactContainer;
+  });
 };
 export {
-  ContactContainerStyles,
-  createContact
+  createContactContainer as default
 };
 //# sourceMappingURL=contact.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"contact.mjs","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/contact.ts"],"sourcesContent":["import {\n  animation,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport {\n  createSocialCampaignColumns,\n  SOCIAL_COLUMN_WRAPPER,\n  type SocialCampaignColumnsProps,\n} from '../social';\nimport { BREAKPOINTS, ELEMENTS, VARIABLES, REFERENCES } from '../../../globals';\n\nconst { MEDIUM, LARGE } = BREAKPOINTS;\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { ELEMENT_NAME } = VARIABLES;\nconst { IS_THEME_LIGHT } = REFERENCES;\n\nconst CONTACT_CONTAINER = 'umd-footer-contact-container';\nconst CONTACT_LIST_HEADLINE = 'umd-footer-contact-list-headline';\nconst CONTACT_LIST_ADDRESS = 'umd-footer-contact-list-address';\nconst CONTACT_LINKS_LIST = 'umd-footer-contact-links-list';\n\nconst DEFAULT_HEADLINE_LINK = {\n  url: 'https://www.usmd.edu/',\n  title: 'The Flagship Institution of the State of Maryland',\n};\nconst DEFAULT_ADDRESS_TITLE = 'Office of Marketing and Communications';\nconst DEFAULT_ADDRESS_ONE = '2101 Turner Hall';\nconst DEFAULT_ADDRESS_TWO = 'College Park, MD 20742';\nconst DEFAULT_EMAIL = {\n  url: 'mailto:omc@umd.edu',\n  title: 'omc@umd.edu',\n  label: 'Email: Office of the marketing and communications at omc@umd.edu',\n};\nconst DEFAULT_PHONE = {\n  url: 'tel:3014051000',\n  title: '301.405.1000',\n  label: 'Call: 301-405-1000',\n};\n\n// prettier-ignore\nconst socialOverwriteStyles = `\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${CONTACT_CONTAINER} .${SOCIAL_COLUMN_WRAPPER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${CONTACT_CONTAINER} .${SOCIAL_COLUMN_WRAPPER} {\n      margin-top: ${token.spacing.md};\n    }\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  .${CONTACT_LIST_HEADLINE} {\n    margin-bottom: ${token.spacing.min};\n    color: ${token.color.white};\n  }\n\n  .${CONTACT_LIST_HEADLINE} * {\n    font-weight: 700;\n    color: ${token.color.white};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${CONTACT_LIST_HEADLINE} a`]:\n      animation.line.slideUnderWhite,\n    },\n  })}\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${CONTACT_LIST_HEADLINE}`]: typography.elements.interativeMedium,\n    },\n  })}\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${CONTACT_LIST_HEADLINE},\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${CONTACT_LIST_HEADLINE} * {\n    color: ${token.color.black};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${CONTACT_LIST_HEADLINE} a`]:\n      animation.line.slideUnderBlack,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst AddressStyles = `\n  .${CONTACT_LIST_ADDRESS} + * {\n    margin-top: 2px;\n  }\n\n  .${CONTACT_LIST_ADDRESS} * {\n    display: block;\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${CONTACT_LIST_ADDRESS} *`]: typography.sans.small,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst LinkListStyles = `\n  .${CONTACT_LINKS_LIST} {\n    display: flex;\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${CONTACT_LINKS_LIST} *`]: typography.sans.small,\n    },\n  })}\n\n  .${CONTACT_LINKS_LIST} a {\n    display: block;\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${CONTACT_LINKS_LIST} a`]:\n      animation.line.slideUnderWhite,\n    },\n  })}\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${CONTACT_LINKS_LIST} a`]:\n      animation.line.slideUnderBlack,\n    },\n  })}\n\n  .${CONTACT_LINKS_LIST} a:not(:first-child) {\n    position: relative;\n    margin-left: ${token.spacing.min};\n    padding-left: ${token.spacing.min};\n    position: relative;\n    background-position: 10px 100%;\n  }\n\n  .${CONTACT_LINKS_LIST} a:not(:first-child):before {\n    content: \"\";\n    display: inline-block;\n    height: 3px;\n    width: 3px;\n    background-color: ${token.color.white};\n    border-radius: 50%;\n    position: absolute;\n    top: 50%;\n    left: 0;\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} a:not(:first-child):before {\n    background-color: ${token.color.black};\n  }\n`;\n\n// prettier-ignore\nexport const ContactContainerStyles = `\n  .${CONTACT_CONTAINER} {\n    background-color: currnetColor;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDIUM - 1}px) {\n    .${CONTACT_CONTAINER} {\n      padding-top: ${token.spacing['md']};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${CONTACT_CONTAINER} {\n      padding-left: ${token.spacing['2xl']};\n    }\n  }\n\n  .${CONTACT_CONTAINER} p {\n    line-height: 1.4em;\n  }\n\n  ${HeadlineStyles}\n  ${AddressStyles}\n  ${LinkListStyles}\n  ${socialOverwriteStyles}\n`;\n\nconst createDefaultHeadline = () => {\n  const headline = document.createElement('p');\n  const headlineLink = Utils.markup.create.linkWithSpan(DEFAULT_HEADLINE_LINK);\n\n  headline.classList.add(CONTACT_LIST_HEADLINE);\n  headline.appendChild(headlineLink);\n\n  return headline;\n};\n\ninterface HeadlineProps {\n  slotHeadline: HTMLSlotElement;\n}\n\nconst createDefaultAddress = () => {\n  const address = document.createElement('address');\n  const addressParagraphOne = document.createElement('p');\n  const addressParagraphTwo = document.createElement('p');\n\n  address.classList.add(CONTACT_LIST_ADDRESS);\n\n  addressParagraphOne.innerHTML = DEFAULT_ADDRESS_TITLE;\n  addressParagraphTwo.innerHTML = `${DEFAULT_ADDRESS_ONE} ${DEFAULT_ADDRESS_TWO} `;\n\n  address.appendChild(addressParagraphOne);\n  address.appendChild(addressParagraphTwo);\n\n  return address;\n};\n\ninterface AddressProps {\n  slotAddress: HTMLSlotElement;\n}\n\nconst createAddress = ({ slotAddress }: AddressProps) => {\n  if (slotAddress) {\n    slotAddress.classList.add(CONTACT_LIST_ADDRESS);\n  }\n  return slotAddress;\n};\n\nconst createDefaultLinks = () => {\n  const contactList = document.createElement('p');\n\n  contactList.classList.add(CONTACT_LINKS_LIST);\n  contactList.appendChild(Utils.markup.create.linkWithSpan(DEFAULT_EMAIL));\n  contactList.appendChild(Utils.markup.create.linkWithSpan(DEFAULT_PHONE));\n\n  return contactList;\n};\n\ninterface LinksProps {\n  slotContentLinks: HTMLSlotElement;\n}\n\nexport interface ContactProps\n  extends SocialCampaignColumnsProps,\n    AddressProps,\n    HeadlineProps,\n    LinksProps {}\n\nexport const createContact = (props: ContactProps) => {\n  const { slotAddress, slotHeadline, slotContentLinks } = props;\n  const contactContainer = document.createElement('div');\n  const socialContainer = createSocialCampaignColumns(props);\n  const hasSlot = slotAddress || slotHeadline || slotContentLinks;\n\n  const makeContactSlot = () => {\n    const address = createAddress({ slotAddress });\n\n    if (slotHeadline) {\n      Utils.markup.modify.animationLinkSpan({\n        element: slotHeadline,\n      });\n      slotHeadline.classList.add(CONTACT_LIST_HEADLINE);\n      contactContainer.appendChild(slotHeadline);\n    }\n\n    if (address) {\n      contactContainer.appendChild(address);\n    }\n\n    if (slotContentLinks) {\n      slotContentLinks.classList.add(CONTACT_LINKS_LIST);\n      contactContainer.appendChild(slotContentLinks);\n    }\n  };\n\n  const makeDefaultSlot = () => {\n    const defaultContactWrapper = document.createElement('div');\n    const headline = createDefaultHeadline();\n    const address = createDefaultAddress();\n    const contactList = createDefaultLinks();\n\n    contactContainer.appendChild(headline);\n    contactContainer.appendChild(address);\n    contactContainer.appendChild(contactList);\n    contactContainer.appendChild(defaultContactWrapper);\n  };\n\n  hasSlot ? makeContactSlot() : makeDefaultSlot();\n\n  contactContainer.classList.add(CONTACT_CONTAINER);\n  contactContainer.appendChild(socialContainer);\n\n  return contactContainer;\n};\n"],"names":["Utils.theme.convertJSSObjectToStyles","Utils.markup.create.linkWithSpan","Utils.markup.modify.animationLinkSpan"],"mappings":"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"}
+{"version":3,"file":"contact.mjs","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/contact.ts"],"sourcesContent":["import {\n  animation,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport createSocialCampaignColumns, {\n  type SocialCampaignColumnsProps,\n} from '../social';\nimport { ElementModel } from 'model';\nimport { BREAKPOINTS } from '../../../globals';\nimport { BaseProps } from '../../../_types';\nimport { type ElementVisual } from '../../../../../_types';\n\ninterface HeadlineProps {\n  slotHeadline: HTMLSlotElement;\n}\n\ninterface AddressProps {\n  slotAddress: HTMLSlotElement;\n}\n\ninterface LinksProps {\n  slotContentLinks: HTMLSlotElement;\n}\n\nexport interface ContactProps\n  extends BaseProps,\n    SocialCampaignColumnsProps,\n    AddressProps,\n    HeadlineProps,\n    LinksProps {}\n\nconst { MEDIUM, LARGE } = BREAKPOINTS;\n\nconst DEFAULT_HEADLINE_LINK = {\n  url: 'https://www.usmd.edu/',\n  title: 'The Flagship Institution of the State of Maryland',\n};\nconst DEFAULT_ADDRESS_TITLE = 'Office of Marketing and Communications';\nconst DEFAULT_ADDRESS_ONE = '2101 Turner Hall';\nconst DEFAULT_ADDRESS_TWO = 'College Park, MD 20742';\nconst DEFAULT_EMAIL = {\n  url: 'mailto:omc@umd.edu',\n  title: 'omc@umd.edu',\n  label: 'Email: Office of the marketing and communications at omc@umd.edu',\n};\nconst DEFAULT_PHONE = {\n  url: 'tel:3014051000',\n  title: '301.405.1000',\n  label: 'Call: 301-405-1000',\n};\n\nconst createContactListHeadline = ({\n  props,\n  element,\n  children,\n}: {\n  props: ContactProps;\n  element?: HTMLElement;\n  children?: ElementVisual[];\n}) => {\n  const { isThemeLight } = props;\n\n  return ElementModel.create({\n    element: element ?? document.createElement('p'),\n    className: 'umd-footer-contact-list-headline',\n    children: children ?? [],\n    elementStyles: {\n      element: {\n        marginBottom: token.spacing.min,\n        color: token.color.white,\n        fontWeight: 700,\n        ...typography.elements.interativeMedium,\n\n        ['& span']: {\n          ...(isThemeLight && {\n            color: token.color.black,\n          }),\n        },\n\n        [`& a`]: {\n          ...animation.line.slideUnderWhite,\n\n          ...(isThemeLight && {\n            ...animation.line.slideUnderBlack,\n          }),\n        },\n\n        [`& p`]: {\n          lineHeight: '1.4em',\n        },\n\n        [`@container (max-width: ${MEDIUM - 1}px)`]: {\n          paddingTop: token.spacing.md,\n        },\n      },\n    },\n  });\n};\n\nconst createDefaultHeadline = (props: ContactProps): ElementVisual => {\n  const headlineLink = linkWithSpan(props, DEFAULT_HEADLINE_LINK);\n\n  return createContactListHeadline({ props: props, children: [headlineLink] });\n};\n\nconst createAddress = (address: HTMLElement) => {\n  return ElementModel.create({\n    element: address,\n    className: 'umd-footer-contact-list-address',\n    elementStyles: {\n      element: {\n        [`& *`]: {\n          display: 'block',\n          ...typography.sans.small,\n        },\n\n        ['& + *']: {\n          marginTop: '2px',\n        },\n      },\n    },\n  });\n};\n\nconst createDefaultAddress = (): ElementVisual => {\n  const address = document.createElement('address');\n  const addressParagraphOne = document.createElement('p');\n  const addressParagraphTwo = document.createElement('p');\n\n  addressParagraphOne.innerHTML = DEFAULT_ADDRESS_TITLE;\n  addressParagraphTwo.innerHTML = `${DEFAULT_ADDRESS_ONE} ${DEFAULT_ADDRESS_TWO}`;\n\n  address.appendChild(addressParagraphOne);\n  address.appendChild(addressParagraphTwo);\n\n  return createAddress(address);\n};\n\nconst linkWithSpan = (\n  props: ContactProps,\n  {\n    url,\n    title,\n    label,\n  }: {\n    url: string;\n    title: string;\n    label?: string;\n  },\n) => {\n  const link = document.createElement('a');\n  const span = document.createElement('span');\n  const { isThemeLight } = props;\n\n  link.setAttribute('href', url);\n  link.setAttribute('target', '_blank');\n  link.setAttribute('rel', 'noopener noreferrer');\n\n  if (label) link.setAttribute('aria-label', label);\n\n  span.innerText = title;\n  link.appendChild(span);\n\n  return ElementModel.create({\n    className: 'umd-element-footer-contact-link',\n    element: link,\n    elementStyles: {\n      element: {\n        display: 'block',\n        ...animation.line.slideUnderWhite,\n\n        ...(isThemeLight && {\n          ...animation.line.slideUnderBlack,\n        }),\n\n        [`&:not(:first-child)`]: {\n          position: 'relative',\n          marginLeft: token.spacing.min,\n          paddingLeft: token.spacing.min,\n          backgroundPosition: '10px 100%',\n        },\n\n        [`&:not(:first-child)::before`]: {\n          content: '\"\"',\n          display: 'inline-block',\n          height: '3px',\n          width: '3px',\n          backgroundColor: token.color.white,\n          borderRadius: '50%',\n          position: 'absolute',\n          top: '50%',\n          left: 0,\n        },\n      },\n    },\n  });\n};\n\nconst createContactLinksList = ({\n  element,\n  children,\n}: {\n  element?: HTMLElement;\n  children?: ElementVisual[];\n}) => {\n  return ElementModel.create({\n    element: element ?? document.createElement('p'),\n    className: 'umd-footer-contact-links-list',\n    children: children ?? [],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        [`& *`]: {\n          ...typography.sans.small,\n        },\n      },\n    },\n  });\n};\n\nconst createDefaultLinks = (props: ContactProps): ElementVisual => {\n  const email = linkWithSpan(props, DEFAULT_EMAIL);\n  const phone = linkWithSpan(props, DEFAULT_PHONE);\n\n  return createContactLinksList({ children: [email, phone] });\n};\n\nexport default (props: ContactProps): ElementVisual => {\n  const { slotAddress, slotHeadline, slotContentLinks } = props;\n  const socialContainer = createSocialCampaignColumns(props);\n  const hasSlot = slotAddress || slotHeadline || slotContentLinks;\n\n  const contactChildren: ElementVisual[] = [];\n\n  if (hasSlot) {\n    if (slotHeadline) {\n      wrapLinkForAnimation({ element: slotHeadline });\n      contactChildren.push(\n        createContactListHeadline({ props: props, element: slotHeadline }),\n      );\n    }\n    if (slotAddress) {\n      contactChildren.push(createAddress(slotAddress));\n    }\n    if (slotContentLinks) {\n      contactChildren.push(\n        createContactLinksList({ element: slotContentLinks }),\n      );\n    }\n  } else {\n    contactChildren.push(createDefaultHeadline(props));\n    contactChildren.push(createDefaultAddress());\n    contactChildren.push(createDefaultLinks(props));\n  }\n\n  contactChildren.push(socialContainer);\n\n  return ElementModel.createDiv({\n    className: 'umd-footer-contact-container',\n    children: contactChildren,\n    elementStyles: {\n      element: {\n        ['& p']: {\n          lineHeight: '1.4em',\n        },\n\n        ['& > .umd-footer-social-column_wrapper']: {\n          display: 'block',\n        },\n\n        [`@container (max-width: ${MEDIUM - 1})`]: {\n          paddingTop: token.spacing.md,\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          paddingLeft: token.spacing['xl'],\n        },\n      },\n    },\n  });\n};\n"],"names":["ElementModel.create","ElementModel.createDiv"],"mappings":"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"}

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

@@ -1,8 +1,11 @@
 import { SocialCampaignColumnsProps } from '../social';
 import { CallToActionProps } from '../call-to-action';
 import { ContactProps } from './contact';
-export declare const RowLogoStyles: string;
-export interface RowLogoProps extends SocialCampaignColumnsProps, CallToActionProps, ContactProps {
+import { LogoProps } from './logo';
+import { BaseProps } from '../../../_types';
+import { ElementVisual } from '../../../../../_types';
+export interface RowLogoProps extends SocialCampaignColumnsProps, BaseProps, LogoProps, CallToActionProps, ContactProps {
 }
-export declare const createRowLogo: (props: RowLogoProps) => HTMLDivElement;
+declare const _default: (props: RowLogoProps) => ElementVisual;
+export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,0BAA0B,EAChC,MAAM,WAAW,CAAC;AACnB,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,WAAW,CAAC;AAmCnB,eAAO,MAAM,aAAa,QA4CzB,CAAC;AAEF,MAAM,WAAW,YACf,SAAQ,0BAA0B,EAChC,iBAAiB,EACjB,YAAY;CAAG;AAEnB,eAAO,MAAM,aAAa,GAAI,OAAO,YAAY,mBA6BhD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/index.ts"],"names":[],"mappings":"AAEA,OAAoC,EAClC,KAAK,0BAA0B,EAChC,MAAM,WAAW,CAAC;AACnB,OAAoC,EAClC,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAC;AAC3B,OAA+B,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACtE,OAA4B,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAI3D,MAAM,WAAW,YACf,SAAQ,0BAA0B,EAChC,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,YAAY;CAAG;yBAEH,OAAO,YAAY,KAAG,aAAa;AAAnD,wBAoEE"}

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

@@ -1,108 +1,67 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Styles = require("@universityofmaryland/web-styles-library");
-const index = require("../../../../../utilities/theme/index.js");
+const index = require("../../../../../model/elements/index.js");
 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 { ELEMENT_WRAPPER } = globals.ELEMENTS;
-const { ELEMENT_NAME } = globals.VARIABLES;
-const { IS_THEME_LIGHT, IS_VERSION_SIMPLE } = globals.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} > .${callToAction.CALL_TO_ACTION_CONTAINER} {
-      display: none;
-    }
-  }
-`;
-const themeOverwriteStyles = `
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LOGO_CONTAINER} {
-    background-color: ${Styles.token.color.gray.lightest} !important;
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${ELEMENT_WRAPPER}${IS_VERSION_SIMPLE} .${ROW_LOGO_CONTAINER} .${social.SOCIAL_COLUMN_WRAPPER} {
-      display: none;
-    }
-  }
-`;
-const RowLogoStyles = `
-  .${ROW_LOGO_CONTAINER} {
-    background-color: ${Styles.token.color.black};
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${ROW_LOGO_CONTAINER} {
-      padding-top: ${Styles.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: ${Styles.token.spacing.md};
-    }
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${ROW_LOGO_CONTAINER} {
-      padding-bottom: ${Styles.token.spacing["md"]} ;
+const createRowLogo = (props) => {
+  const { isThemeLight, isTypeSimple } = props;
+  const logoElement = logo(props);
+  const contactElement = contact(props);
+  const thirdColumnElement = isTypeSimple && social(props) || callToAction(props);
+  const wrapper = index.createDiv({
+    className: "umd-footer-row-logo-container-wrapper",
+    children: [logoElement, contactElement, thirdColumnElement],
+    elementStyles: {
+      element: {
+        [`@container (min-width: ${LARGE}px)`]: {
+          display: "flex",
+          padding: `${Styles.token.spacing["5xl"]} 0 ${Styles.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: Styles.token.spacing.md
+        }
+      }
     }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${ROW_LOGO_CONTAINER_WRAPPER} {
-      display: flex;
-      padding: ${Styles.token.spacing["5xl"]} 0 ${Styles.token.spacing["2xl"]};
+  });
+  const lock = index.createDiv({
+    className: "umd-footer-row-logo-container-lock",
+    children: [wrapper],
+    elementStyles: {
+      element: {
+        ...Styles.layout.space.horizontal.larger
+      }
     }
-  }
-
-  ${index.convertJSSObjectToStyles({
-  styleObj: {
-    [`.${ROW_LOGO_CONTAINER_LOCK}`]: Styles.layout.space.horizontal.larger
-  }
-})}
-
-  ${logo.LogoContainerStyles}
-  ${contact.ContactContainerStyles}
-  ${social.SocialContainerStyles}
-  ${callToAction.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 = social.createSocialCampaignColumns(props);
-      wrapper.appendChild(socialColumnWrapper);
-    } else {
-      const ctaWrapper = callToAction.createCallToAction(props);
-      wrapper.appendChild(ctaWrapper);
+  });
+  const rowLogoContainer = index.createDiv({
+    className: "umd-footer-row-logo-container",
+    children: [lock],
+    elementStyles: {
+      element: {
+        backgroundColor: !isThemeLight && Styles.token.color.black || Styles.token.color.gray.lightest,
+        [`@container (max-width: ${LARGE - 1}px)`]: {
+          paddingTop: Styles.token.spacing["2xl"],
+          paddingBottom: Styles.token.spacing["md"],
+          ...isTypeSimple && {
+            [`& .umd-footer-element-wrapper`]: {
+              display: "none"
+            }
+          }
+        }
+      }
     }
-  };
-  const logoElement = logo.createLogo(props);
-  const contactElement = contact.createContact(props);
-  wrapper.appendChild(logoElement);
-  wrapper.appendChild(contactElement);
-  makeThirdColumn();
-  lock.appendChild(wrapper);
-  container.appendChild(lock);
-  return container;
+  });
+  return rowLogoContainer;
 };
-exports.RowLogoStyles = RowLogoStyles;
-exports.createRowLogo = createRowLogo;
+module.exports = createRowLogo;
 //# sourceMappingURL=index.js.map