@wayke-se/components-react 3.0.0-beta.6 → 3.0.0-beta.8

package/{src/components/Root/index.tsx → dist-src/components/Root/index.js}

@@ -1,8 +1,7 @@
 import styled from 'styled-components';
-
 const Root = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__font--regular',
-}))`
+    className: 'wayke__theme wayke__font--regular',
+})) `
   background-color: ${(props) => props.theme.color.bg};
   color: ${(props) => props.theme.color.textDark};
   font-size: 1rem;
@@ -20,5 +19,4 @@ const Root = styled.div.attrs(() => ({
     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/{src/components/SearchTerm/wrapper.tsx → dist-src/components/SearchTerm/wrapper.js}

@@ -1,16 +1,13 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-
-export const Wrapper = styled.div`
+export const Wrapper = styled.div `
   display: flex;
   align-items: center;
 `;
-
 export const Query = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))`
+    className: 'wayke__theme wayke__font--bold',
+})) `
   font-size: 2.25rem;
   min-width: 0;
   overflow-wrap: break-word;
@@ -21,8 +18,7 @@ export const Query = styled.div.attrs(() => ({
     content: '"';
   }
 `;
-
-export const Clear = styled(ButtonReset)`
+export const Clear = styled(ButtonReset) `
   position: relative;
   display: flex;
   align-items: center;

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/{src/components/SectionHeader/wrapper.tsx → dist-src/components/SectionHeader/wrapper.js}

@@ -1,17 +1,13 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div`
+export const Wrapper = styled.div `
   display: flex;
   align-items: center;
 `;
-
-export const Heading = styled.div`
+export const Heading = styled.div `
   flex: 1 1 auto;
 `;
-
-export const Action = styled.div`
+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/{src/components/SortSelect/wrapper.tsx → dist-src/components/SortSelect/wrapper.js}

@@ -1,16 +1,12 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
 const iconSize = '0.875rem';
-
-export const Wrapper = styled.div`
+export const Wrapper = styled.div `
   position: relative;
 `;
-
 export const Select = styled.select.attrs(() => ({
-  className: 'wayke__theme wayke__font--regular',
-}))`
+    className: 'wayke__theme wayke__font--regular',
+})) `
   position: relative;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -40,12 +36,10 @@ export const Select = styled.select.attrs(() => ({
     border: 0;
   }
 `;
-
-export const Option = styled.option`
+export const Option = styled.option `
   color: ${(props) => props.theme.color.textDark};
 `;
-
-export const Icon = styled.div`
+export const Icon = styled.div `
   position: absolute;
   top: 50%;
   right: 0;

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;

package/{src/components/Sphere/wrapper.tsx → dist-src/components/Sphere/wrapper.js}

@@ -1,19 +1,13 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
 const compassSize = size(4);
 const controlBtnSize = size(4);
-
-export const Wrapper = styled.div`
-  position: relative;
+export const Wrapper = styled.div `
   width: 100%;
   height: 0 !important;
   padding-bottom: 66.666% !important; // 3:2
 
   .pnlm-container {
-    position: absolute;
-    height: 100% !important;
     background-image: none;
     background-color: ${(props) => props.theme.color.accentDark};
   }

package/{src/components/SrOnly/index.tsx → dist-src/components/SrOnly/index.js}

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
-
 // Adds element only visible to screen readers
-export const SrOnly = styled.div`
+export const SrOnly = styled.div `
   position: absolute;
   width: 1px;
   height: 1px;

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

@@ -0,0 +1,23 @@
+import React, { useState, useCallback } from 'react';
+import { Wrapper, Header, Body, Info, Action, InfoContent, InfoBtn, Title } from './wrapper';
+import Modal from '../Modal/index';
+import { ButtonInline } from '../Button/index';
+import { IconInfo } from '../Icon/index';
+const SwitchBar = ({ title, body, actionTitle, children, onClick }) => {
+    const [info, setInfo] = useState(false);
+    const onToggleInfo = useCallback(() => setInfo(!info), [info]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Wrapper, null,
+            React.createElement(Header, null,
+                React.createElement(Info, null,
+                    React.createElement(InfoContent, null,
+                        React.createElement(Title, null, title)),
+                    children && (React.createElement(InfoContent, null,
+                        React.createElement(InfoBtn, { onClick: onToggleInfo, title: "Mer information" },
+                            React.createElement(IconInfo, { block: true }))))),
+                actionTitle && (React.createElement(Action, null,
+                    React.createElement(ButtonInline, { onClick: onClick, title: actionTitle }, actionTitle)))),
+            body && React.createElement(Body, null, body)),
+        info && (React.createElement(Modal, { title: title, onClose: onToggleInfo }, children))));
+};
+export default SwitchBar;

package/{src/components/SwitchBar/wrapper.tsx → dist-src/components/SwitchBar/wrapper.js}

@@ -1,46 +1,38 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-
-export const Wrapper = styled.div`
+export const Wrapper = styled.div `
   padding: ${size(1.5)} ${size(2)};
   background-color: ${(props) => props.theme.color.accentDark};
   border-radius: 3px;
   font-size: 0.875rem;
 `;
-
-export const Header = styled.div`
+export const Header = styled.div `
   display: flex;
   align-items: center;
 `;
