@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/CookieModal/CookieModal.tsx

@@ -1,49 +1,49 @@
-import React, { useEffect, useState } from 'react';
-import useModal from './useModal';
-import { updateCookieList } from '../../utils/CommonUtils';
-import Modal from './Modal';
-
-export interface ICookieModal {
-  handleSentryInit?: () => void;
-}
-
-const CookieModal = ({ handleSentryInit }: ICookieModal) => {
-  const { isVisible, toggleModal } = useModal();
-  const [modal, setModal] = useState('');
-
-  useEffect(
-    () => {
-      const cookieConfig = localStorage.getItem('cookieConfig');
-      if (!cookieConfig) {
-        setModal('PREVIEW_COOKIE_MODAL');
-        toggleModal();
-      } else setTimeout(() => { updateCookieList(handleSentryInit); }, 3000);
-    },
-    []
-  );
-
-  const onClearModalState = () => {
-    setModal('');
-  };
-
-  const modalProps = {
-    onClearModalState,
-    setModal
-  };
-
-  return isVisible
-    ? <Modal
-        isVisible={isVisible}
-        handleSentryInit={handleSentryInit}
-        toggleModal={toggleModal}
-        name={modal}
-        modalProps={modalProps}
-      />
-    : <></>;
-};
-
-CookieModal.defaultProps = {
-  handleSentryInit: () => {}
-};
-
-export default CookieModal;
+import React, { useEffect, useState } from 'react';
+import useModal from './useModal';
+import { updateCookieList } from '../../utils/CommonUtils';
+import Modal from './Modal';
+
+export interface ICookieModal {
+  handleSentryInit?: () => void;
+}
+
+const CookieModal = ({ handleSentryInit }: ICookieModal) => {
+  const { isVisible, toggleModal } = useModal();
+  const [modal, setModal] = useState('');
+
+  useEffect(
+    () => {
+      const cookieConfig = localStorage.getItem('cookieConfig');
+      if (!cookieConfig) {
+        setModal('PREVIEW_COOKIE_MODAL');
+        toggleModal();
+      } else setTimeout(() => { updateCookieList(handleSentryInit); }, 3000);
+    },
+    []
+  );
+
+  const onClearModalState = () => {
+    setModal('');
+  };
+
+  const modalProps = {
+    onClearModalState,
+    setModal
+  };
+
+  return isVisible
+    ? <Modal
+        isVisible={isVisible}
+        handleSentryInit={handleSentryInit}
+        toggleModal={toggleModal}
+        name={modal}
+        modalProps={modalProps}
+      />
+    : <></>;
+};
+
+CookieModal.defaultProps = {
+  handleSentryInit: () => {}
+};
+
+export default CookieModal;

package/compat/CookieModal/Modal.tsx

