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

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Spinner, Wrapper } from './wrapper';
+import { SrOnly } from '../SrOnly/index';
+const Loader = ({ inline, center }) => (React.createElement(Wrapper, { inline: inline, center: center },
+    React.createElement(Spinner, { "aria-hidden": "true" }),
+    React.createElement(SrOnly, null, "Laddar...")));
+export default Loader;

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

@@ -0,0 +1,37 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../layout/helpers';
+import { rotate } from '../../layout/keyframes';
+export const Spinner = styled.div `
+  display: block;
+  margin: 0 auto;
+  width: ${size(4)};
+  height: ${size(4)};
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  animation: ${rotate} 600ms linear infinite;
+`;
+export const Wrapper = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__color--primary-text',
+    role: 'status',
+})) `
+  ${({ inline }) => inline &&
+    css `
+      display: inline-block;
+      vertical-align: middle;
+      color: currentColor !important;
+
+      ${Spinner} {
+        width: 1em;
+        height: 1em;
+      }
+    `}
+
+  ${({ center }) => center &&
+    css `
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    `}
+`;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Logo } from './wrapper';
+const LogoBox = ({ logo, logo2x, alt, wide }) => {
+    let logoRetina = logo;
+    if (logo2x) {
+        logoRetina = `${logo2x} 2x`;
+    }
+    return React.createElement(Logo, { src: logo, srcSet: logoRetina, alt: alt, wide: wide });
+};
+export default LogoBox;

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

@@ -0,0 +1,12 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../layout/helpers';
+export const Logo = styled.img `
+  display: block;
+  max-width: ${size(9.5)};
+  max-height: ${size(6)};
+
+  ${({ wide }) => wide &&
+    css `
+      max-width: ${size(20)};
+    `}
+`;

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

@@ -0,0 +1,27 @@
+import React, { useState, useCallback } from 'react';
+import useSettings from '../../State/Settings/useSettings';
+import { Wrapper, Image, Placeholder, PlaceholderAction } from './wrapper';
+import { ButtonSecondary, ButtonContent } from '../Button/index';
+const StaticMap = ({ position }) => {
+    const { googleMapsApiKey, googleMapsMarker } = useSettings();
+    const [visible, setVisible] = useState(false);
+    const onShowMap = useCallback((e) => {
+        if (googleMapsApiKey) {
+            e.preventDefault();
+            setVisible(true);
+        }
+    }, []);
+    if (!position) {
+        return null;
+    }
+    const { latitude, longitude } = position;
+    if (visible && googleMapsApiKey) {
+        return (React.createElement(Wrapper, { href: `http://maps.google.com/maps?q=${latitude},${longitude}`, title: "Visa p\u00E5 Google Maps", target: "_blank", rel: "nofollow noopener noreferrer" },
+            React.createElement(Image, { src: `https://maps.googleapis.com/maps/api/staticmap?center=${latitude},${longitude}&zoom=10&size=640x280&maptype=roadmap&markers=${googleMapsMarker ? `icon:${encodeURIComponent(googleMapsMarker)}` : ''}%7C${latitude},${longitude}&key=${googleMapsApiKey}`, alt: "Karta" })));
+    }
+    return (React.createElement(Placeholder, { href: `http://maps.google.com/maps?q=${latitude},${longitude}`, target: "_blank", rel: "noopener noreferrer nofollow", onClick: onShowMap },
+        React.createElement(PlaceholderAction, null,
+            React.createElement(ButtonSecondary, { as: "div" },
+                React.createElement(ButtonContent, null, "Visa karta")))));
+};
+export default StaticMap;

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

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+export const Wrapper = styled.a `
+  display: block;
+`;
+export const Image = styled.img `
+  display: block;
+  width: 100%;
+  border-radius: 3px;
+`;
+export const Placeholder = styled.a `
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 43.75%; // Proportions of Google Static Map (640x280)
+  background-image: linear-gradient(-15deg, #dfe4ce, #c1d6ea, #dfe4ce);
+  border-radius: 3px;
+  color: ${(props) => props.theme.color.textDark};
+`;
+export const PlaceholderAction = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Portal, PortalNamespace } from '../Portal/index';
+import { H1 } from '../Heading/index';
+import { IconCancel } from '../Icon/index';
+import { Body, Content, Dialog, Header, Heading, UiBlock, Wrapper, Close, CloseBtn, } from './wrapper';
+const Modal = ({ id, title, onClose, children }) => {
+    return (React.createElement(Portal, { id: id || PortalNamespace.DefaultPortal },
+        React.createElement(Wrapper, { onClick: (e) => e.stopPropagation() },
+            React.createElement(UiBlock, { onClick: onClose, title: "St\u00E4ng modal" }),
+            React.createElement(Dialog, null,
+                React.createElement(Content, null,
+                    React.createElement(Header, null,
+                        React.createElement(Heading, null,
+                            React.createElement(H1, { noMargin: true }, title)),
+                        React.createElement(Close, null,
+                            React.createElement(CloseBtn, { onClick: onClose, title: "St\u00E4ng modal" },
+                                React.createElement(IconCancel, { block: true })))),
+                    React.createElement(Body, null, children))))));
+};
+export default Modal;

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

