Skip to content

Commit 44f2d89

Browse files
CITguyCITguy
authored
Merge pull request #123 from rackerlabs/surf-810-missing-components
surf-810-missing-components
2 parents 594b3c2 + 990a769 commit 44f2d89

File tree

45 files changed

+2260
-2461
lines changed

Some content is hidden

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

45 files changed

+2260
-2461
lines changed

‎docs/_data/nav.json5‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,8 @@
1111
label: 'Styleguide',
1212
path: 'styleguide',
1313
children: [
14-
{ label: 'Box', path: 'box' },
15-
{ label: 'Code', path: 'code' },
1614
//{ label: 'Colors', path: 'colors' },
17-
{ label: 'Grid', path: 'grid' },
18-
//{ label: 'Iconography', path: 'iconography' },
15+
{ label: 'Iconography', path: 'iconography' },
1916
{ label: 'Typography', path: 'typography' },
2017
]
2118
},
@@ -32,9 +29,11 @@
3229
path: 'components',
3330
children: [
3431
{ label: 'Alerts', path: 'alerts' },
32+
{ label: 'Box', path: 'box' },
3533
{ label: 'Breadcrumbs', path: 'breadcrumbs' },
3634
{ label: 'Buttons', path: 'buttons' },
37-
{ label: 'Forms', path: 'forms' },
35+
{ label: 'Checkboxes', path: 'checkboxes' },
36+
{ label: 'Grid', path: 'grid' },
3837
{
3938
label: 'Layouts',
4039
path: 'layouts',
@@ -47,10 +46,14 @@
4746
},
4847
{ label: 'Lists', path: 'lists' },
4948
{ label: 'Menus', path: 'menus' },
50-
{ label: 'Navigation', path: 'navigation' },
5149
{ label: 'Panels', path: 'panels' },
50+
{ label: 'Popovers', path: 'popovers' },
51+
{ label: 'Reveals', path: 'reveals' },
52+
{ label: 'Status Pills', path: 'status-pills' },
5253
{ label: 'Tables', path: 'tables' },
5354
{ label: 'Tabs', path: 'tabs' },
55+
{ label: 'Text Inputs', path: 'text-inputs' },
56+
{ label: 'Tooltips', path: 'tooltips' },
5457
],
5558
},
5659

‎docs/components/alerts/index.html‎

Lines changed: 128 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -3,161 +3,159 @@
33
---
44
{% extends 'component.njk' %}
55
{% block content %}
6-
<!-- explanation goes here -->
6+
<section>
7+
<h2 class="hxSectionTitle" id="default">Default</h2>
78

8-
<section>
9-
<h2 class="hxSectionTitle" id="default">Default</h2>
10-
11-
<div class="demo">
12-
<div role="status" class="hxAlerts" aria-live="polite">
13-
<div class="hxAlert">
14-
<div class="hxAlert__icon">
15-
<hx-icon type="info-circle"></hx-icon>
16-
</div>
17-
<div class="hxAlert__text">
18-
<span class="hxAlert__status">Info</span>
19-
Here is helpful information.
20-
</div>
21-
<div class="hxAlert__action">
22-
<a href="#">Acknowledge</a>
9+
<div class="demo">
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>
2323
</div>
24-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
2524
</div>
2625
</div>
27-
</div>
28-
{% code 'html' %}
29-
<div role="status" class="hxAlerts" aria-live="polite">
30-
<div class="hxAlert">
31-
<div class="hxAlert__icon">
32-
<hx-icon type="info-circle"></hx-icon>
26+
{% code 'html' %}
27+
<div role="status" class="hxAlerts" aria-live="polite">
28+
<div class="hxAlert">
29+
<div class="hxAlert__icon">
30+
<hx-icon type="info-circle"></hx-icon>
31+
</div>
32+
<div class="hxAlert__text">
33+
<span class="hxAlert__status">Info</span>
34+
Here is helpful information.
35+
</div>
36+
<div class="hxAlert__action">
37+
<a href="#">Acknowledge</a>
38+
</div>
39+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
3340
</div>
34-
<div class="hxAlert__text">
35-
<span class="hxAlert__status">Info</span>
36-
Here is helpful information.
37-
</div>
38-
<div class="hxAlert__action">
39-
<a href="#">Acknowledge</a>
40-
</div>
41-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
4241
</div>
43-
</div>
44-
{% endcode %}
45-
</section>
42+
{% endcode %}
43+
</section>
4644

