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

package/compat/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.tsx

@@ -1,35 +1,35 @@
-import * as React from 'react';
-import IconSVG from '../../../../iconsvg/IconSVG';
-import styles from './VehicleProperty.styl';
-
-export interface IVehicleProperty {
-  className?: string;
-  classNameIcon?: string;
-  smalltext?: boolean;
-  icon: string;
-  description: React.ReactNode;
-  hybridPlugin?: boolean;
-}
-
-class VehicleProperty extends React.Component<IVehicleProperty, {}> {
-  static readonly defaultProps: IVehicleProperty = {
-    icon: '',
-    description: 'no description'
-  };
-
-  render(): React.ReactNode {
-    const { className, classNameIcon, icon, description, smalltext, hybridPlugin } = this.props;
-    const noIcon: boolean = !icon;
-    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''} ${noIcon ? styles.noIcon : ''}`;
-    const propertyClassIcon: string = `${styles.carIcon} ${classNameIcon ? classNameIcon : ''}`;
-
-    return (
-      <div className={propertyClass}>
-        {!noIcon && <IconSVG className={propertyClassIcon} name={icon} customDimensions />}
-        <span>{description}</span>
-      </div>
-    );
-  }
-}
-
-export default VehicleProperty;
+import * as React from 'react';
+import IconSVG from '../../../../iconsvg/IconSVG';
+import styles from './VehicleProperty.styl';
+
+export interface IVehicleProperty {
+  className?: string;
+  classNameIcon?: string;
+  smalltext?: boolean;
+  icon: string;
+  description: React.ReactNode;
+  hybridPlugin?: boolean;
+}
+
+class VehicleProperty extends React.Component<IVehicleProperty, {}> {
+  static readonly defaultProps: IVehicleProperty = {
+    icon: '',
+    description: 'no description'
+  };
+
+  render(): React.ReactNode {
+    const { className, classNameIcon, icon, description, smalltext, hybridPlugin } = this.props;
+    const noIcon: boolean = !icon;
+    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''} ${noIcon ? styles.noIcon : ''}`;
+    const propertyClassIcon: string = `${styles.carIcon} ${classNameIcon ? classNameIcon : ''}`;
+
+    return (
+      <div className={propertyClass}>
+        {!noIcon && <IconSVG className={propertyClassIcon} name={icon} customDimensions />}
+        <span>{description}</span>
+      </div>
+    );
+  }
+}
+
+export default VehicleProperty;

package/compat/VehicleSmallCard/VehicleData/VehicleTitle/VehicleTitle.styl

