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

package/src/components/Gallery/index.tsx

@@ -0,0 +1,227 @@
+import React, { useState, useCallback, useRef, useMemo } from 'react';
+import Slider from 'react-slick';
+import scrollIntoView from 'scroll-into-view-if-needed';
+
+import {
+  Wrapper,
+  SliderWrapper,
+  Item,
+  Image,
+  ArrowLeft,
+  ArrowRight,
+  Main,
+  Alt,
+  QuickNav,
+  QuickNavItem,
+  QuickNavBtn,
+  QuickNavImg,
+  EnableNavigationButton,
+} from './wrapper';
+import { IconChevronLeft, IconChevronRight } from '../Icon/index';
+import { ButtonSecondary, ButtonContent } from '../Button/index';
+import Lightbox from '../Lightbox/index';
+import EmbededVideo from '../Video/EmbededVideo';
+import QuickNavEmbeded from '../Video/QuickNavEmbeded';
+import Sphere from '../Sphere/Sphere';
+import { notEmpty } from '../../utils/formats';
+import ThreeSixty from '../ThreeSixty/ThreeSixty';
+import { Media } from '../../@types/codegen';
+import PubSub from '../../utils/pubsub/pubsub';
+import { DEFAULT_PLACEHOLDER_IMAGE } from '../../utils/constants';
+
+interface GalleryProps {
+  media?: Media[];
+  placeholderImage?: string;
+}
+
+const sliderSettings = {
+  dots: false,
+  arrows: false,
+  infinite: true,
+  speed: 300,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+};
+
+const Gallery = ({ media, placeholderImage }: GalleryProps) => {
+  const slider = useRef<Slider>(null);
+  const quickNavRef = useRef<HTMLUListElement>(null);
+  const isDragging = useRef(false);
+  const [index, setIndex] = useState(0);
+  const [lightbox, setLightbox] = useState(false);
+  const [navigationDisabled, setNavigationDisabled] = useState(false);
+
+  const beforeChange = useCallback((_: number, newIndex: number) => {
+    const element = quickNavRef.current?.querySelectorAll('li')?.[newIndex];
+    if (element) {
+      scrollIntoView(element, { scrollMode: 'if-needed', block: 'nearest', inline: 'nearest' });
+    }
+    setIndex(newIndex);
+  }, []);
+
+  const onMouseDown = useCallback(() => {
+    if (isDragging.current) {
+      isDragging.current = false;
+    }
+  }, []);
+  const onMouseMove = useCallback(() => {
+    if (!isDragging.current) {
+      isDragging.current = true;
+    }
+  }, []);
+
+  const onClick = useCallback(() => {
+    PubSub.publish('ImagesClick');
+    if (!isDragging.current && !lightbox && !!media?.length) {
+      setLightbox(true);
+    }
+  }, [lightbox, media]);
+
+  const nextImage = useCallback((): void => {
+    if (!slider || !slider.current) {
+      return;
+    }
+    slider.current.slickNext();
+  }, [slider]);
+
+  const prevImage = useCallback((): void => {
+    if (!slider || !slider.current) {
+      return;
+    }
+    slider.current.slickPrev();
+  }, [slider]);
+
+  const goTo = (target: number) => {
+    if (!slider || !slider.current) {
+      return;
+    }
+    if (slider.current) {
+      setIndex(target);
+      slider.current.slickGoTo(target);
+    }
+  };
+
+  const onDisableNavigation = () => {
+    if (!isDragging.current) setNavigationDisabled(true);
+  };
+  const onEnableNavigation = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    isDragging.current = false;
+    setNavigationDisabled(false);
+  };
+
+  const onToggleLightbox = useCallback(() => setLightbox(!lightbox), [lightbox]);
+
+  const mediaLength = media?.length || 0;
+  const placeholder = useMemo(
+    () => placeholderImage || DEFAULT_PLACEHOLDER_IMAGE,
+    [placeholderImage]
+  );
+
+  return (
+    <>
+      <Wrapper>
+        <Main>
+          <SliderWrapper onMouseDown={onMouseDown} onMouseMove={onMouseMove} onClick={onClick}>
+            <Slider
+              {...sliderSettings}
+              swipe={!navigationDisabled}
+              touchMove={!navigationDisabled}
+              swipeToSlide={!navigationDisabled}
+              ref={slider}
+              beforeChange={beforeChange}
+            >
+              {!!media?.length ? (
+                media.map((m, i) => (
+                  <Item key={m.files[0].url || i}>
+                    {m.type === 'image' && (
+                      <Image
+                        src={
+                          m.files[0].formats.filter(notEmpty).find((x) => x.format === '1170x')?.url
+                        }
+                        alt={`Bild ${i + 1}`}
+                      />
+                    )}
+                    {m.type === 'threesixty' && (
+                      <ThreeSixty
+                        urls={m.files.map((x) => x.url)}
+                        visible={i === index}
+                        onDisableNavigation={onDisableNavigation}
+                        navigationDisabled={navigationDisabled}
+                      />
+                    )}
+                    {m.type === 'embedded' && <EmbededVideo src={m.files[0].url} index={i + 1} />}
+                    {m.type === 'sphere' && (
+                      <Sphere
+                        visible={i === index}
+                        url={m.files[0].url}
+                        preview={m.files[0].url}
+                        onDisableNavigation={onDisableNavigation}
+                        navigationDisabled={navigationDisabled}
+                      />
+                    )}
+                  </Item>
+                ))
+              ) : (
+                <Item key={placeholder}>
+                  <Image src={placeholder} alt={`Bild 1`} />
+                </Item>
+              )}
+            </Slider>
+            {navigationDisabled && mediaLength > 1 && (
+              <EnableNavigationButton>
+                <ButtonSecondary onClick={onEnableNavigation} title="Stäng">
+                  <ButtonContent>Stäng</ButtonContent>
+                </ButtonSecondary>
+              </EnableNavigationButton>
+            )}
+          </SliderWrapper>
+          {!navigationDisabled && mediaLength > 1 && (
+            <>
+              <ArrowLeft onClick={prevImage} title="Föregående bild">
+                <IconChevronLeft block />
+              </ArrowLeft>
+              <ArrowRight onClick={nextImage} title="Nästa bild">
+                <IconChevronRight block />
+              </ArrowRight>
+            </>
+          )}
+        </Main>
+        <Alt>
+          <QuickNav ref={quickNavRef}>
+            {!!media?.length ? (
+              media.map((m, i) => {
+                const src =
+                  m.files[0].formats.filter(notEmpty).find((x) => x.format === '225x150')?.url ||
+                  m.files[0].url;
+                return (
+                  <QuickNavItem key={src || i} active={index === i}>
+                    <QuickNavBtn onClick={() => goTo(i)} title={`Gå till bild ${i + 1}`}>
+                      {m.type === 'image' && <QuickNavImg src={src} alt={`Bild ${i + 1}`} />}
+                      {m.type === 'threesixty' && <QuickNavImg src={src} alt={`Bild ${i + 1}`} />}
+                      {m.type === 'embedded' && <QuickNavEmbeded src={src} index={i} />}
+                      {m.type === 'sphere' && (
+                        <QuickNavImg src={m.files[0].url} alt={`Bild ${i + 1}`} />
+                      )}
+                    </QuickNavBtn>
+                  </QuickNavItem>
+                );
+              })
+            ) : (
+              <QuickNavItem key={placeholder} active>
+                <QuickNavBtn onClick={() => goTo(0)} title={`Gå till bild 0`}>
+                  <QuickNavImg src={placeholder} alt={`Bild 1`} />
+                </QuickNavBtn>
+              </QuickNavItem>
+            )}
+          </QuickNav>
+        </Alt>
+      </Wrapper>
+      {lightbox && !!media?.length && (
+        <Lightbox media={media} index={index} onClose={onToggleLightbox} />
+      )}
+    </>
+  );
+};
+
+export default Gallery;

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

