@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

package/dist/composite/footer/elements/main-section/row-links/link-columns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-columns.js","sources":["../../../../../../source/composite/footer/elements/main-section/row-links/link-columns.ts"],"sourcesContent":["import {\n  animation,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\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 HEADLINE_ATTRIBUTE = 'data-headline';\nconst HEADLINE_ATTRIBUTE_EMPTY = 'data-empty';\nconst LINK_TYPE = 'link';\nconst HEADLINE_TYPE = 'headline';\n\ntype ColumnRow = {\n  elmentType: string;\n  title: string;\n  url?: string;\n};\n\nconst ROW_LINKS_COLUMNS_CONTAINER = 'umd-footer-row-links-columns';\nconst ROW_LINKS_COLUMN_WRAPPER = 'umd-footer-row-links-column-wrapper';\nconst ROW_LINKS_COLUMN_HEADLINE = `link-column-headline`;\nconst ROW_LINKS_COLUMN_LINKS = `link-column-fonts`;\n\nconst COLUMN_ONE_DEFAULT_LINKS = [\n  {\n    elmentType: LINK_TYPE,\n    title: 'Careers',\n    url: 'https://ejobs.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Office of Civil Rights & Sexual Misconduct',\n    url: 'https://ocrsm.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'UMD Police Department',\n    url: 'https://www.umpd.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Public Records Request',\n    url: 'https://umd.edu/administration/public-information-request',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Report Fraud and Waste',\n    url: 'https://finance.umd.edu/ethics-integrity-and-compliance-reporting',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Policies and Procedures',\n    url: 'https://umd.edu/policies-and-procedures',\n  },\n];\n\nconst COLUMN_TWO_DEFAULT_LINKS = [\n  {\n    elmentType: HEADLINE_TYPE,\n    title: 'Information for',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Prospective Undergraduate Students',\n    url: 'https://admissions.umd.edu/',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Prospective Graduate Students',\n    url: 'https://gradschool.umd.edu/',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Parents & Families',\n    url: 'https://admissions.umd.edu/persona/parent-families',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Alumni',\n    url: 'https://alumni.umd.edu/',\n  },\n];\n\nconst COLUMN_THREE_DEFAULT_LINKS = [\n  {\n    elmentType: HEADLINE_TYPE,\n    title: 'Academics',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Academic Calendars',\n    url: 'https://provost.umd.edu/node/3876',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Course Catalogs',\n    url: 'https://academiccatalog.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Libraries',\n    url: 'https://www.lib.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Terp Portals',\n    url: 'https://testudo.umd.edu',\n  },\n];\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ROW_LINKS_COLUMN_HEADLINE}`]: typography.elements.interativeMedium,\n    },\n  })}\n\n  .${ROW_LINKS_COLUMN_HEADLINE} {\n    margin-bottom: ${token.spacing.sm};\n    font-weight: 700;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LINKS_COLUMN_HEADLINE}[${HEADLINE_ATTRIBUTE_EMPTY}=\"true\"] {\n      display: none;\n    }\n  }\n`;\n\n// prettier-ignore\nconst LinkStyles = `\n  .${ROW_LINKS_COLUMN_LINKS}:not(:last-child) {\n    margin-bottom: ${token.spacing.sm};\n  }\n\n  .${ROW_LINKS_COLUMN_LINKS} > * {\n    margin-bottom: ${token.spacing.sm};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ROW_LINKS_COLUMN_LINKS} a`]: typography.sans.smaller,\n    },\n  })}\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ROW_LINKS_COLUMN_LINKS} a`]:\n      animation.line.slideUnderWhite\n    },\n  })}\n\n  .${ROW_LINKS_COLUMN_LINKS} a,\n  .${ROW_LINKS_COLUMN_LINKS} span {\n    color: ${token.color.gray.light};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LINKS_COLUMN_LINKS} a`]:\n      animation.line.slideUnderBlack\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ColumnWrapper = `\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER} {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 0 ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDIUM - 1}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER}:not(:last-child) {\n      margin-bottom: ${token.spacing.lg};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER} {\n      padding-right: ${token.spacing.xs};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER}:not(:first-child) {\n      margin-left: ${token.spacing.lg};\n      padding-left: ${token.spacing.lg};\n      border-left: 1px solid ${token.color.gray.dark};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER} > p {\n      grid-column: 1 / span 2;\n    }\n  }\n`\n\n// prettier-ignore\nexport const LinkColumnStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LINKS_COLUMNS_CONTAINER} {\n      padding-top: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMNS_CONTAINER} {\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr;\n    }\n  }\n\n  ${ColumnWrapper}\n  ${HeadlineStyles}\n  ${LinkStyles}\n`;\n\nconst CreateDefaultColumn = ({\n  defaultContent,\n}: {\n  defaultContent: ColumnRow[];\n}) => {\n  const container = document.createElement('div');\n\n  container.classList.add(ROW_LINKS_COLUMN_WRAPPER);\n\n  defaultContent.forEach((row) => {\n    if (row.elmentType === LINK_TYPE) {\n      if (row.url) {\n        const wrapper = document.createElement('div');\n        const link = document.createElement('a');\n        const span = document.createElement('span');\n\n        span.textContent = row.title;\n        link.appendChild(span);\n\n        link.href = row.url;\n        link.target = '_blank';\n        link.rel = 'noopener noreferrer';\n\n        wrapper.classList.add(ROW_LINKS_COLUMN_LINKS);\n        wrapper.appendChild(link);\n        container.appendChild(wrapper);\n      }\n    } else if (row.elmentType === HEADLINE_TYPE) {\n      const headline = document.createElement('p');\n      headline.textContent = row.title;\n      headline.classList.add(ROW_LINKS_COLUMN_HEADLINE);\n      container.appendChild(headline);\n    }\n  });\n\n  return container;\n};\n\nconst CreateSlotColumn = ({\n  slot,\n  hasHeadlines,\n  isColumnOne,\n}: {\n  slot: HTMLElement;\n  hasHeadlines: boolean;\n  isColumnOne: boolean;\n}) => {\n  const container = document.createElement('div');\n\n  container.classList.add(ROW_LINKS_COLUMN_WRAPPER);\n\n  const wrapper = document.createElement('div');\n  const links = Array.from(slot.querySelectorAll('a')).map((link) => {\n    const linkWrapper = document.createElement('div');\n    linkWrapper.classList.add(ROW_LINKS_COLUMN_LINKS);\n    Utils.markup.modify.animationLinkSpan({ element: link });\n    linkWrapper.appendChild(link);\n    return linkWrapper;\n  });\n\n  if (hasHeadlines) {\n    const headline = slot.getAttribute(HEADLINE_ATTRIBUTE) as string;\n    const headlineElement = document.createElement('p');\n    headlineElement.classList.add(ROW_LINKS_COLUMN_HEADLINE);\n    headlineElement.innerHTML = headline;\n\n    if (!headline && !isColumnOne) {\n      headlineElement.setAttribute(HEADLINE_ATTRIBUTE_EMPTY, 'true');\n      wrapper.appendChild(headlineElement);\n    }\n\n    if (headline) {\n      wrapper.appendChild(headlineElement);\n    }\n  }\n\n  links.forEach((link) => {\n    wrapper.appendChild(link);\n  });\n\n  container.appendChild(wrapper);\n\n  return container;\n};\n\nexport interface slotColumnsProps {\n  slotColumns?: HTMLSlotElement[];\n}\n\nexport const createLinkColumns = (props: slotColumnsProps) => {\n  const { slotColumns } = props;\n  const container = document.createElement('div');\n\n  if (slotColumns) {\n    const hasHeadlines = slotColumns.some((slot) =>\n      slot.hasAttribute(HEADLINE_ATTRIBUTE),\n    );\n\n    slotColumns.forEach((slot, index) => {\n      const slotToAppend = CreateSlotColumn({\n        slot,\n        hasHeadlines,\n        isColumnOne: index === 0,\n      });\n      if (slotToAppend) container.appendChild(slotToAppend);\n    });\n\n    if (hasHeadlines) {\n      setTimeout(() => {\n        // To Do - refactor to load event\n        const headlines = Array.from(\n          container.querySelectorAll(`.${ROW_LINKS_COLUMN_HEADLINE}`),\n        ) as HTMLDivElement[];\n\n        const renderedHeadlinesSize = headlines.reduce((acc, headline) => {\n          return headline.offsetHeight > acc ? headline.offsetHeight : acc;\n        }, 10);\n\n        headlines.forEach((headline) => {\n          headline.style.height = `${renderedHeadlinesSize}px`;\n        });\n      }, 200);\n    }\n  } else {\n    container.appendChild(\n      CreateDefaultColumn({ defaultContent: COLUMN_ONE_DEFAULT_LINKS }),\n    );\n    container.appendChild(\n      CreateDefaultColumn({ defaultContent: COLUMN_TWO_DEFAULT_LINKS }),\n    );\n    container.appendChild(\n      CreateDefaultColumn({ defaultContent: COLUMN_THREE_DEFAULT_LINKS }),\n    );\n  }\n\n  container.classList.add(ROW_LINKS_COLUMNS_CONTAINER);\n\n  return container;\n};\n"],"names":["BREAKPOINTS","ELEMENTS","VARIABLES","REFERENCES","Utils.theme.convertJSSObjectToStyles","typography","token","animation","Utils.markup.modify.animationLinkSpan","index"],"mappings":"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"}

package/dist/composite/footer/elements/main-section/row-links/link-columns.mjs

@@ -0,0 +1,313 @@
+import { token, typography, animation } from "@universityofmaryland/web-styles-library";
+import { animationLinkSpan } from "../../../../../utilities/markup/modify.mjs";
+import { convertJSSObjectToStyles } from "../../../../../utilities/theme/index.mjs";
+import { VARIABLES, ELEMENTS, REFERENCES, BREAKPOINTS } from "../../../globals.mjs";
+const { MEDIUM, LARGE } = BREAKPOINTS;
+const { ELEMENT_WRAPPER } = ELEMENTS;
+const { ELEMENT_NAME } = VARIABLES;
+const { IS_THEME_LIGHT } = REFERENCES;
+const HEADLINE_ATTRIBUTE = "data-headline";
+const HEADLINE_ATTRIBUTE_EMPTY = "data-empty";
+const LINK_TYPE = "link";
+const HEADLINE_TYPE = "headline";
+const ROW_LINKS_COLUMNS_CONTAINER = "umd-footer-row-links-columns";
+const ROW_LINKS_COLUMN_WRAPPER = "umd-footer-row-links-column-wrapper";
+const ROW_LINKS_COLUMN_HEADLINE = `link-column-headline`;
+const ROW_LINKS_COLUMN_LINKS = `link-column-fonts`;
+const COLUMN_ONE_DEFAULT_LINKS = [
+  {
+    elmentType: LINK_TYPE,
+    title: "Careers",
+    url: "https://ejobs.umd.edu"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Office of Civil Rights & Sexual Misconduct",
+    url: "https://ocrsm.umd.edu"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "UMD Police Department",
+    url: "https://www.umpd.umd.edu"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Public Records Request",
+    url: "https://umd.edu/administration/public-information-request"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Report Fraud and Waste",
+    url: "https://finance.umd.edu/ethics-integrity-and-compliance-reporting"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Policies and Procedures",
+    url: "https://umd.edu/policies-and-procedures"
+  }
+];
+const COLUMN_TWO_DEFAULT_LINKS = [
+  {
+    elmentType: HEADLINE_TYPE,
+    title: "Information for"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Prospective Undergraduate Students",
+    url: "https://admissions.umd.edu/"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Prospective Graduate Students",
+    url: "https://gradschool.umd.edu/"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Parents & Families",
+    url: "https://admissions.umd.edu/persona/parent-families"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Alumni",
+    url: "https://alumni.umd.edu/"
+  }
+];
+const COLUMN_THREE_DEFAULT_LINKS = [
+  {
+    elmentType: HEADLINE_TYPE,
+    title: "Academics"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Academic Calendars",
+    url: "https://provost.umd.edu/node/3876"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Course Catalogs",
+    url: "https://academiccatalog.umd.edu"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Libraries",
+    url: "https://www.lib.umd.edu"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Terp Portals",
+    url: "https://testudo.umd.edu"
+  }
+];
+const HeadlineStyles = `
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ROW_LINKS_COLUMN_HEADLINE}`]: typography.elements.interativeMedium
+  }
+})}
+
+  .${ROW_LINKS_COLUMN_HEADLINE} {
+    margin-bottom: ${token.spacing.sm};
+    font-weight: 700;
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    .${ROW_LINKS_COLUMN_HEADLINE}[${HEADLINE_ATTRIBUTE_EMPTY}="true"] {
+      display: none;
+    }
+  }
+`;
+const LinkStyles = `
+  .${ROW_LINKS_COLUMN_LINKS}:not(:last-child) {
+    margin-bottom: ${token.spacing.sm};
+  }
+
+  .${ROW_LINKS_COLUMN_LINKS} > * {
+    margin-bottom: ${token.spacing.sm};
+  }
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ROW_LINKS_COLUMN_LINKS} a`]: typography.sans.smaller
+  }
+})}
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ROW_LINKS_COLUMN_LINKS} a`]: animation.line.slideUnderWhite
+  }
+})}
+
+  .${ROW_LINKS_COLUMN_LINKS} a,
+  .${ROW_LINKS_COLUMN_LINKS} span {
+    color: ${token.color.gray.light};
+  }
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LINKS_COLUMN_LINKS} a`]: animation.line.slideUnderBlack
+  }
+})}
+`;
+const ColumnWrapper = `
+  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {
+    .${ROW_LINKS_COLUMN_WRAPPER} {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0 ${token.spacing.md};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${MEDIUM - 1}px) {
+    .${ROW_LINKS_COLUMN_WRAPPER}:not(:last-child) {
+      margin-bottom: ${token.spacing.lg};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${ROW_LINKS_COLUMN_WRAPPER} {
+      padding-right: ${token.spacing.xs};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${ROW_LINKS_COLUMN_WRAPPER}:not(:first-child) {
+      margin-left: ${token.spacing.lg};
+      padding-left: ${token.spacing.lg};
+      border-left: 1px solid ${token.color.gray.dark};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {
+    .${ROW_LINKS_COLUMN_WRAPPER} > p {
+      grid-column: 1 / span 2;
+    }
+  }
+`;
+const LinkColumnStyles = `
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    .${ROW_LINKS_COLUMNS_CONTAINER} {
+      padding-top: ${token.spacing.md};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${ROW_LINKS_COLUMNS_CONTAINER} {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+
+  ${ColumnWrapper}
+  ${HeadlineStyles}
+  ${LinkStyles}
+`;
+const CreateDefaultColumn = ({
+  defaultContent
+}) => {
+  const container = document.createElement("div");
+  container.classList.add(ROW_LINKS_COLUMN_WRAPPER);
+  defaultContent.forEach((row) => {
+    if (row.elmentType === LINK_TYPE) {
+      if (row.url) {
+        const wrapper = document.createElement("div");
+        const link = document.createElement("a");
+        const span = document.createElement("span");
+        span.textContent = row.title;
+        link.appendChild(span);
+        link.href = row.url;
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+        wrapper.classList.add(ROW_LINKS_COLUMN_LINKS);
+        wrapper.appendChild(link);
+        container.appendChild(wrapper);
+      }
+    } else if (row.elmentType === HEADLINE_TYPE) {
+      const headline = document.createElement("p");
+      headline.textContent = row.title;
+      headline.classList.add(ROW_LINKS_COLUMN_HEADLINE);
+      container.appendChild(headline);
+    }
+  });
+  return container;
+};
+const CreateSlotColumn = ({
+  slot,
+  hasHeadlines,
+  isColumnOne
+}) => {
+  const container = document.createElement("div");
+  container.classList.add(ROW_LINKS_COLUMN_WRAPPER);
+  const wrapper = document.createElement("div");
+  const links = Array.from(slot.querySelectorAll("a")).map((link) => {
+    const linkWrapper = document.createElement("div");
+    linkWrapper.classList.add(ROW_LINKS_COLUMN_LINKS);
+    animationLinkSpan({ element: link });
+    linkWrapper.appendChild(link);
+    return linkWrapper;
+  });
+  if (hasHeadlines) {
+    const headline = slot.getAttribute(HEADLINE_ATTRIBUTE);
+    const headlineElement = document.createElement("p");
+    headlineElement.classList.add(ROW_LINKS_COLUMN_HEADLINE);
+    headlineElement.innerHTML = headline;
+    if (!headline && !isColumnOne) {
+      headlineElement.setAttribute(HEADLINE_ATTRIBUTE_EMPTY, "true");
+      wrapper.appendChild(headlineElement);
+    }
+    if (headline) {
+      wrapper.appendChild(headlineElement);
+    }
+  }
+  links.forEach((link) => {
+    wrapper.appendChild(link);
+  });
+  container.appendChild(wrapper);
+  return container;
+};
+const createLinkColumns = (props) => {
+  const { slotColumns } = props;
+  const container = document.createElement("div");
+  if (slotColumns) {
+    const hasHeadlines = slotColumns.some(
+      (slot) => slot.hasAttribute(HEADLINE_ATTRIBUTE)
+    );
+    slotColumns.forEach((slot, index) => {
+      const slotToAppend = CreateSlotColumn({
+        slot,
+        hasHeadlines,
+        isColumnOne: index === 0
+      });
+      if (slotToAppend) container.appendChild(slotToAppend);
+    });
+    if (hasHeadlines) {
+      setTimeout(() => {
+        const headlines = Array.from(
+          container.querySelectorAll(`.${ROW_LINKS_COLUMN_HEADLINE}`)
+        );
+        const renderedHeadlinesSize = headlines.reduce((acc, headline) => {
+          return headline.offsetHeight > acc ? headline.offsetHeight : acc;
+        }, 10);
+        headlines.forEach((headline) => {
+          headline.style.height = `${renderedHeadlinesSize}px`;
+        });
+      }, 200);
+    }
+  } else {
+    container.appendChild(
+      CreateDefaultColumn({ defaultContent: COLUMN_ONE_DEFAULT_LINKS })
+    );
+    container.appendChild(
+      CreateDefaultColumn({ defaultContent: COLUMN_TWO_DEFAULT_LINKS })
+    );
+    container.appendChild(
+      CreateDefaultColumn({ defaultContent: COLUMN_THREE_DEFAULT_LINKS })
+    );
+  }
+  container.classList.add(ROW_LINKS_COLUMNS_CONTAINER);
+  return container;
+};
+export {
+  LinkColumnStyles,
+  createLinkColumns
+};
+//# sourceMappingURL=link-columns.mjs.map

