From b17e4368f5b76bbea0327e357120bacba6fddea6 Mon Sep 17 00:00:00 2001 From: Nitin Jadhav Date: Thu, 22 Jul 2021 16:27:00 +0530 Subject: [PATCH 1/4] Added initial implementation of loader - spinner --- components/vf-componenet-rollup/index.scss | 1 + components/vf-indicator-loader/.npmignore | 4 ++ components/vf-indicator-loader/CHANGELOG.md | 4 ++ components/vf-indicator-loader/README.md | 46 +++++++++++++++++ components/vf-indicator-loader/index.scss | 16 ++++++ components/vf-indicator-loader/package.json | 23 +++++++++ .../vf-indicator-loader.config.yml | 25 +++++++++ .../vf-indicator-loader.js | 1 + .../vf-indicator-loader.jsx | 21 ++++++++ .../vf-indicator-loader.njk | 18 +++++++ .../vf-indicator-loader.scss | 51 +++++++++++++++++++ .../vf-indicator-loader.variables.scss | 13 +++++ 12 files changed, 223 insertions(+) create mode 100644 components/vf-indicator-loader/.npmignore create mode 100644 components/vf-indicator-loader/CHANGELOG.md create mode 100644 components/vf-indicator-loader/README.md create mode 100644 components/vf-indicator-loader/index.scss create mode 100644 components/vf-indicator-loader/package.json create mode 100644 components/vf-indicator-loader/vf-indicator-loader.config.yml create mode 100644 components/vf-indicator-loader/vf-indicator-loader.js create mode 100644 components/vf-indicator-loader/vf-indicator-loader.jsx create mode 100644 components/vf-indicator-loader/vf-indicator-loader.njk create mode 100644 components/vf-indicator-loader/vf-indicator-loader.scss create mode 100644 components/vf-indicator-loader/vf-indicator-loader.variables.scss diff --git a/components/vf-componenet-rollup/index.scss b/components/vf-componenet-rollup/index.scss index 85af9a14af..0e0f02760a 100755 --- a/components/vf-componenet-rollup/index.scss +++ b/components/vf-componenet-rollup/index.scss @@ -119,6 +119,7 @@ button { @import 'vf-pagination/vf-pagination.scss'; @import 'vf-pagination/vf-pagination--full.scss'; @import 'vf-back-to-top/vf-back-to-top.scss'; +@import 'vf-indicator-loader/vf-indicator-loader.scss'; /* All Visual Framework Containers */ diff --git a/components/vf-indicator-loader/.npmignore b/components/vf-indicator-loader/.npmignore new file mode 100644 index 0000000000..c5beaf7cfe --- /dev/null +++ b/components/vf-indicator-loader/.npmignore @@ -0,0 +1,4 @@ +bin +.github +.travis.yml +node_modules diff --git a/components/vf-indicator-loader/CHANGELOG.md b/components/vf-indicator-loader/CHANGELOG.md new file mode 100644 index 0000000000..349a39276b --- /dev/null +++ b/components/vf-indicator-loader/CHANGELOG.md @@ -0,0 +1,4 @@ +### 1.0.0-alpha.1 + +* Basic implementation of vf-indicator-loader component +* [Tracking issue](https://github.com/visual-framework/vf-core/issues/1332) diff --git a/components/vf-indicator-loader/README.md b/components/vf-indicator-loader/README.md new file mode 100644 index 0000000000..6d03a78729 --- /dev/null +++ b/components/vf-indicator-loader/README.md @@ -0,0 +1,46 @@ +# Loader component + +[![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-indicator-loader.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-indicator-loader) + +## About + +An anchor or JavaScript button to scroll the user to top of the current page, or to a target element. + +## Usage + +Recommended reading: https://www.nngroup.com/articles/progress-indicators/ + +### Spinner variant: +This indicator should be reserved for actions that take between 2-10 seconds. + +## Install + +This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and [yarn](https://classic.yarnpkg.com/en/docs/install), you can install `vf-indicator-loader` with this command. + +``` +$ yarn add --dev @visual-framework/vf-indicator-loader +``` + +### JS + +You should import this component in `./components/vf-component-rollup/scripts.js` or your other JS process: + +```js +// no js yet for this component +``` + +### Sass/CSS + +The style files included are written in [Sass](https://sass-lang.com/). If you're using a VF-core project, you can import it like this: + +``` +@import "@visual-framework/vf-indicator-loader/index.scss"; +``` + +Make sure you import Sass requirements along with the modules. You can use a [project boilerplate](https://stable.visual-framework.dev/building/) or the [`vf-sass-starter`](https://stable.visual-framework.dev/components/vf-sass-starter/) + +## Help + +- [Read the Visual Framework troubleshooting](https://stable.visual-framework.dev/troubleshooting/) +- [Open a ticket](https://github.com/visual-framework/vf-core/issues) +- [Chat on Slack](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ) diff --git a/components/vf-indicator-loader/index.scss b/components/vf-indicator-loader/index.scss new file mode 100644 index 0000000000..831b36a861 --- /dev/null +++ b/components/vf-indicator-loader/index.scss @@ -0,0 +1,16 @@ +// setup files required + +// sass-lint:disable clean-import-paths +@import 'vf-global-variables'; +@import 'vf-variables'; +@import 'vf-functions'; +@import 'vf-mixins'; + +// component specific styles + +@import 'vf-indicator-loader.variables.scss'; +@import 'vf-indicator-loader.scss'; + +// component variant styles +// @import 'vf-indicator-loader--variant.scss'; + diff --git a/components/vf-indicator-loader/package.json b/components/vf-indicator-loader/package.json new file mode 100644 index 0000000000..ddc984a312 --- /dev/null +++ b/components/vf-indicator-loader/package.json @@ -0,0 +1,23 @@ +{ + "version": "1.0.0-alpha.2", + "name": "@visual-framework/vf-indicator-loader", + "description": "vf-indicator-loader component", + "homepage": "", + "author": "VF", + "license": "Apache 2.0", + "style": "vf-indicator-loader.css", + "sass": "index.scss", + "main": "build/index.js", + "test": "echo \"Error: no test specified\" && exit 1", + "publishConfig": { + "access": "public" + }, + "repo": "https://github.com/visual-framework/vf-core/tree/develop/components/vf-indicator-loader", + "bugs": { + "url": "https://github.com/visual-framework/vf-core/issues" + }, + "keywords": [ + "fractal", + "component" + ] +} diff --git a/components/vf-indicator-loader/vf-indicator-loader.config.yml b/components/vf-indicator-loader/vf-indicator-loader.config.yml new file mode 100644 index 0000000000..b5dd81f2da --- /dev/null +++ b/components/vf-indicator-loader/vf-indicator-loader.config.yml @@ -0,0 +1,25 @@ +# The title shown on the component page +title: Loader +# Label shown on index pages +label: Loader +status: alpha +# The template used from /components/_previews +# +# Per-variant options +variants: + - name: default + hidden: true + - name: spinner + context: + container: false +# Global component context +context: + component-type: block + # custom-values: passed as {{custom-values}} + # - note: you in your custom-values you should use dashes `-` + # and not underscores `_` as underscores prevent inherited template use + # title: Title text + # text: String of text + # image: ../../assets/vf-component-name/assets/vf-component-name.png + # - note on paths: be sure to prefix with `../../` + # - Why? https://github.com/visual-framework/vf-core/issues/364 diff --git a/components/vf-indicator-loader/vf-indicator-loader.js b/components/vf-indicator-loader/vf-indicator-loader.js new file mode 100644 index 0000000000..982be933bc --- /dev/null +++ b/components/vf-indicator-loader/vf-indicator-loader.js @@ -0,0 +1 @@ +// vf-indicator-loader diff --git a/components/vf-indicator-loader/vf-indicator-loader.jsx b/components/vf-indicator-loader/vf-indicator-loader.jsx new file mode 100644 index 0000000000..82ac7b82f2 --- /dev/null +++ b/components/vf-indicator-loader/vf-indicator-loader.jsx @@ -0,0 +1,21 @@ +// vf-indicator-loader for React +// See vf-extensions-react for usage guidance + +import React from "react"; +import "./vf-indicator-loader.scss"; + +export function VFLoader({ container = false }) { + return container ? ( +
+
+ <_VFLoader /> +
+
+ ) : ( + <_VFLoader /> + ); +} + +function _VFLoader() { + return
; +} diff --git a/components/vf-indicator-loader/vf-indicator-loader.njk b/components/vf-indicator-loader/vf-indicator-loader.njk new file mode 100644 index 0000000000..ba8cff99a8 --- /dev/null +++ b/components/vf-indicator-loader/vf-indicator-loader.njk @@ -0,0 +1,18 @@ +{# Make sure any variables are listed inside the following if statement #} +{% if context %} + {% set container = context.container %} +{% endif %} + +{% if container == true %} + +
+ +
+{% endif %} diff --git a/components/vf-indicator-loader/vf-indicator-loader.scss b/components/vf-indicator-loader/vf-indicator-loader.scss new file mode 100644 index 0000000000..69e438e4cb --- /dev/null +++ b/components/vf-indicator-loader/vf-indicator-loader.scss @@ -0,0 +1,51 @@ +// vf-indicator-loader + +// **Thinking about deleting this file?** +// If your component needs no CSS/Sass, we still recommend leaving the +// scss files in place. As this is primarily a CSS framework, it is better to +// leave the empty files so you know a file wasn't accidently omitted. +// If you don't have any Sass, you can trim this block down to: +// "This page was intentionally left blank" + +@import 'package.variables.scss'; +// Debug information from component's `package.json`: +// --- +/*! + * Component: #{map-get($componentInfo, 'name')} + * Version: #{map-get($componentInfo, 'version')} + * Location: #{map-get($componentInfo, 'location')} + * Build time: #{map-get($componentInfo, 'buildTimeStamp')} + */ + +@import 'vf-indicator-loader.variables.scss'; + +// You need to add this Sass file to ./components/vf-componenet-rollup/index.scss + +.vf-indicator-loader--spinner__circle { + width: 32px; + height: 32px; + color: $vf-indicator-loader--border-color; + position: relative; + display: inline-block; + border: 4px solid; + border-radius: 50%; + border-right-color: $vf-indicator-loader--border-color-highlight; + animation: rotate 1s linear infinite; +} + +@keyframes rotate { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.vf-indicator-loader--spinner__container { + width: 100%; + height: 20rem; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/components/vf-indicator-loader/vf-indicator-loader.variables.scss b/components/vf-indicator-loader/vf-indicator-loader.variables.scss new file mode 100644 index 0000000000..e7b3426dd4 --- /dev/null +++ b/components/vf-indicator-loader/vf-indicator-loader.variables.scss @@ -0,0 +1,13 @@ + +// vf-indicator-loader Sass variables file. +// ------------------------------------------------------------ + +// ------------------------------------------------------------ +// Default component variables +// ------------------------------------------------------------ + +// $vf-indicator-loader--example-bg-color: set-color(vf-color--yellow); +// $vf-indicator-loader--example2-bg-color: set-ui-color(vf-ui-color--grey); + +$vf-indicator-loader--border-color: var(--vf-color--neutral--300); +$vf-indicator-loader--border-color-highlight: var(--vf-color--neutral--600); From 331ce47f4d5d8ce6f1cff572d271c71d0272d8fa Mon Sep 17 00:00:00 2001 From: Ken Hawkins Date: Tue, 27 Jul 2021 17:58:13 +0200 Subject: [PATCH 2/4] Update package.json Lerna will bump this to alpha.1 on release --- components/vf-indicator-loader/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/vf-indicator-loader/package.json b/components/vf-indicator-loader/package.json index ddc984a312..df14fc088b 100644 --- a/components/vf-indicator-loader/package.json +++ b/components/vf-indicator-loader/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.0-alpha.2", + "version": "1.0.0-alpha.0", "name": "@visual-framework/vf-indicator-loader", "description": "vf-indicator-loader component", "homepage": "", From 0c370a6d600bd834fd3f090b0a8a323f9d347170 Mon Sep 17 00:00:00 2001 From: Ken Hawkins Date: Mon, 30 Aug 2021 15:42:14 +0200 Subject: [PATCH 3/4] Use CSS custom props MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This does a couple of things: 1. Sass linting to alphabitise ordering 2. use CSS vars (custom props) — we tend to use this over the Sass vars as this allows more possibility to cascade in new values for styling --- .../vf-indicator-loader.scss | 27 ++++++++++--------- .../vf-indicator-loader.variables.scss | 3 --- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/components/vf-indicator-loader/vf-indicator-loader.scss b/components/vf-indicator-loader/vf-indicator-loader.scss index 69e438e4cb..dfcf103741 100644 --- a/components/vf-indicator-loader/vf-indicator-loader.scss +++ b/components/vf-indicator-loader/vf-indicator-loader.scss @@ -19,18 +19,21 @@ @import 'vf-indicator-loader.variables.scss'; -// You need to add this Sass file to ./components/vf-componenet-rollup/index.scss - .vf-indicator-loader--spinner__circle { - width: 32px; + --vf-indicator-loader--border-color: var(--vf-indicator-loader--border-color, --vf-color--neutral--300); + --vf-indicator-loader--border-color-highlight: var(--vf-indicator-loader--border-color-highlight, --vf-color--neutral--600); + animation: rotate 1s linear infinite; + border-radius: 50%; + border-right-color: neutral(600); // IE11 fallback + border-right-color: --vf-indicator-loader--border-color-highlight; + border-style: solid; + border-width: 4px; + color: neutral(300); // IE11 fallback + color: --vf-indicator-loader--border-color; + display: inline-block; height: 32px; - color: $vf-indicator-loader--border-color; position: relative; - display: inline-block; - border: 4px solid; - border-radius: 50%; - border-right-color: $vf-indicator-loader--border-color-highlight; - animation: rotate 1s linear infinite; + width: 32px; } @keyframes rotate { @@ -43,9 +46,9 @@ } .vf-indicator-loader--spinner__container { - width: 100%; - height: 20rem; + align-items: center; display: flex; + height: 20rem; justify-content: center; - align-items: center; + width: 100%; } diff --git a/components/vf-indicator-loader/vf-indicator-loader.variables.scss b/components/vf-indicator-loader/vf-indicator-loader.variables.scss index e7b3426dd4..f5f3111073 100644 --- a/components/vf-indicator-loader/vf-indicator-loader.variables.scss +++ b/components/vf-indicator-loader/vf-indicator-loader.variables.scss @@ -8,6 +8,3 @@ // $vf-indicator-loader--example-bg-color: set-color(vf-color--yellow); // $vf-indicator-loader--example2-bg-color: set-ui-color(vf-ui-color--grey); - -$vf-indicator-loader--border-color: var(--vf-color--neutral--300); -$vf-indicator-loader--border-color-highlight: var(--vf-color--neutral--600); From 540597e5f3bf17df77ab71a5a1c490eecfeb005a Mon Sep 17 00:00:00 2001 From: Ken Hawkins Date: Mon, 30 Aug 2021 15:45:39 +0200 Subject: [PATCH 4/4] Readme tweaks --- components/vf-indicator-loader/README.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/components/vf-indicator-loader/README.md b/components/vf-indicator-loader/README.md index 6d03a78729..ad42546eb4 100644 --- a/components/vf-indicator-loader/README.md +++ b/components/vf-indicator-loader/README.md @@ -4,14 +4,15 @@ ## About -An anchor or JavaScript button to scroll the user to top of the current page, or to a target element. +Use these when content or a page is still in the progress of being loaded. ## Usage -Recommended reading: https://www.nngroup.com/articles/progress-indicators/ +- Spinner variant: This indicator should be reserved for actions that take between 2-10 seconds. +- Progress variant: [To come](https://github.com/visual-framework/vf-core/issues/1332) +- Skeleton variant: [To come](https://github.com/visual-framework/vf-core/issues/1332) -### Spinner variant: -This indicator should be reserved for actions that take between 2-10 seconds. +[Recommended reading related reading](https://www.nngroup.com/articles/progress-indicators/) on usage of loader elements. Less is better. ## Install