@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/CustomerQuotesSlider/SliderArrow.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import IconSVG from '../../iconsvg/IconSVG';
+import styles from './CustomerQuotesSlider.styl';
+
+interface ISliderArrow {
+  onClick?(): void;
+  direction?: 'right' | 'left';
+}
+
+const SliderArrow: React.FC<ISliderArrow> = ({ onClick, direction = 'left' }) => (
+  <span
+    className={classNames(styles.arrow, { [styles[direction]]: direction })}
+    onClick={onClick}
+  >
+    <IconSVG name='arrowQuotes' />
+  </span>
+);
+
+export default SliderArrow;

package/compat/CustomerQuotesSlider/slider.global.styl

@@ -0,0 +1,2 @@
+@import '~slick-carousel/slick/slick.css';
+@import '~slick-carousel/slick/slick-theme.css';

package/compat/ExpansionPanel/ExpansionPanel.tsx

@@ -0,0 +1,68 @@
+// Autobahn (auto.de redesign) — the legacy ExpansionPanel now delegates to the md3 kit
+// `Accordion` (no MUI MIAccordion/AccordionSummary/AccordionDetails). Same prop surface, so every
+// call site (CarsOnline date groups, VehicleEdit section panels, …) keeps working and only the
+// chrome is re-skinned to the `.macc` md3 surface. The optional react-scroll <Element> wrapper is
+// preserved here (the kit Accordion deliberately does not wrap, to keep scroll anchors intact).
+// `defaultExpanded` is coerced with `!!` to match MUI's collapsed-by-default behaviour.
+
+import * as React from 'react';
+import classnames from 'classnames';
+import { Element } from 'react-scroll';
+
+import Accordion from '../../ui/Accordion';
+
+export interface IExpansionPanelProps {
+  title?: string | JSX.Element;
+  subTitle?: string;
+  defaultExpanded?: boolean;
+  /** controlled open state (legacy MUI Accordion `expanded`; undefined = uncontrolled).
+   *  Loose type — legacy callers (AccordionWidget) pass string | boolean; coerced below. */
+  expanded?: any;
+  onChange?: (expandedStatus: boolean) => void;
+  className?: string;
+  children?: any;
+  reactScrollName?: string;
+  reactScrollClassName?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+  subTitleClassName?: string;
+  expandedClassName?: string;
+  arrowIconClassName?: string;
+}
+
+interface IConditionalWrapperProps {
+  condition: boolean | string;
+  children: any;
+  wrap: (children: any) => JSX.Element;
+}
+
+const ConditionalWrapper = ({ condition, wrap, children }: IConditionalWrapperProps) =>
+  (condition ? wrap(children) : children);
+
+class ExpansionPanel extends React.Component<IExpansionPanelProps> {
+  render(): JSX.Element {
+    const {
+      className, title, subTitle, children, reactScrollName, reactScrollClassName, defaultExpanded, onChange, expanded
+    } = this.props;
+
+    return (
+      <ConditionalWrapper
+        condition={reactScrollName}
+        wrap={(c: any) => <Element name={reactScrollName} className={classnames(reactScrollClassName)}>{c}</Element>}
+      >
+        <Accordion
+          title={title}
+          subtitle={subTitle}
+          defaultExpanded={!!defaultExpanded}
+          expanded={expanded === undefined ? undefined : !!expanded}
+          onToggle={onChange}
+          className={className}
+        >
+          {children}
+        </Accordion>
+      </ConditionalWrapper>
+    );
+  }
+}
+
+export default ExpansionPanel;

package/compat/FirstInfoBlock/FirstInfoBlock.styl