@@ -0,0 +1,113 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+import { fadeIn, noTransform } from '../../layout/keyframes';
+import { ButtonReset } from '../Button/index';
+import { H1 } from '../Heading/index';
+export const Wrapper = styled.div.attrs(() => ({
+    role: 'dialog',
+})) `
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  white-space: normal;
+  text-align: left;
+  z-index: 90;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${(props) => props.theme.breakpoint.Sm} {
+    padding: ${size(2)};
+  }
+`;
+export const UiBlock = styled.div.attrs(() => ({
+    'aria-hidden': 'true',
+    role: 'button',
+})) `
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.35);
+  z-index: -1;
+
+  ${(props) => props.theme.breakpoint.LtMd} {
+    animation: ${fadeIn} 300ms ease forwards;
+  }
+
+  ${(props) => props.theme.breakpoint.Md} {
+    animation: ${fadeIn} 400ms ease forwards;
+  }
+`;
+export const Dialog = styled.article.attrs(() => ({
+    className: 'wayke__theme wayke__font--regular',
+})) `
+  display: flex;
+  flex-direction: column;
+  background-color: ${(props) => props.theme.color.bg};
+  z-index: 1;
+  width: 100%;
+  max-width: 680px;
+  max-height: 100%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+
+  ${(props) => props.theme.breakpoint.LtSm} {
+    align-self: flex-end;
+    transform: translateY(100%);
+    animation: ${noTransform} 300ms ease forwards;
+  }
+
+  ${(props) => props.theme.breakpoint.Sm} {
+    transform: translateY(${size(2)});
+    animation: ${fadeIn} 400ms ease, ${noTransform} 400ms ease forwards;
+  }
+`;
+export const Content = styled.div `
+  flex: 1 1 auto;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+`;
+export const Header = styled.header `
+  display: flex;
+  align-items: center;
+  min-height: 60px;
+  padding: ${size(3)};
+  padding-bottom: 0;
+`;
+export const Heading = styled.div `
+  flex: 1 1 auto;
+
+  ${H1} {
+    font-size: 1.5rem;
+  }
+`;
+export const Close = styled.div `
+  flex-shrink: 0;
+  margin: ${size(-2)};
+  padding-left: ${size(3)};
+`;
+export const CloseBtn = styled(ButtonReset) `
+  display: block;
+  padding: ${size(2)};
+`;
+export const Body = styled.div `
+  padding: ${size(3)};
+`;
+export const Image = styled.img `
+  display: block;
+  width: calc(100% + ${size(6)});
+  margin-left: ${size(-3)};
+  margin-bottom: ${size(3)};
+`;
+export const ModalFoldout = styled.div `
+  background-color: ${(props) => props.theme.color.accent};
+  margin: ${size(-3)};
+  margin-top: ${size(3)};
+  padding: ${size(3)};
+`;
+export const ModalFoldoutBody = styled.div ``;

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

