@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

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

@@ -0,0 +1,81 @@
+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";
+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};
+    }
+  }
+
+  @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 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;
+};
+export {
+  LogoContainerStyles,
+  createLogo
+};
+//# sourceMappingURL=logo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"logo.mjs","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":["createCampaignRow","createCallToActionContainer","utilities.asset.logo.DARK_LOGO","utilities.asset.logo.LIGHT_LOGO"],"mappings":";;;;;;;;AAeA,MAAM,EAAE,UAAU;AAClB,MAAM,EAAE,iBAAiB;AACzB,MAAM,EAAE,oBAAoB;AAC5B,MAAM,EAAE,sBAAsB;AAE9B,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAG5B,MAAM,qBAAqB;AAAA,eACZ,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,cAAc,KAAK,wBAAwB;AAAA,oBAC9B,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAIrB,YAAY,gBAAgB,KAAK;AAAA,OACzC,cAAc,KAAK,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,eAKnC,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,eAAe,GAAG,iBAAiB,KAAK,cAAc,KAAK,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAM1F,MAAM,0BAA0B;AAAA,eACjB,YAAY,gBAAgB,KAAK;AAAA,OACzC,cAAc,KAAK,uBAAuB;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,oBAAoBA,eAAkB,KAAK;AACjD,QAAM,aAAaC,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,SAA8B,KACjC,GAAGC,UAA+B;AAEtC,YAAU,UAAU,IAAI,cAAc;AACtC,YAAU,YAAY,QAAQ;AAC9B,YAAU,YAAY,iBAAiB;AACvC,YAAU,YAAY,UAAU;AAEhC,SAAO;AACT;"}

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

@@ -6,6 +6,6 @@ interface SocialProps {
 }
 export interface SocialCampaignColumnsProps extends BaseProps, SocialProps {
 }
-declare const _default: (props: SocialCampaignColumnsProps) => HTMLDivElement;
-export default _default;
+export declare const createSocialCampaignColumns: (props: SocialCampaignColumnsProps) => HTMLDivElement;
+export {};
 //# 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":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzC,eAAO,MAAM,qBAAqB,qCAAqC,CAAC;AAyExE,eAAO,MAAM,qBAAqB,QAiFjC,CAAC;AAuCF,UAAU,WAAW;IACnB,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAqED,MAAM,WAAW,0BAA2B,SAAQ,SAAS,EAAE,WAAW;CAAG;gCAEtD,0BAA0B;AAAjD,wBAWE"}
+{"version":3,"file":"social.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzC,eAAO,MAAM,qBAAqB,qCAAqC,CAAC;AAyExE,eAAO,MAAM,qBAAqB,QAiFjC,CAAC;AAuCF,UAAU,WAAW;IACnB,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAqED,MAAM,WAAW,0BAA2B,SAAQ,SAAS,EAAE,WAAW;CAAG;AAE7E,eAAO,MAAM,2BAA2B,GAAI,OAAO,0BAA0B,mBAW5E,CAAC"}

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

