@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/RateSearchValue/RateSearchValue.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import { getFormattedPrice } from '../../utils/CommonUtils';
+
+import styles from './RateSearchValue.styl';
+
+interface IRateSearchValueProps {
+  t?: (phrase: string, options?: any) => string;
+  i18nPrefix?: string;
+  className?: string;
+  showLabel?: boolean;
+
+  monthlyInstallmentFrom?: any;
+  monthlyInstallmentTo?: any;
+  firstInstallment?: number;
+  paybackPeriod?: number;
+
+  onClick: () => void;
+
+}
+
+const RateSearchValue: React.FC<IRateSearchValueProps> = (props) => {
+  const { t, i18nPrefix, className, showLabel, onClick, monthlyInstallmentFrom, monthlyInstallmentTo, firstInstallment, paybackPeriod } = props;
+  const rowValues: any = { monthlyInstallmentFrom, monthlyInstallmentTo, firstInstallment, paybackPeriod };
+  const wrapperClassName = classnames(styles.RateSearchValue, className);
+
+  const transformValue = (name: string, value: any) => {
+    return Number(value) ? t(`${i18nPrefix}${name}Value`, { value: getFormattedPrice(Number(value), '$,.0f') }) : null;
+  };
+
+  const monthlyInstallmentValues = Number(monthlyInstallmentFrom) || Number(monthlyInstallmentTo)
+    ? ['monthlyInstallmentFrom', 'monthlyInstallmentTo'].map((item: string) => transformValue(item, rowValues[item]))
+    : [t(`${i18nPrefix}any`)];
+  const otherValues = ['firstInstallment', 'paybackPeriod'].map((item: string) => transformValue(item, rowValues[item]));
+  const values = [...monthlyInstallmentValues, ...otherValues].filter((item: any) => !!item);
+
+  return (
+    <div onClick={onClick} className={wrapperClassName}>
+      {showLabel
+        ? <strong className={styles.label}>{t(`${i18nPrefix}monthlyInstallmentLabel`)}</strong>
+        : null
+      }
+      <span>{values.length > 1 ? values.join(', ') : t(`${i18nPrefix}defaultValue`)}</span>
+    </div>
+  );
+};
+
+RateSearchValue.defaultProps = {
+  t: (phrase: string) => phrase,
+  i18nPrefix: '',
+  showLabel: true
+};
+
+export default RateSearchValue;

package/compat/RateSearchWidget/RateSearchWidget.styl

@@ -0,0 +1,107 @@
+@import '../legacy-theme/theme.styl'
+
+.wrapper
+  position: relative
+  box-sizing: border-box
+  padding: 12px 18px
+  background-color: white
+  font-family: 'Arial Fett', 'Arial Standard', 'Arial'
+  border-radius: 10px
+  border: 1px solid $grey-e
+  width: 100%
+  box-shadow: 0px 2px 10px rgba(76, 78, 100, 0.22);
+  &:before
+    display: none
+    position: absolute
+    content: ''
+    background-color: white
+    width: 16px
+    height: 16px
+    transform: rotate(45deg)
+
+  :global
+    .react-select__control
+      height: auto !important
+      min-height: 36px !important
+      border-radius: 0 !important
+
+    .react-select__menu
+      .react-select__option.react-select__option--is-focused:not(.react-select__option--is-disabled)
+        background-color: $primary8
+        color: $grey-3
+        box-shadow: none
+        
+      .react-select__option.react-select__option--is-selected:not(.react-select__option--is-disabled)
+        background-color: $skyBlue
+        color: white
+
+    .react-select__value-container
+      padding: 0 5px
+
+      .react-select__placeholder
+        color: $grey-ae
+
+.header
+  display: flex
+  justify-content: space-between
+  align-items: center
+  // margin-bottom: 18px
+  font-size: 20px
+  & svg
+    cursor: pointer
+
+.title
+  margin: 0
+  font-size: 14px
+  color: #4C4E64DE
+  line-height: 32px
+
+.dropDownLabel
+  display: block;
+  width: 100%
+  margin-top: 16px
+
+.caption
+  display: block
+  margin-bottom: 9px
+  font-size: 14px
+  font-weight: bold
+
+.dropdown
+  margin-bottom: 20px
+
+.actionsWrapper
+  margin-top: 16px;
+  display: flex
+  gap: 10px;
+  justify-content: space-evenly
+  align-items: center
+
+.dropdownsWrap
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+.applyButton
+  width: 96px
+  min-width: 96px
+  height: 30px
+  cursor: pointer
+  border-radius: 8px
+  box-sizing: border-box
+
+.abortButton
+  display inline-block
+  margin-left: 15px
+  cursor: pointer
+  font-size: 13px;
+  line-height: 22px;
+  letter-spacing: 0.46px;
+  text-transform: capitalize;
+  color: #9E9E9E;
+
+.twoColumnWrapper
+  display: flex
+  justify-content: space-between
+  align-items: flex-end
+  flex-wrap: wrap

