@bytebrand/fe-ui-core 4.2.58 → 4.2.60

package/__tests__/components/VehicleSmallCard/VehicleInfo.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import VehicleInfo from '../../../source/components/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo';
+import { IVehicleInfo } from '../../../source/framework/types/types';
+
+const defaultProps: IVehicleInfo = {
+  t: jest.fn(), // mock translation function 
+  mlCurrentSalesPricePredicted: 30000,
+  i18nPrefixForPriceRating: 'common:',
+  vehicleComponentName: 'search',
+  combineRefAlternative: false,
+  language: 'en',
+  url: '/vehicle',
+  target: '_self',
+  rel: 'noopener noreferrer',
+  regDate: 20210101,
+  linkTag: 'a',
+  routeObj: {},
+  gearbox: 'Automatic',
+  numberOfPreviousOwners: 2,
+  usageType: 'Used',
+  condition: 'Good',
+  damaged: false,
+  driveType: 'AWD',
+  environmentEmissions: { co2: 123 },
+  common: {
+    currentSalesPrice: 235,
+    mileage: '7.5'
+  },
+  consumption: {
+    fuel: 'Gasoline',
+    consumptionCombined: 7.5,
+    consumptionPowerCombined: 9.1,
+  },
+  location: {
+    city: 'Lviv',
+    street: 'street',
+    zipCode: 55555
+  },
+  offer: 'Offer',
+  engineData: {
+    power: '200hp',
+    cylinder: '8',
+    fuelType: 'Gasoline',
+  }
+};
+
+describe('VehicleInfo', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing with default props', () => {
+    render(<VehicleInfo {...defaultProps} />);
+  });
+
+  it('renders the link with the correct href', () => {
+    const { getByRole } = render(<VehicleInfo {...defaultProps} url="/vehicles/123" />);
+    expect(getByRole('link')).toHaveAttribute('href', '/vehicles/123');
+  });
+
+  // it('renders the correct main properties for comparable cars', () => {
+  //   const { getByText } = render(<VehicleInfo {...defaultProps} vehicleComponentName="comparable" />);
+  //   expect(getByText('Fuel Type')).toBeInTheDocument();
+  //   expect(getByText('Consumption Combined (l/100km)')).toBeInTheDocument();
+  //   expect(getByText('Power')).toBeInTheDocument();
+  // });
+
+  // it('renders the correct main properties for landing cars', () => {
+  //   const { getByText } = render(<VehicleInfo {...defaultProps} vehicleComponentName="landing" />);
+  //   expect(getByText('Mileage')).toBeInTheDocument();
+  //   expect(getByText('First Registration')).toBeInTheDocument();
+  //   expect(getByText('Fuel Type')).toBeInTheDocument();
+  // });
+
+  // it('renders the correct main properties for SRL', () => {
+  //   const { getByText } = render(<VehicleInfo {...defaultProps} vehicleComponentName="myVehicles" />);
+  //   expect(getByText('Mileage')).toBeInTheDocument();
+  //   expect(getByText('First Registration')).toBeInTheDocument();
+  //   expect(getByText('Drive type')).toBeInTheDocument();
+  // });
+
+  // it('renders the correct PriceRating component', () => {
+  //   const { getByTestId } = render(<VehicleInfo {...defaultProps} />);
+  //   expect(getByTestId('price-rating')).toBeInTheDocument();
+  // });
+
+});

