Skip to content

Commit 596cfc0

Browse files
CITguyCITguy
authored
Merge pull request #229 from rackerlabs/surf-1103-build-hx-file-icon
feat(hx-file-icon): new element styles added for hx-file-icon
2 parents 6ff7daa + 80ed44d commit 596cfc0

File tree

10 files changed

+172
-4
lines changed

10 files changed

+172
-4
lines changed

‎docs/_data/nav.json5‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474
{ label: '<hx-disclosure>', path: 'hx-disclosure' },
7575
{ label: '<hx-dl>', path: 'hx-dl' },
7676
{ label: '<hx-dt>', path: 'hx-dt' },
77+
{ label: '<hx-file-icon>', path: 'hx-file-icon' },
7778
{ label: '<hx-icon>', path: 'hx-icon' },
7879
{ label: '<hx-menu>', path: 'hx-menu' },
7980
{ label: '<hx-menuitem>', path: 'hx-menuitem' },

‎docs/components/icons/index.html‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@
33
minver: 0.1.0
44
also:
55
elements/hx-icon: <hx-icon>
6+
elements/hx-file-icon: <hx-file-icon>
67
---
78
{% extends 'component.njk' %}
89
{% block content %}
910
<section>
10-
<h2 id="demo">Demo</h2>
11+
<h2 id="konami-code">Konami Code</h2>
1112
<div class="demo">
1213
<p>
1314
<hx-icon type="kbd-arrow-up"></hx-icon>
@@ -38,6 +39,40 @@ <h2 id="demo">Demo</h2>
3839
{% endcode %}
3940
</section>
4041

42+
<section>
43+
<h2 id="file-icons">File Icons</h2>
44+
<div class="demo">
45+
<hx-file-icon></hx-file-icon>
46+
<hx-file-icon type="paperclip"></hx-file-icon>
47+
<hx-file-icon>pem</hx-file-icon>
48+
<hx-file-icon type="key">pem</hx-file-icon>
49+
<hx-file-icon type="mime-archive">gzip</hx-file-icon>
50+
<hx-file-icon type="mime-audio">mp3</hx-file-icon>
51+
<hx-file-icon type="mime-code">html</hx-file-icon>
52+
<hx-file-icon type="mime-data">json</hx-file-icon>
53+
<hx-file-icon type="mime-image">tiff</hx-file-icon>
54+
<hx-file-icon type="mime-system">exe</hx-file-icon>
55+
<hx-file-icon type="mime-text">docx</hx-file-icon>
56+
<hx-file-icon type="mime-video">mpeg</hx-file-icon>
57+
<hx-file-icon type="paperclip">bzip2</hx-file-icon>
58+
</div>
59+
{% code 'html' %}
60+
<hx-file-icon></hx-file-icon>
61+
<hx-file-icon type="paperclip"></hx-file-icon>
62+
<hx-file-icon>pem</hx-file-icon>
63+
<hx-file-icon type="key">pem</hx-file-icon>
64+
<hx-file-icon type="mime-archive">gzip</hx-file-icon>
65+
<hx-file-icon type="mime-audio">mp3</hx-file-icon>
66+
<hx-file-icon type="mime-code">html</hx-file-icon>
67+
<hx-file-icon type="mime-data">json</hx-file-icon>
68+
<hx-file-icon type="mime-image">tiff</hx-file-icon>
69+
<hx-file-icon type="mime-system">exe</hx-file-icon>
70+
<hx-file-icon type="mime-text">docx</hx-file-icon>
71+
<hx-file-icon type="mime-video">mpeg</hx-file-icon>
72+
<hx-file-icon type="paperclip">bzip2</hx-file-icon>
73+
{% endcode %}
74+
</section>
75+
4176
<section id="vue-iconDemo">
4277
<h2 id="available-icons">Icons</h2>
4378
<div v-cloak>

‎docs/elements/hx-file-icon/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: <hx-file-icon>
3+
also:
4+
components/icons: Icons
5+
elements/hx-icon: <hx-icon>
6+
---
7+
{% extends 'element.njk' %}
8+
{% block content %}
9+
<section>
10+
<p>
11+
The custom <code>{{page.title}}</code> element renders a "file" icon with
12+
a customizable image and extension.
13+
</p>
14+
15+
<hx-dl class="hxBox-md metadata">
16+
<hx-def>
17+
<hx-dt>Permitted Parents</hx-dt>
18+
<hx-dd>any element that accepts flow content</hx-dd>
19+
</hx-def>
20+
<hx-def>
21+
<hx-dt>Permitted Children</hx-dt>
22+
<hx-dd>phrasing content (specifically, an optional file extension)</hx-dd>
23+
</hx-def>
24+
<hx-def>
25+
<hx-dt>Events</hx-dt>
26+
<hx-dd><em>none</em></hx-dd>
27+
</hx-def>
28+
</hx-dl>
29+
</section>
30+
{% endblock %}
31+
32+
{% block attributes %}
33+
<dl>
34+
<dt>type {String}</dt>
35+
<dd>
36+
Changes the displayed icon to one of the
37+
<a href="components/icons/#available-icons">available icons</a>
38+
</dd>
39+
</dl>
40+
{% endblock %}

