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

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

@@ -1,86 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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;