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

package/src/components/Pdf/index.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-import { Scalars } from '../../@types/codegen/types';
-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/Pdf/wrapper.tsx

@@ -1,61 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-
-export const PdfListItem = styled.li.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))`
-  flex: 0 0 50%;
-  padding: ${size(1)};
-
-  ${({ theme }) => theme.breakpoint.LtSm} {
-    flex: 0 0 100%;
-  }
-`;
-
-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',
-}))`
-  text-decoration: none;
-  font-size: 0.875rem;
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-export const PdfTitle = styled.div`
-  color: ${(props) => props.theme.color.textDark};
-`;
-export const PdfSubtitle = styled.div`
-  color: ${(props) => props.theme.color.textDarkLighten};
-`;
-
-export const PdfColumn = styled.div`
-  flex 0 0 auto;
-  &:first-child {
-    flex: 1 1 auto;
-  }
-`;
-
-export const PdfListInner = styled.div`
-  position: relative;
-  border: 1px solid ${(props) => props.theme.color.border};
-  padding: ${size(1.5)};
-  display: flex;
-  align-items: center;
-  :hover {
-    background-color: ${(props) => props.theme.color.hoverOverlay};
-  }
-`;

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/index.ts

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

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-namespace.ts

@@ -1 +0,0 @@
-export const DefaultPortal = 'DEFAULT_PORTAL';

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/Price/index.tsx

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

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/PriceTable/wrapper.tsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const List = styled.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-`;
-
-export const Item = styled.li`
-  display: flex;
-  align-items: flex-end;
-  line-height: 1;
-
-  & + & {
-    margin-top: ${size(0.5)};
-  }
-`;
-
-export const Label = styled.div`
-  flex: 1 1 auto;
-`;
-
-export const Value = styled.div`
-  flex-shrink: 0;
-`;

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/ProductCard/wrapper.tsx

@@ -1,147 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.article`
-  position: relative;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  transform-origin: 50% 50%;
-  transition: transform 150ms ease;
-
-  :active {
-    transform: scale(0.98);
-  }
-`;
-
-export const Image = styled.div`
-  flex-shrink: 0;
-  position: relative;
-  height: 0;
-  padding-bottom: 66.666%;
-  background-color: ${(props) => props.theme.color.accentDark};
-  border-radius: 3px;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 3px;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  ${Wrapper}:hover & {
-    :before {
-      opacity: 1;
-    }
-  }
-`;
-
-export const Picture = styled.picture``;
-
-export const Source = styled.source``;
-
-export const Img = styled.img`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  top: auto;
-  left: auto;
-  border-radius: 3px;
-`;
-
-export const Content = styled.div`
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-  margin-top: ${size(2)};
-`;
-
-export const ContentBody = styled.div``;
-
-export const ContentFooter = styled.div`
-  margin-top: auto;
-  padding-top: ${size(1)};
-`;
-
-export const Heading = styled.h1.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))`
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  font-weight: 400;
-  margin: 0;
-  font-size: 1rem;
-`;
-
-export const Link = styled.a`
-  display: block;
-  color: inherit;
-  text-decoration: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  :focus {
-    text-decoration: underline;
-  }
-`;
-
-export const Description = styled.div`
-  font-size: 0.875rem;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  margin-top: ${size(0.25)};
-`;
-
-export const Usp = styled.div`
-  margin-top: ${size(1)};
-`;
-
-export const Price = styled.div`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-`;
-
-export const CurrentPrice = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
-}))`
-  font-size: 1rem;
-  margin-right: ${size(1)};
-`;
-
-export const PriceCell = styled.div`
-  flex: 1 1 auto;
-  padding-right: ${size(1)};
-`;
-
-export const OldPrice = styled.div`
-  text-decoration: line-through;
-  color: ${(props) => props.theme.color.textDarkLighten};
-  font-size: 0.875rem;
-`;
-
-export const Label = styled.label`
-  color: ${(props) => props.theme.color.disabledText};
-  font-size: 0.875rem;
-`;

package/src/components/ProductPage/index.tsx

@@ -1,99 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { Wrapper as Container } from '../Container/wrapper';
-
-export const ProductPage = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  ${(props) => props.theme.breakpoint.Md} {
-    flex-direction: row;
-  }
-`;
-
-export const ProductPageAside = styled.div`
-  ${(props) => props.theme.breakpoint.LtMd} {
-    display: contents;
-  }
-
-  ${(props) => props.theme.breakpoint.Md} {
-    flex-shrink: 0;
-    width: calc(375px + ${size(2)});
-    padding-right: ${size(2)};
-  }
-`;
-
-export const ProductPageMain = styled.div`
-  ${(props) => props.theme.breakpoint.LtMd} {
-    display: contents;
-  }
-
-  ${(props) => props.theme.breakpoint.Md} {
-    flex: 1 1 100%;
-    min-width: 0;
-    padding-left: ${size(2)};
-  }
-`;
-
-type ProductPageAsideSectionProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
-> & {
-  mobileOrder?: number;
-};
-
-export const ProductPageAsideSection = styled.div<ProductPageAsideSectionProps>`
-  ${(props) => props.theme.breakpoint.LtMd} {
-    order: ${(props) => props.mobileOrder};
-
-    & + & {
-      margin-top: ${size(2)};
-    }
-
-    :last-child {
-      margin-bottom: ${size(4)};
-    }
-
-    ${ProductPageMain} & {
-      margin-top: ${size(2)};
-    }
-  }
-
-  ${(props) => props.theme.breakpoint.Md} {
-    & + & {
-      margin-top: ${size(4)};
-    }
-
-    ${ProductPageMain} & {
-      margin-bottom: ${size(8)};
-    }
-  }
-`;
-
-export const ProductPageMainSection = styled.div`
-  ${(props) => props.theme.breakpoint.LtMd} {
-    order: 99;
-    padding: ${size(4)} 0;
-    border-top: ${size(1)} solid ${(props) => props.theme.color.accent};
-
-    ${Container} & {
-      margin-left: ${size(-2)};
-      margin-right: ${size(-2)};
-      padding-left: ${size(2)};
-      padding-right: ${size(2)};
-    }
-  }
-
-  ${(props) => props.theme.breakpoint.Md} {
-    & + & {
-      margin-top: ${size(8)};
-      padding-top: ${size(8)};
-      border-top: 1px solid ${(props) => props.theme.color.border};
-    }
-  }
-`;
-
-export const ProductPageContentLimit = styled.div`
-  max-width: 420px;
-`;

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;