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

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;
+`;

package/src/components/Icon/index.tsx

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

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

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import styled, { css } from 'styled-components';
+
 import { size } from '../../layout/helpers';
+
 export const Label = styled.label.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-})) `
+  className: 'wayke__theme wayke__color--primary-text',
+}))`
   position: relative;
   display: flex;
   align-items: flex-start;
@@ -31,12 +33,14 @@ export const Label = styled.label.attrs(() => ({
     margin-top: -2px;
   }
 `;
-export const Wrapper = styled((props) => React.createElement("div", { ...props })).attrs(({ type, checked }) => ({
-    role: type || 'checkbox',
-    'aria-checked': checked,
-})) `
-  ${({ error }) => error &&
-    css `
+
+export const Wrapper = styled((props) => <div {...props} />).attrs(({ type, checked }) => ({
+  role: type || 'checkbox',
+  'aria-checked': checked,
+}))`
+  ${({ error }) =>
+    error &&
+    css`
       ${Label} {
         color: ${(props) => props.theme.color.ui.negative};
 
@@ -46,10 +50,13 @@ export const Wrapper = styled((props) => React.createElement("div", { ...props }
       }
     `}
 `;
-export const Input = styled((props) => (React.createElement("input", { ...props, className: `${props.checked ? 'checked' : undefined} ${props.className}` }))).attrs(({ type, checked }) => ({
-    checked,
-    type: type || 'checkbox',
-})) `
+
+export const Input = styled((props) => (
+  <input {...props} className={`${props.checked ? 'checked' : undefined} ${props.className}`} />
+)).attrs(({ type, checked }) => ({
+  checked,
+  type: type || 'checkbox',
+}))`
   position: fixed;
   left: -9999px;
   opacity: 0;
@@ -74,6 +81,7 @@ export const Input = styled((props) => (React.createElement("input", { ...props,
     }
   }
 `;
-export const LabelText = styled.div `
+
+export const LabelText = styled.div`
   color: ${(props) => props.theme.color.textDark};
 `;

package/{dist-src/components/InputGroup/index.js → src/components/InputGroup/index.tsx}

@@ -1,13 +1,16 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const InputGroup = styled.div `
+
+export const InputGroup = styled.div`
   ${(props) => props.theme.breakpoint.Sm} {
     display: flex;
     align-items: flex-start;
     margin: ${size(-0.5)};
   }
 `;
-export const InputGroupColumn = styled.div `
+
+export const InputGroupColumn = styled.div`
   ${(props) => props.theme.breakpoint.LtSm} {
     & + & {
       margin-top: ${size(1)};

package/src/components/InputLabel/index.tsx

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

@@ -1,8 +1,10 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
+
 export const Wrapper = styled.label.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
+  className: 'wayke__theme wayke__font--bold',
+}))`
   margin-bottom: ${size(0.5)};
   font-size: 0.875rem;
 `;

package/src/components/InputSearch/index.tsx

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

@@ -1,14 +1,17 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
+
 export const Wrapper = styled.div.attrs(() => ({
-    role: 'search',
-})) `
+  role: 'search',
+}))`
   display: flex;
   align-items: stretch;
   border-radius: 3px;
 `;
-export const Label = styled.label `
+
+export const Label = styled.label`
   position: absolute;
   width: 1px;
   height: 1px;
@@ -19,7 +22,8 @@ export const Label = styled.label `
   white-space: nowrap;
   border: 0;
 `;
-export const Search = styled.div `
+
+export const Search = styled.div`
   flex: 1 1 auto;
   position: relative;
   display: flex;
@@ -28,12 +32,14 @@ export const Search = styled.div `
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
 `;
-export const Action = styled.div `
+
+export const Action = styled.div`
   flex-shrink: 0;
 `;
+
 export const ActionBtn = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-bg',
-})) `
+  className: 'wayke__theme wayke__color--primary-bg',
+}))`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -43,10 +49,11 @@ export const ActionBtn = styled(ButtonReset).attrs(() => ({
   border-bottom-right-radius: 3px;
   font-size: 1rem;
 `;
