@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/Co2Widget/CO2Efficiency.styl

@@ -0,0 +1,219 @@
+@import '../legacy-theme/mixins.styl'
+
+.co2Efficiency
+  font-family: $font-style-arial
+  position: relative
+  width 132px
+  display flex
+  flex-direction column
+  align-items: flex-start
+  margin: 10px 0
+  margin-right: 20px
+  box-sizing: border-box
+
+  +media-phone-only()
+    width: auto
+
+.classContainer
+  position: relative
+  width 100%
+  height 14px
+
+.classContainer:not(:last-child)
+  margin-bottom: 3px
+
+.class
+  position: relative
+  display: block
+  height 14px
+  color white
+  font-size 7px
+  line-height 10px
+  padding-left 4px
+  text-transform uppercase
+  box-sizing: border-box
+  background-color: $grey-trans
+.class::after
+  position: absolute
+  right: -5px
+  top: 0
+  content ''
+  width 0
+  height 0
+  border-style solid
+  border-width 8px 0 5px 5px
+  border-color transparent
+
+.title
+  font-size: 15px
+  font-weight: 700
+  color: #000000DE
+
+.subTitle
+  font-size: 12px
+  margin: 5px 0 24px
+  font-weight: 400
+  color: #000000DE
+
+.divider
+  position: absolute
+  width: 1px
+  background-color: black
+  top: 0
+  left: 161px
+  height: 127px
+
+.activeClass
+  @extends .class
+  position: absolute
+  top: 0
+  right -20px
+  padding 0 5px
+  background-color $grey-3
+  display: flex
+  align-items: center
+.activeClass::before
+  content ''
+  position absolute
+  top 0
+  left -5px
+  width 0
+  height 0
+  border-style solid
+  border-width 7px 5px 6px 0
+  border-color transparent $grey-3 transparent transparent
+
+.secondActiveClass
+  @extends .class
+  position: absolute
+  top: 0
+  right -60px
+  padding 0 5px
+  background-color $grey-3
+  display: flex
+  align-items: center
+.secondActiveClass::before
+  content ''
+  position absolute
+  top 0
+  left -5px
+  width 0
+  height 0
+  border-style solid
+  border-width 7px 5px 6px 0
+  border-color transparent $grey-3 transparent transparent
+
+.levelsContainer
+  position relative
+
+.container
+  position relative
+
+.levelTitle
+  top: -21px;
+  left: 78px;
+  position: absolute;
+  width: 74px;
+  font-size: 9px;
+  text-align: right;
+
+.wltpLevelTitle
+  width: 80px;
+  top: -21px
+  left: 172px
+  position: absolute
+  font-size: 9px
+
+.wltpLevelsContainer
+  padding: 13.5px 7.5px
+  border-top: 1px solid #e8e8e8;
+
+:global
+  .auto_de_selector_energyEfficiencyClass_appp
+    background-color: #1D9453
+  .auto_de_selector_energyEfficiencyClass_appp::after
+    border-left-color: #1D9453
+
+  .auto_de_selector_energyEfficiencyClass_app
+    background-color: #24A728
+  .auto_de_selector_energyEfficiencyClass_app::after
+    border-left-color: #24A728
+
+  .auto_de_selector_energyEfficiencyClass_ap
+    background-color: #ACC535
+  .auto_de_selector_energyEfficiencyClass_ap::after
+    border-left-color: #ACC535
+
+  .auto_de_selector_energyEfficiencyClass_a
+    background-color: #FFFB67
+  .auto_de_selector_energyEfficiencyClass_a::after
+    border-left-color: #FFFB67
+
+  .auto_de_selector_energyEfficiencyClass_b
+    background-color: #FECA59
+  .auto_de_selector_energyEfficiencyClass_b::after
+    border-left-color: #FECA59
+
+  .auto_de_selector_energyEfficiencyClass_c
+    background-color: #FD7D2C
+  .auto_de_selector_energyEfficiencyClass_c::after
+    border-left-color: #FD7D2C
+
+  .auto_de_selector_energyEfficiencyClass_d
+    background-color: #FB1520
+  .auto_de_selector_energyEfficiencyClass_d::after
+    border-left-color: #FB1520
+
+  .auto_de_selector_energyEfficiencyClass_e
+    background-color: #DE111B
+  .auto_de_selector_energyEfficiencyClass_e::after
+    border-left-color: #DE111B
+
+  .auto_de_selector_energyEfficiencyClass_f
+    background-color: #C60E16
+  .auto_de_selector_energyEfficiencyClass_f::after
+    border-left-color: #C60E16
+
+  .auto_de_selector_energyEfficiencyClass_g
+    background-color: #AC0A13
+  .auto_de_selector_energyEfficiencyClass_g::after
+    border-left-color: #AC0A13
+
+
+
+
+:global
+  .auto_de_selector_energyEfficiencyClass_a_wltp
+    background-color: #4AA35A
+  .auto_de_selector_energyEfficiencyClass_a_wltp::after
+    border-left-color: #4AA35A
+
+  .auto_de_selector_energyEfficiencyClass_b_wltp
+    background-color: #6EBB4D
+  .auto_de_selector_energyEfficiencyClass_b_wltp::after
+    border-left-color: #6EBB4D
+
+  .auto_de_selector_energyEfficiencyClass_c_wltp
+    background-color: #BDDB4A
+  .auto_de_selector_energyEfficiencyClass_c_wltp::after
+    border-left-color: #BDDB4A
+
+  .auto_de_selector_energyEfficiencyClass_d_wltp
+    background-color: #FBF151
+  .auto_de_selector_energyEfficiencyClass_d_wltp::after
+    border-left-color: #FBF151
+
+  .auto_de_selector_energyEfficiencyClass_e_wltp
+    background-color: #EFB741
+  .auto_de_selector_energyEfficiencyClass_e_wltp::after
+    border-left-color: #EFB741
+
+  .auto_de_selector_energyEfficiencyClass_f_wltp
+    background-color: #E26733
+  .auto_de_selector_energyEfficiencyClass_f_wltp::after
+    border-left-color: #E26733
+
+  .auto_de_selector_energyEfficiencyClass_g_wltp
+    background-color: #DB3733
+  .auto_de_selector_energyEfficiencyClass_g_wltp::after
+    border-left-color: #DB3733

