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

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

@@ -0,0 +1,86 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+export const RangeSpan = styled.div `
+  display: flex;
+  align-items: center;
+  margin-top: ${size(1)};
+  user-select: none;
+`;
+export const RangeSpanItem = styled.div `
+  font-size: 0.875rem;
+  color: ${(props) => props.theme.color.textDarkLighten};
+
+  :first-child {
+    flex: 1 1 auto;
+  }
+
+  :last-child {
+    flex-shrink: 0;
+  }
+`;
+export const Slider = styled.div `
+  padding: 10px 12px;
+`;
+export const Bar = styled.div `
+  position: relative;
+  height: 4px;
+
+  :before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -12px;
+    right: -12px;
+    background-color: ${(props) => props.theme.color.accentDark};
+  }
+`;
+export const Track = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__color--primary-bg',
+})) `
+  position: absolute;
+  top: 0;
+  height: 4px;
+  margin-left: -12px;
+  margin-right: -12px;
+`;
+export const Handle = styled.div.attrs(() => ({
+    role: 'slider',
+    className: 'wayke__theme wayke__color--primary-bg',
+})) `
+  position: absolute;
+  top: 50%;
+  transform-origin: 50% 50%;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin-top: -12px;
+  margin-left: -12px;
+  border-radius: 50%;
+  cursor: move;
+  cursor: ew-resize;
+  cursor: -webkit-grab;
+  cursor: grab;
+  transition: transform 150ms ease;
+
+  :before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: 50%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+
+  :active {
+    transform: scale(1.3);
+
+    :before {
+      opacity: 1;
+    }
+  }
+`;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Wrapper, Label, Value } from './wrapper';
+const RangeSliderLabel = ({ label, value, highlight }) => (React.createElement(Wrapper, null,
+    React.createElement(Label, null, label),
+    value && React.createElement(Value, { isHighlighted: highlight }, value)));
+export default RangeSliderLabel;

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

@@ -0,0 +1,24 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../layout/helpers';
+export const Wrapper = styled.div `
+  display: flex;
+  align-items: flex-end;
+`;
+export const Label = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__font--bold',
+})) `
+  flex: 1 1 auto;
+`;
+export const Value = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__font--bold wayke__color--primary-text',
+})) `
+  flex-shrink: 0;
+  padding-left: ${size(2)};
+  font-size: 1.125rem;
+
+  ${({ isHighlighted }) => isHighlighted &&
+    css `
+      font-size: 1.375rem;
+      color: ${(props) => props.theme.color.textDark} !important;
+    `}
+`;

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

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+export const Repeat = styled.div `
+  & + & {
+    margin-top: ${size(3)};
+  }
+`;
+export const RepeatTiny = styled.div `
+  & + & {
+    margin-top: ${size(1)};
+  }
+`;
+export const RepeatSmall = styled.div `
+  & + & {
+    margin-top: ${size(2)};
+  }
+`;

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

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+import { Wrapper, Header, HeaderCount, HeaderSort, Body, Footer, FooterProgress, FooterAction, ResultCount, } from './wrapper';
+import ProgressBar from '../ProgressBar/index';
+import { ButtonSecondary, ButtonContent } from '../Button/index';
+import Loader from '../Loader/index';
+import { numberSeparator } from '../../utils/formats';
+import useSearch from '../../State/Search/useSearch';
+import SortSelect from '../SortSelect/index';
+import { getTranslatedSortOptionDisplayName } from '../../utils/sortOptions';
+const Result = ({ children }) => {
+    const { loading, response, documents, queryFilter, onLoadMore, onFilterUpdate } = useSearch();
+    const onSortOptionChange = useCallback((e) => onFilterUpdate(e.currentTarget.value), []);
+    const numberOfDocuments = documents?.length || 0;
+    const numberOfHits = response?.documentList.numberOfHits || 0;
+    const useSkeletons = !!queryFilter?.concatResult;
+    const selectedSortOption = response?.documentList.sortOptions.find((x) => x.selected)?.query;
+    const sortOptions = response?.documentList.sortOptions
+        .filter((x) => x.displayName !== 'relevance')
+        .map((so) => ({
+        value: so.query,
+        displayName: getTranslatedSortOptionDisplayName(so.displayName),
+    }));
+    if (loading && !useSkeletons) {
+        return React.createElement(Loader, null);
+    }
+    return (React.createElement(Wrapper, null,
+        React.createElement(Header, null,
+            React.createElement(HeaderCount, null,
+                React.createElement(ResultCount, null, `${numberSeparator(numberOfHits)} ${numberOfHits === 1 ? 'bil' : 'bilar'}`)),
+            sortOptions && selectedSortOption && (React.createElement(HeaderSort, null,
+                React.createElement(SortSelect, { value: selectedSortOption, options: sortOptions, onChange: onSortOptionChange })))),
+        React.createElement(Body, null, children),
+        React.createElement(Footer, null,
+            React.createElement(FooterProgress, null,
+                React.createElement(ProgressBar, { unit: "bilar", valueCurrent: numberOfDocuments, valueMax: numberOfHits })),
+            numberOfDocuments !== numberOfHits && (React.createElement(FooterAction, null,
+                React.createElement(ButtonSecondary, { disabled: loading, onClick: onLoadMore, title: "Visa fler", "aria-label": "Visa fler" },
+                    React.createElement(ButtonContent, null, "Visa fler")))))));
+};
+export default Result;

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

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+export const Wrapper = styled.div ``;
+export const Header = styled.header `
+  display: flex;
+  margin-bottom: ${size(4)};
+`;
+export const HeaderCount = styled.div `
+  flex: 1 1 auto;
+`;
+export const HeaderSort = styled.div `
+  flex-shrink: 0;
+`;
+export const Body = styled.div ``;
+export const Footer = styled.footer `
+  margin-top: ${size(8)};
+  text-align: center;
+`;
+export const FooterProgress = styled.div `
+  max-width: 175px;
+  margin: 0 auto;
+`;
+export const FooterAction = styled.div `
+  margin-top: ${size(3)};
+`;
+export const ResultCount = styled.div `
+  color: ${(props) => props.theme.color.textDarkLighten};
+  font-size: 0.875rem;
+`;

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+const Root = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__font--regular',
+})) `
+  background-color: ${(props) => props.theme.color.bg};
+  color: ${(props) => props.theme.color.textDark};
+  font-size: 1rem;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
+  a img {
+    border: 0;
+  }
+`;
+export default Root;

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

