@bytebrand/fe-ui-core-autobahn 1.0.0

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

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

package/compat/VehicleSmallCard/VehicleSmallCard.styl

@@ -0,0 +1,310 @@
+@import '../legacy-theme/mixins.styl';
+@import '../legacy-theme/theme.styl';
+
+.vehicle
+  position: relative
+  background-color: #fff;
+  display: grid;
+
+  +media-tablet-landscape-up()
+    border-radius: 10px;
+    border: 1px solid rgba(76, 78, 100, 0.12)
+
+  &.disableBorder
+     border-bottom: 0;
+
+  &.vehicleWrapMain,
+  &.vehicleWrapComparable
+    grid-template-areas:
+    'title title'\
+    'image image'\
+    'info price'\
+    'seoText seoText'
+
+  &.vehicleWrapComparable
+    min-width: 230px
+    margin: 0 4px
+    border-radius 3px
+    border: 1px solid rgba(76, 78, 100, 0.12);
+    grid-template-columns: 100px 1fr;
+
+    +media-tablet-down()
+      min-width: 340px;
+
+    +media-phone-only()
+      margin: 0 auto;
+      min-width: auto;
+      max-width: 335px;
+      width: 100%;
+      grid-template-columns: 155px 1fr;
+
+  &.vehicleWrapSearch
+    grid-template-areas:
+      'title title'\
+      'image image'\
+      'info price'\
+      'seoText seoText'
+    grid-template-columns: 55% 45%;
+    border-bottom: 1px solid #DFDFDF;
+    border-top: 1px solid #DFDFDF;
+    margin-bottom: 5px;
+    padding-bottom: 8px;
+    +media-tablet-landscape-up()
+      min-height: 252px;
+      box-sizing: border-box;
+      border: 1px solid rgba(76, 78, 100, 0.12);
+      padding: 10px;
+      grid-gap: 10px 15px;
+      grid-template-columns: 260px 1fr 189px;
+      grid-template-areas:
+        'title title price'\
+        'image info price'
+
+  &.vehicleWrapFavorite
+    grid-template-areas:
+      'title title'\
+      'image image'\
+      'info price'\
+      'seoText seoText'
+    grid-template-columns: 160px 1fr;
+    border: 1px solid rgba(76, 78, 100, 0.12);
+    border-radius: 10px;
+    padding-bottom: 15px;
+    +media-tablet-landscape-up()
+      padding: 10px;
+      grid-gap: 10px 15px;
+      grid-template-columns: 260px 1fr 245px;
+      grid-template-areas:
+        'title title price'\
+        'image info price'
+
+  &.vehicleWrapRecently
+    box-sizing: border-box;
+    grid-template-columns: 160px 1fr;
+    grid-template-areas:
+      'title title'\
+      'image image'\
+      'info price'\
+      'seoText seoText'
+    border: 1px solid rgba(76, 78, 100, 0.12);
+    border-radius: 10px;
+    padding-bottom: 15px;
+
+    & [class*='withStats__topWrapper']
+      left: 16px;
+      right: 16px;
+
+    & [class*='withStats__controls']
+      padding: 0 16px;
+
+    +media-tablet-up()
+      max-width: 98%;
+    +media-tablet-landscape-up()
+      max-width: 346px;
+
+  &.vehicleWrapLanding
+    box-sizing: border-box;
+    grid-template-areas:
+      'title title'\
+      'image image'\
+      'info price'\
+      'seoText seoText'
+    grid-template-columns: 55% 45%;
+    border-bottom: 1px solid #DFDFDF;
+    border-top: 1px solid #DFDFDF;
+    margin-bottom: 5px;
+    padding-bottom: 8px;
+
+    & [class*='withStats__topWrapper']
+      left: 16px;
+      right: 16px;
+
+    & [class*='withStats__controls']
+      padding: 0 16px;
+
+    +media-tablet-landscape-up()
+      grid-template-columns: 120px 1fr;
+      border: 1px solid rgba(76, 78, 100, 0.12);
+      border-radius: 10px;
+      padding-bottom: 15px;
+      margin-bottom: 0;
+
+  &.vehicleWrapMain
+    box-sizing: border-box;
+    // mobile home/comparable: equal info|price columns (was 55/45).
+    grid-template-columns: 50% 50%;
+    border: 1px solid #DFDFDF;
+    margin-bottom: 5px;
+    border-radius: 10px;
+    padding-bottom: 8px;
+
+    & [class*='withStats__topWrapper']
+      left: 16px;
+      right: 16px;
+
+    & [class*='withStats__controls']
+      padding: 0 16px;
+
+    +media-tablet-landscape-up()
+      // narrow 4-up home card (~256px): the price section (rates + "Zum Angebot" button) needs
+      // ~150px or it overflows the frame, so give the price column the larger share and the info
+      // (left) column the smaller one; minmax(0,…) keeps both tracks inside the card so nothing
+      // is clipped and the info spec text wraps instead of spilling out.
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+      border: 1px solid rgba(76, 78, 100, 0.12);
+      border-radius: 10px;
+      margin-bottom: 0;
+
+  &.vehicleWrapMyVeicles
+    grid-template-areas:
+      'title title'\
+      'image image'\
+      'controls controls'\
+      'info price'\
+      'aggregation dealerWidget';
+    padding-bottom: 10px;
+    grid-template-columns: 50% 50%;
+    border-bottom: 6px solid $skyBlue;
+    +media-tablet-landscape-up()
+      border: 1px solid rgba(76, 78, 100, 0.12);
+      padding: 10px;
+      grid-gap: 0 15px;
+      grid-template-columns: 260px 1fr 169px 236px;
+      grid-template-areas:
+        'title title title dealerWidget'\
+        'image info price dealerWidget'\
+        'image info price dealerWidget'\
+        'image info price controls'\
+        'image info price controls'\
+        'aggregation aggregation aggregation buttonSell'
+
+.figure
+  position: relative
+  margin: 0
+  padding-top: 75%
+  & > :first-child
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+
+.labelWrapper
+  border: none
+.labelWrapper::after
+  content: ''
+  position absolute
+  bottom: 0
+  width: 100%
+  height: 6px
+  background-color: $mantisGreen
+
+.topVehicle:before
+  border-color: $mantisGreen
+
+.redirectClassLink
+  width: 100%;
+  color: inherit;
+  text-decoration: none;
+  display: block;
+
+.gridAreaTitle
+  grid-area: title;
+  max-width: 100%;
+
+.gridAreaSeoText
+  width: 100%;
+  overflow: hidden
+  box-sizing: border-box;
+  padding: 10px 10px 0 10px;
+  grid-area: seoText;
+
+.gridAreaImage
+  grid-area: image;
+
+// ADV-70: plug-in consumption/CO2 line — dedicated full-width row BELOW the specs table /
+// price block ("Zum Angebot") and ABOVE the equipment text, in small grey text. The
+// .vehicleWrapNewPlugin grid inserts a full-width 'consumption' row for every externalised
+// card type (search / landing / main / comparable).
+.vehicle.vehicleWrapNewPlugin
+  grid-template-areas:
+    'title title'\
+    'image image'\
+    'info price'\
+    'consumption consumption'\
+    'seoText seoText'
+
+  // SRL/search 3-column desktop: the consumption line sits in the INFO column only
+  // (starts AND ends under the spec block, not under the image and not into the price
+  // column). image + price span rows 2-3 so the "Zum Angebot" button bottom-aligns
+  // with the consumption line.
+  &.vehicleWrapSearch
+    +media-tablet-landscape-up()
+      grid-template-areas:
+        'title title price'\
+        'image info price'\
+        'image consumption price'
+      // No divider on the DESKTOP search card — the consumption sits inside the info
+      // column (button-aligned) where a top line is unwanted; keep it on mobile only.
+      & > .gridAreaConsumption
+        border-top: 0;
+        margin-top: 0;
+
+  // Favorites desktop: consumption sits in the info column between the image and the
+  // price/buttons column, button-aligned — same as the SRL card.
+  &.vehicleWrapFavorite
+    +media-tablet-landscape-up()
+      grid-template-areas:
+        'title title price'\
+        'image info price'\
+        'image consumption price'
+
+.gridAreaConsumption
+  grid-area: consumption;
+  width: 100%;
+  box-sizing: border-box;
+  // ADV-88: a divider above the externalised consumption/CO2 line on EVERY card surface
+  // it appears on (landing / main = home+CDP-comparable / search / favorite). The element
+  // only renders for new plug-in hybrids, so the line shows exactly for the task's cars;
+  // it spans the full row width where the row is full-width (mobile + main/landing), and
+  // the info-column width on the desktop search/favorite layout. Sets the line apart from
+  // the spec/price/"Zum Angebot" block above it.
+  border-top: 1px solid rgba(76, 78, 100, 0.12);
+  // a few px of space ABOVE the divider so the line doesn't hug the price/"Zum Angebot" block.
+  margin-top: 6px;
+  padding: 6px 10px 2px 10px;
+  font-size: 9px;
+  line-height: 1.4;
+  color: rgba(76, 78, 100, 0.87);
+  word-break: break-word;
+
+  span
+    font-size: 9px !important;
+    line-height: 1.4 !important;
+
+.wrapAlternativeData
+  display flex
+  font-size: 12px;
+  justify-content: space-between;
+  margin-top: 5px;
+
+  & > div
+    display flex
+    align-items: center;
+    gap: 4px;
+
+    &:first-of-type
+      color: $skyBlue;
+      line-height: 1;
+
+.isFirstReferenceCar
+  border: 1px solid $skyBlue !important;
+  background-color: #005CCB0D;
+  justify-content: space-between;
+  margin-top: 5px;
+
+  & > div
+    display flex
+    align-items: center
+
+    &:first-of-type
+      color: $skyBlue;