@@ -0,0 +1,33 @@
+@import '../legacy-theme/mixins.styl'
+@import '../legacy-theme/theme.styl'
+
+.container
+  // padding 0 0 20px;
+  // width: 100%
+  // box-sizing border-box
+  // background-color white
+  // display block;
+  text-decoration: none
+  grid-area: firstInfoBlock;
+  // borderRadius()
+
+// .headerWrap
+  // display flex
+  // box-sizing: border-box;
+  // justify-content: space-between;
+  // margin-bottom: 10px
+  // padding: 11px 16px 11px 16px;
+  // border-bottom: 1px solid rgba(196, 196, 196, 0.5);
+
+// .title
+  // margin 0
+  // font-size: 18px;
+  // color: rgba(#000, 60%);
+
+.content
+  display: flex
+  flex-wrap: wrap
+  align-items: flex-start;
+  color: $grey-54;
+  justify-content space-between
+  padding 0 16px

package/compat/FirstInfoBlock/FirstInfoBlock.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import styles from './FirstInfoBlock.styl';
+import { isMobileOnly } from 'react-device-detect';
+import FirstInfoBlockItem from './FirstInfoBlockItem/FirstInfoBlockItem';
+import InfoBlockWrapper from '../InfoBlockWrapper/InfoBlockWrapper';
+
+const infoBlockData = [
+  {
+    title: 'price',
+    content: 'priceText',
+    contentMobile: 'priceTextMobile'
+  },
+  {
+    title: 'guarantee',
+    content: 'guaranteeText',
+    contentMobile: 'guaranteeTextMobile'
+  },
+  {
+    title: 'autoDeCheck',
+    content: 'autoDeCheckText',
+    contentMobile: 'autoDeCheckTextMobile'
+  },
+  {
+    title: 'warranty',
+    content: 'warrantyText',
+    contentMobile: 'warrantyTextMobile'
+  }
+];
+
+// Relative URL: works identically on server and client (the old
+// `window.location.origin` read at module scope crashed Node SSR).
+const link = '/das-neue-auto-de/';
+
+const FirstInfoBlock = (props: any) => (
+  <a href={link} target='_blank' className={styles.container}>
+    <InfoBlockWrapper title={props.t('firstInfoBlock.why')}>
+      <div className={styles.content}>
+        {infoBlockData.map((item, index) => {
+          return (<FirstInfoBlockItem
+            title={props.t(`firstInfoBlock.${item.title}`)}
+            content={!isMobileOnly ? props.t(`firstInfoBlock.${item.content}`) : props.t(`firstInfoBlock.${item.contentMobile}`)}
+            key={index} />);
+        })}
+      </div>
+    </InfoBlockWrapper>
+  </a>
+);
+
+export default FirstInfoBlock;

package/compat/FirstInfoBlock/FirstInfoBlockItem/FirstInfoBlockItem.styl

@@ -0,0 +1,66 @@
+@import '../../legacy-theme/theme.styl'
+@import '../../legacy-theme/mixins.styl'
+
+.container
+  padding: 10px 0
+  width: 45%
+  display: flex
+  align-items: center;
+  flex-wrap: wrap
+
+  &:nth-of-type(1) .icon
+    background-image: url('../../../media/svg/infoBlocks/whyAutodeIconSet-Q.svg');
+  &:nth-of-type(2) .icon
+    background-image: url('../../../media/svg/infoBlocks/whyAutodeIconSet-F.svg');
+  &:nth-of-type(3) .icon
+    background-image: url('../../../media/svg/infoBlocks/whyAutodeIconSet-G.svg');
+  &:nth-of-type(4) .icon
+    background-image: url('../../../media/svg/infoBlocks/whyAutodeIconSet-R.svg');
+
+  +media-phone-only()
+    display: grid;
+    align-items: center;
+    width: 100%;
+    grid-template-columns: 1fr 82px;
+    grid-column-gap: 9px;
+    padding: 17px 0
+
+    & + &
+      border-top: 1px solid rgba(196, 196, 196, 0.3);
+
+.content
+  display flex
+  align-items: center;
+
+.icon
+  margin-right: 0
+  width: 64px
+  height: 64px
+  display block;
+  background-size contain
+
+  +media-phone-only()
+    width: 82px
+    height: 82px
+    grid-column: 2;
+    grid-row: 1 / span 3;
+
+.title
+  font-size: 16px;
+  margin-bottom: 5px
+  color: $grey-3a;
+  +media-phone-only()
+    grid-row: 1 / span 1;
+    text-align: start;
+    color: $grey-32;
+
+.textContent
+  line-height: 20px;
+  font-size: 15px;
+  margin-top: 10px;
+  word-wrap break-word
+  text-align: justify;
+  +media-phone-only()
+    font-size: 12px;
+    grid-column: 1 span 1;
+    grid-row: 2 / span 2;

