@bytebrand/fe-ui-core 4.8.50 → 4.8.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.8.50",
+  "version": "4.8.52",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",
@@ -104,7 +104,6 @@
     "@types/react": "^16.8.3"
   },
   "scripts": {
-    "prepare": "husky",
     "storybook": "start-storybook -p 6006",
     "clean": "rm -rf ./dist/*.*",
     "build:lib": "yarn clean && webpack --config ./webpack.config.js --progress",

package/source/components/OfferPanel/OfferCheckboxGroup/CheckboxContainer.tsx

@@ -21,7 +21,7 @@ export interface ICheckboxProps {
   checkboxClassName?: string;
   labelClassName?: string;
   labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
-  tooltipDescription?: string;
+  tooltipDescription?: React.ReactNode;
   checkboxPriceValue: any;
   tooltipPosX?: string;
   error?: boolean;
@@ -128,7 +128,7 @@ class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
           {description ? (
             <span className={styles.labelContent}>
               {description}
-              {tooltipDescription && <MaterialTooltip zindex={10000} text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
+              {tooltipDescription && <MaterialTooltip zindex={10000} disablePortal={false} text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
             </span>
           ) : false}
         </label>

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.styl

@@ -111,6 +111,30 @@
     max-height: inherit;
     width: inherit !important
 
+  :global
+    .MuiTooltip-tooltip
+      max-width: 360px !important
+      font-size: 11px
+      line-height: 1.45
+      color: #4C4E64AD
+      text-align: left
+
+      b
+        display: block
+        margin-bottom: 6px
+        font-size: 12px
+        color: #1a1a1a
+
+      p
+        margin: 0 0 6px
+
+      ul
+        margin: 4px 0 0
+        padding-left: 16px
+
+      li
+        margin-bottom: 3px
+
 .checkboxPrice
   align-self: center;
   color: rgba(#000000, .63);

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.tsx

@@ -16,7 +16,7 @@ const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, transferInsta
   return (
     <div className={offerGroupClass}>
       {isAboAccordionExpanded0 && <CheckboxContainer {...additionalService } />}
-      <CheckboxContainer {...{ ...transferInstallments, isAboAccordionExpanded0 }} />
+      {priceTabIndex === 2 && <CheckboxContainer {...{ ...transferInstallments, isAboAccordionExpanded0 }} />}
     </div>
   );
 };

package/source/components/OfferPanel/OfferPanel.tsx

@@ -71,7 +71,7 @@ const OfferPanel: FC<IFinancingPanel> = ({
 
           {priceTabIndex === THREE
             ? <div className={styles.aboAccordionWrapper}><AboAccordion /></div>
-            : <div className={styles.offerCheckboxGroup}><OfferCheckboxGroup {...{ transferInstallments, additionalService }} /></div>}
+            : <div className={styles.offerCheckboxGroup}><OfferCheckboxGroup {...{ transferInstallments, additionalService, priceTabIndex }} /></div>}
         </>
       }
     </form>

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

@@ -1,48 +1,48 @@
-import * as React from 'react';
-import FormattedNumber from '../../FormattedNumber/FormattedNumber';
-import Badge from '../../_common/Badge/Badge';
-
-import styles from './PriceData.styl';
-
-interface IProps {
-  t: (phrase: string, config?: any) => string;
-  showNewLabel: boolean;
-  historyPriceDifference: number;
-  historyPriceDifferencePerCent: number;
-  financingConfig?: any;
-  activeTab?: number;
-  showDownPayment: boolean;
-  financingFirstInstallment?: number | null;
-  leasingFirstInstallment?: number | null;
-}
-
-const MIN_PERCENT = 5;
-const MIN_PRICE_DIFFERENCE = 500;
-const EUR = `€`;
-
-const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, activeTab, financingFirstInstallment, leasingFirstInstallment }) => {
-  const showDownPaymentBadge = showDownPayment && (
-    (activeTab === 0 && financingFirstInstallment === 0) ||
-    (activeTab === 1 && leasingFirstInstallment === 0)
-  );
-  return (
-    <div className={styles.topWrapper}>
-      {showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
-      {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
-        <Badge type='green' className={styles.priceDifference}>
-          <FormattedNumber value={historyPriceDifference} numbersAfterDot={0}/>
-          {` ${EUR} ${t('slider.save')}`}
-        </Badge>
-      )}
-      {showDownPaymentBadge &&
-        <Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`0${EUR} ${t('slider.firstInstallment')}`}</Badge>}
-      {historyPriceDifferencePerCent >= MIN_PERCENT && (
-        <Badge type='red' className={styles.priceDifferencePerCent}>
-          -{historyPriceDifferencePerCent}%
-        </Badge>
-      )}
-    </div>
-  );
-};
-
-export default PriceData;
+import * as React from 'react';
+import FormattedNumber from '../../FormattedNumber/FormattedNumber';
+import Badge from '../../_common/Badge/Badge';
+
+import styles from './PriceData.styl';
+
+interface IProps {
+  t: (phrase: string, config?: any) => string;
+  showNewLabel: boolean;
+  historyPriceDifference: number;
+  historyPriceDifferencePerCent: number;
+  financingConfig?: any;
+  activeTab?: number;
+  showDownPayment: boolean;
+  financingFirstInstallment?: number | null;
+  leasingFirstInstallment?: number | null;
+}
+
+const MIN_PERCENT = 5;
+const MIN_PRICE_DIFFERENCE = 500;
+const EUR = `€`;
+
+const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, activeTab, financingFirstInstallment, leasingFirstInstallment }) => {
+  const showDownPaymentBadge = showDownPayment && (
+    (activeTab === 0 && financingFirstInstallment === 0) ||
+    (activeTab === 1 && leasingFirstInstallment === 0)
+  );
+  return (
+    <div className={styles.topWrapper}>
+      {showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
+      {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
+        <Badge type='green' className={styles.priceDifference}>
+          <FormattedNumber value={historyPriceDifference} numbersAfterDot={0}/>
+          {` ${EUR} ${t('slider.save')}`}
+        </Badge>
+      )}
+      {showDownPaymentBadge &&
+        <Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`0${EUR} ${t('slider.firstInstallment')}`}</Badge>}
+      {historyPriceDifferencePerCent >= MIN_PERCENT && (
+        <Badge type='red' className={styles.priceDifferencePerCent}>
+          -{historyPriceDifferencePerCent}%
+        </Badge>
+      )}
+    </div>
+  );
+};
+
+export default PriceData;

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

@@ -7,12 +7,13 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { debounce } from 'lodash';
 
 interface IMaterialTooltip {
-  text: string;
+  text: React.ReactNode;
   icon?: string;
   className?: string;
   placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
   disabled?: Boolean;
   zindex?: number;
+  disablePortal?: boolean;
 }
 
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
@@ -32,7 +33,7 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
   }
 }));
 
-const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMaterialTooltip) => {
+const MaterialTooltip = ({ text, placement, className, disabled, zindex, disablePortal = true }: IMaterialTooltip) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const onHandleMenuOpen = (event: any) => {
@@ -71,7 +72,7 @@ const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMate
             className={className}
             zindex={zindex}
             PopperProps={{
-              disablePortal: true
+              disablePortal
             }}
           >
             <IconButton>