@woosmap/ui 4.57.0 → 4.57.2

package/.idea/encodings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding">
+    <file url="PROJECT" charset="UTF-8" />
+  </component>
+</project>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,18 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ignoredPackages">
+        <value>
+          <list size="4">
+            <item index="0" class="java.lang.String" itemvalue="Fabric" />
+            <item index="1" class="java.lang.String" itemvalue="PyYAML" />
+            <item index="2" class="java.lang.String" itemvalue="Jinja2" />
+            <item index="3" class="java.lang.String" itemvalue="github3.py" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>

package/.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

package/.idea/misc.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.9" project-jdk-type="Python SDK" />
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/ui.iml" filepath="$PROJECT_DIR$/.idea/ui.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/prettier.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myRunOnReformat" value="true" />
+  </component>
+</project>

package/.idea/ui.iml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+  <component name="TemplatesService">
+    <option name="TEMPLATE_FOLDERS">
+      <list>
+        <option value="$MODULE_DIR$/node_modules/@storybook/core/dist/server/templates" />
+      </list>
+    </option>
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "4.57.0",
+  "version": "4.57.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Modal/Modal.js

@@ -7,6 +7,7 @@ import Button from '../Button/Button';
 import withClickOutside from '../withClickOutside/withClickOutside';
 import { tr } from '../utils/locale';
 import Icon from '../Icon/Icon';