@@ -0,0 +1,97 @@
+import React, { useMemo } from 'react';
+import { RepeatSmall } from '../Repeat/index';
+import Badge from '../Badge/index';
+import { TableColumn, TableColumnRow, TableColumnCell } from '../TableColumn/index';
+import { UtilityTextBold } from '../Utility/index';
+const KeyOrder = [
+    'monday',
+    'tuesday',
+    'wednesday',
+    'thursday',
+    'friday',
+    'saturday',
+    'sunday',
+];
+const TranslateWeekDays = (d) => {
+    switch (d) {
+        case 'monday':
+            return 'Mån';
+        case 'tuesday':
+            return 'Tis';
+        case 'wednesday':
+            return 'Ons';
+        case 'thursday':
+            return 'Tor';
+        case 'friday':
+            return 'Fre';
+        case 'saturday':
+            return 'Lör';
+        case 'sunday':
+            return 'Sön';
+    }
+};
+const arr = [];
+const GetOpeningHours = (o) => KeyOrder.reduce((prev, current) => {
+    const title = TranslateWeekDays(current);
+    const item = o[current];
+    const previous = prev?.[prev.length - 1];
+    if (previous && previous.from == item?.from && previous.until === item?.until) {
+        prev[prev.length - 1].titleTo = title;
+    }
+    else {
+        prev.push({
+            titleFrom: title,
+            from: item?.from,
+            until: item?.until,
+        });
+    }
+    return prev;
+}, arr.slice());
+const GetOpeningHoursToday = (o) => {
+    const dayNumber = new Date().getDay();
+    const day = KeyOrder[dayNumber === 0 ? 6 : dayNumber - 1];
+    const current = o[day];
+    return {
+        title: current ? 'Öppetider idag' : 'Stängt idag',
+        from: current?.from,
+        until: current?.until,
+    };
+};
+const valuOfDateString = (s) => {
+    const splitted = s.split(':').map((x) => parseInt(x, 10));
+    return new Date().setHours(splitted[0], splitted[1]).valueOf();
+};
+const OpeningHours = ({ openingHours }) => {
+    const today = useMemo(() => (openingHours ? GetOpeningHoursToday(openingHours) : null), [openingHours]);
+    const currentlyOpen = useMemo(() => {
+        try {
+            if (today?.from && today?.until) {
+                const currentDate = new Date().valueOf();
+                const from = valuOfDateString(today.from);
+                const until = valuOfDateString(today.until);
+                return currentDate >= from && currentDate <= until;
+            }
+        }
+        catch (e) {
+            return false;
+        }
+    }, [today]);
+    const oh = useMemo(() => (openingHours ? GetOpeningHours(openingHours) : null), [openingHours]);
+    if (!oh) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(RepeatSmall, null,
+            React.createElement(Badge, { label: currentlyOpen ? 'Öppet' : 'Stängt', severity: currentlyOpen ? 'positive' : 'negative' })),
+        React.createElement(RepeatSmall, null,
+            React.createElement(TableColumn, null,
+                React.createElement(TableColumnRow, null,
+                    React.createElement(TableColumnCell, null,
+                        React.createElement(UtilityTextBold, null, today?.title)),
+                    React.createElement(TableColumnCell, null,
+                        React.createElement(UtilityTextBold, null, today?.from ? `${today.from}-${today.until}` : 'Stängt'))),
+                oh.map((o) => (React.createElement(TableColumnRow, { key: o.titleFrom },
+                    React.createElement(TableColumnCell, null, o.titleTo ? `${o.titleFrom}-${o.titleTo}` : o.titleFrom),
+                    React.createElement(TableColumnCell, null, o.from ? `${o.from}-${o.until}` : 'Stängt'))))))));
+};
+export default OpeningHours;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Logo, LogoImg, Content, Wrapper } from './wrapper';
+const OptionBox = ({ logo, logo2x, logoAlt, children }) => (React.createElement(Wrapper, null,
+    logo && (React.createElement(Logo, null,
+        React.createElement(LogoImg, { src: logo, srcSet: logo2x, alt: logoAlt }))),
+    React.createElement(Content, null, children)));
+export default OptionBox;

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

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+export const Wrapper = styled.div `
+  display: flex;
+  align-items: center;
+  padding: ${size(1)};
+  border: 1px solid ${(props) => props.theme.color.border};
+  border-radius: 3px;
+
+  & + & {
+    margin-top: ${size(1)};
+  }
+`;
+export const Logo = styled.div `
+  position: relative;
+  flex-shrink: 0;
+  margin-right: ${size(1)};
+  width: ${size(9.5)};
+  height: ${size(6)};
+`;
+export const LogoImg = styled.img `
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  margin: auto;
+  max-width: 100%;
+  max-height: 100%;
+`;
+export const Content = styled.div `
+  flex: 1 1 auto;
+  text-align: right;
+  line-height: 1.4;
+`;
+export const OptionBoxHeading = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__font--bold',
+})) `
+  font-size: 1rem;
+`;
+export const OptionBoxContent = styled.div `
+  margin-top: ${size(0.5)};
+  font-size: 0.875rem;
+
+  p {
+    margin: 0;
+  }
+`;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Wrapper } from './wrapper';
+const OverflowBox = ({ children }) => React.createElement(Wrapper, null, children);
+export default OverflowBox;

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+export const Wrapper = styled.div `
+  max-height: 400px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+`;

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

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+import { Wrapper as Container } from '../Container/wrapper';
+export const OverflowGrid = styled.div `
+  ${(props) => props.theme.breakpoint.LtMd} {
+    ${Container} & {
+      margin-left: ${size(-3)};
+      margin-right: ${size(-2)};
+    }
+  }
+
+  ${(props) => props.theme.breakpoint.LtSm} {
+    ${Container} & {
+      margin-left: ${size(-2)};
+      margin-right: ${size(-1)};
+    }
+  }
+`;
+export const OverflowGridList = styled.ul `
+  display: flex;
+  align-items: flex-start;
+  list-style: none;
+  padding: 0;
+  margin: ${size(-1)};
+
+  ${(props) => props.theme.breakpoint.LtMd} {
+    ${Container} & {
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      padding: 0 ${size(3)};
+
+      :after {
+        content: '';
+        flex: 0 0 auto;
+        height: 1px;
+        width: ${size(2)};
+      }
+    }
+  }
+
+  ${(props) => props.theme.breakpoint.LtSm} {
+    ${Container} & {
+      padding: 0 ${size(2)};
+
+      :after {
+        width: ${size(1)};
+      }
+    }
+  }
+`;
+export const OverflowGridItem = styled.li `
+  flex: 1 0 auto;
+  width: calc(100% - ${size(2)});
+  max-width: calc(100% - ${size(2)});
+  padding: ${size(1)};
+
+  ${(props) => props.theme.breakpoint.Sm} {
+    width: calc(50% - ${size(3)});
+    max-width: calc(50% - ${size(3)});
+  }
+
+  ${(props) => props.theme.breakpoint.Md} {
+    width: 33.333%;
+    max-width: 33.333%;
+  }
+`;

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

