@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/OfferDetailedSection/partials/PanelConfig.tsx

@@ -1,121 +1,121 @@
-import React from 'react';
-import classnames from 'classnames';
-import _get from 'lodash/get';
-import { Hidden, Visible } from 'react-grid-system';
-import { getFormattedPrice } from '../../../utils/CommonUtils';
-import { IPanelConfigProps } from '../../../types/types';
-import VehicleFormattedPrice from '../../VehicleFormattedPrice/VehicleFormattedPrice';
-import RequestOffer from '../../OfferRequestButtonWrapper/OfferRequestButtonWrapper';
-import styles from './PanelConfig.styl';
-import ExpansionPanel from '../../ExpansionPanel/ExpansionPanel';
-
-const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
-  t,
-  car,
-  prefixPrice,
-  OfferRequestButtonWrapper,
-  titleKey,
-  titleDetails,
-  descriptionDetails,
-  priceTabActiveIndex,
-  config,
-  activeTab,
-  OfferBlockComponent,
-  offerBlockProps,
-  postfix,
-  isAlternative
-}) => {
-  const requestOfferProps = {
-    t,
-    car,
-    OfferRequestButtonWrapper,
-    priceTabActiveIndex,
-    isAlternative,
-    controlsClassContainer: styles.controlsContainerMain,
-    onShowOfferDetails: offerBlockProps.onShowOfferDetails
-  };
-
-  const renderConfigDetails = (mobileMode = false) => {
-    const configDetails = Object.keys(config).length !== 0 && config.constructor === Object
-      ? [
-        { name: 'currentSalesPriceExtraCost', unit: ' €' },
-        { name: 'onetimeSpecialPayment', unit: ' €' },
-        { name: 'netLoanAmount', unit: ' €', delimiter: true },
-        { name: 'paymentProtectionInsurance', unit: ' €' },
-        { name: 'paybackPeriod', unit: ` ${t('leasing.month')}`, format: '' },
-        { name: 'finalInstallment', unit: ' €' },
-        { name: 'grossLoanAmount', unit: ' €', delimiter: true },
-        { name: 'grossLoanAmountWithoutFinalInstallment', unit: ' €' },
-        { name: 'nominalInterestRate', unit: ' %', delimiter: true },
-        { name: 'annualPercentageRate', unit: ' %' }
-      ] : [];
-
-    const wrapperClassName = classnames(styles.wrapConfigDetails, { [styles.wrapConfigDetailsMobile]: mobileMode });
-    return (
-      <div className={wrapperClassName}>
-        <Hidden xs sm md>
-          <div className={styles.detailsHeaderWrap}>
-            <span className={styles.detailsHeader}>{titleDetails}</span>
-            <div className={styles.currentPriceWrap}>
-              {prefixPrice && <span className={styles.prefixPrice}>{prefixPrice}</span>}
-              <VehicleFormattedPrice
-                price={config.monthlyInstallment}
-                numbersAfterDot={0}
-                disableStyles={true}
-                postfix={postfix}
-                className={styles.detailsPrice}
-                unitClassName={styles.detailsUnit}
-              />
-            </div>
-          </div>
-          <hr className={styles.borderLine} />
-        </Hidden>
-        {configDetails.map((item: any) => {
-          const name = item.options ? t(`leasing.${item.name}`, item.options) : t(`leasing.${item.name}`);
-          const format = 'format' in item ? item.format : '$,.2f';
-          const itemClassName = item.delimiter ? styles.configItemNoMarginTop : styles.configItem;
-          return (
-            <React.Fragment key={item.name}>
-              {item.delimiter ? <hr className={styles.borderLineMargin8} /> : null}
-              <div className={itemClassName}>
-                <span>{name}</span>
-                <span>{`${getFormattedPrice(config[item.name], format)} ${item.unit}`}</span>
-              </div>
-            </React.Fragment>
-          );
-        })}
-        <Hidden xs sm md>
-          <RequestOffer {...requestOfferProps} />
-        </Hidden>
-      </div>
-    );
-  };
-
-  return (
-    <>
-      <div className={styles.flexRow}>
-        <div className={styles.slidersBlock}>
-          {descriptionDetails && <div className={styles.slidersBlockDescription}>{descriptionDetails}</div>}
-          <Hidden xs sm md>
-            <OfferBlockComponent {...{ ...offerBlockProps, priceTabIndex: activeTab }} />
-          </Hidden>
-        </div>
-        <Hidden xs sm md>
-          {renderConfigDetails()}
-        </Hidden>
-      </div>
-      <Visible xs sm md>
-      <ExpansionPanel
-        title={t(`sidebar.financingDetalis.${titleKey}`)}
-      >
-        {renderConfigDetails(true)}
-      </ExpansionPanel>
-      </Visible>
-    </>
-  );
-};
-
-PanelConfig.defaultProps = {
-};
-
-export default PanelConfig;
+import React from 'react';
+import classnames from 'classnames';
+import _get from 'lodash/get';
+import { Hidden, Visible } from 'react-grid-system';
+import { getFormattedPrice } from '../../../utils/CommonUtils';
+import { IPanelConfigProps } from '../../../types/types';
+import VehicleFormattedPrice from '../../VehicleFormattedPrice/VehicleFormattedPrice';
+import RequestOffer from '../../OfferRequestButtonWrapper/OfferRequestButtonWrapper';
+import styles from './PanelConfig.styl';
+import ExpansionPanel from '../../ExpansionPanel/ExpansionPanel';
+
+const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
+  t,
+  car,
+  prefixPrice,
+  OfferRequestButtonWrapper,
+  titleKey,
+  titleDetails,
+  descriptionDetails,
+  priceTabActiveIndex,
+  config,
+  activeTab,
+  OfferBlockComponent,
+  offerBlockProps,
+  postfix,
+  isAlternative
+}) => {
+  const requestOfferProps = {
+    t,
+    car,
+    OfferRequestButtonWrapper,
+    priceTabActiveIndex,
+    isAlternative,
+    controlsClassContainer: styles.controlsContainerMain,
+    onShowOfferDetails: offerBlockProps.onShowOfferDetails
+  };
+
+  const renderConfigDetails = (mobileMode = false) => {
+    const configDetails = Object.keys(config).length !== 0 && config.constructor === Object
+      ? [
+        { name: 'currentSalesPriceExtraCost', unit: ' €' },
+        { name: 'onetimeSpecialPayment', unit: ' €' },
+        { name: 'netLoanAmount', unit: ' €', delimiter: true },
+        { name: 'paymentProtectionInsurance', unit: ' €' },
+        { name: 'paybackPeriod', unit: ` ${t('leasing.month')}`, format: '' },
+        { name: 'finalInstallment', unit: ' €' },
+        { name: 'grossLoanAmount', unit: ' €', delimiter: true },
+        { name: 'grossLoanAmountWithoutFinalInstallment', unit: ' €' },
+        { name: 'nominalInterestRate', unit: ' %', delimiter: true },
+        { name: 'annualPercentageRate', unit: ' %' }
+      ] : [];
+
+    const wrapperClassName = classnames(styles.wrapConfigDetails, { [styles.wrapConfigDetailsMobile]: mobileMode });
+    return (
+      <div className={wrapperClassName}>
+        <Hidden xs sm md>
+          <div className={styles.detailsHeaderWrap}>
+            <span className={styles.detailsHeader}>{titleDetails}</span>
+            <div className={styles.currentPriceWrap}>
+              {prefixPrice && <span className={styles.prefixPrice}>{prefixPrice}</span>}
+              <VehicleFormattedPrice
+                price={config.monthlyInstallment}
+                numbersAfterDot={0}
+                disableStyles={true}
+                postfix={postfix}
+                className={styles.detailsPrice}
+                unitClassName={styles.detailsUnit}
+              />
+            </div>
+          </div>
+          <hr className={styles.borderLine} />
+        </Hidden>
+        {configDetails.map((item: any) => {
+          const name = item.options ? t(`leasing.${item.name}`, item.options) : t(`leasing.${item.name}`);
+          const format = 'format' in item ? item.format : '$,.2f';
+          const itemClassName = item.delimiter ? styles.configItemNoMarginTop : styles.configItem;
+          return (
+            <React.Fragment key={item.name}>
+              {item.delimiter ? <hr className={styles.borderLineMargin8} /> : null}
+              <div className={itemClassName}>
+                <span>{name}</span>
+                <span>{`${getFormattedPrice(config[item.name], format)} ${item.unit}`}</span>
+              </div>
+            </React.Fragment>
+          );
+        })}
+        <Hidden xs sm md>
+          <RequestOffer {...requestOfferProps} />
+        </Hidden>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className={styles.flexRow}>
+        <div className={styles.slidersBlock}>
+          {descriptionDetails && <div className={styles.slidersBlockDescription}>{descriptionDetails}</div>}
+          <Hidden xs sm md>
+            <OfferBlockComponent {...{ ...offerBlockProps, priceTabIndex: activeTab }} />
+          </Hidden>
+        </div>
+        <Hidden xs sm md>
+          {renderConfigDetails()}
+        </Hidden>
+      </div>
+      <Visible xs sm md>
+      <ExpansionPanel
+        title={t(`sidebar.financingDetalis.${titleKey}`)}
+      >
+        {renderConfigDetails(true)}
+      </ExpansionPanel>
+      </Visible>
+    </>
+  );
+};
+
+PanelConfig.defaultProps = {
+};
+
+export default PanelConfig;

package/compat/OfferPanel/AboAccordion/AboAccordion.styl

@@ -1,25 +1,25 @@
-@import '../../legacy-theme/mixins.styl'
-    
-.blockTitle
-  color: $skyBlue
-  font-size: 12px
-  font-weight: 700
-  padding: 10px 0
-
-.margin
-	margin-left: 10px
-
-.optionsWrapper
-  display: block
-
-.optionItem
-  display: flex
-  justify-content: space-between
-  align-items: center
-  margin-top: 12px
-
-.faqItem
-  font-size: 12px
-  display: block
-  color: $skyBlue
+@import '../../legacy-theme/mixins.styl'
+    
+.blockTitle
+  color: $skyBlue
+  font-size: 12px
+  font-weight: 700
+  padding: 10px 0
+
+.margin
+	margin-left: 10px
+
+.optionsWrapper
+  display: block
+
+.optionItem
+  display: flex
+  justify-content: space-between
+  align-items: center
+  margin-top: 12px
+
+.faqItem
+  font-size: 12px
+  display: block
+  color: $skyBlue
   margin-top: 15px

package/compat/OfferPanel/AboAccordion/AboAccordion.tsx

@@ -1,128 +1,128 @@
-import React from 'react';
-// import { makeStyles } from '@mui/styles';
-// import {
-//   Accordion, AccordionDetails, AccordionSummary, Typography, SvgIcon, Divider
-// } from '@mui/material';
-
-// import { FIFTEEN } from '../../../constants/core';
-// import SvgArrowDownBlue from '@bytebrand/fe-ui-core-autobahn/iconsvg/SVG/common/ArrowDownBlue';
-// import Tooltip from '../../Tooltip/Tooltip';
-// import OfferCheckboxGroup from '../OfferCheckboxGroup/OfferCheckboxGroup';
-// import AboColorOptions from './AboColorOptions/AboColorOptions';
-// import AboIncludedServices from './AboIncludedServices/AboIncludedServices';
-// import AboFaq from './AboFaq/AboFaq';
-// import styles from './AboAccordion.styl';
-
-export interface IAboAccordion {
-  priceTabIndex?: number;
-  additionalService?: any;
-  isOfferDetailedTabs?: boolean;
-  isOfferDetailsAbo?: boolean;
-  isOpeningAboModal?: boolean;
-  transferInstallments?: any;
-  t?: (phrase: string, config?: any) => string;
-  onAboFaqClick?: (index: number) => void;
-}
-// const useStyles = makeStyles(theme => ({
-//   root: { width: '100%', '&. MuiAccordion-root:before': { position: 'relative' } },
-//   heading: {
-//     fontSize: theme.typography.pxToRem(FIFTEEN),
-//     flexShrink: 0
-//   },
-//   hideBorder: {
-//     '&.MuiPaper-elevation1': { boxShadow: 'none', margin: 0 },
-//     '& .MuiAccordionSummary-root': { padding: 0, minHeight: 0 },
-//     '& .MuiAccordionSummary-content': { margin: 0, display: 'block' },
-//     '& .MuiAccordionDetails-root': { padding: 0 },
-//     '& .MuiTypography-body1': { width: '100%', fontSize: '12px' },
-//     '&.Mui-expanded:first-child': { marginTop: '11px' }
-//   },
-//   details: {
-//     '&.MuiAccordionDetails-root': { marginBottom: '11px', display: 'block' }
-//   },
-//   summary: {
-//     '&.MuiAccordionSummary-root': { padding: 0 },
-//     '&.checkboxWrapped': { margin: 0 }
-//   }
-// }));
-
-const AboAccordion = (
-//   {
-//   additionalService,
-//   priceTabIndex,
-//   transferInstallments,
-//   t,
-//   onAboFaqClick,
-//   isOfferDetailsAbo = false,
-//   isOfferDetailedTabs = false,
-//   isOpeningAboModal = false
-// }
-) => {
-  return <div></div>;
-  // // const classes = useStyles();
-  // const [expanded, setExpanded] = useState('');
-
-  // const handleChange = (panel: string) => (event: React.ChangeEvent<{}>, isExpanded: boolean) => {
-  //   setExpanded(isExpanded ? panel : '');
-  // };
-  // const renderAccordionSummary = (summaryName: string) => (
-  //   <h3 className={styles.blockTitle}>
-  //     {summaryName}
-  //     <Tooltip positionX='left' tooltipClassName={styles.margin} description={t('modals:financing.homeTooltip')} iconName='InfoTransparent' />
-  //   </h3>
-  // );
-  // const isAboAccordionExpanded0 = expanded === 'panel0';
-  // const isAboAccordionExpanded1 = expanded === 'panel1';
-  // const aboAccordionOptions = [
-  //   {
-  //     summary: isAboAccordionExpanded0 || isOfferDetailedTabs
-  //       ? renderAccordionSummary('Fahrzeuganlieferung')
-  //       : <OfferCheckboxGroup {...{ transferInstallments, additionalService, isAboAccordionExpanded0, priceTabIndex }} />,
-  //     details: <OfferCheckboxGroup   {...{ transferInstallments, additionalService, priceTabIndex }} />
-  //   }, {
-  //     summary: isAboAccordionExpanded1 || isOfferDetailedTabs
-  //       ? renderAccordionSummary('Wunschoptionen')
-  //       : <AboColorOptions desiredColor={t('modals:financing.desiredColor')} isAboAccordionExpanded1={isAboAccordionExpanded1} />,
-  //     details: <AboColorOptions desiredColor={t('modals:financing.desiredColor')} />
-  //   }, {
-  //     summary: renderAccordionSummary('Inklusivleistungen im Monatspreis'),
-  //     details: <AboIncludedServices isOfferDetailsAbo={isOfferDetailsAbo} />
-  //   }, {
-  //     summary: renderAccordionSummary('FAQ'),
-  //     details: <AboFaq onAboFaqClick={onAboFaqClick} />
-  //   }
-  // ];
-
-  // return (
-  //   <div className={classes.root}>
-  //     {aboAccordionOptions.map((option: any, index: number) => {
-  //       if ((isOfferDetailsAbo && index < 2) || (isOfferDetailedTabs && index > 1) || (isOpeningAboModal && index > 1)) return;
-  //       return (
-  //         <Fragment key={index}>
-  //           {(!!index && !isOpeningAboModal) && <Divider light />}
-  //           <Accordion
-  //             className={classes.hideBorder}
-  //             expanded={expanded === `panel${index}` || isOfferDetailedTabs || isOfferDetailsAbo || isOpeningAboModal}
-  //             onChange={handleChange(`panel${index}`)}>
-  //             {!isOpeningAboModal &&
-  //               <AccordionSummary
-  //                 className={classes.summary}
-  //                 expandIcon={(!isOfferDetailedTabs && !isOfferDetailsAbo && !isOpeningAboModal) && <SvgIcon component={SvgArrowDownBlue} viewBox='-100 -100 400 400' />}
-  //                 aria-controls={`panel${index}bh-content`}
-  //                 id={`panel${index}bh-header`}>
-  //                 <Typography className={classes.heading} component={'div'}>{option.summary}</Typography>
-  //               </AccordionSummary>
-  //             }
-  //             <AccordionDetails className={classes.details}>
-  //               <Typography component={'div'}>{option.details}</Typography>
-  //             </AccordionDetails>
-  //           </Accordion >
-  //         </Fragment>
-  //       );
-  //     }
-  //     )}
-  //   </div >
-  // );
-};
-
-export default AboAccordion;
+import React from 'react';
+// import { makeStyles } from '@mui/styles';
+// import {
+//   Accordion, AccordionDetails, AccordionSummary, Typography, SvgIcon, Divider
+// } from '@mui/material';
+
+// import { FIFTEEN } from '../../../constants/core';
+// import SvgArrowDownBlue from '@bytebrand/fe-ui-core-autobahn/iconsvg/SVG/common/ArrowDownBlue';
+// import Tooltip from '../../Tooltip/Tooltip';
+// import OfferCheckboxGroup from '../OfferCheckboxGroup/OfferCheckboxGroup';
+// import AboColorOptions from './AboColorOptions/AboColorOptions';
+// import AboIncludedServices from './AboIncludedServices/AboIncludedServices';
+// import AboFaq from './AboFaq/AboFaq';
+// import styles from './AboAccordion.styl';
+
+export interface IAboAccordion {
+  priceTabIndex?: number;
+  additionalService?: any;
+  isOfferDetailedTabs?: boolean;
+  isOfferDetailsAbo?: boolean;
+  isOpeningAboModal?: boolean;
+  transferInstallments?: any;
+  t?: (phrase: string, config?: any) => string;
+  onAboFaqClick?: (index: number) => void;
+}
+// const useStyles = makeStyles(theme => ({
+//   root: { width: '100%', '&. MuiAccordion-root:before': { position: 'relative' } },
+//   heading: {
+//     fontSize: theme.typography.pxToRem(FIFTEEN),
+//     flexShrink: 0
+//   },
+//   hideBorder: {
+//     '&.MuiPaper-elevation1': { boxShadow: 'none', margin: 0 },
+//     '& .MuiAccordionSummary-root': { padding: 0, minHeight: 0 },
+//     '& .MuiAccordionSummary-content': { margin: 0, display: 'block' },
+//     '& .MuiAccordionDetails-root': { padding: 0 },
+//     '& .MuiTypography-body1': { width: '100%', fontSize: '12px' },
+//     '&.Mui-expanded:first-child': { marginTop: '11px' }
+//   },
+//   details: {
+//     '&.MuiAccordionDetails-root': { marginBottom: '11px', display: 'block' }
+//   },
+//   summary: {
+//     '&.MuiAccordionSummary-root': { padding: 0 },
+//     '&.checkboxWrapped': { margin: 0 }
+//   }
+// }));
+
+const AboAccordion = (
+//   {
+//   additionalService,
+//   priceTabIndex,
+//   transferInstallments,
+//   t,
+//   onAboFaqClick,
+//   isOfferDetailsAbo = false,
+//   isOfferDetailedTabs = false,
+//   isOpeningAboModal = false
+// }
+) => {
+  return <div></div>;
+  // // const classes = useStyles();
+  // const [expanded, setExpanded] = useState('');
+
+  // const handleChange = (panel: string) => (event: React.ChangeEvent<{}>, isExpanded: boolean) => {
+  //   setExpanded(isExpanded ? panel : '');
+  // };
+  // const renderAccordionSummary = (summaryName: string) => (
+  //   <h3 className={styles.blockTitle}>
+  //     {summaryName}
+  //     <Tooltip positionX='left' tooltipClassName={styles.margin} description={t('modals:financing.homeTooltip')} iconName='InfoTransparent' />
+  //   </h3>
+  // );
+  // const isAboAccordionExpanded0 = expanded === 'panel0';
+  // const isAboAccordionExpanded1 = expanded === 'panel1';
+  // const aboAccordionOptions = [
+  //   {
+  //     summary: isAboAccordionExpanded0 || isOfferDetailedTabs
+  //       ? renderAccordionSummary('Fahrzeuganlieferung')
+  //       : <OfferCheckboxGroup {...{ transferInstallments, additionalService, isAboAccordionExpanded0, priceTabIndex }} />,
+  //     details: <OfferCheckboxGroup   {...{ transferInstallments, additionalService, priceTabIndex }} />
+  //   }, {
+  //     summary: isAboAccordionExpanded1 || isOfferDetailedTabs
+  //       ? renderAccordionSummary('Wunschoptionen')
+  //       : <AboColorOptions desiredColor={t('modals:financing.desiredColor')} isAboAccordionExpanded1={isAboAccordionExpanded1} />,
+  //     details: <AboColorOptions desiredColor={t('modals:financing.desiredColor')} />
+  //   }, {
+  //     summary: renderAccordionSummary('Inklusivleistungen im Monatspreis'),
+  //     details: <AboIncludedServices isOfferDetailsAbo={isOfferDetailsAbo} />
+  //   }, {
+  //     summary: renderAccordionSummary('FAQ'),
+  //     details: <AboFaq onAboFaqClick={onAboFaqClick} />
+  //   }
+  // ];
+
+  // return (
+  //   <div className={classes.root}>
+  //     {aboAccordionOptions.map((option: any, index: number) => {
+  //       if ((isOfferDetailsAbo && index < 2) || (isOfferDetailedTabs && index > 1) || (isOpeningAboModal && index > 1)) return;
+  //       return (
+  //         <Fragment key={index}>
+  //           {(!!index && !isOpeningAboModal) && <Divider light />}
+  //           <Accordion
+  //             className={classes.hideBorder}
+  //             expanded={expanded === `panel${index}` || isOfferDetailedTabs || isOfferDetailsAbo || isOpeningAboModal}
+  //             onChange={handleChange(`panel${index}`)}>
+  //             {!isOpeningAboModal &&
+  //               <AccordionSummary
+  //                 className={classes.summary}
+  //                 expandIcon={(!isOfferDetailedTabs && !isOfferDetailsAbo && !isOpeningAboModal) && <SvgIcon component={SvgArrowDownBlue} viewBox='-100 -100 400 400' />}
+  //                 aria-controls={`panel${index}bh-content`}
+  //                 id={`panel${index}bh-header`}>
+  //                 <Typography className={classes.heading} component={'div'}>{option.summary}</Typography>
+  //               </AccordionSummary>
+  //             }
+  //             <AccordionDetails className={classes.details}>
+  //               <Typography component={'div'}>{option.details}</Typography>
+  //             </AccordionDetails>
+  //           </Accordion >
+  //         </Fragment>
+  //       );
+  //     }
+  //     )}
+  //   </div >
+  // );
+};
+
+export default AboAccordion;

package/compat/OfferPanel/AboAccordion/AboColorOptions/AboColorOptions.styl

@@ -1,12 +1,12 @@
-.checkboxesWrapper
-  display: flex
-  justify-content: space-between
-  align-items: center
-
-.checkboxFlex 
-  display: flex
-  justify-content: space-between
-  align-items: center
-
-.multiColored
+.checkboxesWrapper
+  display: flex
+  justify-content: space-between
+  align-items: center
+
+.checkboxFlex 
+  display: flex
+  justify-content: space-between
+  align-items: center
+
+.multiColored
   display: flex

package/compat/OfferPanel/AboAccordion/AboColorOptions/AboColorOptions.tsx

@@ -1,35 +1,35 @@
-import React, { useState } from 'react';
-import { aboColorOptions } from '../../../../constants/core';
-import Radio from '../../../Radio/Radio';
-import RadioGroup from '../../../Radio/RadioGroup';
-
-import styles from './AboColorOptions.styl';
-
-interface IAboColorOptions {
-  isAboAccordionExpanded1?: boolean;
-  desiredColor?: string;
-}
-
-const AboColorOptions: React.FC<IAboColorOptions> = ({ desiredColor, isAboAccordionExpanded1 = true }) => {
-  const [aboColor, setAboColor] = useState(aboColorOptions[0]);
-  const onChangeAboColor = (event: any) => {
-    setAboColor(event.target.value);
-  };
-  return (
-    <div className={styles.checkboxesWrapper}>
-      <span>
-        {desiredColor}
-      </span>
-      <span className={styles.checkboxFlex}>
-        <span>+345 €</span>
-        {isAboAccordionExpanded1 && <RadioGroup containerClassName={styles.multiColored} onChange={onChangeAboColor} value={aboColor} name='colors'>
-          {aboColorOptions.map((color, index) =>
-            <Radio squareRadioClassname='squareRadio' key={index} value={color} color={color} fill={index === 2 ? 'blue' : 'white'} />
-          )}
-        </RadioGroup>}
-      </span>
-    </div>
-  );
-};
-
-export default AboColorOptions;
+import React, { useState } from 'react';
+import { aboColorOptions } from '../../../../constants/core';
+import Radio from '../../../Radio/Radio';
+import RadioGroup from '../../../Radio/RadioGroup';
+
+import styles from './AboColorOptions.styl';
+
+interface IAboColorOptions {
+  isAboAccordionExpanded1?: boolean;
+  desiredColor?: string;
+}
+
+const AboColorOptions: React.FC<IAboColorOptions> = ({ desiredColor, isAboAccordionExpanded1 = true }) => {
+  const [aboColor, setAboColor] = useState(aboColorOptions[0]);
+  const onChangeAboColor = (event: any) => {
+    setAboColor(event.target.value);
+  };
+  return (
+    <div className={styles.checkboxesWrapper}>
+      <span>
+        {desiredColor}
+      </span>
+      <span className={styles.checkboxFlex}>
+        <span>+345 €</span>
+        {isAboAccordionExpanded1 && <RadioGroup containerClassName={styles.multiColored} onChange={onChangeAboColor} value={aboColor} name='colors'>
+          {aboColorOptions.map((color, index) =>
+            <Radio squareRadioClassname='squareRadio' key={index} value={color} color={color} fill={index === 2 ? 'blue' : 'white'} />
+          )}
+        </RadioGroup>}
+      </span>
+    </div>
+  );
+};
+
+export default AboColorOptions;