@@ -1,9 +1,12 @@
 import styled, { css } from 'styled-components';
+
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
 import { Wrapper as Container } from '../Container/wrapper';
+
 const quickNavWidth = 83; // 75px + 8px
-export const Wrapper = styled.div `
+
+export const Wrapper = styled.div`
   ${(props) => props.theme.breakpoint.LtMd} {
     ${Container} & {
       margin-left: ${size(-3)};
@@ -23,7 +26,8 @@ export const Wrapper = styled.div `
     padding-right: ${quickNavWidth}px;
   }
 `;
-export const Main = styled.div `
+
+export const Main = styled.div`
   position: relative;
   height: 0;
   padding-bottom: 66.66666667%;
@@ -48,7 +52,8 @@ export const Main = styled.div `
     }
   }
 `;
-export const Alt = styled.div `
+
+export const Alt = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -71,7 +76,8 @@ export const Alt = styled.div `
     pointer-events: none;
   }
 `;
-export const Item = styled.div `
+
+export const Item = styled.div`
   position: relative;
   width: 100%;
   height: 100%;
@@ -86,7 +92,8 @@ export const Item = styled.div `
     transition: border-radius 150ms ease;
   }
 `;
-export const SliderWrapper = styled.div `
+
+export const SliderWrapper = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -99,6 +106,76 @@ export const SliderWrapper = styled.div `
     bottom: 0;
     left: 0;
     right: 0;
+    user-select: none;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+
+    .slick-list,
+    .slick-track {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  .slick-list {
+    position: relative;
+    display: block;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.dragging {
+      cursor: pointer;
+      cursor: hand;
+    }
+  }
+
+  .slick-track {
+    position: relative;
+    top: 0;
+    left: 0;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    &::before,
+    &::after {
+      content: '';
+      display: table;
+    }
+
+    &::after {
+      clear: both;
+    }
+  }
+
+  .slick-slide {
+    display: none;
+    float: left;
+    min-height: 1px;
+  }
+
+  .slick-loading {
+    .slick-track {
+      visibility: hidden;
+    }
+
+    img {
+      display: none;
+    }
+  }
+
+  .slick-initialized {
+    .slick-slide {
+      display: block;
+    }
+  }
+
+  .slick-slide.dragging img {
+    pointer-events: none;
   }
 
   ${(props) => props.theme.breakpoint.LtMd} {
@@ -126,7 +203,8 @@ export const SliderWrapper = styled.div `
     }
   }
 `;
-export const Image = styled.img `
+
+export const Image = styled.img`
   display: block;
   position: absolute;
   left: 0;
@@ -139,7 +217,8 @@ export const Image = styled.img `
   object-fit: cover;
   cursor: pointer;
 `;
-export const ImageFull = styled.img `
+
+export const ImageFull = styled.img`
   display: block;
   position: absolute;
   top: 0;
@@ -148,8 +227,10 @@ export const ImageFull = styled.img `
   height: 100%;
   object-fit: cover;
 `;
+
 // Arrow Nav
-const Arrow = styled(ButtonReset) `
+
+const Arrow = styled(ButtonReset)`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -195,14 +276,18 @@ const Arrow = styled(ButtonReset) `
     display: none;
   }
 `;
-export const ArrowLeft = styled(Arrow) `
+
+export const ArrowLeft = styled(Arrow)`
   left: ${size(2)};
 `;
