@bytebrand/fe-ui-core 4.1.171 → 4.1.172

package/source/components/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.styl

@@ -5,15 +5,17 @@
   box-sizing: border-box;
   font-size: 12px
   line-height: 1;
-  color: rgba(76, 78, 100, 0.87);
+  color: $grey-3
   align-items: center;
-  border-bottom: 1px solid rgba(76, 78, 100, 0.12);
+  border-bottom: 1px solid $grey-d
+
+  +media-phone-up()
+    font-size: 11px
 
 .carIcon
-  width: 28px;
-  height: 30px;
-  margin-right: 5px
+  max-width: 16px;
+  margin-right: 6px
   flex-shrink: 0
 
-  +media-tablet-landscape-up()
+  +media-phone-up()
     margin-right: 10px

package/source/components/VehicleSmallCard/VehicleData/VehicleTitle/VehicleTitle.styl

@@ -2,22 +2,21 @@
 
 .infoSection
   position: relative
+  display: flex
   align-items: center;
   box-sizing: border-box
-  display: block
-  padding: 10px 30px 10px 16px
-  +media-tablet-landscape-up()
-    padding: 6px;
-    display: flex
+  padding: 7px 6px;
+
+  +media-phone-only()
+    display: block
+    padding: 10px 30px 10px 10px
+
   &.infoSectionSearch
     +media-tablet-landscape-up()
       padding 0;
   &.infoSectionMyVehicles
     +media-phone-only()
       display: flex
-  &.infoSectionRecently
-    +media-tablet-landscape-down()
-      padding: 12px 30px 12px 16px
 
 .wrapTitles
   display flex;
@@ -26,14 +25,8 @@
     display block
   &.wrapTitlesSearch
     display block
-    +media-tablet-landscape-up()
-      display flex
-  &.wrapTitlesFavorite
-    display: flex;
-    +media-tablet-landscape-up()
-      display: block;
-  &.wrapTitlesRecently
-    display: flex;
+    & p
+      margin: 0;
 
 .manufacturerModel
   font-size: 16px
@@ -55,7 +48,7 @@
   margin 0
   max-width: 88vw
 
-  +media-tablet-landscape-up()
+  +media-phone-up()
     margin: 0 0 -1px 3px
     max-width: 100%;
 
@@ -68,25 +61,13 @@
   truncate();
 
   &.optionTitleSearch
-    font-size: 12px;
-    margin-top: 3px;
-    +media-tablet-landscape-up()
-      margin-left: 8px;
-      margin-top: 0;
-  &.optionTitleFavorite
-    font-size: 12px;
-    margin-left: 8px;
-    +media-tablet-landscape-up()
-      margin-left: -3px;
-      margin-top: 3px;
-  &.optionTitleRecently
-    font-size: 12px;
-    margin-left: 8px;
+    font-size: 14px;
   &.optionTitleIsAlternative
     overflow: hidden;
     max-width: 260px;
 
 .sponsored
+  font-family: 'Arial Fett', 'Arial Standard', 'Arial'
   font-weight: 700
   font-style: normal
   font-size: 10px

package/source/components/VehicleSmallCard/VehicleData/VehicleTitle/VehicleTitle.tsx

