@wayke-se/components-react 3.0.0-beta.6 → 3.0.0-beta.8

package/src/components/Gallery/index.tsx

@@ -1,225 +0,0 @@
-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 { 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 <p>heheh</p>;
-
-  /*
-  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
-                  .filter((x) => x.type !== 'sphere')
-                  .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} />}
-                    </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/src/components/Grid/index.tsx

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

@@ -1,72 +0,0 @@
-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;
-`;

package/src/components/Icon/index.tsx

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-
-type SharedIconProps = {
-  block?: boolean;
-};
-
-type IconProps = React.SVGProps<SVGSVGElement> & SharedIconProps;
-
-const Icon = styled.svg.attrs(() => ({
-  xmlns: 'http://www.w3.org/2000/svg',
-}))<IconProps>`
-  display: inline-block;
-  vertical-align: middle;
-  width: 1em;
-  height: 1em;
-  fill: currentColor;
-
-  ${({ block }) =>
-    block &&
-    css`
-      display: block;
-    `}
-`;
-
-type IconInfoProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> &
-  SharedIconProps;
-
-export const IconInfo = ({ block }: IconInfoProps) => (
-  <Icon viewBox="0 0 24 24" block={block}>
-    <path d="M12 0C5.371 0 0 5.371 0 12s5.371 12 12 12 12-5.371 12-12S18.629 0 12 0zm0 2c5.5234 0 10 4.4766 10 10s-4.4766 10-10 10S2 17.5234 2 12 6.4766 2 12 2zm0 3.8125c-.1836 0-.336-.004-.5.0313-.164.0351-.3164.125-.4375.2187-.121.0938-.211.2227-.2813.375s-.0937.332-.0937.5625c0 .2266.0234.4063.0938.5625.0703.1563.1601.2813.2812.375.121.0938.2734.1484.4375.1875.164.039.3164.0625.5.0625.1797 0 .371-.0234.5313-.0625.1601-.039.2851-.0938.4062-.1875.121-.0938.211-.2188.2813-.375.0703-.1523.125-.336.125-.5625 0-.2305-.0547-.4102-.125-.5625-.0704-.1523-.1602-.2813-.2813-.375-.121-.0938-.246-.1836-.4063-.2188-.1601-.0351-.3515-.0312-.5312-.0312zm-1.2188 3.3438v8.9687h2.4375V9.1562z" />
-  </Icon>
-);
-
-export const IconCancel = ({ block }: IconInfoProps) => (
-  <Icon viewBox="0 0 16 16" block={block}>
-    <path d="M15.7 14.3c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3s-.5-.1-.7-.3L8 9.4l-6.3 6.3c-.2.2-.4.3-.7.3s-.5-.1-.7-.3c-.4-.4-.4-1 0-1.4L6.6 8 .3 1.7C-.1 1.3-.1.7.3.3c.4-.4 1-.4 1.4 0L8 6.6 14.3.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L9.4 8l6.3 6.3z" />
-  </Icon>
-);
-
-export const IconChevronDown = ({ block }: IconInfoProps) => (
-  <Icon viewBox="0 0 18 18" block={block}>
-    <path d="M17.7 5L9 13.7.3 5l.7-.7 8 8 8-8 .7.7z" />
-  </Icon>
-);
-
-export const IconChevronLeft = ({ block }: IconInfoProps) => (
-  <Icon viewBox="0 0 18 18" block={block}>
-    <path d="M13 17.7L4.3 9 13 .3l.7.7-8 8 8 8-.7.7z" />
-  </Icon>
-);
-
-export const IconChevronRight = ({ block }: IconInfoProps) => (
-  <Icon viewBox="0 0 18 18" block={block}>
-    <path d="M5 .3L13.7 9 5 17.7l-.7-.7 8-8-8-8L5 .3z" />
-  </Icon>
-);
-
-export const IconCheck = ({ block }: IconInfoProps) => (
-  <Icon viewBox="0 0 16 16" block={block}>
-    <path d="M15.6 4.3l-9.3 9.4c-.5.5-1.4.5-1.9 0l-4-4c-.5-.5-.5-1.4 0-1.9s1.3-.5 1.9 0l3.1 3.1 8.4-8.5c.5-.5 1.4-.5 1.9 0s.4 1.3-.1 1.9z" />
-  </Icon>
-);
-
-export const IconRadio = ({ block }: IconInfoProps) => (
-  <Icon viewBox="0 0 16 16" block={block}>
-    <path d="M13 8c0 2.8-2.2 5-5 5s-5-2.2-5-5 2.2-5 5-5 5 2.2 5 5zm3 0c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8zm-1 0c0-3.9-3.1-7-7-7S1 4.1 1 8s3.1 7 7 7 7-3.1 7-7z" />
-  </Icon>
-);
-
-export const IconSearch = ({ block }: IconInfoProps) => (
-  <Icon viewBox="0 0 16 16" block={block}>
-    <path d="M15.5 15.3L11 10.8c1.2-1.1 2-2.7 2-4.5C13 2.9 10.2.1 6.8.1S.5 2.8.5 6.2s2.8 6.2 6.2 6.2c1.3 0 2.5-.4 3.5-1.1l4.6 4.6.7-.6zM1.4 6.2C1.4 3.3 3.8 1 6.7 1S12 3.3 12 6.2c0 1.5-.7 2.9-1.7 3.9l-.7.5c-.8.5-1.8.8-2.8.8-3 .1-5.4-2.3-5.4-5.2z" />
-  </Icon>
-);
-
-export const IconExclamationCircle = ({ block }: IconInfoProps) => (
-  <Icon viewBox="0 0 32 32" block={block}>
-    <path d="M14.482 21.893c0-0.857 0.694-1.551 1.551-1.551s1.551 0.694 1.551 1.551c0 0.857-0.694 1.551-1.551 1.551s-1.551-0.694-1.551-1.551zM16.033 2.838c-7.271 0-13.187 5.916-13.187 13.187s5.916 13.187 13.187 13.187 13.187-5.916 13.187-13.187c0-7.271-5.916-13.187-13.187-13.187zM16.033 27.203c-6.163 0-11.178-5.015-11.178-11.178s5.015-11.178 11.178-11.178c6.164 0 11.178 5.015 11.178 11.178s-5.014 11.178-11.178 11.178zM16.033 8.308c-0.555 0-1.004 0.45-1.004 1.004v8.227c0 0.555 0.45 1.004 1.004 1.004s1.004-0.45 1.004-1.004v-8.227c0-0.555-0.45-1.004-1.004-1.004z" />
-  </Icon>
-);
-
-export const IconExclamationTriangle = ({ block }: IconInfoProps) => (
-  <Icon viewBox="0 0 32 32" block={block}>
-    <path d="M15.951 19.663c-0.457 0-0.828-0.37-0.828-0.828v-4.357c0-0.457 0.37-0.828 0.828-0.828s0.828 0.37 0.828 0.828v4.357c0 0.457-0.371 0.828-0.828 0.828zM15.952 22.906c-0.305 0-0.606-0.126-0.821-0.341s-0.338-0.514-0.338-0.818 0.122-0.606 0.338-0.821c0.431-0.43 1.209-0.43 1.639 0 0.215 0.215 0.341 0.516 0.341 0.821s-0.126 0.603-0.341 0.818c-0.215 0.215-0.513 0.341-0.818 0.341zM27.049 27.070h-22.196c-0.352 0-0.677-0.186-0.855-0.489s-0.184-0.677-0.014-0.985l11.098-20.105c0.175-0.317 0.508-0.513 0.87-0.513s0.695 0.197 0.87 0.513l11.098 20.105c0.17 0.308 0.165 0.683-0.014 0.985s-0.504 0.489-0.856 0.489zM6.536 25.083h18.83l-9.415-17.056-9.415 17.056z" />
-  </Icon>
-);

package/src/components/InputCheckbox/index.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-
-import { Input, Label, LabelText, Wrapper } from './wrapper';
-
-type Props = React.DetailedHTMLProps<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
-> & {
-  id: string;
-  children: React.ReactNode;
-};
-
-const InputCheckbox = ({ children, ...props }: Props) => {
-  const { id } = props;
-  return (
-    <Wrapper aria-labelledby={id ? `${id}-label` : undefined}>
-      <Input
-        {...(props as React.DetailedHTMLProps<
-          React.InputHTMLAttributes<HTMLInputElement>,
-          HTMLInputElement
-        >)}
-      />
-      <Label id={`${id}-label`} htmlFor={id}>
-        <LabelText>{children}</LabelText>
-      </Label>
-    </Wrapper>
-  );
-};
-
-export default InputCheckbox;

package/src/components/InputLabel/index.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import { Wrapper } from './wrapper';
-
-interface Props {
-  children: string;
-  htmlFor?: string;
-}
-
-const InputLabel = ({ children, htmlFor }: Props) => (
-  <Wrapper htmlFor={htmlFor}>{children}</Wrapper>
-);
-
-export default InputLabel;

package/src/components/InputSearch/index.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Search, Action, ActionBtn, Input, Label } from './wrapper';
-import { IconSearch } from '../Icon/index';
-
-type InputProps = React.DetailedHTMLProps<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
->;
-
-type Props = InputProps & {
-  placeholder: string;
-  label: string;
-  value?: string;
-  id: string;
-  onSearch: () => void;
-};
-
-const InputSearch = React.forwardRef(
-  (
-    { placeholder, label, value, id, onSearch, onChange, onKeyDown }: Props,
-    ref:
-      | ((instance: HTMLDivElement | null) => void)
-      | React.RefObject<HTMLDivElement>
-      | null
-      | undefined
-  ) => (
-    <Wrapper ref={ref}>
-      <Label htmlFor={id}>{label}</Label>
-      <Search>
-        <Input
-          placeholder={placeholder}
-          name="search"
-          value={value}
-          id={id}
-          onChange={onChange}
-          onKeyDown={onKeyDown}
-        />
-      </Search>
-      <Action>
-        <ActionBtn onClick={onSearch} title={`Genomför ${label}`} aria-label={`Genomför ${label}`}>
-          <IconSearch block />
-        </ActionBtn>
-      </Action>
-    </Wrapper>
-  )
-);
-
-InputSearch.displayName = 'InputSearch';
-
-export default InputSearch;

package/src/components/InputSelect/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Select, Option, Icon } from './wrapper';
-import { IconChevronDown } from '../Icon/index';
-
-export interface OptionProps {
-  value: number | string;
-  displayName?: number | string | null;
-}
-
-interface Props {
-  value?: string | number;
-  options?: OptionProps[];
-  unit?: string;
-  title: string;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-}
-
-const InputSelect = ({ value, options, onChange, unit, title }: Props) => (
-  <Wrapper>
-    <Select value={value} onChange={onChange} title={title} aria-label={title}>
-      {options?.map((option) => (
-        <Option key={option.value} value={option.value}>
-          {option.displayName || option.value}
-          {unit ? ` ${unit}` : ''}
-        </Option>
-      ))}
-    </Select>
-    <Icon>
-      <IconChevronDown block />
-    </Icon>
-  </Wrapper>
-);
-
-export default InputSelect;

package/src/components/InputText/index.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Input } from './wrapper';
-
-type Props = React.DetailedHTMLProps<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
-> & {
-  value: string;
-  placeholder: string;
-  label: string;
-};
-
-const InputText = ({ placeholder, label, value, id, onChange, onKeyDown }: Props) => (
-  <Wrapper>
-    <Input
-      placeholder={placeholder}
-      value={value}
-      id={id}
-      aria-label={label}
-      onChange={onChange}
-      onKeyDown={onKeyDown}
-    />
-  </Wrapper>
-);
-
-export default InputText;

package/src/components/InsuranceOptions/Insurance.tsx

@@ -1,60 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { Repeat, RepeatTiny } from '../Repeat/index';
-import { VisualHeading } from '../Heading/index';
-import OptionBox from '../OptionBox/index';
-import { OptionBoxHeading, OptionBoxContent } from '../OptionBox/wrapper';
-import { ButtonInline } from '../Button/index';
-import { InsuranceOption, Branch } from '../../@types/codegen';
-import InsuranceModal from './InsuranceModal';
-
-interface InsuranceOptions {
-  id: string;
-  branch?: Branch | null;
-  insuranceOptions: InsuranceOption[];
-}
-
-const Insurance = ({ id, branch, insuranceOptions }: InsuranceOptions) => {
-  const [modal, setModal] = useState(false);
-  const toggleModal = useCallback(() => setModal(!modal), [modal]);
-  if (!insuranceOptions.length) {
-    return null;
-  }
-
-  return (
-    <>
-      {modal && (
-        <InsuranceModal
-          id={id}
-          branch={branch}
-          onClose={toggleModal}
-          insuranceOptions={insuranceOptions[0]}
-        />
-      )}
-      <Repeat>
-        <RepeatTiny>
-          <VisualHeading>Välj till försäkring</VisualHeading>
-        </RepeatTiny>
-        <RepeatTiny>
-          <>
-            {insuranceOptions.map((insuranceOption, index) => (
-              <OptionBox
-                key={`${insuranceOption.url}-${index}`}
-                logo={insuranceOption.logotype || undefined}
-                logoAlt={insuranceOption.name || 'Logotyp'}
-              >
-                <OptionBoxHeading>Få prisförslag</OptionBoxHeading>
-                <OptionBoxContent>
-                  <p>
-                    <ButtonInline onClick={toggleModal}>Mer information</ButtonInline>
-                  </p>
-                </OptionBoxContent>
-              </OptionBox>
-            ))}
-          </>
-        </RepeatTiny>
-      </Repeat>
-    </>
-  );
-};
-
-export default Insurance;