package/dist/composite/footer/elements/main-section/row-links/link-columns.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-columns.mjs","sources":["../../../../../../source/composite/footer/elements/main-section/row-links/link-columns.ts"],"sourcesContent":["import {\n  animation,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\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 HEADLINE_ATTRIBUTE = 'data-headline';\nconst HEADLINE_ATTRIBUTE_EMPTY = 'data-empty';\nconst LINK_TYPE = 'link';\nconst HEADLINE_TYPE = 'headline';\n\ntype ColumnRow = {\n  elmentType: string;\n  title: string;\n  url?: string;\n};\n\nconst ROW_LINKS_COLUMNS_CONTAINER = 'umd-footer-row-links-columns';\nconst ROW_LINKS_COLUMN_WRAPPER = 'umd-footer-row-links-column-wrapper';\nconst ROW_LINKS_COLUMN_HEADLINE = `link-column-headline`;\nconst ROW_LINKS_COLUMN_LINKS = `link-column-fonts`;\n\nconst COLUMN_ONE_DEFAULT_LINKS = [\n  {\n    elmentType: LINK_TYPE,\n    title: 'Careers',\n    url: 'https://ejobs.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Office of Civil Rights & Sexual Misconduct',\n    url: 'https://ocrsm.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'UMD Police Department',\n    url: 'https://www.umpd.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Public Records Request',\n    url: 'https://umd.edu/administration/public-information-request',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Report Fraud and Waste',\n    url: 'https://finance.umd.edu/ethics-integrity-and-compliance-reporting',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Policies and Procedures',\n    url: 'https://umd.edu/policies-and-procedures',\n  },\n];\n\nconst COLUMN_TWO_DEFAULT_LINKS = [\n  {\n    elmentType: HEADLINE_TYPE,\n    title: 'Information for',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Prospective Undergraduate Students',\n    url: 'https://admissions.umd.edu/',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Prospective Graduate Students',\n    url: 'https://gradschool.umd.edu/',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Parents & Families',\n    url: 'https://admissions.umd.edu/persona/parent-families',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Alumni',\n    url: 'https://alumni.umd.edu/',\n  },\n];\n\nconst COLUMN_THREE_DEFAULT_LINKS = [\n  {\n    elmentType: HEADLINE_TYPE,\n    title: 'Academics',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Academic Calendars',\n    url: 'https://provost.umd.edu/node/3876',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Course Catalogs',\n    url: 'https://academiccatalog.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Libraries',\n    url: 'https://www.lib.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Terp Portals',\n    url: 'https://testudo.umd.edu',\n  },\n];\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ROW_LINKS_COLUMN_HEADLINE}`]: typography.elements.interativeMedium,\n    },\n  })}\n\n  .${ROW_LINKS_COLUMN_HEADLINE} {\n    margin-bottom: ${token.spacing.sm};\n    font-weight: 700;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LINKS_COLUMN_HEADLINE}[${HEADLINE_ATTRIBUTE_EMPTY}=\"true\"] {\n      display: none;\n    }\n  }\n`;\n\n// prettier-ignore\nconst LinkStyles = `\n  .${ROW_LINKS_COLUMN_LINKS}:not(:last-child) {\n    margin-bottom: ${token.spacing.sm};\n  }\n\n  .${ROW_LINKS_COLUMN_LINKS} > * {\n    margin-bottom: ${token.spacing.sm};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ROW_LINKS_COLUMN_LINKS} a`]: typography.sans.smaller,\n    },\n  })}\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ROW_LINKS_COLUMN_LINKS} a`]:\n      animation.line.slideUnderWhite\n    },\n  })}\n\n  .${ROW_LINKS_COLUMN_LINKS} a,\n  .${ROW_LINKS_COLUMN_LINKS} span {\n    color: ${token.color.gray.light};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LINKS_COLUMN_LINKS} a`]:\n      animation.line.slideUnderBlack\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ColumnWrapper = `\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER} {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 0 ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDIUM - 1}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER}:not(:last-child) {\n      margin-bottom: ${token.spacing.lg};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER} {\n      padding-right: ${token.spacing.xs};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER}:not(:first-child) {\n      margin-left: ${token.spacing.lg};\n      padding-left: ${token.spacing.lg};\n      border-left: 1px solid ${token.color.gray.dark};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER} > p {\n      grid-column: 1 / span 2;\n    }\n  }\n`\n\n// prettier-ignore\nexport const LinkColumnStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LINKS_COLUMNS_CONTAINER} {\n      padding-top: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMNS_CONTAINER} {\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr;\n    }\n  }\n\n  ${ColumnWrapper}\n  ${HeadlineStyles}\n  ${LinkStyles}\n`;\n\nconst CreateDefaultColumn = ({\n  defaultContent,\n}: {\n  defaultContent: ColumnRow[];\n}) => {\n  const container = document.createElement('div');\n\n  container.classList.add(ROW_LINKS_COLUMN_WRAPPER);\n\n  defaultContent.forEach((row) => {\n    if (row.elmentType === LINK_TYPE) {\n      if (row.url) {\n        const wrapper = document.createElement('div');\n        const link = document.createElement('a');\n        const span = document.createElement('span');\n\n        span.textContent = row.title;\n        link.appendChild(span);\n\n        link.href = row.url;\n        link.target = '_blank';\n        link.rel = 'noopener noreferrer';\n\n        wrapper.classList.add(ROW_LINKS_COLUMN_LINKS);\n        wrapper.appendChild(link);\n        container.appendChild(wrapper);\n      }\n    } else if (row.elmentType === HEADLINE_TYPE) {\n      const headline = document.createElement('p');\n      headline.textContent = row.title;\n      headline.classList.add(ROW_LINKS_COLUMN_HEADLINE);\n      container.appendChild(headline);\n    }\n  });\n\n  return container;\n};\n\nconst CreateSlotColumn = ({\n  slot,\n  hasHeadlines,\n  isColumnOne,\n}: {\n  slot: HTMLElement;\n  hasHeadlines: boolean;\n  isColumnOne: boolean;\n}) => {\n  const container = document.createElement('div');\n\n  container.classList.add(ROW_LINKS_COLUMN_WRAPPER);\n\n  const wrapper = document.createElement('div');\n  const links = Array.from(slot.querySelectorAll('a')).map((link) => {\n    const linkWrapper = document.createElement('div');\n    linkWrapper.classList.add(ROW_LINKS_COLUMN_LINKS);\n    Utils.markup.modify.animationLinkSpan({ element: link });\n    linkWrapper.appendChild(link);\n    return linkWrapper;\n  });\n\n  if (hasHeadlines) {\n    const headline = slot.getAttribute(HEADLINE_ATTRIBUTE) as string;\n    const headlineElement = document.createElement('p');\n    headlineElement.classList.add(ROW_LINKS_COLUMN_HEADLINE);\n    headlineElement.innerHTML = headline;\n\n    if (!headline && !isColumnOne) {\n      headlineElement.setAttribute(HEADLINE_ATTRIBUTE_EMPTY, 'true');\n      wrapper.appendChild(headlineElement);\n    }\n\n    if (headline) {\n      wrapper.appendChild(headlineElement);\n    }\n  }\n\n  links.forEach((link) => {\n    wrapper.appendChild(link);\n  });\n\n  container.appendChild(wrapper);\n\n  return container;\n};\n\nexport interface slotColumnsProps {\n  slotColumns?: HTMLSlotElement[];\n}\n\nexport const createLinkColumns = (props: slotColumnsProps) => {\n  const { slotColumns } = props;\n  const container = document.createElement('div');\n\n  if (slotColumns) {\n    const hasHeadlines = slotColumns.some((slot) =>\n      slot.hasAttribute(HEADLINE_ATTRIBUTE),\n    );\n\n    slotColumns.forEach((slot, index) => {\n      const slotToAppend = CreateSlotColumn({\n        slot,\n        hasHeadlines,\n        isColumnOne: index === 0,\n      });\n      if (slotToAppend) container.appendChild(slotToAppend);\n    });\n\n    if (hasHeadlines) {\n      setTimeout(() => {\n        // To Do - refactor to load event\n        const headlines = Array.from(\n          container.querySelectorAll(`.${ROW_LINKS_COLUMN_HEADLINE}`),\n        ) as HTMLDivElement[];\n\n        const renderedHeadlinesSize = headlines.reduce((acc, headline) => {\n          return headline.offsetHeight > acc ? headline.offsetHeight : acc;\n        }, 10);\n\n        headlines.forEach((headline) => {\n          headline.style.height = `${renderedHeadlinesSize}px`;\n        });\n      }, 200);\n    }\n  } else {\n    container.appendChild(\n      CreateDefaultColumn({ defaultContent: COLUMN_ONE_DEFAULT_LINKS }),\n    );\n    container.appendChild(\n      CreateDefaultColumn({ defaultContent: COLUMN_TWO_DEFAULT_LINKS }),\n    );\n    container.appendChild(\n      CreateDefaultColumn({ defaultContent: COLUMN_THREE_DEFAULT_LINKS }),\n    );\n  }\n\n  container.classList.add(ROW_LINKS_COLUMNS_CONTAINER);\n\n  return container;\n};\n"],"names":["Utils.theme.convertJSSObjectToStyles","Utils.markup.modify.animationLinkSpan"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { type SocialCampaignColumnsProps } from '../social';
+import { SocialCampaignColumnsProps } from '../social';
 export declare const ContactContainerStyles: string;
 interface HeadlineProps {
     slotHeadline: HTMLSlotElement;
@@ -11,6 +11,6 @@ interface LinksProps {
 }
 export interface ContactProps extends SocialCampaignColumnsProps, AddressProps, HeadlineProps, LinksProps {
 }
-declare const _default: (props: ContactProps) => HTMLDivElement;
-export default _default;
+export declare const createContact: (props: ContactProps) => HTMLDivElement;
+export {};
 //# sourceMappingURL=contact.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"contact.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/contact.ts"],"names":[],"mappings":"AAMA,OAAoC,EAElC,KAAK,0BAA0B,EAChC,MAAM,WAAW,CAAC;AA6JnB,eAAO,MAAM,sBAAsB,QAyBlC,CAAC;AAYF,UAAU,aAAa;IACrB,YAAY,EAAE,eAAe,CAAC;CAC/B;AAkBD,UAAU,YAAY;IACpB,WAAW,EAAE,eAAe,CAAC;CAC9B;AAmBD,UAAU,UAAU;IAClB,gBAAgB,EAAE,eAAe,CAAC;CACnC;AAED,MAAM,WAAW,YACf,SAAQ,0BAA0B,EAChC,YAAY,EACZ,aAAa,EACb,UAAU;CAAG;gCAEM,YAAY;AAAnC,wBA6CE"}
+{"version":3,"file":"contact.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/contact.ts"],"names":[],"mappings":"AAMA,OAAO,EAGL,KAAK,0BAA0B,EAChC,MAAM,WAAW,CAAC;AA6JnB,eAAO,MAAM,sBAAsB,QAyBlC,CAAC;AAYF,UAAU,aAAa;IACrB,YAAY,EAAE,eAAe,CAAC;CAC/B;AAkBD,UAAU,YAAY;IACpB,WAAW,EAAE,eAAe,CAAC;CAC9B;AAmBD,UAAU,UAAU;IAClB,gBAAgB,EAAE,eAAe,CAAC;CACnC;AAED,MAAM,WAAW,YACf,SAAQ,0BAA0B,EAChC,YAAY,EACZ,aAAa,EACb,UAAU;CAAG;AAEjB,eAAO,MAAM,aAAa,GAAI,OAAO,YAAY,mBA6ChD,CAAC"}

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

@@ -0,0 +1,243 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+const create = require("../../../../../utilities/markup/create.js");
+const modify = require("../../../../../utilities/markup/modify.js");
+const index = require("../../../../../utilities/theme/index.js");
+const social = require("../social.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 } = globals.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"
+};
+const DEFAULT_ADDRESS_TITLE = "Office of Marketing and Communications";
+const DEFAULT_ADDRESS_ONE = "2101 Turner Hall";
+const DEFAULT_ADDRESS_TWO = "College Park, MD 20742";
+const DEFAULT_EMAIL = {
+  url: "mailto:omc@umd.edu",
+  title: "omc@umd.edu",
+  label: "Email: Office of the marketing and communications at omc@umd.edu"
+};
+const DEFAULT_PHONE = {
+  url: "tel:3014051000",
+  title: "301.405.1000",
+  label: "Call: 301-405-1000"
+};
+const socialOverwriteStyles = `
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${CONTACT_CONTAINER} .${social.SOCIAL_COLUMN_WRAPPER} {
+      display: none;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    .${CONTACT_CONTAINER} .${social.SOCIAL_COLUMN_WRAPPER} {
+      margin-top: ${Styles.token.spacing.md};
+    }
+  }
+`;
+const HeadlineStyles = `
+  .${CONTACT_LIST_HEADLINE} {
+    margin-bottom: ${Styles.token.spacing.min};
+    color: ${Styles.token.color.white};
+  }
+
+  .${CONTACT_LIST_HEADLINE} * {
+    font-weight: 700;
+    color: ${Styles.token.color.white};
+  }
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${CONTACT_LIST_HEADLINE} a`]: Styles.animation.line.slideUnderWhite
+  }
+})}
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${CONTACT_LIST_HEADLINE}`]: Styles.typography.elements.interativeMedium
+  }
+})}
+
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${CONTACT_LIST_HEADLINE},
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${CONTACT_LIST_HEADLINE} * {
+    color: ${Styles.token.color.black};
+  }
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${CONTACT_LIST_HEADLINE} a`]: Styles.animation.line.slideUnderBlack
+  }
+})}
+`;
+const AddressStyles = `
+  .${CONTACT_LIST_ADDRESS} + * {
+    margin-top: 2px;
+  }
+
+  .${CONTACT_LIST_ADDRESS} * {
+    display: block;
+  }
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${CONTACT_LIST_ADDRESS} *`]: Styles.typography.sans.small
+  }
+})}
+`;
+const LinkListStyles = `
+  .${CONTACT_LINKS_LIST} {
+    display: flex;
+  }
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${CONTACT_LINKS_LIST} *`]: Styles.typography.sans.small
+  }
+})}
+
+  .${CONTACT_LINKS_LIST} a {
+    display: block;
+  }
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${CONTACT_LINKS_LIST} a`]: Styles.animation.line.slideUnderWhite
+  }
+})}
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${CONTACT_LINKS_LIST} a`]: Styles.animation.line.slideUnderBlack
+  }
+})}
+
+  .${CONTACT_LINKS_LIST} a:not(:first-child) {
+    position: relative;
+    margin-left: ${Styles.token.spacing.min};
+    padding-left: ${Styles.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: ${Styles.token.color.white};
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 0;
+  }
+
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} a:not(:first-child):before {
+    background-color: ${Styles.token.color.black};
+  }
+`;
+const ContactContainerStyles = `
+  .${CONTACT_CONTAINER} {
+    background-color: currnetColor;
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${MEDIUM - 1}px) {
+    .${CONTACT_CONTAINER} {
+      padding-top: ${Styles.token.spacing["md"]};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${CONTACT_CONTAINER} {
+      padding-left: ${Styles.token.spacing["2xl"]};
+    }
+  }
+
+  .${CONTACT_CONTAINER} p {
+    line-height: 1.4em;
+  }
+
+  ${HeadlineStyles}
+  ${AddressStyles}
+  ${LinkListStyles}
+  ${socialOverwriteStyles}
+`;
+const createDefaultHeadline = () => {
+  const headline = document.createElement("p");
+  const headlineLink = create.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} `;
+  address.appendChild(addressParagraphOne);
+  address.appendChild(addressParagraphTwo);
+  return address;
+};
+const createAddress = ({ slotAddress }) => {
+  if (slotAddress) {
+    slotAddress.classList.add(CONTACT_LIST_ADDRESS);
+  }
+  return slotAddress;
+};
+const createDefaultLinks = () => {
+  const contactList = document.createElement("p");
+  contactList.classList.add(CONTACT_LINKS_LIST);
+  contactList.appendChild(create.linkWithSpan(DEFAULT_EMAIL));
+  contactList.appendChild(create.linkWithSpan(DEFAULT_PHONE));
+  return contactList;
+};
+const createContact = (props) => {
+  const { slotAddress, slotHeadline, slotContentLinks } = props;
+  const contactContainer = document.createElement("div");
+  const socialContainer = social.createSocialCampaignColumns(props);
+  const hasSlot = slotAddress || slotHeadline || slotContentLinks;
+  const makeContactSlot = () => {
+    const address = createAddress({ slotAddress });
+    if (slotHeadline) {
+      modify.animationLinkSpan({
+        element: slotHeadline
+      });
+      slotHeadline.classList.add(CONTACT_LIST_HEADLINE);
+      contactContainer.appendChild(slotHeadline);
+    }
+    if (address) {
+      contactContainer.appendChild(address);
+    }
+    if (slotContentLinks) {
+      slotContentLinks.classList.add(CONTACT_LINKS_LIST);
+      contactContainer.appendChild(slotContentLinks);
+    }
+  };
+  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;
+};
+exports.ContactContainerStyles = ContactContainerStyles;
+exports.createContact = createContact;
+//# sourceMappingURL=contact.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contact.js","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":["BREAKPOINTS","ELEMENTS","VARIABLES","REFERENCES","SOCIAL_COLUMN_WRAPPER","token","Utils.theme.convertJSSObjectToStyles","animation","typography","Utils.markup.create.linkWithSpan","createSocialCampaignColumns","Utils.markup.modify.animationLinkSpan"],"mappings":";;;;;;;;AAaA,MAAM,EAAE,QAAQ,MAAA,IAAUA,QAAAA;AAC1B,MAAM,EAAE,oBAAoBC,QAAAA;AAC5B,MAAM,EAAE,iBAAiBC,QAAAA;AACzB,MAAM,EAAE,mBAAmBC,QAAAA;AAE3B,MAAM,oBAAoB;AAC1B,MAAM,wBAAwB;AAC9B,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB;AAE3B,MAAM,wBAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,OAAO;AACT;AACA,MAAM,wBAAwB;AAC9B,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAC5B,MAAM,gBAAgB;AAAA,EACpB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AACT;AACA,MAAM,gBAAgB;AAAA,EACpB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AACT;AAGA,MAAM,wBAAwB;AAAA,eACf,YAAY,gBAAgB,KAAK;AAAA,OACzC,iBAAiB,KAAKC,4BAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,eAKnC,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,iBAAiB,KAAKA,4BAAqB;AAAA,oBAC9BC,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMpC,MAAM,iBAAiB;AAAA,KAClB,qBAAqB;AAAA,qBACLA,OAAAA,MAAM,QAAQ,GAAG;AAAA,aACzBA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,KAGzB,qBAAqB;AAAA;AAAA,aAEbA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1BC,+BAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,qBAAqB,IAAI,GAC9BC,OAAAA,UAAU,KAAK;AAAA,EAAA;AAEnB,CAAC,CAAC;AAAA;AAAA,IAEAD,+BAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,qBAAqB,EAAE,GAAGE,OAAAA,WAAW,SAAS;AAAA,EAAA;AAEvD,CAAC,CAAC;AAAA;AAAA,KAEC,eAAe,GAAG,cAAc,KAAK,qBAAqB;AAAA,KAC1D,eAAe,GAAG,cAAc,KAAK,qBAAqB;AAAA,aAClDH,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1BC,+BAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,eAAe,GAAG,cAAc,KAAK,qBAAqB,IAAI,GACnEC,OAAAA,UAAU,KAAK;AAAA,EAAA;AAEnB,CAAC,CAAC;AAAA;AAIJ,MAAM,gBAAgB;AAAA,KACjB,oBAAoB;AAAA;AAAA;AAAA;AAAA,KAIpB,oBAAoB;AAAA;AAAA;AAAA;AAAA,IAIrBD,+BAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,oBAAoB,IAAI,GAAGE,OAAAA,WAAW,KAAK;AAAA,EAAA;AAEpD,CAAC,CAAC;AAAA;AAIJ,MAAM,iBAAiB;AAAA,KAClB,kBAAkB;AAAA;AAAA;AAAA;AAAA,IAInBF,+BAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,kBAAkB,IAAI,GAAGE,OAAAA,WAAW,KAAK;AAAA,EAAA;AAElD,CAAC,CAAC;AAAA;AAAA,KAEC,kBAAkB;AAAA;AAAA;AAAA;AAAA,IAInBF,+BAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,kBAAkB,IAAI,GAC3BC,OAAAA,UAAU,KAAK;AAAA,EAAA;AAEnB,CAAC,CAAC;AAAA;AAAA,IAEAD,+BAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,eAAe,GAAG,cAAc,KAAK,kBAAkB,IAAI,GAChEC,OAAAA,UAAU,KAAK;AAAA,EAAA;AAEnB,CAAC,CAAC;AAAA;AAAA,KAEC,kBAAkB;AAAA;AAAA,mBAEJF,OAAAA,MAAM,QAAQ,GAAG;AAAA,oBAChBA,OAAAA,MAAM,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,KAKhC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKCA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOpC,eAAe,GAAG,cAAc;AAAA,wBACbA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAKlC,MAAM,yBAAyB;AAAA,KACjC,iBAAiB;AAAA;AAAA;AAAA;AAAA,eAIP,YAAY,gBAAgB,SAAS,CAAC;AAAA,OAC9C,iBAAiB;AAAA,qBACHA,OAAAA,MAAM,QAAQ,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,eAIzB,YAAY,gBAAgB,KAAK;AAAA,OACzC,iBAAiB;AAAA,sBACFA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,KAIrC,iBAAiB;AAAA;AAAA;AAAA;AAAA,IAIlB,cAAc;AAAA,IACd,aAAa;AAAA,IACb,cAAc;AAAA,IACd,qBAAqB;AAAA;AAGzB,MAAM,wBAAwB,MAAM;AAClC,QAAM,WAAW,SAAS,cAAc,GAAG;AAC3C,QAAM,eAAeI,OAAAA,aAAiC,qBAAqB;AAE3E,WAAS,UAAU,IAAI,qBAAqB;AAC5C,WAAS,YAAY,YAAY;AAEjC,SAAO;AACT;AAMA,MAAM,uBAAuB,MAAM;AACjC,QAAM,UAAU,SAAS,cAAc,SAAS;AAChD,QAAM,sBAAsB,SAAS,cAAc,GAAG;AACtD,QAAM,sBAAsB,SAAS,cAAc,GAAG;AAEtD,UAAQ,UAAU,IAAI,oBAAoB;AAE1C,sBAAoB,YAAY;AAChC,sBAAoB,YAAY,GAAG,mBAAmB,IAAI,mBAAmB;AAE7E,UAAQ,YAAY,mBAAmB;AACvC,UAAQ,YAAY,mBAAmB;AAEvC,SAAO;AACT;AAMA,MAAM,gBAAgB,CAAC,EAAE,kBAAgC;AACvD,MAAI,aAAa;AACf,gBAAY,UAAU,IAAI,oBAAoB;AAAA,EAChD;AACA,SAAO;AACT;AAEA,MAAM,qBAAqB,MAAM;AAC/B,QAAM,cAAc,SAAS,cAAc,GAAG;AAE9C,cAAY,UAAU,IAAI,kBAAkB;AAC5C,cAAY,YAAYA,oBAAiC,aAAa,CAAC;AACvE,cAAY,YAAYA,oBAAiC,aAAa,CAAC;AAEvE,SAAO;AACT;AAYO,MAAM,gBAAgB,CAAC,UAAwB;AACpD,QAAM,EAAE,aAAa,cAAc,iBAAA,IAAqB;AACxD,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkBC,OAAAA,4BAA4B,KAAK;AACzD,QAAM,UAAU,eAAe,gBAAgB;AAE/C,QAAM,kBAAkB,MAAM;AAC5B,UAAM,UAAU,cAAc,EAAE,aAAa;AAE7C,QAAI,cAAc;AAChBC,+BAAsC;AAAA,QACpC,SAAS;AAAA,MAAA,CACV;AACD,mBAAa,UAAU,IAAI,qBAAqB;AAChD,uBAAiB,YAAY,YAAY;AAAA,IAC3C;AAEA,QAAI,SAAS;AACX,uBAAiB,YAAY,OAAO;AAAA,IACtC;AAEA,QAAI,kBAAkB;AACpB,uBAAiB,UAAU,IAAI,kBAAkB;AACjD,uBAAiB,YAAY,gBAAgB;AAAA,IAC/C;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,wBAAwB,SAAS,cAAc,KAAK;AAC1D,UAAM,WAAW,sBAAA;AACjB,UAAM,UAAU,qBAAA;AAChB,UAAM,cAAc,mBAAA;AAEpB,qBAAiB,YAAY,QAAQ;AACrC,qBAAiB,YAAY,OAAO;AACpC,qBAAiB,YAAY,WAAW;AACxC,qBAAiB,YAAY,qBAAqB;AAAA,EACpD;AAEA,YAAU,gBAAA,IAAoB,gBAAA;AAE9B,mBAAiB,UAAU,IAAI,iBAAiB;AAChD,mBAAiB,YAAY,eAAe;AAE5C,SAAO;AACT;;;"}