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

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';
-
-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/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/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/Pdf/index.tsx

@@ -1,46 +0,0 @@
-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/src/components/PhoneNumber/index.tsx

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

package/src/components/Portal/portal-element.tsx

@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-export interface IPortalElement {
-  id: string;
-}
-
-const PortalElement = ({ id }: IPortalElement) => <div id={id} />;
-
-export default PortalElement;

package/src/components/Portal/portal.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-export interface IPortal {
-  id: string;
-  children: React.ReactNode;
-}
-
-const Portal = ({ id, children }: IPortal) => {
-  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<IPortal>(Portal);

package/src/components/PriceTable/index.tsx

@@ -1,34 +0,0 @@
-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';
-
-interface PriceTableProps {
-  price: number;
-  oldPrice?: number;
-}
-
-const PriceTable = ({ price, oldPrice }: PriceTableProps) => (
-  <List>
-    <Item>
-      <Label>
-        <VisualHeading>Pris</VisualHeading>
-      </Label>
-      <Value>
-        <Price>{numberSeparator(price)} kr</Price>
-      </Value>
-    </Item>
-    {oldPrice !== undefined && (
-      <Item>
-        <Label />
-        <Value>
-          <OldPrice>{numberSeparator(oldPrice)} kr</OldPrice>
-        </Value>
-      </Item>
-    )}
-  </List>
-);
-
-export default PriceTable;

package/src/components/ProductCard/index.tsx

@@ -1,133 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import LazyLoad from 'react-lazyload';
-
-import {
-  Wrapper,
-  Image,
-  Picture,
-  Source,
-  Img,
-  Content,
-  ContentBody,
-  ContentFooter,
-  Heading,
-  Link,
-  Description,
-  Usp,
-  Price,
-  CurrentPrice,
-  OldPrice,
-  PriceCell,
-  Label,
-} from './wrapper';
-import UspList, { ItemProps } from '../UspList/index';
-import { DEFAULT_PLACEHOLDER_IMAGE } from '../../utils/constants';
-import usePath from '../../State/Path/usePath';
-
-interface Props {
-  id: string;
-  title: string;
-  href?: string;
-  image?: string;
-  pathRoute?: string;
-  placeholderImage?: string;
-  description?: string;
-  uspList?: ItemProps[];
-  price: string;
-  leasingPrice?: string;
-  oldPrice?: string;
-  onClick?: (id: string) => void;
-}
-
-const ProductCard = ({
-  id,
-  title,
-  href,
-  image,
-  pathRoute,
-  placeholderImage,
-  description,
-  uspList,
-  price,
-  oldPrice,
-  leasingPrice,
-  onClick,
-}: Props) => {
-  const { pushState } = usePath();
-  const _onClick = useMemo(() => (onClick ? () => onClick(id) : undefined), [id]);
-
-  const onHrefClick = useCallback(
-    (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-      if (!!pathRoute && href) {
-        e.preventDefault();
-        pushState(href);
-      }
-    },
-    [id, pathRoute, href]
-  );
-
-  return (
-    <Wrapper onClick={_onClick}>
-      <Image>
-        <LazyLoad>
-          {image ? (
-            <>
-              <Picture>
-                <Source
-                  type="image/webp"
-                  srcSet={`${image}?spec=822x548&format=webp 822w, ${image}?spec=750x500&format=webp 750w, ${image}?spec=411x274&format=webp 411w`}
-                  sizes="(min-width: 600px) calc(((100vw - 48px) / 2) - 8px), (min-width: 900px) calc(((100vw - 48px) / 3) - 10.666px), (min-width: 1312px) 410px, calc(100vw - 32px)"
-                />
-                <Img
-                  srcSet={`${image}?spec=822x548 822w, ${image}?spec=750x500 750w, ${image}?spec=411x274 411w`}
-                  sizes="(min-width: 600px) calc(((100vw - 48px) / 2) - 8px), (min-width: 900px) calc(((100vw - 48px) / 3) - 10.666px), (min-width: 1312px) 410px, calc(100vw - 32px)"
-                  src={`${image}?spec=411x274`}
-                  alt={title}
-                />
-              </Picture>
-            </>
-          ) : (
-            <Picture>
-              <Img src={placeholderImage || DEFAULT_PLACEHOLDER_IMAGE} />
-            </Picture>
-          )}
-        </LazyLoad>
-      </Image>
-      <Content>
-        <ContentBody>
-          <Heading>
-            {href ? (
-              <Link onClick={onHrefClick} href={href} title={title} aria-label={title}>
-                {title}
-              </Link>
-            ) : (
-              title
-            )}
-          </Heading>
-          {description && <Description>{description}</Description>}
-          {uspList && (
-            <Usp>
-              <UspList small items={uspList} />
-            </Usp>
-          )}
-        </ContentBody>
-        <ContentFooter>
-          <Price>
-            <PriceCell>
-              {oldPrice ? <OldPrice>{oldPrice}</OldPrice> : <Label>Pris</Label>}
-              <CurrentPrice>{price}</CurrentPrice>
-            </PriceCell>
-            {leasingPrice && (
-              <PriceCell>
-                <Label>Leasingpris</Label>
-                <CurrentPrice>{leasingPrice}</CurrentPrice>
-              </PriceCell>
-            )}
-          </Price>
-        </ContentFooter>
-      </Content>
-    </Wrapper>
-  );
-};
-
-export default ProductCard;

package/src/components/ProgressBar/index.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Description, Bar, BarActive } from './wrapper';
-
-interface Props {
-  unit: string;
-  valueCurrent: number;
-  valueMax: number;
-}
-
-const ProgressBar = ({ unit, valueCurrent, valueMax }: Props) => {
-  const barWidth = (valueCurrent / valueMax) * 100;
-
-  return (
-    <Wrapper>
-      <Description>
-        Visar {valueCurrent.toString()} av {valueMax.toString()} {unit}
-      </Description>
-      <Bar>
-        <BarActive
-          style={{ width: `${barWidth}%` }}
-          aria-valuenow={valueCurrent}
-          aria-valuemin={0}
-          aria-valuemax={valueMax}
-        />
-      </Bar>
-    </Wrapper>
-  );
-};
-
-export default ProgressBar;

