@uoguelph/web-components 1.1.3 → 1.2.0-rc.1

package/dist/collection/components/uofg-footer/uofg-footer.js

@@ -17,45 +17,137 @@ import { faLinkedin } from "@fortawesome/free-brands-svg-icons/faLinkedin";
 import { faTiktok } from "@fortawesome/free-brands-svg-icons/faTiktok";
 import { faTwitterSquare } from "@fortawesome/free-brands-svg-icons/faTwitterSquare";
 import { faYoutube } from "@fortawesome/free-brands-svg-icons/faYoutube";
-const SocialLink = props => (h("li", null, h("a", { href: props.url, "aria-label": props.name }, h(FontAwesomeIcon, { icon: props.icon }))));
-const FooterLink = props => (h("li", null, h("a", { href: props.url, title: props.title }, h(FontAwesomeIcon, { icon: props.icon }), h("span", null, props.text))));
+const socials = [
+    {
+        text: 'Twitter',
+        icon: faTwitterSquare,
+        href: 'https://twitter.com/uofg',
+        class: 'hocus:tw-text-[#1da1f2]',
+    },
+    {
+        text: 'Facebook',
+        icon: faFacebookSquare,
+        href: 'https://www.facebook.com/uofguelph',
+        class: 'hocus:tw-text-[#4267b2]',
+    },
+    {
+        text: 'Instagram',
+        icon: faInstagram,
+        href: 'https://www.instagram.com/uofguelph/',
+        class: 'hocus:tw-text-[#e1306c]',
+    },
+    {
+        text: 'Youtube',
+        icon: faYoutube,
+        href: 'https://www.youtube.com/user/uofguelph',
+        class: 'hocus:tw-text-[#f00]',
+    },
+    {
+        text: 'LinkedIn',
+        icon: faLinkedin,
+        href: 'https://www.linkedin.com/school/university-of-guelph/',
+        class: 'hocus:tw-text-[#0077b5]',
+    },
+    {
+        text: 'TikTok',
+        icon: faTiktok,
+        href: 'https://www.tiktok.com/@uofguelph',
+        class: 'hocus:tw-text-[#f00]',
+    },
+];
+const links = [
+    {
+        text: 'Accessibility',
+        icon: faUniversalAccess,
+        href: 'https://www.uoguelph.ca/diversity-human-rights/accessibility-u-g',
+    },
+    {
+        text: 'Privacy',
+        icon: faKey,
+        href: 'https://www.uoguelph.ca/web/privacy/',
+    },
+    {
+        text: 'Site Map',
+        icon: faSitemap,
+        href: 'https://www.uoguelph.ca/sitemap',
+    },
+    {
+        text: 'Status Page',
+        icon: faCircleCheck,
+        href: 'https://uoguelph.statuspage.io/',
+    },
+    {
+        text: 'Land Acknowledgement',
+        icon: faTree,
+        href: 'https://www.uoguelph.ca/land-acknowledgement/',
+        title: 'The University of Guelph resides on the treaty lands and territory of the Mississaugas of the Credit. We recognize that today this gathering place is home to many First Nations, Inuit and Métis peoples and acknowledging them reminds us of our collective responsibility to the land where we learn and work.',
+    },
+    {
+        text: 'Careers',
+        icon: faBriefcase,
+        href: 'https://www.uoguelph.ca/hr/careers-guelph/current-opportunities',
+    },
+    {
+        text: 'Undergraduate Calendar',
+        icon: faCalendar,
+        href: 'https://www.uoguelph.ca/registrar/calendars/undergraduate/current/',
+    },
+    {
+        text: 'Graduate Calendar',
+        icon: faCalendar,
+        href: 'https://www.uoguelph.ca/registrar/calendars/graduate/current/',
+    },
+    {
+        text: 'Program Plans',
+        icon: faList,
+        href: 'https://admission.uoguelph.ca/programs',
+    },
+    {
+        text: 'Give to U of G',
+        icon: faHandHoldingHeart,
+        href: 'https://www.alumni.uoguelph.ca/give-to-guelph/how-to-give',
+    },
+];
 export class UofgFooter {
-  constructor() {
-    this.extraLinks = [];
-  }
-  connectedCallback() {
-    var _a;
-    this.updateExtraLinks();
-    (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new MutationObserver(() => {
-      this.updateExtraLinks();
-    }));
-    this.observer.observe(this.el, { childList: true, subtree: true });
-  }
-  updateExtraLinks() {
-    var _a;
-    this.extraLinks = Array.from((_a = this.el) === null || _a === void 0 ? void 0 : _a.children)
-      .filter(child => child.tagName === 'A')
-      .map(child => ({ text: child.textContent, href: child.getAttribute('href') }));
-  }
-  render() {
-    return (h("footer", { id: "uofg-footer" }, h("div", { id: "uofg-footer-extra-links-container" }, this.extraLinks.length > 0 && (h("ul", { id: "uofg-footer-extra-links" }, this.extraLinks.map(link => (h("li", null, h("a", { href: link.href }, link.text))))))), h("div", { id: "uofg-footer-content" }, h("div", { id: "uofg-footer-social", class: "uofg-footer-content-separator" }, h("a", { id: "uofg-footer-improve-life", href: "//www.uoguelph.ca/improve-life", "aria-label": "Improve Life", innerHTML: improveLifeLogo }), h("ul", { id: "uofg-footer-social-links" }, h(SocialLink, { name: "Twitter", url: "https://twitter.com/uofg", icon: faTwitterSquare }), h(SocialLink, { name: "Facebook", url: "https://www.facebook.com/uofguelph", icon: faFacebookSquare }), h(SocialLink, { name: "Instagram", url: "https://www.instagram.com/uofguelph/", icon: faInstagram }), h(SocialLink, { name: "Youtube", url: "https://www.youtube.com/user/uofguelph", icon: faYoutube }), h(SocialLink, { name: "LinkedIn", url: "https://www.linkedin.com/school/university-of-guelph/", icon: faLinkedin }), h(SocialLink, { name: "TikTok", url: "https://www.tiktok.com/@uofguelph", icon: faTiktok })), h("a", { href: "https://www.uoguelph.ca/web/socialmedia/" }, "Social Media Directory"), h("a", { href: "//www.uoguelph.ca/web/" }, "\u00A9 ", new Date().getFullYear(), " University of Guelph")), h("div", { id: "uofg-footer-links-container" }, h("ul", { id: "uofg-footer-links", class: "uofg-footer-content-separator" }, h(FooterLink, { text: "Accessibility", url: "https://www.uoguelph.ca/diversity-human-rights/accessibility-u-g", icon: faUniversalAccess }), h(FooterLink, { text: "Privacy", url: "https://www.uoguelph.ca/web/privacy/", icon: faKey }), h(FooterLink, { text: "Site Map", url: "https://www.uoguelph.ca/sitemap", icon: faSitemap }), h(FooterLink, { text: "Status Page", url: "https://uoguelph.statuspage.io/", icon: faCircleCheck }), h(FooterLink, { text: "Land Acknowledgement", url: "https://www.uoguelph.ca/land-acknowledgement/", icon: faTree, title: "The University of Guelph resides on the treaty lands and territory of the Mississaugas of the Credit. We recognize that today this gathering place is home to many First Nations, Inuit and M\u00E9tis peoples and acknowledging them reminds us of our collective responsibility to the land where we learn and work." }), h(FooterLink, { text: "Careers", url: "https://www.uoguelph.ca/hr/careers-guelph/current-opportunities", icon: faBriefcase }), h(FooterLink, { text: "Undergraduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/undergraduate/current/", icon: faCalendar }), h(FooterLink, { text: "Graduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/graduate/current/", icon: faCalendar }), h(FooterLink, { text: "Program Plans", url: "https://admission.uoguelph.ca/programs", icon: faList }), h(FooterLink, { text: "Give to U of G", url: "https://www.alumni.uoguelph.ca/give-to-guelph/how-to-give", icon: faHandHoldingHeart }))), h("address", { id: "uofg-footer-address", class: "uofg-footer-content-separator" }, h("strong", null, "University of Guelph"), h("span", null, "50 Stone Road East,"), h("span", null, "Guelph, Ontario, Canada"), h("span", null, "N1G 2W1"), h("a", { href: "tel:1-519-824-4120" }, h(FontAwesomeIcon, { icon: faPhoneFlip }), h("span", null, "519-824-4120"))))));
-  }
-  static get is() { return "uofg-footer"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["uofg-footer.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["uofg-footer.css"]
-    };
-  }
-  static get states() {
-    return {
-      "extraLinks": {}
-    };
-  }
-  static get elementRef() { return "el"; }
+    constructor() {
+        this.extraLinks = [];
+    }
+    connectedCallback() {
+        var _a;
+        this.updateExtraLinks();
+        (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new MutationObserver(() => {
+            this.updateExtraLinks();
+        }));
+        this.observer.observe(this.el, { childList: true, subtree: true });
+    }
+    updateExtraLinks() {
+        var _a;
+        this.extraLinks = Array.from((_a = this.el) === null || _a === void 0 ? void 0 : _a.children)
+            .filter(child => child.tagName === 'A')
+            .map(child => ({ text: child.textContent, href: child.getAttribute('href') }));
+    }
+    render() {
+        return (h("footer", { key: '7e1c2c333b0690bdf48a0c8646e4bc1660cafc74' }, this.extraLinks.length > 0 && (h("ul", { class: "tw-flex tw-flex-wrap tw-items-center tw-justify-center tw-bg-uofg-blue-50 tw-p-6 tw-px-[max(calc((100%-1320px)/2),2rem)]" }, this.extraLinks.map(link => (h("li", { class: "tw-border-0 tw-border-r-2 tw-border-solid tw-border-uofg-blue-100 tw-p-2 first:tw-border-l-2" }, h("a", { class: "tw-text-uofg-blue-500 tw-transition-colors hocus:tw-text-uofg-blue-950", href: link.href }, link.text)))))), h("div", { key: '2a7bc3b10735ecba41c936895b12857e02be8b39', class: "tw-flex tw-flex-col tw-content-center tw-gap-8 tw-bg-black tw-px-[max(calc((100%-1320px)/2),2rem)] tw-py-8 tw-text-white md:tw-grid md:tw-grid-cols-2 lg:tw-grid-cols-4" }, h("div", { key: 'e4ad770842e3d6afe36b94805d5b593c110a8abe', class: "tw-flex tw-flex-col tw-justify-between tw-gap-4" }, h("a", { key: '8f3c64e2b3bc247c286389182b2923ffae62eb79', href: "https://www.uoguelph.ca/improve-life", "aria-label": "Improve Life", class: "tw-flex tw-transition-opacity hocus:tw-opacity-75 [&>svg]:tw-h-[1.6em]", innerHTML: improveLifeLogo }), h("ul", { key: '52cc20ceea75b7688ea8084dd8a68604e8721141', class: "tw-flex tw-gap-3 tw-text-4xl [&>li]:tw-contents" }, socials.map(item => (h("li", null, h("a", { href: item.href, "aria-label": item.text, class: `tw-transition-colors [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current ${item.class}` }, h(FontAwesomeIcon, { icon: item.icon })))))), h("a", { key: '02593d4e251af9dcc45ea58cc9fde9a48e94e8d7', class: "tw-w-fit tw-border-0 tw-border-b-2 tw-border-dotted tw-border-transparent tw-transition-colors hocus:tw-border-white", href: "https://www.uoguelph.ca/web/socialmedia/" }, "Social Media Directory"), h("a", { key: 'cb4965e8d0aefbe2051c990ed664b4dbba3c1df1', class: "tw-w-fit tw-border-0 tw-border-b-2 tw-border-dotted tw-border-transparent tw-transition-colors hocus:tw-border-white", href: "https://www.uoguelph.ca/web/" }, "\u00A9 ", new Date().getFullYear(), " University of Guelph")), h("div", { key: '5d76bcee6f7080194c062c35a545220333c1e2f4', class: "md:tw-col-span-2 md:tw-row-start-2 lg:tw-row-auto" }, h("ul", { key: 'e6d48fdac5a3c2aa5481bd3aaa6521815ab2977e', class: "tw-flex tw-flex-col tw-gap-4 md:tw-grid md:tw-grid-cols-2 [&>li]:tw-contents" }, links.map(item => {
+            var _a;
+            return (h("li", null, h("a", { href: item.href, title: (_a = item === null || item === void 0 ? void 0 : item.title) !== null && _a !== void 0 ? _a : '', class: "tw-flex tw-w-fit tw-gap-3 tw-border-0 tw-border-b-2 tw-border-dotted tw-border-transparent tw-transition-colors hocus:tw-border-white [&>svg]:tw-h-[1em] [&>svg]:tw-fill-uofg-yellow" }, h(FontAwesomeIcon, { icon: item.icon }), h("span", null, item.text))));
+        }))), h("address", { key: 'e5941955d0f8b8a534980396efeaa1c9c49a919a', class: "tw-flex tw-flex-col tw-justify-between tw-gap-4 tw-not-italic" }, h("strong", { key: '4a147a383479b0fea78c31ee83e852e298d73a49' }, "University of Guelph"), h("span", { key: 'c75566a010994dbd4e38afaa8c7b1ce2eedaa4b4' }, "50 Stone Road East,"), h("span", { key: 'e56462b21cf183eb66c85d17f4f74275947ca260' }, "Guelph, Ontario, Canada"), h("span", { key: '05ce006f06502c2b824914ab22b3a1e601f512e5' }, "N1G 2W1"), h("a", { key: '01d4b036db7d9fe71c4a24c5e4714c66d0ef596f', href: "tel:1-519-824-4120", class: "tw-flex tw-w-fit tw-gap-2 tw-border-0 tw-border-b-2 tw-border-dotted tw-border-transparent tw-text-uofg-blue tw-transition-colors hocus:tw-border-current [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current" }, h(FontAwesomeIcon, { key: '22427c9cc0bb50f48a77b8c6bce3d474029c8c79', icon: faPhoneFlip }), h("span", { key: '340eea2c61160970cdea49ab53123cbdb2b462c4' }, "519-824-4120"))))));
+    }
+    static get is() { return "uofg-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["uofg-footer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["uofg-footer.css"]
+        };
+    }
+    static get states() {
+        return {
+            "extraLinks": {}
+        };
+    }
+    static get elementRef() { return "el"; }
 }