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

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

@@ -1,14 +1,11 @@
 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',
-}))`
+    role: 'dialog',
+})) `
   position: fixed;
   top: 0;
   bottom: 0;
@@ -26,11 +23,10 @@ export const Wrapper = styled.div.attrs(() => ({
     padding: ${size(2)};
   }
 `;
-
 export const UiBlock = styled.div.attrs(() => ({
-  'aria-hidden': 'true',
-  role: 'button',
-}))`
+    'aria-hidden': 'true',
+    role: 'button',
+})) `
   position: fixed;
   top: 0;
   bottom: 0;
@@ -47,10 +43,9 @@ export const UiBlock = styled.div.attrs(() => ({
     animation: ${fadeIn} 400ms ease forwards;
   }
 `;
-
 export const Dialog = styled.article.attrs(() => ({
-  className: 'wayke__theme wayke__font--regular',
-}))`
+    className: 'wayke__theme wayke__font--regular',
+})) `
   display: flex;
   flex-direction: column;
   background-color: ${(props) => props.theme.color.bg};
@@ -72,56 +67,47 @@ export const Dialog = styled.article.attrs(() => ({
     animation: ${fadeIn} 400ms ease, ${noTransform} 400ms ease forwards;
   }
 `;
-
-export const Content = styled.div`
+export const Content = styled.div `
   flex: 1 1 auto;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 `;
-
-export const Header = styled.header`
+export const Header = styled.header `
   display: flex;
   align-items: center;
   min-height: 60px;
   padding: ${size(3)};
   padding-bottom: 0;
 `;
-
-export const Heading = styled.div`
+export const Heading = styled.div `
   flex: 1 1 auto;
 
   ${H1} {
     font-size: 1.5rem;
   }
 `;
-
-export const Close = styled.div`
+export const Close = styled.div `
   flex-shrink: 0;
   margin: ${size(-2)};
   padding-left: ${size(3)};
 `;
-
-export const CloseBtn = styled(ButtonReset)`
+export const CloseBtn = styled(ButtonReset) `
   display: block;
   padding: ${size(2)};
 `;
-
-export const Body = styled.div`
+export const Body = styled.div `
   padding: ${size(3)};
 `;
-
-export const Image = styled.img`
+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`
+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``;
+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 === null || prev === void 0 ? void 0 : prev[prev.length - 1];
+    if (previous && previous.from == (item === null || item === void 0 ? void 0 : item.from) && previous.until === (item === null || item === void 0 ? void 0 : item.until)) {
+        prev[prev.length - 1].titleTo = title;
+    }
+    else {
+        prev.push({
+            titleFrom: title,
+            from: item === null || item === void 0 ? void 0 : item.from,
+            until: item === null || item === void 0 ? void 0 : 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 === null || current === void 0 ? void 0 : current.from,
+        until: current === null || current === void 0 ? void 0 : 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 === null || today === void 0 ? void 0 : today.from) && (today === null || today === void 0 ? void 0 : 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 === null || today === void 0 ? void 0 : today.title)),
+                    React.createElement(TableColumnCell, null,
+                        React.createElement(UtilityTextBold, null, (today === null || today === void 0 ? void 0 : 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/{src/components/OptionBox/wrapper.tsx → dist-src/components/OptionBox/wrapper.js}

@@ -1,8 +1,6 @@
 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;
   padding: ${size(1)};
@@ -13,16 +11,14 @@ export const Wrapper = styled.div`
     margin-top: ${size(1)};
   }
 `;
-
-export const Logo = styled.div`
+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`
+export const LogoImg = styled.img `
   display: block;
   position: absolute;
   left: 0;
@@ -33,20 +29,17 @@ export const LogoImg = styled.img`
   max-width: 100%;
   max-height: 100%;
 `;
-
-export const Content = styled.div`
+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',
-}))`
+    className: 'wayke__theme wayke__font--bold',
+})) `
   font-size: 1rem;
 `;
-
-export const OptionBoxContent = styled.div`
+export const OptionBoxContent = styled.div `
   margin-top: ${size(0.5)};
   font-size: 0.875rem;
 

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

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

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

