@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/CookieModal/modals/ManageCookieModal/ManageCookieModal.styl

@@ -0,0 +1,87 @@
+@import '../../../legacy-theme/mixins.styl';
+
+.modalWrapper
+  padding: 13px 15px 28px;
+  text-align: center
+  box-sizing: border-box
+  max-width: 600px
+
+.modalTitle
+  font-family: sans-serif
+  font-weight: bold
+  font-size: 16px;
+  line-height: 133.4%;
+  color: rgba(76, 78, 100, 0.87)
+  margin-top: 12px
+  +media-tablet-up()
+    font-size: 24px;
+    margin-top: 20px
+
+.modalContent
+  font-family: sans-serif
+  font-size: 14px;
+  line-height: 24px;
+  text-align: justify;
+  letter-spacing: 0.15px;
+  color: rgba(76, 78, 100, 0.87);
+  margin-top: 12px
+  margin-right: 25px
+
+  +media-tablet-up()
+    margin-top: 20px
+.accordions
+  height: 278px
+  overflow-y: scroll
+  padding-right: 10px
+  margin-top: 16px
+  &::-webkit-scrollbar {
+    width: 6px
+  }
+  &::-webkit-scrollbar-track {
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), #666CFF;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #005CCB
+    border-radius: 50px
+  }
+
+.buttonsContainer
+  margin-top: 20px
+  display: flex
+  justify-content: center
+  gap: 18px;
+
+  +media-tablet-landscape-up()
+    gap: 36px;
+
+.modalBtn
+  height: 38px
+  text-transform: capitalize !important
+  +media-tablet-landscape-up()
+    min-width: 222px !important
+    font-size: 14px !important;
+
+.outlinedBtn
+  border: none !important;
+
+.switchBlock
+  display: flex
+  align-items: center
+  font-size: 12px
+  line-height: 15px
+  letter-spacing: 1px
+  color: rgba(76, 78, 100, 0.87)
+  text-align: left
+
+.switchBlockTitle
+  width: 140px;
+
+.switchBlockLink
+  color: rgba(76, 78, 100, 0.87);
+  text-decoration-line: underline;
+  font-size: 10px;
+
+  &:focus
+    text-decoration-line: underline;
+  &:hover
+    text-decoration-line: none;

