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

package/compat/Co2Widget/CO2Efficiency.tsx

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

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

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

@@ -1,11 +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' }
-];
+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' }
+];