Added initial implementation of loader - spinner

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 */
 

components/vf-indicator-loader/.npmignore

@@ -0,0 +1,4 @@
+bin
+.github
+.travis.yml
+node_modules

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)

components/vf-indicator-loader/README.md

@@ -0,0 +1,47 @@
+# 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
+
+Use these when content or a page is still in the progress of being loaded.
+
+## Usage
+
+- 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)
+
+[Recommended reading related reading](https://www.nngroup.com/articles/progress-indicators/) on usage of loader elements. Less is better.
+
+## 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)

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';
+

components/vf-indicator-loader/package.json

@@ -0,0 +1,23 @@
+{
+  "version": "1.0.0-alpha.0",
+  "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"
+  ]
+}

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

components/vf-indicator-loader/vf-indicator-loader.js

@@ -0,0 +1 @@
+// vf-indicator-loader

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 ? (
+    <div className="vf-box">
+      <div className="vf-indicator-loader--spinner__container">
+        <_VFLoader />
+      </div>
+    </div>
+  ) : (
+    <_VFLoader />
+  );
+}
+
+function _VFLoader() {
+  return <div className="vf-indicator-loader--spinner__circle"></div>;
+}

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 %}
+  <!-- this HTML is for container if enabled -->
+  <div class="vf-box">
+      <div class="vf-indicator-loader--spinner__container">
+{% endif %}
+
+        <div class="vf-indicator-loader--spinner__circle"></div>
+
+{% if example == true %}
+  <!-- this HTML is for container if enabled -->
+  </div>
+</div>
+{% endif %}

components/vf-indicator-loader/vf-indicator-loader.scss

@@ -0,0 +1,54 @@
+// 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';
+
+.vf-indicator-loader--spinner__circle {
+  --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;
+  position: relative;
+  width: 32px;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.vf-indicator-loader--spinner__container {
+  align-items: center;
+  display: flex;
+  height: 20rem;
+  justify-content: center;
+  width: 100%;
+}

components/vf-indicator-loader/vf-indicator-loader.variables.scss

@@ -0,0 +1,10 @@
+
+// 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);