package/compat/RateSearchWidget/RateSearchWidget.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import classnames from 'classnames';
+
+import { FIRST_INSTALLMENT_FIX, MONTHLY_INSTALLMENT_FIX, PAYBACK_PERIOD_FIX } from '../../constants/RateSearchWidget';
+
+import MaterialAutocomplete from '../MdSelect/MdSelect';
+import Button from '../Button/Button';
+import { numberWithDot } from '../../utils/CommonUtils';
+import styles from './RateSearchWidget.styl';
+
+interface IRateSearchWidgetProps {
+  t?: (phrase: string, options?: any) => string;
+  i18nPrefix?: string;
+  className?: string;
+  simpleMode?: boolean;
+
+  monthlyInstallmentFrom?: string | number;
+  monthlyInstallmentTo?: string | number;
+  firstInstallment?: number;
+  paybackPeriod?: number;
+
+  onAbort: () => void;
+  onApply: (state: any) => void;
+}
+
+interface IRateSearchWidgetState {
+  monthlyInstallmentFrom?: string | number;
+  monthlyInstallmentTo?: string | number;
+  firstInstallment?: number;
+  paybackPeriod?: number;
+  [key: string]: any;
+}
+
+class RateSearchWidget extends React.Component<IRateSearchWidgetProps, IRateSearchWidgetState> {
+  static readonly defaultProps = {
+    t: (phrase: string) => phrase,
+    i18nPrefix: '',
+    simpleMode: true
+  };
+
+  constructor(props: IRateSearchWidgetProps) {
+    super(props);
+
+    const { firstInstallment, monthlyInstallmentFrom, monthlyInstallmentTo, paybackPeriod } = props;
+
+    this.state = {
+      firstInstallment,
+      paybackPeriod,
+      monthlyInstallmentFrom: !!monthlyInstallmentFrom ? monthlyInstallmentFrom : 'any',
+      monthlyInstallmentTo: !!monthlyInstallmentTo ? monthlyInstallmentTo : 'any'
+
+    };
+  }
+
+  getFormattedLabel = (option: number | string, units?: string): React.ReactNode => {
+    const { t, i18nPrefix } = this.props;
+    if (Number.isFinite(+option)) {
+      return `${numberWithDot(option)} ${units ? ` ${units}` : false}`;
+    }
+    return t(`${i18nPrefix}${option}`);
+  };
+
+  getValue = (value: any, units: string) => {
+    if (value === null || value === undefined) return null; // tslint:disable-line
+
+    return {
+      value: `${value}`,
+      label: this.getFormattedLabel(value, units)
+    };
+  };
+
+  onDropDownChange = (name: string, value: any) => {
+    this.setState({ [name]: value });
+  };
+
+  onApplyClick = () => {
+    const { onApply } = this.props;
+    onApply(this.state);
+  };
+
+  renderDropDowns = () => {
+    const { t, i18nPrefix, simpleMode } = this.props;
+    const dropdownConfig: any = {
+      monthlyInstallmentFrom: {
+        defaultValue: t(`${i18nPrefix}any`),
+        units: '€',
+        options: MONTHLY_INSTALLMENT_FIX,
+        disableClearable: true,
+        label: simpleMode ? '' : 'monthlyInstallment'
+      },
+      monthlyInstallmentTo: {
+        defaultValue: t(`${i18nPrefix}any`),
+        units: '€',
+        options: MONTHLY_INSTALLMENT_FIX,
+        disableClearable: true,
+        label: simpleMode ? 'monthlyInstallmentTo' : ''
+      },
+      firstInstallment: {
+        defaultValue: '0',
+        units: '€',
+        options: FIRST_INSTALLMENT_FIX,
+        disableClearable: true,
+        label: 'firstInstallment'
+      },
+      paybackPeriod: {
+        defaultValue: '60',
+        disableClearable: true,
+        units: t(`${i18nPrefix}months`),
+        options: PAYBACK_PERIOD_FIX,
+        label: 'paybackPeriod'
+      }
+    };
+
+    const dropdowns = simpleMode
+      ? ['monthlyInstallmentTo', 'firstInstallment', 'paybackPeriod']
+      : ['monthlyInstallmentFrom', 'monthlyInstallmentTo', 'firstInstallment', 'paybackPeriod'];
+
+    return dropdowns.map((name: string) => {
+      const { defaultValue, units, options, label, ...rest } = dropdownConfig[name];
+
+      const dropDownProps = {
+        size: 'custom',
+        value: this.state[name] === 'any' ? t(`${i18nPrefix}${this.state[name]}`) : numberWithDot(this.state[name]),
+        label: t(`${i18nPrefix}${name}Placeholder`),
+        items: options.map((value: any) => this.getValue(value, units)),
+        onChange: (value: any) => this.onDropDownChange(name, value),
+        ...rest
+      };
+
+      return (
+        <label key={name} className={styles.dropDownLabel}>
+          {/* <strong className={styles.caption}>{label ? t(`${i18nPrefix}${label}`) : ''}</strong> */}
+          <MaterialAutocomplete {...dropDownProps} />
+        </label>
+      );
+    });
+  };
+
+  render() {
+    const { t, i18nPrefix, simpleMode, className, onAbort } = this.props;
+    const wrapperClassName = classnames(styles.wrapper, className);
+
+    return (
+      <div className={wrapperClassName}>
+        <div className={styles.header}>
+          <h3 className={styles.title}>{t(`${i18nPrefix}title`)}</h3>
+          {/* <div onClick={onAbort}>
+            <IconSVG name='deleteCircle' customDimensions />
+          </div> */}
+        </div>
+        <div className={classnames(styles.dropdownsWrap, { [styles.twoColumnWrapper]: !simpleMode })}>
+          {this.renderDropDowns()}
+        </div>
+        <div className={styles.actionsWrapper}>
+          <span onClick={onAbort} className={styles.abortButton}>{t(`${i18nPrefix}abort`)}</span>
+          <Button color='primary' onClick={this.onApplyClick} className={styles.applyButton}>{t(`${i18nPrefix}apply`)}</Button>
+        </div>
+      </div >
+    );
+  }
+}
+
+export default RateSearchWidget;

