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

package/src/components/InsuranceOptions/InsuranceModal.tsx

@@ -1,253 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import Modal from '../Modal/index';
-import Content from '../Content/index';
-import { Repeat, RepeatTiny, RepeatSmall } from '../Repeat/index';
-import LogoBox from '../LogoBox/index';
-import DetailBox from '../DetailBox/index';
-import ExtendInfo from '../ExtendInfo/index';
-import Snackbar from '../Snackbar/index';
-import { UtilityTextBold } from '../Utility/index';
-import InputLabel from '../InputLabel/index';
-import InputText from '../InputText/index';
-import InputCheckbox from '../InputCheckbox/index';
-import InputSelect, { OptionProps } from '../InputSelect/index';
-import { H4 } from '../Heading/index';
-import { InputGroup, InputGroupColumn } from '../InputGroup/index';
-import { ButtonPrimary, ButtonContent, ButtonInline } from '../Button/index';
-import { ContentLogo, ContentLogoText, ContentLogoMedia } from '../ContentLogo/index';
-import { ColumnRow, ColumnRowItem } from '../ColumnRow/index';
-import useInsuranceCalculation from '../../hooks/useInsurance';
-import { ssnIsValid } from '../../utils/ssn';
-import Loader from '../Loader/index';
-import { numberSeparator } from '../../utils/formats';
-import { DrivingDistance, InsuranceOption, Branch } from '../../@types/codegen/types';
-import PubSub from '../../utils/pubsub/pubsub';
-
-interface FormData {
-  ssn: string;
-  drivingDistance: DrivingDistance;
-}
-
-interface InsuranceModal {
-  id: string;
-  branch?: Branch | null;
-  onClose: () => void;
-  insuranceOptions: InsuranceOption;
-}
-
-const InsuranceModal = ({ id, branch, onClose, insuranceOptions }: InsuranceModal) => {
-  const [form, setForm] = useState<FormData>({
-    ssn: '',
-    drivingDistance: DrivingDistance.Between0And1000,
-  });
-  const [payload, setPayload] = useState<FormData>();
-  const { loading, data, error } = useInsuranceCalculation(
-    id,
-    branch?.id ? branch?.id : undefined,
-    ssnIsValid(payload?.ssn) ? payload?.ssn : undefined,
-    payload?.drivingDistance
-  );
-
-  const onChangeSsn = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => setForm({ ...form, ssn: e.currentTarget.value }),
-    [form]
-  );
-
-  const onChangeDrivingDistance = useCallback(
-    (e: React.ChangeEvent<HTMLSelectElement>) =>
-      setForm({ ...form, drivingDistance: e.currentTarget.value as DrivingDistance }),
-    [form]
-  );
-
-  const onShowInsurances = useCallback(() => {
-    PubSub.publish('InsuranceInterest');
-    setPayload(form);
-  }, [form]);
-
-  const onKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.keyCode === 13 && ssnIsValid(form.ssn) && !loading) {
-        onShowInsurances();
-      }
-    },
-    [form]
-  );
-
-  const options: OptionProps[] = [
-    { value: DrivingDistance.Between0And1000, displayName: '0 - 1000' },
-    { value: DrivingDistance.Between1000And1500, displayName: '1000 - 1500' },
-    { value: DrivingDistance.Between1500And2000, displayName: '1500 - 2000' },
-    { value: DrivingDistance.Between2000And2500, displayName: '2000 - 2500' },
-    { value: DrivingDistance.Over2500, displayName: '2500+' },
-  ];
-
-  return (
-    <Modal title="Försäkring" onClose={onClose}>
-      {(insuranceOptions?.description || insuranceOptions?.logotype) && (
-        <Repeat>
-          <ContentLogo>
-            {insuranceOptions.description && (
-              <ContentLogoText>
-                <Content>
-                  <p>{insuranceOptions.description}</p>
-                </Content>
-              </ContentLogoText>
-            )}
-            {insuranceOptions.logotype && (
-              <ContentLogoMedia>
-                <LogoBox
-                  logo={insuranceOptions.logotype}
-                  alt={insuranceOptions.name || 'Logotyp'}
-                  wide
-                />
-              </ContentLogoMedia>
-            )}
-          </ContentLogo>
-        </Repeat>
-      )}
-
-      <Repeat>
-        <RepeatSmall>
-          <RepeatTiny>
-            <InputGroup>
-              <InputGroupColumn>
-                <InputLabel htmlFor="input-insurance-personalnumber">Personnummer</InputLabel>
-                <InputText
-                  placeholder="ÅÅÅÅMMDD-XXXX"
-                  label="Personnummer"
-                  value={form.ssn}
-                  onChange={onChangeSsn}
-                  onKeyDown={onKeyDown}
-                  id="input-insurance-personalnumber"
-                />
-              </InputGroupColumn>
-              <InputGroupColumn>
-                <InputLabel htmlFor="input-insurance-mileage">
-                  Uppskattad körsträcka per år
-                </InputLabel>
-                <InputSelect
-                  value={form.drivingDistance}
-                  onChange={onChangeDrivingDistance}
-                  options={options}
-                  unit="mil"
-                  title="Uppskattad körsträcka per år"
-                />
-              </InputGroupColumn>
-            </InputGroup>
-          </RepeatTiny>
-          <RepeatTiny>
-            <ButtonPrimary
-              fullWidth
-              disabled={!ssnIsValid(form.ssn) || loading}
-              onClick={onShowInsurances}
-            >
-              <ButtonContent>Visa försäkringar</ButtonContent>
-            </ButtonPrimary>
-          </RepeatTiny>
-        </RepeatSmall>
-        {false && (
-          <RepeatSmall>
-            <InputCheckbox id="input-insurance-save-personalnumber">
-              Spara personnummer på denna enhet
-            </InputCheckbox>
-          </RepeatSmall>
-        )}
-        <RepeatSmall>
-          <Content small>
-            <p>
-              Spara personnummer på denna dator för att direkt visa försäkringskostnaderna i Wayke.
-              Personnumret lagras inte hos Wayke utan finns bara sparad i din webbläsare.
-            </p>
-          </Content>
-        </RepeatSmall>
-      </Repeat>
-
-      {loading && (
-        <Repeat>
-          <Loader />
-        </Repeat>
-      )}
-
-      {error && (
-        <Repeat>
-          <Snackbar severity="error" icon heading="Ett fel har inträffat">
-            Kunde inte hämta försäkringar. Vänligen försök igen.
-          </Snackbar>
-        </Repeat>
-      )}
-
-      <>
-        {data?.insurances && (
-          <Repeat>
-            {data?.insurances.map((insurance) => (
-              <Repeat key={insurance.name}>
-                <DetailBox
-                  heading={`${numberSeparator(insurance.price)} ${insurance.unit}`}
-                  description={insurance.name}
-                >
-                  <Repeat>
-                    <>
-                      {insurance.description && (
-                        <RepeatTiny>
-                          <Content>
-                            <p>{insurance.description}</p>
-                          </Content>
-                        </RepeatTiny>
-                      )}
-                    </>
-                    <>
-                      {insurance.url && (
-                        <RepeatTiny>
-                          <ButtonInline
-                            as="a"
-                            href={insurance.url || ''}
-                            target="_blank"
-                            rel="noopener noreferrer nofollow"
-                          >
-                            Förköpsinformation och villkor (öppnas i ny flik)
-                          </ButtonInline>
-                        </RepeatTiny>
-                      )}
-                    </>
-                  </Repeat>
-                  {insurance.items && insurance.items.length > 0 && (
-                    <Repeat>
-                      <H4>Försäkringen innehåller</H4>
-                      {insurance.items.map((item) => (
-                        <RepeatSmall key={item.name || ''}>
-                          <ExtendInfo title={item.name || ''}>{item.description}</ExtendInfo>
-                        </RepeatSmall>
-                      ))}
-                    </Repeat>
-                  )}
-                  {insurance.addons && insurance.addons.length > 0 && (
-                    <Repeat>
-                      <H4>Välj till</H4>
-                      {insurance.addons.map((addon) => (
-                        <RepeatSmall key={addon.title || ''}>
-                          <ColumnRow>
-                            <ColumnRowItem>
-                              <ExtendInfo title={addon.title || ''}>{addon.description}</ExtendInfo>
-                            </ColumnRowItem>
-                            <ColumnRowItem>
-                              <UtilityTextBold>
-                                +{addon.price} {addon.unit}
-                              </UtilityTextBold>
-                            </ColumnRowItem>
-                          </ColumnRow>
-                        </RepeatSmall>
-                      ))}
-                    </Repeat>
-                  )}
-                </DetailBox>
-              </Repeat>
-            ))}
-          </Repeat>
-        )}
-      </>
-    </Modal>
-  );
-};
-
-export default InsuranceModal;

