@wayke-se/components-react 3.0.0-beta.13 → 3.0.0-beta.14

package/dist-src/components/UspList/wrapper.js

@@ -0,0 +1,85 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../layout/helpers';
+import { ButtonReset } from '../Button/index';
+export const Item = styled.li `
+  padding: ${size(0.5)};
+`;
+export const Box = styled.div `
+  display: flex;
+  align-items: center;
+  background-color: ${(props) => props.theme.color.accentDark};
+  padding: ${size(1)} ${size(1.5)};
+  border-radius: 3px;
+  font-size: 0.875rem;
+  overflow-wrap: break-word;
+  hyphens: auto;
+`;
+export const ItemSection = styled.div `
+  & + & {
+    margin-left: ${size(1)};
+  }
+`;
+export const Action = styled(ButtonReset).attrs(() => ({
+    className: 'wayke__theme wayke__color--primary-text',
+})) `
+  position: relative;
+  display: block;
+  transform-origin: 50% 50%;
+  transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
+
+  :before {
+    content: '';
+    position: absolute;
+    top: ${size(-0.5)};
+    bottom: ${size(-0.5)};
+    left: ${size(-0.5)};
+    right: ${size(-0.5)};
+    background-color: ${(props) => props.theme.color.accent};
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 200ms ease;
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  :hover {
+    :before {
+      opacity: 1;
+    }
+  }
+
+  :active {
+    transform: scale(0.95);
+  }
+`;
+export const List = styled.ul `
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: ${size(-0.5)};
+
+  ${({ isSmall }) => isSmall &&
+    css `
+      margin: ${size(-0.25)};
+
+      ${Item} {
+        padding: ${size(0.25)};
+      }
+
+      ${Box} {
+        padding: ${size(0.5)} ${size(1)};
+        font-size: 0.75rem;
+      }
+
+      ${ItemSection} {
+        & + & {
+          margin-left: ${size(0.5)};
+        }
+      }
+    `}
+`;

package/dist-src/components/Utility/index.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+export const UtilityTextRight = styled.div `
+  text-align: right;
+`;
+export const UtilityFontSizeSmall = styled.span `
+  font-size: 0.875rem;
+`;
+export const UtilityTextPrimary = styled.span.attrs(() => ({
+    className: 'wayke__theme wayke__color--primary-text',
+})) ``;
+export const UtilityTextBold = styled.span.attrs(() => ({
+    className: 'wayke__theme wayke__font--bold',
+})) ``;

package/dist-src/components/Video/CustomPlayer.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Wrapper } from './wrapper';
+import Video from './Video';
+const CustomPlayer = ({ url, controls, modal, ratio = '56.25%', isPreview }) => {
+    return (React.createElement(Wrapper, { ratio: ratio, isPreview: isPreview },
+        React.createElement(Video, { key: url, modal: modal, preload: "metadata", controls: controls, width: "100%", height: "100%", src: url })));
+};
+export default CustomPlayer;

package/dist-src/components/Video/EmbeddedVideoLightbox.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import YouTubePlayer from './YoutubePlayer';
+import VimeoPlayer from './VimeoPlayer';
+import CustomPlayer from '../Video/CustomPlayer';
+const ytNames = ['youtube.com', 'youtu.be'];
+const isYouTubeVideo = (url) => ytNames.some((host) => url.indexOf(host) >= 0);
+const vNames = ['vimeo.com'];
+const isVimeoVideo = (url) => vNames.some((host) => url.indexOf(host) >= 0);
+const VideoPlayer = ({ url, autoplay = false, controls = true }) => {
+    if (!url)
+        return null;
+    if (isYouTubeVideo(url))
+        return React.createElement(YouTubePlayer, { url: url, autoplay: autoplay });
+    if (isVimeoVideo(url))
+        return React.createElement(VimeoPlayer, { url: url, autoplay: autoplay });
+    return React.createElement(CustomPlayer, { ratio: "56.25%", controls: controls, url: url });
+};
+export default VideoPlayer;

package/dist-src/components/Video/EmbededVideo.js