package/compat/FirstInfoBlock/FirstInfoBlockItem/FirstInfoBlockItem.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import styles from './FirstInfoBlockItem.styl';
+interface IInfoBlockItemProps {
+  iconSrc?: string;
+  title?: string;
+  content?: string;
+}
+
+const FirstInfoBlockItem: React.FunctionComponent<IInfoBlockItemProps> = (props) => {
+  const { title, content } = props;
+
+  return(
+    <div className={styles.container}>
+      <i className={styles.icon}></i>
+      <h3 className={styles.title}>{title}</h3>
+      <div className={styles.textContent}>{content}</div>
+    </div>
+  );
+};
+
+export default FirstInfoBlockItem;

package/compat/FormattedNumber/FormattedNumber.styl

@@ -0,0 +1,2 @@
+.formattedNumber
+  position: relative

package/compat/FormattedNumber/FormattedNumber.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import styles from './FormattedNumber.styl';
+
+import classnames from 'classnames';
+
+export interface IFormattedPriceProps {
+  value: number;
+  toRound?: boolean;
+  disableFormatting?: boolean;
+  numbersAfterDot?: number;
+
+  className?: string;
+  afterCommaClassName?: string;
+  beforeCommaClassName?: string;
+}
+
+// const breakpointForRound = 10000;
+const separatorCounter = 3;
+const FormattedNumber: React.FunctionComponent<IFormattedPriceProps> = ({ className, value, disableFormatting, toRound, numbersAfterDot, beforeCommaClassName, afterCommaClassName }) => {
+  function getFormattedNumber() {
+    // First we need to check if value is actual number;
+
+    const notFalsieValue = !!value ? value : 0;
+
+    const rounded = toRound ? Math.round(notFalsieValue) : notFalsieValue;
+    const absoluteValue = Math.abs(rounded);
+    const isNegative = rounded < 0;
+    const toFixed = numbersAfterDot ? numbersAfterDot : 0;
+    const findDot = /./g;
+
+    // group number by '.' 77777777 -> 77.777.777
+    const formatedAbsoluteValue = absoluteValue
+      .toFixed(toFixed)
+      .replace(findDot, (foundSubstring, index, fullString) => {
+        const notFirst = index > 0;
+        const isDot = foundSubstring === '.';
+        const eachThird = (fullString.length - index) % separatorCounter === 0;
+
+        if (notFirst && isDot) {
+          return ',';
+        }
+
+        // for each third symbol add dot '3' -> '.3'
+        if (notFirst && !isDot && eachThird) {
+          return `.${foundSubstring}`;
+        }
+
+        return foundSubstring;
+      });
+
+    const formattedNumber = isNegative ? `-${formatedAbsoluteValue}` : formatedAbsoluteValue;
+
+    const findComma = formattedNumber.lastIndexOf(',');
+
+    // if number have the comma, we need separate it in two different elements,
+    // before comma and after comma for pretty showing
+    if (findComma !== -1) {
+      const beforeComma = formattedNumber.substring(0, findComma);
+      const afterComma = formattedNumber.substring(findComma);
+
+      return [
+        <span className={classnames(styles.beforeComma, beforeCommaClassName)} key='before'>{beforeComma}</span>,
+        <span className={classnames(styles.afterComma, afterCommaClassName)} key='after'>{afterComma}</span>
+      ];
+    }
+
+    return formattedNumber;
+  }
+
+  const val = disableFormatting ? value : getFormattedNumber();
+
+  return (
+    <span className={classnames(styles.formattedNumber, className)}>
+      <span className={styles.value}>{val}</span>
+    </span>
+  );
+};
+
+FormattedNumber.defaultProps = {
+  value: 0,
+  toRound: false,
+  disableFormatting: false, // put true for return original number
+  numbersAfterDot: 2, // if you don't need rounded number put 0 in this param
+
+  className: '',
+  afterCommaClassName: '',
+  beforeCommaClassName: ''
+};
+
+export default FormattedNumber;