@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../layout/helpers';
+export const Page = styled.div ``;
+export const PageSection = styled.section `
+  margin-bottom: ${size(4)};
+
+  ${({ accent }) => accent &&
+    css `
+      padding: ${size(4)} 0;
+      background-color: ${(props) => props.theme.color.accent};
+      margin-bottom: 0;
+    `}
+
+  ${({ large }) => large &&
+    css `
+      margin-bottom: ${size(8)};
+    `}
+
+  ${({ accent, large }) => accent &&
+    large &&
+    css `
+      padding: ${size(8)} 0;
+      margin-bottom: 0;
+    `}
+
+  ${({ fillSpace }) => fillSpace &&
+    css `
+      flex: 1 1 auto;
+    `}
+`;

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { PanelWrapper, Close, CloseBtn, Header, Heading, Body, Footer, UiBlock, Wrapper, } from './wrapper';
+import { Portal, PortalNamespace } from '../Portal/index';
+import { H1 } from '../Heading/index';
+import { IconCancel } from '../Icon/index';
+const Panel = ({ id, title, footer, onClose, children }) => {
+    return (React.createElement(Portal, { id: id || PortalNamespace.DefaultPortal },
+        React.createElement(Wrapper, null,
+            React.createElement(UiBlock, { title: "St\u00E4ng panel", onClick: onClose }),
+            React.createElement(PanelWrapper, null,
+                React.createElement(Header, null,
+                    React.createElement(Heading, null,
+                        React.createElement(H1, { noMargin: true }, title)),
+                    React.createElement(Close, null,
+                        React.createElement(CloseBtn, { title: "St\u00E4ng panel", "aria-label": "St\u00E4ng panel", onClick: onClose },
+                            React.createElement(IconCancel, { block: true })))),
+                React.createElement(Body, null, children),
+                footer && React.createElement(Footer, null, footer)))));
+};
+export default Panel;

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