package/compat/ServiceBlockItem/ServiceBlockItem.styl

@@ -0,0 +1,48 @@
+@import '../legacy-theme/mixins.styl'
+
+.container
+  display flex
+  flex-direction: column;
+
+  +media-phone-only()
+    flex-direction: row;
+    padding: 17px 0
+    align-items: center;
+
+    & + &
+      border-top: 1px solid rgba(196, 196, 196, 0.3);
+
+.icon
+  margin 0 auto
+  width: 64px
+  height: 64px
+  flex-shrink: 0;
+
+  +media-phone-only()
+    width: 82px
+    height: 82px
+    order: 3;
+    margin-left: auto;
+    margin-left: 30px;
+
+.title
+  font-size: 16px
+  margin-top: 15px;
+  margin-bottom: 10px
+  text-align center
+  color: $grey-3a;
+  +media-phone-only()
+    margin-top: 0;
+    text-align: left
+
+.textContent
+  line-height: 20px
+  font-size: 12px;
+  text-align: justify;
+  box-sizing: border-box;
+  color: $grey-54;
+
+  +media-phone-only()
+    max-width: 246px;
+    margin 0
+    line-height: 14px;

package/compat/ServiceBlockItem/ServiceBlockItem.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import styles from './ServiceBlockItem.styl';
+
+import IconSVG from '../../iconsvg/IconSVG';
+
+interface IInfoBlockItemProps {
+  iconSrc?: string;
+  title?: string;
+  content?: string;
+  iconBgColor?: boolean;
+}
+
+const ServiceBlockItem: React.FunctionComponent<IInfoBlockItemProps> = ({ iconSrc, title, content }) => {
+  return(
+    <div className={styles.container}>
+      <IconSVG name={iconSrc} className={styles.icon} customDimensions />
+      <div className={styles.content}>
+        <h3 className={styles.title}>{title}</h3>
+        <p className={styles.textContent}>{content}</p>
+      </div>
+    </div>
+  );
+};
+
+export default ServiceBlockItem;