package/compat/IconContainer/IconContainer.styl

@@ -0,0 +1,23 @@
+.Icon
+  display: inline-block
+  background-repeat: no-repeat
+  background-position: center
+  background-size: contain
+  width: 20px
+  height: 20px
+
+.xs
+  width: 9px
+  height: 9px
+
+.sm
+  width: 12px
+  height: 12px
+
+.md
+  width 16px
+  height 16px
+
+.df
+  width 20px
+  height 20px

package/compat/IconContainer/IconContainer.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import styles from './IconContainer.styl';
+
+interface IIconProps {
+  children?: any;
+  className?: string;
+  src: string;
+  width?: number;
+  height? : number;
+  size? : string;
+}
+
+class Icon extends React.Component<IIconProps, {}>{
+  static defaultProps = {
+    className: '',
+    size: ''
+  };
+
+  render() : JSX.Element {
+    const { src, height, width, size, className, children } = this.props;
+    const iconSizeClass = `${ size ? styles[size] : '' }`;
+    const classNames = `${styles.Icon} ${iconSizeClass} ${className}`;
+
+    const inlineStyles = {
+      backgroundImage: `${src ? `url(${src})` : 'none'}`,
+      height: `${height}px`,
+      width: `${width}px`
+    };
+
+    return <span className={classNames} style={inlineStyles}>{children}</span>;
+  }
+}
+
+export default Icon;

package/compat/Image/Image.styl

@@ -0,0 +1,109 @@
+.container
+  position: relative
+  width: auto
+  height: auto
+  background-color: #F5F5F5
+  box-shadow: 0 0 0 1px rgba(lightgray, 50%)
+  overflow: hidden
+  box-sizing: border-box
+
+  &.loaded
+    box-shadow: none
+
+.loader
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translateX(-50%)
+  color: #333
+
+.image
+  display: block
+  max-width 100%
+  max-height: 100%
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+
+  &.withAnimation
+    opacity: 0
+
+    &.image.wh,
+    &.image.ww
+      animation-name: auto_de_fadeIn
+      animation-duration: 0.2s
+      animation-fill-mode: forwards
+
+.imageSmall
+  opacity: 0
+
+.image.ww
+  width: 100%
+  height: auto
+
+.image.wh
+  width: auto
+  height: 100%
+
+.reload
+  position: absolute
+  top: 50%
+  left: 50%
+  padding-top: 35px
+  transform: translate(-50%, -50%)
+  cursor: pointer
+  display: block
+
+.reload::before
+  content: ''
+  position: absolute
+  display: block
+  width: 30px
+  height: 30px
+  top: 0
+  left: 50%
+  margin-left: -15px
+
+  background-image: url('../../media/images/refresh-button.svg')
+  background-repeat: no-repeat
+  background-position: center
+  background-size: contain
+  transition: all 0.2s ease-in-out
+  transform: rotate(0)
+
+.reload:hover::before
+  transform: rotate(360deg)
+
+.preloadImageWrapper
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+  filter: blur(3px)
+  width: 100%
+  height: 100%;
+  background-size: contain
+  background-repeat: no-repeat
+  background-position: 50% 50%
+
+
+.largeImage
+  animation-name: auto_de_fadeIn
+  animation-duration: 2s
+  animation-fill-mode: forwards
+  pointer-events: none
+
+  &.withAnimation
+    opacity: 0
+
+    &.image.wh,
+    &.image.ww
+      animation-name: auto_de_fadeIn
+      animation-duration: 0.2s
+      animation-fill-mode: forwards
+
+@keyframes auto_de_fadeIn {
+  from { opacity: 0 }
+  to   { opacity: 1 }
+}