@bytebrand/fe-ui-core 4.1.49 → 4.1.51

package/package.json

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

package/source/components/SearchPage/SearchTopBar/SearchTopBar.styl

@@ -17,6 +17,7 @@
   +media-tablet-down()
     height: 35px
     margin-bottom 5px
+    margin-top: 0;
   +media-phone-only()
     background-color: $grey-f2;
     padding: 5px 0 5px 10px
@@ -45,8 +46,8 @@
   font-weight: 700
 
 .sorting
-  // flex-basis: 20%
-  min-width: 180px
+  flex-basis: 20%
+  min-width: 140px
   [class*='MuiPaper-root'], [class*='MuiOutlinedInput-root']
     font-size: 14px !important
 
@@ -59,7 +60,6 @@
   margin-right: 10px
   color: $skyBlue
   +media-tablet-down()
-    font-size: 10px
     flex-basis: unset
 
 .resultText
@@ -94,4 +94,8 @@
 
 .sortingHeader
   color: $skyBlue
-  font-size: 13px
+  font-size: 13px
+  display: flex
+  justify-content: end
+  align-items: center
+  column-gap: 10px

package/source/components/SearchPage/SearchTopBar/SearchTopBar.tsx

@@ -6,6 +6,7 @@ import { searchTopBarTranslate } from '../../../locales/data';
 import MaterialMenu from '../../_common/UserMenu/MaterialMenu';
 import { isMobileOnly } from 'react-device-detect';
 import MaterialAutocomplete from '../../_common/MaterialAutocomplete/MaterialAutocomplete';
+import IconSVG from '../../_common/IconSVG/IconSVG';
 
 interface ISearchTopBarProps {
   t?: (key: string, options?: object) => string;
@@ -43,6 +44,7 @@ class SearchTopBar extends React.Component<ISearchTopBarProps, {}> {
     return (
       <span className={styles.sortingHeader}>
         {value}
+        <IconSVG name='menuArrow' customDimensions width={10} />
       </span>
     );
   }

package/source/components/_common/IconSVG/SVG/vehicle/Date.tsx

@@ -19,4 +19,3 @@ const SvgDate = (props: any) => (
 
 export default SvgDate;
 /* tslint:enable */
-

package/source/components/_common/IconSVG/SVG/vehicle/Owner.tsx

@@ -16,4 +16,3 @@ const SvgOwner = (props: any) => (
 
 export default SvgOwner;
 /* tslint:enable */
-

package/source/components/_common/MaterialSwitch/MaterialSwitch.tsx

@@ -22,7 +22,7 @@ const MaterialSwitch = ({ disabled, label, onChange, value = false, labelPlaceme
       labelPlacement={labelPlacement}
       control={
         <Switch
-          checked={checked}
+          checked={value || checked}
           onChange={handleChange}
           disabled={disabled}
           onClick={e => e.stopPropagation()}

package/source/components/_common/Modal/modals/ManageCookieModal/ManageCookieModal.styl

@@ -49,4 +49,8 @@
   text-transform: uppercase !important
 
 .outlinedBtn
-  border: none !important
+  border: none !important
+
+.switchBlock
+  display: flex
+  justify-content: space-between

package/source/components/_common/Modal/modals/ManageCookieModal/ManageCookieModal.tsx

@@ -1,12 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './ManageCookieModal.styl';
 
 import IconSVG from '../../../IconSVG/IconSVG';
 import Button from '../../../Button/Button';
 import MaterialAccordionGroup from '../../../MaterialAccordionGroup/MaterialAccordionGroup';
 import classNames from 'classnames';
+import MaterialSwitch from '../../../MaterialSwitch/MaterialSwitch';
 
 const ManageCookieModal = () => {
+  const [accordionSwitchValue, setAccordionSwitchValue] = useState(false);
+  const [switchValue, setSwitchValue] = useState(false);
+
+  const onHandleAccordionSwitchValue = (value: boolean) => {
+    setAccordionSwitchValue(value);
+  };
+
+  const accordionSwitchProps = {
+    value: accordionSwitchValue,
+    onChange: onHandleAccordionSwitchValue
+  };
+
   return (
     <div className={styles.modalWrapper}>
       <IconSVG name='autodeLogo' customDimensions />
@@ -17,6 +30,7 @@ const ManageCookieModal = () => {
           title='Notwendig'
           tooltipText='tooltip text'
           withSwitch
+          switchProps={accordionSwitchProps}
         >
           Wir verwenden Browser-Cookies, die notwendig sind, damit die Website wie vorgesehen funktioniert.
           Beispiel: Wir speichern Ihre Präferenzen bei der Datenerfassung auf der Website, damit wir sie berücksichtigen
@@ -27,6 +41,7 @@ const ManageCookieModal = () => {
         <MaterialAccordionGroup
           title='Analytisch'
           withSwitch
+          switchProps={accordionSwitchProps}
         >
           Um das Nutzerverhalten zu verstehen und Ihnen ein relevanteres Surferlebnis zu bieten oder den Inhalt
           unserer Website zu personalisieren. Beispiel: Wir sammeln Informationen darüber, welche Seiten Sie besuchen,
@@ -36,11 +51,16 @@ const ManageCookieModal = () => {
         <MaterialAccordionGroup
           title='Marketing'
           withSwitch
+          switchProps={accordionSwitchProps}
         >
           Zur Personalisierung und Messung der Effektivität von Werbung auf unserer Website und anderen Websites.
           Beispiel: Wir können Ihnen eine personalisierte Werbung auf der Grundlage der Seiten, die Sie auf unserer
           Website besuchen, anzeigen.
           For example, we may serve you a personalized ad based on the pages you visit on our site.
+          <div className={styles.switchBlock}>
+            <span>Cookie</span>
+            <MaterialSwitch value={switchValue} onChange={(value: boolean) => setSwitchValue(value)} />
+          </div>
         </MaterialAccordionGroup>
       </div>
       <div className={styles.buttonsContainer}>

package/source/components/_common/Modal/modals/PreviewCookieModal/PreviewCookieModal.tsx

@@ -13,7 +13,7 @@ const PreviewCookieModal = ({ toggleModal, setModal }: IPreviewCookieModal) => {
   const onAcceptAll = () => {
     localStorage.setItem('cookieConfig', JSON.stringify([]));
     toggleModal();
-  }
+  };
   return (
     <div className={styles.modalWrapper}>
       <IconSVG name='autodeLogo' customDimensions />