@@ -0,0 +1,255 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+const social = require("../../../../utilities/assets/social.js");
+const index = require("../../../../utilities/theme/index.js");
+const campaign = require("./campaign.js");
+const globals = require("../../globals.js");
+const { LARGE, MEDIUM } = globals.BREAKPOINTS;
+const { ELEMENT_WRAPPER } = globals.ELEMENTS;
+const { ELEMENT_NAME } = globals.VARIABLES;
+const { IS_THEME_LIGHT } = globals.REFERENCES;
+const ATTRIBUTE_LAYOUT = "layout";
+const LAYOUT_GRID = "grid";
+const SOCIAL_COLUMN_WRAPPER = "umd-footer-social-column_wrapper";
+const SOCIAL_CONTAINER = "umd-footer-social-container";
+const SOCIAL_CONTAINER_WRAPPER = "umd-footer-social-container_wrapper";
+const SOCIAL_CONTAINER_HEADLINE = "umd-footer-social-container_headline";
+const IS_LAYOUT_GRID = `[${ATTRIBUTE_LAYOUT}="${LAYOUT_GRID}"]`;
+const OVERWRITE_GRID_CONTAINER = `.${SOCIAL_CONTAINER}${IS_LAYOUT_GRID}`;
+const OVERWRITE_GRID_WRAPPER = `${OVERWRITE_GRID_CONTAINER} .${SOCIAL_CONTAINER_WRAPPER}`;
+const OverwriteGridStyle = `
+  ${OVERWRITE_GRID_CONTAINER} {
+    flex-direction: column;
+    padding-left: 0;
+    align-items: flex-start;
+    margin-left: 0;
+  }
+
+  @media (min-width: ${LARGE}px) {
+    ${OVERWRITE_GRID_CONTAINER} {
+      align-items: center;
+    }
+  }
+
+  @media (min-width: ${LARGE}px) {
+    ${OVERWRITE_GRID_CONTAINER} > p {
+      align-self: center;
+    }
+  }
+
+  ${OVERWRITE_GRID_WRAPPER} {
+    grid-template-columns: repeat(3, 1fr);
+    margin-left: 0;
+    margin-top: ${Styles.token.spacing.sm};
+  }
+`;
+const campaignOverwriteStyles = `
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    .${SOCIAL_COLUMN_WRAPPER} .${campaign.CAMPAIGN_COLUMN_WRAPPER} {
+      display: none;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${SOCIAL_COLUMN_WRAPPER} .${campaign.CAMPAIGN_COLUMN_WRAPPER} {
+      display: flex;
+      justify-content: flex-end;
+      margin-left: auto;
+    }
+  }
+`;
+const themeOverwriteStyles = `
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT}  .${SOCIAL_CONTAINER_WRAPPER} a {
+    background-color: ${Styles.token.color.gray.light};
+  }
+
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a > *,
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a path {
+    fill: ${Styles.token.color.black} !important;
+  }
+
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT}  .${SOCIAL_CONTAINER_WRAPPER} a:hover {
+    background-color: ${Styles.token.color.gray.dark};
+  }
+
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a:hover path {
+    fill: ${Styles.token.color.gray.light} !important;
+  }
+`;
+const SocialContainerStyles = `
+  .${SOCIAL_CONTAINER} {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    align-self: flex-start;
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${SOCIAL_CONTAINER} {
+      justify-content: flex-end;
+      padding-left: ${Styles.token.spacing["2xl"]};
+    }
+  }
+
+  .${SOCIAL_CONTAINER} > p {
+    align-self: flex-start;
+    padding-top: 3px;
+    font-weight: 700;
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {
+    .${SOCIAL_COLUMN_WRAPPER} {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-column: 1 / span 2;
+      gap: ${Styles.token.spacing.md};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${SOCIAL_COLUMN_WRAPPER} {
+      margin-left: auto;
+    }
+  }
+
+  .${SOCIAL_CONTAINER_WRAPPER} {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: ${Styles.token.spacing.xs};
+    margin-left: ${Styles.token.spacing.xs};
+  }
+
+  .${SOCIAL_CONTAINER_WRAPPER}[count="4"] {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .${SOCIAL_CONTAINER_WRAPPER} a {
+    background-color: ${Styles.token.color.gray.darker};
+    height: 32px;
+    width: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color .5s;
+  }
+
+  .${SOCIAL_CONTAINER_WRAPPER} a > *,
+  .${SOCIAL_CONTAINER_WRAPPER} a path {
+    max-height: 20px !important;
+    fill: ${Styles.token.color.white} !important;
+    transition: fill .5s;
+  }
+
+  .${SOCIAL_CONTAINER_WRAPPER} a:hover {
+    background-color: ${Styles.token.color.gray.light};
+  }
+
+  .${SOCIAL_CONTAINER_WRAPPER} a:hover path {
+    fill: ${Styles.token.color.gray.dark} !important;
+  }
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${SOCIAL_CONTAINER_HEADLINE}`]: Styles.typography.elements.interativeMedium
+  }
+})}
+
+  ${campaignOverwriteStyles}
+  ${themeOverwriteStyles}
+  ${OverwriteGridStyle}
+`;
+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;
+  }
+  return link;
+};
+const CreateSocialRow = ({ slotSocialLinks }) => {
+  const container = document.createElement("div");
+  const linksWrapper = document.createElement("div");
+  const headline = document.createElement("p");
+  let socialLinks = [];
+  if (slotSocialLinks) {
+    const socialLinksClone = slotSocialLinks.cloneNode(true);
+    const slottedSocialLinks = Array.from(
+      socialLinksClone.querySelectorAll(`a`)
+    );
+    socialLinks = slottedSocialLinks;
+  }
+  if (socialLinks.length === 0) {
+    const socialLink = ({ url, label }) => {
+      const link = document.createElement("a");
+      link.setAttribute("href", url);
+      link.setAttribute("target", "_blank");
+      link.setAttribute("rel", "noopener noreferrer");
+      link.setAttribute("aria-label", label);
+      return link;
+    };
+    socialLinks.push(
+      socialLink({
+        url: "https://www.youtube.com/user/UMD2101",
+        label: "Link to the youtube channel for the University of Maryland"
+      })
+    );
+    socialLinks.push(
+      socialLink({
+        url: "https://www.facebook.com/UnivofMaryland",
+        label: "Link to the facebook page for the University of Maryland"
+      })
+    );
+    socialLinks.push(
+      socialLink({
+        url: "https://www.instagram.com/univofmaryland",
+        label: "Link to the instagram page for the University of Maryland"
+      })
+    );
+  }
+  socialLinks.forEach(
+    (link) => linksWrapper.appendChild(GetSocialIcon({ link }))
+  );
+  container.classList.add(SOCIAL_CONTAINER);
+  linksWrapper.classList.add(SOCIAL_CONTAINER_WRAPPER);
+  linksWrapper.setAttribute("count", `${socialLinks.length}`);
+  headline.classList.add(SOCIAL_CONTAINER_HEADLINE);
+  headline.innerText = "Stay Connected";
+  container.appendChild(headline);
+  container.appendChild(linksWrapper);
+  if (socialLinks.length >= 4) {
+    container.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);
+  }
+  return container;
+};
+const createSocialCampaignColumns = (props) => {
+  const socialColumnWrapper = document.createElement("div");
+  const socialContainer = CreateSocialRow(props);
+  const campaignContainer = campaign.createCampaign(props);
+  socialColumnWrapper.classList.add(SOCIAL_COLUMN_WRAPPER);
+  socialColumnWrapper.appendChild(socialContainer);
+  socialColumnWrapper.appendChild(campaignContainer);
+  return socialColumnWrapper;
+};
+exports.SOCIAL_COLUMN_WRAPPER = SOCIAL_COLUMN_WRAPPER;
+exports.SocialContainerStyles = SocialContainerStyles;
+exports.createSocialCampaignColumns = createSocialCampaignColumns;
+//# sourceMappingURL=social.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"social.js","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { createCampaign as createCampaignRow, CAMPAIGN_COLUMN_WRAPPER } from './campaign';\nimport { BREAKPOINTS, ELEMENTS, VARIABLES, REFERENCES } from '../../globals';\nimport { BaseProps } from '../../_types';\n\nconst { LARGE, MEDIUM } = BREAKPOINTS;\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { ELEMENT_NAME } = VARIABLES;\nconst { IS_THEME_LIGHT } = REFERENCES;\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_GRID = 'grid';\n\nexport const SOCIAL_COLUMN_WRAPPER = 'umd-footer-social-column_wrapper';\nconst SOCIAL_CONTAINER = 'umd-footer-social-container';\nconst SOCIAL_CONTAINER_WRAPPER = 'umd-footer-social-container_wrapper';\nconst SOCIAL_CONTAINER_HEADLINE = 'umd-footer-social-container_headline';\n\nconst IS_LAYOUT_GRID = `[${ATTRIBUTE_LAYOUT}=\"${LAYOUT_GRID}\"]`;\n\nconst OVERWRITE_GRID_CONTAINER = `.${SOCIAL_CONTAINER}${IS_LAYOUT_GRID}`;\nconst OVERWRITE_GRID_WRAPPER = `${OVERWRITE_GRID_CONTAINER} .${SOCIAL_CONTAINER_WRAPPER}`;\n\nconst OverwriteGridStyle = `\n  ${OVERWRITE_GRID_CONTAINER} {\n    flex-direction: column;\n    padding-left: 0;\n    align-items: flex-start;\n    margin-left: 0;\n  }\n\n  @media (min-width: ${LARGE}px) {\n    ${OVERWRITE_GRID_CONTAINER} {\n      align-items: center;\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    ${OVERWRITE_GRID_CONTAINER} > p {\n      align-self: center;\n    }\n  }\n\n  ${OVERWRITE_GRID_WRAPPER} {\n    grid-template-columns: repeat(3, 1fr);\n    margin-left: 0;\n    margin-top: ${token.spacing.sm};\n  }\n`;\n\nconst campaignOverwriteStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${SOCIAL_COLUMN_WRAPPER} .${CAMPAIGN_COLUMN_WRAPPER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${SOCIAL_COLUMN_WRAPPER} .${CAMPAIGN_COLUMN_WRAPPER} {\n      display: flex;\n      justify-content: flex-end;\n      margin-left: auto;\n    }\n  }\n`;\n\nconst themeOverwriteStyles = `\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT}  .${SOCIAL_CONTAINER_WRAPPER} a {\n    background-color: ${token.color.gray.light};\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a > *,\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a path {\n    fill: ${token.color.black} !important;\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT}  .${SOCIAL_CONTAINER_WRAPPER} a:hover {\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a:hover path {\n    fill: ${token.color.gray.light} !important;\n  }\n`;\n\n// prettier-ignore\nexport const SocialContainerStyles = `\n  .${SOCIAL_CONTAINER} {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    align-self: flex-start;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${SOCIAL_CONTAINER} {\n      justify-content: flex-end;\n      padding-left: ${token.spacing['2xl']};\n    }\n  }\n\n  .${SOCIAL_CONTAINER} > p {\n    align-self: flex-start;\n    padding-top: 3px;\n    font-weight: 700;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {\n    .${SOCIAL_COLUMN_WRAPPER} {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-column: 1 / span 2;\n      gap: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${SOCIAL_COLUMN_WRAPPER} {\n      margin-left: auto;\n    }\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-gap: ${token.spacing.xs};\n    margin-left: ${token.spacing.xs};\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER}[count=\"4\"] {\n    grid-template-columns: repeat(4, 1fr);\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} a {\n    background-color: ${token.color.gray.darker};\n    height: 32px;\n    width: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color .5s;\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} a > *,\n  .${SOCIAL_CONTAINER_WRAPPER} a path {\n    max-height: 20px !important;\n    fill: ${token.color.white} !important;\n    transition: fill .5s;\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} a:hover {\n    background-color: ${token.color.gray.light};\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} a:hover path {\n    fill: ${token.color.gray.dark} !important;\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${SOCIAL_CONTAINER_HEADLINE}`]: typography.elements.interativeMedium,\n    },\n  })}\n\n  ${campaignOverwriteStyles}\n  ${themeOverwriteStyles}\n  ${OverwriteGridStyle}\n`;\n\n// Enforce known social link types logos\nconst GetSocialIcon = ({ link }: { link: HTMLAnchorElement }) => {\n  const url = link.getAttribute('href') || null;\n\n  if (!url) return link;\n\n  if (url.match(/facebook.com/)) {\n    link.innerHTML = Utils.asset.social.FACEBOOK;\n  }\n\n  if (url.match(/x.com/)) {\n    link.innerHTML = Utils.asset.social.X;\n  }\n\n  if (url.match(/instagram.com/)) {\n    link.innerHTML = Utils.asset.social.INSTAGRAM;\n  }\n\n  if (url.match(/youtube.com/)) {\n    link.innerHTML = Utils.asset.social.YOUTUBE;\n  }\n\n  if (url.match(/twitter.com/)) {\n    link.innerHTML = Utils.asset.social.TWITTER;\n  }\n\n  if (url.match(/linkedin.com/)) {\n    link.innerHTML = Utils.asset.social.LINKEDIN;\n  }\n\n  if (url.match(/threads.net/)) {\n    link.innerHTML = Utils.asset.social.THREADS;\n  }\n\n  return link;\n};\n\ninterface SocialProps {\n  slotSocialLinks?: HTMLSlotElement;\n}\n\nconst CreateSocialRow = ({ slotSocialLinks }: SocialProps) => {\n  const container = document.createElement('div');\n  const linksWrapper = document.createElement('div');\n  const headline = document.createElement('p');\n  let socialLinks: HTMLAnchorElement[] = [];\n\n  if (slotSocialLinks) {\n    const socialLinksClone = slotSocialLinks.cloneNode(true) as HTMLSlotElement;\n    const slottedSocialLinks = Array.from(\n      socialLinksClone.querySelectorAll(`a`),\n    ) as HTMLAnchorElement[];\n    socialLinks = slottedSocialLinks;\n  }\n\n  // Enforce university default links if none are provided\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\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\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  socialLinks.forEach((link) =>\n    linksWrapper.appendChild(GetSocialIcon({ link })),\n  );\n\n  container.classList.add(SOCIAL_CONTAINER);\n  linksWrapper.classList.add(SOCIAL_CONTAINER_WRAPPER);\n  linksWrapper.setAttribute('count', `${socialLinks.length}`);\n\n  headline.classList.add(SOCIAL_CONTAINER_HEADLINE);\n  headline.innerText = 'Stay Connected';\n\n  container.appendChild(headline);\n  container.appendChild(linksWrapper);\n  if (socialLinks.length >= 4) {\n    container.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);\n  }\n\n  return container;\n};\n\nexport interface SocialCampaignColumnsProps extends BaseProps, SocialProps {}\n\nexport const createSocialCampaignColumns = (props: SocialCampaignColumnsProps) => {\n  const socialColumnWrapper = document.createElement('div');\n  const socialContainer = CreateSocialRow(props);\n  const campaignContainer = createCampaignRow(props);\n\n  socialColumnWrapper.classList.add(SOCIAL_COLUMN_WRAPPER);\n\n  socialColumnWrapper.appendChild(socialContainer);\n  socialColumnWrapper.appendChild(campaignContainer);\n\n  return socialColumnWrapper;\n};\n"],"names":["BREAKPOINTS","ELEMENTS","VARIABLES","REFERENCES","token","CAMPAIGN_COLUMN_WRAPPER","Utils.theme.convertJSSObjectToStyles","typography","Utils.asset.social.FACEBOOK","Utils.asset.social.X","Utils.asset.social.INSTAGRAM","Utils.asset.social.YOUTUBE","Utils.asset.social.TWITTER","Utils.asset.social.LINKEDIN","Utils.asset.social.THREADS","createCampaignRow"],"mappings":"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"}

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

