Skip to content

Commit 44b62f1

Browse files
CITguyCITguy
authored
Merge pull request #147 from rackerlabs/build-stepper
feat(accordion): add accordion component
2 parents e518849 + 0219771 commit 44b62f1

File tree

18 files changed

+764
-1
lines changed

18 files changed

+764
-1
lines changed

‎docs/_data/nav.json5‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
label: 'Components',
1919
path: 'components',
2020
children: [
21+
{ label: 'Accordions', path: 'accordions' },
2122
{ label: 'Alerts', path: 'alerts' },
2223
{ label: 'Box', path: 'box' },
2324
{ label: 'Breadcrumbs', path: 'breadcrumbs' },
@@ -57,6 +58,8 @@
5758
label: 'Custom Elements',
5859
path: 'elements',
5960
children: [
61+
{ label: '<hx-accordion>', path: 'hx-accordion' },
62+
{ label: '<hx-accordion-panel>', path: 'hx-accordion-panel' },
6063
{ label: '<hx-busy>', path: 'hx-busy' },
6164
{ label: '<hx-checkbox>', path: 'hx-checkbox' },
6265
{ label: '<hx-dd>', path: 'hx-dd' },

‎docs/components/accordions/accordion-demo.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import Util from '../../_util';
2+
3+
if (document.getElementById('vue-accordionDemo')) {
4+
new Vue({
5+
el: '#vue-accordionDemo',
6+
data: {
7+
isSinglePanel: false,
8+
currentPanel: 0,
9+
},
10+
methods: {
11+
onOpen: function (evt) {
12+
if (this.isSinglePanel) {
13+
let newIdx = evt.currentTarget.getAttribute('current-panel');
14+
this.currentPanel = Number(newIdx);
15+
}
16+
},
17+
nextPanel: function () {
18+
this.$refs.accordion.nextPanel();
19+
},
20+
prevPanel: function () {
21+
this.$refs.accordion.previousPanel();
22+
},
23+
},
24+
computed: {
25+
snippet: function () {
26+
return Util.snippet(`
27+
<hx-accordion ${this.isSinglePanel ? `current-panel="${this.currentPanel}"` : ''}>
28+
<hx-accordion-panel ${!this.isSinglePanel ? 'open' : ''}>
29+
<header slot="header">Cupcake Ipsum</header>
30+
<div class="hxBox-md">
31+
<!-- body content goes here -->
32+
</div>
33+
</hx-accordion-panel>
34+
<hx-accordion-panel>...</hx-accordion-panel>
35+
<hx-accordion-panel ${!this.isSinglePanel ? 'open' : ''}>...</hx-accordion-panel>
36+
</hx-accordion>
37+
`);
38+
},
39+
},
40+
});
41+
}

‎docs/components/accordions/index.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
title: Accordions
3+
also:
4+
elements/hx-accordion: <hx-accordion>
5+
elements/hx-accordion-panel: <hx-accordion-panel>
6+
---
7+
{% extends 'component.njk' %}
8+
{% block content %}
9+
<section id="vue-accordionDemo">
10+
<h2 class="hxSectionTitle" id="demo">Demos</h2>
11+
<div class="hxRow">
12+
<div class="hxCol hxSpan-12-xs hxSpan-3-lg hxOrder-2-lg">
13+
<h3>Options</h3>
14+
<p>
15+
<label>
16+
<input type="checkbox" v-model="isSinglePanel" />
17+
Single-panel mode
18+
</label>
19+
<div class="hxBtnGroup">
20+
<button :disabled="!isSinglePanel" class="hxBtn" @click="prevPanel">
21+
Prev Panel
22+
</button>
23+
<button :disabled="!isSinglePanel" class="hxBtn" @click="nextPanel">
24+
Next Panel
25+
</button>
26+
</div>
27+
</p>
28+
</div>
29+
<div class="hxCol hxSpan-9-xs">
30+
<h3>Basic Accordion</h3>
31+
<template v-if="isSinglePanel">
32+
<div class="demo">
33+
<hx-accordion :current-panel="currentPanel" ref="accordion" @open="onOpen">
34+
<hx-accordion-panel>
35+
<header slot="header">Cupcake Ipsum</header>
36+
<div class="hxBox-md">
37+
<p>
38+
Sweet toffee pie icing croissant halvah chupa chups. Cotton candy pie
39+
sesame snaps. Muffin sesame snaps cake toffee liquorice apple pie
40+
apple pie chupa chups. Lemon drops caramels sugar plum.
41+
</p>
42+
</div>
43+
</hx-accordion-panel>
44+
<hx-accordion-panel>
45+
<header slot="header">Biscuit Marshmallow</header>
46+
<div class="hxBox-md">
47+
<p>
48+
Sweet toffee pie icing croissant halvah chupa chups. Cotton candy pie
49+
sesame snaps. Muffin sesame snaps cake toffee liquorice apple pie
50+
apple pie chupa chups. Lemon drops caramels sugar plum.
51+
</p>
52+
</div>
53+
</hx-accordion-panel>
54+
<hx-accordion-panel>
55+
<header slot="header">Caramels Marzipan</header>
56+
<div class="hxBox-md">
57+
<p>
58+
Sweet toffee pie icing croissant halvah chupa chups. Cotton candy pie
59+
sesame snaps. Muffin sesame snaps cake toffee liquorice apple pie
60+
apple pie chupa chups. Lemon drops caramels sugar plum.
61+
</p>
62+
</div>
63+
</hx-accordion-panel>
64+
</hx-accordion>
65+
</div>
66+
<pre><code>{% raw %}{{snippet}}{% endraw %}</code></pre>
67+
</template>
68+
<template v-else>
69+
<div class="demo">
70+
<hx-accordion>
71+
<hx-accordion-panel open>
72+
<header slot="header">Cupcake Ipsum</header>
73+
<div class="hxBox-md">
74+
<p>
75+
Sweet toffee pie icing croissant halvah chupa chups. Cotton candy pie
76+
sesame snaps. Muffin sesame snaps cake toffee liquorice apple pie
77+
apple pie chupa chups. Lemon drops caramels sugar plum.
78+
</p>
79+
</div>
80+
</hx-accordion-panel>
81+
<hx-accordion-panel>
82+
<header slot="header">Biscuit Marshmallow</header>
83+
<div class="hxBox-md">
84+
<p>
85+
Sweet toffee pie icing croissant halvah chupa chups. Cotton candy pie
86+
sesame snaps. Muffin sesame snaps cake toffee liquorice apple pie
87+
apple pie chupa chups. Lemon drops caramels sugar plum.
88+
</p>
89+
</div>
90+
</hx-accordion-panel>
91+
<hx-accordion-panel open>
92+
<header slot="header">Caramels Marzipan</header>
93+
<div class="hxBox-md">
94+
<p>
95+
Sweet toffee pie icing croissant halvah chupa chups. Cotton candy pie
96+
sesame snaps. Muffin sesame snaps cake toffee liquorice apple pie
97+
apple pie chupa chups. Lemon drops caramels sugar plum.
98+
</p>
99+
</div>
100+
</hx-accordion-panel>
101+
</hx-accordion>
102+
</div>
103+
{% code 'text' %}
104+
<hx-accordion>
105+
<hx-accordion-panel open>
106+
<header slot="header">Cupcake Ipsum</header>
107+
<div class="hxBox-md">
108+
<!-- body content goes here -->
109+
</div>
110+
</hx-accordion-panel>
111+
<hx-accordion-panel>...</hx-accordion-panel>
112+
<hx-accordion-panel open>...</hx-accordion-panel>
113+
</hx-accordion>
114+
{% endcode %}
115+
</template>
116+
</div>
117+
</div>
118+
</section>
119+
{% endblock %}

‎docs/components/stepper/index.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: Stepper
3+
also:
4+
components/accordions: Accordions
5+
elements/hx-accordion-panel: <hx-accordion-panel>
6+
elements/hx-accordion: <hx-accordion>
7+
---
8+
{% extends 'component.njk' %}
9+
{% block content %}
10+
<div class="hxAlert hxAlert--warning">
11+
<div class="hxAlert__icon">
12+
<hx-icon type="exclamation-diamond"></hx-icon>
13+
</div>
14+
<div class="hxAlert__text">
15+
<span class="hxAlert__status">BETA</span>
16+
This component is not recommended for production use.
17+
</div>
18+
</div>
19+
<br />
20+
<section id="vue-stepperDemo">
21+
<h2 id="demo">Basic Stepper</h2>
22+
<div class="demo demo-stepper">
23+
<hx-accordion
24+
class="beta-hxStepper"
25+
current-panel="0"
26+
ref="accordion">
27+
28+
<hx-accordion-panel>
29+
<header slot="header">
30+
<span class="beta-hxStepCounter"></span>
31+
<span class="beta-hxStepLabel">Account</span>
32+
<span class="beta-hxStepValue">Acme Corp Inc.</span>
33+
</header>
34+
<div class="hxBox-md">
35+
<p>
36+
<em>Content Goes Here</em>
37+
</p>
38+
<p class="beta-hxSubmitButtons">
39+
<button class="hxBtn hxPrimary" @click="nextStep">Next Step</button>
40+
<button class="hxBtn hxLink">Cancel</button>
41+
</p>
42+
</div>
43+
</hx-accordion-panel>
44+
45+
<hx-accordion-panel>
46+
<header slot="header">
47+
<span class="beta-hxStepCounter"></span>
48+
<span class="beta-hxStepLabel">Topic</span>
49+
<span class="beta-hxStepValue">Technical Incident</span>
50+
</header>
51+
<div class="hxBox-md">
52+
<p>
53+
<em>Content Goes Here</em>
54+
</p>
55+
<p class="beta-hxSubmitButtons">
56+
<button class="hxBtn hxPrimary" @click="nextStep">Next Step</button>
57+
<button class="hxBtn" @click="prevStep">Prev Step</button>
58+
<button class="hxBtn hxLink">Cancel</button>
59+
</p>
60+
</div>
61+
</hx-accordion-panel>
62+
63+
<hx-accordion-panel>
64+
<header slot="header">
65+
<span class="beta-hxStepCounter"></span>
66+
<span class="beta-hxStepLabel">Issue Details</span>
67+
<span class="beta-hxStepValue"></span>
68+
</header>
69+
<div class="hxBox-md">
70+
<p>
71+
<em>Content Goes Here</em>
72+
</p>
73+
<p class="beta-hxSubmitButtons">
74+
<button class="hxBtn hxPrimary">Submit</button>
75+
<button class="hxBtn" @click="prevStep">Prev Step</button>
76+
<button class="hxBtn hxLink">Cancel</button>
77+
</p>
78+
</div>
79+
</hx-accordion-panel>
80+
</hx-accordion>
81+
</div>
82+
{% code 'html' %}
83+
<hx-accordion class="beta-hxStepper" current-panel="0">
84+
<hx-accordion-panel>
85+
<header slot="header">
86+
<span class="beta-hxStepCounter">
87+
<!-- CSS will handle filling in the step number -->
88+
</span>
89+
<span class="beta-hxStepLabel">Account</span>
90+
<span class="beta-hxStepValue">Acme Corp Inc.</span>
91+
</header>
92+
<div class="hxBox-md">
93+
<p>
94+
<em>Content Goes Here</em>
95+
</p>
96+
<p class="beta-hxSubmitButtons">
97+
<button class="hxBtn hxPrimary">Next Step</button>
98+
<button class="hxBtn">Prev Step</button>
99+
<button class="hxBtn hxLink">Cancel</button>
100+
</p>
101+
</div>
102+
</hx-accordion-panel>
103+
<hx-accordion-panel>...</hx-accordion-panel>
104+
<hx-accordion-panel>...</hx-accordion-panel>
105+
...
106+
</hx-accordion>
107+
{% endcode %}
108+
</section>
109+
{% endblock %}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
if (document.getElementById('vue-stepperDemo')) {
2+
new Vue({
3+
el: '#vue-stepperDemo',
4+
data: {},
5+
methods: {
6+
nextStep: function () {
7+
this.$refs.accordion.nextPanel();
8+
},
9+
prevStep: function () {
10+
this.$refs.accordion.previousPanel();
11+
},
12+
},
13+
});
14+
}

‎docs/docs.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use strict';
22

3+
import './components/accordions/accordion-demo';
34
import './components/box/box-demo';
45
import './components/busy/busy-demo';
56
import './components/buttons/button-demo';
@@ -10,6 +11,7 @@ import './components/panels/panel-demo';
1011
import './components/popovers/popover-demo';
1112
import './components/reveals/reveal-demo';
1213
import './components/status-pills/status-demo';
14+
import './components/stepper/stepper-demo';
1315
import './components/tables/table-demo';
1416
import './components/tooltips/tooltip-demo';
1517

‎docs/elements/hx-accordion-panel/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: <hx-accordion-panel>
3+
also:
4+
components/accordions: Accordions
5+
elements/hx-accordion: <hx-accordion>
6+
---
7+
{% extends 'element.njk' %}
8+
{% block content %}
9+
<section>
10+
<hx-dl class="hxBox-md metadata">
11+
<hx-def>
12+
<hx-dt>Permitted Parents</hx-dt>
13+
<hx-dd>
14+
an <a href="elements/hx-accordion">&lt;hx-accordion&gt;</a> element
15+
</hx-dd>
16+
</hx-def>
17+
<hx-def>
18+
<hx-dt>Permitted Children</hx-dt>
19+
<hx-dd>flow content</hx-dd>
20+
</hx-def>
21+
</hx-dl>
22+
</section>
23+
{% endblock %}
24+
{% block attributes %}
25+
<dl>
26+
<dt>open</dt>
27+
<dd>Opens the panel</dd>
28+
</dl>
29+
{% endblock %}
30+
{% block properties %}
31+
<dl>
32+
<dt>open <small>(Boolean)</small></dt>
33+
<dd>Determines if panel is open.</dd>
34+
</dl>
35+
{% endblock %}

0 commit comments

Comments
 (0)