@@ -0,0 +1,38 @@
+import React, { useState, useCallback } from 'react';
+import useThumbnail from './useThumbnail';
+import { ImageFull } from '../Gallery/wrapper';
+import MediaButton from '../Gallery/MediaButton';
+import Modal from '../Modal/index';
+import VideoPlayer from './EmbeddedVideoLightbox';
+import { onImageLoad, onImageError } from './utils';
+import CustomPlayer from '../Video/CustomPlayer';
+const GalleryEmbed = ({ src, index }) => {
+    const [modal, setModal] = useState();
+    const thumbnail = useThumbnail(src);
+    const onClick = (e) => {
+        e.stopPropagation();
+        setModal(src);
+    };
+    const onCloseModal = (e) => {
+        e.stopPropagation();
+        setModal(undefined);
+    };
+    const onError = useCallback((e) => onImageError(e, thumbnail), [thumbnail]);
+    const onLoad = useCallback((e) => onImageLoad(e, thumbnail), [thumbnail]);
+    const customVideo = src.toLowerCase().endsWith('.mp4');
+    if (thumbnail?.length && !customVideo) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(ImageFull, { onLoad: onLoad, src: thumbnail[0], onError: onError, alt: `Bild ${index + 1}` }),
+            React.createElement(MediaButton, { text: "Spela video", onClick: onClick }),
+            modal && (React.createElement(Modal, { title: "Video", onClose: onCloseModal },
+                React.createElement(VideoPlayer, { url: modal })))));
+    }
+    if (customVideo)
+        return (React.createElement(React.Fragment, null,
+            React.createElement(CustomPlayer, { ratio: "66.66%", isPreview: true, controls: false, url: src }),
+            React.createElement(MediaButton, { text: "Spela video", onClick: onClick }),
+            modal && (React.createElement(Modal, { title: "Video", onClose: onCloseModal },
+                React.createElement(VideoPlayer, { url: modal })))));
+    return null;
+};
+export default GalleryEmbed;

package/dist-src/components/Video/QuickNavEmbeded.js

@@ -0,0 +1,17 @@
+import React, { useCallback } from 'react';
+import useThumbnail from './useThumbnail';
+import { QuickNavImg } from '../Gallery/wrapper';
+import { onImageLoad, onImageError } from './utils';
+import CustomPlayer from '../Video/CustomPlayer';
+const QuickNavEmbeded = ({ src, index }) => {
+    const thumbnail = useThumbnail(src);
+    const onError = useCallback((e) => onImageError(e, thumbnail), [thumbnail]);
+    const onLoad = useCallback((e) => onImageLoad(e, thumbnail), [thumbnail]);
+    const customVideo = src?.toLowerCase().endsWith('.mp4');
+    if (thumbnail?.length && !customVideo)
+        return (React.createElement(QuickNavImg, { onLoad: onLoad, src: thumbnail[0], onError: onError, alt: `Bild ${index + 1}` }));
+    if (customVideo)
+        return React.createElement(CustomPlayer, { key: index, url: src, ratio: "66.66%" });
+    return null;
+};
+export default QuickNavEmbeded;

package/dist-src/components/Video/QuickNavVideo.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import CustomPlayer from './CustomPlayer';
+const QuickNavVideo = ({ src, index }) => {
+    return React.createElement(CustomPlayer, { key: index, url: src, ratio: "66.666%" });
+};
+export default QuickNavVideo;

package/dist-src/components/Video/Video.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+const Video = styled.video `
+  position: absolute;
+  top: 0;
+  left: 0;
+  object-fit: ${({ modal }) => (modal ? 'contain' : 'cover')};
+`;
+export default Video;

package/dist-src/components/Video/VimeoPlayer.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { getVimeoId } from './utils';
+import { Wrapper, Iframe } from './wrapper';
+const VimeoPlayer = ({ url, autoplay }) => (React.createElement(Wrapper, null,
+    React.createElement(Iframe, { src: `https://player.vimeo.com/video/${getVimeoId(url)}?${autoplay ? '&autoplay=1' : ''}&loop=0&autopause=0` })));
+export default VimeoPlayer;

package/dist-src/components/Video/YoutubePlayer.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { getYouTubeId } from './utils';
+import { Wrapper, Iframe } from './wrapper';
+const YouTubePlayer = ({ url, autoplay }) => (React.createElement(Wrapper, null,
+    React.createElement(Iframe, { src: `https://www.youtube.com/embed/${getYouTubeId(url)}?&enablejsapi=1&?rel=0${autoplay ? '&autoplay=1' : ''}` })));
+export default YouTubePlayer;