@@ -1,136 +1,136 @@
-@import '../../../legacy-theme/mixins.styl'
-
-.infoSection
-  position: relative
-  align-items: center;
-  box-sizing: border-box
-  display: block
-  padding: 10px 30px 10px 16px
-  +media-tablet-landscape-up()
-    padding: 6px;
-    display: flex
-  &.infoSectionSearch
-    +media-tablet-landscape-up()
-      padding 0;
-  &.infoSectionMyVehicles
-    +media-phone-only()
-      display: flex
-  &.infoSectionRecently
-    +media-tablet-landscape-down()
-      padding: 12px 30px 12px 16px
-
-.wrapTitles
-  display flex;
-  truncate();
-  +media-phone-only()
-    display block
-  &.wrapTitlesSearch
-    display block
-    +media-tablet-landscape-up()
-      display flex
-  &.wrapTitlesAlternative
-    +media-tablet-landscape-up()
-      flex-wrap: wrap
-  &.wrapTitlesFavorite
-    display: flex;
-    +media-tablet-landscape-up()
-      display: flex;
-  &.wrapTitlesRecently
-    display: flex;
-
-.manufacturerModel
-  font-size: 16px
-  font-weight: bold
-  white-space: nowrap
-  color: $grey-3
-  margin: 0;
-  overflow: hidden;
-  flex-shrink: 0;
-  text-overflow: ellipsis;
-  max-width: 221px;
-
-.subModel
-  margin: 0 0 -1px 3px
-  white-space: nowrap
-  color: $grey-3
-  overflow: hidden
-  text-overflow: ellipsis
-  margin 0
-  max-width: 88vw
-
-  +media-tablet-landscape-up()
-    margin: 0 0 -1px 3px
-    overflow: hidden
-
-.optionTitle
-  display: flex
-  flex-direction: row
-  align-items: center
-  flex-wrap: nowrap
-  font-size: 11px
-  truncate();
-
-  &.optionTitleSearch
-    font-size: 12px;
-    margin-top: 3px;
-    +media-tablet-landscape-up()
-      margin-left: 8px;
-      width: 100%
-      margin-top: 0;
-  &.optionTitleFavorite
-    font-size: 12px;
-    margin-left: 8px;
-    +media-tablet-landscape-up()
-      margin-left: 8px;
-  &.optionTitleRecently
-    font-size: 12px;
-    margin-left: 8px;
-  &.optionTitleIsAlternative
-    overflow: hidden;
-    .subModel
-      margin: 5px 0 0 0
-      +media-tablet-landscape-up()
-        max-width: 260px;
-    +media-tablet-landscape-up()
-      margin-left: 0
-
-.sponsored
-  font-weight: 700
-  font-style: normal
-  font-size: 10px
-  border 1px solid $grey-c
-  padding: 2px 5px
-  box-sizing: border-box
-  border-radius 3px
-  line-height: 12px
-  margin-left: 5px;
-  text-transform: uppercase
-
-.starButton
-  margin-left: auto
-
-  +media-phone-only()
-    position: absolute
-    top: 5px
-    right: 5px
-    z-index: 2
-
-.userButton
-  display: inline-block
-  width: 25px
-  height: 25px
-  cursor: pointer
-  background-size: cover
-  +media-phone-up()
-    width: 18px
-    height: 18px
-
-.userButton.favorite
-  fill: white
-  stroke: $skyBlue
-  stroke-width: 5px
-  &.active
-    fill: $skyBlue
-
-.userButton.favorite:hover
+@import '../../../legacy-theme/mixins.styl'
+
+.infoSection
+  position: relative
+  align-items: center;
+  box-sizing: border-box
+  display: block
+  padding: 10px 30px 10px 16px
+  +media-tablet-landscape-up()
+    padding: 6px;
+    display: flex
+  &.infoSectionSearch
+    +media-tablet-landscape-up()
+      padding 0;
+  &.infoSectionMyVehicles
+    +media-phone-only()
+      display: flex
+  &.infoSectionRecently
+    +media-tablet-landscape-down()
+      padding: 12px 30px 12px 16px
+
+.wrapTitles
+  display flex;
+  truncate();
+  +media-phone-only()
+    display block
+  &.wrapTitlesSearch
+    display block
+    +media-tablet-landscape-up()
+      display flex
+  &.wrapTitlesAlternative
+    +media-tablet-landscape-up()
+      flex-wrap: wrap
+  &.wrapTitlesFavorite
+    display: flex;
+    +media-tablet-landscape-up()
+      display: flex;
+  &.wrapTitlesRecently
+    display: flex;
+
+.manufacturerModel
+  font-size: 16px
+  font-weight: bold
+  white-space: nowrap
+  color: $grey-3
+  margin: 0;
+  overflow: hidden;
+  flex-shrink: 0;
+  text-overflow: ellipsis;
+  max-width: 221px;
+
+.subModel
+  margin: 0 0 -1px 3px
+  white-space: nowrap
+  color: $grey-3
+  overflow: hidden
+  text-overflow: ellipsis
+  margin 0
+  max-width: 88vw
+
+  +media-tablet-landscape-up()
+    margin: 0 0 -1px 3px
+    overflow: hidden
+
+.optionTitle
+  display: flex
+  flex-direction: row
+  align-items: center
+  flex-wrap: nowrap
+  font-size: 11px
+  truncate();
+
+  &.optionTitleSearch
+    font-size: 12px;
+    margin-top: 3px;
+    +media-tablet-landscape-up()
+      margin-left: 8px;
+      width: 100%
+      margin-top: 0;
+  &.optionTitleFavorite
+    font-size: 12px;
+    margin-left: 8px;
+    +media-tablet-landscape-up()
+      margin-left: 8px;
+  &.optionTitleRecently
+    font-size: 12px;
+    margin-left: 8px;
+  &.optionTitleIsAlternative
+    overflow: hidden;
+    .subModel
+      margin: 5px 0 0 0
+      +media-tablet-landscape-up()
+        max-width: 260px;
+    +media-tablet-landscape-up()
+      margin-left: 0
+
+.sponsored
+  font-weight: 700
+  font-style: normal
+  font-size: 10px
+  border 1px solid $grey-c
+  padding: 2px 5px
+  box-sizing: border-box
+  border-radius 3px
+  line-height: 12px
+  margin-left: 5px;
+  text-transform: uppercase
+
+.starButton
+  margin-left: auto
+
+  +media-phone-only()
+    position: absolute
+    top: 5px
+    right: 5px
+    z-index: 2
+
+.userButton
+  display: inline-block
+  width: 25px
+  height: 25px
+  cursor: pointer
+  background-size: cover
+  +media-phone-up()
+    width: 18px
+    height: 18px
+
+.userButton.favorite
+  fill: white
+  stroke: $skyBlue
+  stroke-width: 5px
+  &.active
+    fill: $skyBlue
+
+.userButton.favorite:hover
   fill: $skyBlue

