@bytebrand/fe-ui-core 4.2.25 → 4.2.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.25",
+  "version": "4.2.27",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/Breadcrumbs/Breadcrumbs.tsx

@@ -27,9 +27,9 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
     if (document.referrer) {
       window.history.back();
     } else {
-      window.location.href = '/search'
+      window.location.href = '/search';
     }
-   };
+  };
 
   renderList = (list: LinkItem[]) => {
     const { t = (phrase: string) => _get(breadcrumbsTranslate(), phrase.replace(':', '.'), phrase), page } = this.props;

package/source/components/VehicleDetailedSlider/partials/PriceData.styl

@@ -21,51 +21,28 @@
     line-height: 24px;
 
 .priceDifference
-  background: $lightGreen
   color: white
   padding: 0 15px
   float: left
   text-transform: uppercase
-  border-radius: 4px
+  border-radius: 33px
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 50px;
+  height: auto
 
   +media-tablet-landscape-down()
-    padding: 0 5px
-    border-radius: 2px
+    padding: 0 10px
+    border-radius: 16px
+    line-height: 24px
+    font-size: 13px
 
 .priceDifferencePerCent
-  color: white
-  padding: 0 15px
+  @extend .priceDifference
   float: right
   position: relative
   z-index: 1
 
-  +media-tablet-landscape-down()
-    padding: 0 3px
-
-.perCentIcon
-  position: absolute
-  top: 0
-  right: 0
-  width: 116px
-  height: 50px
-  z-index: -1
-
-  +media-tablet-landscape-down()
-    width: 72px
-    height: 30px
-    transform: scale(0.8);
-    margin-top: -3px;
-    margin-right: -8px;
-
 .new
-  background: $primary
-  color: white
-  padding: 0 15px
-  margin-right: 10px
-  float: left
-  text-transform: uppercase
-  border-radius: 4px
-
-  +media-tablet-landscape-down()
-    padding: 0 5px
-    border-radius: 2px
+  @extend .priceDifference
+  margin-right: 12px

package/source/components/VehicleDetailedSlider/partials/PriceData.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import FormattedNumber from '../../FormattedNumber/FormattedNumber';
-
-import IconSVG from '../../_common/IconSVG/IconSVG';
+import Badge from '../../_common/Badge/Badge';
 
 import styles from './PriceData.styl';
 
@@ -19,18 +18,17 @@ const EUR = `\u20AC`;
 const PriceData: React.FunctionComponent<IProps> = ({ t, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent }) => {
   return (
     <div className={styles.topWrapper}>
-      {showNewLabel && <div className={styles.new}>{t('slider.new')}</div>}
+      {showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
       {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
-        <div className={styles.priceDifference}>
+        <Badge type='green' className={styles.priceDifference}>
           <FormattedNumber value={historyPriceDifference} numbersAfterDot={0}/>
           {` ${EUR} ${t('slider.save')}`}
-        </div>
+        </Badge>
       )}
       {historyPriceDifferencePerCent >= MIN_PERCENT && (
-        <div className={styles.priceDifferencePerCent}>
-          <IconSVG name='discountRibbon' className={styles.perCentIcon} customDimensions/>
+        <Badge type='red' className={styles.priceDifferencePerCent}>
           -{historyPriceDifferencePerCent}%
-        </div>
+        </Badge>
       )}
     </div>
   );

package/source/components/VehicleDetailedSlider/partials/Title.styl

@@ -1,7 +1,7 @@
 @import '../../../theme/mixins.styl';
 
 .titleSection
-  color: $blue-10
+  // color: $blue-10
   text-transform uppercase
   position relative
   display flex
@@ -11,6 +11,8 @@
   +media-tablet-down()
     truncate()
     padding: 15px
+    display: flex
+    flex-direction: column
 
 .makeModel
   font-weight: bold
@@ -20,6 +22,10 @@
 .otherParam
   font-size: 12px;
   text-transform none
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
 .userButton
   cursor: pointer

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

@@ -11,14 +11,14 @@ export const IconSvgWrapper = styled(IconSVG)(props => ({
 export const TooltipWrapper = styled('div')(props => ({
   // zIndex: props.zindex ? props.zindex : 9996,
   display: 'inline-block'
-}))
+}));
 
 export const Theme = createTheme({
   components: {
     MuiTooltip: {
       styleOverrides: {
-        
+
       }
     }
   }
-})
+});

package/source/components/_common/MaterialTooltip/MaterialTooltip.tsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
-import { styled } from '@mui/material/styles';
+import { styled, ThemeProvider } from '@mui/material/styles';
 import { IconSvgWrapper, Theme, TooltipWrapper } from './MaterialTooltip.styled';
-import { ThemeProvider } from '@mui/material/styles';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
-import { debounce } from 'lodash'
+import { debounce } from 'lodash';
 
 interface IMaterialTooltip {
   text: string;
@@ -44,11 +43,14 @@ const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMate
 
   const onHandleMenuClose = () => {
     setIsOpen(false);
-  }
+  };
 
-  const onHandleMenuToggle = debounce((event: any) => {
-    setIsOpen(() => !isOpen);
-  }, 50)
+  const onHandleMenuToggle = debounce(
+    (event: any) => {
+      setIsOpen(() => !isOpen);
+    },
+    50
+  );
 
   return (
     <ThemeProvider theme={Theme}>
@@ -69,7 +71,7 @@ const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMate
             className={className}
             zindex={zindex}
             PopperProps={{
-              disablePortal: true,
+              disablePortal: true
             }}
           >
             <IconButton>

package/source/components/_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper.tsx

@@ -49,7 +49,7 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
               styles.controlButton,
               styles.offerButtonGet,
               { [styles.offerButtonSuccess]: isOfferRequested || !!Object.keys(checkoutData).length },
-              { [styles.isAlternativeButton]: isAlternative || isSale || isAlternativeType}
+              { [styles.isAlternativeButton]: isAlternative || isSale || isAlternativeType }
             );
 
             const getRequestButtonTitle = () => {