Skip to content

Commit 17f9f77

Browse files
CITguyCITguy
authored
Merge pull request #515 from rackerlabs/SURF-1174-implement-medium-context-drawer
feat(HXDrawerElement): SURF-1174 implement context drawer
2 parents ca62ab0 + 09d3fbd commit 17f9f77

File tree

19 files changed

+1159
-44
lines changed

19 files changed

+1159
-44
lines changed

‎docs/_data/nav.json5‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
{ label: 'Button', path: 'button' },
2323
{ label: 'Checkbox', path: 'checkbox' },
2424
{ label: 'Choice Tile', path: 'choice-tile' },
25+
{ label: 'Drawer', path: 'drawer' },
2526
{ label: 'Dropdown Select', path: 'dropdown-select' },
2627
{ label: 'File', path: 'file' },
2728
{ label: 'Grid', path: 'grid' },
@@ -71,6 +72,7 @@
7172
{ label: '<hx-checkbox-control>', path: 'hx-checkbox-control' },
7273
{ label: '<hx-disclosure>', path: 'hx-disclosure' },
7374
{ label: '<hx-div>', path: 'hx-div' },
75+
{ label: '<hx-drawer>', path: 'hx-drawer' },
7476
{ label: '<hx-drop-fence>', path: 'hx-drop-fence' },
7577
{ label: '<hx-drop-zone>', path: 'hx-drop-zone' },
7678
{ label: '<hx-error>', path: 'hx-error' },

‎docs/_templates/application.njk‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,10 @@
7171
</nav>
7272