package/compat/Co2Widget/CO2Efficiency.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { selectors } from '@bytebrand/car-schema-selectors';
+import { WLTP_ENERGY_EFFICIENCY_CLASS } from '../../constants';
+
+import styles from './CO2Efficiency.styl';
+
+interface ICO2EfficiencyProps {
+  level: string;
+  wltpLevel?: string;
+  className?: string;
+  title?: string;
+  subTitle?: string;
+  t?: (key: string, options?: object) => string;
+  levelTitle?: string;
+  wltpLevelTitle?: string;
+  hybridPlugin?: boolean;
+  isWltp?: boolean;
+}
+
+// TODO: pass efficiency classes as a list into props.
+// TODO: move this component into storybook under VehicleProps category.
+class CO2Efficiency extends React.Component<ICO2EfficiencyProps> {
+  static readonly defaultProps = {
+    t: (key: string) => key
+  };
+
+  renderLevels = () => {
+    const { level, wltpLevel, t, hybridPlugin, isWltp = false } = this.props;
+
+    if (isWltp) {
+      return WLTP_ENERGY_EFFICIENCY_CLASS.map((key: string, i: number) => {
+        const width: string = `${(i + 1) * 10 + 13}px`; // tslint:disable-line
+        const isActive: boolean = key === level;
+        const isWltpActive: boolean = key === wltpLevel;
+        const className: string = classnames(styles.class, `auto_de_${key}_wltp`);
+        const translatedKey: string = t(`cbd:${key}`);
+  
+        return key !== 'selector_unknown' ? (
+          <div key={key} className={styles.classContainer}>
+            <span className={className} style={{ width }}>
+              {translatedKey}
+            </span>
+            {isActive && <span className={styles.activeClass}>{translatedKey}</span>}
+            {isWltpActive && hybridPlugin && <span className={styles.secondActiveClass}>{translatedKey}</span>}
+          </div>
+        ) : false;
+      });
+    };
+
+    return selectors.energyEfficiencyClass.map((key: string, i: number) => {
+      const width: string = `${(i + 1) * 10 + 10}px`; // tslint:disable-line
+      const isActive: boolean = key === level;
+      const isWltpActive: boolean = key === wltpLevel;
+      const className: string = classnames(styles.class, `auto_de_${key}`);
+      const translatedKey: string = t(`cbd:${key}`);
+
+      return key !== 'selector_unknown' ? (
+        <div key={key} className={styles.classContainer}>
+          <span className={className} style={{ width }}>
+            {translatedKey}
+          </span>
+          {isActive && <span className={styles.activeClass}>{translatedKey}</span>}
+          {isWltpActive && hybridPlugin && <span className={styles.secondActiveClass}>{translatedKey}</span>}
+        </div>
+      ) : false;
+    })}
+
+  render(): JSX.Element {
+    const { title, subTitle, wltpLevel, levelTitle, wltpLevelTitle, hybridPlugin } = this.props;
+    const wltpLevelsContainerClassNames = classnames(
+      { [styles.wltpLevelsContainer]: wltpLevel }
+    )
+    return (
+      <div className={wltpLevelsContainerClassNames}>
+        {wltpLevel && <div className={styles.title}>{title}</div>}
+        {wltpLevel && <div className={styles.subTitle}>{subTitle}</div>}
+        <div className={styles.container}>
+          {wltpLevel && hybridPlugin && <div className={styles.levelTitle}>{levelTitle}</div>}
+          {wltpLevel && hybridPlugin && <div className={styles.wltpLevelTitle}>{wltpLevelTitle}</div>}
+        </div>
+        <div className={styles.levelsContainer}>
+          <div className={styles.co2Efficiency}>
+            {this.renderLevels()}
+          </div>
+          {wltpLevel && hybridPlugin && <div className={styles.divider}></div>}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CO2Efficiency;

package/compat/ContactInfo/ContactInfo.styl

@@ -0,0 +1,22 @@
+@import '../legacy-theme/theme.styl';
+
+.itemWrapper
+  line-height: 21px
+  margin-top: 6px
+  margin-bottom: 6px
+  color: $grey-3
+  font-family: $font-style-arial
+  font-size: 14px
+  word-break: break-word
+
+.iconWrapper
+  display: flex
+  align-items: center
+
+  & > svg
+    flex-shrink: 0
+    margin-right: 8px
+    fill: $grey-3
+
+  & > p
+    margin: 0

package/compat/ContactInfo/ContactInfo.tsx

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import { Col, Hidden, Row, Visible } from 'react-grid-system';
+import classnames from 'classnames';
+
+import styles from './ContactInfo.styl';
+
+import IconSVG from '../../iconsvg/IconSVG';
+import { TITLES } from './TemporaryTranslation';
+
+export interface IContactInfoProps {
+  t: (key: string) => string;
+
+  title?: number;
+  gender?: number;
+  street?: string;
+  number?: string;
+  streetAddition?: string;
+  city?: string;
+  zip?: string;
+  countryName?: string;
+  firstName?: string;
+  lastName?: string;
+  company?: string;
+  email?: string;
+
+  phoneMain?: string;
+  phoneMobile?: string;
+  fax?: string;
+
+  ustIdNr?: string;
+
+  website?: string;
+}
+
+interface IRender {
+  (props: IContactInfoProps): JSX.Element | null;
+}
+
+const colXS: number = 12;
+const col7: number = 7;
+const col5: number = 5;
+
+const renderName: IRender = ({ t, firstName, lastName, title }) => (
+  !firstName && !lastName ? null :
+    <p className={styles.itemWrapper}>
+      {title !== null && title !== undefined && `${t(`common:${TITLES[title].label}`)} `}<b>{firstName} {lastName}</b>
+    </p>
+);
+
+const renderEmail: IRender = ({ email }) => (
+  !email ? null :
+    <a className={classnames(styles.itemWrapper, styles.iconWrapper)} href={`mailto:${email}`}>
+      <IconSVG name={'whiteEnvelope'}/>
+      <p>{email}</p>
+    </a>
+);
+
+const renderAddress: IRender = ({ street, number, streetAddition, zip, city, countryName }) => {
+  const streetAddress = [street, number, streetAddition].filter(Boolean).join(' ');
+  return (
+    !street && !zip && !city && !countryName ? null :
+      <p className={styles.itemWrapper}>
+        {streetAddress}
+        {(zip && city) && (
+          <>{streetAddress && <br/>}{`${zip} ${city}`}</>
+        )}
+        {countryName && <><br/>{countryName}</>}
+      </p>
+  );
+};
+
+const renderPhones: IRender = ({ t, phoneMain, phoneMobile, fax }) => (
+  !phoneMain && !phoneMobile && !fax ? null :
+    <div className={classnames(styles.itemWrapper, styles.iconWrapper)}>
+      <IconSVG name={'grayPhoneIcon'}/>
+      <div>
+        {phoneMain && (
+          <div><b>{t('label.phoneMain')}:</b> {phoneMain}</div>
+        )}
+        {phoneMobile && (
+          <div><b>{t('label.phoneMobile')}:</b> {phoneMobile}</div>
+        )}
+        {fax && (
+          <div><b>{t('label.fax')}:</b> {phoneMobile}</div>
+        )}
+      </div>
+    </div>
+);
+
+const renderWebsite: IRender = ({ website }) => (
+  !website ? null :
+    <a className={classnames(styles.itemWrapper, styles.iconWrapper)} href={`//${website.replace(/^(http|https):\/\//, '')}`} target='_blank' rel='external'>
+      <IconSVG name={'internetIcon'}/>
+      <p>{website}</p>
+    </a>
+);
+
+const renderUstIdNr: IRender = ({ t, ustIdNr }) => (
+  !ustIdNr ? null :
+    <p className={styles.itemWrapper}>
+      <b>{t('label.ustIdNr')}:</b> {ustIdNr}
+    </p>
+);
+
+const renderCompany: IRender = ({ company }) => (
+  !company ? null :
+    <p className={styles.itemWrapper}>{company}</p>
+);
+
+const itemFromRenders = (renders: IRender [], props: IContactInfoProps): JSX.Element[] => {
+  return renders.map(render => render(props)).filter((col => col !== null));
+};
+
+const leftRenders: IRender [] = [renderName, renderAddress, renderCompany, renderUstIdNr];
+const rightRenders: IRender [] = [renderEmail, renderPhones, renderWebsite];
+
+const ContactInfo: React.FunctionComponent<IContactInfoProps> = (props: IContactInfoProps) => {
+  const leftItems: JSX.Element[] = itemFromRenders(leftRenders, props);
+  const rightItems: JSX.Element[] = itemFromRenders(rightRenders, props);
+
+  const rowsLength = Math.max(leftItems.length, rightItems.length);
+  const rows: JSX.Element [] = [];
+
+  for (let i = 0; i < rowsLength; i = i + 1) {
+    rows.push(
+      <Row key={i} justify='between'>
+        {leftItems[i] ? (
+          <>
+            <Col sm={col5}>
+              {leftItems[i]}
+            </Col>
+            <Col sm={col7}>
+              {rightItems[i]}
+            </Col>
+          </>
+        ) : (
+          <Col sm={col7} offset={{ sm: col5 }}>
+            {rightItems[i]}
+          </Col>
+        )}
+      </Row>
+    );
+  }
+
+  return <div>
+    <Visible xs>
+      <Row>
+        {leftItems.concat(rightItems).map((item, i) => (
+          <Col key={i} xs={colXS}>
+            {item}
+          </Col>
+        ))}
+      </Row>
+    </Visible>
+    <Hidden xs>
+      {rows}
+    </Hidden>
+  </div>;
+};
+
+export default ContactInfo;

package/compat/ContactInfo/TemporaryTranslation.ts

@@ -0,0 +1,11 @@
+interface ITitle {
+  value: number;
+  label: string;
+}
+
+export const TITLES: ITitle[] = [
+  { value: 0, label: 'TITLE_DOCTOR_LABEL' },
+  { value: 1, label: 'TITLE_PROF_LABEL' },
+  { value: 2, label: 'TITLE_MR_LABEL' },
+  { value: 3, label: 'TITLE_MRS_LABEL' }
+];

package/compat/CookieModal/CookieModal.tsx

@@ -0,0 +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;

package/compat/CookieModal/Modal.tsx

@@ -0,0 +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;

package/compat/CookieModal/ModalsConfig.tsx

@@ -0,0 +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;