Attachments

There are screens for Claim Attachments and for Inventory Item Attachments. There are two functional components on these screens: the Upload Container and the Attachments List.

Upload Container

Design Sample

Notes

We utilize Modernizr to detect touch-screen devices which will set the <div class="upload-container"> to display: none;. When no touch-screen is detected, we apply the .no-touch class to the upload container to make it visible for drag-and-drop functionality.

On mobile devices, the Add Attachments button should enable the device's native file features, including access to the device's camera, photo album, and file management system.

html

<form class="lg">
  <div class="upload-container md">
    <p><strong>Drag Files Here To Upload</strong></p>
    <small>PDF, PNG, JPG, DOC</small>
  </div>
  <div class="button-box">
    <button class="button color-one"><span class="button-label">Add Attachments<span class="post"><i class="la la-paperclip"></i></span></span></button>
    <button class="button color-two"><span class="button-label">Done</span></button>
  </div>
</form>

Attachment List

Design Sample

Busted_Macbook_pic.jpg

Delete Item

Are you sure? No Yes

This file size is too big and will not be included

Notes

As with other components in the design system, it is possible to add validation conditions to the items in the Attachment List. Simply add an .invalid class to the <li> element.

Show Attachment Error

html

<ul class="attachment-list md">
  <li> <!-- change class to 'invalid' for errors -->
    <div class="line-item">
      <span class="file-type-icon jpg"></span>
      <span class="file-name">Busted_Macbook_pic.jpg</span>
      <div class="button-box right">
        <div class="expanding-button-box color-one">
          <div class="expanding-button small"><span class="icon-close"><i class="la la-trash"></i></span></div>
          <div class="expanding-button large">Delete Item</div>
          <div class="confirm-action-box">
            <span class="confirm-action-text">Are you sure?</span>
            <span class="confirm-action secondary">No</span>
            <span class="confirm-action">Yes</span>
          </div>
        </div>
        <button class="button download-button color-one"><span class="download-icon"><i class="la la-arrow-down"></i></span></button>
      </div>
    </div>
    <span class="error-message">This file size is too big and will not be included</span>
  </li>
</ul>