-export const ArrowRight = styled(Arrow) `
+
+export const ArrowRight = styled(Arrow)`
   right: ${size(2)};
 `;
+
 // Quick Nav
-export const QuickNav = styled.ul `
+
+export const QuickNav = styled.ul`
   position: relative;
   max-height: 100%;
   list-style: none;
@@ -211,17 +296,26 @@ export const QuickNav = styled.ul `
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 `;
+
+type QuickNavItemProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLLIElement>,
+  HTMLLIElement
+> & {
+  active?: boolean;
+};
+
 export const QuickNavItem = styled.li.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-})) `
+  className: 'wayke__theme wayke__color--primary-text',
+}))<QuickNavItemProps>`
   position: relative;
 
   & + & {
     margin-top: ${size(1)};
   }
 
-  ${({ active }) => active &&
-    css `
+  ${({ active }) =>
+    active &&
+    css`
       :before {
         content: '';
         position: absolute;
@@ -234,7 +328,8 @@ export const QuickNavItem = styled.li.attrs(() => ({
       }
     `}
 `;
-export const QuickNavBtn = styled(ButtonReset) `
+
+export const QuickNavBtn = styled(ButtonReset)`
   position: relative;
   display: block;
   width: 100%;
@@ -266,7 +361,8 @@ export const QuickNavBtn = styled(ButtonReset) `
     transform: scale(0.95);
   }
 `;
-export const QuickNavImg = styled.img `
+
+export const QuickNavImg = styled.img`
   display: block;
   position: absolute;
   top: 0;
@@ -275,16 +371,20 @@ export const QuickNavImg = styled.img `
   height: 100%;
   object-fit: cover;
 `;
+
 // Media Button
-export const MediaButtonWrapper = styled.div `
+
+export const MediaButtonWrapper = styled.div`
   position: absolute;
   bottom: ${size(2)};
   left: 50%;
   transform: translateX(-50%);
   z-index: 1;
 `;
+
 // Sphere Close Button