package/src/components/InsuranceOptions/index.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { InsuranceOption, Branch } from '../../@types/codegen/types';
-import Insurance from './Insurance';
-import InsuranceFree from './InsuranceFree';
-
-interface InsuranceOptions {
-  id: string;
-  branch?: Branch | null;
-  insuranceOptions: InsuranceOption[];
-}
-
-const InsuranceOptions = ({ id, branch, insuranceOptions }: InsuranceOptions) => {
-  if (!insuranceOptions.length) {
-    return null;
-  }
-
-  if (insuranceOptions.length > 0) {
-    if (insuranceOptions[0].requiresDistance && insuranceOptions[0].requiresPersonalNumber)
-      return <Insurance id={id} branch={branch} insuranceOptions={insuranceOptions} />;
-
-    return <InsuranceFree insuranceOptions={insuranceOptions} />;
-  }
-
-  return null;
-};
-
-export default InsuranceOptions;

package/src/components/Lightbox/index.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import { Wrapper, UiBlock, Item, Img, CloseBtn } from './wrapper';
-import { IconCancel } from '../Icon/index';
-import EmbeddedVideoLightbox from '../Video/EmbeddedVideoLightbox';
-import SphereLightbox from '../Sphere/SphereLightbox';
-import ThreeSixtyLightbox from '../ThreeSixty/ThreeSixtLightbox';
-import { Media } from '../../@types/codegen/types';
-
-interface LightboxProps {
-  index: number;
-  media: Media[];
-  onClose: () => void;
-}
-
-const Lightbox = ({ index, media, onClose }: LightboxProps) => {
-  const onRef = (ref: HTMLDivElement | null) => {
-    if (ref) {
-      setTimeout(() => {
-        ref.scrollIntoView();
-      }, 300);
-    }
-  };
-
-  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.keyCode === 27) {
-      onClose();
-    }
-  };
-
-  return (
-    <Wrapper ref={(ref) => ref?.focus()} onKeyDown={onKeyDown} tabIndex={0}>
-      <UiBlock onClick={onClose} aria-hidden />
-      {media.map((m, i) => (
-        <Item key={i} ref={index === i ? onRef : undefined}>
-          {m.type === 'image' && (
-            <Img id={`lightbox-image-${i}`} src={m.files[0].url} alt={`Bild ${i + 1}`} />
-          )}
-          {m.type === 'threesixty' && <ThreeSixtyLightbox urls={m.files.map((x) => x.url)} />}
-          {m.type === 'sphere' && <SphereLightbox url={m.files[0].url} />}
-          {m.type === 'embedded' && <EmbeddedVideoLightbox url={m.files[0].url} />}
-        </Item>
-      ))}
-      <CloseBtn onClick={onClose} title="Stäng">
-        <IconCancel block />
-      </CloseBtn>
-    </Wrapper>
-  );
-};
-
-export default Lightbox;