-
-export const Body = styled.div`
+export const Body = styled.div `
   font-size: 0.875rem;
   margin-top: ${size(1)};
 `;
-
-export const Info = styled.div`
+export const Info = styled.div `
   flex: 1 1 auto;
   display: flex;
   align-items: center;
 `;
-
-export const Action = styled.div`
+export const Action = styled.div `
   flex-shrink: 0;
   padding-left: ${size(1.5)};
   font-size: 0.875rem;
 `;
-
-export const InfoContent = styled.div`
+export const InfoContent = styled.div `
   & + & {
     margin-left: ${size(0.75)};
   }
 `;
-
 export const InfoBtn = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))`
+    className: 'wayke__theme wayke__color--primary-text',
+})) `
   position: relative;
   display: block;
 
@@ -72,9 +64,8 @@ export const InfoBtn = styled(ButtonReset).attrs(() => ({
     transform: scale(0.95);
   }
 `;
-
 export const Title = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))`
+    className: 'wayke__theme wayke__font--bold',
+})) `
   font-size: 1rem;
 `;

package/{src/components/TableColumn/index.tsx → dist-src/components/TableColumn/index.js}

@@ -1,18 +1,14 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const TableColumn = styled.div`
+export const TableColumn = styled.div `
   line-height: 1.2;
 `;
-
-export const TableColumnRow = styled.div`
+export const TableColumnRow = styled.div `
   display: flex;
   align-items: flex-start;
   margin: ${size(-1)};
 `;
-
-export const TableColumnCell = styled.div`
+export const TableColumnCell = styled.div `
   flex: 1 0 50%;
   padding: ${size(1)};
 `;

package/{src/components/TableList/index.tsx → dist-src/components/TableList/index.js}

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const TableList = styled.ul`
+export const TableList = styled.ul `
   list-style: none;
   padding: 0;
   margin: 0;
@@ -10,8 +8,7 @@ export const TableList = styled.ul`
   border-bottom: 1px solid ${(props) => props.theme.color.border};
   font-size: 0.875rem;
 `;
-
-export const TableListItem = styled.li`
+export const TableListItem = styled.li `
   display: flex;
   align-items: center;
   padding: ${size(1)} 0;
@@ -20,20 +17,16 @@ export const TableListItem = styled.li`
     border-top: 1px solid ${(props) => props.theme.color.border};
   }
 `;
-
-export const TableListKey = styled.div`
+export const TableListKey = styled.div `
   flex: 1 1 auto;
 `;
-
-export const TableListValue = styled.div`
+export const TableListValue = styled.div `
   flex-shrink: 0;
   padding-left: ${size(1)};
 `;
-
-export const TableListBooleanPos = styled.div`
+export const TableListBooleanPos = styled.div `
   color: ${(props) => props.theme.color.ui.positive};
 `;
-
-export const TableListBooleanNeg = styled.div`
+export const TableListBooleanNeg = styled.div `
   color: ${(props) => props.theme.color.ui.negative};
 `;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Action, Item, List, Wrapper } from './wrapper';
+const Tabs = ({ tabs, active, onClick }) => (React.createElement(Wrapper, null,
+    React.createElement(List, null, tabs.map((tab) => (React.createElement(Item, { key: tab.name },
+        React.createElement(Action, { title: tab.displayName, onClick: onClick ? () => onClick(tab.name) : undefined, active: tab.name === active ? 'true' : undefined }, tab.displayName)))))));
+export default Tabs;

package/{src/components/Tabs/wrapper.tsx → dist-src/components/Tabs/wrapper.js}

@@ -1,10 +1,7 @@
-import * as React from 'react';
 import styled, { css } from 'styled-components';
-
 import { ButtonReset } from '../Button/index';
 import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div`
+export const Wrapper = styled.div `
   overflow: hidden;
   margin-top: ${size(-1)};
   margin-left: ${size(-1)};
@@ -15,8 +12,7 @@ export const Wrapper = styled.div`
     margin-right: ${size(-2)};
   }
 `;
-
-export const List = styled.ul`
+export const List = styled.ul `
   list-style: none;
   padding: 0;
   margin: 0;
@@ -30,24 +26,15 @@ export const List = styled.ul`
     padding-right: ${size(1)};
   }
 `;
-
-export const Item = styled.li`
+export const Item = styled.li `
   display: inline-block;
   vertical-align: bottom;
   font-size: 1rem;
 `;
-
-type ActionProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
-> & {
-  active?: boolean | string;
-};
-
 export const Action = styled(ButtonReset).attrs(() => ({
-  role: 'tab',
-  className: 'wayke__theme wayke__font--bold',
-}))<ActionProps>`
+    role: 'tab',
+    className: 'wayke__theme wayke__font--bold',
+})) `
   position: relative;
   display: block;
   padding: ${size(1)};
@@ -70,9 +57,8 @@ export const Action = styled(ButtonReset).attrs(() => ({
     z-index: 1;
   }
 
-  ${(props) =>
-    props.active &&
-    css`
+  ${(props) => props.active &&
+    css `
       color: ${(props) => props.theme.color.textDark};
 
       :after {