47-
<section>
48-
<h2 class="hxSectionTitle" id="error">Error</h2>
45+
<section>
46+
<h2 class="hxSectionTitle" id="error">Error</h2>
4947

50-
<div class="demo">
51-
<div role="status" class="hxAlerts" aria-live="polite">
52-
<div class="hxAlert hxAlert--error">
53-
<div class="hxAlert__icon">
54-
<hx-icon type="exclamation-circle"></hx-icon>
48+
<div class="demo">
49+
<div role="status" class="hxAlerts" aria-live="polite">
50+
<div class="hxAlert hxAlert--error">
51+
<div class="hxAlert__icon">
52+
<hx-icon type="exclamation-circle"></hx-icon>
53+
</div>
54+
<div class="hxAlert__text">
55+
<span class="hxAlert__status">Error</span>
56+
Change a few things up and try submitting again.
57+
</div>
58+
<div class="hxAlert__action">
59+
<a href="#">Correct Issue</a>
60+
</div>
61+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
5562
</div>
56-
<div class="hxAlert__text">
57-
<span class="hxAlert__status">Error</span>
58-
Change a few things up and try submitting again.
59-
</div>
60-
<div class="hxAlert__action">
61-
<a href="#">Correct Issue</a>
62-
</div>
63-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
6463
</div>
6564
</div>
66-
</div>
67-
{% code 'html' %}
68-
<div role="status" class="hxAlerts" aria-live="polite">
69-
<div class="hxAlert hxAlert--error">
70-
<div class="hxAlert__icon">
71-
<hx-icon type="exclamation-circle"></hx-icon>
72-
</div>
73-
<div class="hxAlert__text">
74-
<span class="hxAlert__status">Error</span>
75-
Change a few things up and try submitting again.
65+
{% code 'html' %}
66+
<div role="status" class="hxAlerts" aria-live="polite">
67+
<div class="hxAlert hxAlert--error">
68+
<div class="hxAlert__icon">
69+
<hx-icon type="exclamation-circle"></hx-icon>
70+
</div>
71+
<div class="hxAlert__text">
72+
<span class="hxAlert__status">Error</span>
73+
Change a few things up and try submitting again.
74+
</div>
75+
<div class="hxAlert__action">
76+
<a href="#">Correct Issue</a>
77+
</div>
78+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
7679
</div>
77-
<div class="hxAlert__action">
78-
<a href="#">Correct Issue</a>
79-
</div>
80-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
8180
</div>
82-
</div>
83-
{% endcode %}
84-
</section>
81+
{% endcode %}
82+
</section>
8583

86-
<section>
87-
<h2 class="hxSectionTitle" id="warning">Warning</h2>
84+
<section>
85+
<h2 class="hxSectionTitle" id="warning">Warning</h2>
8886

89-
<div class="demo">
90-
<div role="status" class="hxAlerts" aria-live="polite">
91-
<div class="hxAlert hxAlert--warning">
92-
<div class="hxAlert__icon">
93-
<hx-icon type="exclamation-triangle"></hx-icon>
87+
<div class="demo">
88+
<div role="status" class="hxAlerts" aria-live="polite">
89+
<div class="hxAlert hxAlert--warning">
90+
<div class="hxAlert__icon">
91+
<hx-icon type="exclamation-triangle"></hx-icon>
92+
</div>
93+
<div class="hxAlert__text">
94+
<span class="hxAlert__status">Warning</span>
95+
Best check yo self, you're not looking too good.
96+
</div>
97+
<div class="hxAlert__action">
98+
<a href="#">Double Check</a>
99+
</div>
100+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
94101
</div>
95-
<div class="hxAlert__text">
96-
<span class="hxAlert__status">Warning</span>
97-
Best check yo self, you're not looking too good.
98-
</div>
99-
<div class="hxAlert__action">
100-
<a href="#">Double Check</a>
101-
</div>
102-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
103102
</div>
104103
</div>
105-
</div>
106-
{% code 'html' %}
107-
<div role="status" class="hxAlerts" aria-live="polite">
108-
<div class="hxAlert hxAlert--warning">
109-
<div class="hxAlert__icon">
110-
<hx-icon type="exclamation-triangle"></hx-icon>
111-
</div>
112-
<div class="hxAlert__text">
113-
<span class="hxAlert__status">Warning</span>
114-
Best check yo self, you're not looking too good.
104+
{% code 'html' %}
105+
<div role="status" class="hxAlerts" aria-live="polite">
106+
<div class="hxAlert hxAlert--warning">
107+
<div class="hxAlert__icon">
108+
<hx-icon type="exclamation-triangle"></hx-icon>
109+
</div>
110+
<div class="hxAlert__text">
111+
<span class="hxAlert__status">Warning</span>
112+
Best check yo self, you're not looking too good.
113+
</div>
114+
<div class="hxAlert__action">
115+
<a href="#">Double Check</a>
116+
</div>
117+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
115118
</div>
116-
<div class="hxAlert__action">
117-
<a href="#">Double Check</a>
118-
</div>
119-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
120119
</div>
121-
</div>
122-
{% endcode %}
123-
</section>
120+
{% endcode %}
121+
</section>
124122

