Skip to content

Commit 234520e

Browse files
CITguyCITguy
authored
Merge pull request #452 from rackerlabs/SURF-502-hx-select
feat(DropdownSelect): Add Select component
2 parents e0648c7 + 1c4d4d9 commit 234520e

File tree

25 files changed

+1483
-76
lines changed

25 files changed

+1483
-76
lines changed

‎docs/_data/nav.json5‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
{ label: 'Buttons', path: 'buttons' },
2323
{ label: 'Checkboxes', path: 'checkboxes' },
2424
{ label: 'Choice Tiles', path: 'choice-tiles' },
25+
{ label: 'Dropdown Select', path: 'dropdown-select' },
2526
//{ label: 'Colors', path: 'colors' },
2627
{ label: 'Files', path: 'files' },
2728
{ label: 'Grid', path: 'grid' },

‎docs/_templates/application.njk‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="{{site.language}}">
3-
{% include 'partials/head.njk' %}
3+
<head>
4+
{% include 'partials/head.njk' %}
5+
6+
{% block head %}
7+
{# custom stuff goes here #}
8+
{% endblock %}
9+
</head>
410
<body class="hxVertical" id="top">
511
<!-- This link should be the first item a user can tab to. -->
612
<a href="#content">Skip to main content</a>
@@ -36,5 +42,9 @@
3642
</footer>
3743

3844
{% include 'partials/after_footer.njk' %}
45+
46+
{% block after_footer %}
47+
{# custom scripts/markup go here #}
48+
{% endblock %}
3949
</body>
4050
</html>

‎docs/_templates/partials/head.njk‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,29 @@
1-
<head>
2-
<title>{% if page.title %}{{page.title}} - {% endif %}{{site.title}}</title>
3-
<meta charset="utf-8">
4-
<meta name="viewport" content="width=device-width, initial-scale=1">
5-
<base href="{{site.baseHref}}">
1+
<title>{% if page.title %}{{page.title}} - {% endif %}{{site.title}}</title>
2+
<meta charset="utf-8">
3+
<meta name="viewport" content="width=device-width, initial-scale=1">
4+
<base href="{{site.baseHref}}">
65

7-
<link rel="shortcut icon" href="images/favicon.png">
6+
<link rel="shortcut icon" href="images/favicon.png">
87

9-
<!-- Font Awesome Brand Icons -->
10-
<link
11-
crossorigin="anonymous"
12-
href="https://use.fontawesome.com/releases/v5.2.0/css/brands.css"
13-
integrity="sha384-nT8r1Kzllf71iZl81CdFzObMsaLOhqBU1JD2+XoAALbdtWaXDOlWOZTR4v1ktjPE"
14-
rel="stylesheet"
15-
/>
16-
<link
17-
crossorigin="anonymous"
18-
href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css"
19-
integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6"
20-
rel="stylesheet"
21-
/>
8+
<!-- Font Awesome Brand Icons -->
9+
<link
10+
crossorigin="anonymous"
11+
href="https://use.fontawesome.com/releases/v5.2.0/css/brands.css"
12+
integrity="sha384-nT8r1Kzllf71iZl81CdFzObMsaLOhqBU1JD2+XoAALbdtWaXDOlWOZTR4v1ktjPE"
13+
rel="stylesheet"
14+
/>
15+
<link
16+
crossorigin="anonymous"
17+
href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css"
18+
integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6"
19+
rel="stylesheet"
20+
/>
2221

23-
<link rel="stylesheet" href="dist/styles/helix-ui.css">
24-
<link rel="stylesheet" href="docs.css">
22+
<link rel="stylesheet" href="dist/styles/helix-ui.css">
23+
<link rel="stylesheet" href="docs.css">
2524

26-
<!-- Converts ES5 custom element constructor functions to ES6 classes -->
27-
<script src="vendor/custom-elements-es5-adapter.js"></script>
25+
<!-- Converts ES5 custom element constructor functions to ES6 classes -->
26+
<script src="vendor/custom-elements-es5-adapter.js"></script>
2827

29-
<!-- loader appends polyfills, if needed -->
30-
<script src="vendor/webcomponents-loader.js"></script>
31-
</head>
28+
<!-- loader appends polyfills, if needed -->
29+
<script src="vendor/webcomponents-loader.js"></script>

‎docs/_templates/test.njk‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
{% extends 'application.njk' %}
22

3+
{% block after_footer %}
4+
<script src="scripts/test-helpers.js"></script>
5+
{% endblock %}
6+
37
{% block layout %}
4-
<main id="content" class="hxBox hxLg">
8+
<main id="content" class="hxBox hxLg test-content">
59
<h1>{{ page.title }}</h1>
610

711
{% block content %}

‎docs/components/dropdown-select/index.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: Dropdown Select
3+
minver: 0.16.0
4+
also:
5+
components/dropdown-select/test.html: Testing - Dropdown Select
6+
---
7+
{% extends 'component.njk' %}
8+
{% block content %}
9+
<p class="comfortable">
10+
The {{page.title}} component provides markup that enables a consistent
11+
visual appearance of the HTML <code>&lt;select&gt;</code> element.
12+
</p>
13+
14+
<section>
15+
<h2 id="basic-select">Basic Select</h2>
16+
<div class="example" id="vue-selectDemo" v-cloak>
17+
<header>
18+
<form class="beta-hxForm">
19+
<fieldset>
20+
<legend class="beta-hxFieldName">Options</legend>
21+
<div>
22+
<input id="chkRequired" type="checkbox" v-model="isRequired" />
23+
<label for="chkRequired">Required</label>
24+
</div>
25+
<div>
26+
<input id="chkDisabled" type="checkbox" v-model="isDisabled" />
27+
<label for="chkDisabled">Disabled</label>
28+
</div>
29+
</fieldset>
30+
</form>
31+
</header>
32+
33+
<div>
34+
<div class="hxSelect">
35+
<select
36+
id="selDemo"
37+
:disabled="isDisabled"
38+
:required="isRequired"
39+
>
40+
<option value="">-- Please Select --</option>
41+
<option value="1">Option 1</option>
42+
<option value="2">Option 2</option>
43+
<option value="3">Option 3</option>
44+
</select>
45+
<hx-select></hx-select>
46+
<label for="selDemo">
47+
Choose an Option
48+
</label>
49+
</div>
50+
</div>
51+
52+
<footer>
53+
<pre><code v-text="snippet"></code></pre>
54+
</footer>
55+
</div>
56+
<div app-loading class="hxBox hxLg">
57+
<hx-busy></hx-busy>
58+
<p>Loading...</p>
59+
</div>
60+
<p class="hxSubBody hxSubdued">
61+
<hx-icon type="info-circle"></hx-icon>
62+
<code>&lt;select&gt;</code> must be defined before
63+
<code>&lt;hx-select&gt;</code> and <code>&lt;label&gt;</code>
64+
for styles to be effective.
65+
</p>
66+
<p class="hxSubBody hxSubdued">
67+
<hx-icon type="info-circle"></hx-icon>
68+
Extra elements will be hidden.
69+
</p>
70+
</section>
71+
72+
<section>
73+
<h2 id="validation">Validation</h2>
74+
<p class="comfortable">
75+
A {{page.title}} is designed to take advantage of standardized
76+
<a href="https://mzl.la/2SuKTmv">HTML form validation</a> capabilities.
77+
Error styles will be applied as long as the <code>&lt;select&gt;</code>
78+
element matches the <code>:invalid</code> CSS pseudo-class.
79+
</p>
80+
<p>
81+
There are two ways to modify validity of the
82+
<code>&lt;select&gt;</code> element.
83+
</p>
84+
<ol class="hxList">
85+
<li>
86+
add or remove the <code>required</code> attribute
87+
</li>
88+
<li>
89+
calling its
90+
<a href="https://mzl.la/2MQYTkd">
91+
<code>setCustomValidity()</code>
92+
</a> method
93+
</li>
94+
</ol>
95+
</section>
96+
{% endblock %}

‎docs/components/dropdown-select/select-demo.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import Util from '../../_util';
2+
3+
if (document.getElementById('vue-selectDemo')) {
4+
new Vue({
5+
el: '#vue-selectDemo',
6+
data: {
7+
isDisabled: false,
8+
isRequired: false,
9+
},
10+
computed: {
11+
snippet: function () {
12+
return Util.snippet(`
13+
<div class="hxSelect">
14+
<select
15+
${this.isDisabled ? 'disabled' : ''}
16+
id="demoSelect"
17+
${this.isRequired ? 'required' : ''}
18+
>
19+
...
20+
</select>
21+
22+
<hx-select></hx-select>
23+
24+
<label for="demoSelect">...</label>
25+
</div>
26+
`);
27+
},
28+
},
29+
});
30+
}

0 commit comments

Comments
 (0)