7373
<main role="main" id="content" class="{{mainClass}} {{contentClasses}}">
74+
{% block banner %}
75+
{# page banner goes here #}
76+
{% endblock %}
77+
7478
{% block main %}
7579
<header>
7680
{% if page.crumbs %}

‎docs/_templates/test.njk‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
{% set hasSiderail = true %}
33
{% set mainClass = 'test-content' %}
44

5-
{% block main %}
6-
{{super()}}
7-
5+
{% block banner %}
86
{# WARNING BANNER #}
97
<div class="banner warning">
108
<hx-icon type="exclamation-triangle" class="banner__icon"></hx-icon>

‎docs/components/drawer/drawer-demo.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import Util from '../../_util';
2+
3+
const SIZES = [
4+
{ value: 'hxSm', label: 'Small' },
5+
{ value: '', label: 'Medium (Default)' },
6+
{ value: 'hxLg', label: 'Large' },
7+
];
8+
9+
if (document.getElementById('vue-drawerDemo')) {
10+
new Vue({
11+
el: '#vue-drawerDemo',
12+
data: {
13+
hasPadding: true,
14+
hasLengthyContent: false,
15+
size: SIZES[1], // Medium
16+
sizes: SIZES,
17+
title: 'Drawer Title',
18+
},
19+
computed: {
20+
attrBodyClass: function () {
21+
if (this.bodyClasses !== '') {
22+
return `class="${this.bodyClasses}`;
23+
}
24+
return '';
25+
},
26+
attrDrawerClass: function () {
27+
if (this.drawerClasses !== '') {
28+
return `class="${this.drawerClasses}`;
29+
}
30+
return '';
31+
},
32+
bodyClasses: function () {
33+
return this.hasPadding ? 'hxMd' : '';
34+
},
35+
drawerClasses: function () {
36+
return this.size.value;
37+
},
38+
snippet: function () {
39+
return Util.snippet(`
40+
<hx-disclosure
41+
aria-controls="demo-drawer"
42+
class="hxBtn"
43+
>
44+
Toggle Drawer
45+
</hx-disclosure>
46+
47+
<hx-drawer
48+
id="demo-drawer"
49+
${this.attrDrawerClass}
50+
>
51+
<header></header>
52+
53+
<hx-div ${this.attrBodyClass}>
54+
...
55+
</hx-div>
56+
57+
<footer>
58+
...
59+
</footer>
60+
</hx-drawer>
61+
`);
62+
},
63+
},
64+
});
65+
}

‎docs/components/drawer/index.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
---
2+
title: Drawer
3+
also:
4+
components/drawer/test.html: Testing - Drawer
5+
elements/hx-drawer: <hx-drawer>
6+
---
7+
{% extends 'component.njk' %}
8+
{% import '_utils.njk' as utils %}
9+
10+
{% block page_header %}
11+
<p>
12+
The {{page.title}} provides a temporary overlay dialog, anchored
13+
to the right side of the screen.
14+
</p>
15+
{% endblock %}
16+
17+
{% block content %}
18+
<section>
19+
<header>
20+
<h2 id="basic-drawer">Basic Drawer</h2>
21+
</header>
22+
23+
<div class="example" id="vue-drawerDemo">
24+
<header>
25+
<form class="beta-hxForm">
26+
<hx-text-control>
27+
<input
28+
id="txtTitle"
29+
type="text"
30+
v-model="title"
31+
/>
32+
<label for="txtTitle">
33+
Title
34+
</label>
35+
</hx-text-control>
36+
37+
<hx-select-control>
38+
<select id="selSize" v-model="size">
39+
<option v-for="_size in sizes" :value="_size">
40+
{% raw %}{{_size.label}}{% endraw %}
41+
</option>
42+
</select>
43+
<hx-select></hx-select>
44+
<label for="selSize">
45+
Size
46+
</label>
47+
</hx-select-control>
48+
49+
<fieldset>
50+
<label>Options</label>
51+
52+
<hx-checkbox-control>
53+
<input
54+
id="chkHasPadding"
55+
type="checkbox"
56+
v-model="hasPadding"
57+
/>
58+
<label for="chkHasPadding">
59+
<hx-checkbox></hx-checkbox>
60+
Padded Content
61+
</label>
62+
</hx-checkbox-control>
63+
64+
<hx-checkbox-control>
65+
<input
66+
aria-describedby="helpLengthyBody"
67+
id="chkLengthyBody"
68+
type="checkbox"
69+
v-model="hasLengthyContent"
70+
/>
71+
<label for="chkLengthyBody">
72+
<hx-checkbox></hx-checkbox>
73+
Lengthy Content
74+
</label>
75+
<p id="helpLengthyBody">(triggers scrolling)</p>
76+
</hx-checkbox-control>
77+
</fieldset>
78+
</form>
79+
</header>
80+
81+
<div>
82+
<hx-disclosure
83+
aria-controls="demo-drawer"
84+
class="hxBtn"
85+
>
86+
Toggle Drawer
87+
</hx-disclosure>
88+
89+
<hx-drawer
90+
:class="drawerClasses"
91+
id="demo-drawer"
92+
>
93+
<header>
94+
<h3 v-text="title"></h3>
95+
</header>
96+
97+
<hx-div :class="bodyClasses">
98+
<template v-if="hasLengthyContent">
99+
{{ utils.lorem(10) }}
100+
</template>
101+
<template v-else>
102+
<p>
103+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
104+
sed do eiusmod tempor incididunt ut labore et dolore magna
105+
aliqua. Gravida rutrum quisque non tellus. Sagittis vitae
106+
et leo duis ut diam quam nulla. Diam vel quam elementum
107+
pulvinar etiam non. Pulvinar sapien et ligula ullamcorper
108+
malesuada proin libero nunc. Ultricies integer quis auctor
109+
elit sed vulputate mi sit amet. Egestas dui id ornare arcu
110+
odio ut. In iaculis nunc sed augue.
111+
</p>
112+
</template>
113+
</hx-div>
114+
115+
<footer>
116+
<button class="hxBtn hxPrimary">Save Changes</button>
117+
<button class="hxBtn">Cancel</button>
118+
</footer>
119+
</hx-drawer>
120+
</div>
121+
122+
<footer>
123+
<pre><code v-text="snippet"></code></pre>
124+
</footer>
125+
</div>
126+
</section>
127+
{% endblock %}

0 commit comments

Comments
 (0)