@wayke-se/components-react 3.8.1 → 3.9.0-beta.1

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

@@ -1,250 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-const compassSize = size(4);
-const controlBtnSize = size(4);
-export const Wrapper = styled.div `
-  width: 100%;
-  height: 0 !important;
-  padding-bottom: 66.666% !important; // 3:2
-
-  .pnlm-container {
-    background-image: none;
-    background-color: ${(props) => props.theme.color.accentDark};
-  }
-
-  // Compass
-
-  .pnlm-compass {
-    width: ${compassSize};
-    height: ${compassSize};
-    border-radius: 50%;
-    bottom: ${size(2)};
-    left: ${size(2)};
-    right: auto;
-    margin-top: 0;
-    border: 5px solid transparent;
-    border-top-color: ${(props) => props.theme.color.textLight};
-    background-color: rgba(255, 255, 255, 0.4);
-    background-image: none;
-    backdrop-filter: blur(5px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
-
-    &:hover {
-      background-color: red;
-    }
-  }
-
-  // Controls (zoom & fullscreen button)
-
-  .pnlm-grab,
-  .pnlm-grabbing {
-    .pnlm-controls-container {
-      display: block;
-    }
-  }
-
-  .pnlm-controls-container {
-    display: none;
-    top: ${size(2)};
-    left: ${size(2)};
-  }
-
-  .pnlm-controls {
-    margin-top: 0;
-
-    & + .pnlm-controls {
-      margin-top: ${size(1)};
-    }
-  }
-
-  // Fullscreen button
-
-  .pnlm-fullscreen-toggle-button {
-    display: none;
-    position: relative;
-    width: ${controlBtnSize};
-    height: ${controlBtnSize};
-    background-image: none;
-    background-color: rgba(255, 255, 255, 0.4);
-    backdrop-filter: blur(5px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    color: ${(props) => props.theme.color.textDark};
-    border: 0;
-    border-radius: 50%;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.6);
-    }
-
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 0.875rem;
-    }
-  }
-
-  .pnlm-fullscreen-toggle-button-inactive {
-    &:before {
-      content: '⤢';
-    }
-
-    &.pnlm-fullscreen-toggle-button-active {
-      &:before {
-        content: '⤢';
-      }
-    }
-  }
-
-  // Gyroscope (Orientation)
-
-  .pnlm-orientation-button {
-    background-image: none;
-    width: ${controlBtnSize};
-    height: ${controlBtnSize};
-    background-color: ${(props) => props.theme.color.accentDark};
-    color: ${(props) => props.theme.color.textDark};
-    border: 0;
-    border-radius: 999px;
-
-    &:hover {
-      background-color: red;
-    }
-
-    &:before {
-      content: 'A';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 0.875rem;
-    }
-
-    &.pnlm-orientation-button-active {
-      background-color: green;
-
-      &:hover {
-        background-color: pink;
-      }
-    }
-  }
-
-  // Zoom controls
-
-  .pnlm-zoom-controls {
-    display: none;
-    height: auto;
-    width: auto;
-    background-color: transparent;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    border: 0;
-    border-radius: 999px;
-
-    > * {
-      &:first-child {
-        border-top-left-radius: 999px;
-        border-top-right-radius: 999px;
-      }
-
-      &:last-child {
-        border-bottom-left-radius: 999px;
-        border-bottom-right-radius: 999px;
-      }
-    }
-  }
-
-  .pnlm-zoom-in,
-  .pnlm-zoom-out {
-    position: relative;
-    display: block;
-    width: ${controlBtnSize};
-    height: ${controlBtnSize};
-    background-image: none;
-    background-color: rgba(255, 255, 255, 0.4);
-    backdrop-filter: blur(5px);
-    color: ${(props) => props.theme.color.textDark};
-    border-radius: 0;
-
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.6);
-    }
-  }
-
-  .pnlm-zoom-in {
-    top: auto;
-
-    &:before {
-      content: '+';
-    }
-  }
-
-  .pnlm-zoom-out {
-    bottom: auto;
-    border-top: 1px solid ${(props) => props.theme.color.textDark};
-
-    &:before {
-      content: '-';
-    }
-  }
-
-  // Load Button
-
-  .pnlm-load-button {
-    top: auto;
-    bottom: ${size(2)};
-    transform: translateX(-50%);
-    width: auto;
-    height: auto;
-    padding: ${size(1.75)} ${size(2)};
-    border-radius: 3px;
-    margin: 0;
-    background-color: ${(props) => props.theme.color.accentDark};
-    color: ${(props) => props.theme.color.textDark};
-    line-height: 1.1;
-    user-select: none;
-
-    &:hover {
-      background-color: ${(props) => props.theme.color.accentDark};
-    }
-
-    p {
-      margin: 0;
-      font-size: 0.875rem;
-    }
-  }
-
-  // Load box
-
-  .pnlm-load-box {
-    background-color: transparent;
-    height: auto;
-    margin: 0;
-    width: 150px;
-    transform: translate(-50%, -50%);
-
-    > p {
-      display: none;
-    }
-  }
-
-  // Load bar
-
-  .pnlm-lbar {
-    width: 100%;
-    background-color: rgba(255, 255, 255, 0.4);
-    border: 0;
-  }
-
-  .pnlm-lbar-fill {
-    background-color: ${(props) => props.theme.color.textLight};
-  }
-`;

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

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-// Adds element only visible to screen readers
-export const SrOnly = styled.div `
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-`;

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