package/src/components/Lightbox/wrapper.tsx

@@ -1,97 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-
-export const Wrapper = styled.div`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: ${size(3)};
-  z-index: 90;
-  overflow: auto;
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    padding: ${size(2)};
-  }
-`;
-
-export const UiBlock = styled.div.attrs(() => ({
-  role: 'button',
-}))`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.3);
-  z-index: -1;
-`;
-
-export const Item = styled.div`
-  position: relative;
-
-  & + & {
-    margin-top: ${size(1)};
-  }
-`;
-
-export const Img = styled.img`
-  position: relative;
-  display: block;
-  max-width: 100%;
-  max-height: calc(100vh - ${size(6)});
-  margin: 0 auto;
-  z-index: 1;
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    max-height: calc(100vh - ${size(4)});
-  }
-`;
-
-export const CloseBtn = styled(ButtonReset)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: ${size(2)};
-  right: ${size(2)};
-  width: ${size(5)};
-  height: ${size(5)};
-  border-radius: 50%;
-  background-color: ${(props) => props.theme.color.bg};
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transform-origin: 50% 50%;
-  transition: 200ms ease, transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-  z-index: 1;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${(props) => props.theme.color.hoverOverlay};
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.97);
-  }
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    top: ${size(1)};
-    right: ${size(1)};
-  }
-`;

package/src/components/Loader/index.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-import { Spinner, Wrapper } from './wrapper';
-import { SrOnly } from '../SrOnly/index';
-
-interface Props {
-  inline?: boolean;
-  center?: boolean;
-}
-
-const Loader = ({ inline, center }: Props) => (
-  <Wrapper inline={inline} center={center}>
-    <Spinner aria-hidden="true" />
-    <SrOnly>Laddar...</SrOnly>
-  </Wrapper>
-);
-
-export default Loader;

package/src/components/Loader/wrapper.tsx

@@ -1,50 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { rotate } from '../../layout/keyframes';
-
-export const Spinner = styled.div`
-  display: block;
-  margin: 0 auto;
-  width: ${size(4)};
-  height: ${size(4)};
-  border-radius: 50%;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  animation: ${rotate} 600ms linear infinite;
-`;
-
-type WrapperProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
-> & {
-  inline?: boolean;
-  center?: boolean;
-};
-
-export const Wrapper = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-  role: 'status',
-}))<WrapperProps>`
-  ${({ inline }) =>
-    inline &&
-    css`
-      display: inline-block;
-      vertical-align: middle;
-      color: currentColor !important;
-
-      ${Spinner} {
-        width: 1em;
-        height: 1em;
-      }
-    `}
-
-  ${({ center }) =>
-    center &&
-    css`
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    `}
-`;

package/src/components/LogoBox/index.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-import { Logo } from './wrapper';
-
-interface ILogoBox {
-  logo: string;
-  logo2x?: string | null;
-  alt?: string;
-  wide?: boolean;
-}
-
-const LogoBox = ({ logo, logo2x, alt, wide }: ILogoBox) => {
-  let logoRetina = logo;
-
-  if (logo2x) {
-    logoRetina = `${logo2x} 2x`;
-  }
-
-  return <Logo src={logo} srcSet={logoRetina} alt={alt} wide={wide} />;
-};
-
-export default LogoBox;

package/src/components/LogoBox/wrapper.tsx

@@ -1,19 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-type LogoProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-  wide?: boolean;
-};
-
-export const Logo = styled.img<LogoProps>`
-  display: block;
-  max-width: ${size(9.5)};
-  max-height: ${size(6)};
-
-  ${({ wide }) =>
-    wide &&
-    css`
-      max-width: ${size(20)};
-    `}
-`;

package/src/components/Map/index.tsx

@@ -1,62 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import useSettings from '../../State/Settings/useSettings';
-
-import { Wrapper, Image, Placeholder, PlaceholderAction } from './wrapper';
-import { ButtonSecondary, ButtonContent } from '../Button/index';
-import { Position, Maybe } from '../../@types/codegen/types';
-
-interface StaticMapProps {
-  position?: Maybe<Position>;
-}
-
-const StaticMap = ({ position }: StaticMapProps) => {
-  const { googleMapsApiKey, googleMapsMarker } = useSettings();
-  const [visible, setVisible] = useState(false);
-
-  const onShowMap = useCallback((e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-    if (googleMapsApiKey) {
-      e.preventDefault();
-      setVisible(true);
-    }
-  }, []);
-
-  if (!position) {
-    return null;
-  }
-
-  const { latitude, longitude } = position;
-
-  if (visible && googleMapsApiKey) {
-    return (
-      <Wrapper
-        href={`http://maps.google.com/maps?q=${latitude},${longitude}`}
-        title="Visa på Google Maps"
-        target="_blank"
-        rel="nofollow noopener noreferrer"
-      >
-        <Image
-          src={`https://maps.googleapis.com/maps/api/staticmap?center=${latitude},${longitude}&zoom=10&size=640x280&maptype=roadmap&markers=${
-            googleMapsMarker ? `icon:${encodeURIComponent(googleMapsMarker)}` : ''
-          }%7C${latitude},${longitude}&key=${googleMapsApiKey}`}
-          alt="Karta"
-        />
-      </Wrapper>
-    );
-  }
-  return (
-    <Placeholder
-      href={`http://maps.google.com/maps?q=${latitude},${longitude}`}
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-      onClick={onShowMap}
-    >
-      <PlaceholderAction>
-        <ButtonSecondary as="div">
-          <ButtonContent>Visa karta</ButtonContent>
-        </ButtonSecondary>
-      </PlaceholderAction>
-    </Placeholder>
-  );
-};
-
-export default StaticMap;