package/compat/SkeletonItem/SkeletonItem.styl

@@ -0,0 +1,81 @@
+@import '../legacy-theme/theme.styl'
+
+[class*='MuiSkeleton-rectangular']
+  height: inherit !important
+
+.vehicle
+  background-color #fff
+  border-radius: 3px;
+  position: relative
+  &:before
+    content: ''
+    position: absolute
+    left: 0
+    right: 0
+    bottom: 0
+    top: 0
+    z-index: 222
+    border: 1px solid #e8e8e8
+
+.infoSection
+  display: flex
+  align-items: center
+  padding: 7px 6px
+
+.circle
+  margin-left: auto
+  width: 22px
+  height: 22px
+
+.circleMin
+  flex-shrink: 0
+  width: 16px
+  height: 16px
+  margin-right: 10px
+
+.figure
+  height: 193px
+  @media (max-width: 575.98px)
+    height: 65vw
+
+.vehicleData
+  display: flex
+
+.vehicleInfo
+  width: 112px
+  box-sizing: border-box
+  padding: 9px 7px 14px 11px
+  flex-shrink: 0
+
+  @media (max-width: 575.98px)
+    width: 50%
+
+.vehiclePriceSection
+  padding: 13px 12px 12px 8px
+  border-left: 1px solid #d7d7d7
+  width: 100%
+
+  @media (max-width: 575.98px)
+    width: 50%
+
+.carProp
+  height: 35px
+  display: flex
+  align-items: center
+  border-bottom: 1px solid #d7d7d7
+
+.carPropLast
+  border-bottom: 0
+
+.carPropLastItem
+  width: 90%
+  margin: 0 auto
+
+.priceItem
+  display: flex
+  height: 40px
+  justify-content: space-between
+  align-items: center
+
+.seoText
+  padding: 10px

package/compat/SkeletonItem/SkeletonItem.tsx

@@ -0,0 +1,80 @@
+
+import * as React from 'react';
+import Skeleton from '../../ui/Skeleton';
+import clsx from 'clsx';
+import styled from './SkeletonItem.styl';
+
+export interface ISkeletonItem {
+  className?: string;
+  animation?: 'pulse' | 'wave' | false;
+  variant?: 'text' | 'rectangular' | 'circular';
+}
+
+const SkeletonItem: React.FC<ISkeletonItem> = ({ animation }) => {
+  return (
+    <div className={styled.vehicle}>
+      <div className={styled.infoSection}>
+        <Skeleton animation={animation} variant='text' width={'80%'} />
+        <Skeleton animation={animation} variant='circular' className={styled.circle} />
+      </div>
+      <div className={styled.figure}>
+        <Skeleton animation={animation} variant='rectangular' className={styled.root} />
+      </div>
+      <div className={styled.vehicleData}>
+        <div className={styled.vehicleInfo}>
+          <div className={styled.carProp}>
+            <Skeleton animation={animation} variant='circular' className={styled.circleMin} />
+            <Skeleton animation={animation} variant='text' width={'100%'} />
+          </div>
+          <div className={styled.carProp}>
+            <Skeleton animation={animation} variant='circular' className={styled.circleMin} />
+            <Skeleton animation={animation} variant='text' width={'100%'} />
+          </div>
+          <div className={styled.carProp}>
+            <Skeleton animation={animation} variant='circular' className={styled.circleMin} />
+            <Skeleton animation={animation} variant='text' width={'100%'} />
+          </div>
+          <div className={styled.carProp}>
+            <Skeleton animation={animation} variant='circular' className={styled.circleMin} />
+            <Skeleton animation={animation} variant='text' width={'100%'} />
+          </div>
+          <div className={clsx(styled.carProp, styled.carPropLast)}>
+            <Skeleton animation={animation} variant='text' className={styled.carPropLastItem} />
+          </div>
+        </div>
+
+        <div className={styled.vehiclePriceSection}>
+          <Skeleton animation={animation} variant='text' width={'50%'} />
+          <div className={styled.priceItem}>
+            <Skeleton animation={animation} variant='text' width={'70%'} />
+            <Skeleton animation={animation} variant='circular' className={styled.circle} />
+          </div>
+          <div className={styled.priceItem}>
+            <Skeleton animation={animation} variant='text' width={'70%'} />
+            <Skeleton animation={animation} variant='circular' className={styled.circle} />
+          </div>
+          <div className={styled.priceItem}>
+            <Skeleton animation={animation} variant='text' width={'70%'} />
+            <Skeleton animation={animation} variant='circular' className={styled.circle} />
+          </div>
+          <div className={styled.priceItem}>
+            <Skeleton animation={animation} variant='text' width={'70%'} />
+            <Skeleton animation={animation} variant='circular' className={styled.circle} />
+          </div>
+        </div>
+      </div>
+      <div className={styled.seoText}>
+        <Skeleton animation={animation} variant='text' width={'100%'} />
+        <Skeleton animation={animation} variant='text' width={'95%'} />
+        <Skeleton animation={animation} variant='text' width={'90%'} />
+      </div>
+    </div>
+  );
+};
+
+SkeletonItem.defaultProps = {
+  animation: 'wave',
+  variant: 'rectangular'
+};
+
+export default SkeletonItem;

