feat(block-loaders): Add progress block.

packages/plugins/blocks/blocks-loaders/src/blocks.js

@@ -15,6 +15,7 @@
 */
 
 export { default as IconSpinner } from './blocks/IconSpinner/IconSpinner.js';
+export { default as ProgressBar } from './blocks/ProgressBar/ProgressBar.js';
 export { default as Skeleton } from './blocks/Skeleton/Skeleton.js';
 export { default as SkeletonAvatar } from './blocks/SkeletonAvatar/SkeletonAvatar.js';
 export { default as SkeletonButton } from './blocks/SkeletonButton/SkeletonButton.js';

packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/ProgressBar.js

@@ -0,0 +1,62 @@
+/*
+  Copyright 2020-2021 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { forwardRef } from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+
+const ProgressBar = ({ blockId, methods, style, properties, content }) => {
+  const {
+    progress = 30,
+    height = 3,
+    // color = 'red', // TODO: get primary from theme ??
+    transitionTime = 1000,
+    // loaderSpeed = 500,
+    // waitingTime = 1000,
+    shadow = true,
+  } = properties;
+
+  return (
+    <>
+      <div
+        id={blockId}
+        className={methods.makeCssClass(style)}
+        style={{
+          '--height': height + 'px',
+          '--progress': progress + '%',
+          '--transition': 'all ' + transitionTime + 'ms ease',
+          '--opacity': progress < 100 ? 1 : 0,
+        }}
+      >
+        <div className="progress-bar-container">
+          <div className="progress-bar-loader">
+            {shadow ? <div className="progress-bar-shadow" /> : null}
+          </div>
+        </div>
+      </div>
+      {content.content && content.content()}
+    </>
+  );
+};
+
+ProgressBar.defaultProps = blockDefaultProps;
+ProgressBar.meta = {
+  category: 'container',
+  loading: false,
+  icons: [],
+  styles: ['blocks/ProgressBar/style.less'],
+};
+
+export default forwardRef(ProgressBar);

packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/ProgressBar.test.js

@@ -0,0 +1,30 @@
+/*
+  Copyright 2020-2021 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
+
+import Block from './ProgressBar.js';
+import examples from './examples.yaml';
+import schema from './schema.json';
+
+const testConfig = {
+  validation: true,
+  required: true,
+  values: [],
+};
+
+runRenderTests({ Block, examples, schema, testConfig });
+runBlockSchemaTests({ examples, schema });

packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/__snapshots__/Skeleton.test.js.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render default - value[0] 1`] = `
+<div
+  class="skeleton emotion-0"
+  style="width: 100%; height: 100%;"
+/>
+`;
+
+exports[`Render required = true default - value[0] 1`] = `
+<div
+  class="skeleton emotion-0"
+  style="width: 100%; height: 100%;"
+/>
+`;
+
+exports[`Render required = true sizedefault - value[0] 1`] = `
+<div
+  class="skeleton emotion-0"
+  style="width: 100%; height: 100%;"
+/>
+`;
+
+exports[`Render required = true sizesmall - value[0] 1`] = `
+<div
+  class="skeleton emotion-0"
+  style="width: 100%; height: 100%;"
+/>
+`;
+
+exports[`Render sizedefault - value[0] 1`] = `
+<div
+  class="skeleton emotion-0"
+  style="width: 100%; height: 100%;"
+/>
+`;
+
+exports[`Render sizesmall - value[0] 1`] = `
+<div
+  class="skeleton emotion-0"
+  style="width: 100%; height: 100%;"
+/>
+`;
+
+exports[`Test Schema default 1`] = `true`;
+
+exports[`Test Schema default 2`] = `null`;
+
+exports[`Test Schema sizedefault 1`] = `true`;
+
+exports[`Test Schema sizedefault 2`] = `null`;
+
+exports[`Test Schema sizesmall 1`] = `true`;
+
+exports[`Test Schema sizesmall 2`] = `null`;

packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/examples.yaml

@@ -0,0 +1,16 @@
+# Copyright 2020-2021 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- id: default
+  type: ProgressBar

packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/schema.json

@@ -0,0 +1,29 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "style": {
+        "type": "object",
+        "description": "Css style object to apply to the skeleton.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "height": {
+        "type": ["number", "string"],
+        "description": "Height of the skeleton."
+      },
+      "width": {
+        "type": ["number", "string"],
+        "description": "Width of the skeleton."
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {}
+  }
+}

packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/style.less

@@ -0,0 +1,43 @@
+/*
+  Copyright 2020-2021 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+.progress-bar-loader {
+  height: 100%;
+  width: var(--progress); // initial 0%
+  background: @primary-color; // TODO: test if this works
+  transition: var(--transition);
+  opacity: var(--opacity);
+}
+
+.progress-bar-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: var(--height);
+  z-index: 99999999999;
+  width: 100%;
+}
+
+.progress-bar-shadow {
+  box-shadow: 0 0 10px @primary-color, 0 0 10px @primary-color;
+  width: 20px;
+  opacity: 1;
+  position: absolute;
+  height: 100%;
+  transition: var(--transition);
+  transform: rotate(3deg) translate(0px, -4px);
+  left: calc(var(--progress) - 20px); // initial -10rem
+}

packages/plugins/blocks/blocks-loaders/src/blocks/Spinner/style.less

@@ -13,5 +13,3 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */
-
-@import '../LogoSpinner/style.less';