@@ -1,9 +1,7 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { Wrapper as Container } from '../Container/wrapper';
-
-export const OverflowGrid = styled.div`
+export const OverflowGrid = styled.div `
   ${(props) => props.theme.breakpoint.LtMd} {
     ${Container} & {
       margin-left: ${size(-3)};
@@ -18,8 +16,7 @@ export const OverflowGrid = styled.div`
     }
   }
 `;
-
-export const OverflowGridList = styled.ul`
+export const OverflowGridList = styled.ul `
   display: flex;
   align-items: flex-start;
   list-style: none;
@@ -51,8 +48,7 @@ export const OverflowGridList = styled.ul`
     }
   }
 `;
-
-export const OverflowGridItem = styled.li`
+export const OverflowGridItem = styled.li `
   flex: 1 0 auto;
   width: calc(100% - ${size(2)});
   max-width: calc(100% - ${size(2)});

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

@@ -1,21 +1,18 @@
 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',
-}))`
+    role: 'dialog',
+})) `
   position: relative;
   z-index: 80;
 `;
-
 export const UiBlock = styled.div.attrs(() => ({
-  'aria-hidden': 'true',
-  role: 'button',
-}))`
+    'aria-hidden': 'true',
+    role: 'button',
+})) `
   position: fixed;
   top: 0;
   bottom: 0;
@@ -24,10 +21,9 @@ export const UiBlock = styled.div.attrs(() => ({
   background-color: rgba(0, 0, 0, 0.35);
   animation: ${fadeIn} 200ms ease;
 `;
-
 export const PanelWrapper = styled.article.attrs(() => ({
-  className: 'wayke__theme wayke__font--regular',
-}))`
+    className: 'wayke__theme wayke__font--regular',
+})) `
   display: flex;
   flex-direction: column;
   position: fixed;
@@ -51,8 +47,7 @@ export const PanelWrapper = styled.article.attrs(() => ({
     transform: translateY(100%);
   }
 `;
-
-export const Header = styled.header`
+export const Header = styled.header `
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -75,22 +70,19 @@ export const Header = styled.header`
     z-index: 1;
   }
 `;
-
-export const Heading = styled.div`
+export const Heading = styled.div `
   flex: 1 1 auto;
 
   ${H1} {
     font-size: 1.5rem;
   }
 `;
-
-export const Close = styled.div`
+export const Close = styled.div `
   flex-shrink: 0;
   margin: ${size(-2)};
   padding-left: ${size(3)};
 `;
-
-export const CloseBtn = styled(ButtonReset)`
+export const CloseBtn = styled(ButtonReset) `
   position: relative;
   display: block;
   padding: ${size(2)};
@@ -122,30 +114,26 @@ export const CloseBtn = styled(ButtonReset)`
     }
   }
 `;
-
-export const Body = styled.div`
+export const Body = styled.div `
   flex: 1 1 auto;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   padding: ${size(3)};
 `;
-
-export const Footer = styled.footer`
+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',
-}))`
+    role: 'group',
+})) `
   display: flex;
   align-items: center;
   margin: ${size(-0.5)};
 `;
-
-export const FooterActionItem = styled.div`
+export const FooterActionItem = styled.div `
   flex: 1 1 50%;
   padding: ${size(0.5)};
 

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PdfListItem, PdfSubtitle, PdfTitle, PdfContainer, PdfListInner, PdfLink, PdfColumn, } from './wrapper';
+export const PdfDownloadItem = ({ document }) => (React.createElement(PdfListItem, null,
+    React.createElement(PdfListInner, null,
+        React.createElement(PdfColumn, null,
+            React.createElement(PdfTitle, null, document.name),
+            React.createElement(PdfSubtitle, null, document.contentType)),
+        React.createElement(PdfColumn, null,
+            React.createElement(PdfLink, { href: document.url, rel: "noopener noreferrer nofollow", target: "_blank" }, "\u00D6ppna")))));
+export const PdfDownloadContainer = ({ documents }) => (React.createElement(PdfContainer, null, documents.map((document, i) => (React.createElement(PdfDownloadItem, { key: `${document.url}-${i}`, document: document })))));
+export default PdfDownloadContainer;

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

@@ -1,9 +1,8 @@
 import styled from 'styled-components';
 import { size } from '../../layout/helpers';
-
 export const PdfListItem = styled.li.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))`
+    className: 'wayke__theme wayke__color--primary-text',
+})) `
   flex: 0 0 50%;
   padding: ${size(1)};
 
