feat(wip): surf-1341 readonly file tile

Author: 100stacks

docs/components/files/file-tile-demo.js

@@ -1,3 +1,5 @@
+import Util from '../../_util';
+
 (function () {
     const ICONS = [ 
         '',
@@ -23,6 +25,7 @@
                 icons: ICONS,
                 name: 'id_rsa.pub',
                 progress: 42,
+                readonly: false,
                 state: 'downloadable',
             },
             methods: {
@@ -41,6 +44,18 @@
                 isInvalid: function () {
                     return this.state === 'invalid' ;
                 },
+                downloadableSnippet: function () {
+                    return Util.snippet(`
+                        <hx-file-input
+                          details="${this.details}"
+                          href="${this.href}"
+                          icon="${this.icon}"
+                          name="${this.name}"
+                          ${this.readonly ? 'readonly' : ''}
+                        >
+                        </hx-file-input>
+                    `);
+                },
             },
         });
     }

docs/components/files/index.html

@@ -159,6 +159,13 @@ <h2 id="file-tile">File Tile</h2>
               <label for="txtDetails">Details</label>
               <input id="txtDetails" class="hxTextCtrl" v-model="details" />
             </p>
+            <fieldset>
+              <legend>Options</legend>
+              <label>
+                <input type="checkbox" v-model="readonly" />
+                Readonly
+              </label>
+            </fieldset>
           </template>
           <p v-if="isLoading">
             <label for="rngProgress">Progress</label>
@@ -174,20 +181,14 @@ <h2 id="file-tile">File Tile</h2>
             :href="href"
             :icon="icon"
             :name="name"
+            :readonly="readonly"
             @cancel="onEvent"
             @delete="onEvent"
           ></hx-file-tile>
         </div>
 
         <footer>
-          {% code 'html' %}{% raw %}
-            <hx-file-tile
-              details="{{details}}"
-              href="{{href}}"
-              icon="{{icon}}"
-              name="{{name}}">
-            </hx-file-tile>{% endraw %}
-          {% endcode %}
+          <pre><code v-text="downloadableSnippet"></code></pre>
         </footer>
       </template>
 

docs/components/files/test-file-tiles.html

@@ -131,6 +131,18 @@ <h3>Downloadable with Custom Name</h3>
         <small>href defined</small>
       </div>
 
+      <div class="hxCol">
+        <h3>Visually Truncated, Downloadable and Readonly</h3>
+        <hx-file-tile
+          details="50B"
+          href="files/easteregg.txt"
+          icon="mime-text"
+          name="SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious.txt"
+          readonly
+        ></hx-file-tile>
+        <small>visually truncated with many characters, downloadable and readonly</small>
+      </div>
+
       <!-- TODO: immitate hovering over <a> in Shadow DOM -->
       <!-- TODO: immitate hovering over <button id="hxDismiss"> in Shadow DOM -->
     </div>
@@ -159,6 +171,26 @@ <h2>Loading State</h2>
           ></hx-file-tile>
         </div>
       {% endfor %}
+
+      <div class="hxCol">
+        <small>[progress="100" and readonly]</small>
+        <hx-file-tile
+          icon="mime-system"
+          name="win32.exe"
+          progress="100"
+          readonly
+        ></hx-file-tile>
+      </div>
+
+      <div class="hxCol">
+        <small>[progress="100", visually truncated and readonly]</small>
+        <hx-file-tile
+          icon="mime-system"
+          name="win32supercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious.exe"
+          progress="100"
+          readonly
+        ></hx-file-tile>
+      </div>
     </div>
   </section>
 
@@ -173,6 +205,16 @@ <h3>Error</h3>
           name="theinternet.tgz"
         ></hx-file-tile>
       </div>
+
+      <div class="hxCol">
+        <h3>Error, Visually Truncated and Readonly</h3>
+        <hx-file-tile
+          icon="mime-archive"
+          invalid
+          name="SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious.tgz"
+          readonly
+        ></hx-file-tile>
+      </div>
     </div>
   </section>
 

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

@@ -102,6 +102,13 @@ <h2 id="methods">Methods</h2>
         When present, marks element as loading and denotes completion percentage.
       </p>
     </dd>
+
+    <dt>readonly {Boolean} <i>(optional)</i></dt>
+    <dd>
+      <p>
+        When present, mark element as readonly.
+      </p>
+    </dd>
   </dl>
 {% endblock %}
 
@@ -158,6 +165,13 @@ <h2 id="methods">Methods</h2>
       </p>
     </dd>
 
+    <dt>readonly {Boolean} <i>(optional)</i></dt>
+    <dd>
+      <p>
+        Manipulates the <code>readonly</code> attribute.
+      </p>
+    </dd>
+
     <dt>truncated {Boolean}</dt>
     <dd>
       <p>

src/helix-ui/elements/HXAlertElement.js

@@ -112,7 +112,7 @@ export class HXAlertElement extends HXElement {
     }
 
     /**
-     * Property reflectin the `static` HTML attribute, indicating whether the
+     * Property reflecting the `static` HTML attribute, indicating whether the
      * alert may be dismissed. If true, the dismiss button will not be shown.
      *
      * @default false

src/helix-ui/elements/HXFileTileElement.js

@@ -59,6 +59,7 @@ export class HXFileTileElement extends HXElement {
         this.$upgradeProperty('icon');
         this.$upgradeProperty('name');
         this.$upgradeProperty('progress');
+        this.$upgradeProperty('readonly');
 
         this._btnDismiss.addEventListener('click', this._onDismiss);
         this._btnRetry.addEventListener('click', this._onRetry);
@@ -113,6 +114,23 @@ export class HXFileTileElement extends HXElement {
         return re.exec(this.name)[1] || '';
     }
 
+    /**
+     * If present, the dismiss will not be shown.
+     *
+     * @default false
+     * @type {Boolean}
+     */
+    get readonly () {
+        return this.hasAttribute('readonly');
+    }
+    set readonly (value) {
+        if (value) {
+            this.setAttribute('readonly', '');
+        } else {
+            this.removeAttribute('readonly');
+        }
+    }
+
     /**
      * URL to download the file.
      *

src/helix-ui/elements/HXFileTileElement.less

@@ -27,7 +27,7 @@
     #Button.tertiary();
 
     hx-icon {
-      // FIXME: fix in SURF-1219
+      // FIXME
       margin-left: 0.25rem !important;
     }
   }
@@ -180,3 +180,13 @@
     display: block;
   }
 }
+
+:host([readonly]) {
+  #hxDismiss {
+    display: none;
+  }
+
+  #hxContentWrapper {
+    padding: 0.5rem;
+  }
+}