Merge pull request #339 from rackerlabs/surf-1383-hx-fence

surf-1383-hx-fence

Author: CITguy

docs/_data/nav.json5

@@ -75,6 +75,7 @@
             { label: '<hx-checkbox>', path: 'hx-checkbox' },
             { label: '<hx-disclosure>', path: 'hx-disclosure' },
             { label: '<hx-div>', path: 'hx-div' },
+            { label: '<hx-drop-fence>', path: 'hx-drop-fence' },
             { label: '<hx-drop-zone>', path: 'hx-drop-zone' },
             { label: '<hx-error>', path: 'hx-error' },
             { label: '<hx-file-icon>', path: 'hx-file-icon' },

docs/components/files/index.html

@@ -2,10 +2,12 @@
 title: Files
 minver: 0.12.0
 also:
+  components/files/test-drop-fences.html: Testing - Drop Fences
   components/files/test-drop-zones.html: Testing - Drop Zones
   components/files/test-file-selectors.html: Testing - File Selectors
   components/files/test-file-tiles.html: Testing - File Tiles
   components/Icons: Icons
+  elements/hx-drop-fence: <hx-drop-fence>
   elements/hx-drop-zone: <hx-drop-zone>
   elements/hx-file-input: <hx-file-input>
   elements/hx-file-tile: <hx-file-tile>
@@ -26,8 +28,7 @@ <h2 id="drop-zone">Drop Zone</h2>
     <div class="example" id="vue-dropZoneDemo">
       <div>
         <hx-drop-zone @drop.prevent="onDrop">
-          <div class="hxFence">
-            <hx-file-icon type="paperclip"></hx-file-icon>
+          <hx-drop-fence>
             <p>
               Drop files here or
               <hx-file-input
@@ -36,15 +37,14 @@ <h2 id="drop-zone">Drop Zone</h2>
                 <input type="file" />
               </hx-file-input>.
             </p>
-          </div>
+          </hx-drop-fence>
         </hx-drop-zone>
       </div>
 
       <footer>
         {% code 'html' %}
           <hx-drop-zone>
-            <div class="hxFence">
-              <hx-file-icon type="paperclip"></hx-file-icon>
+            <hx-drop-fence>
               <p>
                 Drop files here or
                 <hx-file-input
@@ -53,7 +53,7 @@ <h2 id="drop-zone">Drop Zone</h2>
                   <input type="file" />
                 </hx-file-input>.
               </p>
-            </div>
+            </hx-drop-fence>
           </hx-drop-zone>
         {% endcode %}
       </footer>

docs/components/files/test-drop-fences.html

@@ -0,0 +1,67 @@
+---
+title: Testing - Drop Fences
+---
+{% extends 'test.njk' %}
+{% block content %}
+  <section>
+    <nav class="hxBreadcrumb">
+      <a href="components/files">Files</a>
+      <hx-icon class="delimiter" type="angle-right"></hx-icon>
+      <a href="#">{{page.title}}</a>
+    </nav>
+  </section>
+
+  <section>
+    <h2>Drop Fence (Empty)</h2>
+    <hx-drop-fence>
+    </hx-drop-fence>
+  </section>
+
+  <section>
+    <h2>Drop Fence with Short Plain Text</h2>
+    <hx-drop-fence>
+      Test text here
+    </hx-drop-fence>
+  </section>
+
+  <section>
+    <h2>Drop Fence with Short Text</h2>
+    <hx-drop-fence>
+      <p>Test text here</p>
+    </hx-drop-fence>
+  </section>
+
+  <section>
+    <h2>Drop Fence with Short Text and File Selector</h2>
+    <hx-drop-fence>
+      <p>
+        Test text here and
+        <hx-file-input
+          class="hxTertiary" 
+          label="file selector here">
+          <input type="file" />
+        </hx-file-input>.
+      </p>
+    </hx-drop-fence>
+  </section>
+
+  <section>
+    <h2>Drop Fence with Long Plain Text</h2>
+    <hx-drop-fence>
+      Sugar plum cupcake cheesecake jelly-o. Halvah jelly-o sweet roll 
+      topping cotton candy bear claw. Sweet sesame snaps jelly-o cotton 
+      candy carrot cake chocolate bar dragee.
+    </hx-drop-fence>
+  </section>
+
+  <section>
+    <h2>Drop Fence with Long Text</h2>
+    <hx-drop-fence>
+      <p>
+        Sugar plum cupcake cheesecake jelly-o. Halvah jelly-o sweet roll 
+        topping cotton candy bear claw. Sweet sesame snaps jelly-o cotton 
+        candy carrot cake chocolate bar dragee.
+      </p>
+    </hx-drop-fence>
+  </section>
+{% endblock %}