package/compat/CookieModal/modals/ManageCookieModal/ManageCookieModal.tsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useState } from 'react';
+import _merge from 'lodash/merge';
+import classNames from 'classnames';
+import _get from 'lodash/get';
+import IconSVG from '../../../../iconsvg/IconSVG';
+import Button from '../../../Button/Button';
+import MaterialAccordionGroup from '../../../MdAccordionGroup/MdAccordionGroup';
+import MaterialSwitch from '../../../MdSwitch/MdSwitch';
+import { COOKIE_SCHEMA, COOKIE_SCHEMA_LINKS } from '../../../../constants/common';
+import { updateCookieList } from '../../../../utils/CommonUtils';
+
+import styles from './ManageCookieModal.styl';
+
+interface IManageCookieModal {
+  toggleModal: () => void;
+  handleSentryInit?: () => void;
+}
+
+interface IMarketingSwitches {
+  [key: string]: any;
+}
+
+const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModal) => {
+  const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(false);
+  const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(false);
+  const [analyticsSwitches, setAnalyticsSwitches] = useState<IMarketingSwitches>({});
+  const [marketingSwitches, setMarketingSwitches] = useState<IMarketingSwitches>({});
+
+  useEffect(
+    () => {
+      const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
+        .reduce((acc, val) => acc.concat(val), [])
+        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
+
+      const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
+        .reduce((acc, val) => acc.concat(val), [])
+        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
+      setAnalyticsSwitches(newAnalyticsSwitches);
+      setMarketingSwitches(newMarketingSwitches);
+    },
+    []
+  );
+
+  const onHandleAnalyticsSwitchValue = (value: boolean) => {
+    const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
+    .reduce((acc, val) => acc.concat(val), [])
+    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
+
+    setAnalyticsSwitches(newAnalyticsSwitches);
+    setAnalyticsMasterSwitch(value);
+  };
+
+  const onHandleMarketingSwitchValue = (value: boolean) => {
+    const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
+    .reduce((acc, val) => acc.concat(val), [])
+    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
+    setMarketingSwitches(newMarketingSwitches);
+    setMarketingMasterSwitch(value);
+  };
+
+  const marketingSwitchProps = {
+    value: marketingMasterSwitch,
+    onChange: onHandleMarketingSwitchValue
+  };
+
+  const analyticsSwitchProps = {
+    value: analytcisMasterSwitch,
+    onChange: onHandleAnalyticsSwitchValue
+  };
+
+  const necessarySwitchProps = {
+    disabled: true,
+    value: true,
+    onChange: () => {}
+  };
+
+  const onAccept = (value?: Record<string, any>) => {
+    const cookieConfig = value || {
+      marketing: Object.keys(marketingSwitches).filter(i => !marketingSwitches[i]) || [],
+      analytics: Object.keys(analyticsSwitches).filter(i => !analyticsSwitches[i]) || []
+    };
+    localStorage.setItem('cookieConfig', JSON.stringify(cookieConfig));
+    updateCookieList(handleSentryInit);
+    toggleModal();
+  };
+  
+  const onHandleChangeInnerSwitchAnalytics = (cookiesFromCategory: any, isChecked: boolean) => {
+    const updatedSwitches = { ...analyticsSwitches };
+    for (const item of cookiesFromCategory) {
+      updatedSwitches[item] = !isChecked
+    }
+    setAnalyticsSwitches(updatedSwitches);
+  };
+
+  const onHandleChangeInnerSwitchMarketing = (cookiesFromCategory: any, isChecked: boolean) => {
+    const updatedSwitches = { ...marketingSwitches };
+    for (const item of cookiesFromCategory) {
+      updatedSwitches[item] = !isChecked
+    }
+    setMarketingSwitches(updatedSwitches);
+  };
+
+  return (
+    <div className={styles.modalWrapper}>
+      <IconSVG name='autodeLogo' customDimensions />
+      <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
+      <div className={styles.modalContent}>Für ein bestmögliches Nutzererlebnis setzen wir Cookies und andere Technologien ein. Diese können Sie hier verwalten.</div>
+      <div className={styles.accordions}>
+        <MaterialAccordionGroup
+          title='Notwendig'
+          tooltipText='Notwendig'
+          withSwitch
+          switchProps={necessarySwitchProps}
+        >
+          <span>Wir verwenden Browser-Cookies, die notwendig sind, damit die Website wie vorgesehen funktioniert. Beispiel: Wir speichern Ihre Präferenzen bei der Datenerfassung auf der Website, damit wir sie berücksichtigen können, wenn Sie auf unsere Website zurückkehren. Sie können diese Cookies in den Einstellungen Ihres Browsers deaktivieren, aber wenn Sie dies tun, funktioniert die Website möglicherweise nicht wie vorgesehen.</span>
+          {Object.keys(COOKIE_SCHEMA.necessary).map(cookie => {
+            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
+            return (
+              <div className={styles.switchBlock} key={cookie} >
+                <span className={styles.switchBlockTitle}>{cookie}</span>
+                <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
+                <MaterialSwitch sx={{ marginLeft: 'auto' }} disabled={true} value={true} onChange={() => {}} />
+              </div>
+            );
+          })}
+        </MaterialAccordionGroup>
+        <MaterialAccordionGroup
+          title='Analytisch'
+          withSwitch
+          tooltipText='Analytisch'
+          switchProps={analyticsSwitchProps}
+        >
+          <span>Um das Nutzerverhalten zu verstehen und Ihnen ein relevanteres Surferlebnis zu bieten oder den Inhalt unserer Website zu personalisieren. Beispiel: Wir sammeln Informationen darüber, welche Seiten Sie besuchen, damit wir Ihnen relevantere Informationen präsentieren können.</span>
+          {Object.keys(COOKIE_SCHEMA.analytics).map(cookie => {
+            const getItemsFromCategory = _get(COOKIE_SCHEMA, `analytics['${cookie}']`, null);
+            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
+            const isChecked = getItemsFromCategory.every((item: string) => analyticsSwitches[item] === false);
+            return (
+              <div className={styles.switchBlock} key={cookie} >
+                <span className={styles.switchBlockTitle}>{cookie}</span>
+                <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
+                <MaterialSwitch
+                  sx={{ marginLeft: 'auto' }}
+                  value={analytcisMasterSwitch}
+                  onChange={() => onHandleChangeInnerSwitchAnalytics(getItemsFromCategory, isChecked)}
+                />
+              </div>
+            );
+          })}
+        </MaterialAccordionGroup>
+        <MaterialAccordionGroup
+          title='Marketing'
+          withSwitch
+          tooltipText='Marketing'
+          switchProps={marketingSwitchProps}
+        >
+          <span>Zur Personalisierung und Messung der Effektivität von Werbung auf unserer Website und anderen Websites. Beispiel: Wir können Ihnen eine personalisierte Werbung auf der Grundlage der von Ihnen besuchten Seiten auf unserer Website anzeigen.</span>
+          {Object.keys(COOKIE_SCHEMA.marketing).map(cookie => {
+            const getItemsFromCategory = _get(COOKIE_SCHEMA, `marketing['${cookie}']`, null);
+            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
+            const isChecked = getItemsFromCategory.every((item: string) => marketingSwitches[item] === false);
+            return (
+              <div className={styles.switchBlock} key={cookie} >
+                <span className={styles.switchBlockTitle}>{cookie}</span>
+                <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
+                <MaterialSwitch
+                  sx={{ marginLeft: 'auto' }}
+                  value={marketingMasterSwitch}
+                  onChange={() => onHandleChangeInnerSwitchMarketing(getItemsFromCategory, isChecked)}
+                />
+              </div>
+            )
+          })}
+        </MaterialAccordionGroup>
+      </div>
+      <div className={styles.buttonsContainer}>
+        <Button onClick={() => onAccept()} className={classNames(styles.modalBtn, styles.outlinedBtn)} >Auswahl speichern</Button>
+        <Button onClick={() => onAccept({})} className={styles.modalBtn}>Alles akzeptieren</Button>
+      </div>
+    </div>
+  );
+};
+
+export default ManageCookieModal;