@@ -11,18 +10,16 @@ export const PdfListItem = styled.li.attrs(() => ({
     flex: 0 0 100%;
   }
 `;
-
-export const PdfContainer = styled.ul`
+export const PdfContainer = styled.ul `
   list-style: none;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   margin: ${size(-1)};
 `;
-
 export const PdfLink = styled.a.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
-}))`
+    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
+})) `
   text-decoration: none;
   font-size: 0.875rem;
   &:after {
@@ -34,22 +31,19 @@ export const PdfLink = styled.a.attrs(() => ({
     height: 100%;
   }
 `;
-
-export const PdfTitle = styled.div`
+export const PdfTitle = styled.div `
   color: ${(props) => props.theme.color.textDark};
 `;
-export const PdfSubtitle = styled.div`
+export const PdfSubtitle = styled.div `
   color: ${(props) => props.theme.color.textDarkLighten};
 `;
-
-export const PdfColumn = styled.div`
+export const PdfColumn = styled.div `
   flex 0 0 auto;
   &:first-child {
     flex: 1 1 auto;
   }
 `;
-
-export const PdfListInner = styled.div`
+export const PdfListInner = styled.div `
   position: relative;
   border: 1px solid ${(props) => props.theme.color.border};
   padding: ${size(1.5)};

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

@@ -0,0 +1,13 @@
+import React, { useState, useCallback } from 'react';
+import { TableColumnRow, TableColumnCell } from '../TableColumn/index';
+import { ButtonContent, ButtonInlineBold } from '../Button/index';
+const PhoneNumber = ({ phoneNumber }) => {
+    const [visible, setVisible] = useState(false);
+    const onClick = useCallback(() => !visible && setVisible(true), [visible]);
+    return (React.createElement(TableColumnRow, null,
+        React.createElement(TableColumnCell, null, "Telefonnummer"),
+        React.createElement(TableColumnCell, null, visible ? (React.createElement(ButtonInlineBold, { as: "a", href: `tel:${phoneNumber}`, title: `Ring ${phoneNumber}` },
+            React.createElement(ButtonContent, null, phoneNumber))) : (React.createElement(ButtonInlineBold, { onClick: onClick, title: "Visa telefonnummer" },
+            React.createElement(ButtonContent, null, "Visa telefonnummer"))))));
+};
+export default PhoneNumber;

package/{src/components/Portal/index.ts → dist-src/components/Portal/index.js}

@@ -1,5 +1,4 @@
 import * as PortalNamespace from './portal-namespace';
-
 export { default as PortalElement } from './portal-element';
 export { default as Portal } from './portal';
 export { PortalNamespace };

package/dist-src/components/Portal/portal-element.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+const PortalElement = ({ id }) => React.createElement("div", { id: id });
+export default PortalElement;

package/dist-src/components/Portal/portal.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+const Portal = ({ id, children }) => {
+    const el = React.useRef(document.getElementById(id) || document.createElement('div'));
+    if (!el.current) {
+        return null;
+    }
+    const { current } = el;
+    const [dynamic] = React.useState(!current.parentElement);
+    React.useEffect(() => {
+        if (dynamic) {
+            current.id = id;
+            if (document.body) {
+                document.body.appendChild(current);
+            }
+        }
+        return () => {
+            if (dynamic && current.parentElement) {
+                current.parentElement.removeChild(current);
+            }
+        };
+    }, [id]);
+    return ReactDOM.createPortal(children, current);
+};
+export default React.memo(Portal);

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

@@ -1,12 +1,10 @@
 import styled from 'styled-components';
-
 export const Price = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
-}))`
+    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
+})) `
   font-size: 1.375rem;
 `;
-
-export const OldPrice = styled.div`
+export const OldPrice = styled.div `
   color: ${(props) => props.theme.color.textDarkLighten};
   text-decoration: line-through;
 `;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { List, Item, Value, Label } from './wrapper';
+import { VisualHeading } from '../Heading/index';
+import { Price, OldPrice } from '../Price/index';
+import { numberSeparator } from '../../utils/formats';
+const PriceTable = ({ price, oldPrice }) => (React.createElement(List, null,
+    React.createElement(Item, null,
+        React.createElement(Label, null,
+            React.createElement(VisualHeading, null, "Pris")),
+        React.createElement(Value, null,
+            React.createElement(Price, null,
+                numberSeparator(price),
+                " kr"))),
+    oldPrice !== undefined && (React.createElement(Item, null,
+        React.createElement(Label, null),
+        React.createElement(Value, null,
+            React.createElement(OldPrice, null,
+                numberSeparator(oldPrice),
+                " kr"))))));
+export default PriceTable;