From 0853046ee8aaf5162b3680a24ff46f4354e3fda1 Mon Sep 17 00:00:00 2001 From: Cathy Siller Date: Thu, 31 Aug 2017 17:17:40 -0500 Subject: [PATCH] feat(hxreveal): new component hxreveal --- source/_data/nav.yml | 1 + source/components/lists/_lists.less | 4 + source/components/navigation/_navigation.less | 18 +--- source/components/navigation/index.html | 68 ++++++------- source/components/reveal/_HxReveal.js | 98 +++++++++++++++++++ source/components/reveal/index.html | 63 ++++++++++++ source/scripts/_helix-ui.js | 12 +-- source/styles/helix-ui.less | 1 + themes/helix-ui/layout/_partials/app_nav.ejs | 52 +++++----- 9 files changed, 227 insertions(+), 90 deletions(-) create mode 100644 source/components/lists/_lists.less create mode 100644 source/components/reveal/_HxReveal.js create mode 100644 source/components/reveal/index.html diff --git a/source/_data/nav.yml b/source/_data/nav.yml index efc03047b..09384bde3 100644 --- a/source/_data/nav.yml +++ b/source/_data/nav.yml @@ -17,6 +17,7 @@ components: Pagination: /pagination Popovers: /popovers "Progress Bars": /progressbars + Reveal: /reveal Tables: /tables Tabs: /tabs Tooltips: /tooltips diff --git a/source/components/lists/_lists.less b/source/components/lists/_lists.less new file mode 100644 index 000000000..dbcec7f4b --- /dev/null +++ b/source/components/lists/_lists.less @@ -0,0 +1,4 @@ +dd { + margin-bottom: 0.5em; + margin-left: 1em; +} \ No newline at end of file diff --git a/source/components/navigation/_navigation.less b/source/components/navigation/_navigation.less index f37378e45..32a16fe26 100644 --- a/source/components/navigation/_navigation.less +++ b/source/components/navigation/_navigation.less @@ -53,21 +53,13 @@ } } - section { - & > div { - display: none; - } - - &.open { + hx-reveal { + &[open] { & > header { .toggle-icon { transform: scaleY(-1); } } - - & > div { - display: block; - } } /* Indentation */ @@ -81,7 +73,7 @@ } // Level 2 - section { + hx-reveal { header { padding-left: @l2-indent; } @@ -91,7 +83,7 @@ } // Level 3 - section { + hx-reveal { header { padding-left: @l3-indent; } @@ -101,6 +93,6 @@ } } } - }//section + }//hx-reveal } diff --git a/source/components/navigation/index.html b/source/components/navigation/index.html index 50818b115..73b8ecda2 100644 --- a/source/components/navigation/index.html +++ b/source/components/navigation/index.html @@ -71,28 +71,24 @@

Application Navigation

Link 1-1 Link 1-2 Link 1-3 -
-
+ +
L1 Section
-
- Link 2-1 - Link 2-2 - Link 2-3 -
-
- L2 Section - -
- -
-
-
+ Link 2-1 + Link 2-2 + Link 2-3 + +
+ L2 Section + +
+ Link 3-1 + Link 3-2 + Link 3-3 + + ```html @@ -100,28 +96,24 @@

Application Navigation

Link 1-1 Link 1-2 Link 1-3 -
-
+ +
L1 Section
-
- Link 2-1 - Link 2-2 - Link 2-3 -
-
- L2 Section - -
- -
-
-
+ Link 2-1 + Link 2-2 + Link 2-3 + +
+ L2 Section + +
+ Link 3-1 + Link 3-2 + Link 3-3 + + ``` diff --git a/source/components/reveal/_HxReveal.js b/source/components/reveal/_HxReveal.js new file mode 100644 index 000000000..d504214f9 --- /dev/null +++ b/source/components/reveal/_HxReveal.js @@ -0,0 +1,98 @@ +window.addEventListener('WebComponentsReady', function () { + const template = document.createElement('template'); + + template.innerHTML = ` + + + +
+ +
+ `; + + class HxReveal extends HTMLElement { + static get is () { + return 'hx-reveal'; + } + + static get observedAttributes () { + return ['open']; + } + + constructor() { + super(); + this.attachShadow({mode: 'open'}); + if (window.ShadyCSS ) { + ShadyCSS.prepareTemplate(template, 'hx-reveal'); + ShadyCSS.styleElement(this); + } + this.shadowRoot.appendChild(template.content.cloneNode(true)); + this._btnToggle = this.shadowRoot.querySelector('#toggle'); + this.toggle = this.toggle.bind(this); + } + + connectedCallback () { + this._btnToggle.addEventListener('click', this.toggle); + } + + disconnectedCallback () { + this._btnToggle.removeEventListener('click', this.toggle); + } + + attributeChangedCallback (attr, oldValue, newValue) { + if (attr === 'open') { + this._btnToggle.setAttribute('aria-expanded', newValue === ''); + } + } + + toggle () { + if (this.getAttribute('open') === '') { + this.close(); + } else { + this.open(); + } + } + + open () { + this.setAttribute('open', ''); + } + + close () { + this.removeAttribute('open'); + } + } + customElements.define(HxReveal.is, HxReveal) +}); diff --git a/source/components/reveal/index.html b/source/components/reveal/index.html new file mode 100644 index 000000000..d111b8683 --- /dev/null +++ b/source/components/reveal/index.html @@ -0,0 +1,63 @@ +--- +title: Reveal +assets: + - helix-ui.js +--- + +

+ A reveal is a behavior-only web component that implements almost no styling. +

+ +
+

Default Reveal

+

Closed by default

+
+ + Click me to show content +

You can't see me.

+ +
+ ```html + + Click me to show content +

You can't see me.

+ + ``` +
+
+

Open Reveal

+

Add open attribute to set the reveal in an open state

+
+ + Click me to hide content! +

You should see me.

+ +
+ ```html + + Click me to hide content! +

You should see me.

+ + ``` +
+
+

Attributes

+
+
open
+
Opens the reveal
+
+
+
+

Functions

+

The following functions are available on the element.

+
+
close()
+
Closes the reveal
+ +
open()
+
Opens the reveal
+ +
toggle()
+
Inverts the open state
+
+
diff --git a/source/scripts/_helix-ui.js b/source/scripts/_helix-ui.js index 7c406c2b3..5842436e6 100644 --- a/source/scripts/_helix-ui.js +++ b/source/scripts/_helix-ui.js @@ -7,14 +7,4 @@ // Each file will be responsible for defining itself // with the custom element registry import '../components/icons/_HxIcon'; - -/* Left Nav Toggle Behavior */ -(function () { - var _headers = document.querySelectorAll('.hx-app-nav header'); - - _headers.forEach(function (header) { - header.addEventListener('click', function (evt) { - evt.target.parentElement.classList.toggle('open'); - }); - }); -})(); +import '../components/reveal/_HxReveal'; diff --git a/source/styles/helix-ui.less b/source/styles/helix-ui.less index a2471e2de..732f67a6e 100644 --- a/source/styles/helix-ui.less +++ b/source/styles/helix-ui.less @@ -17,6 +17,7 @@ @import 'breadcrumbs/_breadcrumbs'; @import 'grid/_grid'; @import 'icons/_icons'; +@import 'lists/_lists'; @import 'navigation/_navigation'; @import 'typography/_typography'; diff --git a/themes/helix-ui/layout/_partials/app_nav.ejs b/themes/helix-ui/layout/_partials/app_nav.ejs index 053c2505a..45e942124 100644 --- a/themes/helix-ui/layout/_partials/app_nav.ejs +++ b/themes/helix-ui/layout/_partials/app_nav.ejs @@ -1,37 +1,33 @@