+import ProgressBar from '../ProgressBar/ProgressBar';
 
 class Modal extends Component {
     constructor(props) {
@@ -141,11 +142,12 @@ class Modal extends Component {
     };
 
     renderLoadingLayer = () => {
-        const { loadingLayerMessage } = this.props;
+        const { loadingLayerMessage, loadingProgression } = this.props;
         return (
             <div className="modal__body__loading-layer">
-                <Icon isLoad icon="load" size={60} />
+                {loadingProgression === undefined && <Icon isLoad icon="load" size={60} />}
                 <span>{loadingLayerMessage}</span>
+                {loadingProgression !== undefined && <ProgressBar percentage={loadingProgression} />}
             </div>
         );
     };
@@ -214,6 +216,7 @@ Modal.defaultProps = {
     noHeader: false,
     loadingLayerMessage: '',
     loadingLayer: false,
+    loadingProgression: undefined,
 };
 
 Modal.propTypes = {
@@ -241,6 +244,7 @@ Modal.propTypes = {
     noHeader: PropTypes.bool,
     loadingLayerMessage: PropTypes.string,
     loadingLayer: PropTypes.bool,
+    loadingProgression: PropTypes.number,
 };
 
 export default withClickOutside(Modal, '.ignore-click-outside-modal');

package/src/components/Modal/Modal.stories.js

@@ -129,6 +129,7 @@ const TemplateLoadingLayerModal = () => {
                 title="My loading layer modal"
                 loadingLayer
                 loadingLayerMessage="Loading message..."
+                loadingProgression={34}
                 validateCb={() => null}
                 isFull
             >

package/src/components/Modal/Modal.styl

@@ -50,6 +50,8 @@
 			justify-content center
 			-webkit-backdrop-filter blur(2rem)
 			backdrop-filter blur(2rem)
+			.progress
+				width 30%
 	&__close
 		&--outside
 			position fixed

package/src/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import './ProgressBar.styl';
+
+class ProgressBar extends Component {
+    getColor = (percentage) => {
+        const { colorThreshold } = this.props;
+        if (!colorThreshold || colorThreshold.length !== 2 || percentage < colorThreshold[0]) return 'green';
+        if (percentage >= colorThreshold[0] && percentage < colorThreshold[1]) return 'orange';
+        return 'red';
+    };
+
+    getExtremitiesText = (text) => <span>{text}</span>;
+
+    render() {
+        const { percentage, leftText, rightText, description, colorThreshold } = this.props;
+        return (
+            <div className="progress">
+                {description && <div className="progress__legend">{description}</div>}
+                <div className="progress__wrapper">
+                    {leftText && this.getExtremitiesText(leftText)}
+                    <div
+                        className={classNames('progress__bar', {
+                            [`progress__bar--${this.getColor(percentage)}`]: !!colorThreshold,
+                        })}
+                    >
+                        <div className="progress__gauge" style={{ width: `${percentage}%` }} />
+                    </div>
+                    {rightText && this.getExtremitiesText(rightText)}
+                </div>
+            </div>
+        );
+    }
+}
+
+function withinHundred(isRequired) {
+    return function fn(props, propName, componentName = 'ANONYMOUS') {
+        const value = props[propName];
+        if (value === null && isRequired) {
+            return new Error(`Required ${propName} was not specified in ${componentName}.`);
+        }
+        if (typeof value === 'number') {
+            return value >= 0 && value <= 100
+                ? null
+                : new Error(`${propName} in ${componentName} is not within 0 to 100`);
+        }
+        return new Error(`${propName} in ${componentName} is not a number`);
+    };
+}
+
+const customPropType = withinHundred(false);
+customPropType.isRequired = withinHundred(true);
+
+ProgressBar.defaultProps = {
+    colorThreshold: null,
+    leftText: '',
+    rightText: '',
+    description: '',
+};
+
+ProgressBar.propTypes = {
+    percentage: customPropType.isRequired,
+    colorThreshold: PropTypes.arrayOf(PropTypes.number),
+    leftText: PropTypes.string,
+    rightText: PropTypes.string,
+    description: PropTypes.string,
+};
+
+export default ProgressBar;

package/src/components/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import ProgressBar from './ProgressBar';
+
+const Story = {
+    title: 'base/ProgressBar',
+    component: ProgressBar,
+};
+
+export default Story;
+
+const TemplateDefault = () => (
+    <div style={{ width: '30%' }}>
+        <ProgressBar percentage={34} />
+    </div>
+);
+export const Default = TemplateDefault.bind({});
+Default.args = {};
+
+const TemplateCustom = (args) => {
+    const { percentage, colorThreshold, leftText, rightText, description } = args;
+    return (
+        <div style={{ width: '30%' }}>
+            <ProgressBar
+                percentage={percentage}
+                colorThreshold={colorThreshold}
+                leftText={leftText}
+                rightText={rightText}
+                description={description}
+            />
+        </div>
+    );
+};
+
+export const ProgressBarCustom = TemplateCustom.bind({});
+ProgressBarCustom.args = {
+    percentage: 25,
+    colorThreshold: [30, 75],
+    leftText: 'leftText',
+    rightText: 'rightText',
+    description: 'description',
+};

package/src/components/ProgressBar/ProgressBar.styl

@@ -0,0 +1,33 @@
+.progress
+	width 100%
+	font-size 1.2rem
+	font-weight 600
+	margin-top 3rem
+	> :not(:last-child)
+		margin-bottom 1rem
+	&__legend
+		font-size 1.1rem
+		font-weight 400
+		text-align center
+	&__wrapper
+		display flex
+		align-items center
+		justify-content space-between
+		> :not(:last-child)
+			margin-right 1rem
+	&__bar
+		width 100%
+		margin auto
+		height 0.3rem
+		background-color lightgrey
+		border-radius .6rem
+		overflow hidden
+	&__gauge
+		background-color $primary
+		height 100%
+		.progress__bar--green &
+			background-color $progressGreen
+		.progress__bar--orange &
+			background-color $progressOrange
+		.progress__bar--red &
+			background-color $progressRed

package/src/components/ProgressBar/ProgressBar.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import ProgressBar from './ProgressBar';
+
+describe('<ProgressBar />', () => {
+    it.each([['description'], ['leftText'], ['rightText']])('renders %s if provided via props', (prop) => {
+        const base = { percentage: 0 };
+        const { rerender } = render(<ProgressBar {...base} />);
+        expect(screen.queryByText(prop)).not.toBeInTheDocument();
+        base[prop] = prop;
+        rerender(<ProgressBar {...base} />);
+        expect(screen.queryByText(prop)).toBeInTheDocument();
+    });
+    it('progress bar width is provided percentage', () => {
+        const { rerender, container } = render(<ProgressBar percentage={0} />);
+        const [progressBarDiv] = container.querySelectorAll('.progress__gauge');
+        expect(progressBarDiv).toHaveAttribute('style', 'width: 0%;');
+        rerender(<ProgressBar percentage={50} />);
+        expect(progressBarDiv).toHaveAttribute('style', 'width: 50%;');
+        rerender(<ProgressBar percentage={100} />);
+        expect(progressBarDiv).toHaveAttribute('style', 'width: 100%;');
+    });
+    it('progress bar container uses correct color class depending of its color threshold', () => {
+        const base = { colorThreshold: [40, 70] };
+        const renderBar = (percentage) => <ProgressBar percentage={percentage} {...base} />;
+        const { rerender, container } = render(renderBar(0));
+        const [progressDiv] = container.querySelectorAll('.progress__bar');
+        const expectColor = (color) => expect(progressDiv).toHaveClass(`progress__bar--${color}`);
+        expectColor('green');
+        rerender(renderBar(1));
+        expectColor('green');
+        rerender(renderBar(40));
+        expectColor('orange');
+        rerender(renderBar(41));
+        expectColor('orange');
+        rerender(renderBar(70));
+        expectColor('red');
+        rerender(renderBar(71));
+        expectColor('red');
+        rerender(renderBar(100));
+        expectColor('red');
+    });
+});