@@ -0,0 +1,18 @@
+import React, { useCallback, useRef } from 'react';
+import InputSearch from '../InputSearch/index';
+import useOutsideClick from '../../hooks/useOutsideClick';
+const SearchBar = ({ value, setValue, onSearch }) => {
+    const ref = useRef(null);
+    const onChange = useCallback((e) => setValue(e.currentTarget.value), []);
+    useOutsideClick(ref, () => setValue(''));
+    const _onSearch = useCallback(() => {
+        onSearch(value);
+    }, [value]);
+    const onKeyDown = useCallback((e) => {
+        if (e.keyCode === 13) {
+            _onSearch();
+        }
+    }, [value, _onSearch]);
+    return (React.createElement(InputSearch, { ref: ref, value: value, onChange: onChange, onKeyDown: onKeyDown, onSearch: _onSearch, placeholder: "S\u00F6k", label: "S\u00F6k", id: "main-search" }));
+};
+export default SearchBar;

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

@@ -0,0 +1,23 @@
+import React, { useCallback, useState } from 'react';
+import useSearch from '../../State/Search/useSearch';
+import SearchBar from '../SearchBar/index';
+const SearchFilter = () => {
+    const [value, setValue] = useState('');
+    const { queryFilter, onFilterUpdate } = useSearch();
+    const onSearch = useCallback((value) => {
+        const nextQuery = new URLSearchParams(queryFilter.searchParams);
+        if (value === nextQuery.get('query')) {
+            return;
+        }
+        if (value) {
+            nextQuery.set('query', value);
+        }
+        else {
+            nextQuery.delete('qquery');
+        }
+        onFilterUpdate(nextQuery.toString());
+        setValue('');
+    }, [queryFilter]);
+    return React.createElement(SearchBar, { value: value, setValue: setValue, onSearch: onSearch });
+};
+export default SearchFilter;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Wrapper, Query, Clear } from './wrapper';
+import { IconCancel } from '../Icon/index';
+const SearchTerm = ({ children, onClear, clearTitle }) => (React.createElement(Wrapper, null,
+    React.createElement(Query, null, children),
+    onClear && (React.createElement(Clear, { onClick: onClear, title: clearTitle ? clearTitle : 'Rensa fritext' },
+        React.createElement(IconCancel, { block: true })))));
+export default SearchTerm;

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

