@wayke-se/components-react 2.16.0 → 3.0.0-beta.1

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

@@ -1,11 +1,14 @@
 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;
@@ -23,10 +26,11 @@ 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;
@@ -43,9 +47,10 @@ 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};
@@ -67,47 +72,56 @@ 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/src/components/OpeningHours/index.tsx

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

@@ -0,0 +1,23 @@
+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/{dist-src/components/OptionBox/wrapper.js → src/components/OptionBox/wrapper.tsx}

@@ -1,6 +1,8 @@
 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)};
@@ -11,14 +13,16 @@ 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;
@@ -29,17 +33,20 @@ 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/src/components/OverflowBox/index.tsx

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

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

@@ -1,5 +1,6 @@
 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/{dist-src/components/OverflowGrid/index.js → src/components/OverflowGrid/index.tsx}

@@ -1,7 +1,9 @@
 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)};
@@ -16,7 +18,8 @@ export const OverflowGrid = styled.div `
     }
   }
 `;
-export const OverflowGridList = styled.ul `
+
+export const OverflowGridList = styled.ul`
   display: flex;
   align-items: flex-start;
   list-style: none;
@@ -48,7 +51,8 @@ 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/src/components/Page/index.tsx

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

@@ -0,0 +1,50 @@
+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/{dist-src/components/Panel/wrapper.js → src/components/Panel/wrapper.tsx}

@@ -1,18 +1,21 @@
 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;
@@ -21,9 +24,10 @@ 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;
@@ -47,7 +51,8 @@ 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;
@@ -70,19 +75,22 @@ 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)};
@@ -114,26 +122,30 @@ 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/src/components/Pdf/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Scalars } from '../../@types/codegen';
+import {
+  PdfListItem,
+  PdfSubtitle,
+  PdfTitle,
+  PdfContainer,
+  PdfListInner,
+  PdfLink,
+  PdfColumn,
+} from './wrapper';
+
+interface PdfDownloadItemProps {
+  document: Scalars['FileDocument'];
+}
+
+export const PdfDownloadItem = ({ document }: PdfDownloadItemProps) => (
+  <PdfListItem>
+    <PdfListInner>
+      <PdfColumn>
+        <PdfTitle>{document.name}</PdfTitle>
+        <PdfSubtitle>{document.contentType}</PdfSubtitle>
+      </PdfColumn>
+      <PdfColumn>
+        <PdfLink href={document.url} rel="noopener noreferrer nofollow" target="_blank">
+          Öppna
+        </PdfLink>
+      </PdfColumn>
+    </PdfListInner>
+  </PdfListItem>
+);
+
+interface PdfDownloadContainerProps {
+  documents: Scalars['FileDocument'][];
+}
+
+export const PdfDownloadContainer = ({ documents }: PdfDownloadContainerProps) => (
+  <PdfContainer>
+    {documents.map((document, i) => (
+      <PdfDownloadItem key={`${document.url}-${i}`} document={document} />
+    ))}
+  </PdfContainer>
+);
+
+export default PdfDownloadContainer;

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

@@ -1,8 +1,9 @@
 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)};
 
@@ -10,16 +11,18 @@ 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 {
@@ -31,19 +34,22 @@ 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)};