package/__tests__/components/VehicleSmallCard/VehicleTitle.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import VehicleTitle from '../../../source/components/VehicleSmallCard/VehicleData/VehicleTitle/VehicleTitle';
+import { IVehicleTitleProps } from '../../../source/framework/types/types';
+
+const props: IVehicleTitleProps = {
+  onFavoriteClick: jest.fn(),
+  isCarInFavorite: false,
+  id: '123',
+  make: 'Toyota',
+  model: 'Camry',
+  subModel: 'subModelText',
+  option: 'option',
+  isSponsored: true,
+  combineRefAlternative: true,
+  vehicleComponentName: 'search',
+};
+
+describe('VehicleTitle', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render VehicleTitle component with correct texts and styles', () => {
+    const { container, getByText } = render(<VehicleTitle {...props} />);
+
+    const infoSectionElement = container.querySelector('.infoSection');
+    const wrapTitlesElement = container.querySelector('.wrapTitles');
+    const optionTitleElement = container.querySelector('.optionTitle');
+
+    switch (props.vehicleComponentName) {
+      case 'search':
+        expect(infoSectionElement).toHaveClass('infoSectionSearch');
+        expect(wrapTitlesElement).toHaveClass('wrapTitlesSearch');
+        expect(optionTitleElement).toHaveClass('optionTitleSearch');
+        break;
+      case 'recently':
+        expect(infoSectionElement).toHaveClass('infoSectionRecently');
+        expect(wrapTitlesElement).toHaveClass('wrapTitlesRecently');
+        expect(optionTitleElement).toHaveClass('optionTitleRecently');
+        break;
+      case 'favorite':
+        expect(infoSectionElement).toHaveClass('infoSectionRecently');
+        expect(wrapTitlesElement).toHaveClass('wrapTitlesFavorite');
+        break;
+      case 'landing':
+        expect(infoSectionElement).toHaveClass('infoSectionRecently');
+        expect(wrapTitlesElement).toHaveClass('wrapTitlesRecently');
+        expect(optionTitleElement).toHaveClass('optionTitleRecently');
+        break;
+      case 'myVehicles':
+        expect(infoSectionElement).toHaveClass('infoSectionMyVehicles');
+        expect(wrapTitlesElement).toHaveClass('wrapTitlesSearch');
+        expect(optionTitleElement).toHaveClass('optionTitleSearch');
+        break;
+      case 'main':
+        expect(infoSectionElement).toHaveClass('infoSectionRecently');
+        expect(wrapTitlesElement).toHaveClass('wrapTitlesRecently');
+        expect(optionTitleElement).toHaveClass('optionTitleRecently');
+        break;
+      default:
+        break;
+    }
+
+    if (props.combineRefAlternative) {
+      expect(optionTitleElement).toHaveClass('optionTitleIsAlternative');
+    }
+
+    expect(getByText('Toyota Camry')).toBeInTheDocument();
+    expect(getByText('subModelText')).toBeInTheDocument();
+    expect(getByText('option')).toBeInTheDocument();
+
+  });
+
+  it('render StarButton when combineRefAlternative is false', () => {
+    const { container } = render(<VehicleTitle {...props} combineRefAlternative={false} showFavoriteStar={true} />);
+    expect(container.querySelector('.starButton')).toBeInTheDocument();
+  });
+
+  it('should call onFavoriteClick handler when clicking on StarButton', () => {
+
+    const { container } = render(<VehicleTitle {...props} combineRefAlternative={false} showFavoriteStar={true} />);
+
+    fireEvent.click(container.querySelector('svg'));
+    expect(props.onFavoriteClick).toHaveBeenCalledTimes(1);
+    expect(props.onFavoriteClick).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'click' }),
+      props.id
+    );
+  });
+});

package/__tests__/components/_common/IconSVG/IconSVG.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import IconSVG from '../../../../source/components/_common/IconSVG/IconSVG';
+
+describe('IconSVG component', () => {
+  it('should render the SVG icon when a valid name prop is passed', () => {
+    const { container } = render(<IconSVG name='Search' />);
+    const svgIcon = container.querySelector('svg');
+    expect(svgIcon).toBeDefined();
+  });
+
+  it('should not render anything when an invalid name prop is passed', () => {
+    const { container } = render(<IconSVG name='nonexistenticon' />);
+    const svgIcon = container.querySelector('svg');
+    expect(svgIcon).toBeNull();
+  });
+
+  it('should apply custom dimensions when customDimensions prop is false', () => {
+    const { container } = render(<IconSVG name="search" customDimensions={false} />);
+    const svgIcon = container.querySelector('svg');
+    expect(svgIcon).toHaveAttribute('style', 'width: 1.5rem; height: auto;');
+  });
+});

