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

package/compat/ExpansionPanel/ExpansionPanel.tsx

@@ -1,68 +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;
+// 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

@@ -1,33 +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
+@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

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

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

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

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

package/compat/FormattedNumber/FormattedNumber.tsx

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