Skip to content

Commit ec66412

Browse files
ssalinas24ssalinas24
committed
feat(status label): Build Status Label
1 parent 1e94992 commit ec66412

File tree

4 files changed

+173
-0
lines changed

4 files changed

+173
-0
lines changed

‎source/_data/nav.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ components:
1111
Navigation: navigation
1212
Popover: popover
1313
Reveal: reveal
14+
"Status Label": status-label
1415
Table: table
1516
Tabset: tabset
1617
"Text Input": text-input

‎source/components/status-label/index.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
title: Status Label
3+
assets:
4+
- helix-ui.css
5+
---
6+
{% extends 'component.njk' %}
7+
{% block content %}
8+
9+
<section>
10+
<h2 class="hxSectionTitle" id="default-label">Default Label</h2>
11+
<div class="demo">
12+
<hx-status>
13+
Default Label
14+
</hx-status>
15+
</div>
16+
{% code 'html' %}
17+
<hx-status>
18+
Default Label
19+
</hx-status>
20+
{% endcode %}
21+
</section>
22+
23+
<section>
24+
<h2 class="hxSectionTitle" id="emphasis-gray">Emphasis Gray</h2>
25+
<p>
26+
The <code>.-hxEmphasisGray</code> CSS class can be added to status labels that require more
27+
attention than the default style.
28+
</p>
29+
<div class="demo">
30+
<hx-status class="-hxEmphasisGray">
31+
Emphasis Gray
32+
</hx-status>
33+
</div>
34+
{% code 'html' %}
35+
<hx-status class="-hxEmphasisGray">
36+
Emphasis Gray
37+
</hx-status>
38+
{% endcode %}
39+
</section>
40+
41+
<section>
42+
<h2 class="hxSectionTitle" id="emphasis-purple">Emphasis Purple</h2>
43+
<p>
44+
The <code>.-hxEmphasisPurple</code> CSS class can be added to status labels that require
45+
more attention than the gray emphasis.
46+
</p>
47+
<div class="demo">
48+
<hx-status class="-hxEmphasisPurple">
49+
Emphasis Purple
50+
</hx-status>
51+
</div>
52+
{% code 'html' %}
53+
<hx-status class="-hxEmphasisPurple">
54+
Emphasis Purple
55+
</hx-status>
56+
{% endcode %}
57+
</section>
58+
59+
<section>
60+
<h2 class="hxSectionTitle" id="subdued">Subdued</h2>
61+
<p>
62+
The <code>.-hxSubdued</code> class can be used on status labels that require less or
63+
no attention from the user.
64+
</p>
65+
<div class="demo">
66+
<hx-status class="-hxSubdued">
67+
Subdued
68+
</hx-status>
69+
</div>
70+
{% code 'html' %}
71+
<hx-status class="-hxSubdued">
72+
Subdued
73+
</hx-status>
74+
{% endcode %}
75+
</section>
76+
77+
<section>
78+
<h2 class="hxSectionTitle" id="filled-labels">Filled Labels</h2>
79+
<p>
80+
The <code>.-hxFill</code> class can be used on status labels to apply filled
81+
backgrounds. This class can be used in conjunction with any of the previous
82+
status label modifier classes above.
83+
</p>
84+
<div class="demo">
85+
<hx-status class="-hxFill">
86+
Default Label
87+
</hx-status><br/>
88+
<hx-status class="-hxFill -hxEmphasisGray">
89+
Emphasis Gray
90+
</hx-status><br/>
91+
<hx-status class="-hxFill -hxEmphasisPurple">
92+
Emphasis Purple
93+
</hx-status><br/>
94+
<hx-status class="-hxFill -hxSubdued">
95+
Subdued
96+
</hx-status>
97+
</div>
98+
{% code 'html' %}
99+
<hx-status class="-hxFill">
100+
Default Label
101+
</hx-status><br/>
102+
<hx-status class="-hxFill -hxEmphasisGray">
103+
Emphasis Gray
104+
</hx-status><br/>
105+
<hx-status class="-hxFill -hxEmphasisPurple">
106+
Emphasis Purple
107+
</hx-status><br/>
108+
<hx-status class="-hxFill -hxSubdued">
109+
Subdued
110+
</hx-status>
111+
{% endcode %}
112+
</section>
113+
114+
{% endblock %}

‎source/components/status-label/status-label.less‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
hx-status {
2+
background-color: transparent;
3+
border: 1px solid @gray-750;
4+
border-radius: 1em; // 10px
5+
color: @gray-750;
6+
display: inline-block;
7+
font-size: 0.625rem; // 10px
8+
height: 1rem;
9+
line-height: 1;
10+
max-width: 100%;
11+
overflow: hidden;
12+
padding: 0.3em 0.8em 0.2em; // 3px 8px 2px
13+
text-align: center;
14+
text-transform: uppercase;
15+
text-overflow: ellipsis;
16+
white-space: nowrap;
17+
18+
&.-hxEmphasisGray {
19+
border-color: @gray-900;
20+
color: @gray-900;
21+
}
22+
23+
&.-hxEmphasisPurple {
24+
border-color: @purple-500;
25+
color: @purple-500;
26+
}
27+
28+
&.-hxSubdued {
29+
border-color: @gray-600;
30+
color: @gray-600;
31+
}
32+
33+
&.-hxFill {
34+
background-color: @gray-750;
35+
border-color: @gray-750;
36+
color: @gray-0;
37+
38+
&.-hxEmphasisGray {
39+
background-color: @gray-900;
40+
border-color: @gray-900;
41+
color: @gray-0;
42+
}
43+
44+
&.-hxEmphasisPurple {
45+
background-color: @purple-500;
46+
border-color: @purple-500;
47+
color: @gray-0;
48+
}
49+
50+
&.-hxSubdued {
51+
background-color: @gray-600;
52+
border-color: @gray-600;
53+
color: @gray-0;
54+
}
55+
}
56+
57+
}

‎source/helix-ui.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
@import 'icon/hx-icon';
2323
@import 'navigation/navigation';
2424
@import 'reveal/reveal';
25+
@import 'status-label/status-label';
2526
@import 'table/table';
2627
@import 'tabset/tabset';
2728
@import 'text-input/text-input';

0 commit comments

Comments
 (0)