package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.styl

@@ -0,0 +1,67 @@
+@import '../../../legacy-theme/mixins.styl';
+
+.modalWrapper
+  padding: 28px 58px 28px
+  text-align: center
+  box-sizing: border-box
+  max-width: 600px
+  +media-tablet-down()
+    padding: 16px 15px 28px
+
+.modalTitle
+  font-family: sans-serif
+  font-weight: bold
+  font-size: 24px;
+  line-height: 133.4%;
+  color: rgba(76, 78, 100, 0.87)
+  margin-top: 20px
+
+  +media-tablet-down()
+    font-size: 16px;
+    margin-top: 8px;
+
+.modalContent
+  font-family: sans-serif
+  font-size: 14px;
+  line-height: 16px;
+  text-align: justify;
+  letter-spacing: 0.15px;
+  color: rgba(76, 78, 100, 0.87);
+  margin-top: 20px
+  +media-tablet-down()
+    column-gap: 0;
+    max-height: 320px;
+    overflow-y: scroll;
+    padding-right: 10px;
+    margin-right: -10px;
+    margin-top: 8px
+
+.logoContainer
+  display: flex
+  justify-content: space-between
+
+.buttonsContainer
+  margin-top: 12px
+  display: flex
+  justify-content: space-between
+  gap: 36px;
+  +media-tablet-down()
+    column-gap: 0
+
+.modalBtn
+  height: 38px
+  text-transform: capitalize !important
+  min-width: calc(50% - 18px) !important
+  +media-tablet-down()
+    font-size: 11px !important
+
+.outlinedBtnLeft
+  display: flex;
+  justify-content: flex-end;
+  color: #005CCB;
+  font-size: 16px;
+  text-decoration: none;
+  margin-top: 12px;
+  margin-bottom: 0;
+  margin-left: auto;
+  max-width: 80px;

