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

package/src/components/Modal/wrapper.tsx

@@ -1,127 +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/src/components/OpeningHours/index.tsx

@@ -1,145 +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';
-
-import { OpeningHours, Maybe } from '../../@types/codegen/types';
-
-type Days = Omit<OpeningHours, '__typename'>;
-type KeyType = keyof Days;
-const KeyOrder: KeyType[] = [
-  'monday',
-  'tuesday',
-  'wednesday',
-  'thursday',
-  'friday',
-  'saturday',
-  'sunday',
-];
-
-const TranslateWeekDays = (d: KeyType) => {
-  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';
-  }
-};
-
-interface OpeningHoursSample {
-  titleFrom: string;
-  titleTo?: string;
-  from?: string | null;
-  until?: string | null;
-}
-
-const arr: OpeningHoursSample[] = [];
-
-const GetOpeningHours = (o: OpeningHours) =>
-  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: OpeningHours) => {
-  const dayNumber = new Date().getDay();
-  const day = KeyOrder[dayNumber === 0 ? 6 : dayNumber - 1] as KeyType;
-  const current = o[day];
-  return {
-    title: current ? 'Öppetider idag' : 'Stängt idag',
-    from: current?.from,
-    until: current?.until,
-  };
-};
-
-const valuOfDateString = (s: string) => {
-  const splitted = s.split(':').map((x) => parseInt(x, 10));
-  return new Date().setHours(splitted[0], splitted[1]).valueOf();
-};
-
-interface OpeningHoursProps {
-  openingHours?: Maybe<OpeningHours>;
-}
-
-const OpeningHours = ({ openingHours }: OpeningHoursProps) => {
-  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 (
-    <>
-      <RepeatSmall>
-        <Badge
-          label={currentlyOpen ? 'Öppet' : 'Stängt'}
-          severity={currentlyOpen ? 'positive' : 'negative'}
-        />
-      </RepeatSmall>
-      <RepeatSmall>
-        <TableColumn>
-          <TableColumnRow>
-            <TableColumnCell>
-              <UtilityTextBold>{today?.title}</UtilityTextBold>
-            </TableColumnCell>
-            <TableColumnCell>
-              <UtilityTextBold>
-                {today?.from ? `${today.from}-${today.until}` : 'Stängt'}
-              </UtilityTextBold>
-            </TableColumnCell>
-          </TableColumnRow>
-          {oh.map((o) => (
-            <TableColumnRow key={o.titleFrom}>
-              <TableColumnCell>
-                {o.titleTo ? `${o.titleFrom}-${o.titleTo}` : o.titleFrom}
-              </TableColumnCell>
-              <TableColumnCell>{o.from ? `${o.from}-${o.until}` : 'Stängt'}</TableColumnCell>
-            </TableColumnRow>
-          ))}
-        </TableColumn>
-      </RepeatSmall>
-    </>
-  );
-};
-
-export default OpeningHours;

package/src/components/OptionBox/index.tsx

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

package/src/components/OptionBox/wrapper.tsx

@@ -1,56 +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/src/components/OverflowBox/index.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { Wrapper } from './wrapper';
-
-interface IProps {
-  children?: React.ReactNode;
-}
-
-const OverflowBox = ({ children }: IProps) => <Wrapper>{children}</Wrapper>;
-
-export default OverflowBox;

package/src/components/OverflowBox/wrapper.tsx

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

package/src/components/OverflowGrid/index.tsx

@@ -1,70 +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/src/components/Page/index.tsx

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

package/src/components/Panel/index.tsx

@@ -1,50 +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';
-
-interface IPanelPortal {
-  id?: string | null;
-  title: string | null;
-  onClose: () => void;
-  children: React.ReactNode;
-  footer?: React.ReactNode;
-}
-
-const Panel = ({ id, title, footer, onClose, children }: IPanelPortal) => {
-  return (
-    <Portal id={id || PortalNamespace.DefaultPortal}>
-      <Wrapper>
-        <UiBlock title="Stäng panel" onClick={onClose} />
-        <PanelWrapper>
-          <Header>
-            <Heading>
-              <H1 noMargin>{title}</H1>
-            </Heading>
-            <Close>
-              <CloseBtn title="Stäng panel" aria-label="Stäng panel" onClick={onClose}>
-                <IconCancel block />
-              </CloseBtn>
-            </Close>
-          </Header>
-          <Body>{children}</Body>
-          {footer && <Footer>{footer}</Footer>}
-        </PanelWrapper>
-      </Wrapper>
-    </Portal>
-  );
-};
-
-export default Panel;

package/src/components/Panel/wrapper.tsx

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