package/compat/StarButton/StarButton.styl

@@ -0,0 +1,39 @@
+@import '../legacy-theme/mixins.styl'
+
+.parking
+  position: relative
+  display: flex
+  justify-content: center
+  align-items: center
+  height: 28px
+  width: 28px
+  padding: 10px
+
+.userButton
+  display: inline-block
+  font-size: 22px
+  cursor: pointer
+  background-size: cover
+
+.userButton.favorite
+  fill: white
+  stroke: $skyBlue
+  stroke-width: 5px
+  &.active
+    fill: $skyBlue
+
+.userButton.favorite:hover
+  fill: $skyBlue
+
+.count
+  position: absolute
+  top: 3px
+  left: 30px
+  z-index: $zIndex-fixed
+  padding: 3px 6px
+  border-radius: 50%
+  background-color: $primary
+  font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial'
+  font-weight: 700
+  font-size: 10px
+  color: white

package/compat/StarButton/StarButton.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import classnames from 'classnames';
+
+import IconSVG from '../../iconsvg/IconSVG';
+
+import styles from './StarButton.styl';
+
+interface IStarButton {
+  className?: string;
+  amountOfFavorite?: number;
+  isFavorite?: boolean;
+  customContainer?: string;
+
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+const StarButton: React.FunctionComponent<IStarButton> = ({ onClick, amountOfFavorite, className, isFavorite, customContainer }) => {
+  const classContainer = classnames(className, { [styles.parking]: amountOfFavorite });
+
+  return (
+    <div className={customContainer ? customContainer : classContainer }>
+      <IconSVG name='star'
+               className={classnames(styles.userButton, styles.favorite, { [styles.active]: isFavorite })}
+               onClick={onClick}
+               customDimensions />
+      {amountOfFavorite ? <span className={styles.count}>{amountOfFavorite}</span> : false}
+    </div>
+  );
+};
+
+export default StarButton;

package/compat/TabPanel/TabPanel.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+interface ITabPanelProps {
+  children?: React.ReactNode;
+  className?: string;
+  index: any;
+  value: any;
+}
+/* tslint:disable */
+export default function TabPanel(props: ITabPanelProps) {
+  const { children, value, index, className,  ...other } = props;
+
+  return (
+    <div
+      role='tabpanel'
+      className={className}
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <>
+            {children}
+        </>
+      )}
+    </div>
+  );
+};

package/compat/TimePicker/TimePicker.styl

@@ -0,0 +1,23 @@
+.wrapper 
+    display: grid
+    grid-column-gap: 16px
+    grid-template-areas: 'day time'
+    grid-template-columns: repeat(2, 1fr);
+
+.dayForm
+    grid-area: day;
+    width: 100%
+    [class*='MuiSelect-select']
+        padding-right: 0 !important
+
+.timeForm
+    grid-area: time;
+    width: 100%
+    [class*='MuiSelect-select']
+        padding-right: 0 !important
+
+.selectIcon
+    width: 21px
+    height: auto
+    max-width: none !important
+    padding-right: 10px