docs/components/files/test-drop-zones.html

@@ -35,27 +35,27 @@ <h2>Visible Drop Zone (file over element)</h2>
   <section>
     <h2>Drop Zone with Child Fence</h2>
     <hx-drop-zone>
-      <div class="hxFence hxBox hxMd">
+      <hx-drop-fence>
         <p>Invisible Drop Zone</p>
-      </div>
+      </hx-drop-fence>
     </hx-drop-zone>
   </section>
 
   <section>
     <h2>Visible Drop Zone with Child Fence (file not over element)</h2>
     <hx-drop-zone drag="away">
-      <div class="hxFence hxBox hxMd">
+      <hx-drop-fence>
         <p>Visible Drop Zone (file not over element)</p>
-      </div>
+      </hx-drop-fence>
     </hx-drop-zone>
   </section>
 
   <section>
     <h2>Visible Drop Zone with Child Fence (file over element)</h2>
     <hx-drop-zone drag="over">
-      <div class="hxFence hxBox hxMd">
+      <hx-drop-fence>
         <p>Visible Drop Zone (file over element)</p>
-      </div>
+      </hx-drop-fence>
     </hx-drop-zone>
   </section>
 {% endblock %}

docs/elements/hx-drop-fence/index.html

@@ -0,0 +1,35 @@
+---
+title: <hx-drop-fence>
+minver: 0.14.0
+also: 
+  components/files: Files
+---
+{% extends 'element.njk' %}
+{% block content %}
+  <section>
+    <p>
+      The custom <code>{{page.title}}</code> element provides a visual 
+      indication to the user that they can drag a file into an area.
+    </p>
+  
+    <dl class="hxBox-md metadata hxList">
+      <div>
+        <dt>Display</dt>
+        <dd>block</dd>
+      </div>
+      <div>
+        <dt>Permitted Parents</dt>
+        <dd>any</dd>
+      </div>
+      <div>
+        <dt>Permitted Children</dt>
+        <dd>flow content</dd>
+      </div>
+      <div>
+        <dt>Events</dt>
+        <dd><em>none</em></dd>
+      </div>
+    </dl>
+  </section>
+{% endblock %}
+

src/helix-ui/elements/HXDropFenceElement.html

@@ -0,0 +1,6 @@
+<div id="hxDropFence">
+  <hx-file-icon type="paperclip"></hx-file-icon>
+  <div>
+    <slot></slot>
+  </div>
+</div>

src/helix-ui/elements/HXDropFenceElement.js

@@ -0,0 +1,20 @@
+import { HXElement } from './HXElement';
+import shadowStyles from './HXDropFenceElement.less';
+import shadowMarkup from './HXDropFenceElement.html';
+
+/**
+ * Defines behavior for the `<hx-drop-fence>` element.
+ *
+ * @extends HXElement
+ * @hideconstructor
+ * @since 0.14.0
+ */
+export class HXDropFenceElement extends HXElement {
+    static get is () {
+        return 'hx-drop-fence';
+    }
+
+    static get template () {
+        return `<style>${shadowStyles}</style>${shadowMarkup}`;
+    }
+}

src/helix-ui/elements/HXDropFenceElement.less

@@ -0,0 +1,15 @@
+@import "./HXElement";
+
+#hxDropFence {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+
+  > div {
+    margin-top: 0.5rem;
+    max-width: 30rem; // 480px
+  }
+}

src/helix-ui/elements/index.js

@@ -5,6 +5,7 @@ export { HXBusyElement } from './HXBusyElement';
 export { HXCheckboxElement } from './HXCheckboxElement';
 export { HXDisclosureElement } from './HXDisclosureElement';
 export { HXDivElement } from './HXDivElement';
+export { HXDropFenceElement } from './HXDropFenceElement';
 export { HXDropZoneElement } from './HXDropZoneElement';
 export { HXElement } from './HXElement';
 export { HXErrorElement } from './HXErrorElement';

src/helix-ui/styles/elements.less

@@ -15,6 +15,7 @@
 @import 'elements/hx-disclosure';
 @import 'elements/hx-div';
 @import 'elements/hx-dl';
+@import 'elements/hx-drop-fence';
 @import 'elements/hx-drop-zone';
 @import 'elements/hx-error';
 @import 'elements/hx-file-icon';