@woosmap/ui 4.169.4 → 4.170.0

package/src/components/InfoMessage/InfoMessage.stories.js

@@ -1,32 +1,38 @@
 /* eslint-disable */
-import React from 'react';
-import InfoMessage from './InfoMessage';
+import React from "react";
+import InfoMessage from "./InfoMessage";
 
 const Story = {
-    title: 'base/InfoMessage',
-    component: InfoMessage,
+  title: "base/InfoMessage",
+  component: InfoMessage,
 };
 
 export default Story;
 
 const Template = () => (
-    <div>
-        <InfoMessage actionLabel="Info message">
-            Lorem Elsass ipsum hopla libero. Pellentesque bissame aliquam sit dui ornare purus Oberschaeffolsheim
-            flammekueche ac vulputate ante knack sed yeuh. Mauris jetz gehts los eleifend Gal. wurscht schneck
-            Oberschaeffolsheim gehts Morbi sguelt hoplageiss elit ac Chulien Huguette gravida Yo dû. auctor, sit
-            pellentesque eget suspendisse leo tristique et rucksack so messti de Bischheim Chulia Roberstau schpeck
-            ftomi! amet Pfourtz ! Wurschtsalad Carola vielmols, hopla semper turpis Spätzle Coopé de Truchtersheim
-            nullam bredele merci vielmols Salut bisamme placerat chai lotto-owe hopla sit météor geïz gal amet
-            baeckeoffe morbi elementum dolor barapli adipiscing Kabinetpapier non leo Strasbourg sagittis Miss Dahlias
-            schnaps commodo Gal ! réchime Heineken risus, gewurztraminer rhoncus hop salu mollis consectetur dignissim
-            mänele nüdle varius leverwurscht amet, Christkindelsmärik Racing. porta Richard Schirmeck tchao bissame wie
-            blottkopf, turpis, condimentum Hans rossbolla id quam. kougelhopf sed picon bière in, hopla DNA, ullamcorper
-            knepfle id, tellus quam, kuglopf ornare Salu bissame lacus libero, kartoffelsalad und senectus chambon
-            libero, munster non mamsell tellus habitant Verdammi
-        </InfoMessage>
-        &nbsp;
-    </div>
+  <div>
+    <InfoMessage actionLabel="Info message">
+      Lorem Elsass ipsum hopla libero. Pellentesque bissame aliquam sit dui
+      ornare purus Oberschaeffolsheim flammekueche ac vulputate ante knack sed
+      yeuh. Mauris jetz gehts los eleifend Gal. wurscht schneck
+      Oberschaeffolsheim gehts Morbi sguelt hoplageiss elit ac Chulien Huguette
+      gravida Yo dû. auctor, sit pellentesque eget suspendisse leo tristique et
+      rucksack so messti de Bischheim Chulia Roberstau schpeck ftomi! amet
+      Pfourtz ! Wurschtsalad Carola vielmols, hopla semper turpis Spätzle
+      Coopé de Truchtersheim nullam bredele merci vielmols Salut bisamme
+      placerat chai lotto-owe hopla sit météor geïz gal amet baeckeoffe morbi
+      elementum dolor barapli adipiscing Kabinetpapier non leo Strasbourg
+      sagittis Miss Dahlias schnaps commodo Gal ! réchime Heineken risus,
+      gewurztraminer rhoncus hop salu mollis consectetur dignissim mänele nüdle
+      varius leverwurscht amet, Christkindelsmärik Racing. porta
+      Richard Schirmeck tchao bissame wie blottkopf, turpis, condimentum Hans
+      rossbolla id quam. kougelhopf sed picon bière in, hopla DNA, ullamcorper
+      knepfle id, tellus quam, kuglopf ornare Salu bissame lacus libero,
+      kartoffelsalad und senectus chambon libero, munster non mamsell tellus
+      habitant Verdammi
+    </InfoMessage>
+    &nbsp;
+  </div>
 );
 export const Default = Template.bind({});
 Default.args = {};

package/src/components/Input/Input.js