package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import IconSVG from '../../../../iconsvg/IconSVG';
+import Button from '../../../Button/Button';
+import styles from './PreviewCookieModal.styl';
+import { updateCookieList } from '../../../../utils/CommonUtils';
+
+interface IPreviewCookieModal {
+  toggleModal: () => void;
+  handleSentryInit?: () => void;
+  setModal: (value: string) => void;
+}
+
+const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPreviewCookieModal) => {
+  const environment = window.location.origin;
+  const onAcceptAll = () => {
+    localStorage.setItem('cookieConfig', JSON.stringify({}));
+    updateCookieList(handleSentryInit);
+    toggleModal();
+  };
+
+  const onDisableAll = () => {
+    localStorage.setItem('cookieConfig', JSON.stringify({
+      'marketing':['cf','cip','cnac','car','test_cookie','IDE', 'bid','youtube'],
+      'analytics':['sentry','callback','locale','uid','PugT','demdex','cto_bundle','tuuid','tuuid_lu','c','CMID','CMPS','CMPRO','uuid2','um','umeh','KRTBCOOKIE_97','IDSYNC','dpm','_kuid_','visitor-id','data-c-ts','data-c','CMTS','mv_tokens','A3','mv_tokens_eu-v1','am_tokens','am_tokens_eu-v1','iteo','_fbp','_clck','_clsk','_uetsid','_uetvid','analytics_storage','ad_storage','functionality_storage','personalization_storage','security_storage','hotjar']
+    }));
+    updateCookieList(handleSentryInit);
+    toggleModal();
+  };
+
+  return (
+    <div className={styles.modalWrapper}>
+      <div className={styles.logoContainer}>
+        <IconSVG name='autodeLogo' customDimensions />
+        <Button onClick={onDisableAll} className={styles.modalBtn}>Nur notwendige Cookies</Button>
+      </div>
+      <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
+      <div className={styles.modalContent}>
+        Wir verwenden Cookies und ähnliche Technologien (insg. „Cookies“). Cookies die notwendig sind, damit die Website wie vorgesehen funktioniert, werden standardmäßig gesetzt. Cookies, die dazu dienen das Nutzerverhalten zu verstehen und Ihnen ein relevantes bzw. personalisiertes Surferlebnis zu bieten, sowie Cookies zur Personalisierung und Messung der Effektivität von Werbung auf unserer und anderen Websites setzen wir nur mit Ihrer Einwilligung ein. Unsere Partner führen diese Daten möglicherweise mit weiteren Daten zusammen, die Sie ihnen bereitgestellt oder die sie im Rahmen Ihrer Nutzung gesammelt haben. Durch Klick auf "Zustimmen" akzeptieren Sie alle Cookies und die beschriebene Verarbeitung Ihrer Daten. Bevor Sie Ihre Zustimmung erteilen, beachten Sie bitte, dass wir Ihre Daten auch mit Partnern mit Sitz in den USA teilen. Die USA weisen kein mit der EU vergleichbares Datenschutzniveau auf. Es besteht das Risiko, dass US-Behörden Zugriff auf Ihre Daten haben und Sie Ihre Betroffenenrechte nicht durchsetzen können. Über "Anpassen" können Sie Ihre Einwilligungen individuell anpassen. Dies ist auch später jederzeit im Bereich&nbsp;
+        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>Cookie-Richtlinie</a> möglich. Weitere Informationen finden Sie in unserer&nbsp;
+        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>Datenschutzerklärung</a>.
+      </div>
+      <a href={`${environment}/impressum/`} target='_blank' className={styles.outlinedBtnLeft}>Impressum</a>
+      <div className={styles.buttonsContainer}>
+        <Button onClick={() => setModal('MANAGE_COOKIE_MODAL')} className={styles.modalBtn} variant='outlined'>Anpassen</Button>
+        <Button onClick={onAcceptAll} className={styles.modalBtn}>zustimmen</Button>
+      </div>
+    </div>
+  );
+};
+
+export default PreviewCookieModal;