package/dist-src/components/Video/useThumbnail.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { getVimeoId, getYoutubeThumbnail } from './utils';
+import useVimeoThumbnail from '../../hooks/useVimeoThumbnail';
+const useThumbnail = (url, small) => {
+    if (url?.toLowerCase().endsWith('.mp4'))
+        return;
+    const [thumbnail, setThumbnail] = useState();
+    const vimeoId = url ? getVimeoId(url) : undefined;
+    const vimeoThumbnail = useVimeoThumbnail(vimeoId, small);
+    useEffect(() => {
+        if (url) {
+            const youtubeThumbnail = getYoutubeThumbnail(url);
+            if (youtubeThumbnail) {
+                if (small) {
+                    setThumbnail([youtubeThumbnail.mqdefault]);
+                }
+                else {
+                    setThumbnail([youtubeThumbnail.maxresdefault, youtubeThumbnail.hqdefault]);
+                }
+            }
+        }
+    }, [url]);
+    return vimeoThumbnail ? [vimeoThumbnail] : thumbnail;
+};
+export default useThumbnail;

package/dist-src/components/Video/utils.js

@@ -0,0 +1,35 @@
+export const getVimeoId = (url) => {
+    const regExp = /\/(\d+)/;
+    const match = url.match(regExp);
+    return match && match[1].length > 3 ? match[1] : '';
+};
+export const getYouTubeId = (url) => {
+    const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
+    const match = url.match(regExp);
+    return match && match[7].length === 11 ? match[7] : '';
+};
+const youtubeBase = 'https://img.youtube.com/vi/';
+export const getYoutubeThumbnail = (url) => {
+    const id = getYouTubeId(url);
+    if (!id) {
+        return undefined;
+    }
+    return {
+        maxresdefault: `${youtubeBase}${id}/maxresdefault.jpg`,
+        hqdefault: `${youtubeBase}${id}/hqdefault.jpg`,
+        mqdefault: `${youtubeBase}${id}/mqdefault.jpg`,
+    };
+};
+export const onImageLoad = (e, thumbnail) => {
+    if (thumbnail?.length === 2 &&
+        e.currentTarget.src === thumbnail[0] &&
+        e.currentTarget.naturalWidth === 120 &&
+        e.currentTarget.naturalHeight === 90) {
+        e.currentTarget.src = thumbnail[1];
+    }
+};
+export const onImageError = (e, thumbnail) => {
+    if (thumbnail?.length === 2) {
+        e.currentTarget.src = thumbnail[1];
+    }
+};