+
 export const Input = styled.input.attrs(() => ({
-    type: 'search',
-    className: 'wayke__theme wayke__font--regular',
-})) `
+  type: 'search',
+  className: 'wayke__theme wayke__font--regular',
+}))`
   flex: 1 1 auto;
   display: block;
   width: 100%;

package/src/components/InputSelect/index.tsx

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

@@ -1,15 +1,19 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
+
 const iconSize = '0.875rem';
 const selectPadding = size(2);
-export const Wrapper = styled.div `
+
+export const Wrapper = styled.div`
   position: relative;
   background-color: ${(props) => props.theme.color.accent};
   border-radius: 3px;
 `;
+
 export const Select = styled.select.attrs(() => ({
-    className: 'wayke__theme wayke__font--regular',
-})) `
+  className: 'wayke__theme wayke__font--regular',
+}))`
   position: relative;
   display: block;
   width: 100%;
@@ -41,10 +45,12 @@ export const Select = styled.select.attrs(() => ({
     border: 0;
   }
 `;
-export const Option = styled.option `
+
+export const Option = styled.option`
   color: ${(props) => props.theme.color.textDark};
 `;
-export const Icon = styled.div `
+
+export const Icon = styled.div`
   position: absolute;
   top: 50%;
   right: ${selectPadding};

package/src/components/InputText/index.tsx

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

@@ -1,16 +1,19 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Wrapper = styled.div `
+
+export const Wrapper = styled.div`
   position: relative;
   display: flex;
   align-items: stretch;
   background-color: ${(props) => props.theme.color.accent};
   border-radius: 3px;
 `;
+
 export const Input = styled.input.attrs(() => ({
-    type: 'text',
-    className: 'wayke__theme wayke__font--regular',
-})) `
+  type: 'text',
+  className: 'wayke__theme wayke__font--regular',
+}))`
   flex: 1 1 auto;
   display: block;
   width: 100%;

package/src/components/InsuranceOptions/Insurance.tsx

@@ -0,0 +1,60 @@
+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/types';
+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;

package/src/components/InsuranceOptions/InsuranceFree.tsx

@@ -0,0 +1,59 @@
+import React, { useState, useCallback } from 'react';
+import { Repeat, RepeatTiny } from '../Repeat/index';
+import { VisualHeading } from '../Heading/index';
+import OptionBox from '../OptionBox/index';
+import { OptionBoxContent } from '../OptionBox/wrapper';
+import Content from '../Content/index';
+import { marked } from 'marked';
+import { ButtonInline } from '../Button/index';
+import { InsuranceOption } from '../../@types/codegen/types';
+import InsuranceFreeModal from './InsuranceFreeModal';
+
+interface InsuranceOptions {
+  insuranceOptions: InsuranceOption[];
+}
+
+const Insurance = ({ insuranceOptions }: InsuranceOptions) => {
+  const [modal, setModal] = useState(false);
+  const toggleModal = useCallback(() => setModal(!modal), [modal]);
+  if (!insuranceOptions.length) {
+    return null;
+  }
+
+  return (
+    <>
+      {modal && <InsuranceFreeModal onClose={toggleModal} insuranceOptions={insuranceOptions[0]} />}
+      <Repeat>
+        <RepeatTiny>
+          <VisualHeading>{insuranceOptions[0]?.insuranceHeader ?? 'Försäkring'}</VisualHeading>
+        </RepeatTiny>
+        <RepeatTiny>
+          <>
+            {insuranceOptions.map((insuranceOption, index) => (
+              <OptionBox
+                key={`${insuranceOption.url}-${index}`}
+                logo={insuranceOption.logotype || undefined}
+                logoAlt={insuranceOption.name || 'Logotyp'}
+              >
+                {insuranceOption.description && (
+                  <Content
+                    dangerouslySetInnerHTML={{
+                      __html: marked(insuranceOption.description),
+                    }}
+                  />
+                )}
+                <OptionBoxContent>
+                  <p>
+                    <ButtonInline onClick={toggleModal}>Mer information</ButtonInline>
+                  </p>
+                </OptionBoxContent>
+              </OptionBox>
+            ))}
+          </>
+        </RepeatTiny>
+      </Repeat>
+    </>
+  );
+};
+
+export default Insurance;