@bytebrand/fe-ui-core 4.2.24 → 4.2.26

package/package.json

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

package/source/components/Breadcrumbs/Breadcrumbs.styl

@@ -115,6 +115,7 @@
   font-size: 12px
   cursor: pointer
   color: $grey-74
+  text-transform: capitalize
 
 .breadcrumbsCDP
   [class*='Breadcrumbs__link'],

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/_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 = () => {