package/dist-src/components/Video/wrapper.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+export const Wrapper = styled.div `
+  position: relative;
+  width: 100%;
+  height: ${(props) => (props.isPreview ? '100%' : 0)};
+  padding-bottom: ${(props) => (props.ratio ? props.ratio : '56.25%')};
+`;
+export const Iframe = styled.iframe.attrs(() => ({
+    width: '100%',
+    height: '100%',
+    allowFullScreen: true,
+    frameBorder: '0',
+})) `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;

package/dist-src/hooks/useFetch.js

@@ -0,0 +1,69 @@
+import { useEffect, useState, useCallback } from 'react';
+const cache = {};
+const getCachedResult = (key) => cache?.[key] || undefined;
+const setCachedResult = (key, value) => {
+    cache[key] = value;
+};
+/**
+ * Reusing already fired request by attaching to same promise.
+ * Usefull if multiple request is fetching from same endpoint, while
+ * the first request has not been finished (so no cache exist yet).
+ */
+let pendingPromise = {};
+const isPendingPromise = (url) => !!pendingPromise[url];
+const setPendingPromise = (url, promise) => {
+    pendingPromise = {
+        ...pendingPromise,
+        [url]: promise,
+    };
+};
+const clearPendingPromise = (url) => {
+    delete pendingPromise[url];
+};
+const useFetch = (path, options, skip, promiseCache) => {
+    const [data, setData] = useState();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+    const doFetch = useCallback(async () => {
+        const key = path.toString();
+        const cached = getCachedResult(key);
+        setError(false);
+        if (cached) {
+            setData(cached);
+            return;
+        }
+        setLoading(true);
+        try {
+            const reusePromise = promiseCache && isPendingPromise(key);
+            const request = reusePromise ? pendingPromise[key] : fetch(path, options);
+            if (promiseCache) {
+                setPendingPromise(key, request);
+            }
+            const result = await request;
+            if (result.ok) {
+                const json = await result.clone().json();
+                setCachedResult(key, json);
+                setData(json);
+            }
+        }
+        catch (e) {
+            setError(true);
+        }
+        finally {
+            setLoading(false);
+            clearPendingPromise(key);
+        }
+        return;
+    }, [path, options]);
+    useEffect(() => {
+        if (!skip) {
+            doFetch();
+        }
+    }, [path, skip]);
+    return {
+        loading,
+        data,
+        error,
+    };
+};
+export default useFetch;

package/dist-src/hooks/useHasBeenVisible.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+import useOnScreen from './useOnScreen';
+const useHasBeenVisible = (ref) => {
+    const isVisible = useOnScreen(ref);
+    const [hasBeenVisible, setHasBeenVisible] = useState(false);
+    useEffect(() => {
+        if (isVisible && !hasBeenVisible) {
+            setHasBeenVisible(true);
+        }
+    }, [isVisible]);
+    return hasBeenVisible;
+};
+export default useHasBeenVisible;

package/dist-src/hooks/useHashGuid.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+const regexGuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+const HASH_CHANGE = 'hashchange';
+const getGuid = () => {
+    const guid = window.location.hash.substr(1, window.location.hash.length);
+    return regexGuid.test(guid) || !guid ? guid : undefined;
+};
+const useHashGuid = () => {
+    const [id, setId] = useState(() => getGuid());
+    const onHashChange = () => {
+        const guid = window.location.hash.substr(1, window.location.hash.length);
+        if (regexGuid.test(guid) || !guid) {
+            setId(window.location.hash.substr(1, window.location.hash.length));
+        }
+        else {
+            throw 'Invalid Guid';
+        }
+    };
+    useEffect(() => {
+        onHashChange();
+        window.addEventListener(HASH_CHANGE, onHashChange);
+        return () => {
+            window.removeEventListener(HASH_CHANGE, onHashChange);
+        };
+    }, []);
+    return id;
+};
+export default useHashGuid;

package/dist-src/hooks/useInsurance.js

@@ -0,0 +1,12 @@
+import { useQuery } from '@apollo/client';
+import INSURANCE_CALCULATION from '../queries/INSURANCE_CALCULATION';
+const useInsuranceCalculation = (id, branchId, personalNumber, drivingDistance) => useQuery(INSURANCE_CALCULATION, {
+    variables: {
+        id,
+        branch: branchId,
+        personalNumber: personalNumber,
+        drivingDistance: drivingDistance,
+    },
+    skip: personalNumber === undefined || drivingDistance === undefined || branchId === undefined,
+});
+export default useInsuranceCalculation;

package/dist-src/hooks/useLoan.js

@@ -0,0 +1,12 @@
+import { useQuery } from '@apollo/client';
+import LOAN_CALCULATION from '../queries/LOAN_CALCULATION';
+const useLoanCalculation = (id, duration, downPayment, residual) => useQuery(LOAN_CALCULATION, {
+    variables: {
+        id,
+        duration: duration,
+        downPayment: downPayment,
+        residual: residual || 0,
+    },
+    skip: duration === undefined || downPayment === undefined,
+});
+export default useLoanCalculation;

package/dist-src/hooks/useOnScreen.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+const useOnScreen = (ref) => {
+    const [isIntersecting, setIntersecting] = useState(false);
+    const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting));
+    useEffect(() => {
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return isIntersecting;
+};
+export default useOnScreen;

package/dist-src/hooks/useOutsideClick.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+const useOutsideClick = (ref, callback) => {
+    const handleClick = (e) => {
+        if (ref.current && e.target && !ref.current.contains(e.target)) {
+            callback();
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('click', handleClick);
+        return () => {
+            document.removeEventListener('click', handleClick);
+        };
+    });
+};
+export default useOutsideClick;

package/dist-src/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import { useRef, useEffect } from 'react';
+const usePrevious = (value) => {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+};
+export default usePrevious;

package/dist-src/hooks/useSearchItem.js

@@ -0,0 +1,7 @@
+import { useQuery } from '@apollo/client';
+import SEARCH_ITEM_QUERY from '../queries/SEARCH_ITEM_QUERY';
+const useSearchItem = (id) => useQuery(SEARCH_ITEM_QUERY, {
+    variables: { id: id },
+    skip: !id,
+});
+export default useSearchItem;

package/dist-src/hooks/useSearchItemBranch.js

@@ -0,0 +1,7 @@
+import { useQuery } from '@apollo/client';
+import SEARCH_ITEM_BRANCH_QUERY from '../queries/SEARCH_ITEM_BRANCH_QUERY';
+const useSearchItemBranch = (id, branch) => useQuery(SEARCH_ITEM_BRANCH_QUERY, {
+    variables: { id: id, branch: branch },
+    skip: !id || !branch,
+});
+export default useSearchItemBranch;

package/dist-src/hooks/useSessionStorage.js

@@ -0,0 +1,23 @@
+import { useState, useCallback } from 'react';
+const useSessionStorage = (key) => {
+    const [value, setValue] = useState(sessionStorage.getItem(key));
+    const set = useCallback((v) => {
+        sessionStorage.setItem(key, v);
+        setValue(v);
+    }, [key]);
+    const remove = useCallback(() => {
+        sessionStorage.removeItem(key);
+        setValue(null);
+    }, [key]);
+    const clear = useCallback(() => {
+        sessionStorage.clear();
+        setValue(null);
+    }, [key]);
+    return {
+        value,
+        set,
+        remove,
+        clear,
+    };
+};
+export default useSessionStorage;

package/dist-src/hooks/useVimeoThumbnail.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import useFetch from './useFetch';
+const useVimeoThumbnail = (id, small) => {
+    const [thumbnail, setThumbnail] = useState();
+    const { data } = useFetch(`http://vimeo.com/api/v2/video/${id}.json`, {}, !id || !!thumbnail, true);
+    useEffect(() => {
+        if (data?.[0]) {
+            if (small && data[0].thumbnail_small) {
+                setThumbnail(data[0].thumbnail_small);
+            }
+            else if (data[0].thumbnail_large) {
+                setThumbnail(data[0].thumbnail_large);
+            }
+        }
+    }, [data]);
+    return thumbnail;
+};
+export default useVimeoThumbnail;

