@penn-libraries/web 1.2.0-dev.1 → 1.2.0-dev.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-autocomplete_4.cjs.entry.js +10 -6
- package/dist/cjs/web.cjs.js +1 -1
- package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.css +1 -1
- package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js +1 -1
- package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js.map +1 -1
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.css +12 -3
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.js +33 -3
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.js.map +1 -1
- package/dist/components/pennlibs-feedback.js +2 -2
- package/dist/components/pennlibs-feedback.js.map +1 -1
- package/dist/components/pennlibs-footer.js +9 -4
- package/dist/components/pennlibs-footer.js.map +1 -1
- package/dist/docs.json +32 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map +1 -1
- package/dist/esm/pennlibs-autocomplete_4.entry.js +10 -6
- package/dist/esm/web.js +1 -1
- package/dist/types/components/pennlibs-footer/pennlibs-footer.d.ts +4 -0
- package/dist/types/components.d.ts +10 -0
- package/dist/web/{p-b9538aed.entry.js → p-3da26275.entry.js} +10 -6
- package/dist/web/pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map +1 -1
- package/dist/web/web.esm.js +1 -1
- package/hydrate/index.js +11 -6
- package/hydrate/index.mjs +11 -6
- package/package.json +1 -1
|
@@ -277,7 +277,7 @@ const Autocomplete = class {
|
|
|
277
277
|
};
|
|
278
278
|
Autocomplete.style = pennlibsAutocompleteCss;
|
|
279
279
|
|
|
280
|
-
const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{:host{display:none}}*,*::before,*::after{box-sizing:border-box}.viewport-margins{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:
|
|
280
|
+
const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{:host{display:none}}*,*::before,*::after{box-sizing:border-box}.viewport-margins{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}p{margin:0;padding:calc(0.5em + 1px) 0}strong{font-weight:600}a{color:var(--pl-color-fg-accent);text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.25em 1.25em;font-family:var(--pl-font-family);font-weight:500;line-height:1.4;color:var(--pl-color-fg-default);background:var(--pl-color-bg-default);border:solid 1px var(--pl-color-fg-subtle);border-radius:1em;box-sizing:border-box}button:hover{cursor:pointer}button:hover span{text-decoration:underline}*:focus{outline:0;box-shadow:0 0 0 2px var(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis)}p:focus{outline:none;box-shadow:0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis)}@media (max-width: 26em){h2{display:block;width:100%;text-align:center}}.help-us{display:flex;flex-direction:column;gap:0.5em}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.visually-hidden:focus,.visually-hidden:active{clip:auto;clip-path:none;height:auto;overflow:visible;position:static;white-space:normal;width:auto}";
|
|
281
281
|
|
|
282
282
|
const FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';
|
|
283
283
|
const FEEDBACK_TIMESTAMP_KEY = 'pennlibs-feedback-timestamp';
|
|
@@ -322,16 +322,20 @@ const PennlibsFeedback = class {
|
|
|
322
322
|
});
|
|
323
323
|
}
|
|
324
324
|
render() {
|
|
325
|
-
return (index.h("div", { key: '04053c96e964ee9f240ca1a77d7944ae0f53248d', class: "feedback__container" }, index.h("div", { key: 'f5f524b449d3473c1ecc2d454787034c54a811a0', class: "viewport-margins" }, index.h("div", { key: 'd0c832edc9361dac49d9cbfc143332fea04434ea', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (index.h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (index.h("p", null, "Thank you for letting us know. ", index.h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " if you need help.")) : (index.h("div", { class: "feedback__inline-question" }, index.h("h2", null, "Did you find what you need?"), index.h("button", { onClick: () => this.handleFeedback('yes') }, index.h("span", null, "Yes")), index.h("button", { onClick: () => this.handleFeedback('no') }, index.h("span", null, "No"))))), index.h("div", { key: '
|
|
325
|
+
return (index.h("div", { key: '04053c96e964ee9f240ca1a77d7944ae0f53248d', class: "feedback__container" }, index.h("div", { key: 'f5f524b449d3473c1ecc2d454787034c54a811a0', class: "viewport-margins" }, index.h("div", { key: 'd0c832edc9361dac49d9cbfc143332fea04434ea', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (index.h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (index.h("p", null, "Thank you for letting us know. ", index.h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " if you need help.")) : (index.h("div", { class: "feedback__inline-question" }, index.h("h2", null, "Did you find what you need?"), index.h("button", { onClick: () => this.handleFeedback('yes') }, index.h("span", null, "Yes"), index.h("span", { class: "visually-hidden" }, ", I found what I needed.")), index.h("button", { onClick: () => this.handleFeedback('no') }, index.h("span", null, "No"), index.h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), index.h("div", { key: '9d4de668c9e3696d8983c48fcc20ea89b2163ea1', class: "feedback__share-feedback" }, index.h("p", { key: '1377153ebba81c48b0a70756b190503b9cd33c61' }, "To help us improve, ", index.h("a", { key: '26f3f05b0af848ff58d959190a380d5b64db254a', href: "http://library.upenn.edu/feedback" }, "share your feedback"), "."))))));
|
|
326
326
|
}
|
|
327
327
|
};
|
|
328
328
|
PennlibsFeedback.style = pennlibsFeedbackCss;
|
|
329
329
|
|
|
330
|
-
const pennlibsFooterCss = ":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n --padding-bottom: 3em;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n background: var(--pl-color-penn-blue);\n padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n max-width: var(--pl-viewport-margins-max-width);\n margin: 0 auto;\n padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n background-size: cover;\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n color: var(--pl-color-
|
|
330
|
+
const pennlibsFooterCss = ":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n --padding-bottom: 3em;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n background: var(--pl-color-penn-blue);\n padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n max-width: var(--pl-viewport-margins-max-width);\n margin: 0 auto;\n padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n background-size: cover;\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with a {\n font-weight: 500;\n text-underline-offset: var(--pl-link-text-underline-offset);\n\n &:hover {\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n }\n}\n\n.built-with {\n opacity: 0.875;\n margin: 0; \n padding: 1.5em 0;\n font-size: 0.875em;\n}\n\n.website-footer__content {\n padding: 4em 0;\n}\n\n.website-footer__links-container {\n gap: 4em 2em;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n font-size: 0.8em;\n text-transform: uppercase;\n letter-spacing: 0.075em;\n margin-bottom: 1em;\n opacity: 0.75;\n}\n\n.website-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n}\n\n.website-footer__links a {\n text-decoration: none;\n}\n\n.website-footer__links a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n padding: 1em 0;\n background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n display: flex;\n flex-wrap: wrap;\n gap: 0;\n flex-direction: row;\n margin-left: -0.75em;\n\n @media (max-width: 1080px) {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n }\n}\n\n.website-footer__links--footer a {\n display: inline-block;\n padding: 0.5em 0.75em;\n font-size: 0.875em;\n opacity: 0.875;\n font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}";
|
|
331
331
|
|
|
332
332
|
const Footer = class {
|
|
333
333
|
constructor(hostRef) {
|
|
334
334
|
index.registerInstance(this, hostRef);
|
|
335
|
+
/**
|
|
336
|
+
* When true, shows a "Built with the Penn Libraries Design System" line below the footer.
|
|
337
|
+
*/
|
|
338
|
+
this.showBuiltWith = false;
|
|
335
339
|
}
|
|
336
340
|
componentWillLoad() {
|
|
337
341
|
this.setNavigationByChildren();
|
|
@@ -356,12 +360,12 @@ const Footer = class {
|
|
|
356
360
|
}
|
|
357
361
|
render() {
|
|
358
362
|
const footerBackgroundSrc = index.getAssetPath('./assets/footer-bg.webp');
|
|
359
|
-
return (index.h("footer", { key: '
|
|
363
|
+
return (index.h("footer", { key: '39b1bc7336fe2aa28e8c6093d13b8dfb3dd70d3e', class: "website-footer-wrapper" }, index.h("div", { key: '7902cf7cde3a468dec8ea71c2a139addafa5af79', class: "website-footer", style: {
|
|
360
364
|
background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
361
365
|
backgroundSize: 'cover',
|
|
362
|
-
} }, index.h("div", { key: '
|
|
366
|
+
} }, index.h("div", { key: '804f9cd3f101997ee2d15d4a4749945ef553a118', class: "viewport-margins" }, index.h("div", { key: '3a09637400e74e729641666eb8142c0cf77d66b3', class: "website-footer__content" }, index.h("div", { key: 'cdb9270db298aa7781859a80c799949cb4c35787', class: "website-footer__links-container" }, index.h("section", { key: '20d953d2b85178798d2298aa8aaa9fb8e47d7af4' }, index.h("h2", { key: '79b1fe7f4fc2dff03134c7d4e96e9fd657131fc8', class: "website-footer__heading" }, "Penn Libraries"), index.h("ul", { key: 'ba8002b17457f979f9817c45a89f332064f0b5bb', class: "website-footer__links" }, index.h("li", { key: 'cb65fc4ad6432ef447a4b98a8dfdc0323bf37ccc' }, index.h("a", { key: '0b61506da9a1c18919f77410fa39d3937f7485df', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", index.h("br", { key: 'ebd3def13a3107d1b301c0932d421b054e2bb338' }), "Philadelphia, PA 19104-6206")), index.h("li", { key: '3f26ebab3b90a33ba2d17cd3cfd8a485f1c7e74f' }, index.h("a", { key: 'c2dcf7a3d936eb5376b2568e677bb8a7dc7ab445', href: "tel:(215) 898-7555" }, "(215) 898-7555")), index.h("li", { key: '8c9374110f2d386c7275fad9522ea2565daf6c06' }, index.h("a", { key: 'd40a2fd7490f1b233e4839e38faf29d9bb04f519', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), index.h("li", { key: 'ab3016b1cfcc8827af060ec383d8556e8346713a' }, index.h("a", { key: '76a8d246128fb76606c1cdf24640198c23c9d317', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), index.h("section", { key: 'fd0abacbc35ffaafbb2016064c7a6194616ee2dc' }, index.h("h2", { key: 'a812d7d26e21a1808ce6bd115ec620e1b033a8bf', class: "website-footer__heading" }, "Stay in touch"), index.h("ul", { key: 'fe158ff1336379e1236a88c4a3d0f5e1efd9cdb8', class: "website-footer__links" }, index.h("li", { key: '32396df360b39190ff587400fabe405ee319a507' }, index.h("a", { key: '07ac56362dde7a2807e86c2a22564689ed9de90c', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), index.h("li", { key: '95abd2bf0f6a79c0597c1e57e878f986002adde2' }, index.h("a", { key: '374044fae62fd82c9369cfba8b7c6223ded48d5a', href: "https://www.instagram.com/upennlib/" }, "Instagram")), index.h("li", { key: '86cc74d4ec21dfb51a072cfad87ed395e961f26f' }, index.h("a", { key: 'fda9e8c73918252b91e40dc23d289613a3fe5802', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), index.h("li", { key: 'b1ce60d7aa5ac8a2aa8bd4f826c11cc753b1488c' }, index.h("a", { key: 'ccfef8131fc7f9edd44936f1c212d31c08c61682', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
|
|
363
367
|
this.navigationByChildren.map(section => (index.h("section", null, index.h("h2", { class: "website-footer__heading" }, section.heading), index.h("ul", { class: "website-footer__links" }, section.links.map(link => (index.h("li", null, index.h("a", { href: link.href }, link.label))))))))
|
|
364
|
-
]))), index.h("div", { key: '
|
|
368
|
+
]))), index.h("div", { key: '4430d39b9b8943d9336020d5ed04cdb80a3b91af', class: "website-footer__footer" }, index.h("div", { key: '437f0b8894b63c3857f8871eaaaf3d28277738ad', class: "viewport-margins" }, index.h("ul", { key: '8c4ac37a89006d543a66c8c1ba6bc9d7acc0d6db', class: "website-footer__links website-footer__links--footer" }, index.h("li", { key: 'ac1db31f3c5331a26c0aee171974c10f22d5da08' }, index.h("a", { key: 'ad8a6251cca9b0c904ccecff96a8800b22ed5568', href: "https://www.upenn.edu/" }, "UPenn")), index.h("li", { key: '1189f7119ec768d34ea9435f9ff85df2764abe61' }, index.h("a", { key: 'eb53d4f15fe49d32899d435670a34369a4e7e190', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), index.h("li", { key: 'd2a155f7f91a31cca41df9d0c9d37f151bded247' }, index.h("a", { key: '8e329a895a25bd139867063dd7eed9c0aa7c0060', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), index.h("li", { key: '0b65f3da18b54b91158515d7966e010e4e0d64ac' }, index.h("a", { key: 'f8615c438f94216372fdb8afa26ae7150bbef816', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), index.h("li", { key: 'cbf5febfb926a1b569e73d4a57e7ca8315f6d876' }, index.h("a", { key: '1116c792623c0fa819ce0189e105ee54c69ba73e', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), index.h("li", { key: '385a84f264b263a9738d38d66ac917e3a6055db4' }, index.h("a", { key: 'dcd8517fb32ae46b983cb4802adb86e33e29bd71', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), this.showBuiltWith && (index.h("div", { key: 'd3bca43144b06b50091b54dee5c8734de4f80d60', class: "viewport-margins" }, index.h("p", { key: 'a3d974ea56f521406bffc2a8eaf6b6e6c57bb595', class: "built-with" }, "Built with the ", index.h("a", { key: '7aa9fc3901510e0ad7d2b0ca4abf4f8c6f92d735', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System"), ".")))));
|
|
365
369
|
}
|
|
366
370
|
static get assetsDirs() { return ["assets"]; }
|
|
367
371
|
get hostElement() { return index.getElement(this); }
|
package/dist/cjs/web.cjs.js
CHANGED
|
@@ -18,7 +18,7 @@ var patchBrowser = () => {
|
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(async (options) => {
|
|
20
20
|
await index.globalScripts();
|
|
21
|
-
return index.bootstrapLazy([["pennlibs-iiif-img.cjs",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["pennlibs-autocomplete_4.cjs",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]],[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"error":[32],"answer":[32]}],[257,"pennlibs-footer",{"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["pennlibs-banner.cjs",[[257,"pennlibs-banner"]]],["pennlibs-chat.cjs",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-hero.cjs",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-fallback-img.cjs",[[257,"pennlibs-fallback-img"]]]], options);
|
|
21
|
+
return index.bootstrapLazy([["pennlibs-iiif-img.cjs",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["pennlibs-autocomplete_4.cjs",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]],[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"error":[32],"answer":[32]}],[257,"pennlibs-footer",{"showBuiltWith":[4,"show-built-with"],"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["pennlibs-banner.cjs",[[257,"pennlibs-banner"]]],["pennlibs-chat.cjs",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-hero.cjs",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-fallback-img.cjs",[[257,"pennlibs-fallback-img"]]]], options);
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
exports.setNonce = index.setNonce;
|
|
@@ -51,7 +51,7 @@ export class PennlibsFeedback {
|
|
|
51
51
|
});
|
|
52
52
|
}
|
|
53
53
|
render() {
|
|
54
|
-
return (h("div", { key: '04053c96e964ee9f240ca1a77d7944ae0f53248d', class: "feedback__container" }, h("div", { key: 'f5f524b449d3473c1ecc2d454787034c54a811a0', class: "viewport-margins" }, h("div", { key: 'd0c832edc9361dac49d9cbfc143332fea04434ea', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "Thank you for letting us know. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " if you need help.")) : (h("div", { class: "feedback__inline-question" }, h("h2", null, "Did you find what you need?"), h("button", { onClick: () => this.handleFeedback('yes') }, h("span", null, "Yes")), h("button", { onClick: () => this.handleFeedback('no') }, h("span", null, "No"))))), h("div", { key: '
|
|
54
|
+
return (h("div", { key: '04053c96e964ee9f240ca1a77d7944ae0f53248d', class: "feedback__container" }, h("div", { key: 'f5f524b449d3473c1ecc2d454787034c54a811a0', class: "viewport-margins" }, h("div", { key: 'd0c832edc9361dac49d9cbfc143332fea04434ea', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "Thank you for letting us know. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " if you need help.")) : (h("div", { class: "feedback__inline-question" }, h("h2", null, "Did you find what you need?"), h("button", { onClick: () => this.handleFeedback('yes') }, h("span", null, "Yes"), h("span", { class: "visually-hidden" }, ", I found what I needed.")), h("button", { onClick: () => this.handleFeedback('no') }, h("span", null, "No"), h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), h("div", { key: '9d4de668c9e3696d8983c48fcc20ea89b2163ea1', class: "feedback__share-feedback" }, h("p", { key: '1377153ebba81c48b0a70756b190503b9cd33c61' }, "To help us improve, ", h("a", { key: '26f3f05b0af848ff58d959190a380d5b64db254a', href: "http://library.upenn.edu/feedback" }, "share your feedback"), "."))))));
|
|
55
55
|
}
|
|
56
56
|
static get is() { return "pennlibs-feedback"; }
|
|
57
57
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pennlibs-feedback.js","sourceRoot":"","sources":["../../../src/components/pennlibs-feedback/pennlibs-feedback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE/E,MAAM,oBAAoB,GAAG,0BAA0B,CAAC;AACxD,MAAM,sBAAsB,GAAG,6BAA6B,CAAC;AAC7D,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,YAAY;AAChD,MAAM,iBAAiB,GAAG,sBAAsB,CAAC;AACjD,MAAM,0BAA0B,GAAG,yBAAyB,CAAC;AAE7D;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,gBAAgB;IAL7B;QAME;;WAEG;QACK,iBAAY,GAAY,KAAK,CAAC;QAE7B,UAAK,GAAY,KAAK,CAAC;QACvB,WAAM,GAAuB,SAAS,CAAC;KA6EjD;IA1DC,iBAAiB;QACf,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC;QACjE,IAAI,SAAS,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;YAC/D,cAAc,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;YAChD,cAAc,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;QACpD,CAAC;QAED,IAAI,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAC;YACjD,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAW,CAAC;QACvE,CAAC;QAED,IAAI,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,EAAE,CAAC;YACvD,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,KAAK,MAAM,CAAC;QAC7E,CAAC;IACH,CAAC;IAED,cAAc,CAAC,MAAc;;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,cAAc,CAAC,OAAO,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;QACrD,cAAc,CAAC,OAAO,CAAC,sBAAsB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAEnE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;YACtB,QAAQ,EAAE,iBAAiB;YAC3B,MAAM,EAAE,MAAM;YACd,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI;YACzB,WAAW,EAAE,CAAA,MAAA,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,0CAAE,WAAW,KAAI,SAAS;YACnE,SAAS,EAAE,QAAQ,CAAC,KAAK,IAAI,SAAS;SACvC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,qBAAqB;YAC9B,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,4DAAK,KAAK,EAAC,mBAAmB;oBAC3B,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,CAC9C,8CAAqC,CACtC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,CACzB;;wBAAkC,SAAG,IAAI,EAAC,0CAA0C,iBAAe;6CAAsB,CAC1H,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,2BAA2B;wBACpC,4CAAoC;wBACpC,cAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;4BAC/C,sBAAgB,
|
|
1
|
+
{"version":3,"file":"pennlibs-feedback.js","sourceRoot":"","sources":["../../../src/components/pennlibs-feedback/pennlibs-feedback.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\nconst FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';\nconst FEEDBACK_TIMESTAMP_KEY = 'pennlibs-feedback-timestamp';\nconst FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes\nconst FEEDBACK_QUESTION = 'Is this page useful?';\nconst FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';\n\n/**\n * A feedback component that asks visitors \"Did you find what you need?\" and\n * links to a feedback form. The answer is stored in sessionStorage for 5 minutes\n * to avoid re-prompting during a browsing session.\n *\n * @example\n * <pennlibs-feedback></pennlibs-feedback>\n *\n * @example\n * <pennlibs-feedback hide-question></pennlibs-feedback>\n */\n@Component({\n tag: 'pennlibs-feedback',\n styleUrl: 'pennlibs-feedback.css',\n shadow: true,\n})\nexport class PennlibsFeedback {\n /**\n * When true, hides the yes/no question and only shows the \"share your feedback\" link.\n */\n @Prop() hideQuestion: boolean = false;\n\n @State() error: boolean = false;\n @State() answer: string | undefined = undefined;\n\n /**\n * Emitted when a visitor answers the feedback question. Includes the question,\n * answer, current URL, and page heading/title for context.\n */\n @Event({\n eventName: 'pennlibs-feedback',\n composed: true,\n cancelable: true,\n bubbles: true,\n }) feedbackEvent!: EventEmitter<{\n question: string;\n answer: string;\n url: string;\n pageHeading?: string;\n pageTitle?: string;\n }>;\n\n componentWillLoad() {\n const timestamp = sessionStorage.getItem(FEEDBACK_TIMESTAMP_KEY);\n if (timestamp && Date.now() - Number(timestamp) > FEEDBACK_TTL) {\n sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);\n sessionStorage.removeItem(FEEDBACK_TIMESTAMP_KEY);\n }\n\n if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {\n this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY) as string;\n }\n\n if (sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY)) {\n this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';\n }\n }\n\n handleFeedback(answer: string) {\n this.answer = answer;\n sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);\n sessionStorage.setItem(FEEDBACK_TIMESTAMP_KEY, String(Date.now()));\n \n this.feedbackEvent.emit({\n question: FEEDBACK_QUESTION,\n answer: answer,\n url: window.location.href,\n pageHeading: document.querySelector('h1')?.textContent || undefined,\n pageTitle: document.title || undefined\n });\n }\n \n render() {\n return (\n <div class=\"feedback__container\">\n <div class=\"viewport-margins\">\n <div class=\"feedback__content\">\n {!this.hideQuestion && (this.answer === 'yes' ? (\n <p>Thank you for letting us know.</p>\n ) : this.answer === 'no' ? (\n <p>Thank you for letting us know. <a href=\"https://www.library.upenn.edu/contact-us\">Contact us</a> if you need help.</p>\n ) : (\n <div class=\"feedback__inline-question\">\n <h2>Did you find what you need?</h2>\n <button onClick={() => this.handleFeedback('yes')}>\n <span>Yes</span><span class=\"visually-hidden\">, I found what I needed.</span>\n </button>\n <button onClick={() => this.handleFeedback('no')}>\n <span>No</span><span class=\"visually-hidden\">, I did not find what I needed.</span>\n </button>\n </div>\n ))}\n <div class=\"feedback__share-feedback\">\n <p>To help us improve, <a href=\"http://library.upenn.edu/feedback\">share your feedback</a>.</p>\n </div>\n </div>\n </div>\n </div>\n )\n }\n}\n\n"]}
|
|
@@ -36,11 +36,20 @@
|
|
|
36
36
|
|
|
37
37
|
.built-with,
|
|
38
38
|
.built-with a {
|
|
39
|
-
color: var(--pl-color-
|
|
39
|
+
color: var(--pl-color-fg-subtle-on-emphasis);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.built-with a {
|
|
43
|
+
font-weight: 500;
|
|
44
|
+
text-underline-offset: var(--pl-link-text-underline-offset);
|
|
45
|
+
|
|
46
|
+
&:hover {
|
|
47
|
+
text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);
|
|
48
|
+
}
|
|
40
49
|
}
|
|
41
50
|
|
|
42
51
|
.built-with {
|
|
43
|
-
opacity: 0.
|
|
52
|
+
opacity: 0.875;
|
|
44
53
|
margin: 0;
|
|
45
54
|
padding: 1.5em 0;
|
|
46
55
|
font-size: 0.875em;
|
|
@@ -92,7 +101,7 @@
|
|
|
92
101
|
flex-wrap: wrap;
|
|
93
102
|
gap: 0;
|
|
94
103
|
flex-direction: row;
|
|
95
|
-
margin-left: -0.
|
|
104
|
+
margin-left: -0.75em;
|
|
96
105
|
|
|
97
106
|
@media (max-width: 1080px) {
|
|
98
107
|
display: grid;
|
|
@@ -25,6 +25,12 @@ import { h, getAssetPath } from "@stencil/core";
|
|
|
25
25
|
* @prop --pl-viewport-margins-gutter: The gutter width of the footer content.
|
|
26
26
|
*/
|
|
27
27
|
export class Footer {
|
|
28
|
+
constructor() {
|
|
29
|
+
/**
|
|
30
|
+
* When true, shows a "Built with the Penn Libraries Design System" line below the footer.
|
|
31
|
+
*/
|
|
32
|
+
this.showBuiltWith = false;
|
|
33
|
+
}
|
|
28
34
|
componentWillLoad() {
|
|
29
35
|
this.setNavigationByChildren();
|
|
30
36
|
}
|
|
@@ -48,12 +54,12 @@ export class Footer {
|
|
|
48
54
|
}
|
|
49
55
|
render() {
|
|
50
56
|
const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
|
|
51
|
-
return (h("footer", { key: '
|
|
57
|
+
return (h("footer", { key: '39b1bc7336fe2aa28e8c6093d13b8dfb3dd70d3e', class: "website-footer-wrapper" }, h("div", { key: '7902cf7cde3a468dec8ea71c2a139addafa5af79', class: "website-footer", style: {
|
|
52
58
|
background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
53
59
|
backgroundSize: 'cover',
|
|
54
|
-
} }, h("div", { key: '
|
|
60
|
+
} }, h("div", { key: '804f9cd3f101997ee2d15d4a4749945ef553a118', class: "viewport-margins" }, h("div", { key: '3a09637400e74e729641666eb8142c0cf77d66b3', class: "website-footer__content" }, h("div", { key: 'cdb9270db298aa7781859a80c799949cb4c35787', class: "website-footer__links-container" }, h("section", { key: '20d953d2b85178798d2298aa8aaa9fb8e47d7af4' }, h("h2", { key: '79b1fe7f4fc2dff03134c7d4e96e9fd657131fc8', class: "website-footer__heading" }, "Penn Libraries"), h("ul", { key: 'ba8002b17457f979f9817c45a89f332064f0b5bb', class: "website-footer__links" }, h("li", { key: 'cb65fc4ad6432ef447a4b98a8dfdc0323bf37ccc' }, h("a", { key: '0b61506da9a1c18919f77410fa39d3937f7485df', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", h("br", { key: 'ebd3def13a3107d1b301c0932d421b054e2bb338' }), "Philadelphia, PA 19104-6206")), h("li", { key: '3f26ebab3b90a33ba2d17cd3cfd8a485f1c7e74f' }, h("a", { key: 'c2dcf7a3d936eb5376b2568e677bb8a7dc7ab445', href: "tel:(215) 898-7555" }, "(215) 898-7555")), h("li", { key: '8c9374110f2d386c7275fad9522ea2565daf6c06' }, h("a", { key: 'd40a2fd7490f1b233e4839e38faf29d9bb04f519', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), h("li", { key: 'ab3016b1cfcc8827af060ec383d8556e8346713a' }, h("a", { key: '76a8d246128fb76606c1cdf24640198c23c9d317', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), h("section", { key: 'fd0abacbc35ffaafbb2016064c7a6194616ee2dc' }, h("h2", { key: 'a812d7d26e21a1808ce6bd115ec620e1b033a8bf', class: "website-footer__heading" }, "Stay in touch"), h("ul", { key: 'fe158ff1336379e1236a88c4a3d0f5e1efd9cdb8', class: "website-footer__links" }, h("li", { key: '32396df360b39190ff587400fabe405ee319a507' }, h("a", { key: '07ac56362dde7a2807e86c2a22564689ed9de90c', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), h("li", { key: '95abd2bf0f6a79c0597c1e57e878f986002adde2' }, h("a", { key: '374044fae62fd82c9369cfba8b7c6223ded48d5a', href: "https://www.instagram.com/upennlib/" }, "Instagram")), h("li", { key: '86cc74d4ec21dfb51a072cfad87ed395e961f26f' }, h("a", { key: 'fda9e8c73918252b91e40dc23d289613a3fe5802', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), h("li", { key: 'b1ce60d7aa5ac8a2aa8bd4f826c11cc753b1488c' }, h("a", { key: 'ccfef8131fc7f9edd44936f1c212d31c08c61682', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
|
|
55
61
|
this.navigationByChildren.map(section => (h("section", null, h("h2", { class: "website-footer__heading" }, section.heading), h("ul", { class: "website-footer__links" }, section.links.map(link => (h("li", null, h("a", { href: link.href }, link.label))))))))
|
|
56
|
-
]))), h("div", { key: '
|
|
62
|
+
]))), h("div", { key: '4430d39b9b8943d9336020d5ed04cdb80a3b91af', class: "website-footer__footer" }, h("div", { key: '437f0b8894b63c3857f8871eaaaf3d28277738ad', class: "viewport-margins" }, h("ul", { key: '8c4ac37a89006d543a66c8c1ba6bc9d7acc0d6db', class: "website-footer__links website-footer__links--footer" }, h("li", { key: 'ac1db31f3c5331a26c0aee171974c10f22d5da08' }, h("a", { key: 'ad8a6251cca9b0c904ccecff96a8800b22ed5568', href: "https://www.upenn.edu/" }, "UPenn")), h("li", { key: '1189f7119ec768d34ea9435f9ff85df2764abe61' }, h("a", { key: 'eb53d4f15fe49d32899d435670a34369a4e7e190', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), h("li", { key: 'd2a155f7f91a31cca41df9d0c9d37f151bded247' }, h("a", { key: '8e329a895a25bd139867063dd7eed9c0aa7c0060', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), h("li", { key: '0b65f3da18b54b91158515d7966e010e4e0d64ac' }, h("a", { key: 'f8615c438f94216372fdb8afa26ae7150bbef816', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), h("li", { key: 'cbf5febfb926a1b569e73d4a57e7ca8315f6d876' }, h("a", { key: '1116c792623c0fa819ce0189e105ee54c69ba73e', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), h("li", { key: '385a84f264b263a9738d38d66ac917e3a6055db4' }, h("a", { key: 'dcd8517fb32ae46b983cb4802adb86e33e29bd71', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), this.showBuiltWith && (h("div", { key: 'd3bca43144b06b50091b54dee5c8734de4f80d60', class: "viewport-margins" }, h("p", { key: 'a3d974ea56f521406bffc2a8eaf6b6e6c57bb595', class: "built-with" }, "Built with the ", h("a", { key: '7aa9fc3901510e0ad7d2b0ca4abf4f8c6f92d735', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System"), ".")))));
|
|
57
63
|
}
|
|
58
64
|
static get is() { return "pennlibs-footer"; }
|
|
59
65
|
static get encapsulation() { return "shadow"; }
|
|
@@ -68,6 +74,30 @@ export class Footer {
|
|
|
68
74
|
};
|
|
69
75
|
}
|
|
70
76
|
static get assetsDirs() { return ["assets"]; }
|
|
77
|
+
static get properties() {
|
|
78
|
+
return {
|
|
79
|
+
"showBuiltWith": {
|
|
80
|
+
"type": "boolean",
|
|
81
|
+
"mutable": false,
|
|
82
|
+
"complexType": {
|
|
83
|
+
"original": "boolean",
|
|
84
|
+
"resolved": "boolean",
|
|
85
|
+
"references": {}
|
|
86
|
+
},
|
|
87
|
+
"required": false,
|
|
88
|
+
"optional": false,
|
|
89
|
+
"docs": {
|
|
90
|
+
"tags": [],
|
|
91
|
+
"text": "When true, shows a \"Built with the Penn Libraries Design System\" line below the footer."
|
|
92
|
+
},
|
|
93
|
+
"getter": false,
|
|
94
|
+
"setter": false,
|
|
95
|
+
"reflect": false,
|
|
96
|
+
"attribute": "show-built-with",
|
|
97
|
+
"defaultValue": "false"
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
}
|
|
71
101
|
static get states() {
|
|
72
102
|
return {
|
|
73
103
|
"navigationByChildren": {}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pennlibs-footer.js","sourceRoot":"","sources":["../../../src/components/pennlibs-footer/pennlibs-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"pennlibs-footer.js","sourceRoot":"","sources":["../../../src/components/pennlibs-footer/pennlibs-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAOH,MAAM,OAAO,MAAM;IANnB;QAOE;;WAEG;QACK,kBAAa,GAAY,KAAK,CAAC;KAgGxC;IA1FC,iBAAiB;QACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,uBAAuB;QACrB,IAAI,CAAC;YACH,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;gBAC9B,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,CACtE,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE;oBACf,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;wBACf,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,SAAS;wBAC9C,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;4BAC1D,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAA;wBACnD,CAAC,CAAC;qBACH,CAAC,CAAA;oBAEF,OAAO,GAAG,CAAC;gBACb,CAAC,EAAE,EAAE,CAAC,CAAC;YACX,CAAC;QACH,CAAC;QAAC,WAAM,CAAC;YACP,OAAO,CAAC,IAAI,CAAC,iDAAiD,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;QAC5F,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,YAAY,CAAC,yBAAyB,CAAC,CAAC;QAEpE,OAAO,CACL,+DAAQ,KAAK,EAAC,wBAAwB;YACpC,4DAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE;oBACjC,UAAU,EAAE,iCAAiC,mBAAmB,qBAAqB;oBACrF,cAAc,EAAE,OAAO;iBACxB;gBACC,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,4DAAK,KAAK,EAAC,yBAAyB;wBAClC,4DAAK,KAAK,EAAC,iCAAiC;4BAC1C;gCACE,2DAAI,KAAK,EAAC,yBAAyB,qBAAoB;gCACvD,2DAAI,KAAK,EAAC,uBAAuB;oCAC/B;wCAAI,0DAAG,IAAI,EAAC,6FAA6F;;4CAAmB,4DAAM;0EAA+B,CAAK;oCACtK;wCAAI,0DAAG,IAAI,EAAC,oBAAoB,qBAAmB,CAAK;oCACxD;wCAAI,0DAAG,IAAI,EAAC,0CAA0C,iBAAe,CAAK;oCAC1E;wCAAI,0DAAG,IAAI,EAAC,2CAA2C,EAAC,MAAM,EAAC,QAAQ,0BAAwB,CAAK,CACjG,CACG;4BACV;gCACE,2DAAI,KAAK,EAAC,yBAAyB,oBAAmB;gCACtD,2DAAI,KAAK,EAAC,uBAAuB;oCAC/B;wCAAI,0DAAG,IAAI,EAAC,wCAAwC,iBAAe,CAAK;oCACxE;wCAAI,0DAAG,IAAI,EAAC,qCAAqC,gBAAc,CAAK;oCACpE;wCAAI,0DAAG,IAAI,EAAC,yCAAyC,eAAa,CAAK;oCACvE;wCAAI,0DAAG,IAAI,EAAC,iDAAiD,eAAa,CAAK,CAC5E,CACG;4BACT,IAAI,CAAC,oBAAoB,IAAI;gCAC5B,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CACvC;oCACE,UAAI,KAAK,EAAC,yBAAyB,IAAE,OAAO,CAAC,OAAO,CAAM;oCAC1D,UAAI,KAAK,EAAC,uBAAuB,IAC9B,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACzB;wCAAI,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,KAAK,CAAK,CAAK,CAC9C,CAAC,CACC,CACG,CACX,CAAC;6BACH,CACG,CACF,CACF;gBACN,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,4DAAK,KAAK,EAAC,kBAAkB;wBAC3B,2DAAI,KAAK,EAAC,qDAAqD;4BAC7D;gCAAI,0DAAG,IAAI,EAAC,wBAAwB,YAAU,CAAK;4BACnD;gCAAI,0DAAG,IAAI,EAAC,4CAA4C,qBAAmB,CAAK;4BAChF;gCAAI,0DAAG,IAAI,EAAC,wDAAwD,+CAA6C,CAAK;4BACtH;gCAAI,0DAAG,IAAI,EAAC,wCAAwC,iBAAe,CAAK;4BACxE;gCAAI,0DAAG,IAAI,EAAC,6CAA6C,yBAAuB,CAAK;4BACrF;gCAAI,0DAAG,IAAI,EAAC,2DAA2D,oCAAkC,CAAK,CAC3G,CACD,CACF,CACF;YACL,IAAI,CAAC,aAAa,IAAI,CACrB,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,0DAAG,KAAK,EAAC,YAAY;;oBAAgB,0DAAG,IAAI,EAAC,yCAAyC,mCAAiC;wBAAK,CACxH,CACP,CACM,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, getAssetPath, Prop, State } from '@stencil/core';\n\n/**\n * A footer component for Penn Libraries websites that displays contact information,\n * social media links, and custom navigation sections. Automatically organizes\n * child content into navigation sections based on headings and links.\n * \n * @component\n * @example\n * <pennlibs-footer>\n * <section>\n * <h2>Resources</h2>\n * <a href=\"/databases\">Databases</a>\n * <a href=\"/research-guides\">Research Guides</a>\n * </section>\n * <section>\n * <h2>Services</h2>\n * <a href=\"/consultation\">Research Consultation</a>\n * <a href=\"/instruction\">Library Instruction</a>\n * </section>\n * </pennlibs-footer>\n * \n * @slot default - Custom navigation sections with h2 headings and anchor links\n * \n * @prop --pl-viewport-margins-max-width: The maximum width of the footer content.\n * @prop --pl-viewport-margins-gutter: The gutter width of the footer content.\n */\n@Component({\n tag: 'pennlibs-footer',\n styleUrl: 'pennlibs-footer.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Footer {\n /**\n * When true, shows a \"Built with the Penn Libraries Design System\" line below the footer.\n */\n @Prop() showBuiltWith: boolean = false;\n\n @State() navigationByChildren;\n\n @Element() hostElement: HTMLElement;\n\n componentWillLoad() {\n this.setNavigationByChildren();\n }\n\n setNavigationByChildren() {\n try {\n if (this.hostElement.children) {\n this.navigationByChildren = Array.from(this.hostElement.children).reduce(\n (acc, element) => {\n acc = acc.concat({\n heading: element.querySelector('h2').innerText,\n links: Array.from(element.querySelectorAll('a')).map(link => {\n return { label: link.innerText, href: link.href }\n })\n })\n \n return acc;\n }, []);\n }\n } catch {\n console.warn('<pennlibs-footer> Composed with unexpected HTML', this.hostElement.children)\n }\n }\n\n render() {\n const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');\n \n return (\n <footer class=\"website-footer-wrapper\">\n <div class=\"website-footer\" style={{\n background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,\n backgroundSize: 'cover',\n }}>\n <div class=\"viewport-margins\">\n <div class=\"website-footer__content\">\n <div class=\"website-footer__links-container\">\n <section>\n <h2 class=\"website-footer__heading\">Penn Libraries</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206\">3420 Walnut Street<br />Philadelphia, PA 19104-6206</a></li>\n <li><a href=\"tel:(215) 898-7555\">(215) 898-7555</a></li>\n <li><a href=\"https://www.library.upenn.edu/contact-us\">Contact us</a></li>\n <li><a href=\"https://www.library.upenn.edu/about/hours\" target=\"_blank\">Locations and hours</a></li>\n </ul>\n </section>\n <section>\n <h2 class=\"website-footer__heading\">Stay in touch</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://www.alumni.upenn.edu/libsignup\">Newsletter</a></li>\n <li><a href=\"https://www.instagram.com/upennlib/\">Instagram</a></li>\n <li><a href=\"https://www.facebook.com/PennLibraries/\">Facebook</a></li>\n <li><a href=\"https://www.linkedin.com/company/penn-libraries\">LinkedIn</a></li>\n </ul>\n </section>\n {this.navigationByChildren && [\n this.navigationByChildren.map(section => (\n <section>\n <h2 class=\"website-footer__heading\">{section.heading}</h2>\n <ul class=\"website-footer__links\">\n {section.links.map(link => (\n <li><a href={link.href}>{link.label}</a></li>\n ))}\n </ul>\n </section>\n ))\n ]}\n </div>\n </div>\n </div>\n <div class=\"website-footer__footer\">\n <div class=\"viewport-margins\"> \n <ul class=\"website-footer__links website-footer__links--footer\">\n <li><a href=\"https://www.upenn.edu/\">UPenn</a></li>\n <li><a href=\"https://www.upenn.edu/about/privacy-policy\">Privacy Policy</a></li>\n <li><a href=\"https://accessibility.web-resources.upenn.edu/get-help\">Report Accessibility Issues and Get Help</a></li>\n <li><a href=\"https://www.upenn.edu/about/disclaimer\">Disclaimer</a></li>\n <li><a href=\"https://www.publicsafety.upenn.edu/contact/\">Emergency Services</a></li>\n <li><a href=\"https://www.upenn.edu/about/report-copyright-infringement\">Report Copyright Infringement</a></li>\n </ul>\n </div>\n </div>\n </div>\n {this.showBuiltWith && (\n <div class=\"viewport-margins\">\n <p class=\"built-with\">Built with the <a href=\"https://designsystem.library.upenn.edu/\">Penn Libraries Design System</a>.</p>\n </div>\n )}\n </footer>\n );\n }\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{:host{display:none}}*,*::before,*::after{box-sizing:border-box}.viewport-margins{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:
|
|
3
|
+
const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{:host{display:none}}*,*::before,*::after{box-sizing:border-box}.viewport-margins{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}p{margin:0;padding:calc(0.5em + 1px) 0}strong{font-weight:600}a{color:var(--pl-color-fg-accent);text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.25em 1.25em;font-family:var(--pl-font-family);font-weight:500;line-height:1.4;color:var(--pl-color-fg-default);background:var(--pl-color-bg-default);border:solid 1px var(--pl-color-fg-subtle);border-radius:1em;box-sizing:border-box}button:hover{cursor:pointer}button:hover span{text-decoration:underline}*:focus{outline:0;box-shadow:0 0 0 2px var(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis)}p:focus{outline:none;box-shadow:0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis)}@media (max-width: 26em){h2{display:block;width:100%;text-align:center}}.help-us{display:flex;flex-direction:column;gap:0.5em}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.visually-hidden:focus,.visually-hidden:active{clip:auto;clip-path:none;height:auto;overflow:visible;position:static;white-space:normal;width:auto}";
|
|
4
4
|
|
|
5
5
|
const FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';
|
|
6
6
|
const FEEDBACK_TIMESTAMP_KEY = 'pennlibs-feedback-timestamp';
|
|
@@ -49,7 +49,7 @@ const PennlibsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class PennlibsFeedba
|
|
|
49
49
|
});
|
|
50
50
|
}
|
|
51
51
|
render() {
|
|
52
|
-
return (h("div", { key: '04053c96e964ee9f240ca1a77d7944ae0f53248d', class: "feedback__container" }, h("div", { key: 'f5f524b449d3473c1ecc2d454787034c54a811a0', class: "viewport-margins" }, h("div", { key: 'd0c832edc9361dac49d9cbfc143332fea04434ea', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "Thank you for letting us know. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " if you need help.")) : (h("div", { class: "feedback__inline-question" }, h("h2", null, "Did you find what you need?"), h("button", { onClick: () => this.handleFeedback('yes') }, h("span", null, "Yes")), h("button", { onClick: () => this.handleFeedback('no') }, h("span", null, "No"))))), h("div", { key: '
|
|
52
|
+
return (h("div", { key: '04053c96e964ee9f240ca1a77d7944ae0f53248d', class: "feedback__container" }, h("div", { key: 'f5f524b449d3473c1ecc2d454787034c54a811a0', class: "viewport-margins" }, h("div", { key: 'd0c832edc9361dac49d9cbfc143332fea04434ea', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "Thank you for letting us know. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " if you need help.")) : (h("div", { class: "feedback__inline-question" }, h("h2", null, "Did you find what you need?"), h("button", { onClick: () => this.handleFeedback('yes') }, h("span", null, "Yes"), h("span", { class: "visually-hidden" }, ", I found what I needed.")), h("button", { onClick: () => this.handleFeedback('no') }, h("span", null, "No"), h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), h("div", { key: '9d4de668c9e3696d8983c48fcc20ea89b2163ea1', class: "feedback__share-feedback" }, h("p", { key: '1377153ebba81c48b0a70756b190503b9cd33c61' }, "To help us improve, ", h("a", { key: '26f3f05b0af848ff58d959190a380d5b64db254a', href: "http://library.upenn.edu/feedback" }, "share your feedback"), "."))))));
|
|
53
53
|
}
|
|
54
54
|
static get style() { return pennlibsFeedbackCss; }
|
|
55
55
|
}, [257, "pennlibs-feedback", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pennlibs-feedback.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,84DAA84D;;ACE16D,MAAM,oBAAoB,GAAG,0BAA0B;AACvD,MAAM,sBAAsB,GAAG,6BAA6B;AAC5D,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC;AACnC,MAAM,iBAAiB,GAAG,sBAAsB;AAChD,MAAM,0BAA0B,GAAG,yBAAyB;MAkB/CA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAL7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAE5B,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACtB,QAAA,IAAM,CAAA,MAAA,GAAuB,SAAS;AA6EhD;IA1DC,iBAAiB,GAAA;QACf,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,CAAC,sBAAsB,CAAC;AAChE,QAAA,IAAI,SAAS,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE;AAC9D,YAAA,cAAc,CAAC,UAAU,CAAC,oBAAoB,CAAC;AAC/C,YAAA,cAAc,CAAC,UAAU,CAAC,sBAAsB,CAAC;;AAGnD,QAAA,IAAI,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE;YAChD,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAW;;AAGtE,QAAA,IAAI,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,EAAE;YACtD,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,KAAK,MAAM;;;AAI9E,IAAA,cAAc,CAAC,MAAc,EAAA;;AAC3B,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;AACpB,QAAA,cAAc,CAAC,OAAO,CAAC,oBAAoB,EAAE,MAAM,CAAC;AACpD,QAAA,cAAc,CAAC,OAAO,CAAC,sBAAsB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;AAElE,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AACtB,YAAA,QAAQ,EAAE,iBAAiB;AAC3B,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI;AACzB,YAAA,WAAW,EAAE,CAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,WAAW,KAAI,SAAS;AACnE,YAAA,SAAS,EAAE,QAAQ,CAAC,KAAK,IAAI;AAC9B,SAAA,CAAC;;IAGJ,MAAM,GAAA;
|
|
1
|
+
{"file":"pennlibs-feedback.js","mappings":"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","names":["PennlibsFeedback","__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-feedback/pennlibs-feedback.css?tag=pennlibs-feedback&encapsulation=shadow","src/components/pennlibs-feedback/pennlibs-feedback.tsx"],"sourcesContent":["/* Component Root Styles\n---------------------------------------- */\n:host {\n display: block;\n background: #eeeff4;\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n color: var(--pl-color-fg-default);\n line-height: 1.4;\n box-sizing: border-box;\n padding: 0.75em 0;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n.viewport-margins {\n max-width: var(--pl-viewport-margins-max-width);\n margin: 0 auto;\n padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.feedback__content {\n display: flex;\n justify-content: space-between;\n gap: var(--pl-space-s);\n flex-wrap: wrap;\n}\n\n/* Container Layout\n---------------------------------------- */\n.feedback__inline-question {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5em;\n align-items: center;\n}\n\n/* Typography\n---------------------------------------- */\nh2 {\n display: inline-block;\n margin: 0;\n font-family: var(--pl-font-sans-serif);\n font-size: 1em;\n font-weight: 400;\n}\n\np {\n margin: 0;\n padding: calc(0.5em + 1px) 0;\n}\n\nstrong {\n font-weight: 600;\n}\n\n/* Links\n---------------------------------------- */\na {\n color: var(--pl-color-fg-accent);\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n}\n\n/* Buttons\n---------------------------------------- */\nbutton {\n all: unset;\n display: flex;\n align-items: center;\n gap: 0.5em;\n padding: 0.25em 1.25em;\n font-family: var(--pl-font-family);\n font-weight: 500;\n line-height: 1.4;\n color: var(--pl-color-fg-default);\n background: var(--pl-color-bg-default);\n border: solid 1px var(--pl-color-fg-subtle);\n border-radius: 1em;\n box-sizing: border-box;\n}\n\nbutton:hover {\n cursor: pointer;\n}\n\nbutton:hover span {\n text-decoration: underline;\n}\n\n/* Focus States\n---------------------------------------- */\n*:focus {\n outline: 0;\n box-shadow: \n 0 0 0 2px var(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis);\n}\n\np:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis);\n}\n\n/* Responsive Adjustments\n---------------------------------------- */\n@media (max-width: 26em) {\n h2 {\n display: block;\n width: 100%;\n text-align: center;\n }\n}\n\n.help-us {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n}\n\n/* Accessibility Helpers\n---------------------------------------- */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n/* This ensures the element remains hidden even when focused */\n.visually-hidden:focus,\n.visually-hidden:active {\n clip: auto;\n clip-path: none;\n height: auto;\n overflow: visible;\n position: static;\n white-space: normal;\n width: auto;\n}","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\nconst FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';\nconst FEEDBACK_TIMESTAMP_KEY = 'pennlibs-feedback-timestamp';\nconst FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes\nconst FEEDBACK_QUESTION = 'Is this page useful?';\nconst FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';\n\n/**\n * A feedback component that asks visitors \"Did you find what you need?\" and\n * links to a feedback form. The answer is stored in sessionStorage for 5 minutes\n * to avoid re-prompting during a browsing session.\n *\n * @example\n * <pennlibs-feedback></pennlibs-feedback>\n *\n * @example\n * <pennlibs-feedback hide-question></pennlibs-feedback>\n */\n@Component({\n tag: 'pennlibs-feedback',\n styleUrl: 'pennlibs-feedback.css',\n shadow: true,\n})\nexport class PennlibsFeedback {\n /**\n * When true, hides the yes/no question and only shows the \"share your feedback\" link.\n */\n @Prop() hideQuestion: boolean = false;\n\n @State() error: boolean = false;\n @State() answer: string | undefined = undefined;\n\n /**\n * Emitted when a visitor answers the feedback question. Includes the question,\n * answer, current URL, and page heading/title for context.\n */\n @Event({\n eventName: 'pennlibs-feedback',\n composed: true,\n cancelable: true,\n bubbles: true,\n }) feedbackEvent!: EventEmitter<{\n question: string;\n answer: string;\n url: string;\n pageHeading?: string;\n pageTitle?: string;\n }>;\n\n componentWillLoad() {\n const timestamp = sessionStorage.getItem(FEEDBACK_TIMESTAMP_KEY);\n if (timestamp && Date.now() - Number(timestamp) > FEEDBACK_TTL) {\n sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);\n sessionStorage.removeItem(FEEDBACK_TIMESTAMP_KEY);\n }\n\n if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {\n this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY) as string;\n }\n\n if (sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY)) {\n this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';\n }\n }\n\n handleFeedback(answer: string) {\n this.answer = answer;\n sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);\n sessionStorage.setItem(FEEDBACK_TIMESTAMP_KEY, String(Date.now()));\n \n this.feedbackEvent.emit({\n question: FEEDBACK_QUESTION,\n answer: answer,\n url: window.location.href,\n pageHeading: document.querySelector('h1')?.textContent || undefined,\n pageTitle: document.title || undefined\n });\n }\n \n render() {\n return (\n <div class=\"feedback__container\">\n <div class=\"viewport-margins\">\n <div class=\"feedback__content\">\n {!this.hideQuestion && (this.answer === 'yes' ? (\n <p>Thank you for letting us know.</p>\n ) : this.answer === 'no' ? (\n <p>Thank you for letting us know. <a href=\"https://www.library.upenn.edu/contact-us\">Contact us</a> if you need help.</p>\n ) : (\n <div class=\"feedback__inline-question\">\n <h2>Did you find what you need?</h2>\n <button onClick={() => this.handleFeedback('yes')}>\n <span>Yes</span><span class=\"visually-hidden\">, I found what I needed.</span>\n </button>\n <button onClick={() => this.handleFeedback('no')}>\n <span>No</span><span class=\"visually-hidden\">, I did not find what I needed.</span>\n </button>\n </div>\n ))}\n <div class=\"feedback__share-feedback\">\n <p>To help us improve, <a href=\"http://library.upenn.edu/feedback\">share your feedback</a>.</p>\n </div>\n </div>\n </div>\n </div>\n )\n }\n}\n\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const pennlibsFooterCss = ":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n --padding-bottom: 3em;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n background: var(--pl-color-penn-blue);\n padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n max-width: var(--pl-viewport-margins-max-width);\n margin: 0 auto;\n padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n background-size: cover;\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n color: var(--pl-color-
|
|
3
|
+
const pennlibsFooterCss = ":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n --padding-bottom: 3em;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n background: var(--pl-color-penn-blue);\n padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n max-width: var(--pl-viewport-margins-max-width);\n margin: 0 auto;\n padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n background-size: cover;\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with a {\n font-weight: 500;\n text-underline-offset: var(--pl-link-text-underline-offset);\n\n &:hover {\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n }\n}\n\n.built-with {\n opacity: 0.875;\n margin: 0; \n padding: 1.5em 0;\n font-size: 0.875em;\n}\n\n.website-footer__content {\n padding: 4em 0;\n}\n\n.website-footer__links-container {\n gap: 4em 2em;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n font-size: 0.8em;\n text-transform: uppercase;\n letter-spacing: 0.075em;\n margin-bottom: 1em;\n opacity: 0.75;\n}\n\n.website-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n}\n\n.website-footer__links a {\n text-decoration: none;\n}\n\n.website-footer__links a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n padding: 1em 0;\n background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n display: flex;\n flex-wrap: wrap;\n gap: 0;\n flex-direction: row;\n margin-left: -0.75em;\n\n @media (max-width: 1080px) {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n }\n}\n\n.website-footer__links--footer a {\n display: inline-block;\n padding: 0.5em 0.75em;\n font-size: 0.875em;\n opacity: 0.875;\n font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}";
|
|
4
4
|
|
|
5
5
|
const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
|
|
6
6
|
constructor(registerHost) {
|
|
@@ -9,6 +9,10 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
|
|
|
9
9
|
this.__registerHost();
|
|
10
10
|
}
|
|
11
11
|
this.__attachShadow();
|
|
12
|
+
/**
|
|
13
|
+
* When true, shows a "Built with the Penn Libraries Design System" line below the footer.
|
|
14
|
+
*/
|
|
15
|
+
this.showBuiltWith = false;
|
|
12
16
|
}
|
|
13
17
|
componentWillLoad() {
|
|
14
18
|
this.setNavigationByChildren();
|
|
@@ -33,17 +37,18 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
|
|
|
33
37
|
}
|
|
34
38
|
render() {
|
|
35
39
|
const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
|
|
36
|
-
return (h("footer", { key: '
|
|
40
|
+
return (h("footer", { key: '39b1bc7336fe2aa28e8c6093d13b8dfb3dd70d3e', class: "website-footer-wrapper" }, h("div", { key: '7902cf7cde3a468dec8ea71c2a139addafa5af79', class: "website-footer", style: {
|
|
37
41
|
background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
38
42
|
backgroundSize: 'cover',
|
|
39
|
-
} }, h("div", { key: '
|
|
43
|
+
} }, h("div", { key: '804f9cd3f101997ee2d15d4a4749945ef553a118', class: "viewport-margins" }, h("div", { key: '3a09637400e74e729641666eb8142c0cf77d66b3', class: "website-footer__content" }, h("div", { key: 'cdb9270db298aa7781859a80c799949cb4c35787', class: "website-footer__links-container" }, h("section", { key: '20d953d2b85178798d2298aa8aaa9fb8e47d7af4' }, h("h2", { key: '79b1fe7f4fc2dff03134c7d4e96e9fd657131fc8', class: "website-footer__heading" }, "Penn Libraries"), h("ul", { key: 'ba8002b17457f979f9817c45a89f332064f0b5bb', class: "website-footer__links" }, h("li", { key: 'cb65fc4ad6432ef447a4b98a8dfdc0323bf37ccc' }, h("a", { key: '0b61506da9a1c18919f77410fa39d3937f7485df', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", h("br", { key: 'ebd3def13a3107d1b301c0932d421b054e2bb338' }), "Philadelphia, PA 19104-6206")), h("li", { key: '3f26ebab3b90a33ba2d17cd3cfd8a485f1c7e74f' }, h("a", { key: 'c2dcf7a3d936eb5376b2568e677bb8a7dc7ab445', href: "tel:(215) 898-7555" }, "(215) 898-7555")), h("li", { key: '8c9374110f2d386c7275fad9522ea2565daf6c06' }, h("a", { key: 'd40a2fd7490f1b233e4839e38faf29d9bb04f519', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), h("li", { key: 'ab3016b1cfcc8827af060ec383d8556e8346713a' }, h("a", { key: '76a8d246128fb76606c1cdf24640198c23c9d317', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), h("section", { key: 'fd0abacbc35ffaafbb2016064c7a6194616ee2dc' }, h("h2", { key: 'a812d7d26e21a1808ce6bd115ec620e1b033a8bf', class: "website-footer__heading" }, "Stay in touch"), h("ul", { key: 'fe158ff1336379e1236a88c4a3d0f5e1efd9cdb8', class: "website-footer__links" }, h("li", { key: '32396df360b39190ff587400fabe405ee319a507' }, h("a", { key: '07ac56362dde7a2807e86c2a22564689ed9de90c', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), h("li", { key: '95abd2bf0f6a79c0597c1e57e878f986002adde2' }, h("a", { key: '374044fae62fd82c9369cfba8b7c6223ded48d5a', href: "https://www.instagram.com/upennlib/" }, "Instagram")), h("li", { key: '86cc74d4ec21dfb51a072cfad87ed395e961f26f' }, h("a", { key: 'fda9e8c73918252b91e40dc23d289613a3fe5802', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), h("li", { key: 'b1ce60d7aa5ac8a2aa8bd4f826c11cc753b1488c' }, h("a", { key: 'ccfef8131fc7f9edd44936f1c212d31c08c61682', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
|
|
40
44
|
this.navigationByChildren.map(section => (h("section", null, h("h2", { class: "website-footer__heading" }, section.heading), h("ul", { class: "website-footer__links" }, section.links.map(link => (h("li", null, h("a", { href: link.href }, link.label))))))))
|
|
41
|
-
]))), h("div", { key: '
|
|
45
|
+
]))), h("div", { key: '4430d39b9b8943d9336020d5ed04cdb80a3b91af', class: "website-footer__footer" }, h("div", { key: '437f0b8894b63c3857f8871eaaaf3d28277738ad', class: "viewport-margins" }, h("ul", { key: '8c4ac37a89006d543a66c8c1ba6bc9d7acc0d6db', class: "website-footer__links website-footer__links--footer" }, h("li", { key: 'ac1db31f3c5331a26c0aee171974c10f22d5da08' }, h("a", { key: 'ad8a6251cca9b0c904ccecff96a8800b22ed5568', href: "https://www.upenn.edu/" }, "UPenn")), h("li", { key: '1189f7119ec768d34ea9435f9ff85df2764abe61' }, h("a", { key: 'eb53d4f15fe49d32899d435670a34369a4e7e190', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), h("li", { key: 'd2a155f7f91a31cca41df9d0c9d37f151bded247' }, h("a", { key: '8e329a895a25bd139867063dd7eed9c0aa7c0060', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), h("li", { key: '0b65f3da18b54b91158515d7966e010e4e0d64ac' }, h("a", { key: 'f8615c438f94216372fdb8afa26ae7150bbef816', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), h("li", { key: 'cbf5febfb926a1b569e73d4a57e7ca8315f6d876' }, h("a", { key: '1116c792623c0fa819ce0189e105ee54c69ba73e', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), h("li", { key: '385a84f264b263a9738d38d66ac917e3a6055db4' }, h("a", { key: 'dcd8517fb32ae46b983cb4802adb86e33e29bd71', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), this.showBuiltWith && (h("div", { key: 'd3bca43144b06b50091b54dee5c8734de4f80d60', class: "viewport-margins" }, h("p", { key: 'a3d974ea56f521406bffc2a8eaf6b6e6c57bb595', class: "built-with" }, "Built with the ", h("a", { key: '7aa9fc3901510e0ad7d2b0ca4abf4f8c6f92d735', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System"), ".")))));
|
|
42
46
|
}
|
|
43
47
|
static get assetsDirs() { return ["assets"]; }
|
|
44
48
|
get hostElement() { return this; }
|
|
45
49
|
static get style() { return pennlibsFooterCss; }
|
|
46
50
|
}, [257, "pennlibs-footer", {
|
|
51
|
+
"showBuiltWith": [4, "show-built-with"],
|
|
47
52
|
"navigationByChildren": [32]
|
|
48
53
|
}]);
|
|
49
54
|
function defineCustomElement$1() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pennlibs-footer.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-footer/pennlibs-footer.css?tag=pennlibs-footer&encapsulation=shadow","src/components/pennlibs-footer/pennlibs-footer.tsx"],"sourcesContent":[":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n --padding-bottom: 3em;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n background: var(--pl-color-penn-blue);\n padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n max-width: var(--pl-viewport-margins-max-width);\n margin: 0 auto;\n padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n background-size: cover;\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n color: var(--pl-color-gray-blue-light);\n}\n\n.built-with {\n opacity: 0.85;\n margin: 0; \n padding: 1.5em 0;\n font-size: 0.875em;\n}\n\n.website-footer__content {\n padding: 4em 0;\n}\n\n.website-footer__links-container {\n gap: 4em 2em;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n font-size: 0.8em;\n text-transform: uppercase;\n letter-spacing: 0.075em;\n margin-bottom: 1em;\n opacity: 0.75;\n}\n\n.website-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n}\n\n.website-footer__links a {\n text-decoration: none;\n}\n\n.website-footer__links a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n padding: 1em 0;\n background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n display: flex;\n flex-wrap: wrap;\n gap: 0;\n flex-direction: row;\n margin-left: -0.5em;\n\n @media (max-width: 1080px) {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n }\n}\n\n.website-footer__links--footer a {\n display: inline-block;\n padding: 0.5em 0.75em;\n font-size: 0.875em;\n opacity: 0.875;\n font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}","import { Component, Element, h, getAssetPath, State } from '@stencil/core';\n\n/**\n * A footer component for Penn Libraries websites that displays contact information,\n * social media links, and custom navigation sections. Automatically organizes\n * child content into navigation sections based on headings and links.\n * \n * @component\n * @example\n * <pennlibs-footer>\n * <section>\n * <h2>Resources</h2>\n * <a href=\"/databases\">Databases</a>\n * <a href=\"/research-guides\">Research Guides</a>\n * </section>\n * <section>\n * <h2>Services</h2>\n * <a href=\"/consultation\">Research Consultation</a>\n * <a href=\"/instruction\">Library Instruction</a>\n * </section>\n * </pennlibs-footer>\n * \n * @slot default - Custom navigation sections with h2 headings and anchor links\n * \n * @prop --pl-viewport-margins-max-width: The maximum width of the footer content.\n * @prop --pl-viewport-margins-gutter: The gutter width of the footer content.\n */\n@Component({\n tag: 'pennlibs-footer',\n styleUrl: 'pennlibs-footer.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Footer {\n @State() navigationByChildren;\n\n @Element() hostElement: HTMLElement;\n\n componentWillLoad() {\n this.setNavigationByChildren();\n }\n\n setNavigationByChildren() {\n try {\n if (this.hostElement.children) {\n this.navigationByChildren = Array.from(this.hostElement.children).reduce(\n (acc, element) => {\n acc = acc.concat({\n heading: element.querySelector('h2').innerText,\n links: Array.from(element.querySelectorAll('a')).map(link => {\n return { label: link.innerText, href: link.href }\n })\n })\n \n return acc;\n }, []);\n }\n } catch {\n console.warn('<pennlibs-footer> Composed with unexpected HTML', this.hostElement.children)\n }\n }\n\n render() {\n const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');\n \n return (\n <footer class=\"website-footer-wrapper\">\n <div class=\"website-footer\" style={{\n background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,\n backgroundSize: 'cover',\n }}>\n <div class=\"viewport-margins\">\n <div class=\"website-footer__content\">\n <div class=\"website-footer__links-container\">\n <section>\n <h2 class=\"website-footer__heading\">Penn Libraries</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206\">3420 Walnut Street<br />Philadelphia, PA 19104-6206</a></li>\n <li><a href=\"tel:(215) 898-7555\">(215) 898-7555</a></li>\n <li><a href=\"https://www.library.upenn.edu/contact-us\">Contact us</a></li>\n <li><a href=\"https://www.library.upenn.edu/about/hours\" target=\"_blank\">Locations and hours</a></li>\n </ul>\n </section>\n <section>\n <h2 class=\"website-footer__heading\">Stay in touch</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://www.alumni.upenn.edu/libsignup\">Newsletter</a></li>\n <li><a href=\"https://www.instagram.com/upennlib/\">Instagram</a></li>\n <li><a href=\"https://www.facebook.com/PennLibraries/\">Facebook</a></li>\n <li><a href=\"https://www.linkedin.com/company/penn-libraries\">LinkedIn</a></li>\n </ul>\n </section>\n {this.navigationByChildren && [\n this.navigationByChildren.map(section => (\n <section>\n <h2 class=\"website-footer__heading\">{section.heading}</h2>\n <ul class=\"website-footer__links\">\n {section.links.map(link => (\n <li><a href={link.href}>{link.label}</a></li>\n ))}\n </ul>\n </section>\n ))\n ]}\n </div>\n </div>\n </div>\n <div class=\"website-footer__footer\">\n <div class=\"viewport-margins\"> \n <ul class=\"website-footer__links website-footer__links--footer\">\n <li><a href=\"https://www.upenn.edu/\">UPenn</a></li>\n <li><a href=\"https://www.upenn.edu/about/privacy-policy\">Privacy Policy</a></li>\n <li><a href=\"https://accessibility.web-resources.upenn.edu/get-help\">Report Accessibility Issues and Get Help</a></li>\n <li><a href=\"https://www.upenn.edu/about/disclaimer\">Disclaimer</a></li>\n <li><a href=\"https://www.publicsafety.upenn.edu/contact/\">Emergency Services</a></li>\n <li><a href=\"https://www.upenn.edu/about/report-copyright-infringement\">Report Copyright Infringement</a></li>\n </ul>\n </div>\n </div>\n </div>\n <div class=\"viewport-margins\">\n <p class=\"built-with\">Built with the <a href=\"https://designsystem.library.upenn.edu/\">Penn Libraries Design System</a></p>\n </div>\n </footer>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"pennlibs-footer.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-footer/pennlibs-footer.css?tag=pennlibs-footer&encapsulation=shadow","src/components/pennlibs-footer/pennlibs-footer.tsx"],"sourcesContent":[":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n --padding-bottom: 3em;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n background: var(--pl-color-penn-blue);\n padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n max-width: var(--pl-viewport-margins-max-width);\n margin: 0 auto;\n padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n background-size: cover;\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with a {\n font-weight: 500;\n text-underline-offset: var(--pl-link-text-underline-offset);\n\n &:hover {\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n }\n}\n\n.built-with {\n opacity: 0.875;\n margin: 0; \n padding: 1.5em 0;\n font-size: 0.875em;\n}\n\n.website-footer__content {\n padding: 4em 0;\n}\n\n.website-footer__links-container {\n gap: 4em 2em;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n font-size: 0.8em;\n text-transform: uppercase;\n letter-spacing: 0.075em;\n margin-bottom: 1em;\n opacity: 0.75;\n}\n\n.website-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n}\n\n.website-footer__links a {\n text-decoration: none;\n}\n\n.website-footer__links a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n padding: 1em 0;\n background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n display: flex;\n flex-wrap: wrap;\n gap: 0;\n flex-direction: row;\n margin-left: -0.75em;\n\n @media (max-width: 1080px) {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n }\n}\n\n.website-footer__links--footer a {\n display: inline-block;\n padding: 0.5em 0.75em;\n font-size: 0.875em;\n opacity: 0.875;\n font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}","import { Component, Element, h, getAssetPath, Prop, State } from '@stencil/core';\n\n/**\n * A footer component for Penn Libraries websites that displays contact information,\n * social media links, and custom navigation sections. Automatically organizes\n * child content into navigation sections based on headings and links.\n * \n * @component\n * @example\n * <pennlibs-footer>\n * <section>\n * <h2>Resources</h2>\n * <a href=\"/databases\">Databases</a>\n * <a href=\"/research-guides\">Research Guides</a>\n * </section>\n * <section>\n * <h2>Services</h2>\n * <a href=\"/consultation\">Research Consultation</a>\n * <a href=\"/instruction\">Library Instruction</a>\n * </section>\n * </pennlibs-footer>\n * \n * @slot default - Custom navigation sections with h2 headings and anchor links\n * \n * @prop --pl-viewport-margins-max-width: The maximum width of the footer content.\n * @prop --pl-viewport-margins-gutter: The gutter width of the footer content.\n */\n@Component({\n tag: 'pennlibs-footer',\n styleUrl: 'pennlibs-footer.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Footer {\n /**\n * When true, shows a \"Built with the Penn Libraries Design System\" line below the footer.\n */\n @Prop() showBuiltWith: boolean = false;\n\n @State() navigationByChildren;\n\n @Element() hostElement: HTMLElement;\n\n componentWillLoad() {\n this.setNavigationByChildren();\n }\n\n setNavigationByChildren() {\n try {\n if (this.hostElement.children) {\n this.navigationByChildren = Array.from(this.hostElement.children).reduce(\n (acc, element) => {\n acc = acc.concat({\n heading: element.querySelector('h2').innerText,\n links: Array.from(element.querySelectorAll('a')).map(link => {\n return { label: link.innerText, href: link.href }\n })\n })\n \n return acc;\n }, []);\n }\n } catch {\n console.warn('<pennlibs-footer> Composed with unexpected HTML', this.hostElement.children)\n }\n }\n\n render() {\n const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');\n \n return (\n <footer class=\"website-footer-wrapper\">\n <div class=\"website-footer\" style={{\n background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,\n backgroundSize: 'cover',\n }}>\n <div class=\"viewport-margins\">\n <div class=\"website-footer__content\">\n <div class=\"website-footer__links-container\">\n <section>\n <h2 class=\"website-footer__heading\">Penn Libraries</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206\">3420 Walnut Street<br />Philadelphia, PA 19104-6206</a></li>\n <li><a href=\"tel:(215) 898-7555\">(215) 898-7555</a></li>\n <li><a href=\"https://www.library.upenn.edu/contact-us\">Contact us</a></li>\n <li><a href=\"https://www.library.upenn.edu/about/hours\" target=\"_blank\">Locations and hours</a></li>\n </ul>\n </section>\n <section>\n <h2 class=\"website-footer__heading\">Stay in touch</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://www.alumni.upenn.edu/libsignup\">Newsletter</a></li>\n <li><a href=\"https://www.instagram.com/upennlib/\">Instagram</a></li>\n <li><a href=\"https://www.facebook.com/PennLibraries/\">Facebook</a></li>\n <li><a href=\"https://www.linkedin.com/company/penn-libraries\">LinkedIn</a></li>\n </ul>\n </section>\n {this.navigationByChildren && [\n this.navigationByChildren.map(section => (\n <section>\n <h2 class=\"website-footer__heading\">{section.heading}</h2>\n <ul class=\"website-footer__links\">\n {section.links.map(link => (\n <li><a href={link.href}>{link.label}</a></li>\n ))}\n </ul>\n </section>\n ))\n ]}\n </div>\n </div>\n </div>\n <div class=\"website-footer__footer\">\n <div class=\"viewport-margins\"> \n <ul class=\"website-footer__links website-footer__links--footer\">\n <li><a href=\"https://www.upenn.edu/\">UPenn</a></li>\n <li><a href=\"https://www.upenn.edu/about/privacy-policy\">Privacy Policy</a></li>\n <li><a href=\"https://accessibility.web-resources.upenn.edu/get-help\">Report Accessibility Issues and Get Help</a></li>\n <li><a href=\"https://www.upenn.edu/about/disclaimer\">Disclaimer</a></li>\n <li><a href=\"https://www.publicsafety.upenn.edu/contact/\">Emergency Services</a></li>\n <li><a href=\"https://www.upenn.edu/about/report-copyright-infringement\">Report Copyright Infringement</a></li>\n </ul>\n </div>\n </div>\n </div>\n {this.showBuiltWith && (\n <div class=\"viewport-margins\">\n <p class=\"built-with\">Built with the <a href=\"https://designsystem.library.upenn.edu/\">Penn Libraries Design System</a>.</p>\n </div>\n )}\n </footer>\n );\n }\n}\n"],"version":3}
|