@@ -208,7 +208,7 @@ export default class Input extends Component {
             `input--${size}`,
             type === 'checkbox' || type === 'radio' ? `input--${type}` : null,
             disabled ? 'input--disabled' : null,
-            className
+            className,
         );
         return (
             <div className={cl(classesContainer)}>

package/src/components/Input/Input.stories.js

@@ -8,7 +8,7 @@ const Story = {
 
 export default Story;
 
-const Template = (args) => {
+function Template(args) {
     const { placeholder, label, hideLabel, checked } = args;
     return (
         <div className="mbib--large">
@@ -98,7 +98,7 @@ const Template = (args) => {
             <Input placeholder="Color input" type="color" label="Color" />
         </div>
     );
-};
+}
 export const Default = Template.bind({});
 Default.args = {
     placeholder: 'Placeholder',

package/src/components/Label/Label.js

@@ -31,7 +31,7 @@ export default class Label extends Component {
             isPill ? 'label--pill' : null,
             noWrap ? 'label--nowrap' : null,
             plan ? `label--${plan}` : null,
-            className
+            className,
         );
         return (
             <span className={classes} data-testid={testId} {...rest}>

package/src/components/Label/Label.stories.js

@@ -8,17 +8,19 @@ const Story = {
 
 export default Story;
 
-const Template = () => (
-    <div className="mbib flex-column">
-        <Label closable color="white" label="Label" />
-        <Label closable size="small" label="Label small" />
-        <Label closable privilege="superuser" size="mini" label="Label mini" />
-        <Label closable privilege="staff" size="nano" label="Label nano" />
-        <Label round label="L" />
-        <Label round size="small" label="L" />
-        <Label round size="mini" label="L" />
-        <Label round size="nano" label="L" />
-    </div>
-);
+function Template() {
+    return (
+        <div className="mbib flex-column">
+            <Label closable color="white" label="Label" />
+            <Label closable size="small" label="Label small" />
+            <Label closable privilege="superuser" size="mini" label="Label mini" />
+            <Label closable privilege="staff" size="nano" label="Label nano" />
+            <Label round label="L" />
+            <Label round size="small" label="L" />
+            <Label round size="mini" label="L" />
+            <Label round size="nano" label="L" />
+        </div>
+    );
+}
 export const Default = Template.bind({});
 Default.args = {};

package/src/components/Map/Map.stories.js

@@ -11,11 +11,13 @@ const Story = {
 
 export default Story;
 
-const Template = (args) => (
-    <div style={{ position: 'relative', marginTop: '50px' }}>
-        <Marker {...args} />
-    </div>
-);
+function Template(args) {
+    return (
+        <div style={{ position: 'relative', marginTop: '50px' }}>
+            <Marker {...args} />
+        </div>
+    );
+}
 export const Default = Template.bind({});
 Default.args = {
     text: '',
@@ -24,53 +26,59 @@ Default.parameters = {
     jest: ['Marker.test.js'],
 };
 
-const TemplateMap = () => (
-    <div style={{ height: '500px', width: '500px' }}>
-        <GoogleMapReact
-            defaultZoom={10}
-            center={[48.86559784502703, 2.3384846666317585]}
-            bootstrapURLKeys={{ key: Constants.gmapKey }}
-            yesIWantToUseGoogleMapApiInternals
-        >
-            <Marker lat={48.86559784502703} lng={48.86559784502703} />
-        </GoogleMapReact>
-    </div>
-);
+function TemplateMap() {
+    return (
+        <div style={{ height: '500px', width: '500px' }}>
+            <GoogleMapReact
+                defaultZoom={10}
+                center={[48.86559784502703, 2.3384846666317585]}
+                bootstrapURLKeys={{ key: Constants.gmapKey }}
+                yesIWantToUseGoogleMapApiInternals
+            >
+                <Marker lat={48.86559784502703} lng={48.86559784502703} />
+            </GoogleMapReact>
+        </div>
+    );
+}
 export const MarkerOnMap = TemplateMap.bind({});
 
-const TemplateDrawViewpointMap = () => (
-    <div style={{ height: '500px', width: '500px' }}>
-        <GoogleMapReact
-            defaultZoom={10}
-            center={[48.86559784502703, 2.3384846666317585]}
-            bootstrapURLKeys={{ key: Constants.gmapKey }}
-            yesIWantToUseGoogleMapApiInternals
-            onGoogleApiLoaded={({ map }) => {
-                viewpoint(map, {
-                    bounds: {
-                        east: 2.249876823200777,
-                        north: 48.82055026600023,
-                        west: 2.4362195043577772,
-                        south: 48.89723441452986,
-                    },
-                });
-            }}
-        />
-    </div>
-);
+function TemplateDrawViewpointMap() {
+    return (
+        <div style={{ height: '500px', width: '500px' }}>
+            <GoogleMapReact
+                defaultZoom={10}
+                center={[48.86559784502703, 2.3384846666317585]}
+                bootstrapURLKeys={{ key: Constants.gmapKey }}
+                yesIWantToUseGoogleMapApiInternals
+                onGoogleApiLoaded={({ map }) => {
+                    viewpoint(map, {
+                        bounds: {
+                            east: 2.249876823200777,
+                            north: 48.82055026600023,
+                            west: 2.4362195043577772,
+                            south: 48.89723441452986,
+                        },
+                    });
+                }}
+            />
+        </div>
+    );
+}
 export const ViewpointOnMap = TemplateDrawViewpointMap.bind({});
 
-const TemplateDrawCircleMap = () => (
-    <div style={{ height: '500px', width: '500px' }}>
-        <GoogleMapReact
-            defaultZoom={10}
-            center={[48.86559784502703, 2.3384846666317585]}
-            bootstrapURLKeys={{ key: Constants.gmapKey }}
-            yesIWantToUseGoogleMapApiInternals
-            onGoogleApiLoaded={({ map }) => {
-                circle(map, { lat: 48.86559784502703, lng: 2.3384846666317585 }, 5000);
-            }}
-        />
-    </div>
-);
+function TemplateDrawCircleMap() {
+    return (
+        <div style={{ height: '500px', width: '500px' }}>
+            <GoogleMapReact
+                defaultZoom={10}
+                center={[48.86559784502703, 2.3384846666317585]}
+                bootstrapURLKeys={{ key: Constants.gmapKey }}
+                yesIWantToUseGoogleMapApiInternals
+                onGoogleApiLoaded={({ map }) => {
+                    circle(map, { lat: 48.86559784502703, lng: 2.3384846666317585 }, 5000);
+                }}
+            />
+        </div>
+    );
+}
 export const AccuracyOnMap = TemplateDrawCircleMap.bind({});

package/src/components/Map/drawOnMap.js

@@ -27,7 +27,7 @@ export const decodePath = function decodePath(points) {
 export const boundsFromViewport = function boundsFromViewport(viewportObj) {
     return new google.maps.LatLngBounds(
         new google.maps.LatLng(viewportObj.southwest),
-        new google.maps.LatLng(viewportObj.northeast)
+        new google.maps.LatLng(viewportObj.northeast),
     );
 };
 
@@ -80,7 +80,7 @@ export const extendedBounds = function extendedBounds(boundsArray) {
 export const woosmapBoundsFromViewport = function woosmapBoundsFromViewport(viewportObj) {
     return new window.woosmap.map.LatLngBounds(
         new window.woosmap.map.LatLng(viewportObj.southwest),
-        new window.woosmap.map.LatLng(viewportObj.northeast)
+        new window.woosmap.map.LatLng(viewportObj.northeast),
     );
 };
 
@@ -100,7 +100,7 @@ export class WoosmapMapBoundingBox {
         this.bounds = !(bounds instanceof window.woosmap.map.LatLngBounds)
             ? new window.woosmap.map.LatLngBounds(
                   { lng: bounds.east, lat: bounds.north },
-                  { lng: bounds.west, lat: bounds.south }
+                  { lng: bounds.west, lat: bounds.south },
               )
             : bounds;
 

package/src/components/Map/drawOnMap.test.js

@@ -1,12 +1,4 @@
-import {
-    circle,
-    polyline,
-    decodePath,
-    viewpoint,
-    viewport,
-    extendedBounds,
-    boundsFromViewport,
-} from './drawOnMap';
+import { circle, polyline, decodePath, viewpoint, viewport, extendedBounds, boundsFromViewport } from './drawOnMap';
 
 import fakeLatLngGoogleObject from './fakeLatLngGoogleObject';
 

package/src/components/Modal/ConfirmationModal.test.js

@@ -21,7 +21,7 @@ it('renders a confirm', () => {
             }}
             text="Are you sure?"
             ref={ref}
-        />
+        />,
     );
     act(() => {
         ref.current.open();

package/src/components/Modal/Modal.js

@@ -104,28 +104,26 @@ class Modal extends Component {
             return (
                 <div className={cl('modal__footer')}>
                     <div className="modal__footer__error">{errorLabel}</div>
-                    <>
-                        {validateCb && (
-                            <Button
-                                testId={`${testId}-cancel-button`}
-                                label={tr('Cancel')}
-                                type="transparent"
-                                onClick={this.close}
-                            />
-                        )}
+                    {validateCb && (
                         <Button
-                            type={mainButtonType}
-                            className={mainButtonClass}
-                            icon={mainButtonIcon}
-                            iconSize={mainButtonIconSize}
-                            testId={`${testId}-validate-button`}
-                            label={labelValidate || tr('Validate')}
-                            onClick={this.validate}
-                            isLoading={!loadingLayer && isLoading}
-                            disabled={loadingLayer && isLoading}
-                            {...validateBtnProps}
+                            testId={`${testId}-cancel-button`}
+                            label={tr('Cancel')}
+                            type="transparent"
+                            onClick={this.close}
                         />
-                    </>
+                    )}
+                    <Button
+                        type={mainButtonType}
+                        className={mainButtonClass}
+                        icon={mainButtonIcon}
+                        iconSize={mainButtonIconSize}
+                        testId={`${testId}-validate-button`}
+                        label={labelValidate || tr('Validate')}
+                        onClick={this.validate}
+                        isLoading={!loadingLayer && isLoading}
+                        disabled={loadingLayer && isLoading}
+                        {...validateBtnProps}
+                    />
                 </div>
             );
         }
@@ -177,7 +175,11 @@ class Modal extends Component {
                                 {!noHeader && (
                                     <div className="modal__header">{header || <h1 className="title">{tit}</h1>}</div>
                                 )}
-                                <div className={cl('modal__body', { 'modal__body--blur': onLoadingLayer })}>
+                                <div
+                                    className={cl('modal__body', {
+                                        'modal__body--blur': onLoadingLayer,
+                                    })}
+                                >
                                     {onLoadingLayer && this.renderLoadingLayer()}
                                     {children}
                                 </div>
@@ -187,7 +189,7 @@ class Modal extends Component {
                     </div>
                 )}
             </AnimatePresence>,
-            document.body
+            document.body,
         );
     }
 }

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

@@ -10,7 +10,7 @@ const Story = {
 
 export default Story;
 
-const Template = () => {
+function Template() {
     const modalRef = React.createRef();
 
     function open() {
@@ -42,11 +42,11 @@ const Template = () => {
             </Modal>
         </div>
     );
-};
+}
 export const Default = Template.bind({});
 Default.args = {};
 
-const TemplateFull = () => {
+function TemplateFull() {
     const modalRef = React.createRef();
     return (
         <div style={{ paddingLeft: '50px' }}>
@@ -56,11 +56,11 @@ const TemplateFull = () => {
             </Modal>
         </div>
     );
-};
+}
 export const ModalFull = TemplateFull.bind({});
 Default.args = {};
 
-const TemplateWithErrors = () => {
+function TemplateWithErrors() {
     const modalRef = React.createRef();
     return (
         <div style={{ paddingLeft: '50px' }}>
@@ -70,11 +70,11 @@ const TemplateWithErrors = () => {
             </Modal>
         </div>
     );
-};
+}
 export const ModalWithErrors = TemplateWithErrors.bind({});
 Default.args = {};
 
-const TemplateConfirmationModal = () => {
+function TemplateConfirmationModal() {
     const modalRef = React.createRef();
     const confirmCb = () => {
         console.log('Confirmed !');
@@ -85,11 +85,11 @@ const TemplateConfirmationModal = () => {
             <ConfirmationModal ref={modalRef} confirmCb={confirmCb} title="My modal" text="Are you sure?" />
         </div>
     );
-};
+}
 export const ModalConfirmation = TemplateConfirmationModal.bind({});
 Default.args = {};
 
-const TemplateEscapeModal = () => {
+function TemplateEscapeModal() {
     const [escEnabled, setEscEnabled] = useState(true);
     const modalRef = useRef(null);
     return (
@@ -101,11 +101,11 @@ const TemplateEscapeModal = () => {
             </Modal>
         </div>
     );
-};
+}
 export const ModalEscape = TemplateEscapeModal.bind({});
 Default.args = {};
 
-const TemplateClickOutsideModal = () => {
+function TemplateClickOutsideModal() {
     const modalRef = React.createRef();
     return (
         <div style={{ paddingLeft: '50px' }}>
@@ -115,11 +115,11 @@ const TemplateClickOutsideModal = () => {
             </Modal>
         </div>
     );
-};
+}
 export const ModalClickOutside = TemplateClickOutsideModal.bind({});
 Default.args = {};
 
-const TemplateLoadingLayerModal = () => {
+function TemplateLoadingLayerModal() {
     const modalRef = React.createRef();
     return (
         <div style={{ paddingLeft: '50px' }}>
@@ -161,6 +161,6 @@ const TemplateLoadingLayerModal = () => {
             </Modal>
         </div>
     );
-};
+}
 export const ModalLoadingLayer = TemplateLoadingLayerModal.bind({});
 Default.args = {};

package/src/components/Modal/Modal.test.js

@@ -21,7 +21,7 @@ it('is hidden after clicking cancel', () => {
     render(
         <Modal ref={modalRef} validateCb={() => {}}>
             content
-        </Modal>
+        </Modal>,
     );
     act(() => {
         modalRef.current.open();
@@ -42,7 +42,7 @@ it('is hidden after clicking validate', () => {
     render(
         <Modal ref={modalRef} validateCb={validateCb}>
             content
-        </Modal>
+        </Modal>,
     );
     act(() => {
         modalRef.current.open();
@@ -59,7 +59,7 @@ it('is closing after escaping if it is set to be closed with it', () => {
     const { rerender } = render(
         <Modal ref={modalRef} closesWithEscape closeCb={closeCb}>
             content
-        </Modal>
+        </Modal>,
     );
     act(() => {
         modalRef.current.open();
@@ -72,7 +72,7 @@ it('is closing after escaping if it is set to be closed with it', () => {
     rerender(
         <Modal ref={modalRef} closesWithEscape={false} closeCb={closeCb}>
             content
-        </Modal>
+        </Modal>,
     );
     act(() => {
         modalRef.current.open();
@@ -84,7 +84,7 @@ it('is closing after escaping if it is set to be closed with it', () => {
     rerender(
         <Modal ref={modalRef} closesWithEscape closeCb={closeCb}>
             content
-        </Modal>
+        </Modal>,
     );
     act(() => {
         modalRef.current.open();
@@ -99,7 +99,7 @@ it('is closing after click outside if it is set to bet closed with it', () => {
     render(
         <Modal ref={modalRef} displayCloseButtonOutside closeCb={closeCb}>
             content
-        </Modal>
+        </Modal>,
     );
     act(() => {
         modalRef.current.open();

package/src/components/OfflineChatBot/OfflineChatBot.stories.js

@@ -9,7 +9,7 @@ const Story = {
 
 export default Story;
 
-const Template = () => {
+function Template() {
     const chatRef = useRef(null);
     return (
         <div>
@@ -19,6 +19,6 @@ const Template = () => {
             <OfflineChatBot ref={chatRef} />
         </div>
     );
-};
+}
 export const Default = Template.bind({});
 Default.args = {};

package/src/components/Panel/Panel.js

@@ -37,7 +37,7 @@ class Panel extends Component {
                             width: Math.floor(Math.random() * (10 - 90) + 90),
                             containerIndex,
                             lineIndex,
-                        }))
+                        })),
                 ),
         });
     };

package/src/components/Panel/Panel.stories.js

@@ -9,7 +9,7 @@ const Story = {
 
 export default Story;
 
-const Template = () => {
+function Template() {
     const [loading, setLoading] = useState(false);
     const panelRef = useRef(null);
     const loadingPanelRef = useRef(null);
@@ -51,6 +51,6 @@ const Template = () => {
             </Panel>
         </div>
     );
-};
+}
 export const Default = Template.bind({});
 Default.args = {};

package/src/components/Panel/Panel.test.js

@@ -41,7 +41,7 @@ it('opens on placeholder if loading prop is passed down and with provided num of
     const { container } = render(
         <Panel ref={panelRef} loading numberOfPlaceholderSections={4}>
             content
-        </Panel>
+        </Panel>,
     );
     act(() => {
         panelRef.current.open();

package/src/components/PasswordStrengthBar/PasswordStrengthBar.stories.js

@@ -8,14 +8,14 @@ const Story = {
 
 export default Story;
 
-const Template = (args) => {
+function Template(args) {
     const { password } = args;
     return (
         <div>
             <PasswordStrengthBar password={password} />
         </div>
     );
-};
+}
 export const Default = Template.bind({});
 Default.args = {
     password: 'mypassword',

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

@@ -21,7 +21,6 @@ const green = '#25c281';
 const barColors = [grey, red, orange, blue, green];
 
 describe('PasswordStrengthBar', () => {
-
     describe('Color changing / complexity', () => {
         it('renders all bars in grey when password is too short', async () => {
             render(<PasswordStrengthBar password={password.tooShort} barColors={barColors} />);

package/src/components/Popover/ConfirmationPopover.test.js

@@ -9,7 +9,7 @@ it('renders a ConfirmationPopover', () => {
     const { container } = render(
         <ConfirmationPopover text="Do you confirm?" confirmCb={() => {}}>
             <span>Child 1</span>
-        </ConfirmationPopover>
+        </ConfirmationPopover>,
     );
     expect(container.firstChild).toHaveClass('popover__child');
 });
@@ -26,7 +26,7 @@ it('renders a confirm', () => {
             }}
         >
             <span>Child 1</span>
-        </ConfirmationPopover>
+        </ConfirmationPopover>,
     );
     act(() => {
         ref.current.toggle();

package/src/components/Popover/Popover.js

@@ -40,7 +40,7 @@ class Popover extends Component {
                                 />
                             </Animate>
                         )}
-                    </AnimatePresence>
+                    </AnimatePresence>,
                 )}
             </>
         );