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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,143 +0,0 @@
-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)};
-  }
-`;