@woosmap/ui 3.176.0 → 3.177.0

package/.babelrc

@@ -3,6 +3,13 @@
     "@babel/preset-react",
     "@babel/preset-env"
   ],
+  "env": {
+    "test": {
+      "plugins": [
+        "transform-dynamic-import"
+      ]
+    }
+  },
   "plugins": [
     [
       "@babel/plugin-proposal-class-properties"

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.176.0",
+  "version": "3.177.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"
   },
   "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./src/website": "./src/website.js",
+    "./src/styles/style-website.styl": "./src/styles/style-website.styl"
+  },
   "dependencies": {
     "@mapbox/polyline": "^1.1.1",
     "axios": "^0.21.1",
@@ -75,6 +80,7 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "babel-plugin-i18next-extract": "^0.8.3",
+    "babel-plugin-transform-dynamic-import": "^2.1.0",
     "concurrently": "^6.2.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",

package/src/components/PasswordStrengthBar/PasswordStrengthBar.js

@@ -1,6 +1,5 @@
 import React, { Fragment, Component } from 'react';
 import PropTypes from 'prop-types';
-import zxcvbn from 'zxcvbn';
 
 export default class PasswordStrengthBar extends Component {
     constructor(props) {
@@ -25,20 +24,15 @@ export default class PasswordStrengthBar extends Component {
         const { password, minLength, onChangeScore } = this.props;
         let result = null;
         let score = 0;
-        if (password.length >= minLength) {
-            result = zxcvbn(password);
-            ({ score } = result);
-        }
-        this.setState(
-            {
-                score,
-            },
-            () => {
-                if (onChangeScore) {
-                    onChangeScore(score);
-                }
+        import('zxcvbn').then(({ default: zxcvbn }) => {
+            if (password.length >= minLength) {
+                result = zxcvbn(password);
+                ({ score } = result);
             }
-        );
+            this.setState({ score }, () => {
+                if (onChangeScore) onChangeScore(score);
+            });
+        });
     };
 
     render() {

package/src/components/PasswordStrengthBar/PasswordStrengthBar.test.js

@@ -1,41 +1,113 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import PasswordStrengthBar from './PasswordStrengthBar';
 
-it('renders a PasswordStrengthBar', () => {
-    const { container } = render(<PasswordStrengthBar password="mypassword" />);
-    expect(container.firstChild).toHaveClass('password-strength');
-});
+const password = {
+    tooShort: '',
+    weak: 'mypassword',
+    okay: 'myPasswrd',
+    good: 'myPasswrd)',
+    strong: 'sdkjsd!!jdjdhsldkk!!!',
+};
+
+const grey = '#ddd';
+const red = '#ef4836';
+const orange = '#f6b44d';
+const blue = '#2b90ef';
+const green = '#25c281';
+
+const barColors = [grey, red, orange, blue, green];
+
+describe('PasswordStrengthBar', () => {
+    it('renders', async () => {
+        const { container } = render(<PasswordStrengthBar password="mypassword" />);
+        expect(container.firstChild).toHaveClass('password-strength');
+
+        const bar1 = await waitFor(() => screen.getByTestId('1'));
+        expect(bar1).toHaveClass('password-strength__item');
+    });
+
+    describe('Color changing / complexity', () => {
+        it('renders all bars in grey when password is too short', async () => {
+            render(<PasswordStrengthBar password={password.tooShort} barColors={barColors} />);
+
+            const bar1 = await waitFor(() => screen.getByTestId('1'));
+            expect(bar1).toHaveStyle({ backgroundColor: grey });
+
+            const bar2 = await waitFor(() => screen.getByTestId('2'));
+            expect(bar2).toHaveStyle({ backgroundColor: grey });
+
+            const bar3 = await waitFor(() => screen.getByTestId('3'));
+            expect(bar3).toHaveStyle({ backgroundColor: grey });
+
+            const bar4 = await waitFor(() => screen.getByTestId('4'));
+            expect(bar4).toHaveStyle({ backgroundColor: grey });
+        });
+
+        it('renders the first bar in red and the others in grey when password is weak', async () => {
+            render(<PasswordStrengthBar password={password.weak} barColors={barColors} />);
+
+            const bar1 = await waitFor(() => screen.getByTestId('1'));
+            expect(bar1).toHaveStyle({ backgroundColor: red });
+
+            const bar2 = await waitFor(() => screen.getByTestId('2'));
+            expect(bar2).toHaveStyle({ backgroundColor: grey });
+
+            const bar3 = await waitFor(() => screen.getByTestId('3'));
+            expect(bar3).toHaveStyle({ backgroundColor: grey });
+
+            const bar4 = await waitFor(() => screen.getByTestId('4'));
+            expect(bar4).toHaveStyle({ backgroundColor: grey });
+        });
+
+        it('renders the two first bars in orange and others in grey when password is okay', async () => {
+            render(<PasswordStrengthBar password={password.okay} barColors={barColors} />);
+
+            const bar1 = await waitFor(() => screen.getByTestId('1'));
+            expect(bar1).toHaveStyle({ backgroundColor: orange });
+
+            const bar2 = await waitFor(() => screen.getByTestId('2'));
+            expect(bar2).toHaveStyle({ backgroundColor: orange });
+
+            const bar3 = await waitFor(() => screen.getByTestId('3'));
+            expect(bar3).toHaveStyle({ backgroundColor: grey });
+
+            const bar4 = await waitFor(() => screen.getByTestId('4'));
+            expect(bar4).toHaveStyle({ backgroundColor: grey });
+        });
+
+        it('renders the three first bars in blue and the last in grey when password is good', async () => {
+            render(<PasswordStrengthBar password={password.good} barColors={barColors} />);
+
+            const bar1 = await waitFor(() => screen.getByTestId('1'));
+            expect(bar1).toHaveStyle({ backgroundColor: blue });
+
+            const bar2 = await waitFor(() => screen.getByTestId('2'));
+            expect(bar2).toHaveStyle({ backgroundColor: blue });
+
+            const bar3 = await waitFor(() => screen.getByTestId('3'));
+            expect(bar3).toHaveStyle({ backgroundColor: blue });
+
+            const bar4 = await waitFor(() => screen.getByTestId('4'));
+            expect(bar4).toHaveStyle({ backgroundColor: grey });
+        });
+
+        it('renders all bars in green when password is strong', async () => {
+            render(<PasswordStrengthBar password={password.strong} barColors={barColors} />);
+
+            const bar1 = await waitFor(() => screen.getByTestId('1'));
+            expect(bar1).toHaveStyle({ backgroundColor: green });
+
+            const bar2 = await waitFor(() => screen.getByTestId('2'));
+            expect(bar2).toHaveStyle({ backgroundColor: green });
+
+            const bar3 = await waitFor(() => screen.getByTestId('3'));
+            expect(bar3).toHaveStyle({ backgroundColor: green });
 
-it('renders a PasswordStrengthBar with color changing / complexity', () => {
-    const { container } = render(
-        <PasswordStrengthBar
-            password=""
-            barColors={['#ddd', '#ef4836', '#f6b44d', '#2b90ef', '#25c281']}
-        />
-    );
-    expect(screen.getByTestId('1')).toHaveClass('password-strength__item');
-    expect(screen.getByTestId('1')).toHaveStyle({ backgroundColor: '#ddd' });
-
-    render(
-        <PasswordStrengthBar
-            password="mypassword"
-            barColors={['#ddd', '#ef4836', '#f6b44d', '#2b90ef', '#25c281']}
-        />,
-        { container }
-    );
-    expect(screen.getByTestId('1')).toHaveStyle({ backgroundColor: '#ef4836' });
-    expect(screen.getByTestId('4')).toHaveStyle({ backgroundColor: '#ddd' });
-
-    render(
-        <PasswordStrengthBar
-            password="sdkjsd!!jdjdhsldkk!!!"
-            barColors={['#ddd', '#ef4836', '#f6b44d', '#2b90ef', '#25c281']}
-        />,
-        { container }
-    );
-    expect(screen.getByTestId('1')).toHaveStyle({ backgroundColor: '#25c281' });
-    expect(screen.getByTestId('4')).toHaveStyle({ backgroundColor: '#25c281' });
+            const bar4 = await waitFor(() => screen.getByTestId('4'));
+            expect(bar4).toHaveStyle({ backgroundColor: green });
+        });
+    });
 });

package/src/website.js

@@ -0,0 +1,23 @@
+export { changeLanguage } from './components/utils/locale';
+
+export { default as Button } from './components/Button/Button';
+export { default as Dropdown } from './components/Dropdown/Dropdown';
+export { default as Flash } from './components/Flash/Flash';
+export { default as Icon } from './components/Icon/Icon';
+
+export { default as Input } from './components/Input/Input';
+export { default as PasswordStrengthBar } from './components/PasswordStrengthBar/PasswordStrengthBar';
+export { default as Popover } from './components/Popover/Popover';
+export { default as Select } from './components/Select/Select';
+
+export { default as LocalitiesDemo } from './components/Demo/LocalitiesDemo';
+export { default as LocalitiesCheckoutUKDemo } from './components/Demo/LocalitiesUKAddressDemo';
+export { default as LocalitiesCheckoutFRDemo } from './components/Demo/LocalitiesFRAddressDemo';
+export { default as LocalitiesAddressDemo } from './components/Demo/LocalitiesAddressDemo';
+export { default as LocalitiesAllDemo } from './components/Demo/LocalitiesAllDemo';
+export { default as MerchantDemo } from './components/Demo/MerchantDemo';
+export { default as GeolocationDemo } from './components/Demo/GeolocationDemo';
+export { default as DistanceDemo } from './components/Demo/DistanceDemo';
+export { default as SearchDemo } from './components/Demo/SearchDemo';
+export { default as AddressDemo } from './components/Demo/AddressDemo';
+export { default as MapDemo } from './components/Demo/MapDemo';