package/__tests__/components/_common/StarButton/StarButton.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import StarButton from '../../../../source/components/_common/StarButton/StarButton';
+
+
+describe('StarButton', () => {
+  const defaultProps = {
+    onClick: jest.fn(),
+    isFavorite: true,
+    amountOfFavorite: 5
+  }
+
+  it('render StarButton component', () => {
+    const { container } = render(<StarButton {...defaultProps} />);
+    const svgIcon = container.querySelector('svg');
+    expect(svgIcon.firstChild).toBeTruthy();
+  });
+
+  it('should trigger the onClick function when clicked', () => {
+    const { container } = render(<StarButton {...defaultProps} />);
+    fireEvent.click(container.querySelector('svg'));
+    expect(defaultProps.onClick).toHaveBeenCalled();
+  });
+  
+  it('render amount of favorite if is amountOfFavorite are true', () => {
+    const { container, queryByTitle } = render(<StarButton {...defaultProps} amountOfFavorite={5} />);
+    expect(container.querySelector('span')).toBeInTheDocument();
+    expect(queryByTitle(`${defaultProps.amountOfFavorite}`));
+  });
+
+  it('removes amount of favorite if no favorites are present', () => {
+    const { queryByTitle } = render(<StarButton {...defaultProps} amountOfFavorite={0} />);
+    expect(queryByTitle(`${defaultProps.amountOfFavorite}`)).toBeFalsy();
+  });
+  
+  it('renders custom container class when custom container prop exists', () => {
+    const customContainerClass = 'custom-container-class';
+    const { container } = render(<StarButton {...defaultProps} customContainer={customContainerClass} />);
+    expect(container.firstChild).toHaveClass(customContainerClass);
+  });
+  
+  it('adds "active" className when isFavorite is true', () => {
+    const { container } = render(<StarButton isFavorite />);
+    expect(container.querySelector('svg')).toHaveClass('active');
+  });
+});

package/common.ts

@@ -85,6 +85,9 @@ export { default as Breadcrumbs } from './source/components/Breadcrumbs/Breadcru
 export { default as FirstInfoBlock } from './source/components/Breadcrumbs/FirstInfoBlock/FirstInfoBlock';
 export { default as InfoBlockWrapper } from './source/components/InfoBlocks/InfoBlockWrapper/InfoBlockWrapper';
 
+// USER DASHBOARD
+export { default as OrderStatusSection } from './source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusSection';
+
 // Filters
 export { default as FilterBlock } from './source/components/SearchFilters/common/FilterBlock/FilterBlock';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.58",
+  "version": "4.2.60",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/UserDashboardPage/sections/OrderStatusSection/AdditionalOrderInfo.styl

@@ -1,5 +1,5 @@
-@import '../../../../theme/theme.styl'
-@import '../../../../theme/mixins.styl'
+@import '../../../../../theme/theme.styl'
+@import '../../../../../theme/mixins.styl'
 
 .container
   padding: 8px 8px 16px
@@ -7,6 +7,9 @@
   +media-tablet-landscape-up()
     padding: 12px 16px
     display: grid
+    grid-template-areas: 
+    'addresses orderPrice'\
+    'customerSuport orderPrice'
     grid-template-columns: 1fr 1fr
     column-gap: 32px
 
@@ -14,7 +17,7 @@
   .orderInfoSection:first-child 
     position: relative  
 
-  .orderInfoSection:first-child:after
+  .orderPriceSection:before
     content: ''
     width: 1px
     height: 100%
@@ -22,7 +25,7 @@
     display: block;
     position: absolute;
     top: 0;
