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

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

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

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

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

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

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

@@ -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/dist-src/components/Tabs/wrapper.js

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

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

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

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

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