-export const EnableNavigationButton = styled.div `
+
+export const EnableNavigationButton = styled.div`
   position: absolute;
   bottom: ${size(2)};
   left: 50%;

package/src/components/Grid/index.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { Wrapper, List, Item } from './wrapper';
+import ProductCard from '../ProductCard/index';
+import { Document } from '../../@types/search';
+import { numberSeparator } from '../../utils/formats';
+
+const resolveImage = (document: Document) => {
+  const img = document.featuredImage?.files?.[0]?.url;
+  if (img) {
+    return `${img}?w=567&q=72`;
+  }
+  return undefined;
+};
+
+interface GridProps {
+  documents?: Document[];
+  hashRoute?: boolean;
+  pathRoute?: string;
+  placeholderImage?: string;
+  onClickItem?: (id: string) => void;
+}
+
+const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, onClickItem }: GridProps) => {
+  if (!documents) {
+    return null;
+  }
+
+  return (
+    <Wrapper>
+      <List>
+        {documents.map((document) => {
+          const _path = pathRoute?.replace(/^\/|\/$/g, '');
+
+          const prefix = _path ? `/${_path}/` : '/';
+
+          const pathRouteUrl =
+            window.location.pathname === '/'
+              ? `${prefix}${document._id}`
+              : `${window.location.pathname}${prefix}${document._id}`;
+
+          return (
+            <Item key={document._id}>
+              <ProductCard
+                id={document._id}
+                onClick={onClickItem}
+                title={document.title}
+                pathRoute={pathRoute}
+                href={pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined}
+                image={resolveImage(document)}
+                placeholderImage={placeholderImage}
+                description={document.shortDescription}
+                uspList={[
+                  {
+                    title: document.modelYear,
+                  },
+                  {
+                    title: `${numberSeparator(document.mileage)} mil`,
+                  },
+                  {
+                    title: document.gearboxType,
+                  },
+                  {
+                    title: document.fuelType,
+                  },
+                ]}
+                price={`${numberSeparator(document.price)} kr`}
+                leasingPrice={
+                  document.leasingPrice !== undefined
+                    ? `${numberSeparator(document.leasingPrice)} kr`
+                    : undefined
+                }
+                oldPrice={
+                  document.oldPrice !== undefined && document.price < document.oldPrice
+                    ? `${numberSeparator(document.oldPrice)} kr`
+                    : undefined
+                }
+              />
+            </Item>
+          );
+        })}
+      </List>
+    </Wrapper>
+  );
+};
+
+export default Grid;

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

@@ -1,14 +1,18 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Wrapper = styled.div ``;
-export const List = styled.ul `
+
+export const Wrapper = styled.div``;
+
+export const List = styled.ul`
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   padding: 0;
   margin: ${size(-2)} ${size(-1)};
 `;
-export const Item = styled.li `
+
+export const Item = styled.li`
   flex: 1 1 auto;
   width: 100%;
   max-width: 100%;

package/src/components/Heading/index.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+
+import { size } from '../../layout/helpers';
+
+type HeadingBaseProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+> & {
+  noMargin?: boolean;
+};
+
+const HeadingBase = styled.div.attrs(() => ({
+  className: 'wayke__theme wayke__font--bold',
+}))<HeadingBaseProps>`
+  margin-top: 0;
+  margin-bottom: ${size(2)};
+  font-weight: normal;
+  line-height: 1.2;
+
+  ${({ noMargin }) =>
+    noMargin &&
+    css`
+      margin-bottom: 0;
+    `}
+`;
+
+export const H1 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
+  as: props.as || 'h1',
+}))`
+  font-size: 1.875rem;
+`;
+
+export const H2 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
+  as: props.as || 'h2',
+}))`
+  font-size: 1.5rem;
+`;
+
+/*
+export const H3 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
+  as: props.as || 'h3',
+}))`
+  font-size: 1.125rem;
+`;
+*/
+
+export const H4 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
+  as: props.as || 'h4',
+}))`
+  font-size: 1rem;
+`;
+
+export const H5 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
+  as: props.as || 'h5',
+}))`
+  font-size: 0.875rem;
+`;
+
+/*
+export const H6 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
+  as: props.as || 'h6',
+}))`
+  font-size: 0.67rem;
+`;
+*/
+
+export const VisualHeading = styled.div.attrs(() => ({
+  className: 'wayke__theme wayke__font--bold',
+}))`
+  font-size: 1em;
+`;