Skip to content
Permalink
Browse files

Add user-info slot listener (#466)

* Added slot listeners.

* Run build.

* Update test urls

* Add Joseph's tweaks.
  • Loading branch information...
blakemorgan authored and kebowdog committed Sep 16, 2019
1 parent 5f32b8b commit 1b9a305eb12204e24a177974266ffa510c9a95a9
@@ -16,12 +16,21 @@

'use strict'

import { html, css, customElement, LitElement, unsafeCSS } from 'lit-element'
import { html, css, customElement, LitElement, unsafeCSS, property } from 'lit-element'
import style from './byu-user-info.sass'

@customElement('byu-user-info')
export class BYUUserInfo extends LitElement {
// TODO: Make decision on login-url
// @property({ type: String, attribute: 'login-url' }) loginUrl = ''

firstUpdated (_changedProperties) {
this._addAriaAttributes()
this._setHasUser()
this.classList.add('byu-component-rendered')
}

_setHasUser () {
const userSlot = this.shadowRoot.querySelector('#user-name')
const logoutSlot = this.shadowRoot.querySelector('#logout')
const loginSlot = this.shadowRoot.querySelector('#login')
@@ -31,7 +40,10 @@ export class BYUUserInfo extends LitElement {
} else {
loginSlot.assignedNodes()[0].classList.add('hidden')
}
this.classList.add('byu-component-rendered')
}

_addAriaAttributes () {
this.setAttribute('role', 'button')
}

static get styles () {
@@ -41,7 +53,7 @@ export class BYUUserInfo extends LitElement {
render () {
return html`
<div class="byu-id">
<slot name="user-name" id="user-name"></slot>
<slot name="user-name" id="user-name" @slotchange="_setHasUser()"></slot>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="currentcolor" d="M50 95c-26 0-34-18-34-18 3-12 8-18 17-18 5 5 10 7 17 7s12-2 17-7c9 0 14 6 17 18 0 0-7 18-34 18z"/><circle cx="50" cy="50" r="45" fill="none" stroke="currentcolor" stroke-width="10"/><circle fill="currentcolor" cx="50" cy="40" r="20"/></svg>
<slot name="logout" id="logout"></slot>
<slot name="login" id="login"></slot>

Large diffs are not rendered by default.

Large diffs are not rendered by default.

@@ -4,8 +4,8 @@
<head>
<title>BYU Footer Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script async src="https://cdn.byu.edu/byu-theme-components/experimental/201-hotfix/byu-theme-components.min.js"></script>
<link rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/experimental/201-hotfix/byu-theme-components.min.css" media="all">
<script async src="https://cdn.byu.edu/byu-theme-components/experimental/user-info/byu-theme-components.min.js"></script>
<link rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/experimental/user-info/byu-theme-components.min.css" media="all">
<link rel="stylesheet" href="https://cdn.byu.edu/theme-fonts/1.x.x/ringside/fonts.css" media="all">
<link rel="stylesheet" href="https://cdn.byu.edu/theme-fonts/1.x.x/public-sans/fonts.css" media="all">
</head>
@@ -4,8 +4,8 @@
<head>
<title>BYU Header Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script async src="https://cdn.byu.edu/byu-theme-components/experimental/201-hotfix/byu-theme-components.min.js"></script>
<link rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/experimental/201-hotfix/byu-theme-components.min.css" media="all">
<script async src="https://cdn.byu.edu/byu-theme-components/experimental/user-info/byu-theme-components.min.js"></script>
<link rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/experimental/user-info/byu-theme-components.min.css" media="all">
<link rel="stylesheet" href="https://cdn.byu.edu/theme-fonts/1.x.x/ringside/fonts.css" media="all">
<link rel="stylesheet" href="https://cdn.byu.edu/theme-fonts/1.x.x/public-sans/fonts.css" media="all">
</head>
@@ -4,8 +4,8 @@
<head>
<title>BYU Menu Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script async src="https://cdn.byu.edu/byu-theme-components/experimental/201-hotfix/byu-theme-components.min.js"></script>
<link rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/experimental/201-hotfix/byu-theme-components.min.css" media="all">
<script async src="https://cdn.byu.edu/byu-theme-components/experimental/user-info/byu-theme-components.min.js"></script>
<link rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/experimental/user-info/byu-theme-components.min.css" media="all">
<link rel="stylesheet" href="https://cdn.byu.edu/theme-fonts/1.x.x/ringside/fonts.css" media="all">
<link rel="stylesheet" href="https://cdn.byu.edu/theme-fonts/1.x.x/public-sans/fonts.css" media="all">
</head>
@@ -4,8 +4,8 @@
<head>
<title>BYU Search Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script async src="https://cdn.byu.edu/byu-theme-components/experimental/201-hotfix/byu-theme-components.min.js"></script>
<link rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/experimental/201-hotfix/byu-theme-components.min.css" media="all">
<script async src="https://cdn.byu.edu/byu-theme-components/experimental/user-info/byu-theme-components.min.js"></script>
<link rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/experimental/user-info/byu-theme-components.min.css" media="all">
<link rel="stylesheet" href="https://cdn.byu.edu/theme-fonts/1.x.x/ringside/fonts.css" media="all">
<link rel="stylesheet" href="https://cdn.byu.edu/theme-fonts/1.x.x/public-sans/fonts.css" media="all">
</head>
@@ -4,8 +4,8 @@
<head>
<title>BYU User Info Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script async src="https://cdn.byu.edu/byu-theme-components/experimental/201-hotfix/byu-theme-components.min.js"></script>
<link rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/experimental/201-hotfix/byu-theme-components.min.css" media="all">
<script async src="https://cdn.byu.edu/byu-theme-components/experimental/user-info/byu-theme-components.min.js"></script>
<link rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/experimental/user-info/byu-theme-components.min.css" media="all">
<link rel="stylesheet" href="https://cdn.byu.edu/theme-fonts/1.x.x/ringside/fonts.css" media="all">
<link rel="stylesheet" href="https://cdn.byu.edu/theme-fonts/1.x.x/public-sans/fonts.css" media="all">
</head>

0 comments on commit 1b9a305

Please sign in to comment.
You can’t perform that action at this time.