package/src/components/RangeSlider/RangeSliderSimple.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { Slider, Rail, Handles, Tracks } from 'react-compound-slider';
-
-import { Bar, RangeSpan, RangeSpanItem, Slider as OwnSlider } from './wrapper';
-import { Handle } from './handle';
-import { Track } from './track';
-import { numberSeparator } from '../../utils/formats';
-
-interface RangeSliderProps {
-  loading: boolean;
-  domain: number[];
-  values: number[];
-  steps: number[];
-  unit?: string;
-  formatValues?: boolean;
-  onChange: (values: readonly number[]) => void;
-  onUpdate?: (values: readonly number[]) => void;
-}
-
-const RangeSliderSimple = ({
-  loading,
-  values,
-  domain,
-  steps,
-  unit,
-  formatValues,
-  onChange,
-  onUpdate,
-}: RangeSliderProps) => {
-  const first = steps[0];
-  const second = steps[1];
-  const step = second - first;
-
-  const currentMin = formatValues ? numberSeparator(domain[0]) : domain[0];
-  const currentMax = formatValues ? numberSeparator(domain[1]) : domain[1];
-
-  if (steps.length < 2) {
-    return null;
-  }
-
-  return (
-    <>
-      <OwnSlider>
-        <Slider
-          disabled={loading}
-          mode={1}
-          step={step}
-          domain={domain}
-          onChange={onChange}
-          onUpdate={onUpdate}
-          values={values}
-          rootStyle={{ position: 'relative' }}
-        >
-          <Rail>{({ getRailProps }) => <Bar {...getRailProps()} />}</Rail>
-          <Handles>
-            {({ handles, getHandleProps }) => (
-              <div className="slider-handles">
-                {handles.map((handle) => (
-                  <Handle
-                    key={handle.id}
-                    handle={handle}
-                    domain={domain}
-                    getHandleProps={getHandleProps}
-                  />
-                ))}
-              </div>
-            )}
-          </Handles>
-          <Tracks right={false}>
-            {({ tracks, getTrackProps }) => (
-              <div className="slider-tracks">
-                {tracks.map(({ id, source, target }) => (
-                  <Track key={id} source={source} target={target} getTrackProps={getTrackProps} />
-                ))}
-              </div>
-            )}
-          </Tracks>
-        </Slider>
-      </OwnSlider>
-      {false && (
-        <RangeSpan>
-          <RangeSpanItem>{`${currentMin}${unit ? ` ${unit}` : ''}`}</RangeSpanItem>
-          <RangeSpanItem>{`${currentMax}${unit ? ` ${unit}` : ''}`}</RangeSpanItem>
-        </RangeSpan>
-      )}
-    </>
-  );
-};
-
-export default RangeSliderSimple;