@penn-libraries/web 0.3.0-dev.3 → 0.3.0-dev.4
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/pennlibs-chat.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-chat_5.cjs.entry.js +3 -3
- package/dist/cjs/pennlibs-chat_5.cjs.entry.js.map +1 -1
- package/dist/collection/components/pennlibs-header/pennlibs-header.js +1 -1
- package/dist/collection/components/pennlibs-header/pennlibs-header.js.map +1 -1
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.css +5 -4
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.js +1 -1
- package/dist/components/pennlibs-header.js +1 -1
- package/dist/components/pennlibs-header.js.map +1 -1
- package/dist/components/pennlibs-hero.js +2 -2
- package/dist/components/pennlibs-hero.js.map +1 -1
- package/dist/esm/pennlibs-chat.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.js.map +1 -1
- package/dist/esm/pennlibs-chat_5.entry.js +3 -3
- package/dist/esm/pennlibs-chat_5.entry.js.map +1 -1
- package/dist/web/{p-a921fec4.entry.js → p-a24d914e.entry.js} +4 -4
- package/dist/web/p-a24d914e.entry.js.map +1 -0
- package/dist/web/pennlibs-chat.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.esm.js.map +1 -1
- package/dist/web/web.esm.js +1 -1
- package/package.json +1 -1
- package/dist/web/p-a921fec4.entry.js.map +0 -1
|
@@ -37,7 +37,7 @@ export class Header {
|
|
|
37
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" })));
|
|
38
38
|
}
|
|
39
39
|
render() {
|
|
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: '
|
|
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)))), h("slot", { key: '85ad871d23d585803233001a6dbaf66735f0785f', name: "center" }), this.navigation.length > 0 && (h("nav", { key: '6d601072d530fe9ace278e10dfbdd05ab65e9d44', class: "website-header__navigation" }, h("button", { key: 'a44c189575fdb6b893a72c66d77264b310277cae', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: '6d755b835555e009d80e10aa8cc87882070f819c', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: '4a4a5255c453a1a7145f599074308276d84bd2e5', name: "end" }))));
|
|
41
41
|
}
|
|
42
42
|
static get is() { return "pennlibs-header"; }
|
|
43
43
|
static get encapsulation() { return "shadow"; }
|
|
@@ -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,cAAc,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAQtC,MAAM,OAAO,MAAM;IANnB;QAsBE;;WAEG;QACK,UAAK,GAAW,OAAO,CAAC;QAEvB,eAAU,GAAY,KAAK,CAAC;QAC5B,eAAU,GAAG,EAAE,CAAC;
|
|
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 <slot name=\"center\" />\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\n <slot name=\"end\" />\n </div>\n </header>\n );\n }\n}"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
--hero-height: clamp(
|
|
2
|
+
--hero-height: clamp(42vh, 32rem, 26rem);
|
|
3
3
|
--hero-heading-font: var(--font-serif);
|
|
4
4
|
--max-width: 1080px;
|
|
5
5
|
--color-typo: var(--color-fg-on-emphasis);
|
|
@@ -48,10 +48,11 @@
|
|
|
48
48
|
height: 100%;
|
|
49
49
|
top: 0;
|
|
50
50
|
position: absolute;
|
|
51
|
-
background: linear-gradient(
|
|
51
|
+
background: linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);
|
|
52
52
|
z-index: 0;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
+
|
|
55
56
|
.hero::after {
|
|
56
57
|
content: "";
|
|
57
58
|
display: flex;
|
|
@@ -59,7 +60,7 @@
|
|
|
59
60
|
height: 100%;
|
|
60
61
|
top: 0;
|
|
61
62
|
position: absolute;
|
|
62
|
-
background: linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.
|
|
63
|
+
background: linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);
|
|
63
64
|
z-index: 0;
|
|
64
65
|
}
|
|
65
66
|
|
|
@@ -73,7 +74,7 @@
|
|
|
73
74
|
|
|
74
75
|
.hero__heading-container {
|
|
75
76
|
margin-top: auto;
|
|
76
|
-
padding-
|
|
77
|
+
padding-top: 3em;
|
|
77
78
|
padding-bottom: 3em;
|
|
78
79
|
}
|
|
79
80
|
|
|
@@ -43,7 +43,7 @@ export class Hero {
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
|
-
return (h("div", { key: '
|
|
46
|
+
return (h("div", { key: '87c59d996e17ad0de49957658053e61868f91369', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: '68e8a1bde0b506c044e0a7d3d63cc5617b52c025', class: "hero__content" }, h("slot", { key: '9a5a94c334922dc17e3d19002f2480d93a1a9612', name: "start" }), h("div", { key: 'abb6ea5015c9810829cde3b8c6a391b2c36298f2', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: '81d5b79af5f5ac2e006ebc594d4d9b4ffa1dbb53', class: "viewport-margins" }, h("h1", { key: '1c6672b6228b8d3d2f2d0666644fc9cb199150a0', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: '5ffbee19a06e6ecac28aa84549cc8d0bef112cd2', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
|
|
47
47
|
}
|
|
48
48
|
static get is() { return "pennlibs-hero"; }
|
|
49
49
|
static get encapsulation() { return "shadow"; }
|
|
@@ -62,7 +62,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
|
|
|
62
62
|
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" })));
|
|
63
63
|
}
|
|
64
64
|
render() {
|
|
65
|
-
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: '
|
|
65
|
+
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)))), h("slot", { key: '85ad871d23d585803233001a6dbaf66735f0785f', name: "center" }), this.navigation.length > 0 && (h("nav", { key: '6d601072d530fe9ace278e10dfbdd05ab65e9d44', class: "website-header__navigation" }, h("button", { key: 'a44c189575fdb6b893a72c66d77264b310277cae', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: '6d755b835555e009d80e10aa8cc87882070f819c', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: '4a4a5255c453a1a7145f599074308276d84bd2e5', name: "end" }))));
|
|
66
66
|
}
|
|
67
67
|
static get assetsDirs() { return ["assets"]; }
|
|
68
68
|
get hostElement() { return this; }
|