package/src/components/Map/wrapper.tsx

@@ -1,29 +0,0 @@
-import styled from 'styled-components';
-
-export const Wrapper = styled.a`
-  display: block;
-`;
-
-export const Image = styled.img`
-  display: block;
-  width: 100%;
-  border-radius: 3px;
-`;
-
-export const Placeholder = styled.a`
-  display: block;
-  position: relative;
-  width: 100%;
-  height: 0;
-  padding-bottom: 43.75%; // Proportions of Google Static Map (640x280)
-  background-image: linear-gradient(-15deg, #dfe4ce, #c1d6ea, #dfe4ce);
-  border-radius: 3px;
-  color: ${(props) => props.theme.color.textDark};
-`;
-
-export const PlaceholderAction = styled.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;

package/src/components/Modal/index.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react';
-
-import { Portal, PortalNamespace } from '../Portal/index';
-
-import { H1 } from '../Heading/index';
-import { IconCancel } from '../Icon/index';
-import {
-  Body,
-  Content,
-  Dialog,
-  Header,
-  Heading,
-  UiBlock,
-  Wrapper,
-  Close,
-  CloseBtn,
-} from './wrapper';
-
-interface ModalProps {
-  id?: string | null;
-  title: string | null;
-  children: React.ReactNode;
-  onClose: (e: React.MouseEvent<HTMLDivElement | HTMLButtonElement, MouseEvent>) => void;
-}
-
-const Modal = ({ id, title, onClose, children }: ModalProps) => {
-  return (
-    <Portal id={id || PortalNamespace.DefaultPortal}>
-      <Wrapper onClick={(e) => e.stopPropagation()}>
-        <UiBlock onClick={onClose} title="Stäng modal" />
-        <Dialog>
-          <Content>
-            <Header>
-              <Heading>
-                <H1 noMargin>{title}</H1>
-              </Heading>
-              <Close>
-                <CloseBtn onClick={onClose} title="Stäng modal">
-                  <IconCancel block />
-                </CloseBtn>
-              </Close>
-            </Header>
-            <Body>{children}</Body>
-          </Content>
-        </Dialog>
-      </Wrapper>
-    </Portal>
-  );
-};
-
-export default Modal;