@bytebrand/fe-ui-core-autobahn 1.0.94 → 1.0.95

package/compat/CookieModal/CookieModal.tsx

@@ -22,6 +22,16 @@ const CookieModal = ({ handleSentryInit }: ICookieModal) => {
     []
   );
 
+  useEffect(
+    () => {
+      if (!isVisible) return undefined;
+      const previousOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => { document.body.style.overflow = previousOverflow; };
+    },
+    [isVisible]
+  );
+
   const onClearModalState = () => {
     setModal('');
   };

package/compat/CookieModal/Modal.styl

@@ -0,0 +1,12 @@
+@import '../legacy-theme/mixins.styl'
+
+// SURFACE (Modal.tsx) sets max-height: 92vh inline for desktop — on mobile the
+// modal should grow to fit its full content instead of scrolling internally.
+// !important is required to win over the inline style attribute.
+.surface
+  +media-tablet-down()
+    max-height: none !important
+
+.overlay
+  +media-tablet-down()
+    padding-top: 71px !important

package/compat/CookieModal/Modal.tsx

@@ -16,6 +16,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 import ModalsConfig from './ModalsConfig';
+import styles from './Modal.styl';
 
 interface IBasicModal {
   isVisible: boolean;
@@ -33,9 +34,9 @@ const OVERLAY: React.CSSProperties = {
 };
 
 const SURFACE: React.CSSProperties = {
-  background: 'var(--md-sc-lowest, #fff)',
-  borderRadius: 'var(--md-r-lg, 16px)',
-  boxShadow: 'var(--md-e3, 0 8px 24px rgba(0,0,0,.2))',
+  background: '#FFFFFF',
+  borderRadius: '10px',
+  boxShadow: '0px 0px 20px rgba(76, 78, 100, 0.4)',
   maxWidth: 640, width: '100%', maxHeight: '92vh', overflowY: 'auto'
 };
 
@@ -46,8 +47,8 @@ const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit
     // .mbtn used by the modal buttons) under `.md3` and intentionally does
     // nothing outside it — a bare document.body portal loses the theme.
     <div className='md3'>
-      <div style={OVERLAY} role='dialog' aria-modal='true' aria-label='Cookie-Einstellungen'>
-        <div style={SURFACE}>
+      <div className={styles.overlay} style={OVERLAY} role='dialog' aria-modal='true' aria-label='Cookie-Einstellungen'>
+        <div className={styles.surface} style={SURFACE}>
           {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
         </div>
       </div>

package/compat/CookieModal/modals/ManageCookieModal/ManageCookieModal.styl

@@ -1,10 +1,10 @@
 @import '../../../legacy-theme/mixins.styl';
 
 .modalWrapper
-  padding: 13px 15px 28px;
+  padding: 25px;
   text-align: center
   box-sizing: border-box
-  max-width: 600px
+  max-width: 100%
 
 .modalTitle
   font-family: sans-serif
@@ -24,14 +24,18 @@
   text-align: justify;
   letter-spacing: 0.15px;
   color: rgba(76, 78, 100, 0.87);
-  margin-top: 12px
-  margin-right: 25px
+  margin-top: 5px
+  margin-right: 7px
+.accordionDescription
+  display: block
+  font-size: 14px
+  line-height: 18px
+  text-align: left
+  margin-bottom: 5px
 
-  +media-tablet-up()
-    margin-top: 20px
 .accordions
   height: 278px
-  overflow-y: scroll
+  overflow-y: auto
   padding-right: 10px
   margin-top: 16px
   &::-webkit-scrollbar {
@@ -49,10 +53,7 @@
   margin-top: 20px
   display: flex
   justify-content: center
-  gap: 18px;
-
-  +media-tablet-landscape-up()
-    gap: 36px;
+  gap: 36px;
 
 .modalBtn
   height: 38px
@@ -64,6 +65,23 @@
 .outlinedBtn
   border: none !important;
 
+.zustimmenBtn
+  width: calc(50% - 18px) !important
+  min-width: calc(50% - 18px) !important
+  height: 38px !important
+  background: #005CCB !important
+  border-radius: 4px !important
+  display: flex !important
+  align-items: center !important
+  justify-content: center !important
+  text-align: center !important
+  font-family: 'Arial' !important
+  font-style: normal !important
+  font-weight: 400 !important
+  font-size: 14px !important
+  line-height: 16px !important
+  color: #FFFFFF !important
+
 .switchBlock
   display: flex
   align-items: center
@@ -72,6 +90,27 @@
   letter-spacing: 1px
   color: rgba(76, 78, 100, 0.87)
   text-align: left
+  margin-bottom: 5px
+
+  &:last-child
+    margin-bottom: 0
+
+  > span:last-child
+    display: inline-flex
+    align-items: center
+
+  :global
+    .mswitch-track
+      margin-left: 5px
+      width: 38px
+      height: 22px
+
+    .mswitch-thumb
+      width: 16px
+      height: 16px
+
+    .mswitch input:checked + .mswitch-track .mswitch-thumb
+      transform: translateX(16px)
 
 .switchBlockTitle
   width: 140px;

package/compat/CookieModal/modals/ManageCookieModal/ManageCookieModal.tsx

@@ -115,11 +115,11 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
       <div className={styles.accordions}>
         <MaterialAccordionGroup
           title='Notwendig'
-          tooltipText='Notwendig'
+          // tooltipText='Notwendig'
           withSwitch
           switchProps={necessarySwitchProps}
         >
-          <span>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 können, wenn Sie auf unsere Website zurückkehren. Sie können diese Cookies in den Einstellungen Ihres Browsers deaktivieren, aber wenn Sie dies tun, funktioniert die Website möglicherweise nicht wie vorgesehen.</span>
+          <span className={styles.accordionDescription}>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 können, wenn Sie auf unsere Website zurückkehren. Sie können diese Cookies in den Einstellungen Ihres Browsers deaktivieren, aber wenn Sie dies tun, funktioniert die Website möglicherweise nicht wie vorgesehen.</span>
           {Object.keys(COOKIE_SCHEMA.necessary).map(cookie => {
             const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
             return (
@@ -134,10 +134,10 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
         <MaterialAccordionGroup
           title='Analytisch'
           withSwitch
-          tooltipText='Analytisch'
+          // tooltipText='Analytisch'
           switchProps={analyticsSwitchProps}
         >
-          <span>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, damit wir Ihnen relevantere Informationen präsentieren können.</span>
+          <span className={styles.accordionDescription}>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, damit wir Ihnen relevantere Informationen präsentieren können.</span>
           {Object.keys(COOKIE_SCHEMA.analytics).map(cookie => {
             const getItemsFromCategory = _get(COOKIE_SCHEMA, `analytics['${cookie}']`, null);
             const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
@@ -158,10 +158,10 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
         <MaterialAccordionGroup
           title='Marketing'
           withSwitch
-          tooltipText='Marketing'
+          // tooltipText='Marketing'
           switchProps={marketingSwitchProps}
         >
-          <span>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 von Ihnen besuchten Seiten auf unserer Website anzeigen.</span>
+          <span className={styles.accordionDescription}>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 von Ihnen besuchten Seiten auf unserer Website anzeigen.</span>
           {Object.keys(COOKIE_SCHEMA.marketing).map(cookie => {
             const getItemsFromCategory = _get(COOKIE_SCHEMA, `marketing['${cookie}']`, null);
             const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
@@ -181,8 +181,8 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
         </MaterialAccordionGroup>
       </div>
       <div className={styles.buttonsContainer}>
-        <Button onClick={() => onAccept()} className={classNames(styles.modalBtn, styles.outlinedBtn)} >Auswahl speichern</Button>
-        <Button onClick={() => onAccept({ marketing: [], analytics: [] })} className={styles.modalBtn}>Alles akzeptieren</Button>
+        <Button onClick={() => onAccept()} className={classNames(styles.modalBtn, styles.outlinedBtn, styles.zustimmenBtn)} >Auswahl speichern</Button>
+        <Button onClick={() => onAccept({ marketing: [], analytics: [] })} className={classNames(styles.modalBtn, styles.zustimmenBtn)}>Alles akzeptieren</Button>
       </div>
     </div>
   );

package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.styl

@@ -1,12 +1,12 @@
 @import '../../../legacy-theme/mixins.styl';
 
 .modalWrapper
-  padding: 28px 58px 28px
+  padding: 25px
   text-align: center
   box-sizing: border-box
-  max-width: 600px
+  max-width: 100%
   +media-tablet-down()
-    padding: 16px 15px 28px
+    padding: 16px 15px 12px 15px
 
 .modalTitle
   font-family: sans-serif
@@ -17,7 +17,12 @@
   margin-top: 20px
 
   +media-tablet-down()
+    font-family: 'Arial';
+    font-weight: 700;
     font-size: 16px;
+    line-height: 32px;
+    text-align: center;
+    color: rgba(76, 78, 100, 0.87);
     margin-top: 8px;
 
 .modalContent
@@ -29,9 +34,13 @@
   color: rgba(76, 78, 100, 0.87);
   margin-top: 20px
   +media-tablet-down()
+    font-family: 'Arial';
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    letter-spacing: 0.15px;
+    color: rgba(76, 78, 100, 0.87);
     column-gap: 0;
-    max-height: 320px;
-    overflow-y: scroll;
     padding-right: 10px;
     margin-right: -10px;
     margin-top: 8px
@@ -55,13 +64,68 @@
   +media-tablet-down()
     font-size: 11px !important
 
+.necessaryCookiesBtn
+  display: flex !important
+  flex-direction: column !important
+  align-items: center !important
+  justify-content: center !important
+  width: 184px !important
+  min-width: 184px !important
+  height: 38px !important
+  background: #005CCB !important
+  box-shadow: 0px 4px 8px -4px rgba(76, 78, 100, 0.42) !important
+  border-radius: 4px !important
+  font-family: 'Inter' !important
+  font-weight: 500 !important
+  font-size: 14px !important
+  line-height: 24px !important
+  letter-spacing: 0.4px !important
+  color: #FFFFFF !important
+
+.anpassenBtn
+  border: 1px solid rgba(102, 108, 255, 0.5) !important
+  box-shadow: none !important
+  border-radius: 4px !important
+  width: 142.5px !important
+  min-width: 142.5px !important
+  height: 38px !important
+  display: flex !important
+  align-items: center !important
+  justify-content: center !important
+  text-align: center !important
+  font-family: 'Arial' !important
+  font-weight: 400 !important
+  font-size: 14px !important
+  line-height: 16px !important
+  color: #1976D2 !important
+
+.zustimmenBtn
+  width: 142.5px !important
+  min-width: 142.5px !important
+  height: 38px !important
+  background: #005CCB !important
+  border-radius: 4px !important
+  display: flex !important
+  align-items: center !important
+  justify-content: center !important
+  text-align: center !important
+  font-family: 'Arial' !important
+  font-style: normal !important
+  font-weight: 400 !important
+  font-size: 14px !important
+  line-height: 16px !important
+  color: #FFFFFF !important
+
 .outlinedBtnLeft
   display: flex;
   justify-content: flex-end;
+  font-family: 'Arial';
+  font-weight: 400;
   color: #005CCB;
   font-size: 16px;
+  line-height: 24px;
   text-decoration: none;
-  margin-top: 12px;
+  margin-top: 3px;
   margin-bottom: 0;
   margin-left: auto;
   max-width: 80px;

package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.tsx

@@ -32,7 +32,7 @@ const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPrevi
     <div className={styles.modalWrapper}>
       <div className={styles.logoContainer}>
         <IconSVG name='autodeLogo' customDimensions />
-        <Button onClick={onDisableAll} className={styles.modalBtn}>Nur notwendige Cookies</Button>
+        <Button onClick={onDisableAll} className={`${styles.modalBtn} ${styles.necessaryCookiesBtn}`}>Nur notwendige Cookies</Button>
       </div>
       <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
       <div className={styles.modalContent}>
@@ -42,8 +42,8 @@ const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPrevi
       </div>
       <a href={`${environment}/impressum/`} target='_blank' className={styles.outlinedBtnLeft}>Impressum</a>
       <div className={styles.buttonsContainer}>
-        <Button onClick={() => setModal('MANAGE_COOKIE_MODAL')} className={styles.modalBtn} variant='outlined'>Anpassen</Button>
-        <Button onClick={onAcceptAll} className={styles.modalBtn}>zustimmen</Button>
+        <Button onClick={() => setModal('MANAGE_COOKIE_MODAL')} className={`${styles.modalBtn} ${styles.anpassenBtn}`} variant='outlined'>Anpassen</Button>
+        <Button onClick={onAcceptAll} className={`${styles.modalBtn} ${styles.zustimmenBtn}`}>zustimmen</Button>
       </div>
     </div>
   );

package/compat/MdAccordionGroup/MdAccordionGroup.tsx

@@ -32,7 +32,7 @@ const MdAccordionGroup: React.FC<IMdAccordionGroupProps> = ({ title, tooltipText
         aria-expanded={open}
         onClick={toggle}
         onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } }}
-        style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', width: '100%' }}
+        style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', width: '100%', paddingLeft: 15, paddingRight: 15 }}
       >
         <span className='macc-hd-text' style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
           <span className='macc-title md-title'>{title}</span>
@@ -45,7 +45,7 @@ const MdAccordionGroup: React.FC<IMdAccordionGroupProps> = ({ title, tooltipText
         ) : null}
         <Icon name='chevron-down' cls='macc-chev' />
       </div>
-      {open ? <div style={{ padding: '4px 15px 12px' }}>{children}</div> : null}
+      {open ? <div style={{ padding: '10px' }}>{children}</div> : null}
     </section>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.94",
+  "version": "1.0.95",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",