@@ -1,43 +1,43 @@
-// md3 REBUILD (not a verbatim legacy move): the MUI <Modal> + emotion
-// BaseModalWrapper is replaced by a plain fixed overlay + centered surface.
-// Deliberately NOT the kit ui/Modal — the cookie consent dialog has no title
-// bar / close button and must not be dismissible without a choice.
-
-import * as React from 'react';
-
-import ModalsConfig from './ModalsConfig';
-
-interface IBasicModal {
-  isVisible: boolean;
-  toggleModal: () => void;
-  handleSentryInit?: () => void;
-  name: string;
-  modalProps?: any;
-}
-
-const OVERLAY: React.CSSProperties = {
-  position: 'fixed', inset: 0, zIndex: 9999,
-  background: 'rgba(0, 0, 0, 0.5)',
-  display: 'flex', alignItems: 'center', justifyContent: 'center',
-  padding: 16, overflowY: 'auto'
-};
-
-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))',
-  maxWidth: 640, width: '100%', maxHeight: '92vh', overflowY: 'auto'
-};
-
-const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit }: IBasicModal) => {
-  if (!isVisible) return null;
-  return (
-    <div style={OVERLAY} role='dialog' aria-modal='true' aria-label='Cookie-Einstellungen'>
-      <div style={SURFACE}>
-        {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
-      </div>
-    </div>
-  );
-};
-
-export default BasicModal;
+// md3 REBUILD (not a verbatim legacy move): the MUI <Modal> + emotion
+// BaseModalWrapper is replaced by a plain fixed overlay + centered surface.
+// Deliberately NOT the kit ui/Modal — the cookie consent dialog has no title
+// bar / close button and must not be dismissible without a choice.
+
+import * as React from 'react';
+
+import ModalsConfig from './ModalsConfig';
+
+interface IBasicModal {
+  isVisible: boolean;
+  toggleModal: () => void;
+  handleSentryInit?: () => void;
+  name: string;
+  modalProps?: any;
+}
+
+const OVERLAY: React.CSSProperties = {
+  position: 'fixed', inset: 0, zIndex: 9999,
+  background: 'rgba(0, 0, 0, 0.5)',
+  display: 'flex', alignItems: 'center', justifyContent: 'center',
+  padding: 16, overflowY: 'auto'
+};
+
+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))',
+  maxWidth: 640, width: '100%', maxHeight: '92vh', overflowY: 'auto'
+};
+
+const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit }: IBasicModal) => {
+  if (!isVisible) return null;
+  return (
+    <div style={OVERLAY} role='dialog' aria-modal='true' aria-label='Cookie-Einstellungen'>
+      <div style={SURFACE}>
+        {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
+      </div>
+    </div>
+  );
+};
+
+export default BasicModal;

package/compat/CookieModal/ModalsConfig.tsx

@@ -1,23 +1,23 @@
-import * as React from 'react';
-
-import TestModal from './modals/TestModal';
-import PreviewCookieModal from './modals/PreviewCookieModal/PreviewCookieModal';
-import ManageCookieModal from './modals/ManageCookieModal/ManageCookieModal';
-
-interface IModalConfigProps {
-  [key: string]: (props: any) => JSX.Element;
-}
-
-const ModalsConfig: IModalConfigProps = {
-  TEST_MODAL: (props: any) => {
-    return <TestModal { ...props } />;
-  },
-  PREVIEW_COOKIE_MODAL: (props: any) => {
-    return <PreviewCookieModal {...props} />;
-  },
-  MANAGE_COOKIE_MODAL: (props: any) => {
-    return <ManageCookieModal {...props} />;
-  }
-};
-
-export default ModalsConfig;
+import * as React from 'react';
+
+import TestModal from './modals/TestModal';
+import PreviewCookieModal from './modals/PreviewCookieModal/PreviewCookieModal';
+import ManageCookieModal from './modals/ManageCookieModal/ManageCookieModal';
+
+interface IModalConfigProps {
+  [key: string]: (props: any) => JSX.Element;
+}
+
+const ModalsConfig: IModalConfigProps = {
+  TEST_MODAL: (props: any) => {
+    return <TestModal { ...props } />;
+  },
+  PREVIEW_COOKIE_MODAL: (props: any) => {
+    return <PreviewCookieModal {...props} />;
+  },
+  MANAGE_COOKIE_MODAL: (props: any) => {
+    return <ManageCookieModal {...props} />;
+  }
+};
+
+export default ModalsConfig;

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

@@ -1,87 +1,87 @@
-@import '../../../legacy-theme/mixins.styl';
-
-.modalWrapper
-  padding: 13px 15px 28px;
-  text-align: center
-  box-sizing: border-box
-  max-width: 600px
-
-.modalTitle
-  font-family: sans-serif
-  font-weight: bold
-  font-size: 16px;
-  line-height: 133.4%;
-  color: rgba(76, 78, 100, 0.87)
-  margin-top: 12px
-  +media-tablet-up()
-    font-size: 24px;
-    margin-top: 20px
-
-.modalContent
-  font-family: sans-serif
-  font-size: 14px;
-  line-height: 24px;
-  text-align: justify;
-  letter-spacing: 0.15px;
-  color: rgba(76, 78, 100, 0.87);
-  margin-top: 12px
-  margin-right: 25px
-
-  +media-tablet-up()
-    margin-top: 20px
-.accordions
-  height: 278px
-  overflow-y: scroll
-  padding-right: 10px
-  margin-top: 16px
-  &::-webkit-scrollbar {
-    width: 6px
-  }
-  &::-webkit-scrollbar-track {
-    background: linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), #666CFF;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: #005CCB
-    border-radius: 50px
-  }
-
-.buttonsContainer
-  margin-top: 20px
-  display: flex
-  justify-content: center
-  gap: 18px;
-
-  +media-tablet-landscape-up()
-    gap: 36px;
-
-.modalBtn
-  height: 38px
-  text-transform: capitalize !important
-  +media-tablet-landscape-up()
-    min-width: 222px !important
-    font-size: 14px !important;
-
-.outlinedBtn
-  border: none !important;
-
-.switchBlock
-  display: flex
-  align-items: center
-  font-size: 12px
-  line-height: 15px
-  letter-spacing: 1px
-  color: rgba(76, 78, 100, 0.87)
-  text-align: left
-
-.switchBlockTitle
-  width: 140px;
-
-.switchBlockLink
-  color: rgba(76, 78, 100, 0.87);
-  text-decoration-line: underline;
-  font-size: 10px;
-
-  &:focus
-    text-decoration-line: underline;
-  &:hover
+@import '../../../legacy-theme/mixins.styl';
+
+.modalWrapper
+  padding: 13px 15px 28px;
+  text-align: center
+  box-sizing: border-box
+  max-width: 600px
+
+.modalTitle
+  font-family: sans-serif
+  font-weight: bold
+  font-size: 16px;
+  line-height: 133.4%;
+  color: rgba(76, 78, 100, 0.87)
+  margin-top: 12px
+  +media-tablet-up()
+    font-size: 24px;
+    margin-top: 20px
+
+.modalContent
+  font-family: sans-serif
+  font-size: 14px;
+  line-height: 24px;
+  text-align: justify;
+  letter-spacing: 0.15px;
+  color: rgba(76, 78, 100, 0.87);
+  margin-top: 12px
+  margin-right: 25px
+
+  +media-tablet-up()
+    margin-top: 20px
+.accordions
+  height: 278px
+  overflow-y: scroll
+  padding-right: 10px
+  margin-top: 16px
+  &::-webkit-scrollbar {
+    width: 6px
+  }
+  &::-webkit-scrollbar-track {
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), #666CFF;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #005CCB
+    border-radius: 50px
+  }
+
+.buttonsContainer
+  margin-top: 20px
+  display: flex
+  justify-content: center
+  gap: 18px;
+
+  +media-tablet-landscape-up()
+    gap: 36px;
+
+.modalBtn
+  height: 38px
+  text-transform: capitalize !important
+  +media-tablet-landscape-up()
+    min-width: 222px !important
+    font-size: 14px !important;
+
+.outlinedBtn
+  border: none !important;
+
+.switchBlock
+  display: flex
+  align-items: center
+  font-size: 12px
+  line-height: 15px
+  letter-spacing: 1px
+  color: rgba(76, 78, 100, 0.87)
+  text-align: left
+
+.switchBlockTitle
+  width: 140px;
+
+.switchBlockLink
+  color: rgba(76, 78, 100, 0.87);
+  text-decoration-line: underline;
+  font-size: 10px;
+
+  &:focus
+    text-decoration-line: underline;
+  &:hover
     text-decoration-line: none;