package/compat/CookieModal/modals/TestModal.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TestModal = () => {
+  return <div>test modal</div>;
+};
+
+export default TestModal;

package/compat/CookieModal/useModal.ts

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+const useModal = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleModal = () => {
+    setIsVisible(!isVisible);
+  };
+
+  return { isVisible, toggleModal };
+};
+
+export default useModal;

package/compat/CustomerQuote/CustomerQuote.styl

@@ -0,0 +1,80 @@
+@import '../legacy-theme/theme.styl';
+
+.container
+  width: 100%
+  font-family: $font-style-arial
+  font-size: 12px
+  display flex;
+
+.imageContainer
+  position: relative
+  width: 50px
+  height: 50px
+  border-radius: 50%
+  overflow: hidden;
+  margin: 10px auto;
+
+.leftPanel
+  margin-right: 12px;
+  text-align center
+
+.imagePlaceholder
+  display: inline-block
+  position: absolute
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  background-image: url('../../media/images/user-icon.svg')
+  background-size: cover
+  background-position: center
+
+.image
+  display: inline-block
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+  width: 100%
+
+.name
+  font-size: 11px
+  line-height: 16px;
+  color: rgba(0, 0, 0, 0.8);
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+.source
+  font-size: 11px
+  line-height: 16px;
+  display block
+  margin-top: 3px;
+  color: rgba(0, 0, 0, 0.38);
+
+.stars
+  display: block
+  width: 54px
+  height: 10px
+  margin 0 auto;
+  background-image: url('../../media/images/raiting-stars-min.svg')
+
+.review
+  font-size: 11px
+  color: rgba(#000, 65%);
+  line-height: 16px;
+  display flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+.quote
+  color: $skyBlue
+
+.content
+  max-height: 80px;
+  overflow: hidden;
+  -webkit-line-clamp: 5;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;

package/compat/CustomerQuote/CustomerQuote.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import styles from './CustomerQuote.styl';
+
+interface ICustomerQuoteProps {
+  className?: string;
+  isHorizontal?: boolean;
+
+  image?: string;
+  name: string;
+  source: string;
+  review: string;
+}
+
+const CustomerQuote: React.FC<ICustomerQuoteProps> = ({ className, isHorizontal, image, name, source, review }) => {
+  const renderVerticalLayout = () => (
+    <div className={styles.container}>
+      <div className={styles.leftPanel}>
+        <span className={styles.stars} />
+        {renderAvatar()}
+        <span className={styles.name}>{name}</span>
+      </div>
+      <div className={styles.review}>
+        <span className={styles.content}>
+          <span className={styles.quote}>"</span>
+          {review}
+          <span className={styles.quote}>"</span>
+        </span>
+        <span className={styles.source}>{source}</span>
+      </div>
+    </div>
+  );
+
+  const renderHorizontalLayout = () => (
+    <div className={classNames(styles.container, styles.isHorizontal)}>
+      <div className={styles.leftPanel}>
+        <span className={styles.stars} />
+        {renderAvatar()}
+        <span className={styles.name}>{name}</span>
+      </div>
+      <div className={styles.review}>
+        <span className={styles.content}>
+          <span className={styles.quote}>"</span>
+          {review}
+          <span className={styles.quote}>"</span>
+        </span>
+        <span className={styles.source}>{source}</span>
+      </div>
+    </div>
+  );
+
+  const renderAvatar = () => {
+    return (
+      <div className={classNames(styles.imageContainer, className)}>
+        {image ? <img className={styles.image} src={image} alt='Avatar'/> : <span className={styles.imagePlaceholder} />}
+      </div>
+    );
+  };
+
+  return isHorizontal ? renderHorizontalLayout() : renderVerticalLayout();
+};
+
+CustomerQuote.defaultProps = {
+  isHorizontal: false,
+  image: ''
+};
+
+export default CustomerQuote;

package/compat/CustomerQuotesSlider/CustomerQuotesSlider.styl

@@ -0,0 +1,46 @@
+@import '../legacy-theme/theme.styl'
+
+.slide
+  box-sizing: border-box
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  padding 12px;
+
+  @media all and (max-width: 780px)
+    max-width: initial
+
+  &:focus
+    outline: 0;
+
+.slide.singleSlide
+  max-width: 100%;
+  border-radius: 0;
+  border: 0;
+  padding 0;
+
+.slideWrap
+  display: flex
+  justify-content: center
+  border-radius 4px
+  margin: 0 10px;
+  max-height: 123px;
+
+.slideWrap.singleSlideWrap
+  margin 0
+  
+.arrow
+  display: inline-block
+  position: absolute
+  z-index: 2;
+  top: 50%
+  width: 7px
+  height: 16px
+  cursor pointer;
+
+.arrow.left
+  transform: translateY(-50%)
+  left: 10px
+
+.arrow.right
+  transform translateY(-50%) rotate(-180deg)
+  right: 10px

package/compat/CustomerQuotesSlider/CustomerQuotesSlider.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import Slider from 'react-slick';
+import Arrow from './SliderArrow';
+import classnames from 'classnames';
+import CustomerQuote from './../CustomerQuote/CustomerQuote';
+import { QUOTES_SLIDES_TO_SHOW_DEFAULT } from '../../constants/common';
+import styles from './CustomerQuotesSlider.styl';
+import './slider.global.styl';
+
+interface ICustomerQuotesSliderProps {
+  className?: string;
+  quotes: any[];
+  slidesToShow?: number;
+  variableWidth?: boolean;
+  responsiveConfig?: {
+    breakpoint: number,
+    settings: { slidesToShow: number }
+  }[];
+}
+
+const CustomerQuotesSlider: React.FC<ICustomerQuotesSliderProps> = ({
+  className, quotes, responsiveConfig, variableWidth = false, slidesToShow = QUOTES_SLIDES_TO_SHOW_DEFAULT
+}) => {
+  const sliderProps = {
+    className,
+    slidesToShow,
+    variableWidth,
+    dots: false,
+    nextArrow: <Arrow direction='right' />,
+    prevArrow: <Arrow direction='left' />,
+    responsive: responsiveConfig || [
+      {
+        breakpoint: 1050,
+        settings: { slidesToShow: 2.5 }
+      },
+      {
+        breakpoint: 992,
+        settings: { slidesToShow: 3 }
+      },
+      {
+        breakpoint: 780,
+        settings: { slidesToShow: 2 }
+      },
+      {
+        breakpoint: 520,
+        settings: { slidesToShow: 2 }
+      },
+      {
+        breakpoint: 480,
+        settings: { slidesToShow: 1 }
+      }
+    ]
+  };
+
+  const slideWrapClasses = classnames(
+    styles.slideWrap,
+    { [styles.singleSlideWrap]: slidesToShow === 1 }
+  );
+
+  const slideClasses = classnames(
+    styles.slide,
+    { [styles.singleSlide]: slidesToShow === 1 }
+  );
+
+  return (
+    <Slider {...sliderProps}>
+      {quotes.map(q => (
+        <div className={slideClasses} key={`customer-quote-${q.id}`}>
+          <div className={slideWrapClasses}>
+            <CustomerQuote {...q} />
+          </div>
+        </div>
+      ))
+    }
+    </Slider>
+  );
+};
+
+export default CustomerQuotesSlider;