@@ -24,22 +24,17 @@ const VehicleTitle: React.FC<IVehicleTitleProps> = ({
 
   const infoSectionClassName = classnames(
     styles.infoSection,
-    { [styles.infoSectionSearch]: vehicleComponentName === 'search' },
-    { [styles.infoSectionRecently]: vehicleComponentName === 'recently' },
+    { [styles.infoSectionSearch]: vehicleComponentName === 'search' || 'favorite' },
     { [styles.infoSectionMyVehicles]: vehicleComponentName === 'myVehicles' }
   );
 
   const wrapTitlesClassName = classnames(
     styles.wrapTitles,
-    { [styles.wrapTitlesFavorite]: vehicleComponentName === 'favorite' },
-    { [styles.wrapTitlesRecently]: vehicleComponentName === 'recently' },
-    { [styles.wrapTitlesSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' }
+    { [styles.wrapTitlesSearch]: vehicleComponentName === 'search' || 'myVehicles' || 'favorite' }
   );
   const optionTitleClassName = classnames(
     styles.optionTitle,
-    { [styles.optionTitleFavorite]: vehicleComponentName === 'favorite' },
-    { [styles.optionTitleRecently]: vehicleComponentName === 'recently' },
-    { [styles.optionTitleSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
+    { [styles.optionTitleSearch]: vehicleComponentName === 'search' || 'myVehicles' || 'favorite' },
     { [styles.optionTitleIsAlternative]: combineRefAlternative }
   );
 

package/source/components/VehicleSmallCard/VehicleSmallCard.styl

@@ -7,8 +7,8 @@
   display: grid;
 
   +media-tablet-landscape-up()
-    border-radius: 10px;
-    border: 1px solid rgba(76, 78, 100, 0.12)
+    border-radius: 3px;
+    border: 1px solid $grey-e
 
   &.disableBorder
      border-bottom: 0;
@@ -27,14 +27,14 @@
     border-bottom: 6px solid $skyBlue;
 
     +media-tablet-landscape-up()
-      border: 1px solid rgba(76, 78, 100, 0.12);
+      border: 1px solid $grey-e;
       grid-template-columns: 112px 1fr;
 
   &.vehicleWrapComparable
     min-width: 230px
     margin: 0 4px
     border-radius 3px
-    border: 1px solid rgba(76, 78, 100, 0.12);
+    border: 1px solid $grey-e
     grid-template-columns: 100px 1fr;
 
     +media-tablet-down()
@@ -50,7 +50,7 @@
   &.vehicleWrapMain
     grid-template-columns: 112px 1fr;
     border-radius 3px
-    border: 1px solid rgba(76, 78, 100, 0.12);
+    border: 1px solid $grey-e
 
     +media-phone-only()
       grid-template-columns: 155px 1fr;
@@ -61,18 +61,13 @@
       'image image'\
       'info price'\
       'seoText seoText'
-    grid-template-columns: 55% 45%;
-    border-bottom: 1px solid #DFDFDF;
-    border-top: 1px solid #DFDFDF;
-    margin-bottom: 5px;
-    padding-bottom: 8px;
+    grid-template-columns: 50% 50%;
+    border-bottom: 6px solid $skyBlue;
     +media-tablet-landscape-up()
-      height: 252px;
-      box-sizing: border-box;
-      border: 1px solid rgba(76, 78, 100, 0.12);
+      border: 1px solid $grey-e;
       padding: 10px;
       grid-gap: 10px 15px;
-      grid-template-columns: 260px 1fr 189px;
+      grid-template-columns: 260px 1fr 169px;
       grid-template-areas:
         'title title price'\
         'image info price'
@@ -83,11 +78,12 @@
       'image image'\
       'info price'\
       'seoText seoText'
-    grid-template-columns: 160px 1fr;
-    border: 1px solid rgba(76, 78, 100, 0.12);
+    grid-template-columns: 155px 1fr;
+    border: 1px solid $grey-e;
     border-radius: 10px;
     padding-bottom: 15px;
     +media-tablet-landscape-up()
+      border: 1px solid $grey-e;
       padding: 10px;
       grid-gap: 10px 15px;
       grid-template-columns: 260px 1fr 245px;
@@ -95,30 +91,6 @@
         'title title price'\
         'image info price'
 
-  &.vehicleWrapRecently
-    box-sizing: border-box;
-    grid-template-areas:
-      'title title'\
-      'image image'\
-      'info price'\
-      'seoText seoText'
-    grid-template-columns: 160px 1fr;
-    border: 1px solid rgba(76, 78, 100, 0.12);
-    border-radius: 10px;
-    padding-bottom: 15px;
-
-    & [class*='withStats__topWrapper']
-      left: 16px;
-      right: 16px;
-      
-    & [class*='withStats__controls']
-      padding: 0 16px;
-
-    +media-tablet-up()
-      max-width: 98%;
-    +media-tablet-landscape-up()
-      max-width: 346px;
-
   &.vehicleWrapMyVeicles
     grid-template-areas:
       'title title'\
@@ -130,7 +102,7 @@
     grid-template-columns: 50% 50%;
     border-bottom: 6px solid $skyBlue;
     +media-tablet-landscape-up()
-      border: 1px solid rgba(76, 78, 100, 0.12);
+      border: 1px solid $grey-e;
       padding: 10px;
       grid-gap: 0 15px;
       grid-template-columns: 260px 1fr 169px 236px;
@@ -171,6 +143,8 @@
   text-decoration: none;
   display: block;
 
+.gridAreaImage
+
 .gridAreaTitle
   grid-area: title;
   max-width: 100%;
@@ -198,15 +172,9 @@
     &:first-of-type
       color: $skyBlue;
 
+.svgIcon
+  margin-right: 10px;
+
 .isFirstReferenceCar
   border: 1px solid $skyBlue !important;
-  background-color: #005CCB0D;
-  justify-content: space-between;
-  margin-top: 5px;
-
-  & > div
-    display flex
-    align-items: center
-
-    &:first-of-type
-      color: $skyBlue;
+  background-color: #005CCB0D;

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import _get from 'lodash/get';
 import LazyLoad from 'react-lazyload';
 import withLabel from '../_common/withLabel/withLabel';
-import withStats, { IStatsWrapperProps } from '../_common/withStats/withStats';
+import withStats, { IStatsWrapperProps, IStatsData } from '../_common/withStats/withStats';
 import Image from '../_common/Image/Image';
 import IconSVG from '../_common/IconSVG/IconSVG';
 import VehicleSlider from '../_common/VehicleSlider/VehicleSlider';
@@ -32,16 +32,16 @@ interface IVehicleSmallCardProps {
   t?: (key: string, options?: object) => string;
   i18nPrefixForPriceRating?: string;
   language?: string;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
   isTop?: boolean;
   isDealer?: boolean;
   isDealerSuperAdmin?: boolean;
   isReferenceSearch?: boolean;
-  dashboardButtonText?: string;
   showNewLabel?: boolean;
   CircularProgressbar?: any;
   slider?: IVehicleSliderProps | IVehicleSliderForSRLProps;
   stats?: IStatsWrapperProps;
+  statsData?: IStatsData;
   title?: IVehicleTitleProps;
   info?: IVehicleInfo;
   location?: IVehicleLocation;
@@ -53,7 +53,6 @@ interface IVehicleSmallCardProps {
   offer?: object;
   price?: IPrice;
   seoText?: string;
-  classButton?: string;
   mainImageId?: string;
   crawledAt?: string;
   modificationDate?: string;
@@ -70,8 +69,6 @@ interface IVehicleSmallCardProps {
   children?: ReactNode;
   showSlider?: boolean;
   showOfferBtn?: boolean;
-  hasInteriorExteriorPhoto?: boolean;
-  showCompareCheckboxes?: boolean;
   showFavoriteStar?: boolean;
   minimizeData?: boolean;
   onContainerClick?: (event?: any) => void;
@@ -94,6 +91,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     vehicleComponentName,
     i18nPrefixForPriceRating,
     stats,
+    statsData,
     compareProps,
     title,
     info,
@@ -101,7 +99,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     consumption,
     environmentEmissions,
     isReferenceSearch,
-    showCompareCheckboxes,
     CircularProgressbar,
     engineData,
     offer,
@@ -112,8 +109,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     language,
     className,
     url,
-    target,
-    rel,
     onContainerClick,
     onAddOfferToMainSlideClick,
     isDealer,
@@ -135,9 +130,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     iconName,
     showSlider,
     percentage,
-    classButton,
-    hasInteriorExteriorPhoto,
-    dashboardButtonText,
     showOfferBtn = false,
     showFavoriteStar = true,
     minimizeData = false,
@@ -162,7 +154,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     { [styles.vehicleWrapComparable]: vehicleComponentName === 'comparable' },
     { [styles.vehicleWrapMyVeicles]: vehicleComponentName === 'myVehicles' },
     { [styles.vehicleWrapFavorite]: vehicleComponentName === 'favorite' },
-    { [styles.vehicleWrapRecently]: vehicleComponentName === 'recently' },
     { [styles.topVehicle]: isTop },
     { [styles.disableBorder]: minimizeData },
     { [styles.isFirstReferenceCar]: isReferenceSearch && index === 0 && currentPage === 1 },
@@ -172,7 +163,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
   const decoratedSliderProps = {
     t,
     id,
-    hasInteriorExteriorPhoto,
     ...label,
     ...stats,
     ...slider,
@@ -195,9 +185,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     combineRefAlternative
   };
 
-  const routeObj = linkTag !== 'a'
-    ? { to: { pathname: url, state: { mainImageId, mainImageUrl: src, carId: id, isSavedCheckout: showOfferBtn, ...title } } }
-    : '';
+  const routeObj = linkTag !== 'a' ? { to: { pathname: url, state: { mainImageUrl: src } } } : '';
 
   const vehicleInfoProps = {
     t,
@@ -212,8 +200,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     linkTag,
     routeObj,
     url,
-    target,
-    rel,
     engineData,
     ...price,
     ...info
@@ -223,12 +209,8 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     t,
     id,
     url,
-    target,
-    rel,
     iconName,
-    dashboardButtonText,
     vehicleComponentName,
-    classButton,
     linkTag,
     onAddOfferToMainSlideClick,
     isDealerSuperAdmin,
@@ -239,7 +221,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     combineRefAlternative,
     typeAlternative,
     isAlternative,
-    showCompareCheckboxes,
     ...price,
     ...compareProps
   };
@@ -260,17 +241,13 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     t,
     price,
     showNewLabel,
-    ...stats
+    statsData
   };
 
   const linkBaseUrl = (e: MouseEvent<HTMLImageElement>) => {
     e.preventDefault();
     if (baseUrl) window.open(baseUrl, '_blank');
   };
-  const showComponentLikeSlider = vehicleComponentName === 'search' ||
-                                  vehicleComponentName === 'myVehicles' ||
-                                  vehicleComponentName === 'favorite' ||
-                                  vehicleComponentName === 'recently';
   return (
     <section className={wrapperClassName} onClick={onContainerClick} id={id}>
       {createElement(linkTag, {
@@ -278,9 +255,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
         ...routeObj,
         className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
         onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
-        href: url,
-        target,
-        rel
+        href: url
       })}
 
       {createElement(linkTag, {
@@ -288,7 +263,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           <>
             {showSlider ? (
               <>
-                {showComponentLikeSlider ? (
+                {vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' || vehicleComponentName === 'favorite' ? (
                   <>
                     <DecoratedSliderForSRL {...decoratedSliderProps} />
                     {renderIDInfo && isDealer ? renderIDInfo() : null}
@@ -331,9 +306,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
         ...routeObj,
         className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
         onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
-        href: url,
-        target,
-        rel
+        href: url
       })}
       <VehicleInfo {...vehicleInfoProps} />
       <VehiclePrice {...vehiclePriceProps} />
@@ -353,7 +326,6 @@ VehicleSmallCard.defaultProps = {
   isTop: false,
   showSlider: false,
   isDealerSuperAdmin: false,
-  showCompareCheckboxes: false,
   slider: {},
   stats: {},
   title: {},
@@ -379,7 +351,6 @@ export default memo(VehicleSmallCard, (props, nextProps) => { // shouldComponent
       financing: { monthlyInstallment, annualMileage, withFinalInstallment },
       leasing: { monthlyInstallment: lMonthlyInstallment }
     },
-    stats: { statsData },
     isCarInFavorite,
     compareProps,
     children
@@ -391,7 +362,6 @@ export default memo(VehicleSmallCard, (props, nextProps) => { // shouldComponent
     && withFinalInstallment   === nextProps.price.financing.withFinalInstallment
     && lMonthlyInstallment    === nextProps.price.leasing.monthlyInstallment
     && isCarInFavorite        === nextProps.isCarInFavorite
-    && statsData              === nextProps.stats.statsData
     && _get(compareProps, 'toCompare') === _get(compareProps, 'nextProps.toCompare')
     && children               === nextProps.children;
 });

package/source/components/_common/Badge/Badge.styl

@@ -1,13 +1,13 @@
 @import '../../../theme/theme.styl'
 
-$badge-height = 24px
+$badge-height = 19px
 $badge-width = 40px
 $badge-border-width = 1px
 
 .badge
   display: inline-block
-  border-radius: 16px
-  padding: 0 10px
+  border-radius: 3px
+  padding: 0 5px
   box-sizing: border-box
   text-align: center
   width: auto
@@ -17,12 +17,10 @@ $badge-border-width = 1px
   border-style: solid
   border-color: transparent
   vertical-align: middle
+  font-family: 'ArialMT', 'Arial'
   font-weight: 400
-  font-size: 13px
-  display: flex;
-  align-items: center;
-  line-height: 1;
-  justify-content: center;
+  font-size: 12px
+  line-height: $badge-height - $badge-border-width * 2
 
 .white
   background-color: white
@@ -30,12 +28,8 @@ $badge-border-width = 1px
 .grey
   background-color: $grey-c
 .green
-  background-color: $lightGreen
+  background-color: $green
   color: white
 .blue
   background-color: $primary
   color: white
-
-.red
-  color: #fff;
-  background-color: #E60000;

package/source/components/_common/Badge/Badge.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 
 import styles from './Badge.styl';
 
-export type TBadgeType = 'white' | 'gray' | 'green' | 'blue' | 'red';
+export type TBadgeType = 'white' | 'gray' | 'green' | 'blue';
 
 export interface IBadgeProps {
   children: any;

package/source/components/_common/Button/Button.styled.tsx

@@ -2,11 +2,13 @@ export const useStyles = {
   position: 'relative',
   display: 'inline-block',
   margin: 0,
+  backgroundColor: '#999',
   minHeight: 28,
   minWidth: 140,
   lineHeight: '26px',
   fontSize: 14,
   padding: '0 10px',
+  color: 'white',
   cursor: 'pointer',
   boxSizing: 'border-box',
   transition: 'all 0.2s ease-in-out',
@@ -26,7 +28,7 @@ export const useStyles = {
     backgroundColor: 'red'
   },
   '&.MuiButton-outlinedPrimary:not(.Mui-disabled)': {
-    border: '1px solid #666CFF80',
+    border: '1px solid #005ccb',
     background: 'transparent',
     color: '#005ccb'
   },
@@ -34,18 +36,11 @@ export const useStyles = {
     background: 'transparent',
     color: '#005ccb'
   },
-  '&.MuiButton-textError:not(.Mui-disabled)': {
-    color: '#E60000'
-  },
-  '&.MuiButton-outlinedError:not(.Mui-disabled)': {
-    color: '#E60000',
-    borderColor: '#FF4D4980'
-  },
-  ['&.MuiButton-outlinedError:not(.Mui-disabled):hover, &.MuiButton-textError:not(.Mui-disabled):hover']: {
-    backgroundColor: 'rgba(255, 77, 73, 0.05)'
+  '&.MuiButton-textSecondary:not(.Mui-disabled)': {
+    background: 'transparent',
+    color: '#FF0266'
   },
-  '&.Mui-disabled.MuiButton-containedPrimary': {
-    backgroundColor: 'transparent',
-    border: '1px solid #4C4E641F'
+  '&.Mui-disabled': {
+    backgroundColor: 'rgba(0, 0, 0, 0.12) !important'
   }
 };

package/source/components/_common/Button/Button.tsx

@@ -7,7 +7,7 @@ import styles from './Button.styl';
 import Loader from '../Loader/Loader';
 
 export type variantType = 'contained' | 'outlined' | 'text';
-export type variantColor = 'primary' | 'secondary' | 'error';
+export type variantColor = 'primary' | 'secondary';
 export type ButtonHTMLType = 'button' | 'reset' | 'submit';
 
 export interface IButtonProps {

package/source/components/_common/ExpansionPanel/ExpansionPanel.tsx

@@ -22,10 +22,6 @@ export interface IExpansionPanelProps {
   expandedClassName?: string;
   arrowIconClassName?: string;
   expanded?: string | boolean;
-  vehiclesComparedCount?: number;
-  widthCompareBlock?: number;
-  isCompare?: boolean;
-  accordionSummaryClassName?: string;
   accordionClassName?: string;
 }
 
@@ -49,19 +45,15 @@ class ExpansionPanel extends React.Component<IExpansionPanelProps> {
       reactScrollName,
       reactScrollClassName,
       defaultExpanded,
-      accordionSummaryClassName,
       subTitleClassName,
       onChange,
       expanded,
-      accordionClassName,
-      vehiclesComparedCount,
-      widthCompareBlock,
-      isCompare = false
+      accordionClassName
     } = this.props;
 
     const scrollElementClassName = classnames(reactScrollClassName);
     const subtitleCombinedClassName = classnames(styles.subTitle, subTitleClassName);
-    const widthForTitle = `${vehiclesComparedCount * widthCompareBlock}px`;
+
     return (
       <ConditionalWrapper
         condition={reactScrollName}
@@ -70,16 +62,14 @@ class ExpansionPanel extends React.Component<IExpansionPanelProps> {
         <ThemeProvider theme={Theme}>
           <Accordion
             defaultExpanded={defaultExpanded}
-            onChange={isCompare ? onChange : onChange && onChange(reactScrollName)}
-            expanded={isCompare ? expanded : expanded && (expanded === reactScrollName)}
+            onChange={onChange && onChange(reactScrollName)}
+            expanded={expanded && (expanded === reactScrollName)}
             className={accordionClassName}
           >
             <AccordionSummary
               expandIcon={<IconSVG name={'arrowSelect'} className={styles.icon} customDimensions />}
               aria-controls={title}
-              className={accordionSummaryClassName}
               id={title}
-              sx={isCompare && { width: widthForTitle }}
             >
               <span>
                 {title}

package/source/components/_common/IconSVG/IconSVG.story.js

@@ -13,7 +13,7 @@ storiesOf('_Common_UI', module)
     <div style={{display: 'flex', flexWrap: 'wrap'}}>
       {iconNames.map((name) => (
         <div style={{width: '250px', margin: '10px', padding: '10px', border: '1px solid black', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
-          <IconSVG customDimensions name={name}/>
+          <IconSVG name={name}/>
           <div> - {name}</div>
         </div>
       ))}