package/dist-src/index.js

@@ -0,0 +1,10 @@
+import WaykeSearch from './layouts/search/index';
+import WaykeSearchItem from './layouts/searchItem/index';
+import WaykeProvider from './providers/WaykeProvider';
+import WaykeComposite from './layouts/WaykeCompositeWithProvider';
+import SearchBar from './components/SearchBar/index';
+import WaykeThemeProvider from './providers/themeProvider';
+import WaykeItemProvider from './providers/WaykeItemProvidet';
+import WaykePubSub from './utils/pubsub/pubsub';
+export { WaykeProvider, WaykeItemProvider, WaykeSearch, WaykeSearchItem, SearchBar, WaykeThemeProvider, WaykePubSub, };
+export default WaykeComposite;

package/dist-src/layout/helpers.js

@@ -0,0 +1,5 @@
+import theme from './theme';
+export const size = (multiplier = 1) => {
+    const baseUnit = parseFloat(theme.distances.baseUnit);
+    return `${multiplier * baseUnit}px`;
+};

package/dist-src/layout/keyframes.js

@@ -0,0 +1,20 @@
+import { keyframes } from 'styled-components';
+export const noTransform = keyframes `
+    to {
+        transform: none;
+    }
+`;
+export const fadeIn = keyframes `
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+`;
+export const rotate = keyframes `
+    to {
+        transform: rotate(360deg);
+    }
+`;

package/dist-src/layout/theme.js

@@ -0,0 +1,57 @@
+const _colors = {
+    black: '#000',
+    white: '#fff',
+    gray: '#ddd',
+    grayLight: '#f8f8f8',
+    grayLightTransparent: 'rgba(248, 248, 248, 0)',
+    grayLightDarker: '#ebebeb',
+    grayDark: '#717171',
+    blue: '#1d61ca',
+    ui: {
+        greenLight: '#cdf5c8',
+        green: '#2b8747',
+        redLight: '#ffd0d0',
+        red: '#c71f1f',
+        yellowLight: '#fff4c7',
+        blueLight: '#daf7fc',
+    },
+};
+const theme = {
+    color: {
+        bg: _colors.white,
+        link: _colors.blue,
+        accent: _colors.grayLight,
+        accentTransparent: _colors.grayLightTransparent,
+        accentDark: _colors.grayLightDarker,
+        border: _colors.gray,
+        textDark: _colors.black,
+        textDarkLighten: _colors.grayDark,
+        textLight: _colors.white,
+        hoverOverlay: 'rgba(0, 0, 0, 0.04)',
+        disabledBg: _colors.gray,
+        disabledText: _colors.grayDark,
+        placeholder: _colors.grayDark,
+        ui: {
+            positiveLight: _colors.ui.greenLight,
+            positive: _colors.ui.green,
+            neutralLight: _colors.ui.yellowLight,
+            negativeLight: _colors.ui.redLight,
+            negative: _colors.ui.red,
+            infoLight: _colors.ui.blueLight,
+        },
+    },
+    breakpoint: {
+        Sm: '@media (min-width: 600px)',
+        LtSm: '@media (max-width: 599px)',
+        Md: '@media (min-width: 900px)',
+        LtMd: '@media (max-width: 899px)',
+        Lg: '@media (min-width: 1200px)',
+        LtLg: '@media (max-width: 1199px)',
+    },
+    distances: {
+        baseUnit: '8px',
+        inputHeight: '48px',
+        containerMaxWidth: '1312px',
+    },
+};
+export default theme;