feat: Asset Upload component (#1509)

* Add asset-upload component

docs/_data/sidebars/left-navigation-sidebar.yml

@@ -72,6 +72,10 @@ entries:
       url: /components/alert.html
       output: web
 
+    - title: Asset Upload
+      url: /components/asset-upload.html
+      output: web
+
     - title: Button
       url: /components/button.html
       output: web

docs/pages/components/asset-upload.md

@@ -0,0 +1,52 @@
+---
+title: Asset Upload
+id: asset-upload
+keywords: asset upload, file upload, asset, file, upload
+sidebar: left-navigation-sidebar
+toc: false
+permalink: components/asset-upload.html
+folder: components
+summary:
+---
+
+Asset Upload provides a stylized component for file upload button.
+{: .docs-intro}
+
+## Default Asset Upload
+
+{% capture default %}
+<div class="fd-asset-upload">
+    <input type="file" id="asset-upload" class="fd-asset-upload__input"/>
+    <label for="asset-upload" class="fd-asset-upload__label">
+        <span class="fd-asset-upload__text">Upload Link</span>
+        <span class="fd-asset-upload__message">Maximum file size is 100MB</span>
+    </label>
+</div>
+{% endcapture %}
+{% include display-component.html component=default %}
+
+## Asset Upload with no message
+Optional message can be excluded by removing the span tag containing `fd-asset-upload__message` class.
+
+{% capture default %}
+<div class="fd-asset-upload">
+    <input type="file" id="asset-upload" class="fd-asset-upload__input"/>
+    <label for="asset-upload" class="fd-asset-upload__label">
+        <span class="fd-asset-upload__text">Upload Link</span>
+    </label>
+</div>
+{% endcapture %}
+{% include display-component.html component=default %}
+
+## Asset Upload with no icon
+Add the modifier class `fd-asset-upload--no-icon` to supress the upload icon.
+
+{% capture default %}
+<div class="fd-asset-upload fd-asset-upload--no-icon">
+    <input type="file" id="asset-upload" class="fd-asset-upload__input"/>
+    <label for="asset-upload" class="fd-asset-upload__label">
+        <span class="fd-asset-upload__text">Upload Link</span>
+    </label>
+</div>
+{% endcapture %}
+{% include display-component.html component=default %}

scss/components.scss

@@ -1,5 +1,6 @@
 @import "components/alert";
 @import "components/action-bar";
+@import "components/asset-upload";
 @import "components/badge";
 @import "components/button";
 @import "components/button-group";
@@ -50,4 +51,4 @@
 @import "components/shellbar";
 @import "components/user-menu";
 @import "components/product-menu";
-@import "components/counter";
+@import "components/counter";

scss/components/asset-upload.scss

@@ -0,0 +1,67 @@
+@import "./../settings";
+@import "./../mixins";
+@import "./../functions";
+@import "./../icons/mixins";
+/*!
+.fd-asset-upload+(--no-icon)
+  .fd-asset-upload__label
+    .fd-asset-upload__text
+    .fd-asset-upload__message
+*/
+$block: #{$fd-namespace}-asset-upload;
+.#{$block} {
+
+  @include fd-reset();
+  @include fd-type("0");
+  $fd-asset-upload-padding: fd-space(3);
+  $fd-asset-upload-border-radius: fd-space(1);
+  $fd-asset-upload-border-color: var(--fd-color-neutral-4);
+  $fd-asset-upload-background-color: var(--fd-color-neutral-1);
+  $fd-asset-upload-text-color: var(--fd-color-action-1);
+  $fd-asset-upload-border-color--hover: var(--fd-color-action-1);
+  $fd-asset-upload-border-color--focus: var(--fd-color-action-focus);
+
+  &__input {
+    height: 0;
+    width: 0;
+    overflow: hidden;
+
+    &:focus + .#{$block}__label {
+        border: 1px solid $fd-asset-upload-border-color--focus;
+        box-shadow: 0 0 0 1px $fd-asset-upload-border-color--focus;
+    }
+  }
+
+  &__input + .#{$block}__label {
+    background-color: $fd-asset-upload-background-color;
+    border: 1px dashed $fd-asset-upload-border-color;
+    text-align: center;
+    padding: $fd-asset-upload-padding;
+    border-radius: $fd-asset-upload-border-radius;
+    cursor: pointer;
+    display: block;
+
+    &:hover {
+      border-style: solid;
+      border-color: $fd-asset-upload-border-color--hover;
+    }
+  }
+
+  &__text {
+    display: block;
+    color: $fd-asset-upload-text-color;
+    @include fd-icon("upload-to-cloud", "m");
+    margin-bottom: fd-space(.5);
+
+    &::before {
+      display: block;
+      margin-bottom: fd-space(1);
+    }
+  }
+
+  &--no-icon {
+    .#{$block}__text::before {
+      display: none;
+    }
+  }
+}

