Skip to content

Commit 3c7142b

Browse files
CITguyCITguy
authored
Merge pull request #143 from rackerlabs/SURF-675-Build-Hx-Alert
feat(alert): add alert component
2 parents aa52b8f + 6369843 commit 3c7142b

File tree

13 files changed

+517
-156
lines changed

13 files changed

+517
-156
lines changed

‎docs/_data/nav.json5‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
children: [
6363
{ label: '<hx-accordion>', path: 'hx-accordion' },
6464
{ label: '<hx-accordion-panel>', path: 'hx-accordion-panel' },
65+
{ label: '<hx-alert>', path: 'hx-alert' },
6566
{ label: '<hx-busy>', path: 'hx-busy' },
6667
{ label: '<hx-checkbox>', path: 'hx-checkbox' },
6768
{ label: '<hx-dd>', path: 'hx-dd' },

‎docs/components/alerts/alert-demo.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import Util from '../../_util';
2+
3+
if (document.getElementById('vue-alertDemo')) {
4+
const TYPES = [
5+
{ label: 'Default', value: '' },
6+
{ label: 'Info', value: 'info' },
7+
{ label: 'Error', value: 'error' },
8+
{ label: 'Success', value: 'success' },
9+
{ label: 'Warning', value: 'warning' },
10+
];
11+
12+
new Vue({
13+
el: '#vue-alertDemo',
14+
data: {
15+
content: 'Nope! Nope! Nope! Nope! Nope!',
16+
cta: 'burn it',
17+
isStatic: false,
18+
status: 'spider',
19+
type: TYPES[0],
20+
types: TYPES,
21+
},
22+
methods: {
23+
onSubmit: function () {
24+
alert('The spider didn\'t see that coming!');
25+
},
26+
},
27+
computed: {
28+
attrType: function () {
29+
if (this.type.value !== '') {
30+
return `type="${this.type.value}"`;
31+
} else {
32+
return '';
33+
}
34+
},
35+
attrStatus: function () {
36+
if (this.status !== '') {
37+
return `status="${this.status}"`;
38+
} else {
39+
return '';
40+
}
41+
},
42+
attrCta: function () {
43+
if (this.cta !== '') {
44+
return `cta="${this.cta}"`;
45+
} else {
46+
return '';
47+
}
48+
},
49+
snippet: function () {
50+
return Util.snippet(`
51+
<hx-alert
52+
${this.attrCta}
53+
${this.attrStatus}
54+
${this.isStatic ? 'static' : ''}
55+
${this.attrType}
56+
>
57+
${this.content}
58+
</hx-alert>
59+
`);
60+
},
61+
},
62+
});
63+
}

‎docs/components/alerts/index.html‎

Lines changed: 51 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,62 @@
11
---
22
title: Alerts
33
minver: 0.1.1
4+
also:
5+
elements/hx-alert: <hx-alert>
46
---
57
{% extends 'component.njk' %}
68
{% block content %}
79
<section>
8-
<h2 id="default">Default</h2>
9-
10-
<div class="demo">
11-
<div role="status" class="hxAlerts" aria-live="polite">
12-
<div class="hxAlert">
13-
<div class="hxAlert__icon">
14-
<hx-icon type="info-circle"></hx-icon>
15-
</div>
16-
<div class="hxAlert__text">
17-
<span class="hxAlert__status">Info</span>
18-
Here is helpful information.
19-
</div>
20-
<div class="hxAlert__action">
21-
<a href="#">Acknowledge</a>
22-
</div>
23-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
24-
</div>
25-
</div>
26-
</div>
27-
{% code 'html' %}
28-
<div role="status" class="hxAlerts" aria-live="polite">
29-
<div class="hxAlert">
30-
<div class="hxAlert__icon">
31-
<hx-icon type="info-circle"></hx-icon>
32-
</div>
33-
<div class="hxAlert__text">
34-
<span class="hxAlert__status">Info</span>
35-
Here is helpful information.
36-
</div>
37-
<div class="hxAlert__action">
38-
<a href="#">Acknowledge</a>
39-
</div>
40-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
41-
</div>
42-
</div>
43-
{% endcode %}
44-
</section>
45-
46-
<section>
47-
<h2 id="error">Error</h2>
48-
49-
<div class="demo">
50-
<div role="status" class="hxAlerts" aria-live="polite">
51-
<div class="hxAlert hxAlert--error">
52-
<div class="hxAlert__icon">
53-
<hx-icon type="exclamation-circle"></hx-icon>
54-
</div>
55-
<div class="hxAlert__text">
56-
<span class="hxAlert__status">Error</span>
57-
Change a few things up and try submitting again.
58-
</div>
59-
<div class="hxAlert__action">
60-
<a href="#">Correct Issue</a>
61-
</div>
62-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
63-
</div>
64-
</div>
65-
</div>
66-
{% code 'html' %}
67-
<div role="status" class="hxAlerts" aria-live="polite">
68-
<div class="hxAlert hxAlert--error">
69-
<div class="hxAlert__icon">
70-
<hx-icon type="exclamation-circle"></hx-icon>
71-
</div>
72-
<div class="hxAlert__text">
73-
<span class="hxAlert__status">Error</span>
74-
Change a few things up and try submitting again.
75-
</div>
76-
<div class="hxAlert__action">
77-
<a href="#">Correct Issue</a>
78-
</div>
79-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
80-
</div>
81-
</div>
82-
{% endcode %}
83-
</section>
84-
85-
<section>
86-
<h2 id="warning">Warning</h2>
87-
88-
<div class="demo">
89-
<div role="status" class="hxAlerts" aria-live="polite">
90-
<div class="hxAlert hxAlert--warning">
91-
<div class="hxAlert__icon">
92-
<hx-icon type="exclamation-triangle"></hx-icon>
93-
</div>
94-
<div class="hxAlert__text">
95-
<span class="hxAlert__status">Warning</span>
96-
Best check yo self, you're not looking too good.
97-
</div>
98-
<div class="hxAlert__action">
99-
<a href="#">Double Check</a>
100-
</div>
101-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
102-
</div>
103-
</div>
104-
</div>
105-
{% code 'html' %}
106-
<div role="status" class="hxAlerts" aria-live="polite">
107-
<div class="hxAlert hxAlert--warning">
108-
<div class="hxAlert__icon">
109-
<hx-icon type="exclamation-triangle"></hx-icon>
110-
</div>
111-
<div class="hxAlert__text">
112-
<span class="hxAlert__status">Warning</span>
113-
Best check yo self, you're not looking too good.
114-
</div>
115-
<div class="hxAlert__action">
116-
<a href="#">Double Check</a>
117-
</div>
118-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
119-
</div>
120-
</div>
121-
{% endcode %}
122-
</section>
123-
124-
<section>
125-
<h2 id="success">Success</h2>
126-
127-
<div class="demo">
128-
<div role="status" class="hxAlerts" aria-live="polite">
129-
<div class="hxAlert hxAlert--success">
130-
<div class="hxAlert__icon">
131-
<hx-icon type="checkmark"></hx-icon>
132-
</div>
133-
<div class="hxAlert__text">
134-
<span class="hxAlert__status ">Success</span>
135-
You successfully read this important alert message.
136-
</div>
137-
<div class="hxAlert__action">
138-
<a href="#">Celebrate</a>
139-
</div>
140-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
141-
</div>
10+
<h2 id="demo">Demo</h2>
11+
<div id="vue-alertDemo" class="hxRow" v-cloak>
12+
<div class="hxCol hxSpan-12-xs hxSpan-3-lg hxOrder-2-lg">
13+
<h3>Options</h3>
14+
<p>
15+
<b>Type:</b><br />
16+
<select v-model="type">
17+
<option v-for="_type in types" :value="_type">
18+
{% raw %}{{ _type.label }}{% endraw %}
19+
</option>
20+
</select>
21+
</p>
22+
<p>
23+
<label>
24+
<input type="checkbox" v-model="isStatic">
25+
Static
26+
</label>
27+
</p>
28+
<p>
29+
<b>Status:</b><br />
30+
<input
31+
class="hxTextCtrl"
32+
type="text"
33+
v-model="status" />
34+
</p>
35+
<p>
36+
<b>CTA:</b><br />
37+
<input
38+
class="hxTextCtrl"
39+
type="text"
40+
v-model="cta" />
41+
</p>
42+
<p>
43+
<b>Content:</b><br />
44+
<textarea class="hxTextCtrl" v-model="content"></textarea>
45+
</p>
46+
</div>
47+
<div class="hxCol hxSpan-12-xs hxSpan-9-lg hxOrder-1-lg">
48+
<div class="demo alert-demo">
49+
<hx-alert
50+
:type="type.value"
51+
:status="status"
52+
:static="isStatic"
53+
:cta="cta"
54+
@submit="onSubmit">
55+
{% raw %}{{content}}{% endraw %}
56+
</hx-alert>
57+
</div>
58+
<pre>{% raw %}{{snippet}}{% endraw %}</pre>
14259
</div>
14360
</div>
144-
{% code 'html' %}
145-
<div role="status" class="hxAlerts" aria-live="polite">
146-
<div class="hxAlert hxAlert--success">
147-
<div class="hxAlert__icon">
148-
<hx-icon type="checkmark"></hx-icon>
149-
</div>
150-
<div class="hxAlert__text">
151-
<span class="hxAlert__status ">Success</span>
152-
You successfully read this important alert message.
153-
</div>
154-
<div class="hxAlert__action">
155-
<a href="#">Celebrate</a>
156-
</div>
157-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
158-
</div>
159-
</div>
160-
{% endcode %}
16161
</section>
16262
{% endblock %}

‎docs/docs.js‎

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

33
import './components/accordions/accordion-demo';
4+
import './components/alerts/alert-demo';
45
import './components/box/box-demo';
56
import './components/busy/busy-demo';
67
import './components/buttons/button-demo';

0 commit comments

Comments
 (0)