125-
<section>
126-
<h2 class="hxSectionTitle" id="success">Success</h2>
123+
<section>
124+
<h2 class="hxSectionTitle" id="success">Success</h2>
127125

128-
<div class="demo">
129-
<div role="status" class="hxAlerts" aria-live="polite">
130-
<div class="hxAlert hxAlert--success">
131-
<div class="hxAlert__icon">
132-
<hx-icon type="checkmark"></hx-icon>
126+
<div class="demo">
127+
<div role="status" class="hxAlerts" aria-live="polite">
128+
<div class="hxAlert hxAlert--success">
129+
<div class="hxAlert__icon">
130+
<hx-icon type="checkmark"></hx-icon>
131+
</div>
132+
<div class="hxAlert__text">
133+
<span class="hxAlert__status ">Success</span>
134+
You successfully read this important alert message.
135+
</div>
136+
<div class="hxAlert__action">
137+
<a href="#">Celebrate</a>
138+
</div>
139+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
133140
</div>
134-
<div class="hxAlert__text">
135-
<span class="hxAlert__status ">Success</span>
136-
You successfully read this important alert message.
137-
</div>
138-
<div class="hxAlert__action">
139-
<a href="#">Celebrate</a>
140-
</div>
141-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
142141
</div>
143142
</div>
144-
</div>
145-
{% code 'html' %}
146-
<div role="status" class="hxAlerts" aria-live="polite">
147-
<div class="hxAlert hxAlert--success">
148-
<div class="hxAlert__icon">
149-
<hx-icon type="checkmark"></hx-icon>
150-
</div>
151-
<div class="hxAlert__text">
152-
<span class="hxAlert__status ">Success</span>
153-
You successfully read this important alert message.
143+
{% code 'html' %}
144+
<div role="status" class="hxAlerts" aria-live="polite">
145+
<div class="hxAlert hxAlert--success">
146+
<div class="hxAlert__icon">
147+
<hx-icon type="checkmark"></hx-icon>
148+
</div>
149+
<div class="hxAlert__text">
150+
<span class="hxAlert__status ">Success</span>
151+
You successfully read this important alert message.
152+
</div>
153+
<div class="hxAlert__action">
154+
<a href="#">Celebrate</a>
155+
</div>
156+
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
154157
</div>
155-
<div class="hxAlert__action">
156-
<a href="#">Celebrate</a>
157-
</div>
158-
<button class="hxAlert__dismiss"><hx-icon type="times"></hx-icon></button>
159158
</div>
160-
</div>
161-
{% endcode %}
162-
</section>
159+
{% endcode %}
160+
</section>
163161
{% endblock %}

‎docs/styleguide/box/box-demo.js‎ renamed to ‎docs/components/box/box-demo.js‎

File renamed without changes.

‎docs/styleguide/box/index.html‎ renamed to ‎docs/components/box/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
title: Box
33
also:
4+
components/grid: Grid
45
components/layouts: Layouts
5-
styleguide/grid: Grid
66
---
7-
{% extends 'styleguide.njk' %}
7+
{% extends 'component.njk' %}
88
{% block content %}
99
<section>
1010
<p>

0 commit comments

Comments
 (0)