@@ -1,23 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-export const StateIndicator = styled.div `
-  width: ${size(1)};
-  height: ${size(1)};
-  border-radius: 50%;
-
-  ${({ $tone }) => $tone === 'success'
-    ? css `
-          background-color: ${(props) => props.theme.color.ui.positive};
-        `
-    : $tone === 'pending'
-        ? css `
-          background-color: ${(props) => props.theme.color.ui.neutral};
-        `
-        : $tone === 'error'
-            ? css `
-          background-color: ${(props) => props.theme.color.ui.negative};
-        `
-            : css `
-          background-color: ${(props) => props.theme.color.textDarkLighten};
-        `}
-`;

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

@@ -1,23 +0,0 @@
-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/dist-src/components/SwitchBar/wrapper.js

@@ -1,71 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-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 `
-  display: flex;
-  align-items: center;
-`;
-export const Body = styled.div `
-  font-size: 0.875rem;
-  margin-top: ${size(1)};
-`;
-export const Info = styled.div `
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-`;
-export const Action = styled.div `
-  flex-shrink: 0;
-  padding-left: ${size(1.5)};
-  font-size: 0.875rem;
-`;
-export const InfoContent = styled.div `
-  & + & {
-    margin-left: ${size(0.75)};
-  }
-`;
-export const InfoBtn = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-})) `
-  position: relative;
-  display: block;
-
-  :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.accentDark};
-    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 Title = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
-  font-size: 1rem;
-`;

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

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

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

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

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

@@ -1,6 +0,0 @@
-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/dist-src/components/Tabs/wrapper.js

@@ -1,68 +0,0 @@
-import styled, { css } from 'styled-components';
-import { ButtonReset } from '../Button/index';
-import { size } from '../../layout/helpers';
-export const Wrapper = styled.div `
-  overflow: hidden;
-  margin-top: ${size(-1)};
-  margin-left: ${size(-1)};
-  margin-right: ${size(-1)};
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    margin-left: ${size(-2)};
-    margin-right: ${size(-2)};
-  }
-`;
-export const List = styled.ul `
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  white-space: nowrap;
-  font-size: 0;
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    padding-left: ${size(1)};
-    padding-right: ${size(1)};
-  }
-`;
-export const Item = styled.li `
-  display: inline-block;
-  vertical-align: bottom;
-  font-size: 1rem;
-`;
-export const Action = styled(ButtonReset).attrs(() => ({
-    role: 'tab',
-    className: 'wayke__theme wayke__font--bold',
-})) `
-  position: relative;
-  display: block;
-  padding: ${size(1)};
-  color: ${(props) => props.theme.color.textDarkLighten};
-
-  :hover {
-    color: ${(props) => props.theme.color.textDark};
-  }
-
-  :after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: ${size(1)};
-    right: ${size(1)};
-    height: 2px;
-    background-color: ${(props) => props.theme.color.textDark};
-    transform: scaleY(0);
-    transition: transform 200ms ease;
-    z-index: 1;
-  }
-
-  ${(props) => props.active &&
-    css `
-      color: ${(props) => props.theme.color.textDark};
-
-      :after {
-        transform: scaleY(1);
-      }
-    `}
-`;

package/dist-src/components/ThreeSixty/Rotation.js