@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+import { ButtonReset } from '../Button/index';
+export const Wrapper = styled.div `
+  display: flex;
+  align-items: center;
+`;
+export const Query = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__font--bold',
+})) `
+  font-size: 2.25rem;
+  min-width: 0;
+  overflow-wrap: break-word;
+  hyphens: auto;
+
+  :before,
+  :after {
+    content: '"';
+  }
+`;
+export const Clear = styled(ButtonReset) `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${size(2)};
+  height: ${size(2)};
+  border-radius: 50%;
+  background-color: ${(props) => props.theme.color.accentDark};
+  margin-left: ${size(1)};
+  font-size: ${size(1)};
+  transform-origin: 50% 50%;
+  transition: transform 150ms ease;
+
+  :before {
+    content: '';
+    position: absolute;
+    top: ${size(-1)};
+    bottom: ${size(-1)};
+    left: ${size(-1)};
+    right: ${size(-1)};
+    border-radius: 50%;
+  }
+
+  :after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: ${(props) => props.theme.color.hoverOverlay};
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+
+  :hover {
+    :after {
+      opacity: 1;
+    }
+  }
+
+  :active {
+    transform: scale(0.95);
+  }
+`;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Wrapper, Heading, Action } from './wrapper';
+import { ButtonClear, ButtonContent } from '../Button/index';
+const SectionHeader = ({ children, onClick, actionTitle }) => (React.createElement(Wrapper, null,
+    React.createElement(Heading, null, children),
+    onClick && actionTitle && (React.createElement(Action, null,
+        React.createElement(ButtonClear, { as: "a", href: "#", onClick: onClick },
+            React.createElement(ButtonContent, null, actionTitle))))));
+export default SectionHeader;

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

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+export const Wrapper = styled.div `
+  display: flex;
+  align-items: center;
+`;
+export const Heading = styled.div `
+  flex: 1 1 auto;
+`;
+export const Action = styled.div `
+  flex-shrink: 0;
+  padding-left: ${size(2)};
+`;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Wrapper, Icon, Content, Heading, Message } from './wrapper';
+import { IconCheck, IconInfo, IconExclamationCircle, IconExclamationTriangle } from '../Icon/index';
+const Snackbar = ({ severity, icon, heading, children }) => {
+    let iconSelector = React.createElement(IconInfo, { block: true });
+    if (severity === 'error') {
+        iconSelector = React.createElement(IconExclamationCircle, { block: true });
+    }
+    else if (severity === 'warning') {
+        iconSelector = React.createElement(IconExclamationTriangle, { block: true });
+    }
+    else if (severity === 'success') {
+        iconSelector = React.createElement(IconCheck, { block: true });
+    }
+    return (React.createElement(Wrapper, { severity: severity },
+        icon && React.createElement(Icon, null, iconSelector),
+        React.createElement(Content, null,
+            heading && React.createElement(Heading, null, heading),
+            React.createElement(Message, null, children))));
+};
+export default Snackbar;

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

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+import theme from '../../layout/theme';
+const getSnackbarBg = (severity) => {
+    let bg = theme.color.accent;
+    if (severity === 'error') {
+        bg = theme.color.ui.negativeLight;
+    }
+    else if (severity === 'warning') {
+        bg = theme.color.ui.neutralLight;
+    }
+    else if (severity === 'info') {
+        bg = theme.color.ui.infoLight;
+    }
+    else if (severity === 'success') {
+        bg = theme.color.ui.positiveLight;
+    }
+    return bg;
+};
+export const Wrapper = styled.div.attrs(() => ({
+    role: 'alert',
+})) `
+  display: flex;
+  align-items: center;
+  padding: ${size(1.5)} ${size(2)};
+  background-color: ${(props) => getSnackbarBg(props.severity)};
+  color: ${(props) => props.theme.color.textDark};
+  border-radius: 3px;
+`;
+export const Icon = styled.div `
+  flex-shrink: 0;
+  padding-right: ${size(2)};
+  font-size: ${size(3)};
+
+  > svg {
+    display: block;
+  }
+`;
+export const Content = styled.div `
+  flex: 1 1 auto;
+  font-size: 1rem;
+`;
+export const Heading = styled.div `
+  font-weight: 700;
+`;
+export const Message = styled.div `
+  > * {
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Wrapper, Select, Option, Icon } from './wrapper';
+import { IconChevronDown } from '../Icon/index';
+const SortSelect = ({ value, options, onChange, unit }) => (React.createElement(Wrapper, null,
+    React.createElement(Select, { value: value, onChange: onChange, title: "Sortering", "aria-label": "Sortering" }, options.map((option) => (React.createElement(Option, { key: option.value, value: option.value },
+        option.displayName || option.value,
+        unit ? ` ${unit}` : '')))),
+    React.createElement(Icon, null,
+        React.createElement(IconChevronDown, { block: true }))));
+export default SortSelect;

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

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+const iconSize = '0.875rem';
+export const Wrapper = styled.div `
+  position: relative;
+`;
+export const Select = styled.select.attrs(() => ({
+    className: 'wayke__theme wayke__font--regular',
+})) `
+  position: relative;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  text-indent: 0.01px;
+  border: 0;
+  padding: 0;
+  padding-right: calc(${iconSize} + ${size(1)});
+  background-color: transparent;
+  color: ${(props) => props.theme.color.textDark};
+  border-radius: 0;
+  font-size: 16px;
+  cursor: pointer;
+  z-index: 1;
+
+  :focus {
+    outline: none;
+    text-decoration: underline;
+  }
+
+  ::-ms-expand {
+    display: none;
+  }
+
+  ::-moz-focus-inner {
+    border: 0;
+  }
+`;
+export const Option = styled.option `
+  color: ${(props) => props.theme.color.textDark};
+`;
+export const Icon = styled.div `
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  font-size: ${iconSize};
+`;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import SphereViewer from './SphereViewer';
+import { ImageFull } from '../Gallery/wrapper';
+import MediaButton from '../Gallery/MediaButton';
+const onMediaClick = (e, func) => {
+    e.stopPropagation();
+    e.preventDefault();
+    func();
+};
+const Sphere = ({ url, preview, visible, onDisableNavigation, navigationDisabled }) => {
+    if (!visible || (!navigationDisabled && visible)) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(ImageFull, { src: preview, alt: "alt" }),
+            React.createElement(MediaButton, { text: "Starta 360\u00B0 interi\u00F6rt", onClick: (e) => onMediaClick(e, onDisableNavigation) })));
+    }
+    if (navigationDisabled && visible) {
+        return (React.createElement(SphereViewer, { id: url, preview: url, src: url, autoLoad: true, onStart: onDisableNavigation }));
+    }
+    return null;
+};
+export default Sphere;

package/dist-src/components/Sphere/SphereLightbox.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import SphereViewer from './SphereViewer';
+const SphereLightbox = ({ url }) => React.createElement(SphereViewer, { id: url, src: url, preview: url });
+export default SphereLightbox;

package/dist-src/components/Sphere/SphereViewer.js

@@ -0,0 +1,54 @@
+import React, { lazy, useState, useEffect } from 'react';
+import { Wrapper } from './wrapper';
+import Loader from '../Loader/index';
+const ReactPannellum = lazy(() => import('react-pannellum'));
+const config = {
+    type: 'equirectangular',
+    autoRotate: -2,
+    autoLoad: true,
+    uiText: {
+        bylineLabel: 'by %s',
+        noPanoramaError: 'No panorama image was specified.',
+        fileAccessError: 'The file %s could not be accessed.',
+        malformedURLError: 'There is something wrong with the panorama URL.',
+        iOS8WebGLError: "Due to iOS 8's broken WebGL implementation, only progressive encoded JPEGs work for your device (this panorama uses standard encoding).",
+        genericWebGLError: 'Your browser does not have the necessary WebGL support to display this panorama.',
+        textureSizeError: "This panorama is too big for your device! It's %spx wide, but your device only supports images up to %spx wide. Try another device. (If you're the author, try scaling down the image.)",
+        unknownError: 'Unknown error. Check developer console.',
+        loadButtonLabel: 'Starta 360° interiört',
+        loadingLabel: 'Laddar...',
+    },
+    preview: '/images/placeholders/placeholder_product_card.jpg',
+    compass: true,
+    showZoomCtrl: true,
+    keyboardZoom: false,
+    mouseZoom: false,
+    hfov: 180,
+};
+const style = {
+    height: 0,
+    width: '100%',
+    paddingBottom: '66.666%',
+    touchAction: 'manipulation',
+};
+const SphereViewer = ({ id, src, preview, autoLoad, onStart }) => {
+    const [number] = useState(Math.floor(100000000 + Math.random() * 900000000));
+    useEffect(() => {
+        setTimeout(() => {
+            if (onStart) {
+                const startBtn = document.querySelector('.pnlm-load-button');
+                if (startBtn)
+                    startBtn.addEventListener('click', onStart);
+            }
+        }, 100);
+    }, []);
+    const c = {
+        ...config,
+        preview,
+        autoLoad,
+    };
+    return (React.createElement(Wrapper, null,
+        React.createElement(React.Suspense, { fallback: React.createElement(Loader, null) },
+            React.createElement(ReactPannellum, { id: `a-${id}-${number}`, sceneId: src, imageSource: src, config: c, style: style }))));
+};
+export default SphereViewer;