‎docs/elements/hx-icon/index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,20 @@
33
minver: 0.1.0
44
also:
55
components/icons: Icons
6+
elements/hx-file-icon: <hx-file-icon>
67
---
78
{% extends 'element.njk' %}
89
{% block content %}
910
<section>
1011
<p>
11-
The custom <code>&lt;hx-icon&gt;</code> element renders one of many
12+
The custom <code>{{page.title}}</code> element renders one of many
1213
built-in SVG icons.
1314
</p>
1415

1516
<hx-dl class="hxBox-md metadata">
1617
<hx-def>
1718
<hx-dt>Permitted Parents</hx-dt>
18-
<hx-dd>any element that accepts embeded content</hx-dd>
19+
<hx-dd>any element that accepts embedded content</hx-dd>
1920
</hx-def>
2021
<hx-def>
2122
<hx-dt>Permitted Children</hx-dt>
@@ -31,7 +32,7 @@
3132

3233
{% block attributes %}
3334
<dl>
34-
<dt>type</dt>
35+
<dt>type {String}</dt>
3536
<dd>
3637
Changes the displayed icon to one of the
3738
<a href="components/icons/#available-icons">available icons</a>

‎src/helix-ui/elements.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export { HXCheckboxElement } from './elements/HXCheckboxElement.js';
1010
export { HXDisclosureElement } from './elements/HXDisclosureElement.js';
1111
export { HXElement } from './elements/HXElement.js';
1212
export { HXErrorElement } from './elements/HXErrorElement.js';
13+
export { HXFileIconElement } from './elements/HXFileIconElement.js';
1314
export { HXIconElement } from './elements/HXIconElement.js';
1415
export { HXMenuElement } from './elements/HXMenuElement.js';
1516
export { HXMenuitemElement } from './elements/HXMenuitemElement.js';

‎src/helix-ui/elements/HXFileIconElement.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div id="wrapper">
2+
<hx-icon type="file" id="base"></hx-icon>
3+
<div id="overlay">
4+
<hx-icon id="icon"></hx-icon>
5+
<div id="ext"><slot></slot></div>
6+
</div>
7+
</div>

‎src/helix-ui/elements/HXFileIconElement.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { HXElement } from './HXElement';
2+
import shadowStyles from './HXFileIconElement.less';
3+
import shadowMarkup from './HXFileIconElement.html';
4+
5+
/**
6+
* Defines behavior for the `<hx-file-icon>` element.
7+
*
8+
* @extends HXElement
9+
* @hideconstructor
10+
*/
11+
export class HXFileIconElement extends HXElement {
12+
static get is () {
13+
return 'hx-file-icon';
14+
}
15+
16+
static get template () {
17+
return `<style>${shadowStyles}</style>${shadowMarkup}`;
18+
}
19+
20+
$onConnect () {
21+
this.$upgradeProperty('type');
22+
}
23+
24+
static get $observedAttributes () {
25+
return [ 'type' ];
26+
}//$observedAttributes
27+
28+
$onAttributeChange (attr, oldVal, newVal) {
29+
if (attr === 'type') {
30+
this._elIcon.type = newVal;
31+
}
32+
}//$onAttributeChange
33+
34+
// GETTERS
35+
get type () {
36+
return this.getAttribute('type');
37+
}
38+
39+
// SETTERS
40+
set type (newVal) {
41+
return this.setAttribute('type', newVal);
42+
}
43+
44+
/** @private */
45+
get _elIcon () {
46+
return this.shadowRoot.getElementById('icon');
47+
}
48+
}

‎src/helix-ui/elements/HXFileIconElement.less‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@import './HXElement';
2+
@import 'elements/hx-icon';
3+
4+
#wrapper {
5+
position: relative;
6+
}
7+
8+
#base {
9+
font-size: 2.5rem;
10+
height: 1em;
11+
}
12+
13+
#overlay {
14+
line-height: 1;
15+
position: absolute;
16+
text-align: center;
17+
top: 0.5rem;
18+
width: 100%;
19+
}
20+
21+
#icon {
22+
font-size: 1rem;
23+
height: 1em;
24+
}
25+
26+
#ext {
27+
font-size: 0.5rem;
28+
line-height: 1.5;
29+
margin-top: 1px;
30+
text-transform: uppercase;
31+
}

‎src/helix-ui/styles/elements.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
@import 'elements/hx-disclosure';
1616
@import 'elements/hx-dl';
1717
@import 'elements/hx-error';
18+
@import 'elements/hx-file-icon';
1819
@import 'elements/hx-icon';
1920
@import 'elements/hx-menu';
2021
@import 'elements/hx-menuitem';

‎src/helix-ui/styles/elements/hx-file-icon.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
hx-file-icon {
2+
display: inline-block;
3+
}

0 commit comments

Comments
 (0)