package/compat/VehicleSmallCard/VehicleData/VehicleTitle/VehicleTitle.tsx

@@ -1,91 +1,91 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import styles from './VehicleTitle.styl';
-import StarButton from '../../../StarButton/StarButton';
-import { IVehicleTitleProps } from '../../../../types/types';
-
-const VehicleTitle: React.FC<IVehicleTitleProps> = ({
-  onFavoriteClick,
-  isCarInFavorite,
-  id,
-  make,
-  model,
-  subModel,
-  option,
-  isSponsored,
-  vehicleComponentName,
-  showFavoriteStar,
-  renderVehicleStatus,
-  combineRefAlternative
-}) => {
-  const makeText = typeof make === 'string' ? make : '';
-  const modelText = typeof model === 'string' ? model : '';
-  const subModelText = typeof subModel === 'string' ? subModel : 'n/a';
-
-  const infoSectionClassName = classnames(
-    styles.infoSection,
-    { [styles.infoSectionSearch]: vehicleComponentName === 'search' },
-    { [styles.infoSectionRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
-    { [styles.infoSectionMyVehicles]: vehicleComponentName === 'myVehicles' }
-  );
-
-  const wrapTitlesClassName = classnames(
-    styles.wrapTitles,
-    { [styles.wrapTitlesFavorite]: vehicleComponentName === 'favorite' },
-    { [styles.wrapTitlesRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
-    { [styles.wrapTitlesSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-    { [styles.wrapTitlesAlternative]: combineRefAlternative }
-  );
-  const optionTitleClassName = classnames(
-    styles.optionTitle,
-    { [styles.optionTitleFavorite]: vehicleComponentName === 'favorite' },
-    { [styles.optionTitleRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
-    { [styles.optionTitleSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-    { [styles.optionTitleIsAlternative]: combineRefAlternative }
-  );
-
-  const onCarFavoriteClick = (event: React.MouseEvent<HTMLElement>, id: String) => {
-    event.preventDefault();
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    if (onFavoriteClick) onFavoriteClick(event, id);
-  };
-
-  const renderFavoriteIcon = (): React.ReactNode => {
-    return showFavoriteStar && (
-      <div className={styles.starButton}>
-        <StarButton
-          customContainer={classnames(styles.starButton)}
-          onClick={e => onCarFavoriteClick(e, id)}
-          isFavorite={isCarInFavorite}
-          className={styles.starButton}
-        />
-      </div>
-    );
-  };
-
-  return (
-    <div className={infoSectionClassName}>
-      <div className={wrapTitlesClassName}>
-        <h2 className={styles.manufacturerModel}>{make || model ? `${makeText} ${modelText}` : 'n/a'}</h2>
-        <div className={optionTitleClassName}>
-          <p className={styles.subModel}>{subModelText}&nbsp;</p>
-          <span className={styles.option}>{option}</span>
-          {isSponsored && <span className={styles.sponsored}>Sponsored</span>}
-        </div>
-      </div>
-      {!combineRefAlternative && renderFavoriteIcon()}
-      {vehicleComponentName === 'myVehicles' && renderVehicleStatus()}
-    </div>
-  );
-};
-
-VehicleTitle.defaultProps = {
-  make: '',
-  model: '',
-  subModel: '',
-  option: '',
-  isSponsored: false
-};
-
-export default VehicleTitle;
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from './VehicleTitle.styl';
+import StarButton from '../../../StarButton/StarButton';
+import { IVehicleTitleProps } from '../../../../types/types';
+
+const VehicleTitle: React.FC<IVehicleTitleProps> = ({
+  onFavoriteClick,
+  isCarInFavorite,
+  id,
+  make,
+  model,
+  subModel,
+  option,
+  isSponsored,
+  vehicleComponentName,
+  showFavoriteStar,
+  renderVehicleStatus,
+  combineRefAlternative
+}) => {
+  const makeText = typeof make === 'string' ? make : '';
+  const modelText = typeof model === 'string' ? model : '';
+  const subModelText = typeof subModel === 'string' ? subModel : 'n/a';
+
+  const infoSectionClassName = classnames(
+    styles.infoSection,
+    { [styles.infoSectionSearch]: vehicleComponentName === 'search' },
+    { [styles.infoSectionRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
+    { [styles.infoSectionMyVehicles]: vehicleComponentName === 'myVehicles' }
+  );
+
+  const wrapTitlesClassName = classnames(
+    styles.wrapTitles,
+    { [styles.wrapTitlesFavorite]: vehicleComponentName === 'favorite' },
+    { [styles.wrapTitlesRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
+    { [styles.wrapTitlesSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
+    { [styles.wrapTitlesAlternative]: combineRefAlternative }
+  );
+  const optionTitleClassName = classnames(
+    styles.optionTitle,
+    { [styles.optionTitleFavorite]: vehicleComponentName === 'favorite' },
+    { [styles.optionTitleRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
+    { [styles.optionTitleSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
+    { [styles.optionTitleIsAlternative]: combineRefAlternative }
+  );
+
+  const onCarFavoriteClick = (event: React.MouseEvent<HTMLElement>, id: String) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    if (onFavoriteClick) onFavoriteClick(event, id);
+  };
+
+  const renderFavoriteIcon = (): React.ReactNode => {
+    return showFavoriteStar && (
+      <div className={styles.starButton}>
+        <StarButton
+          customContainer={classnames(styles.starButton)}
+          onClick={e => onCarFavoriteClick(e, id)}
+          isFavorite={isCarInFavorite}
+          className={styles.starButton}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <div className={infoSectionClassName}>
+      <div className={wrapTitlesClassName}>
+        <h2 className={styles.manufacturerModel}>{make || model ? `${makeText} ${modelText}` : 'n/a'}</h2>
+        <div className={optionTitleClassName}>
+          <p className={styles.subModel}>{subModelText}&nbsp;</p>
+          <span className={styles.option}>{option}</span>
+          {isSponsored && <span className={styles.sponsored}>Sponsored</span>}
+        </div>
+      </div>
+      {!combineRefAlternative && renderFavoriteIcon()}
+      {vehicleComponentName === 'myVehicles' && renderVehicleStatus()}
+    </div>
+  );
+};
+
+VehicleTitle.defaultProps = {
+  make: '',
+  model: '',
+  subModel: '',
+  option: '',
+  isSponsored: false
+};
+
+export default VehicleTitle;