Skip to content

Commit f2d4168

Browse files
CITguyCITguy
authored
Merge pull request #42 from rackerlabs/SURF-552-build-alert-bars
feat(alert bars): alert bars from spec
2 parents d88ee2a + dab75bf commit f2d4168

File tree

3 files changed

+196
-13
lines changed

3 files changed

+196
-13
lines changed

‎source/components/alerts/_alerts.less‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
.hxAlerts {
2+
//reserved for future styling
3+
}
4+
5+
.hxAlert {
6+
background-color: @blue-100;
7+
color: @gray-1000;
8+
display: flex;
9+
font-weight: 300;
10+
line-height: 1.25em;
11+
12+
& > * {
13+
padding-bottom: 0.875em;
14+
padding-top: 0.875em;
15+
}
16+
17+
&--error {
18+
background-color: @red-900;
19+
color: @gray-0;
20+
}
21+
22+
&--warning {
23+
background-color: @yellow-700;
24+
}
25+
26+
&--success {
27+
background-color: @green-700;
28+
color: @gray-0;
29+
}
30+
31+
&__icon {
32+
flex-grow: 0;
33+
flex-shrink: 0;
34+
flex-basis: 1em;
35+
margin-left: 1em;
36+
}
37+
38+
&__text {
39+
flex-grow: 1;
40+
margin-left: 1em;
41+
}
42+
43+
&__status {
44+
font-weight: 500;
45+
text-transform: uppercase;
46+
47+
&:after {
48+
content: ":";
49+
}
50+
}
51+
52+
&__action {
53+
margin-left: 1em;
54+
text-align: right;
55+
56+
a {
57+
color: inherit;
58+
font-weight: 500;
59+
text-transform: uppercase;
60+
61+
&:hover {
62+
color: inherit;
63+
text-decoration: underline;
64+
}
65+
}
66+
}
67+
68+
&__dismiss {
69+
background-color: transparent;
70+
border: none;
71+
display: flex;
72+
flex-direction: column;
73+
padding: 0.875em 1em;
74+
75+
hx-icon {
76+
height: 0.75em;
77+
width: 0.75em;
78+
}
79+
}
80+
}

‎source/components/alerts/index.html‎

Lines changed: 115 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,127 @@
11
---
22
title: Alerts
33
assets:
4-
- bootstrap.helix.css
4+
- helix-ui.css
55
---
66
<!-- explanation goes here -->
77

88
<div class="demo">
9-
<div class="alert alert-success" role="alert">
10-
<strong>Well done!</strong> You successfully read this important alert message.
11-
<a href="#">Celebrate</a>
9+
10+
<div role="status" class="hxAlerts" aria-live="polite">
11+
<div class="hxAlert">
12+
<div class="hxAlert__icon">
13+
<hx-icon type="info-circle"></hx-icon>
14+
</div>
15+
<div class="hxAlert__text">
16+
<span class="hxAlert__status">Info</span>
17+
Here is helpful information.
18+
</div>
19+
<div class="hxAlert__action">
20+
<a href="#">Acknowledge</a>
21+
</div>
22+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
23+
</div>
24+
25+
<div class="hxAlert hxAlert--error">
26+
<div class="hxAlert__icon">
27+
<hx-icon type="exclamation-circle"></hx-icon>
28+
</div>
29+
<div class="hxAlert__text">
30+
<span class="hxAlert__status">Error</span>
31+
Change a few things up and try submitting again.
32+
</div>
33+
<div class="hxAlert__action">
34+
<a href="#">Correct Issue</a>
35+
</div>
36+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
37+
</div>
38+
39+
<div class="hxAlert hxAlert--warning">
40+
<div class="hxAlert__icon">
41+
<hx-icon type="exclamation-triangle"></hx-icon>
42+
</div>
43+
<div class="hxAlert__text">
44+
<span class="hxAlert__status">Warning</span>
45+
Best check yo self, you're not looking too good.
46+
</div>
47+
<div class="hxAlert__action">
48+
<a href="#">Double Check</a>
49+
</div>
50+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
51+
</div>
52+
53+
<div class="hxAlert hxAlert--success">
54+
<div class="hxAlert__icon">
55+
<hx-icon type="checkmark"></hx-icon>
56+
</div>
57+
<div class="hxAlert__text">
58+
<span class="hxAlert__status ">Success</span>
59+
You successfully read this important alert message.
60+
</div>
61+
<div class="hxAlert__action">
62+
<a href="#">Celebrate</a>
63+
</div>
64+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
65+
</div>
66+
</div>
67+
</div>
68+
69+
```html
70+
<div role="status" class="hxAlerts" aria-live="polite">
71+
<div class="hxAlert">
72+
<div class="hxAlert__icon">
73+
<hx-icon type="info-circle"></hx-icon>
74+
</div>
75+
<div class="hxAlert__text">
76+
<span class="hxAlert__status">Info</span>
77+
Here is helpful information.
78+
</div>
79+
<div class="hxAlert__action">
80+
<a href="#">Acknowledge</a>
81+
</div>
82+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
1283
</div>
13-
<div class="alert alert-info" role="alert">
14-
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
15-
<a href="#">Acknowledge</a>
84+
85+
<div class="hxAlert hxAlert--error">
86+
<div class="hxAlert__icon">
87+
<hx-icon type="exclamation-circle"></hx-icon>
88+
</div>
89+
<div class="hxAlert__text">
90+
<span class="hxAlert__status">Error</span>
91+
Change a few things up and try submitting again.
92+
</div>
93+
<div class="hxAlert__action">
94+
<a href="#">Correct Issue</a>
95+
</div>
96+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
1697
</div>
17-
<div class="alert alert-warning" role="alert">
18-
<strong>Warning!</strong> Best check yo self, you're not looking too good.
19-
<a href="#">Double Check</a>
98+
99+
<div class="hxAlert hxAlert--warning">
100+
<div class="hxAlert__icon">
101+
<hx-icon type="exclamation-triangle"></hx-icon>
102+
</div>
103+
<div class="hxAlert__text">
104+
<span class="hxAlert__status">Warning</span>
105+
Best check yo self, you're not looking too good.
106+
</div>
107+
<div class="hxAlert__action">
108+
<a href="#">Double Check</a>
109+
</div>
110+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
20111
</div>
21-
<div class="alert alert-danger" role="alert">
22-
<strong>Oh snap!</strong> Change a few things up and try submitting again.
23-
<a href="#">Correct Issue</a>
112+
113+
<div class="hxAlert hxAlert--success">
114+
<div class="hxAlert__icon">
115+
<hx-icon type="checkmark"></hx-icon>
116+
</div>
117+
<div class="hxAlert__text">
118+
<span class="hxAlert__status ">Success</span>
119+
You successfully read this important alert message.
120+
</div>
121+
<div class="hxAlert__action">
122+
<a href="#">Celebrate</a>
123+
</div>
124+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
24125
</div>
25126
</div>
127+
```

‎source/styles/helix-ui.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
// Core CSS
1515
@import 'scaffold';
16+
@import 'alerts/_alerts';
1617
@import 'breadcrumbs/_breadcrumbs';
1718
@import 'grid/_grid';
1819
@import 'icons/_icons';

0 commit comments

Comments
 (0)