-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a9736a8
commit b2c8b62
Showing
17 changed files
with
399 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import { svg } from "lit"; | ||
export default svg` | ||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||
viewBox="0 0 1512 436.8" style="enable-background:new 0 0 1512 436.8;" xml:space="preserve"> | ||
<style type="text/css"> | ||
.st0{fill:#DAAA00;} | ||
.st1{fill:#002855;} | ||
.st2{fill:none;} | ||
</style> | ||
<g> | ||
<g> | ||
<g> | ||
<g> | ||
<g> | ||
<g> | ||
<path class="st0" d="M1369.7,174.7l18.4-48.8l3.2,2.8c11.3,9.2,26.7,17.1,41.2,17.4c13,0.3,19.3-3.2,17.6-14.1 | ||
c-1.3-8.2-10.5-9.6-16.3-10.8l-12.7-2.5c-24.7-4.6-45.4-19.8-45.4-48.7c0-43.6,37.6-68.1,75.4-68.1c19.9,0,38.1,5.1,55.1,16.1 | ||
l-16,43.3c-8.8-6.3-22.1-15.2-38.9-15.8c-5.5-0.2-18.2,2.7-14.1,15.6c1.8,5.5,9.6,7.8,14.4,8.9l14.3,3.4 | ||
c26.7,6.2,46.1,21.5,46.1,52.6c0,43.8-37.8,65.5-75.4,65.5C1414.7,191.5,1389.3,185.3,1369.7,174.7"/> | ||
<rect x="1291.7" y="4.9" class="st0" width="64.4" height="183.9"/> | ||
<polygon class="st0" points="1219.1,4.9 1285.1,4.9 1217.8,188.8 1164.2,188.8 1097.1,4.9 1162.8,4.9 1191,115.8 "/> | ||
<path class="st0" d="M941,188.8h66.9l5.1-23.1h47.7l6.3,23.1h66.9L1071.3,4.9h-70.2L941,188.8z M1036.9,57.9L1036.9,57.9 | ||
c1.2,7.8,12.7,64.1,12.7,64.1h-25.3L1036.9,57.9z"/> | ||
<path class="st0" d="M840.4,135.9h4.3c21.2,0,37-12.7,37-36.7c0-25.8-13.9-40.3-37.2-40.3h-4V135.9z M775.6,4.9h65.9 | ||
c58.8,0,103.8,27,103.8,94.6c0,54.5-36.7,89.3-88.1,89.3l-81.6-0.1V4.9z"/> | ||
<path class="st0" d="M737.1,10.6l3.4,30.2c0.8,7.2,4.9,24.4-0.2,22.1c-3.2-1.4-5.8-9.2-8.4-16.1c-1.3-3.5-7.6-20.1-9.2-21.4 | ||
c-7.9-5.9-27.7-12.6-41.1-12.7c-40.5-0.2-67.4,29.8-67.4,82.8c0,38.1,18.2,83.7,64.6,83.7c16.6,0,48.4-5.2,57.1-28.9 | ||
c3.9-10.7,7.5-20.2,10.1-17.3c1.9,2.1-0.6,10.7-1.7,15.3c-5.5,21.9-5.8,28.6-7.5,29.4c-20.9,10.5-47.8,14-71.3,14 | ||
c-74.8,0-100.6-43.6-100.6-87.2C565,28.9,611.5-3,683.6,0.2C701.8,0.9,720,4.2,737.1,10.6"/> | ||
<path class="st0" d="M516.4,14l-12-4.2c-4-3.6,0.9-4.6,0.9-4.6s17.3,3.2,60.4-0.4c0,0,3.7,0.7,1.2,3.8l-14.1,6 | ||
c-9.2,4-9.2,1.7-9.2,11.8l-0.1,93.7c0,73.3-74.6,71.7-89.1,71.7c-6.9,0-75.3,0-75.3-58.9V33.7c0-17.3,1.8-16.8-3.9-18.9 | ||
l-17.3-6.5c0,0-2.9-4.2,2.3-3.9c14.1,0.7,34.6,3.8,82.7,0.3c0,0,4.2,1,1.4,4l-14.4,4c-11,4.9-9.5,1.2-9.8,12.4l0.3,97.8 | ||
c0,24,12.3,53.7,51.2,53.7c52.8,0,53.3-45.7,53.3-55.9l0.1-96.9C525.6,14.8,524.4,17.4,516.4,14"/> | ||
</g> | ||
</g> | ||
<rect x="379.1" y="229.5" class="st0" width="1132.9" height="7.7"/> | ||
</g> | ||
</g> | ||
</g> | ||
<g> | ||
<path class="st1" d="M419,403h48v33.9h-88V282.9h40V403z"/> | ||
<path class="st1" d="M551.3,436.8h-40V282.9h40V436.8z"/> | ||
<path class="st1" d="M601.9,436.8V282.9H659c27.4,0,45.7,10.6,45.7,40c0,13.9-4.5,25.1-16.9,31.4v0.4c22,2.9,31.4,17.8,31.4,39.2 | ||
c0,32.3-27.6,42.9-55.7,42.9H601.9z M641.9,343.3h4.5c10.6,0,21.6-1.8,21.6-14.9c0-14.1-12.5-14.9-23.3-14.9h-2.9V343.3z | ||
M641.9,406.2h5.1c11.8,0,31.8,0.6,31.8-16.3c0-18.6-19.8-16.7-32.9-16.7h-4.1V406.2z"/> | ||
<path class="st1" d="M886.7,436.8h-49.8l-37.8-59.2h-0.4v59.2h-40V282.9h59.8c30.4,0,53.5,14.5,53.5,47.4 | ||
c0,21.2-11.8,39.6-33.7,43.5L886.7,436.8z M798.7,351.9h3.9c13.1,0,27.8-2.4,27.8-19.2c0-16.7-14.7-19.2-27.8-19.2h-3.9V351.9z"/> | ||
<path class="st1" d="M951.6,410.1L941,436.8h-42.5l59.2-153.9h43.7l58,153.9h-42.7l-10-26.7H951.6z M979.6,330.5h-0.4l-16.5,49 | ||
h33.3L979.6,330.5z"/> | ||
<path class="st1" d="M1210.9,436.8h-49.8l-37.8-59.2h-0.4v59.2h-40V282.9h59.8c30.4,0,53.5,14.5,53.5,47.4 | ||
c0,21.2-11.8,39.6-33.7,43.5L1210.9,436.8z M1122.9,351.9h3.9c13.1,0,27.8-2.4,27.8-19.2c0-16.7-14.7-19.2-27.8-19.2h-3.9V351.9z" | ||
/> | ||
<path class="st1" d="M1216.4,282.9h48l28.8,41.8l28.8-41.8h48l-56.8,80v73.9h-40v-73.9L1216.4,282.9z"/> | ||
</g> | ||
</g> | ||
<g> | ||
<path class="st2" d="M148,330.2l-45.6,12.4v33.6l141,22.2V137.2L171.9,126v172.3C171.9,312.8,161.6,326.5,148,330.2z"/> | ||
<path class="st0" d="M102.4,342.6l45.6-12.4c13.7-3.7,24-17.4,24-31.9V126L102.4,115V342.6z"/> | ||
<path class="st0" d="M171.9,92.7V4.8L24.9,36C10.7,39,0,52.7,0,67.8v302.7l69.6-18.9V76.6L171.9,92.7z"/> | ||
<path class="st1" d="M250.6,105.1l-78.6-12.4V126l71.5,11.2v261.2l-141-22.2v-33.6l-32.8,8.9v25.5c0,15.3,11.3,29.1,25.7,31.3 | ||
l181,28.5V136.4C276.3,121.1,265,107.4,250.6,105.1z"/> | ||
</g> | ||
<rect class="st2" width="1512" height="436.8"/> | ||
<rect class="st2" width="1512" height="436.8"/> | ||
</svg> | ||
`; |
95 changes: 95 additions & 0 deletions
95
elements/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
import { LitElement, svg } from 'lit'; | ||
import {render, styles} from "./ucdlib-branding-bar.tpl.js"; | ||
|
||
import {Mixin, MutationObserverElement, NavElement} from "../../utils"; | ||
import logo from "./logo.js"; | ||
import bookLogo from "./book.js"; | ||
|
||
/** | ||
* @class UcdlibBrandingBar | ||
* @classdesc Component class for displaying a Library branding bar in a header | ||
* | ||
* @property {String} figure - Figure to display: 'book' or 'logo' | ||
* @property {String} siteName - Name of website to display | ||
* @property {String} slogan - Optional text to display below site name | ||
* @property {String} siteUrl - Url to use for links around site name and figure | ||
* | ||
* @examples | ||
* <ucdlib-branding-bar> | ||
* <a href="#">My Account</a> | ||
* <a href="#">Access VPN</a> | ||
* <a href="#">Give</a> | ||
* </ucdlib-branding-bar> | ||
*/ | ||
export default class UcdlibBrandingBar extends Mixin(LitElement) | ||
.with(NavElement, MutationObserverElement) { | ||
|
||
static get properties() { | ||
return { | ||
figure: {type: String}, | ||
siteName: {type: String, attribute: "site-name"}, | ||
slogan: {type: String}, | ||
siteUrl: {type: String, attribute: "site-url"}, | ||
navItems: {type: Array} | ||
}; | ||
} | ||
|
||
static get styles() { | ||
return styles(); | ||
} | ||
|
||
constructor() { | ||
super(); | ||
this.render = render.bind(this); | ||
|
||
this.figure = "book"; | ||
this.siteName = "UC Davis Library"; | ||
this.slogan = ""; | ||
this.siteUrl = "/"; | ||
this.navItems = []; | ||
} | ||
|
||
/** | ||
* @method willUpdate | ||
* @description Lit lifecycle method called before an update | ||
* @private | ||
* @param {Map} props - Properties that have changed | ||
*/ | ||
willUpdate(props){ | ||
if ( props.has("figure") && props.get("figure") !== undefined ){ | ||
const allowedKeywords = ['book', 'logo']; | ||
if ( !allowedKeywords.includes(props.get('figure')) ){ | ||
console.warn(`${props.get('figure')} is not a recognized "figure" keyword. | ||
Allowed values: ${JSON.stringify(allowedKeywords)} | ||
`); | ||
this.figure = allowedKeywords[0]; | ||
} | ||
} | ||
} | ||
|
||
/** | ||
* @method _renderFigure | ||
* @description Renders an svg logo | ||
* @private | ||
* @returns {TemplateResult} | ||
*/ | ||
_renderFigure(){ | ||
if ( this.figure === 'logo') return logo; | ||
if ( this.figure === 'book' ) return bookLogo; | ||
return svg``; | ||
} | ||
|
||
/** | ||
* @method _onChildListMutation | ||
* @private | ||
* @description Fires when light dom child list changes. Injected by MutationObserverElement mixin. | ||
* Sets the 'navItems' property. | ||
*/ | ||
_onChildListMutation(){ | ||
let navItems = this.parseNavChildren(); | ||
if ( navItems.length ) this.navItems = navItems; | ||
} | ||
|
||
} | ||
|
||
customElements.define('ucdlib-branding-bar', UcdlibBrandingBar); |
102 changes: 102 additions & 0 deletions
102
elements/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.tpl.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
import { html, css } from 'lit'; | ||
import { ifDefined } from 'lit/directives/if-defined.js'; | ||
|
||
import headingStyles from "@ucd-lib/theme-sass/1_base_html/_headings.css.js"; | ||
import linkStyles from "@ucd-lib/theme-sass/1_base_html/_links.css.js"; | ||
import brandingStyles from "@ucd-lib/theme-sass/4_component/_site-branding.css.js" | ||
|
||
|
||
export function styles() { | ||
const elementStyles = css` | ||
:host { | ||
display: block; | ||
} | ||
.container { | ||
display: flex; | ||
flex-direction: row; | ||
flex-wrap: nowrap; | ||
align-items: center; | ||
justify-content: space-between; | ||
} | ||
.site-branding__figure svg { | ||
max-height: 6.25rem; | ||
max-width: 100%; | ||
height: auto; | ||
} | ||
.figure--book svg { | ||
width: 70px; | ||
min-width: 70px; | ||
} | ||
.figure--logo svg { | ||
width: 375px; | ||
min-width: 375px; | ||
} | ||
[hidden] { | ||
display: none !important; | ||
} | ||
.figure--logo .site-branding__body { | ||
display: none; | ||
} | ||
.menu { | ||
display: flex; | ||
flex-direction: row; | ||
flex-wrap: nowrap; | ||
align-items: center; | ||
} | ||
.menu a { | ||
text-decoration: none; | ||
font-weight: 700; | ||
margin-right: 1rem; | ||
} | ||
.menu a:last-child { | ||
margin-right: 0; | ||
} | ||
@media (max-width: 992px) { | ||
.figure--logo svg { | ||
width: 200px; | ||
min-width: 200px; | ||
} | ||
.menu { | ||
display: none; | ||
} | ||
} | ||
`; | ||
|
||
return [ | ||
headingStyles, | ||
brandingStyles, | ||
linkStyles, | ||
elementStyles]; | ||
} | ||
|
||
export function render() { | ||
return html` | ||
<div class="container figure--${this.figure}"> | ||
<div class="site-branding"> | ||
<div class="site-branding__figure"> | ||
<a href="${this.siteUrl}" class="">${this._renderFigure()}</a> | ||
</div> | ||
<div class="site-branding__body"> | ||
<h1 class="site-branding__site-name" ?hidden=${!this.siteName}> | ||
<a href=${this.siteUrl}>${this.siteName}</a> | ||
</h1> | ||
<div class="site-branding__slogan" ?hidden=${!this.slogan}>${this.slogan}</div> | ||
</div> | ||
</div> | ||
${this.navItems.length ? html` | ||
<nav class="menu"> | ||
${this.navItems.map(link => html` | ||
<a | ||
href=${ifDefined(link.href ? link.href : null)} | ||
target=${ifDefined(link.newTab ? "_blank": null)} | ||
>${link.linkText}</a> | ||
`)} | ||
</nav> | ||
` : html``} | ||
</div> | ||
`;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.