@penn-libraries/web 0.3.0-dev.2 → 0.3.0-dev.3
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/app-globals-V2Kpy_OQ.js +8 -0
- package/dist/cjs/app-globals-V2Kpy_OQ.js.map +1 -0
- package/dist/cjs/{index-c02f277e.js → index-B6Rjt_WH.js} +339 -196
- package/dist/cjs/index-B6Rjt_WH.js.map +1 -0
- package/dist/cjs/index.cjs.js +2 -3
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +4 -5
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-banner.cjs.entry.js +3 -5
- package/dist/cjs/pennlibs-banner.cjs.entry.js.map +1 -1
- package/dist/cjs/pennlibs-banner.entry.cjs.js.map +1 -0
- package/dist/cjs/pennlibs-chat.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.cjs.js.map +1 -0
- package/dist/cjs/{pennlibs-chat_4.cjs.entry.js → pennlibs-chat_5.cjs.entry.js} +69 -50
- package/dist/cjs/pennlibs-chat_5.cjs.entry.js.map +1 -0
- package/dist/cjs/pennlibs-colors.cjs.entry.js +3 -6
- package/dist/cjs/pennlibs-colors.cjs.entry.js.map +1 -1
- package/dist/cjs/pennlibs-colors.entry.cjs.js.map +1 -0
- package/dist/cjs/web.cjs.js +8 -7
- package/dist/cjs/web.cjs.js.map +1 -1
- package/dist/collection/collection-manifest.json +4 -3
- package/dist/collection/components/pennlibs-chat/pennlibs-chat.js.map +1 -1
- package/dist/collection/components/pennlibs-colors/pennlibs-colors.js +4 -4
- package/dist/collection/components/pennlibs-colors/pennlibs-colors.js.map +1 -1
- package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js.map +1 -1
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.js +4 -5
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.js.map +1 -1
- package/dist/collection/components/pennlibs-header/pennlibs-header.css +2 -114
- package/dist/collection/components/pennlibs-header/pennlibs-header.js +35 -27
- package/dist/collection/components/pennlibs-header/pennlibs-header.js.map +1 -1
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.css +132 -0
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.js +71 -0
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.js.map +1 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/pennlibs-banner.js +2 -2
- package/dist/components/pennlibs-banner.js.map +1 -1
- package/dist/components/pennlibs-chat.js +2 -2
- package/dist/components/pennlibs-chat.js.map +1 -1
- package/dist/components/pennlibs-colors.js +2 -3
- package/dist/components/pennlibs-colors.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 +2 -4
- package/dist/components/pennlibs-footer.js.map +1 -1
- package/dist/components/pennlibs-header.js +10 -41
- package/dist/components/pennlibs-header.js.map +1 -1
- package/dist/components/pennlibs-hero.d.ts +11 -0
- package/dist/components/pennlibs-hero.js +83 -0
- package/dist/components/pennlibs-hero.js.map +1 -0
- package/dist/esm/app-globals-DQuL1Twl.js +6 -0
- package/dist/esm/app-globals-DQuL1Twl.js.map +1 -0
- package/dist/{web/p-085cc320.js → esm/index-BQRdy1TQ.js} +339 -176
- package/dist/esm/index-BQRdy1TQ.js.map +1 -0
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +5 -4
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/pennlibs-banner.entry.js +3 -3
- package/dist/esm/pennlibs-banner.entry.js.map +1 -1
- package/dist/esm/pennlibs-chat.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.js.map +1 -0
- package/dist/{web/p-9cc59a0b.entry.js → esm/pennlibs-chat_5.entry.js} +69 -49
- package/dist/esm/pennlibs-chat_5.entry.js.map +1 -0
- package/dist/esm/pennlibs-colors.entry.js +3 -4
- package/dist/esm/pennlibs-colors.entry.js.map +1 -1
- package/dist/esm/web.js +7 -5
- package/dist/esm/web.js.map +1 -1
- package/dist/types/components/pennlibs-header/pennlibs-header.d.ts +4 -3
- package/dist/types/components/pennlibs-hero/pennlibs-hero.d.ts +13 -0
- package/dist/types/components.d.ts +21 -0
- package/dist/types/stencil-public-runtime.d.ts +9 -0
- package/dist/web/index.esm.js +2 -1
- package/dist/web/index.esm.js.map +1 -1
- package/dist/web/loader.esm.js.map +1 -0
- package/dist/web/{p-1910ca46.entry.js → p-2edaa432.entry.js} +4 -5
- package/dist/web/p-2edaa432.entry.js.map +1 -0
- package/dist/{esm/index-99779d4a.js → web/p-BQRdy1TQ.js} +339 -176
- package/dist/web/p-BQRdy1TQ.js.map +1 -0
- package/dist/web/p-DQuL1Twl.js +6 -0
- package/dist/web/p-DQuL1Twl.js.map +1 -0
- package/dist/{esm/pennlibs-chat_4.entry.js → web/p-a921fec4.entry.js} +69 -49
- package/dist/web/p-a921fec4.entry.js.map +1 -0
- package/dist/web/{p-9cf4cb70.entry.js → p-dac033ee.entry.js} +4 -4
- package/dist/web/p-dac033ee.entry.js.map +1 -0
- package/dist/web/pennlibs-banner.entry.esm.js.map +1 -0
- package/dist/web/pennlibs-chat.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.esm.js.map +1 -0
- package/dist/web/pennlibs-colors.entry.esm.js.map +1 -0
- package/dist/web/web.css +1 -0
- package/dist/web/web.esm.js +7 -5
- package/dist/web/web.esm.js.map +1 -1
- package/package.json +4 -4
- package/dist/cjs/app-globals-3a1e7e63.js +0 -7
- package/dist/cjs/app-globals-3a1e7e63.js.map +0 -1
- package/dist/cjs/index-c02f277e.js.map +0 -1
- package/dist/cjs/pennlibs-chat_4.cjs.entry.js.map +0 -1
- package/dist/collection/components/pennlibs-header/container.js +0 -8
- package/dist/collection/components/pennlibs-header/container.js.map +0 -1
- package/dist/esm/app-globals-0f993ce5.js +0 -5
- package/dist/esm/app-globals-0f993ce5.js.map +0 -1
- package/dist/esm/index-99779d4a.js.map +0 -1
- package/dist/esm/pennlibs-chat_4.entry.js.map +0 -1
- package/dist/types/components/pennlibs-header/container.d.ts +0 -8
- package/dist/web/p-085cc320.js.map +0 -1
- package/dist/web/p-1910ca46.entry.js.map +0 -1
- package/dist/web/p-9cc59a0b.entry.js.map +0 -1
- package/dist/web/p-9cf4cb70.entry.js.map +0 -1
- package/dist/web/p-e1255160.js +0 -5
- package/dist/web/p-e1255160.js.map +0 -1
- package/loader/package.json +0 -11
|
@@ -5,12 +5,13 @@
|
|
|
5
5
|
"components/pennlibs-colors/pennlibs-colors.js",
|
|
6
6
|
"components/pennlibs-feedback/pennlibs-feedback.js",
|
|
7
7
|
"components/pennlibs-footer/pennlibs-footer.js",
|
|
8
|
-
"components/pennlibs-header/pennlibs-header.js"
|
|
8
|
+
"components/pennlibs-header/pennlibs-header.js",
|
|
9
|
+
"components/pennlibs-hero/pennlibs-hero.js"
|
|
9
10
|
],
|
|
10
11
|
"compiler": {
|
|
11
12
|
"name": "@stencil/core",
|
|
12
|
-
"version": "4.
|
|
13
|
-
"typescriptVersion": "5.5.
|
|
13
|
+
"version": "4.29.3",
|
|
14
|
+
"typescriptVersion": "5.5.4"
|
|
14
15
|
},
|
|
15
16
|
"collections": [],
|
|
16
17
|
"bundles": []
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pennlibs-chat.js","sourceRoot":"","sources":["../../../src/components/pennlibs-chat/pennlibs-chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOpD,MAAM,OAAO,IAAI
|
|
1
|
+
{"version":3,"file":"pennlibs-chat.js","sourceRoot":"","sources":["../../../src/components/pennlibs-chat/pennlibs-chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOpD,MAAM,OAAO,IAAI;IALjB;QAME,gBAAW,GAAG,4GAA4G,CAAC;QAClH,SAAI,GAAG,EAAE,CAAC;KAmBpB;IAjBC,iBAAiB;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;IACpE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0DACI,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAC,QAAQ,gBACJ,MAAM,EACjB,EAAE,EAAC,eAAe;YAElB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;gBAAC,6DAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,8OAA8O,GAAE;gBAAA,6DAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,qfAAqf,GAAE,CAAM;YACp1B,sEAAiB,CACf,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, State } from '@stencil/core';\n\n@Component({\n tag: 'pennlibs-chat',\n styleUrl: 'pennlibs-chat.css',\n shadow: true\n})\nexport class Chat {\n libchat_url = \"https://faq.library.upenn.edu/chat/widget/32588ef2b889010cb2f3f39c678ffba58e390e74d013b238dd2b1e35717f7857\";\n @State() href = \"\";\n\n connectedCallback() {\n this.href = this.libchat_url + '?referer=' + window.location.href;\n }\n\n render() {\n return (\n <a\n href={this.href}\n target=\"_blank\"\n aria-label=\"Chat\"\n id=\"pennlibs-chat\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 82 82\"><path fill=\"#fff\" d=\"M66.17 31.97H24.08c-1.19 0-2.17.97-2.17 2.17v28.55c0 1.19.97 2.17 2.17 2.17h24.68c1.19 0 2.17.97 2.17 2.17v2.28c0 1.93 2.33 2.89 3.69 1.53l5.34-5.34c.41-.41.96-.63 1.53-.63h4.67c1.19 0 2.17-.97 2.17-2.17V34.15c0-1.19-.97-2.17-2.17-2.17Z\"/><path fill=\"#011f5b\" d=\"M28.91 57.96c-1.01 0-2.01-.39-2.76-1.14l-5.34-5.34c-.08-.08-.19-.13-.31-.13h-4.67c-2.15 0-3.9-1.75-3.9-3.9V18.9c0-2.15 1.75-3.9 3.9-3.9h42.09c2.15 0 3.9 1.75 3.9 3.9v28.55c0 2.15-1.75 3.9-3.9 3.9H33.24c-.24 0-.43.19-.43.43v2.28c0 1.58-.94 2.99-2.41 3.6-.48.2-.99.3-1.5.3ZM15.83 18.47c-.24 0-.43.19-.43.43v28.55c0 .24.19.43.43.43h4.67c1.04 0 2.02.41 2.76 1.14l5.34 5.34c.13.13.29.17.47.09.18-.07.27-.21.27-.4v-2.28c0-2.15 1.75-3.9 3.9-3.9h24.68c.24 0 .43-.19.43-.43V18.89c0-.24-.19-.43-.43-.43H15.83Z\"/></svg>\n <span>Chat</span>\n </a>\n );\n }\n}\n"]}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
export class Footer {
|
|
3
|
-
constructor() {
|
|
4
|
-
this.navigation = undefined;
|
|
5
|
-
}
|
|
6
3
|
render() {
|
|
7
4
|
return (h("div", { key: '9f542188f271269c4fc80ba573a0c81d1b922ce5', class: "viewport-margins" }, h("div", { key: '5510d2b2929024295b79dcf08f3dfb513d32f1e1', class: "colors-container" }, h("section", { key: '267aeba4265212039ead9d685ed5f0365c1d9ea9' }, h("h2", { key: '96b71a5d957e6d073fda11fe0776f1aa28ec6242' }, "Penn Brand"), h("code", { key: 'eb7ee55fd2d9d7a9b92e49047728bd73b4a6325d', style: { background: "var(--color-penn-red)" } }, h("span", { key: 'eb0cba284064bca572d3320ac1bc0ab3c084782c' }, "var(--color-penn-red)"), h("span", { key: '0984fbbf1285c65699782e24de71705700d515bb' }, "#990000")), h("code", { key: '3be80e5ac704e3f0159d62b59ee925203350271c', style: { background: "var(--color-penn-blue)" } }, h("span", { key: 'd065b15d92de05cfd87689cc741e3de451bae162' }, "var(--color-penn-blue)"), h("span", { key: '24d997f1a3300f93cb24f80727d20835e54f6854' }, "#011F5B"))), h("section", { key: 'f61959632c280040021b50b90992ce6ff7a0ddba' }, h("h2", { key: '286438030304371a4935577645a67fb88fbea00f' }, "Grays"), h("code", { key: '2fec1c2f0d68c95f13a94df7638c20fde38e8ea5', style: { background: "var(--color-gray-dark)" } }, h("span", { key: '8c6120e6f425fdd93b46ab94bea7e62053a90cc6' }, "var(--color-gray-dark)"), h("span", { key: 'b3a9e0c3c197492f08685c7c02175a26ae4f7670' }, "#2D3545")), h("code", { key: '977312372e2182ff3e8b794427df3f70e4917c42', style: { background: "var(--color-gray)" } }, h("span", { key: 'bd45ec6acf84c622def674840f2802969073a1d9' }, "var(--color-gray)"), h("span", { key: '7c1f5c3c9172af250d08b669932885c4fae90350' }, "#595F6A")), h("code", { key: 'b87e7c03ca66c7b737066a56f40ec8342d4b61c3', style: { background: "var(--color-gray-light)" } }, h("span", { key: '87b6d2a9926364f25640716e300f8e0b733a2f13' }, "var(--color-gray-light)"), h("span", { key: '50cc222746d85afcd9a0ec95868d131821922ecf' }, "#F5F5F6"))), h("section", { key: '1c98f2bcd5f933fa0e4fab4a5d642006307a1591' }, h("h2", { key: '28895da4151817bb35380f5a753a92717bcfd049' }, "Blue"), h("code", { key: 'ae058e22494317a20952700cee2ac11ffd0cc930', style: { background: "var(--color-blue)" } }, h("span", { key: 'bbea4e1a76d7c6bb06c819da39bd555db7fa270c' }, "var(--color-blue)"), h("span", { key: '22a092922cf487751d1f6e4dbc686350dd332b0f' }, "#0E5696")), h("code", { key: 'a2ef61f288c3642e380f3f24d1fbd28428b46b5f', style: { background: "var(--color-blue-light)" } }, h("span", { key: '3ecf70ab57d4a72a293ce7bf67a8c310867c2ea5' }, "var(--color-blue-light)"), h("span", { key: '35f3cb70b4582fad09bc31ce7dc7a0d9e0bc61ea' }, "#D4E4F2"))), h("section", { key: '1a9e813bd05855c8f66d84e361036bf8fcaa5b13' }, h("h2", { key: 'd27fa31c99504099007aba3bfe3f3a0ffd62d599' }, "Green"), h("code", { key: 'ce36bd67afa0a8f485bc8e3ada85cc15acd81021', style: { background: "var(--color-green)" } }, h("span", { key: '63cb3575d25bc33dd99804a7a5e9c9385bcce575' }, "var(--color-green)"), h("span", { key: 'bf3c8b8458d6737f08d731c0e7c15d57a28e54c4' }, "#267434")), h("code", { key: 'e05b12768fe80c34e43f03e7ba6c156939992560', style: { background: "var(--color-green-light)" } }, h("span", { key: '2915e9c6db7fb99fc175cd9a53d77902cb79e4ea' }, "var(--color-green-light)"), h("span", { key: '7d12f9900fdbcd886bea1ba230d60396ae40ebc7' }, "#F1F7E1"))), h("section", { key: '6f93947d46430e52cfcad2e94d0a17112c93e3c3' }, h("h2", { key: '44f40d2e1565583a75bc4a1bfae69235dfa00ddc' }, "Orange"), h("code", { key: '4d8a84d9c38d5579b91793d601c091508acf95a1', style: { background: "var(--color-orange)" } }, h("span", { key: '97be89d1f5d6d5538ac1b8d14b8dbb181749f952' }, "var(--color-orange)"), h("span", { key: '49cdf22c413e741fd95df18e5edc0230de4f6751' }, "#BD4718")), h("code", { key: 'b5acfbbc33513842a816272c58e27b300df66962', style: { background: "var(--color-orange-light)" } }, h("span", { key: '01963c472a4730a616a38642ee9758514b557128' }, "var(--color-orange-light)"), h("span", { key: '997937894214fd05808298d2911b2779c0021cb1' }, "#FEEDDD"))), h("section", { key: '90a086ee4a3a79430497399ef053904a1511a018' }, h("h2", { key: '641c77ec7d3613b1cba2aedaee1d792c9c2a0c6a' }, "Purple"), h("code", { key: '4a25606bdd37055d42511264c537b6761e08ec79', style: { background: "var(--color-purple)" } }, h("span", { key: 'd0dd674c8624f1a2a2d8edaf45bebf2f010874bd' }, "var(--color-purple)"), h("span", { key: '301e06171b3ef5efe41e2b45904e1c74abe254f7' }, "#80317F")), h("code", { key: 'ee7be83b1d86e9c2694f908574e31298cf407280', style: { background: "var(--color-purple-light)" } }, h("span", { key: 'ff64954fb723c749ddf9662336e73dbba566338c' }, "var(--color-purple-light)"), h("span", { key: 'fc00ed6ad6750212a2d07122aa1d6bce95cfbaa2' }, "#F2DFED"))))));
|
|
8
5
|
}
|
|
@@ -22,6 +19,7 @@ export class Footer {
|
|
|
22
19
|
return {
|
|
23
20
|
"navigation": {
|
|
24
21
|
"type": "unknown",
|
|
22
|
+
"attribute": "navigation",
|
|
25
23
|
"mutable": false,
|
|
26
24
|
"complexType": {
|
|
27
25
|
"original": "Array<{\n heading: string;\n links: Array<{\n label: string;\n href: string;\n }>;\n }>",
|
|
@@ -38,7 +36,9 @@ export class Footer {
|
|
|
38
36
|
"docs": {
|
|
39
37
|
"tags": [],
|
|
40
38
|
"text": "The navigation sections."
|
|
41
|
-
}
|
|
39
|
+
},
|
|
40
|
+
"getter": false,
|
|
41
|
+
"setter": false
|
|
42
42
|
}
|
|
43
43
|
};
|
|
44
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pennlibs-colors.js","sourceRoot":"","sources":["../../../src/components/pennlibs-colors/pennlibs-colors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,MAAM
|
|
1
|
+
{"version":3,"file":"pennlibs-colors.js","sourceRoot":"","sources":["../../../src/components/pennlibs-colors/pennlibs-colors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,MAAM;IAYjB,MAAM;QAEJ,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB;YAC3B,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B;oBACE,0EAAmB;oBACnB,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,uBAAuB,EAAE;wBAClD,uFAAkC;wBAClC,yEAAoB,CACf;oBACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAC;wBAClD,wFAAmC;wBACnC,yEAAoB,CACf,CACC;gBAEV;oBACE,qEAAc;oBACd,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAE;wBACnD,wFAAmC;wBACnC,yEAAoB,CACf;oBACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE;wBAC9C,mFAA8B;wBAC9B,yEAAoB,CACf;oBACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,yBAAyB,EAAE;wBACpD,yFAAoC;wBACpC,yEAAoB,CACf,CACC;gBAEV;oBACE,oEAAa;oBACb,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE;wBAC9C,mFAA8B;wBAC9B,yEAAoB,CACf;oBACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,yBAAyB,EAAE;wBACpD,yFAAoC;wBACpC,yEAAoB,CACf,CACC;gBAEV;oBACE,qEAAc;oBACd,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,oBAAoB,EAAE;wBAC/C,oFAA+B;wBAC/B,yEAAoB,CACf;oBACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,0BAA0B,EAAE;wBACrD,0FAAqC;wBACrC,yEAAoB,CACf,CACC;gBAEV;oBACE,sEAAe;oBACf,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,qBAAqB,EAAE;wBAChD,qFAAgC;wBAChC,yEAAoB,CACf;oBACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,2BAA2B,EAAE;wBACtD,2FAAsC;wBACtC,yEAAoB,CACf,CACC;gBAEV;oBACE,sEAAe;oBACf,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,qBAAqB,EAAE;wBAChD,qFAAgC;wBAChC,yEAAoB,CACf;oBACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,2BAA2B,EAAE;wBACtD,2FAAsC;wBACtC,yEAAoB,CACf,CACC,CACN,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pennlibs-colors',\n styleUrl: 'pennlibs-colors.css',\n shadow: true\n})\nexport class Footer {\n /**\n * The navigation sections.\n */\n @Prop() navigation: Array<{\n heading: string;\n links: Array<{\n label: string;\n href: string;\n }>;\n }>;\n\n render() {\n \n return (\n <div class=\"viewport-margins\">\n <div class=\"colors-container\">\n <section>\n <h2>Penn Brand</h2>\n <code style={{ background: \"var(--color-penn-red)\" }}>\n <span>var(--color-penn-red)</span>\n <span>#990000</span>\n </code>\n <code style={{ background: \"var(--color-penn-blue)\"}}>\n <span>var(--color-penn-blue)</span>\n <span>#011F5B</span>\n </code>\n </section>\n\n <section>\n <h2>Grays</h2>\n <code style={{ background: \"var(--color-gray-dark)\" }}>\n <span>var(--color-gray-dark)</span>\n <span>#2D3545</span>\n </code>\n <code style={{ background: \"var(--color-gray)\" }}>\n <span>var(--color-gray)</span>\n <span>#595F6A</span>\n </code>\n <code style={{ background: \"var(--color-gray-light)\" }}>\n <span>var(--color-gray-light)</span>\n <span>#F5F5F6</span>\n </code>\n </section>\n\n <section>\n <h2>Blue</h2>\n <code style={{ background: \"var(--color-blue)\" }}>\n <span>var(--color-blue)</span>\n <span>#0E5696</span>\n </code>\n <code style={{ background: \"var(--color-blue-light)\" }}>\n <span>var(--color-blue-light)</span>\n <span>#D4E4F2</span>\n </code>\n </section>\n\n <section>\n <h2>Green</h2>\n <code style={{ background: \"var(--color-green)\" }}>\n <span>var(--color-green)</span>\n <span>#267434</span>\n </code>\n <code style={{ background: \"var(--color-green-light)\" }}>\n <span>var(--color-green-light)</span>\n <span>#F1F7E1</span>\n </code>\n </section>\n\n <section>\n <h2>Orange</h2>\n <code style={{ background: \"var(--color-orange)\" }}>\n <span>var(--color-orange)</span>\n <span>#BD4718</span>\n </code>\n <code style={{ background: \"var(--color-orange-light)\" }}>\n <span>var(--color-orange-light)</span>\n <span>#FEEDDD</span>\n </code>\n </section>\n\n <section>\n <h2>Purple</h2>\n <code style={{ background: \"var(--color-purple)\" }}>\n <span>var(--color-purple)</span>\n <span>#80317F</span>\n </code>\n <code style={{ background: \"var(--color-purple-light)\" }}>\n <span>var(--color-purple-light)</span>\n <span>#F2DFED</span>\n </code>\n </section>\n </div>\n </div>\n );\n }\n}\n"]}
|
|
@@ -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,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAEzE,MAAM,oBAAoB,GAAG,0BAA0B,CAAC;AACxD,MAAM,iBAAiB,GAAG,6BAA6B,CAAC;AACxD,MAAM,0BAA0B,GAAG,yBAAyB,CAAC;AAO7D,MAAM,OAAO,gBAAgB
|
|
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, State, Event, EventEmitter } from '@stencil/core';\n\nconst FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';\nconst FEEDBACK_QUESTION = 'Did you find what you need?';\nconst FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';\n\n@Component({\n tag: 'pennlibs-feedback',\n styleUrl: 'pennlibs-feedback.css',\n shadow: true,\n})\nexport class PennlibsFeedback { \n @State() error: boolean = false;\n @State() answer: string | undefined = undefined;\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 private yesMessageRef?: HTMLParagraphElement;\n private noMessageRef?: HTMLParagraphElement;\n\n componentWillLoad() {\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 componentDidRender() {\n if (this.answer === 'yes' && this.yesMessageRef) {\n this.yesMessageRef.focus();\n } else if (this.answer === 'no' && this.noMessageRef) {\n this.noMessageRef.focus();\n }\n }\n\n handleFeedback(answer: string) {\n this.answer = answer;\n sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);\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 if (this.answer === 'yes') {\n return (\n <div class=\"feedback-container\">\n <p \n ref={(el) => this.yesMessageRef = el as HTMLParagraphElement}\n tabindex=\"-1\"\n >\n <strong>Thank you</strong> for your feedback! 👍\n </p>\n </div>\n );\n }\n\n if (this.answer === 'no') {\n return (\n <div class=\"feedback-container\">\n <p \n ref={(el) => this.noMessageRef = el as HTMLParagraphElement}\n tabindex=\"-1\"\n >\n To <strong>help us improve</strong>, we'd like to know more about your visit. Please <a href=\"https://www.library.upenn.edu/contact-us\">contact us with your feedback</a>.\n </p>\n </div>\n );\n }\n\n return (\n <div class=\"feedback-container\">\n <h2>{FEEDBACK_QUESTION}</h2>\n <button onClick={() => this.handleFeedback('yes')}>\n 👍\n <span>Yes<span class=\"visually-hidden\">, I found what I need.</span></span>\n </button>\n <button onClick={() => this.handleFeedback('no')}>\n 👎\n <span>No<span class=\"visually-hidden\">, I didn't find what I need.</span></span>\n </button>\n </div>\n )\n }\n}\n\n"]}
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
import { h, getAssetPath } from "@stencil/core";
|
|
2
2
|
export class Footer {
|
|
3
|
-
constructor() {
|
|
4
|
-
this.navigation = undefined;
|
|
5
|
-
this.navigationByChildren = undefined;
|
|
6
|
-
}
|
|
7
3
|
componentWillLoad() {
|
|
8
4
|
this.setNavigationByChildren();
|
|
9
5
|
}
|
|
@@ -53,6 +49,7 @@ export class Footer {
|
|
|
53
49
|
return {
|
|
54
50
|
"navigation": {
|
|
55
51
|
"type": "unknown",
|
|
52
|
+
"attribute": "navigation",
|
|
56
53
|
"mutable": false,
|
|
57
54
|
"complexType": {
|
|
58
55
|
"original": "Array<{\n heading: string;\n links: Array<{\n label: string;\n href: string;\n }>;\n }>",
|
|
@@ -69,7 +66,9 @@ export class Footer {
|
|
|
69
66
|
"docs": {
|
|
70
67
|
"tags": [],
|
|
71
68
|
"text": "The navigation sections."
|
|
72
|
-
}
|
|
69
|
+
},
|
|
70
|
+
"getter": false,
|
|
71
|
+
"setter": false
|
|
73
72
|
}
|
|
74
73
|
};
|
|
75
74
|
}
|
|
@@ -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,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,MAAM
|
|
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,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,MAAM;IAgBjB,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,4DAAK,KAAK,EAAC,wBAAwB;YACjC,+DAAQ,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE;oBACpC,UAAU,EAAE,8BAA8B,mBAAmB,qBAAqB;oBAClF,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;4BACA,IAAI,CAAC,UAAU,IAAI;gCAClB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAC7B;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,CACC,CACL,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, getAssetPath, State } from '@stencil/core';\n\n@Component({\n tag: 'pennlibs-footer',\n styleUrl: 'pennlibs-footer.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Footer {\n /**\n * The navigation sections.\n */\n @Prop() navigation: Array<{\n heading: string;\n links: Array<{\n label: string;\n href: string;\n }>;\n }>;\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 <div class=\"website-footer-wrapper\">\n <footer class=\"website-footer\" style={{\n background: `var(--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 {this.navigation && [\n this.navigation.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 </footer>\n </div>\n );\n }\n}\n"]}
|
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
font-family: var(--font-family);
|
|
3
3
|
font-size: var(--font-size);
|
|
4
4
|
color: var(--color-fg-default);
|
|
5
|
-
--hero-height: clamp(62vh, 32rem, 32vh);
|
|
6
|
-
--hero-heading-font: var(--font-serif);
|
|
7
5
|
--max-width: 1080px;
|
|
8
6
|
}
|
|
9
7
|
|
|
@@ -34,7 +32,7 @@ a {
|
|
|
34
32
|
--color-bg-menu: var(--color-bg-default);
|
|
35
33
|
}
|
|
36
34
|
|
|
37
|
-
.website-header--
|
|
35
|
+
.website-header--dark {
|
|
38
36
|
--color-fg-service: var(--color-fg-on-emphasis);
|
|
39
37
|
--color-fg-menu: var(--color-fg-on-emphasis);
|
|
40
38
|
--color-bg-menu: var(--color-penn-blue);
|
|
@@ -87,8 +85,7 @@ a {
|
|
|
87
85
|
|
|
88
86
|
@media (min-width: 921px) {
|
|
89
87
|
.website-header__service-link {
|
|
90
|
-
|
|
91
|
-
padding-left: 0.75em;
|
|
88
|
+
padding-left: 0.5em;
|
|
92
89
|
}
|
|
93
90
|
}
|
|
94
91
|
|
|
@@ -152,7 +149,6 @@ a {
|
|
|
152
149
|
.website-header__navigation-list--visible {
|
|
153
150
|
display: block;
|
|
154
151
|
margin-top: 1rem;
|
|
155
|
-
padding-bottom: 1rem;
|
|
156
152
|
}
|
|
157
153
|
|
|
158
154
|
.website-header__navigation-list--visible a {
|
|
@@ -229,112 +225,4 @@ a {
|
|
|
229
225
|
|
|
230
226
|
.website-header__navigation-button[aria-expanded=true] svg {
|
|
231
227
|
rotate: 180deg;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
/* Hero section */
|
|
235
|
-
.website-header__hero {
|
|
236
|
-
position: relative;
|
|
237
|
-
height: var(--hero-height);
|
|
238
|
-
display: grid;
|
|
239
|
-
width: 100%;
|
|
240
|
-
overflow: hidden;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
.website-header__hero > * {
|
|
244
|
-
grid-column: 1 / 1;
|
|
245
|
-
grid-row: 1 / 1;
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
.website-header__hero img {
|
|
249
|
-
object-fit: cover;
|
|
250
|
-
object-position: 50% 33%;
|
|
251
|
-
height: 100%;
|
|
252
|
-
width: 100%;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
.website-header__hero::before {
|
|
256
|
-
content: "";
|
|
257
|
-
display: flex;
|
|
258
|
-
width: 100%;
|
|
259
|
-
height: 100%;
|
|
260
|
-
top: 0;
|
|
261
|
-
position: absolute;
|
|
262
|
-
background: linear-gradient(355deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0) 100%);
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
.website-header__hero::after {
|
|
266
|
-
content: "";
|
|
267
|
-
display: flex;
|
|
268
|
-
width: 100%;
|
|
269
|
-
height: 100%;
|
|
270
|
-
top: 0;
|
|
271
|
-
position: absolute;
|
|
272
|
-
background: linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.8) 5rem, rgba(1, 31, 91, 0.25) 18rem, rgba(1, 31, 91, 0) 100%);
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
.website-header__hero-layout {
|
|
276
|
-
z-index: 1;
|
|
277
|
-
display: flex;
|
|
278
|
-
flex-direction: column;
|
|
279
|
-
justify-content: space-between;
|
|
280
|
-
padding-bottom: 4em;
|
|
281
|
-
height: var(--hero-height);
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
.website-header__hero-heading-container {
|
|
285
|
-
margin-top: auto;
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
.website-header__hero-heading {
|
|
289
|
-
text-shadow: 1px 1px 2px var(--color-fg-default);
|
|
290
|
-
line-height: 1.1;
|
|
291
|
-
font-size: 2.75em;
|
|
292
|
-
font-weight: bold;
|
|
293
|
-
font-family: var(--hero-heading-font);
|
|
294
|
-
text-wrap: pretty;
|
|
295
|
-
max-width: 30ch;
|
|
296
|
-
margin: 0;
|
|
297
|
-
color: var(--color-fg-menu);
|
|
298
|
-
padding-top: 2rem;
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
@media (max-width: 920px) {
|
|
302
|
-
.website-header__hero-heading {
|
|
303
|
-
font-size: 2.5em;
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
.website-header__hero-sub-heading {
|
|
308
|
-
font-size: 1.15em;
|
|
309
|
-
font-family: var(--font-family);
|
|
310
|
-
font-weight: 500;
|
|
311
|
-
color: var(--color-fg-menu);
|
|
312
|
-
max-width: 52ch;
|
|
313
|
-
text-wrap: pretty;
|
|
314
|
-
margin-top: 1em;
|
|
315
|
-
margin-bottom: 0;
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
.website-header__hero-sub-heading a {
|
|
319
|
-
text-decoration: underline;
|
|
320
|
-
text-underline-offset: var(--link-text-underline-offset);
|
|
321
|
-
text-decoration-thickness: var(--link-text-decoration-thickness);
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
.website-header__hero-sub-heading a:hover {
|
|
325
|
-
text-decoration-thickness: var(--link-hover-text-decoration-thickness);
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
.website-header__hero-sub-heading strong {
|
|
329
|
-
font-weight: bold;
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
@media (max-width: 620px) {
|
|
333
|
-
.website-header__hero-heading {
|
|
334
|
-
font-size: 2em;
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
.website-header__hero-sub-heading {
|
|
338
|
-
font-size: 1em;
|
|
339
|
-
}
|
|
340
228
|
}
|
|
@@ -1,34 +1,19 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
|
-
import { Container } from "./container";
|
|
3
2
|
import { LogoWhite } from "./logo-white";
|
|
4
3
|
import { LogoBlue } from "./logo-blue";
|
|
5
4
|
export class Header {
|
|
6
5
|
constructor() {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
/**
|
|
7
|
+
* The service href that turns the service name into a link.
|
|
8
|
+
*/
|
|
9
|
+
this.theme = 'light';
|
|
10
10
|
this.isMenuOpen = false;
|
|
11
11
|
this.navigation = [];
|
|
12
|
-
this.heroPictureElement = null;
|
|
13
|
-
this.heroHeadingElement = null;
|
|
14
|
-
this.heroParagraphElement = null;
|
|
15
12
|
}
|
|
16
13
|
componentWillLoad() {
|
|
17
14
|
if (this.navigation.length === 0) {
|
|
18
15
|
this.setNavigation();
|
|
19
16
|
}
|
|
20
|
-
const heroPictureElement = this.hostElement.querySelector('picture[hero=art-direction]');
|
|
21
|
-
if (heroPictureElement) {
|
|
22
|
-
this.heroPictureElement = heroPictureElement;
|
|
23
|
-
}
|
|
24
|
-
const heroHeadingElement = this.hostElement.querySelector('h1[hero=heading]');
|
|
25
|
-
if (heroHeadingElement) {
|
|
26
|
-
this.heroHeadingElement = heroHeadingElement;
|
|
27
|
-
}
|
|
28
|
-
const heroParagraphElement = this.hostElement.querySelector('p[hero=sub-heading]');
|
|
29
|
-
if (heroParagraphElement) {
|
|
30
|
-
this.heroParagraphElement = heroParagraphElement;
|
|
31
|
-
}
|
|
32
17
|
}
|
|
33
18
|
handleToggleMenu() {
|
|
34
19
|
this.isMenuOpen = !this.isMenuOpen;
|
|
@@ -52,7 +37,7 @@ export class Header {
|
|
|
52
37
|
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
|
|
53
38
|
}
|
|
54
39
|
render() {
|
|
55
|
-
return (h(
|
|
40
|
+
return (h("header", { key: '865c3c13148c36b791d854b420fe34ac05207438', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, h("div", { key: '372d85d6a5bdc55a80028adf971b99cf9bd39000', class: "website-header__inner-container" }, h("div", { key: '69b9151390e311f054aeee0fa99ba7f5d6e4f35f', class: "website-header__logo-name-container" }, h("a", { key: '8e5880531e043763b3c7279f3371bff49e1c51f8', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? h(LogoWhite, null) : h(LogoBlue, null)), this.serviceName && (h("a", { key: '37028e0b96a7e1f2fcd29e2c6a64be9697a9f657', href: "/", class: "website-header__service-link" }, h("span", { key: '808d5aea5f0a3c5cfcc6f889e2f9eefd23d11d1f', class: "website-header__service-name" }, this.serviceName), this.serviceLede && h("span", { key: 'c099359cdc6d0c6344dfb28f34e736bcb12e1b02', class: "website-header__service-lede" }, this.serviceLede)))), this.navigation.length > 0 && (h("nav", { key: '50e2f517d3f38452ca7372da788040314bc6c3b0', class: "website-header__navigation" }, h("button", { key: 'c2aabb612f009788d3f43e84267e20a7e30e4cd0', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: 'f0e515e1bd08b0a3a7c6deb331ceb8b9af493563', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))))));
|
|
56
41
|
}
|
|
57
42
|
static get is() { return "pennlibs-header"; }
|
|
58
43
|
static get encapsulation() { return "shadow"; }
|
|
@@ -71,6 +56,7 @@ export class Header {
|
|
|
71
56
|
return {
|
|
72
57
|
"serviceName": {
|
|
73
58
|
"type": "string",
|
|
59
|
+
"attribute": "service-name",
|
|
74
60
|
"mutable": false,
|
|
75
61
|
"complexType": {
|
|
76
62
|
"original": "string",
|
|
@@ -83,11 +69,13 @@ export class Header {
|
|
|
83
69
|
"tags": [],
|
|
84
70
|
"text": "The name of the service."
|
|
85
71
|
},
|
|
86
|
-
"
|
|
72
|
+
"getter": false,
|
|
73
|
+
"setter": false,
|
|
87
74
|
"reflect": false
|
|
88
75
|
},
|
|
89
76
|
"serviceLede": {
|
|
90
77
|
"type": "string",
|
|
78
|
+
"attribute": "service-lede",
|
|
91
79
|
"mutable": false,
|
|
92
80
|
"complexType": {
|
|
93
81
|
"original": "string",
|
|
@@ -100,11 +88,13 @@ export class Header {
|
|
|
100
88
|
"tags": [],
|
|
101
89
|
"text": "The opening brief sentence introducting the most important aspects of the service."
|
|
102
90
|
},
|
|
103
|
-
"
|
|
91
|
+
"getter": false,
|
|
92
|
+
"setter": false,
|
|
104
93
|
"reflect": false
|
|
105
94
|
},
|
|
106
95
|
"serviceHref": {
|
|
107
96
|
"type": "string",
|
|
97
|
+
"attribute": "service-href",
|
|
108
98
|
"mutable": false,
|
|
109
99
|
"complexType": {
|
|
110
100
|
"original": "string",
|
|
@@ -117,18 +107,36 @@ export class Header {
|
|
|
117
107
|
"tags": [],
|
|
118
108
|
"text": "The service href that turns the service name into a link."
|
|
119
109
|
},
|
|
120
|
-
"
|
|
110
|
+
"getter": false,
|
|
111
|
+
"setter": false,
|
|
121
112
|
"reflect": false
|
|
113
|
+
},
|
|
114
|
+
"theme": {
|
|
115
|
+
"type": "string",
|
|
116
|
+
"attribute": "theme",
|
|
117
|
+
"mutable": false,
|
|
118
|
+
"complexType": {
|
|
119
|
+
"original": "string",
|
|
120
|
+
"resolved": "string",
|
|
121
|
+
"references": {}
|
|
122
|
+
},
|
|
123
|
+
"required": false,
|
|
124
|
+
"optional": false,
|
|
125
|
+
"docs": {
|
|
126
|
+
"tags": [],
|
|
127
|
+
"text": "The service href that turns the service name into a link."
|
|
128
|
+
},
|
|
129
|
+
"getter": false,
|
|
130
|
+
"setter": false,
|
|
131
|
+
"reflect": false,
|
|
132
|
+
"defaultValue": "'light'"
|
|
122
133
|
}
|
|
123
134
|
};
|
|
124
135
|
}
|
|
125
136
|
static get states() {
|
|
126
137
|
return {
|
|
127
138
|
"isMenuOpen": {},
|
|
128
|
-
"navigation": {}
|
|
129
|
-
"heroPictureElement": {},
|
|
130
|
-
"heroHeadingElement": {},
|
|
131
|
-
"heroParagraphElement": {}
|
|
139
|
+
"navigation": {}
|
|
132
140
|
};
|
|
133
141
|
}
|
|
134
142
|
static get elementRef() { return "hostElement"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pennlibs-header.js","sourceRoot":"","sources":["../../../src/components/pennlibs-header/pennlibs-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"pennlibs-header.js","sourceRoot":"","sources":["../../../src/components/pennlibs-header/pennlibs-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, State } from '@stencil/core';\n\nimport { LogoWhite } from \"./logo-white\"\nimport { LogoBlue } from \"./logo-blue\"\n\n@Component({\n tag: 'pennlibs-header',\n styleUrl: 'pennlibs-header.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Header {\n /**\n * The name of the service.\n */\n @Prop() serviceName: string;\n\n /**\n * The opening brief sentence introducting the most important aspects of the service.\n */\n @Prop() serviceLede: string;\n\n /**\n * The service href that turns the service name into a link.\n */\n @Prop() serviceHref: string;\n\n /**\n * The service href that turns the service name into a link.\n */\n @Prop() theme: string = 'light';\n\n @State() isMenuOpen: boolean = false;\n @State() navigation = [];\n\n @Element() hostElement: HTMLElement;\n\n componentWillLoad() {\n if (this.navigation.length === 0) {\n this.setNavigation();\n }\n }\n\n handleToggleMenu() {\n this.isMenuOpen = !this.isMenuOpen\n }\n\n setNavigation() {\n this.navigation = Array.from(this.hostElement.children).reduce((acc, element) => {\n if (element.hasAttribute('slot')) {\n return acc;\n }\n\n switch (element.tagName) {\n case 'A':\n case 'FORM':\n acc = acc.concat(element)\n default:\n break;\n }\n\n return acc;\n }, []);\n }\n\n renderMenuIcon() {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path fill=\"currentColor\" d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/></svg>\n )\n }\n\n render() {\n return (\n <header class={`viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}`}>\n <div class=\"website-header__inner-container\">\n <div class=\"website-header__logo-name-container\">\n <a href=\"https://www.library.upenn.edu/\" class=\"website-header_logo-link\" aria-label=\"Penn Libraries\">\n {this.theme === 'dark' ? <LogoWhite /> : <LogoBlue />}\n </a>\n {this.serviceName && (\n <a href=\"/\" class=\"website-header__service-link\">\n <span class=\"website-header__service-name\">{this.serviceName}</span>\n {this.serviceLede && <span class=\"website-header__service-lede\">{this.serviceLede}</span>}\n </a>\n )}\n </div>\n\n {this.navigation.length > 0 && (\n <nav class=\"website-header__navigation\">\n <button class=\"website-header__navigation-button\" aria-expanded={`${this.isMenuOpen}`} onClick={() => this.handleToggleMenu()}>\n {this.renderMenuIcon()} Menu\n </button>\n {this.navigation && (\n <ol class={`website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}`}>\n {this.navigation.map(element => <li innerHTML={element.outerHTML} />)}\n </ol>\n )}\n </nav>\n )}\n </div>\n </header>\n );\n }\n}"]}
|