Skip to content

Commit 9ce67fd

Browse files
author
Catherine Siller
authored
Merge pull request #257 from rackerlabs/surf-843-build-file-upload-tile
feat(file-upload-tile): styles added for new component
2 parents 2a3591b + 3981a8a commit 9ce67fd

File tree

15 files changed

+525
-3
lines changed

15 files changed

+525
-3
lines changed

‎docs/_data/nav.json5‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
{ label: 'Checkboxes', path: 'checkboxes' },
2929
{ label: 'Choice Tiles', path: 'choice-tiles' },
3030
//{ label: 'Colors', path: 'colors' },
31+
{ label: 'File Tiles', path: 'file-tiles' },
3132
{ label: 'Grid', path: 'grid' },
3233
{ label: 'Icons', path: 'icons' },
3334
{
@@ -77,6 +78,7 @@
7778
{ label: '<hx-dl>', path: 'hx-dl' },
7879
{ label: '<hx-dt>', path: 'hx-dt' },
7980
{ label: '<hx-file-icon>', path: 'hx-file-icon' },
81+
{ label: '<hx-file-tile>', path: 'hx-file-tile' },
8082
{ label: '<hx-icon>', path: 'hx-icon' },
8183
{ label: '<hx-menu>', path: 'hx-menu' },
8284
{ label: '<hx-menuitem>', path: 'hx-menuitem' },

‎docs/components/file-tiles/file-tile-demo.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
if (document.getElementById('vue-fileTileDemo')) {
2+
new Vue({
3+
el: '#vue-fileTileDemo',
4+
data: {
5+
content: '1.3mb',
6+
state: 'default',
7+
icon: 'mime-archive',
8+
name: 'unicorns.gzip',
9+
href: 'path/to/unicorns.gzip',
10+
progressValue: 42,
11+
},
12+
methods: {
13+
onEvent: function (evt) {
14+
alert(`emitted ${evt.type} event`);
15+
},
16+
},
17+
computed: {
18+
isDefault: function () {
19+
return this.state === 'default';
20+
},
21+
isLoading: function () {
22+
return this.state === 'loading';
23+
},
24+
isInvalid: function () {
25+
return this.state === 'invalid' ;
26+
},
27+
},
28+
});
29+
}

‎docs/components/file-tiles/index.html‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
---
2+
title: File Tiles
3+
also:
4+
components/Icons: Icons
5+
elements/hx-file-tile: <hx-file-tile>
6+
---
7+
{% extends 'component.njk' %}
8+
{% block content %}
9+
<section>
10+
<div id="vue-fileTileDemo" class="hxRow" v-cloak>
11+
<div class="hxCol hxSpan-12-xs hxSpan-3-lg hxOrder-2-lg">
12+
<h3>Options</h3>
13+
<p>
14+
<b>States:</b><br />
15+
<label>
16+
<input type="radio" value="default" name="file-state" v-model="state" />
17+
Default
18+
</label><br />
19+
<label>
20+
<input type="radio" value="loading" name="file-state" v-model="state" />
21+
Loading
22+
</label><br />
23+
<label>
24+
<input type="radio" value="invalid" name="file-state" v-model="state" />
25+
Invalid
26+
</label>
27+
</p>
28+
<p>
29+
<b>Icon:</b><br />
30+
<input
31+
class="hxTextCtrl"
32+
type="text"
33+
v-model="icon"
34+
/>
35+
</p>
36+
<p>
37+
<b>Name:</b><br />
38+
<input
39+
class="hxTextCtrl"
40+
type="text"
41+
v-model="name"
42+
/>
43+
</p>
44+
<template v-if="isDefault">
45+
<p>
46+
<b>href:</b><br />
47+
<input
48+
class="hxTextCtrl"
49+
type="text"
50+
v-model="href"
51+
/>
52+
</p>
53+
<p>
54+
<b>Content:</b><br />
55+
<input
56+
class="hxTextCtrl"
57+
type="text"
58+
v-model="content"
59+
/>
60+
</p>
61+
</template>
62+
<p v-if="isLoading">
63+
<b>Progress:</b><br />
64+
<input type="range" v-model="progressValue"/>
65+
</p>
66+
</div>
67+
<div class="hxCol hxSpan-12-xs hxSpan-9-lg hxOrder-1-lg">
68+
<h2 id="basic-file-tile">Basic File Tile</h2>
69+
<template v-if="isDefault">
70+
<div class="demo">
71+
<hx-file-tile
72+
:icon="icon"
73+
:name="name"
74+
:href="href"
75+
@cancel="onEvent"
76+
@delete="onEvent"
77+
>
78+
<span class="hxSubdued">{% raw %}{{content}}{% endraw %}</span>
79+
</hx-file-tile>
80+
</div>
81+
{% code 'html' %}{% raw %}
82+
<hx-file-tile
83+
icon="{{icon}}"
84+
name="{{name}}"
85+
href="{{href}}"
86+
>
87+
<span class="hxSubdued">{{content}}</span>
88+
</hx-file-tile>{% endraw %}
89+
{% endcode %}
90+
</template>
91+
92+
<template v-if="isLoading">
93+
<div class="demo">
94+
<hx-file-tile
95+
loading
96+
:icon="icon"
97+
:name="name"
98+
@cancel="onEvent"
99+
@delete="onEvent"
100+
>
101+
<hx-progress :value="progressValue"></hx-progress>
102+
</hx-file-tile>
103+
</div>
104+
{% code 'html' %}{% raw %}
105+
<hx-file-tile
106+
loading
107+
icon="{{icon}}"
108+
name="{{name}}"
109+
>
110+
<hx-progress value="{{progressValue}}"></hx-progress>
111+
</hx-file-tile>{% endraw %}
112+
{% endcode %}
113+
</template>
114+
115+
<template v-if="isInvalid">
116+
<div class="demo">
117+
<hx-file-tile
118+
invalid
119+
:icon="icon"
120+
:name="name"
121+
@cancel="onEvent"
122+
@delete="onEvent"
123+
>
124+
<button class="hxBtn hxSm hxLink">
125+
Retry
126+
</button>
127+
</hx-file-tile>
128+
</div>
129+
{% code 'html' %}{% raw %}
130+
<hx-file-tile
131+
invalid
132+
icon="{{icon}}"
133+
name="{{name}}"
134+
>
135+
<button class="hxBtn hxSm hxLink">
136+
Retry
137+
</button>
138+
</hx-file-tile>{% endraw %}
139+
{% endcode %}
140+
</template>
141+
142+
</div>
143+
</div>
144+
</section>
145+
{% endblock %}
146+

‎docs/components/icons/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ <h3 class="hxHeading-4">{{icon.name}}</h3>
150150
</p>
151151
</div>
152152
</div>
153-
<div loading class="hxBox-lg">
153+
<div app-loading class="hxBox-lg">
154154
<hx-busy></hx-busy>
155155
<p>Loading...</p>
156156
</div>

‎docs/docs.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import './components/busy/busy-demo';
77
import './components/buttons/button-demo';
88
import './components/checkboxes/checkbox-demo';
99
import './components/choice-tiles/choice-tile-demo';
10+
import './components/file-tiles/file-tile-demo';
1011
import './components/icons/icon-demo';
1112
import './components/lists/list-demo';
1213
import './components/panels/panel-demo';

‎docs/docs.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ dd {
180180
margin-left: 1em;
181181
}
182182

183-
[loading] {
183+
[app-loading] {
184184
display: none;
185185
text-align: center;
186186

@@ -196,7 +196,7 @@ dd {
196196
[v-cloak] {
197197
opacity: 0;
198198

199-
& + [loading] {
199+
& + [app-loading] {
200200
display: flex;
201201
flex-direction: column;
202202
align-items: center;

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,14 @@
3939
</dd>
4040
</dl>
4141
{% endblock %}
42+
43+
{% block properties %}
44+
<dl>
45+
<dt>type {String}</dt>
46+
<dd>
47+
Changes the displayed icon to one of the
48+
<a href="components/icons/#available-icons">available icons</a>
49+
</dd>
50+
</dl>
51+
{% endblock %}
52+

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

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
title: <hx-file-tile>
3+
also:
4+
components/file-tiles: File Tiles
5+
components/icons: Icons
6+
---
7+
{% extends 'element.njk' %}
8+
{% block content %}
9+
10+
<section>
11+
<p>
12+
The custom <code>{{page.title}}</code> element describes the states of
13+
a downloadable asset.
14+
</p>
15+
16+
<hx-dl class="hxBox-md metadata">
17+
<hx-def>
18+
<hx-dt>Permitted Parents</hx-dt>
19+
<hx-dd>any</hx-dd>
20+
</hx-def>
21+
<hx-def>
22+
<hx-dt>Permitted Children</hx-dt>
23+
<hx-dd>flow content</hx-dd>
24+
</hx-def>
25+
<hx-def>
26+
<hx-dt>Events</hx-dt>
27+
<hx-dd>
28+
Any of the following:
29+
<ul>
30+
<li>
31+
<code>cancel</code> - User clicks "X" when loading or invalid.
32+
</li>
33+
<li>
34+
<code>delete</code> - User clicks "X" to delete the file.
35+
</li>
36+
</ul>
37+
</hx-dd>
38+
</hx-def>
39+
</hx-dl>
40+
</section>
41+
{% endblock %}
42+
43+
{% block attributes %}
44+
<dl>
45+
<dt>name {String} <i>(optional)</i></dt>
46+
<dd>
47+
Sets the text of the name.
48+
If absent or blank, the name will not be displayed.
49+
</dd>
50+
51+
<dt>href {String} <i>(optional)</i></dt>
52+
<dd>
53+
Sets the path of the href.
54+
If absent, file name will not be a clickable link.
55+
Avoid setting this attribute until the file exists on the server.
56+
</dd>
57+
58+
<dt>icon {Enum&lt;String&gt;} <i>(optional)</i></dt>
59+
<dd>
60+
Changes the displayed icon to one of the
61+
<a href="components/icons/#available-icons">available icons.</a>
62+
If absent, blank, or unrecognized, the icon will not be displayed.
63+
</dd>
64+
65+
<dt>loading {Boolean [false]} <i>(optional)</i></dt>
66+
<dd>
67+
When present, indicates file upload is in progress.
68+
</dd>
69+
70+
<dt>invalid {Boolean [false]} <i>(optional)</i></dt>
71+
<dd>
72+
When present, marks element invalid.
73+
</dd>
74+
</dl>
75+
{% endblock %}
76+
77+
{% block properties %}
78+
<dl>
79+
<dt>name {String}</dt>
80+
<dd>
81+
Manipulates the <code>name</code> attribute.
82+
</dd>
83+
84+
<dt>href {String}</dt>
85+
<dd>
86+
Manipulates the <code>href</code> attribute.
87+
</dd>
88+
89+
<dt>icon {String}</dt>
90+
<dd>
91+
Manipulates the <code>icon</code> attribute.
92+
</dd>
93+
94+
<dt>loading {Boolean}</dt>
95+
<dd>
96+
Manipulates the <code>loading</code> attribute.
97+
</dd>
98+
99+
<dt>valid {Boolean}</dt>
100+
<dd>
101+
Manipulates the <code>invalid</code> attribute.
102+
</dd>
103+
</dl>
104+
{% endblock %}

‎src/helix-ui/elements.js‎

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

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import 'elements/hx-icon';
33

44
#hxFileIcon {
5+
opacity: inherit;
56
position: relative;
67

78
#hxBase {

0 commit comments

Comments
 (0)