From 49dd334a47ea7add5bad6cf0bb4579956c4c0704 Mon Sep 17 00:00:00 2001 From: Saad M Date: Tue, 9 Jul 2019 13:50:41 -0500 Subject: [PATCH] feat: Asset Upload component (#1509) * Add asset-upload component --- .../sidebars/left-navigation-sidebar.yml | 4 ++ docs/pages/components/asset-upload.md | 52 ++++++++++++++ scss/components.scss | 3 +- scss/components/asset-upload.scss | 67 ++++++++++++++++++ test/templates/asset-upload/component.njk | 17 +++++ test/templates/asset-upload/data.json | 16 +++++ test/templates/asset-upload/index.njk | 44 ++++++++++++ test/templates/index.njk | 1 + test/templates/menu/component.njk | 1 - ...ple-containerfd-asset-upload_0_desktop.png | Bin 8979 -> 9159 bytes ...containerfd-asset-upload__n1_0_desktop.png | Bin 6410 -> 9391 bytes ...containerfd-asset-upload__n2_0_desktop.png | Bin 11075 -> 8270 bytes ...containerfd-asset-upload__n3_0_desktop.png | Bin 5549 -> 8495 bytes 13 files changed, 203 insertions(+), 2 deletions(-) create mode 100644 docs/pages/components/asset-upload.md create mode 100644 scss/components/asset-upload.scss create mode 100644 test/templates/asset-upload/component.njk create mode 100644 test/templates/asset-upload/data.json create mode 100644 test/templates/asset-upload/index.njk diff --git a/docs/_data/sidebars/left-navigation-sidebar.yml b/docs/_data/sidebars/left-navigation-sidebar.yml index 2a9ee5d71..a8f607b04 100755 --- a/docs/_data/sidebars/left-navigation-sidebar.yml +++ b/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 diff --git a/docs/pages/components/asset-upload.md b/docs/pages/components/asset-upload.md new file mode 100644 index 000000000..7ab56217d --- /dev/null +++ b/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 %} +
+ + +
+{% 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 %} +
+ + +
+{% 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 %} +
+ + +
+{% endcapture %} +{% include display-component.html component=default %} diff --git a/scss/components.scss b/scss/components.scss index 2ae9dde9d..e27a462dd 100644 --- a/scss/components.scss +++ b/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"; \ No newline at end of file diff --git a/scss/components/asset-upload.scss b/scss/components/asset-upload.scss new file mode 100644 index 000000000..89a94569a --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/test/templates/asset-upload/component.njk b/test/templates/asset-upload/component.njk new file mode 100644 index 000000000..12ee3cc11 --- /dev/null +++ b/test/templates/asset-upload/component.njk @@ -0,0 +1,17 @@ + + +{% macro asset_upload(properties={}, modifier={}, state={}, aria={}, classes=[]) -%} +
+ + +
+{%- endmacro %} diff --git a/test/templates/asset-upload/data.json b/test/templates/asset-upload/data.json new file mode 100644 index 000000000..369d30c00 --- /dev/null +++ b/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": {} +} \ No newline at end of file diff --git a/test/templates/asset-upload/index.njk b/test/templates/asset-upload/index.njk new file mode 100644 index 000000000..f42eff4af --- /dev/null +++ b/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 %} + + +

default

+ + {% 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 %} diff --git a/test/templates/index.njk b/test/templates/index.njk index ef14a0470..10e306634 100644 --- a/test/templates/index.njk +++ b/test/templates/index.njk @@ -17,6 +17,7 @@ li {