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

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)};

package/src/components/PhoneNumber/index.tsx

@@ -0,0 +1,33 @@
+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/{dist-types/components/Portal/index.d.ts → src/components/Portal/index.ts}

@@ -1,4 +1,5 @@
 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

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

@@ -0,0 +1,36 @@
+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/{dist-src/components/Price/index.js → src/components/Price/index.tsx}

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

package/src/components/PriceTable/index.tsx

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

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

package/src/components/ProductCard/index.tsx

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

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Wrapper = styled.article `
+
+export const Wrapper = styled.article`
   position: relative;
   height: 100%;
   display: flex;
@@ -12,7 +14,8 @@ export const Wrapper = styled.article `
     transform: scale(0.98);
   }
 `;
-export const Image = styled.div `
+
+export const Image = styled.div`
   flex-shrink: 0;
   position: relative;
   height: 0;
@@ -39,9 +42,12 @@ export const Image = styled.div `
     }
   }
 `;
-export const Picture = styled.picture ``;
-export const Source = styled.source ``;
-export const Img = styled.img `
+
+export const Picture = styled.picture``;
+
+export const Source = styled.source``;
+
+export const Img = styled.img`
   position: absolute;
   width: 100%;
   height: 100%;
@@ -50,20 +56,24 @@ export const Img = styled.img `
   left: auto;
   border-radius: 3px;
 `;
-export const Content = styled.div `
+
+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 `
+
+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',
-})) `
+  className: 'wayke__theme wayke__font--bold',
+}))`
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -72,7 +82,8 @@ export const Heading = styled.h1.attrs(() => ({
   margin: 0;
   font-size: 1rem;
 `;
-export const Link = styled.a `
+
+export const Link = styled.a`
   display: block;
   color: inherit;
   text-decoration: none;
@@ -91,7 +102,8 @@ export const Link = styled.a `
     text-decoration: underline;
   }
 `;
-export const Description = styled.div `
+
+export const Description = styled.div`
   font-size: 0.875rem;
   display: -webkit-box;
   -webkit-line-clamp: 3;
@@ -99,31 +111,37 @@ export const Description = styled.div `
   overflow: hidden;
   margin-top: ${size(0.25)};
 `;
-export const Usp = styled.div `
+
+export const Usp = styled.div`
   margin-top: ${size(1)};
 `;
-export const Price = styled.div `
+
+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',
-})) `
+  className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
+}))`
   font-size: 1rem;
   margin-right: ${size(1)};
 `;
-export const PriceCell = styled.div `
+
+export const PriceCell = styled.div`
   flex: 1 1 auto;
   padding-right: ${size(1)};
 `;
-export const OldPrice = styled.div `
+
+export const OldPrice = styled.div`
   text-decoration: line-through;
   color: ${(props) => props.theme.color.textDarkLighten};
   font-size: 0.875rem;
 `;
-export const Label = styled.label `
+
+export const Label = styled.label`
   color: ${(props) => props.theme.color.disabledText};
   font-size: 0.875rem;
 `;

package/{dist-src/components/ProductPage/index.js → src/components/ProductPage/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 ProductPage = styled.div `
+
+export const ProductPage = styled.div`
   display: flex;
   flex-direction: column;
 
@@ -9,7 +11,8 @@ export const ProductPage = styled.div `
     flex-direction: row;
   }
 `;
-export const ProductPageAside = styled.div `
+
+export const ProductPageAside = styled.div`
   ${(props) => props.theme.breakpoint.LtMd} {
     display: contents;
   }
@@ -20,7 +23,8 @@ export const ProductPageAside = styled.div `
     padding-right: ${size(2)};
   }
 `;
-export const ProductPageMain = styled.div `
+
+export const ProductPageMain = styled.div`
   ${(props) => props.theme.breakpoint.LtMd} {
     display: contents;
   }
@@ -31,7 +35,15 @@ export const ProductPageMain = styled.div `
     padding-left: ${size(2)};
   }
 `;
-export const ProductPageAsideSection = styled.div `
+
+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};
 
@@ -58,7 +70,8 @@ export const ProductPageAsideSection = styled.div `
     }
   }
 `;
-export const ProductPageMainSection = styled.div `
+
+export const ProductPageMainSection = styled.div`
   ${(props) => props.theme.breakpoint.LtMd} {
     order: 99;
     padding: ${size(4)} 0;
@@ -80,6 +93,7 @@ export const ProductPageMainSection = styled.div `
     }
   }
 `;
-export const ProductPageContentLimit = styled.div `
+
+export const ProductPageContentLimit = styled.div`
   max-width: 420px;
 `;

package/src/components/ProgressBar/index.tsx

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

@@ -1,21 +1,26 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Wrapper = styled.div `
+
+export const Wrapper = styled.div`
   text-align: center;
 `;
-export const Description = styled.div `
+
+export const Description = styled.div`
   margin-bottom: ${size(1.5)};
   font-size: 0.875rem;
 `;
-export const Bar = styled.div `
+
+export const Bar = styled.div`
   position: relative;
   width: 100%;
   height: 2px;
   background-color: ${(props) => props.theme.color.accentDark};
 `;
+
 export const BarActive = styled.div.attrs(() => ({
-    role: 'progressbar',
-})) `
+  role: 'progressbar',
+}))`
   position: absolute;
   top: 0;
   left: 0;