@@ -0,0 +1,143 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+import { fadeIn, noTransform } from '../../layout/keyframes';
+import { ButtonReset } from '../Button/index';
+import { H1 } from '../Heading/index';
+export const Wrapper = styled.div.attrs(() => ({
+    role: 'dialog',
+})) `
+  position: relative;
+  z-index: 80;
+`;
+export const UiBlock = styled.div.attrs(() => ({
+    'aria-hidden': 'true',
+    role: 'button',
+})) `
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.35);
+  animation: ${fadeIn} 200ms ease;
+`;
+export const PanelWrapper = styled.article.attrs(() => ({
+    className: 'wayke__theme wayke__font--regular',
+})) `
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  background-color: ${(props) => props.theme.color.accent};
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+  z-index: 1;
+  animation: ${noTransform} 200ms ease forwards;
+
+  ${(props) => props.theme.breakpoint.Sm} {
+    max-width: 450px;
+    transform: translateX(100%);
+  }
+
+  ${(props) => props.theme.breakpoint.LtSm} {
+    top: auto;
+    max-height: 100%;
+    transform: translateY(100%);
+  }
+`;
+export const Header = styled.header `
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  min-height: 45px;
+  padding: ${size(3)};
+  padding-bottom: 0;
+
+  :after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: ${size(3)};
+    background-image: linear-gradient(
+      ${(props) => props.theme.color.accent},
+      ${(props) => props.theme.color.accentTransparent}
+    );
+    z-index: 1;
+  }
+`;
+export const Heading = styled.div `
+  flex: 1 1 auto;
+
+  ${H1} {
+    font-size: 1.5rem;
+  }
+`;
+export const Close = styled.div `
+  flex-shrink: 0;
+  margin: ${size(-2)};
+  padding-left: ${size(3)};
+`;
+export const CloseBtn = styled(ButtonReset) `
+  position: relative;
+  display: block;
+  padding: ${size(2)};
+  transform-origin: 50% 50%;
+  transition: transform 200ms ease;
+  z-index: 2;
+
+  :before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: ${(props) => props.theme.color.accent};
+    opacity: 0;
+    transition: opacity 200ms ease;
+    z-index: -1;
+  }
+
+  :active {
+    transform: scale(0.9);
+  }
+
+  :hover {
+    :before {
+      opacity: 1;
+    }
+  }
+`;
+export const Body = styled.div `
+  flex: 1 1 auto;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: ${size(3)};
+`;
+export const Footer = styled.footer `
+  position: relative;
+  flex-shrink: 0;
+  padding: ${size(3)};
+  border-top: 1px solid ${(props) => props.theme.color.border};
+`;
+export const FooterAction = styled.div.attrs(() => ({
+    role: 'group',
+})) `
+  display: flex;
+  align-items: center;
+  margin: ${size(-0.5)};
+`;
+export const FooterActionItem = styled.div `
+  flex: 1 1 50%;
+  padding: ${size(0.5)};
+
+  ${ButtonReset} {
+    padding: ${size(1.75)} ${size(2)};
+  }
+`;