@woosmap/ui 2.42.0 → 2.46.0

package/src/components/Map/drawOnMap.js

@@ -84,6 +84,46 @@ export const woosmapBoundsFromViewport = function woosmapBoundsFromViewport(view
     );
 };
 
+export const createWoosmapMap = (node) =>
+    new window.woosmap.map.Map(node, {
+        styles: [
+            {
+                featureType: 'administrative',
+                elementType: 'all',
+                stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 20 }],
+            },
+            {
+                featureType: 'road',
+                elementType: 'all',
+                stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 40 }],
+            },
+            {
+                featureType: 'water',
+                elementType: 'all',
+                stylers: [{ visibility: 'on' }, { saturation: -10 }, { lightness: 30 }],
+            },
+            {
+                featureType: 'landscape.man_made',
+                elementType: 'all',
+                stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 10 }],
+            },
+            {
+                featureType: 'landscape.natural',
+                elementType: 'all',
+                stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 60 }],
+            },
+            {
+                featureType: 'poi',
+                elementType: 'all',
+                stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
+            },
+            {
+                featureType: 'transit',
+                elementType: 'all',
+                stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
+            },
+        ],
+    });
 export class WoosmapMapBoundingBox {
     constructor(bounds, padding) {
         this.overlayView = new window.woosmap.map.OverlayView();

package/src/components/Modal/ConfirmationModal.js

@@ -24,7 +24,7 @@ export default class ConfirmationModal extends Component {
     };
 
     render() {
-        const { text, title, defaultIsOpen } = this.props;
+        const { text, title, defaultIsOpen, testId } = this.props;
         return (
             <Modal
                 ref={this.modalRef}
@@ -32,6 +32,7 @@ export default class ConfirmationModal extends Component {
                 title={title || tr('Beware...')}
                 validateBtnProps={{ type: 'important' }}
                 validateCb={this.confirm}
+                testId={testId}
             >
                 <div>{text}</div>
             </Modal>
@@ -42,6 +43,7 @@ export default class ConfirmationModal extends Component {
 ConfirmationModal.defaultProps = {
     title: '',
     defaultIsOpen: false,
+    testId: 'confirmation-modal',
 };
 
 ConfirmationModal.propTypes = {
@@ -49,4 +51,5 @@ ConfirmationModal.propTypes = {
     text: PropTypes.string.isRequired,
     title: PropTypes.string,
     confirmCb: PropTypes.func.isRequired,
+    testId: PropTypes.string,
 };

package/src/components/Modal/Modal.js

@@ -51,7 +51,7 @@ class Modal extends Component {
     };
 
     renderFooter = () => {
-        const { footer, labelValidate, errorLabel, validateCb, validateBtnProps, mainButtonType } = this.props;
+        const { footer, labelValidate, errorLabel, validateCb, validateBtnProps, mainButtonType, testId } = this.props;
         const { isLoading } = this.state;
 
         if (footer === false) {
@@ -63,11 +63,16 @@ class Modal extends Component {
                     <div className="modal__footer__error">{errorLabel}</div>
                     <>
                         {validateCb && (
-                            <Button data-testid="cancel" label={tr('Cancel')} type="transparent" onClick={this.close} />
+                            <Button
+                                testId={`${testId}-cancel-button`}
+                                label={tr('Cancel')}
+                                type="transparent"
+                                onClick={this.close}
+                            />
                         )}
                         <Button
                             type={mainButtonType}
-                            data-testid="validate"
+                            testId={`${testId}-validate-button`}
                             label={labelValidate || tr('Validate')}
                             onClick={this.validate}
                             isLoading={isLoading}
@@ -83,7 +88,7 @@ class Modal extends Component {
     render() {
         const { open } = this.state;
 
-        const { title, children, className, isFull, header, disableCloseOutside } = this.props;
+        const { title, children, className, isFull, header, disableCloseOutside, testId } = this.props;
         const tit = open && title;
         return ReactDOM.createPortal(
             <AnimatePresence>
@@ -92,7 +97,7 @@ class Modal extends Component {
                         className={cl('modal', className, {
                             'modal--full': isFull,
                         })}
-                        data-testid="modal"
+                        data-testid={testId}
                     >
                         <Animate className="modal__wrapper">
                             <div ref={this.modalRef} className="modal__content">
@@ -100,7 +105,7 @@ class Modal extends Component {
                                     {header || <h1 className="title">{tit}</h1>}
                                     {!disableCloseOutside && (
                                         <Button
-                                            data-testid="close"
+                                            testId={`${testId}-close-button`}
                                             className="modal__close"
                                             icon="close"
                                             type="link-flex"
@@ -135,6 +140,7 @@ Modal.defaultProps = {
     defaultIsOpen: false,
     validateBtnProps: {},
     mainButtonType: 'primary',
+    testId: 'modal',
 };
 
 Modal.propTypes = {
@@ -153,6 +159,7 @@ Modal.propTypes = {
     labelValidate: PropTypes.string,
     validateBtnProps: PropTypes.object,
     mainButtonType: PropTypes.string,
+    testId: PropTypes.string,
 };
 
 export default withClickOutside(Modal, '.ignore-click-outside-modal');

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

@@ -26,7 +26,7 @@ it('is hidden after clicking close', () => {
     const modal = screen.getByTestId('modal');
     expect(modal).toHaveClass('modal');
 
-    const close = screen.getByTestId('close');
+    const close = screen.getByTestId('modal-close-button');
     userEvent.click(close);
     try {
         screen.getByTestId('modal');
@@ -46,7 +46,7 @@ it('is hidden after clicking cancel', () => {
     act(() => {
         modalRef.current.open();
     });
-    const cancel = screen.getByTestId('cancel');
+    const cancel = screen.getByTestId('modal-cancel-button');
     userEvent.click(cancel);
     try {
         screen.getByTestId('modal');
@@ -68,7 +68,7 @@ it('is hidden after clicking cancel', () => {
         modalRef.current.open();
     });
     expect(validateCb.mock.calls.length).toBe(0);
-    const validate = screen.getByTestId('validate');
+    const validate = screen.getByTestId('modal-validate-button');
     userEvent.click(validate);
     expect(validateCb.mock.calls.length).toBe(1);
 });

package/src/components/Panel/Panel.js

@@ -50,13 +50,13 @@ class Panel extends Component {
 
     render() {
         const { open } = this.state;
-        const { children, position, header, disableCloseOutside, ...rest } = this.props;
+        const { children, position, header, disableCloseOutside, testId, ...rest } = this.props;
         return (
             <AnimatePresence>
                 {open && (
                     <motion.div
                         ref={this.clickOutsideRef}
-                        data-testid="panel"
+                        data-testid={testId}
                         className={cl('panel', `panel--${position}`)}
                         initial={{ right: -300 }}
                         animate={{ right: 0 }}
@@ -76,7 +76,7 @@ class Panel extends Component {
                                     icon="close"
                                     type="link-flex"
                                     onClick={this.close}
-                                    data-testid="close"
+                                    testId={`${testId}-close-button`}
                                 />
                             </div>
                         </div>
@@ -94,10 +94,12 @@ Panel.defaultProps = {
     closeCb: null,
     header: null,
     disableCloseOutside: false,
+    testId: 'panel',
 };
 
 Panel.propTypes = {
     closeCb: PropTypes.func,
+    testId: PropTypes.string,
     defaultIsOpen: PropTypes.bool,
     disableCloseOutside: PropTypes.bool,
     children: PropTypes.node.isRequired,

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

@@ -26,7 +26,7 @@ it('is hidden after clicking close', () => {
     const panel = screen.getByTestId('panel');
     expect(panel).toHaveClass('panel');
 
-    const close = screen.getByTestId('close');
+    const close = screen.getByTestId('panel-close-button');
     userEvent.click(close);
     try {
         screen.getByTestId('panel');
@@ -34,4 +34,4 @@ it('is hidden after clicking close', () => {
     } catch (e) {
         // nothink
     }
-});
+});

package/src/components/Popover/ConfirmationPopover.js

@@ -25,13 +25,13 @@ export default class ConfirmationPopover extends Component {
     };
 
     renderContent = () => {
-        const { text } = this.props;
+        const { text, testId } = this.props;
         return (
             <div className="popover__content-box">
                 <div className="popover__message">{text}</div>
                 <div className="popover__footer ignore-click-outside">
-                    <Button label={tr('Cancel')} type="link" onClick={this.close} />
-                    <Button label={tr('Confirm')} onClick={this.confirm} />
+                    <Button label={tr('Cancel')} testId={`${testId}-cancel-button`} type="link" onClick={this.close} />
+                    <Button label={tr('Confirm')} testId={`${testId}-confirm-button`} onClick={this.confirm} />
                 </div>
             </div>
         );
@@ -48,12 +48,14 @@ export default class ConfirmationPopover extends Component {
 }
 
 ConfirmationPopover.defaultProps = {
+    testId: 'confirm-popover',
     container: null,
     placement: 'bottom-center',
 };
 
 ConfirmationPopover.propTypes = {
     text: PropTypes.string.isRequired,
+    testId: PropTypes.string,
     placement: PropTypes.string,
     children: PropTypes.node.isRequired,
     container: PropTypes.string,

package/src/components/ScrollBar/ScrollBar.js

@@ -110,12 +110,13 @@ export default class ScrollBar extends Component {
             component,
             onSync,
             children,
+            testId,
             ...rest
         } = this.props;
         const Comp = component;
 
         return (
-            <Comp className={className} style={style} ref={this.containerRef} {...rest}>
+            <Comp className={className} style={style} ref={this.containerRef} data-testid={testId} {...rest}>
                 {children}
             </Comp>
         );
@@ -123,6 +124,7 @@ export default class ScrollBar extends Component {
 }
 
 ScrollBar.defaultProps = {
+    testId: 'scrollbar',
     className: '',
     style: {},
     options: undefined,
@@ -142,6 +144,7 @@ ScrollBar.defaultProps = {
 
 ScrollBar.propTypes = {
     component: PropTypes.string,
+    testId: PropTypes.string,
     style: PropTypes.object,
     options: PropTypes.object,
     className: PropTypes.string,

package/src/components/ScrollBar/ScrollBar.test.js

@@ -5,6 +5,6 @@ import '@testing-library/jest-dom/extend-expect';
 import ScrollBar from './ScrollBar';
 
 it('renders a ScrollBar component ', () => {
-    const { container } = render(<ScrollBar>content</ScrollBar>);
-    expect(container.firstChild).toHaveClass('scrollbar-container');
+    const { getByTestId } = render(<ScrollBar>content</ScrollBar>);
+    expect(getByTestId('scrollbar')).toHaveClass('scrollbar-container');
 });

package/src/components/ServiceMessage/ServiceMessage.js

@@ -18,14 +18,16 @@ export default class ServiceMessage extends Component {
     };
 
     render() {
-        const { type, text, ...rest } = this.props;
+        const { type, text, testId, ...rest } = this.props;
         const { open } = this.state;
         const classes = cl('service-message', type ? `service-message--${type}` : null);
         return (
             open && (
-                <div data-testid="servicemessage" className={classes} {...rest}>
-                    <div className="service-message__text">{text}</div>
-                    <Button icon="close" type="link-flex" onClick={this.close} />
+                <div data-testid={testId} className={classes} {...rest}>
+                    <div className="service-message__text" data-testid={`${testId}-text`}>
+                        {text}
+                    </div>
+                    <Button icon="close" type="link-flex" onClick={this.close} testId={`${testId}-close-button`} />
                 </div>
             )
         );
@@ -35,9 +37,11 @@ export default class ServiceMessage extends Component {
 ServiceMessage.defaultProps = {
     type: 'error',
     text: '',
+    testId: 'service-message',
 };
 
 ServiceMessage.propTypes = {
     type: PropTypes.oneOf([undefined, 'success', 'error', 'warning', 'info']),
     text: PropTypes.string,
+    testId: PropTypes.string,
 };

package/src/components/SnackBar/SnackBar.test.js

@@ -14,11 +14,11 @@ class SomeChildComponent extends React.Component {
         return (
             <div>
                 <Button
-                    data-testid="open"
+                    testId="open"
                     label="Open"
                     onClick={() => openSnackBar('This is the content of the Snackbar.')}
                 />
-                <Button data-testid="close" label="Close" onClick={closeSnackBar} />
+                <Button testId="close" label="Close" onClick={closeSnackBar} />
             </div>
         );
     }

package/src/components/Tab/Tab.js

@@ -40,7 +40,7 @@ export default class Tab extends Component {
     renderHeader(childrenOfTab) {
         return Children.toArray(childrenOfTab).map((childTab, index) => {
             const { title, icon, iconSize, className } = childTab.props;
-            const { type } = this.props;
+            const { type, testId } = this.props;
             const btnType = !type || undefined ? 'tab' : `tab--${type}`;
             return (
                 <li key={`header_${title}`}>
@@ -52,6 +52,7 @@ export default class Tab extends Component {
                         label={title}
                         icon={icon}
                         iconSize={iconSize}
+                        testId={`${testId}-header-button`}
                     />
                 </li>
             );
@@ -86,10 +87,10 @@ export default class Tab extends Component {
     }
 
     render() {
-        const { children, type, separator } = this.props;
+        const { children, type, separator, testId } = this.props;
         const classes = cl('tab', `tab--${type}`);
         return (
-            <div className={classes}>
+            <div className={classes} data-testid={testId}>
                 <div className={cl('tab__header', { 'tab__header--separator': separator })}>
                     <ul className="tab__header__buttons">{this.renderHeader(children)}</ul>
                     <div>{this.renderActions(children)}</div>
@@ -101,6 +102,7 @@ export default class Tab extends Component {
 }
 
 Tab.defaultProps = {
+    testId: 'tab',
     actions: [],
     type: undefined,
     selectCb: null,
@@ -113,6 +115,7 @@ Tab.defaultProps = {
 Tab.propTypes = {
     selectCb: PropTypes.func,
     defaultSelect: PropTypes.string,
+    testId: PropTypes.string,
     children: PropTypes.node.isRequired,
     actions: PropTypes.array,
     type: PropTypes.oneOf(['pills', undefined]),

package/src/components/Tab/Tab.test.js

@@ -8,24 +8,24 @@ import Tab from './Tab';
 it('renders a tab component with no tab', () => {
     const { container } = render(
         <Tab>
-            <div title="tab 1">My first tab</div>
+            <div title="tab 1">First</div>
         </Tab>
     );
     expect(container.firstChild).toHaveClass('tab');
 });
 
 it('renders a tab component with 2 tabs and content', () => {
-    const { container } = render(
+    const { getByTestId, container } = render(
         <Tab>
-            <div title="tab 1">My first tab</div>
-            <div title="tab 2">My second tab</div>
+            <div title="tab 1">First</div>
+            <div title="tab 2">Second</div>
         </Tab>
     );
-    expect(container.firstChild).toHaveClass('tab');
+    expect(getByTestId('tab')).toHaveClass('tab');
     expect(container.firstChild.firstChild).toHaveClass('tab__header');
     expect(container.firstChild.firstChild.firstChild.firstChild.firstChild).toHaveClass('btn');
     expect(container.firstChild.firstChild.firstChild.firstChild.firstChild).toHaveClass('active');
-    const firstTab = screen.getByText('My first tab');
+    const firstTab = screen.getByText('First');
     expect(firstTab).toHaveClass('active');
 
     userEvent.click(screen.getByText('tab 2'));
@@ -34,12 +34,12 @@ it('renders a tab component with 2 tabs and content', () => {
 it('changes active tab after click', () => {
     render(
         <Tab>
-            <div title="tab 1">My first tab</div>
-            <div title="tab 2">My second tab</div>
+            <div title="tab 1">First</div>
+            <div title="tab 2">Second</div>
         </Tab>
     );
 
     userEvent.click(screen.getByText('tab 2'));
-    const secondTab = screen.getByText('My second tab');
+    const secondTab = screen.getByText('Second');
     expect(secondTab).toHaveClass('active');
 });

package/src/components/Tooltip/Tooltip.js

@@ -4,7 +4,7 @@ import cl from 'classnames';
 
 export default class Tooltip extends Component {
     render() {
-        const { product, className, text, direction, align, noDelay, wrap, children, ...rest } = this.props;
+        const { product, className, text, direction, align, noDelay, wrap, children, testId, ...rest } = this.props;
         const classes = cl(
             'tooltip',
             className,
@@ -15,7 +15,7 @@ export default class Tooltip extends Component {
             wrap && 'tooltipped-multiline'
         );
         return (
-            <div aria-label={text} {...rest} className={classes}>
+            <div aria-label={text} data-testid={testId} {...rest} className={classes}>
                 {children}
             </div>
         );
@@ -23,6 +23,7 @@ export default class Tooltip extends Component {
 }
 
 Tooltip.defaultProps = {
+    testId: 'tooltip',
     className: '',
     direction: 'e',
     align: undefined,
@@ -51,6 +52,7 @@ Tooltip.propTypes = {
         undefined,
     ]),
     text: PropTypes.string,
+    testId: PropTypes.string,
     className: PropTypes.string,
     wrap: PropTypes.bool,
 };

package/src/components/Tooltip/Tooltip.test.js

@@ -5,10 +5,10 @@ import '@testing-library/jest-dom/extend-expect';
 import Tooltip from './Tooltip';
 
 it('renders a Tooltip', () => {
-    const { container } = render(<Tooltip>my tip</Tooltip>);
-    expect(container.firstChild).toHaveClass('tooltip');
-    expect(container.firstChild).toHaveClass('tooltipped-e');
-    expect(container.firstChild).toHaveTextContent('my tip');
+    const { getByTestId } = render(<Tooltip>my tip</Tooltip>);
+    expect(getByTestId('tooltip')).toHaveClass('tooltip');
+    expect(getByTestId('tooltip')).toHaveClass('tooltipped-e');
+    expect(getByTestId('tooltip')).toHaveTextContent('my tip');
 });
 
 it('renders a Tooltip direction south', () => {

package/src/components/withFormValidation/withFormValidation.test.js

@@ -27,11 +27,7 @@ class Form extends React.Component {
                         })}
                     />
                     {renderFormError()}
-                    <Button
-                        data-testid="submit"
-                        onClick={this.submit}
-                        label="Submit"
-                    />
+                    <Button testId="submit" onClick={this.submit} label="Submit" />
                 </form>
             </>
         );

package/src/icons/autocomplete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M77.773 33.1H22.227a10.445 10.445 0 1 1 0-20.89h55.546a10.445 10.445 0 1 1 0 20.89ZM22.227 15.213a7.445 7.445 0 1 0 0 14.89h55.546a7.445 7.445 0 1 0 0-14.89Zm56.31 75.574H21.463a9.692 9.692 0 0 1-9.682-9.681V49.253a9.692 9.692 0 0 1 9.682-9.68h57.074a9.692 9.692 0 0 1 9.682 9.68v31.853a9.692 9.692 0 0 1-9.682 9.681ZM21.463 42.573a6.688 6.688 0 0 0-6.682 6.68v31.853a6.689 6.689 0 0 0 6.682 6.681h57.074a6.689 6.689 0 0 0 6.682-6.681V49.253a6.688 6.688 0 0 0-6.682-6.68Z"/><path d="M42.878 24.453H21.307a1.5 1.5 0 0 1 0-3h21.571a1.5 1.5 0 0 1 0 3ZM64.448 54H21.307a1.5 1.5 0 1 1 0-3h43.141a1.5 1.5 0 0 1 0 3Zm11.037 11.68H21.307a1.5 1.5 0 0 1 0-3h54.178a1.5 1.5 0 0 1 0 3ZM50 77.431H21.307a1.5 1.5 0 0 1 0-3H50a1.5 1.5 0 0 1 0 3Z"/></svg>

package/src/icons/buildings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M68.747 37.178h-7.3V25.821a10.4 10.4 0 0 0-10.394-10.393H25.367a10.4 10.4 0 0 0-10.393 10.393v58.751h70.052V53.457a16.3 16.3 0 0 0-16.279-16.279ZM17.974 81.572V25.821a7.4 7.4 0 0 1 7.393-7.393h25.686a7.4 7.4 0 0 1 7.393 7.393v11.385a1.532 1.532 0 0 0-.282-.028H36.62a1.5 1.5 0 0 0 0 3h21.544a1.45 1.45 0 0 0 .282-.029V51.28a1.45 1.45 0 0 0-.282-.029H36.62a1.5 1.5 0 0 0 0 3h21.544a1.532 1.532 0 0 0 .282-.028v11.13a1.532 1.532 0 0 0-.282-.028H36.62a1.5 1.5 0 1 0 0 3h21.544a1.45 1.45 0 0 0 .282-.029v13.276Zm43.472 0V40.178h7.3a13.29 13.29 0 0 1 13.082 11.073H71.3a1.5 1.5 0 0 0 0 3h10.726v11.074H71.3a1.5 1.5 0 0 0 0 3h10.726v13.247Z"/></svg>

package/src/icons/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M82.454 23.158a11.27 11.27 0 1 0-12.77 11.157v6.6a8.777 8.777 0 0 1-8.767 8.767H39.083a11.725 11.725 0 0 0-8.767 3.946V34.315a11.27 11.27 0 1 0-3 0v31.37a11.269 11.269 0 1 0 3 0v-4.234a8.777 8.777 0 0 1 8.767-8.767h21.834a11.779 11.779 0 0 0 11.767-11.767v-6.6a11.277 11.277 0 0 0 9.77-11.159Zm-61.908 0a8.27 8.27 0 1 1 8.27 8.269 8.279 8.279 0 0 1-8.27-8.269Zm16.539 53.684a8.27 8.27 0 1 1-8.269-8.269 8.278 8.278 0 0 1 8.269 8.269Zm34.1-45.415a8.269 8.269 0 1 1 8.27-8.269 8.278 8.278 0 0 1-8.271 8.269Z"/></svg>

package/src/icons/position.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 11.568A38.432 38.432 0 1 0 88.432 50 38.476 38.476 0 0 0 50 11.568Zm34.9 32.373C79.4 39.4 67.541 35.777 50 35.777a1.423 1.423 0 0 0-.208.021 13.279 13.279 0 0 0-8.9-10.128c2.439-6.979 5.8-11.1 9.107-11.1A35.483 35.483 0 0 1 84.9 43.941ZM36.784 48.5a10.246 10.246 0 1 1 10.245-10.245A10.257 10.257 0 0 1 36.784 48.5Zm6.3-33.249a29.678 29.678 0 0 0-5.147 9.817 13.23 13.23 0 0 0-1.149-.059 13.26 13.26 0 0 0-13.249 13.246c0 .433.024.859.065 1.282a1.478 1.478 0 0 0-.207.048 27.537 27.537 0 0 0-8.282 4.255A35.522 35.522 0 0 1 43.08 15.251ZM14.568 50c0-2.611 3.613-5.42 9.67-7.529A13.28 13.28 0 0 0 34.3 51.258c.188 15 3.728 27.578 8.9 33.511A35.487 35.487 0 0 1 14.568 50ZM50 85.432c-6 0-12.4-13.582-12.7-33.958A13.243 13.243 0 0 0 50 38.777c20.879 0 35.429 5.915 35.429 11.223A35.472 35.472 0 0 1 50 85.432Z"/><circle cx="36.784" cy="38.255" r="7.311"/></svg>

package/src/icons/quote.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="m45.2 32.468-6.1 5.207a11.859 11.859 0 0 0-4.475 9.355q0 3.338 3.986 7.729t3.989 8.055q0 11.96-11.8 11.959-12.612 0-12.611-14.4 0-21.558 21.56-35.146Zm36.61 0-6.1 5.207a11.855 11.855 0 0 0-4.475 9.355q0 3.338 3.986 7.729t3.988 8.055q0 11.96-11.8 11.959-12.611 0-12.61-14.4 0-21.558 21.56-35.146Z"/></svg>

package/src/icons/save-money.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M89.409 19.172a6.953 6.953 0 0 0-5.87 3.238 1.5 1.5 0 0 0-.362-.049 15.089 15.089 0 0 1-10.74-4.449l-2.83-2.829a10.88 10.88 0 0 0-7.743-3.208H42.11a4.649 4.649 0 0 0-3.037 8.186A31.864 31.864 0 0 0 19.356 58.7h-2.709a6.96 6.96 0 0 0-6.056-3.543H4.63v25.671h5.961a6.953 6.953 0 0 0 5.87-3.238 1.5 1.5 0 0 0 .362.049 15.089 15.089 0 0 1 10.74 4.449l2.83 2.829a10.88 10.88 0 0 0 7.743 3.208H57.89a4.649 4.649 0 0 0 3.016-8.2A31.862 31.862 0 0 0 80.651 41.3h2.7a6.96 6.96 0 0 0 6.056 3.543h5.963V19.172ZM14.55 73.869a3.963 3.963 0 0 1-3.959 3.959H7.63V58.155h2.961a3.963 3.963 0 0 1 3.959 3.959ZM74.98 38.3a8.433 8.433 0 0 1-6-2.486l-11.665-11.66a1.76 1.76 0 0 1 0-2.485 1.8 1.8 0 0 1 2.483 0l6.976 6.976a1.5 1.5 0 0 0 2.126-2.122l-6.975-6.975a4.757 4.757 0 0 0-6.727 6.727l11.659 11.663A11.414 11.414 0 0 0 74.98 41.3h2.52a28.8 28.8 0 0 1-25.748 37.487h-2.719a1.5 1.5 0 1 0 0 3h.576a1.484 1.484 0 0 0 .391.058c.623 0 1.24-.023 1.854-.058h6.036a1.669 1.669 0 0 1 0 3.338H38.136a7.9 7.9 0 0 1-5.622-2.325l-2.829-2.829a18.047 18.047 0 0 0-12.185-5.3 7.094 7.094 0 0 0 .05-.8V62.114c0-.141-.013-.278-.021-.416h7.491a8.433 8.433 0 0 1 6 2.486l11.665 11.662a1.76 1.76 0 0 1 0 2.485 1.8 1.8 0 0 1-2.483 0l-6.976-6.976a1.5 1.5 0 1 0-2.126 2.122l6.975 6.975a4.757 4.757 0 0 0 6.727-6.727L33.143 62.062A11.414 11.414 0 0 0 25.02 58.7h-2.513a28.8 28.8 0 0 1 25.415-37.487h3.045a1.5 1.5 0 0 0 0-3h-.495A1.5 1.5 0 0 0 50 18.13c-.734 0-1.459.034-2.181.083H42.11a1.669 1.669 0 1 1 0-3.338h19.754a7.9 7.9 0 0 1 5.622 2.325l2.829 2.829A18.047 18.047 0 0 0 82.5 25.328a7.094 7.094 0 0 0-.05.8v11.758c0 .141.013.278.021.416Zm17.39 3.543h-2.961a3.963 3.963 0 0 1-3.959-3.959V26.131a3.963 3.963 0 0 1 3.959-3.959h2.961Z"/><path d="M51.5 39.3v-3.492a1.5 1.5 0 1 0-3 0V39.3h-.521a5.783 5.783 0 0 0-5.779 5.772 6.349 6.349 0 0 0 6.3 6.342v6.693h-1.4a1.9 1.9 0 0 1-1.9-1.893 1.5 1.5 0 0 0-3 0 4.9 4.9 0 0 0 4.9 4.893h1.4v3.06a1.5 1.5 0 0 0 3 0v-3.06h.521a5.782 5.782 0 0 0 5.779-5.776v-.57a6.35 6.35 0 0 0-6.3-6.342V42.3h1.4a1.9 1.9 0 0 1 1.9 1.889 1.5 1.5 0 0 0 3 0 4.9 4.9 0 0 0-4.9-4.889Zm3.3 15.466v.57a2.779 2.779 0 0 1-2.776 2.776H51.5v-6.691a3.346 3.346 0 0 1 3.3 3.34Zm-6.3-6.349a3.346 3.346 0 0 1-3.3-3.34 2.78 2.78 0 0 1 2.779-2.777h.521Z"/></svg>

package/src/icons/social-facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.426 1.66H4.661a3 3 0 0 0-3 3v14.766a3 3 0 0 0 3 3H12.7v-8.095H10v-3.1h2.7V8.93a3.76 3.76 0 0 1 3.37-4.113 3.823 3.823 0 0 1 .642-.009 18.532 18.532 0 0 1 2.413.124v2.779H17.46c-1.3 0-1.53.607-1.53 1.516v2h3.075l-.4 3.1h-2.676v8.1h3.5a3 3 0 0 0 3-3V4.66a3 3 0 0 0-3.003-3Z" fill-rule="evenodd"/></svg>

package/src/icons/social-linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.426 1.66H4.661a3 3 0 0 0-3 3v14.766a3 3 0 0 0 3 3h14.765a3 3 0 0 0 3-3V4.66a3 3 0 0 0-3-3ZM7.8 19.281H4.721V9.409H7.8ZM6.26 8.072h-.012a1.778 1.778 0 0 1-1.761-1.793v-.006a1.786 1.786 0 1 1 1.772 1.8Zm9.961 11.21v-4.8c0-1.144-.028-2.62-1.6-2.62-1.6 0-1.834 1.255-1.834 2.537v4.88H9.726v-9.87h2.935v1.349h.032a3.225 3.225 0 0 1 2.9-1.586c3.115 0 3.68 2.04 3.68 4.7l.007 5.41Z" fill-rule="evenodd"/></svg>

package/src/icons/social-twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.066 5.136a8.972 8.972 0 0 1-2.61.715 4.552 4.552 0 0 0 2-2.511 9.083 9.083 0 0 1-2.884 1.1 4.545 4.545 0 0 0-7.741 4.142 12.9 12.9 0 0 1-9.357-4.744A4.544 4.544 0 0 0 3.879 9.9a4.542 4.542 0 0 1-2.058-.567v.057a4.542 4.542 0 0 0 3.642 4.453 4.519 4.519 0 0 1-1.2.159 4.441 4.441 0 0 1-.853-.08 4.549 4.549 0 0 0 4.241 3.153 9.112 9.112 0 0 1-5.639 1.944 9.559 9.559 0 0 1-1.082-.062A12.88 12.88 0 0 0 7.892 21 12.832 12.832 0 0 0 20.814 8.254v-.179c0-.2 0-.393-.014-.588a9.2 9.2 0 0 0 2.267-2.348Z"/></svg>

package/src/icons/world.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M81.374 72.155a38.3 38.3 0 0 0 0-44.31 1.428 1.428 0 0 0-.1-.143 38.432 38.432 0 1 0 0 44.6 1.428 1.428 0 0 0 .1-.147ZM14.606 51.5h13.823a62.657 62.657 0 0 0 3 18.374H20.682A35.212 35.212 0 0 1 14.606 51.5Zm6.076-21.374h10.746a62.657 62.657 0 0 0-3 18.374H14.606a35.212 35.212 0 0 1 6.076-18.374ZM85.394 48.5H71.571a62.657 62.657 0 0 0-3-18.374h10.747A35.212 35.212 0 0 1 85.394 48.5Zm-16.823 0H51.5V30.126h13.883A59.148 59.148 0 0 1 68.571 48.5ZM51.5 27.126V14.693c5.071.776 9.573 5.442 12.682 12.433Zm-3-12.433v12.433H35.818c3.109-6.991 7.611-11.657 12.682-12.433Zm0 15.433V48.5H31.429a59.148 59.148 0 0 1 3.188-18.374ZM31.429 51.5H48.5v18.374H34.617A59.148 59.148 0 0 1 31.429 51.5ZM48.5 72.874v12.433c-5.071-.776-9.573-5.442-12.682-12.433Zm3 12.433V72.874h12.682c-3.109 6.991-7.611 11.657-12.682 12.433Zm0-15.433V51.5h17.071a59.148 59.148 0 0 1-3.188 18.374ZM71.571 51.5h13.823a35.212 35.212 0 0 1-6.076 18.374H68.572A62.657 62.657 0 0 0 71.571 51.5Zm5.458-24.374h-9.57a31.78 31.78 0 0 0-7.12-11.015 35.527 35.527 0 0 1 16.69 11.015ZM39.661 16.111a31.78 31.78 0 0 0-7.12 11.015h-9.57a35.527 35.527 0 0 1 16.69-11.015Zm-16.69 56.763h9.57a31.78 31.78 0 0 0 7.12 11.015 35.527 35.527 0 0 1-16.69-11.015Zm37.368 11.015a31.78 31.78 0 0 0 7.12-11.015h9.57a35.527 35.527 0 0 1-16.69 11.015Z"/></svg>

package/src/images/marker-dot.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.64 32.64" width="32.64" height="32.64">
+<defs>
+	<filter id="dropshadow" height="130%">
+		<feGaussianBlur in="SourceAlpha" stdDeviation="1.6"/>
+		<feOffset dx="0" dy="1" result="offsetblur"/>
+		<feComponentTransfer>
+			<feFuncA type="linear" slope="0.4"/>
+		</feComponentTransfer>
+		<feMerge>
+			<feMergeNode/>
+			<feMergeNode in="SourceGraphic"/>
+		</feMerge>
+	</filter>
+</defs>
+<path d="M16.15,27.67a12.486,12.486,0,0,1-8.857-3.663,12.637,12.637,0,0,1,.1-17.714A12.49,12.49,0,1,1,16.15,27.67Z" fill="#fff" filter="url(#dropshadow)" /><path d="M23.593,7.707a10.468,10.468,0,0,0-14.786,0A10.629,10.629,0,0,0,8.715,22.6,10.526,10.526,0,0,0,23.593,7.707Z" fill="#5587fd"/><path d="M16.3,7.9A5.335,5.335,0,0,0,11,13.2c0,3.8,4.8,5.8,4.8,9.4,0,.3.2.4.5.4a.458.458,0,0,0,.5-.4c0-3.5,4.8-5.5,4.8-9.4A5.271,5.271,0,0,0,16.3,7.9Z" fill="#fff"/><circle cx="16.3" cy="13.4" r="2.1" fill="#5587fd"/><rect width="32.6" height="32.6" fill="none"/></svg>

package/src/styles/commons/base.styl

@@ -1,10 +1,10 @@
 html
-	font-size: 62.5%
-	width: 100%
-	height: 100%
-	-moz-text-size-adjust: 100%
-	-webkit-text-size-adjust: 100%
-	-ms-text-size-adjust: 100%
+	font-size 62.5%
+	width 100%
+	height 100%
+	-moz-text-size-adjust 100%
+	-webkit-text-size-adjust 100%
+	-ms-text-size-adjust 100%
 
 body
 	width 100%

package/src/styles/style-next-website.styl

@@ -0,0 +1,25 @@
+// Common styles - Don't change order
+@import "./commons/reset.styl"
+
+// Specicif style - Do not change order
+// @import "./next-website/mixins.styl"
+// @import "./next-website/fonts.styl"
+// @import "./next-website/variables.styl"
+// @import "./next-website/colors.styl"
+
+@import "./commons/__all.styl"
+@import "./commons/flags.styl"
+
+// @import "./next-website/button.styl"
+// @import "./next-website/input.styl"
+// @import "./next-website/select.styl"
+// @import "./next-website/tab.sty l"
+
+//demos
+// @import "./next-website/MerchantDemo.styl"
+// @import "./next-website/skeletonDemo.styl"
+
+// @import "./next-website/style.styl"
+
+// Style of all components
+@import "../components/**/*.styl"