-    right: -16px;
+    left: -16px;
 
 .labelText
   color: $black50
@@ -31,9 +34,18 @@
 
 .orderInfoAddresses
   padding-bottom: 8px
+  grid-area: addresses
+  display: grid
+
+.orderPriceSection
+  grid-area: orderPrice
+  +media-tablet-landscape-up()
+    position: relative
 
 .orderInfoPrice
   border-top: 1px solid rgba(76,78,100,0.12)
+  +media-tablet-landscape-up()
+    border: none
 
 .overallRateLabel
   @extend .labelText
@@ -48,9 +60,9 @@
 .customerSuport
   @extend .labelText
   text-align: center
-  margin-top: 8px
   padding: 16px 24px
   border-top: 1px solid rgba(76,78,100,0.12)
+  grid-area: customerSuport
 
 .customerSuportButton
   margin-top: 8px

package/source/components/UserDashboardPage/sections/OrderStatusSection/AdditionalOrderInfo.tsx

@@ -9,8 +9,7 @@ import classNames from 'classnames';
 
 interface IAdditionalOrderData {
   addressData: { label: string, value: string }[];
-  carPriceData: { label: string, value: string }[];
-  financingData: { label: string, value: string }[];
+  carPriceData: { label: string, value: string | number }[];
   overallRate: {
     label: string,
     value: number
@@ -20,24 +19,30 @@ interface IAdditionalOrderData {
 interface IAdditionalOrderInfo {
   t: i18n.TFunction;
   additionalOrderData: IAdditionalOrderData;
+  redirectToUrl: (url: string) => void;
 }
 
-const AdditionalOrderInfo = ({ t, additionalOrderData }: IAdditionalOrderInfo) => {
-  const { addressData, carPriceData, financingData, overallRate } = additionalOrderData;
+const AdditionalOrderInfo = ({ t, additionalOrderData, redirectToUrl }: IAdditionalOrderInfo) => {
+  const { addressData, carPriceData, overallRate } = additionalOrderData;
+
+  const redirectToContactPage = () => {
+    return redirectToUrl('/account/kontakt');
+  };
+
   return (
     <div className={styles.container}>
-      <div className={styles.orderInfoSection}>
-        <div className={styles.orderInfoAddresses}>
-          {addressData.map((data) => {
-            const { value, label } = data;
-            return (
-              <div key={label}>
-                <div className={styles.labelText}>{label}</div>
-                <div className={styles.labelText}>{value}</div>
-              </div>
-            );
-          })}
-        </div>
+      <div className={styles.orderInfoAddresses}>
+        {addressData.map((data) => {
+          const { value, label } = data;
+          return (
+            <div key={label}>
+              <div className={styles.labelText}>{label}</div>
+              <div className={styles.labelText}>{value}</div>
+            </div>
+          );
+        })}
+      </div>
+      <div className={styles.orderPriceSection}>
         <div className={styles.orderInfoPrice}>
           {carPriceData.map((data) => {
             const { value, label } = data;
@@ -49,18 +54,7 @@ const AdditionalOrderInfo = ({ t, additionalOrderData }: IAdditionalOrderInfo) =
             );
           })}
         </div>
-      </div>
-      <div className={styles.orderInfoSection}>
         <div className={styles.orderInfoFinancing}>
-          {financingData.map((data) => {
-            const { value, label } = data;
-            return (
-              <div className={styles.flexContainer} key={label}>
-                <div className={styles.labelText}>{label}</div>
-                <div className={styles.labelText}>{value}</div>
-              </div>
-            );
-          })}
           <div className={classNames(styles.flexContainer, styles.overallRate)}>
             <div className={styles.overallRateLabel}>{overallRate.label}</div>
             <div>
@@ -77,10 +71,10 @@ const AdditionalOrderInfo = ({ t, additionalOrderData }: IAdditionalOrderInfo) =
             </div>
           </div>
         </div>
-        <div className={styles.customerSuport}>
-          <div>{t('customerSupportText')}</div>
-          <Button className={styles.customerSuportButton} variant='outlined'>{t('customerSupport')}</Button>
-        </div>
+      </div>
+      <div className={styles.customerSuport}>
+        <div>{t('customerSupportText')}</div>
+        <Button onClick={redirectToContactPage} className={styles.customerSuportButton} variant='outlined'>{t('customerSupport')}</Button>
       </div>
     </div>
   );

package/source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusSection.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
 
 import DashboardSection from '../../../containers/DasboardSection/DashboardSection';
-// import AdditionalOrderInfo from './AdditionalOrderInfo';
+import AdditionalOrderInfo from './AdditionalOrderInfo';
 import OrderStatusCar from './OrderStatusCar';
 import styles from './OrderStatusSection.styl';
-// import { history } from '../../../../../AppRouter';
 import { Skeleton } from '@mui/material';
-import i18next from 'i18next';
+
+import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
+
+import i18n from 'i18next';
 
 interface IOrderStatusSection {
-  redirectToCar: (id: string) => void;
   getSupportedImageFormat: (id: string, mainImageId: string, size: 'small' | 'medium' | 'large') => string;
-  t: i18next.TFunction;
+  redirectToUrl: (url: string) => void;
+  t: i18n.TFunction;
   isFetching: boolean;
   withAdditionalInfo?: boolean; // for using on /account/my-order.
   orderedCars: any[]; // TODO: create interface for orderedCars, when the object is formatted by the backend
@@ -20,13 +22,14 @@ interface IOrderStatusSection {
 const OrderStatusSection = ({
   getSupportedImageFormat,
   t,
+  redirectToUrl, 
   orderedCars,
   isFetching,
-  withAdditionalInfo = false,
-  redirectToCar
+  withAdditionalInfo = false
 }: IOrderStatusSection) => {
+
   const onDetailsClick = (carId: string) => {
-    redirectToCar(carId);
+    return redirectToUrl(`/search/vehicle/${carId}`);
   };
 
   const renderRequestedCars = () => {
@@ -35,7 +38,7 @@ const OrderStatusSection = ({
         {!!orderedCars && orderedCars.map((orderedCar, index) => {
           const { car: { _id } } = orderedCar;
           const { car: { mainData: { make, model, subModel } } } = orderedCar;
-          const { car: { metaData: { mainImageId } } } = orderedCar;
+          const { car: { metaData: { mainImageId } }} = orderedCar;
           const {
             buyingType,
             selfPickup,
@@ -44,39 +47,44 @@ const OrderStatusSection = ({
             status,
             request,
             registration,
-            currentSalesPrice
+            currentSalesPrice,
+            deposit,
+            preparationCost,
+            licensePlateCost,
+            registrationCost,
+            transportationCost,
+            customerAddress: {
+              customerFirstname,
+              customerLastname
+            }
           } = orderedCar;
 
-          // ---- data for testing additionalInfo ----
-
-          // const additionalOrderData = {
-          //   addressData: [
-          //     { label: 'Billing address:', value: 'Hannes Käther, Wittenberger Str. 81, 04129 Leipzig' },
-          //     { label: 'Vehicle delivery:', value: 'Hannes Käther, Wittenberger Str. 81, 04129 Leipzig' }
-          //   ],
-          //   carPriceData: [
-          //     { label: 'Car price', value: '22.799,00 €' },
-          //     { label: 'Preparation cost', value: '799,00 €' },
-          //     { label: 'vehicle registration', value: '399,00 €' },
-          //     { label: 'Silver Guarantee Pack (2 years)', value: '1.099,00 €' },
-          //     { label: 'license plates', value: '140,66 €' },
-          //     { label: 'Delivery', value: '799,36 €' }
-          //   ],
-          //   financingData: [
-          //     { label: 'Leasing rate', value: '€194.00 per month' },
-          //     { label: 'Running time (months)', value: '72 months' },
-          //     { label: 'Deposit', value: '1.000,99 €' }
-          //   ],
-          //   overallRate: {
-          //     label: 'Your overall rate',
-          //     value: 599
-          //   }
-          // };
+          const additionalOrderData = {
+            addressData: [
+              { label: 'Billing address:', value: `${customerFirstname} ${customerLastname}` },
+              { label: 'Vehicle delivery:', value: 'Hannes Käther, Wittenberger Str. 81, 04129 Leipzig' }
+            ],
+            carPriceData: [
+              { label: 'Car price', value: getFormattedPrice(currentSalesPrice, '$,.2f', ' €') },
+              { label: 'Preparation cost', value: getFormattedPrice(preparationCost, '$,.2f', ' €')},
+              { label: 'vehicle registration', value: getFormattedPrice(registrationCost, '$,.2f', ' €') },
+              { label: 'license plates', value: getFormattedPrice(licensePlateCost, '$,.2f', ' €') },
+              { label: 'Delivery', value: getFormattedPrice(transportationCost, '$,.2f', ' €') },
+              { label: `${buyingType} rate`, value: buyingType !== 'buy' ? `${getFormattedPrice(monthlyInstallment, '$,.2f', '', '€')} per month` : getFormattedPrice(monthlyInstallment, '$,.2f', ' €') },
+              { label: 'Running time (months)', value: `${paybackPeriod} months` },
+              { label: 'Deposit', value: getFormattedPrice(deposit, '$,.2f', ' €') }
+            ],
+            overallRate: {
+              label: 'Your overall rate',
+              value: monthlyInstallment
+            }
+          };
 
-          // const additionalOrderInfoProps = {
-          //   t,
-          //   additionalOrderData
-          // };
+          const additionalOrderInfoProps = {
+            t,
+            additionalOrderData,
+            redirectToUrl
+          };
 
           const imageUrl = getSupportedImageFormat(_id, mainImageId, 'small');
 
@@ -105,7 +113,7 @@ const OrderStatusSection = ({
           return (
             <DashboardSection key={index} title={title}>
               <OrderStatusCar  { ...orderStatusCarProps } />
-              {/* {withAdditionalInfo ? <AdditionalOrderInfo { ...additionalOrderInfoProps } /> : null} */}
+              {withAdditionalInfo ? <AdditionalOrderInfo { ...additionalOrderInfoProps } /> : null}
             </DashboardSection>
           );
         })}
@@ -115,7 +123,7 @@ const OrderStatusSection = ({
 
   return (
     <>
-      {isFetching ?
+      {isFetching ? 
         <div className={styles.skeletonBlock}>
           <Skeleton animation='wave' variant='rectangular' width='100%' />
         </div>

package/source/framework/factories/BreadcrumbsFactory.tsx

@@ -59,6 +59,13 @@ const BreadcrumbsFactory: IBreadcrumbsFactoryConfig = {
     className: 'breadcrumbsUserDashboard'
   }),
 
+  MY_ORDER: (props: any) => ({
+    list: [
+      { link: '/account/dashboard', title: props.t('common:breadcrumbs.DashboardNew') },
+      { link: '', title: props.t('common:breadcrumbs.myOrder') }
+    ]
+  }),
+
   DEALER_EMPLOYEES_SET: (props: any) => ({
     list: [
       { link: '/account/position/employees', title: props.t('common:breadcrumbs.Employees') },

package/source/framework/types/types.ts

@@ -95,9 +95,11 @@ export interface IVehicleInfo {
   routeObj?: any;
   linkTag?: string;
   mlCurrentSalesPricePredicted?: number;
-  currentSalesPrice?: number;
-  mileage?: string;
   location?: IVehicleLocation;
+  common: {
+    currentSalesPrice?: number;
+    mileage?: string;
+  };
   environmentEmissions?: any;
   engineData?: any;
   offer?: any;

package/source/framework/utils/CommonUtils.ts

@@ -311,13 +311,13 @@ export const sliceMoreThan = (array: number[], from: any): number[] => {
     : array;
 };
 
-export const getFormattedPrice = (price: number, format = '$,.0f', currency = ''): string => {
+export const getFormattedPrice = (price: number, format = '$,.0f', currency = '', currencyPrefix = ''): string => {
   if (!Number.isFinite(price)) return '-';
   const groupingNum = 3;
   return d3formatLocale({
     decimal: ',',
     thousands: '.',
-    currency: ['', currency],
+    currency: [currencyPrefix, currency],
     grouping: [groupingNum]
   }).format(format)(price);
 };

package/source/components/Vehicle/VehicleTitle/VehicleTitle.story.js

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import VehicleTitle from './VehicleTitle';
-
-const container = {
-  maxWidth: 200
-};
-
-const titleProps = {
-  manufacturer: 'BMW',
-  model: '320',
-  subModel: 'Touring Edition Fleet +PDC +Navi',
-  option: '135 (184) KW (PS)',
-
-  isSponsored: false,
-  onClick: action('click')
-};
-
-storiesOf('Vehicle title', module)
-.add('default', () => (
-  <div style={container}>
-    <VehicleTitle {...titleProps} />
-  </div>
-));

package/source/components/Vehicle/VehicleTitle/VehicleTitle.styl

@@ -1,48 +0,0 @@
-.text
-  margin-right: 5px
-  white-space: nowrap
-
-.title
-  width: 100%
-  overflow: hidden
-  text-overflow: ellipsis
-  font-size: 14px
-  cursor: pointer
-  line-height: 20px
-  font-family: 'Arial Standard', 'Arial'
-  font-weight: 400
-  font-style: normal
-
-.mainTitle, .optionTitle
-  display: flex
-  flex-direction: row
-  align-items: center
-  flex-wrap: nowrap
-
-.brand
-  font-weight: 700
-  text-transform: capitalize
-
-.sponsored
-  font-family: 'Arial Fett', 'Arial Standard', 'Arial'
-  font-weight: 700
-  font-style: normal
-  font-size: 10px
-  border 1px solid #CCC
-  padding: 2px 5px
-  box-sizing: border-box
-  border-radius 3px
-  line-height: 12px
-  text-transform: uppercase
-
-.model
-  text-transform: capitalize
-
-.subModel
-  font-weight normal
-  overflow: hidden
-  text-overflow: ellipsis
-
-.option
-  margin-right: 5px
-  line-height: 20px

package/source/components/Vehicle/VehicleTitle/VehicleTitle.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-
-import styles from './VehicleTitle.styl';
-
-interface IVehicleTitleProps {
-  manufacturer?: string;
-  model?: string;
-  subModel?: string;
-  option?: string;
-
-  isSponsored?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-}
-
-const VehicleTitle: React.FC<IVehicleTitleProps> = (props) =>  {
-  const { manufacturer, model, subModel, option, isSponsored, onClick } = props;
-
-  return (
-    <div className={styles.title} onClick={onClick}>
-      <div className={styles.mainTitle}>
-        <span className={classnames(styles.text, styles.brand)}>{manufacturer}</span>
-        <span className={classnames(styles.text, styles.model)}>{model}</span>
-        <span className={classnames(styles.text, styles.subModel)}>{subModel}</span>
-      </div>
-      <div className={styles.optionTitle}>
-        <span className={styles.option}>{option}</span>
-        {isSponsored && <span className={styles.sponsored}>Sponsored</span>}
-      </div>
-    </div>
-  );
-};
-
-VehicleTitle.defaultProps = {
-  manufacturer: '',
-  model: '',
-  subModel: '',
-  option: '',
-
-  isSponsored: false,
-  onClick: () => { }
-};
-
-export default VehicleTitle;