Skip to content

Commit 9f4d461

Browse files
CITguyCITguy
authored
Merge pull request #131 from rackerlabs/fix-papercuts
fix(papercuts): update lots of small annoyances and bugs
2 parents 6c5e060 + 213aaca commit 9f4d461

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1261
-976
lines changed

‎bin/start.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ browserSync.init({
4646
match: [
4747
`${CONFIG.sourceDir}/*.js`,
4848
`${CONFIG.sourceDir}/**/*.js`,
49+
`${CONFIG.sourceDir}/**/_*.less`,
4950
],
5051
fn: _.debounce(compileScripts, 1500),
5152
},
@@ -55,6 +56,7 @@ browserSync.init({
5556
match: [
5657
`${CONFIG.sourceDir}/*.less`,
5758
`${CONFIG.sourceDir}/**/*.less`,
59+
`!${CONFIG.sourceDir}/**/_*.less`,
5860
],
5961
fn: _.debounce(compileStyles, 1500),
6062
},

‎docs/components/box/index.html‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,23 @@
1313
</p>
1414
</section>
1515

16-
<section id="vue-boxDemo">
17-
<h2 class="hxSectionTitle" id="demo">Demo</h2>
18-
<div class="hxRow">
19-
<div class="hxCol hxSpan-12-xs hxSpan-4-md hxOrder-2-md">
16+
<section>
17+
<h2 class="hxSectionTitle" id="demos">Demos</h2>
18+
<div id="vue-boxDemo" class="hxRow" v-cloak>
19+
<div class="hxCol hxSpan-12-xs hxSpan-3-lg hxOrder-2-lg">
20+
<h3 class="hxSubSectionTitle">Options</h3>
2021
<p>
21-
Size:<br />
22+
<b>Size:</b><br />
2223
<select v-model="size">
2324
<option v-for="_size in sizes" :value="_size">
2425
{% raw %}{{ _size.label }}{% endraw %}
2526
</option>
2627
</select>
2728
</p>
28-
<p>
29-
<code>
30-
{% raw %}&lt;div class="{{size.value}}"&gt;{% endraw %}
31-
</code>
32-
</p>
3329
</div>
34-
<div class="hxCol hxSpan-12-xs hxSpan-8-md hxOrder-1-md">
30+
<div class="hxCol hxSpan-12-xs hxSpan-9-lg hxOrder-1-lg">
31+
<h3 class="hxSubSectionTitle">Basic Box</h3>
32+
3533
<div class="demo box-demo">
3634
<div :class="size.value">
3735
<p>
@@ -43,9 +41,12 @@ <h2 class="hxSectionTitle" id="demo">Demo</h2>
4341
</p>
4442
</div>
4543
</div>
46-
<span class="hxCaption">
44+
<small>
4745
*Visual styling added for demonstration purpopses.
48-
</span>
46+
</small>
47+
{% code 'html' %}{% raw %}
48+
<div class="{{size.value}}">...</div>{% endraw %}
49+
{% endcode %}
4950
</div>
5051
</div>
5152
</section>

‎docs/components/buttons/button-demo.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
if (document.getElementById('vue-buttonDemo')) {
2+
const SIZES = [
3+
{ label: 'Small', val: 'hxSm' },
4+
{ label: 'Medium', val: '' },
5+
{ label: 'Large', val: 'hxLg' },
6+
];
7+
8+
const VARIANTS = [
9+
{ label: 'Default', val: '' },
10+
{ label: 'Primary', val: 'hxPrimary' },
11+
{ label: 'Link', val: 'hxLink' },
12+
];
13+
14+
new Vue({
15+
el: '#vue-buttonDemo',
16+
data: {
17+
size: SIZES[1],
18+
sizes: SIZES,
19+
variant: VARIANTS[0],
20+
variants: VARIANTS,
21+
},
22+
computed: {
23+
loneClasses: function () {
24+
let out = [ 'hxBtn' ];
25+
if (this.size.val !== '') {
26+
out.push(this.size.val);
27+
}
28+
if (this.variant.val !== '') {
29+
out.push(this.variant.val);
30+
}
31+
return out.join(' ');
32+
},//loneClasses()
33+
34+
groupClasses: function () {
35+
let out = [ 'hxBtnGroup' ];
36+
if (this.size.val !== '') {
37+
out.push(this.size.val);
38+
}
39+
if (this.variant.val !== '') {
40+
out.push(this.variant.val);
41+
}
42+
return out.join(' ');
43+
},//groupClasses()
44+
},
45+
});
46+
}

‎docs/components/buttons/index.html‎

Lines changed: 81 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,85 @@
11
---
22
title: Buttons
3+
also:
4+
components/menus: Menus
5+
components/popovers: Popovers
6+
components/reveals: Reveals
37
---
48
{% extends 'component.njk' %}
59
{% block content %}
610
<section>
7-
<h2 class="hxSectionTitle" id="default-button">Default Button</h2>
11+
<h2 class="hxSectionTitle" id="demos">Demos</h2>
12+
<div id="vue-buttonDemo" class="hxRow" v-cloak>
13+
<div class="hxCol hxSpan-12-xs hxSpan-3-lg hxOrder-2-lg">
14+
<h3 class="hxSubSectionTitle">Options</h3>
15+
<div class="hxRow">
16+
<div class="hxCol hxSpan-12-lg hxSpan-6-xs">
17+
<b>Variant:</b><br />
18+
<template v-for="_variant in variants">
19+
<label>
20+
<input
21+
type="radio"
22+
name="variant"
23+
v-model="variant"
24+
:value="_variant" />
25+
{% raw %}{{ _variant.label }}{% endraw %}
26+
</label>
27+
<br />
28+
</template>
29+
</div>
830

9-
<!-- explanation goes here -->
31+
<div class="hxCol hxSpan-12-lg hxSpan-6-xs">
32+
<b>Size:</b><br />
33+
<template v-for="_size in sizes">
34+
<label>
35+
<input
36+
type="radio"
37+
name="size"
38+
v-model="size"
39+
:value="_size" />
40+
{% raw %}{{ _size.label }}{% endraw %}
41+
</label>
42+
<br />
43+
</template>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="hxCol hxSpan-12-xs hxSpan-9-lg hxOrder-1-lg">
48+
<section>
49+
<h3 class="hxSubSectionTitle">Single Button</h3>
50+
<div class="demo button-demo">
51+
<button :class="loneClasses">
52+
{% raw %}{{size.label}} {{variant.label}}{% endraw %}
53+
</button>
54+
</div>
55+
{% code 'html' %}
56+
{% raw %}<button class="{{loneClasses}}">...</button>{% endraw %}
57+
{% endcode %}
58+
</section>
1059

11-
<div class="demo">
12-
<button class="hxBtn">Default Button</button>
60+
<section>
61+
<h3 class="hxSubSectionTitle">Button Group</h3>
62+
<div class="demo button-demo">
63+
<div :class="groupClasses">
64+
<button class="hxBtn">First</button>
65+
<button class="hxBtn">Second</button>
66+
<button class="hxBtn">
67+
<hx-icon type="angle-down"></hx-icon>
68+
</button>
69+
</div>
70+
</div>
71+
{% code 'html' %}{% raw %}
72+
<div class="{{ groupClasses }}">
73+
<button class="hxBtn">First</button>
74+
<button class="hxBtn">Second</button>
75+
<button class="hxBtn">
76+
<hx-icon type="angle-down"></hx-icon>
77+
</button>
78+
</div>{% endraw %}
79+
{% endcode %}
80+
</section>
81+
</div>
1382
</div>
14-
{% code 'html' %}
15-
<button class="hxBtn">Default Button</button>
16-
{% endcode %}
17-
</section>
18-
19-
<section>
20-
<h2 class="hxSectionTitle" id="primary-button">Primary Button</h2>
21-
<div class="demo">
22-
<button class="hxBtn hxBtn--primary">Primary Button</button>
23-
</div>
24-
{% code 'html' %}
25-
<button class="hxBtn hxBtn--primary">Primary Button</button>
26-
{% endcode %}
27-
</section>
28-
29-
<section>
30-
<h2 class="hxSectionTitle" id="link-button">Link Button</h2>
31-
<div class="demo">
32-
<button class="hxBtn hxBtn--link">Link Button</button>
33-
</div>
34-
{% code 'html' %}
35-
<button class="hxBtn hxBtn--link">Link Button</button>
36-
{% endcode %}
37-
</section>
38-
39-
<section>
40-
<h2 class="hxSectionTitle" id="button-sizing">Button Sizing</h2>
41-
<div class="demo">
42-
<button type="button" class="hxBtn hxBtn--lg">Large Button</button>
43-
<button type="button" class="hxBtn">Default Button</button>
44-
<button type="button" class="hxBtn hxBtn--sm">Compact Button</button>
45-
</div>
46-
47-
{% code 'html' %}
48-
<button type="button" class="hxBtn hxBtn--lg">Large Button</button>
49-
<button type="button" class="hxBtn">Default Button</button>
50-
<button type="button" class="hxBtn hxBtn--sm">Compact Button</button>
51-
{% endcode %}
5283
</section>
5384

5485
<section data-visreg="button-states">
@@ -64,17 +95,17 @@ <h2 class="hxSectionTitle" id="button-states">Button States</h2>
6495
</tr>
6596
<tr>
6697
<td>Primary</td>
67-
<td><button class="hxBtn hxBtn--primary">Normal</button></td>
68-
<td><button class="hxBtn hxBtn--primary pseudo-hover">Hover</button></td>
69-
<td><button class="hxBtn hxBtn--primary pseudo-active">Pressed</button></td>
70-
<td><button class="hxBtn hxBtn--primary" disabled>Disabled</button></td>
98+
<td><button class="hxBtn hxPrimary">Normal</button></td>
99+
<td><button class="hxBtn hxPrimary pseudo-hover">Hover</button></td>
100+
<td><button class="hxBtn hxPrimary pseudo-active">Pressed</button></td>
101+
<td><button class="hxBtn hxPrimary" disabled>Disabled</button></td>
71102
</tr>
72103
<tr>
73104
<td>Link</td>
74-
<td><button class="hxBtn hxBtn--link">Normal</button></td>
75-
<td><button class="hxBtn hxBtn--link pseudo-hover">Hover</button></td>
76-
<td><button class="hxBtn hxBtn--link pseudo-active">Pressed</button></td>
77-
<td><button class="hxBtn hxBtn--link" disabled>Disabled</button></td>
105+
<td><button class="hxBtn hxLink">Normal</button></td>
106+
<td><button class="hxBtn hxLink pseudo-hover">Hover</button></td>
107+
<td><button class="hxBtn hxLink pseudo-active">Pressed</button></td>
108+
<td><button class="hxBtn hxLink" disabled>Disabled</button></td>
78109
</tr>
79110
</tbody>
80111
</table>

‎docs/components/checkboxes/checkbox-demo.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
if (document.getElementById('vue-checkboxDemo')) {
2+
new Vue({
3+
el: '#vue-checkboxDemo',
4+
data: {
5+
isChecked: true,
6+
isDisabled: false,
7+
isIndeterminate: false,
8+
isInvalid: false,
9+
},
10+
computed: {
11+
snippet: function () {
12+
var raw = `<hx-checkbox
13+
${this.isChecked ? 'checked' : ''}
14+
${this.isDisabled ? 'disabled' : ''}
15+
${this.isIndeterminate ? 'indeterminate' : ''}
16+
${this.isInvalid ? 'invalid' : ''}
17+
></hx-checkbox>`;
18+
var rawCollapsed = raw.replace(/[\r\n\s]+/gm, ' ');
19+
var rawNormalized = rawCollapsed.replace(/(\s>)/gm, '>');
20+
return rawNormalized;
21+
},
22+
},
23+
});
24+
}

‎docs/components/checkboxes/index.html‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,42 @@
66
{% extends 'component.njk' %}
77
{% block content %}
88
<section>
9-
<h2 class="hxSectionTitle" id="checkbox"> Basic Checkbox</h2>
10-
<div class="demo">
11-
<hx-checkbox></hx-checkbox>
9+
<h2 class="hxSectionTitle" id="demos">Demos</h2>
10+
<div id="vue-checkboxDemo" class="hxRow" v-cloak>
11+
<div class="hxCol hxSpan-12-xs hxSpan-3-lg hxOrder-2-lg">
12+
<h3 class="hxSubSectionTitle">Options</h2>
13+
<label>
14+
<input type="checkbox" v-model="isChecked" />
15+
Checked
16+
</label><br />
17+
<label>
18+
<input type="checkbox" v-model="isDisabled" />
19+
Disabled
20+
</label><br />
21+
<label>
22+
<input type="checkbox" v-model="isIndeterminate" />
23+
Indeterminate
24+
</label><br />
25+
<label>
26+
<input type="checkbox" v-model="isInvalid" />
27+
Invalid
28+
</label>
29+
</div>
30+
<div class="hxCol hxSpan-12-xs hxSpan-9-lg hxOrder-1-lg">
31+
<h3 class="hxSubSectionTitle">Basic Checkbox</h2>
32+
<div class="demo">
33+
<hx-checkbox
34+
:checked="isChecked"
35+
:disabled="isDisabled"
36+
:indeterminate="isIndeterminate"
37+
:invalid="isInvalid"
38+
></hx-checkbox>
39+
</div>
40+
{% code 'html' %}
41+
{% raw %}{{ snippet }}{% endraw %}
42+
{% endcode %}
43+
</div>
1244
</div>
13-
{% code 'html' %}
14-
<hx-checkbox></hx-checkbox>
15-
{% endcode %}
1645
</section>
1746

1847
<section data-visreg="checkbox-states">

0 commit comments

Comments
 (0)