@@ -0,0 +1,255 @@
+import { token, typography } from "@universityofmaryland/web-styles-library";
+import { FACEBOOK, X, INSTAGRAM, YOUTUBE, TWITTER, LINKEDIN, THREADS } from "../../../../utilities/assets/social.mjs";
+import { convertJSSObjectToStyles } from "../../../../utilities/theme/index.mjs";
+import { CAMPAIGN_COLUMN_WRAPPER, createCampaign } from "./campaign.mjs";
+import { BREAKPOINTS, ELEMENTS, REFERENCES, VARIABLES } from "../../globals.mjs";
+const { LARGE, MEDIUM } = BREAKPOINTS;
+const { ELEMENT_WRAPPER } = ELEMENTS;
+const { ELEMENT_NAME } = VARIABLES;
+const { IS_THEME_LIGHT } = REFERENCES;
+const ATTRIBUTE_LAYOUT = "layout";
+const LAYOUT_GRID = "grid";
+const SOCIAL_COLUMN_WRAPPER = "umd-footer-social-column_wrapper";
+const SOCIAL_CONTAINER = "umd-footer-social-container";
+const SOCIAL_CONTAINER_WRAPPER = "umd-footer-social-container_wrapper";
+const SOCIAL_CONTAINER_HEADLINE = "umd-footer-social-container_headline";
+const IS_LAYOUT_GRID = `[${ATTRIBUTE_LAYOUT}="${LAYOUT_GRID}"]`;
+const OVERWRITE_GRID_CONTAINER = `.${SOCIAL_CONTAINER}${IS_LAYOUT_GRID}`;
+const OVERWRITE_GRID_WRAPPER = `${OVERWRITE_GRID_CONTAINER} .${SOCIAL_CONTAINER_WRAPPER}`;
+const OverwriteGridStyle = `
+  ${OVERWRITE_GRID_CONTAINER} {
+    flex-direction: column;
+    padding-left: 0;
+    align-items: flex-start;
+    margin-left: 0;
+  }
+
+  @media (min-width: ${LARGE}px) {
+    ${OVERWRITE_GRID_CONTAINER} {
+      align-items: center;
+    }
+  }
+
+  @media (min-width: ${LARGE}px) {
+    ${OVERWRITE_GRID_CONTAINER} > p {
+      align-self: center;
+    }
+  }
+
+  ${OVERWRITE_GRID_WRAPPER} {
+    grid-template-columns: repeat(3, 1fr);
+    margin-left: 0;
+    margin-top: ${token.spacing.sm};
+  }
+`;
+const campaignOverwriteStyles = `
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    .${SOCIAL_COLUMN_WRAPPER} .${CAMPAIGN_COLUMN_WRAPPER} {
+      display: none;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${SOCIAL_COLUMN_WRAPPER} .${CAMPAIGN_COLUMN_WRAPPER} {
+      display: flex;
+      justify-content: flex-end;
+      margin-left: auto;
+    }
+  }
+`;
+const themeOverwriteStyles = `
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT}  .${SOCIAL_CONTAINER_WRAPPER} a {
+    background-color: ${token.color.gray.light};
+  }
+
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a > *,
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a path {
+    fill: ${token.color.black} !important;
+  }
+
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT}  .${SOCIAL_CONTAINER_WRAPPER} a:hover {
+    background-color: ${token.color.gray.dark};
+  }
+
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a:hover path {
+    fill: ${token.color.gray.light} !important;
+  }
+`;
+const SocialContainerStyles = `
+  .${SOCIAL_CONTAINER} {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    align-self: flex-start;
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${SOCIAL_CONTAINER} {
+      justify-content: flex-end;
+      padding-left: ${token.spacing["2xl"]};
+    }
+  }
+
+  .${SOCIAL_CONTAINER} > p {
+    align-self: flex-start;
+    padding-top: 3px;
+    font-weight: 700;
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {
+    .${SOCIAL_COLUMN_WRAPPER} {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-column: 1 / span 2;
+      gap: ${token.spacing.md};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${SOCIAL_COLUMN_WRAPPER} {
+      margin-left: auto;
+    }
+  }
+
+  .${SOCIAL_CONTAINER_WRAPPER} {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: ${token.spacing.xs};
+    margin-left: ${token.spacing.xs};
+  }
+
+  .${SOCIAL_CONTAINER_WRAPPER}[count="4"] {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .${SOCIAL_CONTAINER_WRAPPER} a {
+    background-color: ${token.color.gray.darker};
+    height: 32px;
+    width: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color .5s;
+  }
+
+  .${SOCIAL_CONTAINER_WRAPPER} a > *,
+  .${SOCIAL_CONTAINER_WRAPPER} a path {
+    max-height: 20px !important;
+    fill: ${token.color.white} !important;
+    transition: fill .5s;
+  }
+
+  .${SOCIAL_CONTAINER_WRAPPER} a:hover {
+    background-color: ${token.color.gray.light};
+  }
+
+  .${SOCIAL_CONTAINER_WRAPPER} a:hover path {
+    fill: ${token.color.gray.dark} !important;
+  }
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${SOCIAL_CONTAINER_HEADLINE}`]: typography.elements.interativeMedium
+  }
+})}
+
+  ${campaignOverwriteStyles}
+  ${themeOverwriteStyles}
+  ${OverwriteGridStyle}
+`;
+const GetSocialIcon = ({ link }) => {
+  const url = link.getAttribute("href") || null;
+  if (!url) return link;
+  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 = ({ slotSocialLinks }) => {
+  const container = document.createElement("div");
+  const linksWrapper = document.createElement("div");
+  const headline = document.createElement("p");
+  let socialLinks = [];
+  if (slotSocialLinks) {
+    const socialLinksClone = slotSocialLinks.cloneNode(true);
+    const slottedSocialLinks = Array.from(
+      socialLinksClone.querySelectorAll(`a`)
+    );
+    socialLinks = slottedSocialLinks;
+  }
+  if (socialLinks.length === 0) {
+    const socialLink = ({ url, label }) => {
+      const link = document.createElement("a");
+      link.setAttribute("href", url);
+      link.setAttribute("target", "_blank");
+      link.setAttribute("rel", "noopener noreferrer");
+      link.setAttribute("aria-label", label);
+      return link;
+    };
+    socialLinks.push(
+      socialLink({
+        url: "https://www.youtube.com/user/UMD2101",
+        label: "Link to the youtube channel for the University of Maryland"
+      })
+    );
+    socialLinks.push(
+      socialLink({
+        url: "https://www.facebook.com/UnivofMaryland",
+        label: "Link to the facebook page for the University of Maryland"
+      })
+    );
+    socialLinks.push(
+      socialLink({
+        url: "https://www.instagram.com/univofmaryland",
+        label: "Link to the instagram page for the University of Maryland"
+      })
+    );
+  }
+  socialLinks.forEach(
+    (link) => linksWrapper.appendChild(GetSocialIcon({ link }))
+  );
+  container.classList.add(SOCIAL_CONTAINER);
+  linksWrapper.classList.add(SOCIAL_CONTAINER_WRAPPER);
+  linksWrapper.setAttribute("count", `${socialLinks.length}`);
+  headline.classList.add(SOCIAL_CONTAINER_HEADLINE);
+  headline.innerText = "Stay Connected";
+  container.appendChild(headline);
+  container.appendChild(linksWrapper);
+  if (socialLinks.length >= 4) {
+    container.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);
+  }
+  return container;
+};
+const createSocialCampaignColumns = (props) => {
+  const socialColumnWrapper = document.createElement("div");
+  const socialContainer = CreateSocialRow(props);
+  const campaignContainer = createCampaign(props);
+  socialColumnWrapper.classList.add(SOCIAL_COLUMN_WRAPPER);
+  socialColumnWrapper.appendChild(socialContainer);
+  socialColumnWrapper.appendChild(campaignContainer);
+  return socialColumnWrapper;
+};
+export {
+  SOCIAL_COLUMN_WRAPPER,
+  SocialContainerStyles,
+  createSocialCampaignColumns
+};
+//# sourceMappingURL=social.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"social.mjs","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { createCampaign as createCampaignRow, CAMPAIGN_COLUMN_WRAPPER } from './campaign';\nimport { BREAKPOINTS, ELEMENTS, VARIABLES, REFERENCES } from '../../globals';\nimport { BaseProps } from '../../_types';\n\nconst { LARGE, MEDIUM } = BREAKPOINTS;\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { ELEMENT_NAME } = VARIABLES;\nconst { IS_THEME_LIGHT } = REFERENCES;\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_GRID = 'grid';\n\nexport const SOCIAL_COLUMN_WRAPPER = 'umd-footer-social-column_wrapper';\nconst SOCIAL_CONTAINER = 'umd-footer-social-container';\nconst SOCIAL_CONTAINER_WRAPPER = 'umd-footer-social-container_wrapper';\nconst SOCIAL_CONTAINER_HEADLINE = 'umd-footer-social-container_headline';\n\nconst IS_LAYOUT_GRID = `[${ATTRIBUTE_LAYOUT}=\"${LAYOUT_GRID}\"]`;\n\nconst OVERWRITE_GRID_CONTAINER = `.${SOCIAL_CONTAINER}${IS_LAYOUT_GRID}`;\nconst OVERWRITE_GRID_WRAPPER = `${OVERWRITE_GRID_CONTAINER} .${SOCIAL_CONTAINER_WRAPPER}`;\n\nconst OverwriteGridStyle = `\n  ${OVERWRITE_GRID_CONTAINER} {\n    flex-direction: column;\n    padding-left: 0;\n    align-items: flex-start;\n    margin-left: 0;\n  }\n\n  @media (min-width: ${LARGE}px) {\n    ${OVERWRITE_GRID_CONTAINER} {\n      align-items: center;\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    ${OVERWRITE_GRID_CONTAINER} > p {\n      align-self: center;\n    }\n  }\n\n  ${OVERWRITE_GRID_WRAPPER} {\n    grid-template-columns: repeat(3, 1fr);\n    margin-left: 0;\n    margin-top: ${token.spacing.sm};\n  }\n`;\n\nconst campaignOverwriteStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${SOCIAL_COLUMN_WRAPPER} .${CAMPAIGN_COLUMN_WRAPPER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${SOCIAL_COLUMN_WRAPPER} .${CAMPAIGN_COLUMN_WRAPPER} {\n      display: flex;\n      justify-content: flex-end;\n      margin-left: auto;\n    }\n  }\n`;\n\nconst themeOverwriteStyles = `\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT}  .${SOCIAL_CONTAINER_WRAPPER} a {\n    background-color: ${token.color.gray.light};\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a > *,\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a path {\n    fill: ${token.color.black} !important;\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT}  .${SOCIAL_CONTAINER_WRAPPER} a:hover {\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a:hover path {\n    fill: ${token.color.gray.light} !important;\n  }\n`;\n\n// prettier-ignore\nexport const SocialContainerStyles = `\n  .${SOCIAL_CONTAINER} {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    align-self: flex-start;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${SOCIAL_CONTAINER} {\n      justify-content: flex-end;\n      padding-left: ${token.spacing['2xl']};\n    }\n  }\n\n  .${SOCIAL_CONTAINER} > p {\n    align-self: flex-start;\n    padding-top: 3px;\n    font-weight: 700;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {\n    .${SOCIAL_COLUMN_WRAPPER} {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-column: 1 / span 2;\n      gap: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${SOCIAL_COLUMN_WRAPPER} {\n      margin-left: auto;\n    }\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-gap: ${token.spacing.xs};\n    margin-left: ${token.spacing.xs};\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER}[count=\"4\"] {\n    grid-template-columns: repeat(4, 1fr);\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} a {\n    background-color: ${token.color.gray.darker};\n    height: 32px;\n    width: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color .5s;\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} a > *,\n  .${SOCIAL_CONTAINER_WRAPPER} a path {\n    max-height: 20px !important;\n    fill: ${token.color.white} !important;\n    transition: fill .5s;\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} a:hover {\n    background-color: ${token.color.gray.light};\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} a:hover path {\n    fill: ${token.color.gray.dark} !important;\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${SOCIAL_CONTAINER_HEADLINE}`]: typography.elements.interativeMedium,\n    },\n  })}\n\n  ${campaignOverwriteStyles}\n  ${themeOverwriteStyles}\n  ${OverwriteGridStyle}\n`;\n\n// Enforce known social link types logos\nconst GetSocialIcon = ({ link }: { link: HTMLAnchorElement }) => {\n  const url = link.getAttribute('href') || null;\n\n  if (!url) return link;\n\n  if (url.match(/facebook.com/)) {\n    link.innerHTML = Utils.asset.social.FACEBOOK;\n  }\n\n  if (url.match(/x.com/)) {\n    link.innerHTML = Utils.asset.social.X;\n  }\n\n  if (url.match(/instagram.com/)) {\n    link.innerHTML = Utils.asset.social.INSTAGRAM;\n  }\n\n  if (url.match(/youtube.com/)) {\n    link.innerHTML = Utils.asset.social.YOUTUBE;\n  }\n\n  if (url.match(/twitter.com/)) {\n    link.innerHTML = Utils.asset.social.TWITTER;\n  }\n\n  if (url.match(/linkedin.com/)) {\n    link.innerHTML = Utils.asset.social.LINKEDIN;\n  }\n\n  if (url.match(/threads.net/)) {\n    link.innerHTML = Utils.asset.social.THREADS;\n  }\n\n  return link;\n};\n\ninterface SocialProps {\n  slotSocialLinks?: HTMLSlotElement;\n}\n\nconst CreateSocialRow = ({ slotSocialLinks }: SocialProps) => {\n  const container = document.createElement('div');\n  const linksWrapper = document.createElement('div');\n  const headline = document.createElement('p');\n  let socialLinks: HTMLAnchorElement[] = [];\n\n  if (slotSocialLinks) {\n    const socialLinksClone = slotSocialLinks.cloneNode(true) as HTMLSlotElement;\n    const slottedSocialLinks = Array.from(\n      socialLinksClone.querySelectorAll(`a`),\n    ) as HTMLAnchorElement[];\n    socialLinks = slottedSocialLinks;\n  }\n\n  // Enforce university default links if none are provided\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\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\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  socialLinks.forEach((link) =>\n    linksWrapper.appendChild(GetSocialIcon({ link })),\n  );\n\n  container.classList.add(SOCIAL_CONTAINER);\n  linksWrapper.classList.add(SOCIAL_CONTAINER_WRAPPER);\n  linksWrapper.setAttribute('count', `${socialLinks.length}`);\n\n  headline.classList.add(SOCIAL_CONTAINER_HEADLINE);\n  headline.innerText = 'Stay Connected';\n\n  container.appendChild(headline);\n  container.appendChild(linksWrapper);\n  if (socialLinks.length >= 4) {\n    container.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);\n  }\n\n  return container;\n};\n\nexport interface SocialCampaignColumnsProps extends BaseProps, SocialProps {}\n\nexport const createSocialCampaignColumns = (props: SocialCampaignColumnsProps) => {\n  const socialColumnWrapper = document.createElement('div');\n  const socialContainer = CreateSocialRow(props);\n  const campaignContainer = createCampaignRow(props);\n\n  socialColumnWrapper.classList.add(SOCIAL_COLUMN_WRAPPER);\n\n  socialColumnWrapper.appendChild(socialContainer);\n  socialColumnWrapper.appendChild(campaignContainer);\n\n  return socialColumnWrapper;\n};\n"],"names":["Utils.theme.convertJSSObjectToStyles","Utils.asset.social.FACEBOOK","Utils.asset.social.X","Utils.asset.social.INSTAGRAM","Utils.asset.social.YOUTUBE","Utils.asset.social.TWITTER","Utils.asset.social.LINKEDIN","Utils.asset.social.THREADS","createCampaignRow"],"mappings":"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"}