@@ -1,95 +0,0 @@
-import React, { useState, useEffect, useRef, cloneElement, Children } from 'react';
-const calculateCurrentFrame = (startFrame, delta, length) => {
-    const frame = (startFrame + delta) % length;
-    if (frame < 0) {
-        return frame + length;
-    }
-    return frame;
-};
-const Rotation = ({ children }) => {
-    const startFrame = useRef(0);
-    const pointerPosition = useRef();
-    const max = useRef(0);
-    const [state, setState] = useState({
-        current: 0,
-        outsideMouseMove: false,
-    });
-    useEffect(() => {
-        document.addEventListener('mouseup', touchEnd);
-        return () => {
-            window.document.removeEventListener('mouseup', touchEnd);
-            window.document.body.removeEventListener('mousemove', mouseMove);
-            window.document.body.removeEventListener('mouseup', mouseUp);
-        };
-    }, []);
-    const touchMove = (event) => {
-        const notTouched = typeof pointerPosition.current !== 'number';
-        event.preventDefault();
-        if (notTouched) {
-            return;
-        }
-        const childCount = Children.count(children);
-        const { offsetWidth } = event.currentTarget;
-        const pointer = calculatePointerPosition(event);
-        const max = offsetWidth;
-        const offset = pointer - (pointerPosition.current || 0);
-        const delta = Math.floor((offset / max) * childCount);
-        setCurrentFrame(calculateCurrentFrame(startFrame.current, delta, childCount));
-    };
-    const mouseMove = (event) => {
-        const notTouched = typeof pointerPosition.current !== 'number';
-        event.preventDefault();
-        if (notTouched || !state.outsideMouseMove)
-            return;
-        const childCount = Children.count(children);
-        const pointer = calculatePointerPosition(event);
-        const offset = pointer - (pointerPosition.current || 0);
-        const delta = Math.floor((offset / max.current) * childCount);
-        setCurrentFrame(calculateCurrentFrame(startFrame.current, delta, childCount));
-    };
-    const mouseUp = () => {
-        window.document.body.removeEventListener('mousemove', mouseMove);
-        window.document.body.removeEventListener('mouseup', mouseUp);
-        pointerPosition.current = undefined;
-        startFrame.current = 0;
-    };
-    const touchStart = (event) => {
-        event.preventDefault();
-        pointerPosition.current = calculatePointerPosition(event);
-        startFrame.current = state.current;
-        const { offsetWidth } = event.currentTarget;
-        max.current = offsetWidth;
-        window.document.body.addEventListener('mousemove', mouseMove);
-        window.document.body.addEventListener('mouseup', mouseUp);
-    };
-    const touchEnd = (event) => {
-        event.preventDefault();
-        pointerPosition.current = undefined;
-        startFrame.current = 0;
-    };
-    const onMouseEnter = () => {
-        if (state.outsideMouseMove)
-            setState({ ...state, outsideMouseMove: false });
-    };
-    const onMouseLeave = () => {
-        if (!state.outsideMouseMove)
-            setState({ ...state, outsideMouseMove: true });
-    };
-    const setCurrentFrame = (current) => {
-        if (current !== state.current) {
-            setState({ ...state, current });
-        }
-    };
-    const calculatePointerPosition = (event) => {
-        const { clientX } = event.type.indexOf('touch') === 0 ? event.changedTouches[0] : event;
-        const { offsetLeft } = event.currentTarget;
-        return clientX - offsetLeft;
-    };
-    return (React.createElement("div", { onTouchStart: touchStart, onTouchMove: touchMove, onTouchEnd: touchEnd, onMouseDown: touchStart, onMouseMove: touchMove, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, Children.map(children, (child, i) => cloneElement(child, {
-        style: {
-            width: '100%',
-            display: state.current === i ? 'block' : 'none',
-        },
-    }))));
-};
-export default Rotation;

package/dist-src/components/ThreeSixty/ThreeSixtLightbox.js

@@ -1,15 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { Item, Img } from '../Lightbox/wrapper';
-import MediaButton from '../Gallery/MediaButton';
-import Rotation from './Rotation';
-const ThreeSixtyLightbox = ({ urls }) => {
-    const [started, setStarted] = useState(false);
-    const onStart = useCallback(() => setStarted(true), []);
-    if (!started) {
-        return (React.createElement(Item, null,
-            React.createElement(Img, { src: urls[0], alt: "alt" }),
-            React.createElement(MediaButton, { text: "Starta 360\u00B0 exteri\u00F6rt", onClick: onStart })));
-    }
-    return (React.createElement(Rotation, null, urls.map((image, i) => (React.createElement(Img, { key: image, src: image, alt: `Bild ${i + 1}` })))));
-};
-export default ThreeSixtyLightbox;

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Image } from '../Gallery/wrapper';
-import MediaButton from '../Gallery/MediaButton';
-import Rotation from './Rotation';
-const onMediaClick = (e, func) => {
-    e.stopPropagation();
-    e.preventDefault();
-    func();
-};
-const ThreeSixty = ({ urls, visible, onDisableNavigation, navigationDisabled }) => {
-    if (!visible || (!navigationDisabled && visible)) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Image, { src: urls[0], alt: "alt" }),
-            React.createElement(MediaButton, { text: "Starta 360\u00B0 exteri\u00F6rt", onClick: (e) => onMediaClick(e, onDisableNavigation) })));
-    }
-    if (navigationDisabled && visible) {
-        return (React.createElement("div", { onClick: (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-            } },
-            React.createElement(Rotation, null, urls.map((image, i) => (React.createElement(Image, { key: image, src: image, alt: `Bild ${i + 1}` }))))));
-    }
-    return null;
-};
-export default ThreeSixty;

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import { List, Item, Box, ItemSection, Action } from './wrapper';
-import { IconInfo } from '../Icon/index';
-const UspItem = ({ title, onClick }) => {
-    return (React.createElement(Item, null,
-        React.createElement(Box, null,
-            React.createElement(ItemSection, null, title),
-            onClick && (React.createElement(ItemSection, null,
-                React.createElement(Action, { onClick: onClick },
-                    React.createElement(IconInfo, { block: true })))))));
-};
-const UspList = ({ items, small }) => {
-    if (!items) {
-        return null;
-    }
-    return (React.createElement(List, { isSmall: small }, items.map((item, index) => (React.createElement(UspItem, { key: `${item.title}-${index}`, title: item.title, onClick: item.onClick })))));
-};
-export default UspList;