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

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/NavButton/index.js

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-export const NavButton = styled(ButtonReset) `
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${size(4)};
-  height: ${size(4)};
-  border-radius: 50%;
-  background-color: ${(props) => props.theme.color.bg};
-  color: ${(props) => props.theme.color.textDark};
-  font-size: 0.75rem;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
-  transition: transform 200ms ease;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-radius: 50%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  &:enabled {
-    &:hover {
-      &::before {
-        opacity: 1;
-      }
-    }
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-`;

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,56 +0,0 @@
-import React, { useRef, useCallback, useState, useEffect } from 'react';
-import { Wrapper, ListWrapper, List, Item, PrevBtn, NextBtn } from './wrapper';
-import { IconChevronLeft, IconChevronRight } from '../Icon/index';
-import { NavButton } from '../NavButton/index';
-const OverflowGrid = ({ items, itemKeyBase, spacing, columns, columnsSm, columnsMd, accentBg, }) => {
-    const overflowElement = useRef(null);
-    const onPrev = useCallback(() => {
-        const itemWidth = overflowElement.current?.children[0].clientWidth || 0;
-        const scrollLeft = overflowElement.current?.scrollLeft || 0;
-        if (scrollLeft > 0) {
-            overflowElement.current?.scroll({
-                left: scrollLeft - itemWidth,
-                behavior: 'smooth',
-            });
-        }
-    }, []);
-    const onNext = useCallback(() => {
-        const itemWidth = overflowElement.current?.children[0].clientWidth || 0;
-        const scrollWidth = overflowElement.current?.scrollWidth || 0;
-        const scrollLeft = overflowElement.current?.scrollLeft || 0;
-        const overflowElementWidth = overflowElement.current?.offsetWidth || 0;
-        const overflowElementScrollWidth = scrollWidth - overflowElementWidth;
-        if (overflowElementScrollWidth !== scrollLeft) {
-            overflowElement.current?.scroll({
-                left: scrollLeft + itemWidth,
-                behavior: 'smooth',
-            });
-        }
-    }, []);
-    // Hide navigation buttons depending on scroll position
-    const [hidePrevNav, setHidePrevNav] = useState(true);
-    const [hideNextNav, setHideNextNav] = useState(true);
-    const onScroll = () => {
-        const scrollLeft = overflowElement.current?.scrollLeft || 0;
-        const scrollWidth = overflowElement.current?.scrollWidth || 0;
-        const overflowElementWidth = overflowElement.current?.offsetWidth || 0;
-        const overflowElementScrollWidth = scrollWidth - overflowElementWidth;
-        setHidePrevNav(scrollLeft == 0 ? true : false);
-        setHideNextNav(overflowElementScrollWidth == scrollLeft ? true : false);
-    };
-    useEffect(() => {
-        onScroll();
-        overflowElement.current?.addEventListener('scroll', onScroll);
-        return () => overflowElement.current?.removeEventListener('scroll', onScroll);
-    }, []);
-    return (React.createElement(Wrapper, { "$accentBg": accentBg },
-        React.createElement(ListWrapper, { "$spacing": spacing },
-            React.createElement(List, { ref: overflowElement, "$columns": columns, "$columnsSm": columnsSm, "$columnsMd": columnsMd }, items.map((item, i) => (React.createElement(Item, { key: itemKeyBase ? `${itemKeyBase}-${i}` : `overflow-grid-item-${i}` }, item))))),
-        !hidePrevNav && (React.createElement(PrevBtn, null,
-            React.createElement(NavButton, { onClick: onPrev, title: "Previous" },
-                React.createElement(IconChevronLeft, null)))),
-        !hideNextNav && (React.createElement(NextBtn, null,
-            React.createElement(NavButton, { onClick: onNext, title: "Next" },
-                React.createElement(IconChevronRight, null))))));
-};
-export default OverflowGrid;

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

@@ -1,144 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-export const Wrapper = styled.div `
-  --container-gutter: ${size(2)};
-  --bg: ${(props) => props.theme.color.bg};
-
-  ${(props) => props.theme.breakpoint.Sm} {
-    --container-gutter: ${size(3)};
-  }
-
-  position: relative;
-
-  ${({ $accentBg }) => $accentBg &&
-    css `
-      --bg: ${(props) => props.theme.color.accent};
-    `}
-`;
-export const Item = styled.li `
-  flex: 1 0 auto;
-  width: 100%;
-  max-width: 100%;
-  scroll-snap-align: start;
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    &:is(:only-child, #important) {
-      width: 100%;
-      max-width: 100%;
-    }
-  }
-`;
-export const List = styled.ul `
-  display: flex;
-  align-items: stretch;
-  list-style: none;
-  padding: 0 var(--container-gutter);
-  margin: 0;
-  overflow: auto;
-  scroll-snap-type: x mandatory;
-  scroll-padding-left: var(--container-gutter);
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  ${({ $columns }) => $columns &&
-    css `
-      ${Item} {
-        width: ${100 / $columns}%;
-        max-width: ${100 / $columns}%;
-      }
-    `}
-
-  ${({ $columnsSm }) => $columnsSm &&
-    css `
-      ${(props) => props.theme.breakpoint.Sm} {
-        ${Item} {
-          width: ${100 / $columnsSm}%;
-          max-width: ${100 / $columnsSm}%;
-        }
-      }
-    `}
-
-  ${({ $columnsMd }) => $columnsMd &&
-    css `
-      ${(props) => props.theme.breakpoint.Md} {
-        ${Item} {
-          width: ${100 / $columnsMd}%;
-          max-width: ${100 / $columnsMd}%;
-        }
-      }
-    `}
-`;
-export const ListWrapper = styled.div `
-  position: relative;
-  overflow: hidden;
-  margin: 0 calc(var(--container-gutter) * -1);
-
-  ${(props) => props.theme.breakpoint.Md} {
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: var(--container-gutter);
-      background-color: var(--bg);
-      z-index: 1;
-    }
-
-    &::before {
-      left: 0;
-
-      ${({ $spacing }) => $spacing
-    ? css `
-              mask-image: linear-gradient(to right, #000 ${size($spacing)}, transparent);
-            `
-    : css `
-              mask-image: ${(props) => props.theme.mask.gradient.toRight};
-            `}
-    }
-
-    &::after {
-      right: 0;
-
-      ${({ $spacing }) => $spacing
-    ? css `
-              mask-image: linear-gradient(to left, #000 ${size($spacing)}, transparent);
-            `
-    : css `
-              mask-image: ${(props) => props.theme.mask.gradient.toLeft};
-            `}
-    }
-  }
-
-  ${({ $spacing }) => $spacing &&
-    css `
-      ${List} {
-        margin: 0 -${size($spacing / 2)};
-      }
-
-      ${Item} {
-        padding: 0 ${size($spacing / 2)};
-      }
-    `}
-`;
-const NavBtn = styled.div `
-  position: absolute;
-  top: 50%;
-  z-index: 2;
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    display: none;
-  }
-`;
-export const PrevBtn = styled(NavBtn) `
-  left: 0;
-  transform: translate(-50%, -50%);
-`;
-export const NextBtn = styled(NavBtn) `
-  right: 0;
-  transform: translate(50%, -50%);
-`;

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;