test/templates/asset-upload/component.njk

@@ -0,0 +1,17 @@
+
+<!--
+asset-upload:
+    properties={},
+    modifier={ block: [] }
+-->
+{% macro asset_upload(properties={}, modifier={}, state={}, aria={}, classes=[]) -%}
+<div class="fd-asset-upload{{ modifier.block | modifier('asset-upload') }}{{classes|classes}}">
+    <input type="file" id="asset-upload" class="fd-asset-upload__input"/>
+    <label for="asset-upload" class="fd-asset-upload__label">
+        <span class="fd-asset-upload__text">{{properties.text}}</span>
+        {%- if properties.message %}
+        <span class="fd-asset-upload__message">{{properties.message}}</span>
+        {%- endif %}
+    </label>
+</div>
+{%- endmacro %}

test/templates/asset-upload/data.json

@@ -0,0 +1,16 @@
+{
+    "id": "file-upload",
+    "name": "File Upload",
+    "css_vars": true,
+    "rtl": true,
+    "version": "1.0.0",
+    "properties": {
+        "text": "Upload Link",
+        "message": ""
+    },
+    "modifier": {
+        "block": []
+    },
+    "state": {},
+    "aria": {}
+}

test/templates/asset-upload/index.njk

@@ -0,0 +1,44 @@
+{% extends "layout.njk" %}
+{% from "./../format.njk" import format %}
+{# {% from "../button/component.njk" import button %} #}
+{% from "./component.njk" import asset_upload %}
+{% from "../icon/component.njk" import icon %}
+
+{% block content %}
+
+
+<h2>default</h2>
+    <!-- output the component example and the code snippet -->
+    {% set example %}
+{{  asset_upload(
+        properties={
+            text: "Upload Link",
+        message: "Maximum file size is 100MB"
+        }
+    ) 
+}}
+{{  asset_upload(
+        properties={
+            text: "Upload Link"
+        }
+    ) 
+}}
+{{  asset_upload(
+        properties={
+        text: "Upload Link",
+        message: "Maximum file size is 100MB"
+        },
+        modifier={ block:['no-icon']}) 
+}}
+{{  asset_upload(
+        properties={
+        text: "Upload Link"
+        },
+        modifier={ block:['no-icon']}) 
+}}
+
+
+    {% endset %}
+    {{ format(example) }}
+
+{% endblock %}

test/templates/index.njk

@@ -17,6 +17,7 @@ li {
       <ul>
           <li><a href="action-bar">.fd-action-bar</a></li>
           <li><a href="alert">.fd-alert</a></li>
+          <li><a href="asset-upload">.fd-asset-upload</a></li>
           <li><a href="badge">.fd-badge</a> | <a href="label">.fd-label</a> | <a href="status-label">.fd-status-label</a></li>
           <li><a href="button">.fd-button</a></li>
           <li><a href="button-group">.fd-button-group</a></li>

test/templates/menu/component.njk

@@ -1,5 +1,4 @@
 {% import "./../utils.njk" as utils %}
-{% from "../icon/component.njk" import icon %}
 <!--
 menu:
     properties={},