@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/PriceRatingDetailed/PriceRatingDetailed.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import classnames from 'classnames';
+import _get from 'lodash/get';
+
+import { priceRatings as priceRatingsOrigin } from '../../constants/price';
+import { getFormattedPrice } from '../../utils/CommonUtils';
+
+import styles from './PriceRatingDetailed.styl';
+import { HUNDRED } from '../../constants/common';
+
+export interface IRatingConfigItem {
+  min: number;
+  max: number;
+}
+
+export interface IRatingConfig {
+  highPrice: IRatingConfigItem;
+  increasedPrice: IRatingConfigItem;
+  fairPrice: IRatingConfigItem;
+  goodPrice: IRatingConfigItem;
+  topPrice: IRatingConfigItem;
+  [key: string]: IRatingConfigItem;
+}
+
+export interface IPriceRatingDetailedProps {
+  rating?: number;
+  price?: number;
+  ratingConfig?: IRatingConfig;
+  mode?: 'general' | 'compact';
+  className?: string;
+  i18nPrefix?: string;
+  t?: (phrase: string, options?: any) => string;
+}
+
+export interface IPriceRatingDetailedState {
+  tooltipOffset: string;
+}
+
+const priceRatings = [...priceRatingsOrigin].reverse();
+
+class PriceRatingDetailed extends React.Component<IPriceRatingDetailedProps, IPriceRatingDetailedState> {
+  static readonly defaultProps = {
+    t: (phrase: string) => phrase,
+    rating: 0,
+    mode: 'general',
+    i18nPrefix: ''
+  };
+
+  refWrapper: React.RefObject<HTMLDivElement> = React.createRef();
+  refTooltip: React.RefObject<HTMLDivElement> = React.createRef();
+
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      tooltipOffset: this.getOffset()
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      tooltipOffset: this.getOffset()
+    });
+  }
+
+  componentDidUpdate() {
+    if (this.getOffset() === this.state.tooltipOffset) return;
+    this.setState({
+      tooltipOffset: this.getOffset()
+    });
+  }
+
+  getOffset = () => {
+    if (this.refWrapper.current && this.refTooltip.current) {
+      const wrapperRect = this.refWrapper.current.getBoundingClientRect();
+      const toolTipRect = this.refTooltip.current.getBoundingClientRect();
+      const tooltipHalfWidth = this.refTooltip.current.offsetWidth / 2;
+      const arrowSize = 12;
+
+      if (toolTipRect.left < wrapperRect.left + tooltipHalfWidth) {
+        const offset = toolTipRect.left - wrapperRect.left;
+        return `-${offset > arrowSize ? offset : arrowSize}px`;
+      }
+
+      if (toolTipRect.left + tooltipHalfWidth > wrapperRect.right) {
+        const offset = toolTipRect.right - wrapperRect.right;
+        return `-${offset > tooltipHalfWidth + arrowSize ? offset - arrowSize : offset}px`;
+      }
+    }
+
+    return '-50%';
+  };
+
+  formatValue = (segment: string, name: string) => {
+    const { ratingConfig } = this.props;
+    const value: any = _get(ratingConfig, `[${segment}].${name}`);
+    return Number.isFinite(Number(value)) ? getFormattedPrice(value) : value;
+  };
+
+  renderNoRatingTooltip = (ratingName: string) => {
+    const { t, i18nPrefix } = this.props;
+    return (
+      <div className={styles.noRatingTooltipWrapper}>
+        <div className={styles.noRatingTooltip}>
+          {t(`${i18nPrefix}${ratingName}`)}
+        </div>
+      </div>
+    );
+  };
+
+  renderTooltip = (ratingName: string) => {
+    const { price, ratingConfig } = this.props;
+    const { min, max } = ratingConfig[ratingName];
+    let leftPosition = HUNDRED * (price - min) / (max - min);
+
+    if (ratingName === 'topPrice') {
+      if ((price < min) || ((min + HUNDRED) > price)) {
+        const MIN_LEFT_POSITION = 7;
+        leftPosition = MIN_LEFT_POSITION;
+      }
+    }
+
+    return (
+      <div ref={this.refTooltip} className={classnames(styles.tooltipWrapper, styles[ratingName])} style={{ left: `${leftPosition}%` }}>
+        <div className={styles.tooltip} style={{ left: this.state.tooltipOffset }}>
+          {`${getFormattedPrice(price)} €`}
+        </div>
+      </div>
+    );
+  };
+
+  renderSegments = (ratingCode: number, ratingName: string) => {
+    const { t, mode, i18nPrefix, ratingConfig, price } = this.props;
+
+    return priceRatings.map((name, index) => {
+      if (name === 'noRating') return null;
+
+      const withLeftMargin = (name === 'topPrice' ? (price <= ratingConfig.topPrice.min) : false);
+      const withRightMargin = (name === 'highPrice' ? (price >= ratingConfig.highPrice.max) : false);
+
+      return (
+        <div className={styles.segmentWrapper} key={name}>
+          <div key={name} className={classnames(styles.segment, styles[name])}>
+            <h6>{t(mode === 'compact' ? `${i18nPrefix}${name}Compact` : `${i18nPrefix}${name}`)}</h6>
+            {ratingCode === index ? this.renderTooltip(ratingName) : null}
+          </div>
+          {this.renderPriceRangeItem(name, price, withLeftMargin, withRightMargin)}
+        </div>
+      );
+    });
+  };
+
+  renderPriceRangeItem = (name: string, price: number, marginToLeft: boolean, marginToRight: boolean) => {
+    const { t, mode, i18nPrefix, ratingConfig } = this.props;
+    const min = _get(ratingConfig, `[${name}].min`);
+    const max = _get(ratingConfig, `[${name}].max`);
+    const MIN_PRICE = 500;
+    const MARGIN_OFFSET = price >= MIN_PRICE ? MIN_PRICE : (price / 2);
+    const strings = {
+      general: `${getFormattedPrice((marginToLeft ? price - MARGIN_OFFSET : min) as number)} – ${getFormattedPrice((marginToRight ? price + MARGIN_OFFSET : max) as number)}\u00A0€`,
+      compact: <>
+          {getFormattedPrice((marginToLeft ? price - MARGIN_OFFSET : min) as number)}
+          <br />
+          {t(`${i18nPrefix}priceTo`)} {getFormattedPrice((marginToRight ? price + MARGIN_OFFSET : max) as number)} €
+        </>
+    };
+
+    return (
+      <span className={styles.priceRange}>
+        {strings[mode]}
+      </span>
+    );
+  };
+
+  render() {
+    const { rating, mode, className } = this.props;
+    const ratingCode = (rating > 0 && rating < priceRatings.length) ? priceRatings.length - rating - 1 : 5; // tslint:disable-line
+    const ratingName = priceRatings[ratingCode];
+    const wrapperClassName = classnames(styles.wrapper, className, {
+      [styles.compact]: mode === 'compact'
+    });
+    return (
+      <div ref={this.refWrapper} className={wrapperClassName}>
+        {ratingName === 'noRating' ? this.renderNoRatingTooltip(ratingName) : null}
+        {this.renderSegments(ratingCode, ratingName)}
+      </div>
+    );
+  }
+}
+
+export default PriceRatingDetailed;

package/compat/PricingToolBlock/PricingTool.styl

@@ -0,0 +1,7 @@
+@import '../legacy-theme/mixins.styl'
+
+.rating
+  margin-top: 40px
+  +media-tablet-up()
+    width: 100%
+    margin-top: 55px

package/compat/PricingToolBlock/PricingTool.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ScreenClassRender } from 'react-grid-system';
+import PriceRatingDetailed from '../PriceRatingDetailed/PriceRatingDetailed';
+import styles from './PricingTool.styl';
+
+const PricingTool = (props: any) => {
+  const { t, rating, ratingConfig, currentSalesPrice } = props;
+
+  const priceRatingProps = {
+    t,
+    ratingConfig,
+    rating,
+    price: currentSalesPrice,
+    i18nPrefix: 'priceReview.',
+    className: styles.rating
+  };
+
+  return (
+    <ScreenClassRender
+      render={(screenClass: string) =>
+        ['xs', 'sm'].includes(screenClass)
+          ? <PriceRatingDetailed {...priceRatingProps} mode='compact' />
+          : <PriceRatingDetailed {...priceRatingProps} />
+      }
+    />
+  );
+};
+
+export default PricingTool;

package/compat/Radio/Radio.styl

@@ -0,0 +1,115 @@
+@import '../legacy-theme/theme.styl'
+
+.container
+  position: relative
+
+.container:focus
+  outline: 2px auto lighten($primary, 80%)
+  outline-offset: 2px
+
+.container.checked
+  .radio
+    border-color: $primary
+
+  .radio::before
+    background-color: $primary !important
+
+.container.disabled
+  .radio, .label
+    cursor: not-allowed
+
+  .label
+    color: lighten(black, 40%)
+
+  .radio
+    background-color: $grey-e
+    border-color: $grey-d !important
+
+  .radio::before
+    background-color: lighten($grey-e, 50%)
+
+.container.error
+  .radio
+    border-color: $darkRed !important
+
+.radio
+  border-radius: 50%
+
+.squareRadio
+  border-radius: 3px
+
+.marginRadio
+  margin-left: 10px
+
+.radioAll
+  position: relative
+  flex-shrink: 0
+  width: 20px
+  height: 20px
+
+  border-width: 1px
+  border-style: solid
+  border-color: $grey-d
+  vertical-align: middle
+
+  background-color: white
+  box-sizing: border-box
+  cursor: pointer
+  transition: border 0.2s ease-in-out
+
+.checkBlueIcon
+  display: block
+  width: 18px !important
+  height: auto
+  padding: 3px
+  box-sizing: border-box
+  fill: $primary
+
+.radio::before
+  content: ''
+  display: block
+  width: 10px
+  height: 10px
+  border-radius: 50%
+
+  position: absolute
+  left: calc(50% - 5px);
+  top: calc(50% - 5px);
+  box-sizing: border-box
+  background-color: white
+  transition: background-color 0.2s ease-in-out
+
+.radio:hover,
+.container:hover .radio
+  border-color: $primary
+
+.radio.withLabel
+  margin-right: 10px
+
+.label
+  display: flex
+  flex-direction: row
+  align-items: center
+
+  position: relative
+  font-family: $font-style-arial
+  font-weight: $font-weight-medium
+  font-style: normal
+  font-size: $font-size-h6
+  cursor: pointer
+
+.labelContent
+  flex: 1 0 auto
+
+/* styles for the hidden input */
+.input
+  position: absolute
+  left: 0
+  right: 0
+  display: inline-block
+  width: 0
+  height: 0
+  visibility: hidden
+  opacity: 0
+  margin: 0
+  padding: 0

package/compat/Radio/Radio.tsx

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import styles from './Radio.styl';
+import classnames from 'classnames';
+import IconSVG from '../../iconsvg/IconSVG';
+interface IRadioProps {
+  // Native radio button props
+  name?: string;
+  value: any;
+  checked?: boolean;
+  disabled?: boolean;
+
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any) => void;
+  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+
+  // Custom radio button props
+  containerClassName?: string;
+  radioClassName?: string;
+  labelClassName?: string;
+  squareRadioClassname?: string;
+  color?: string;
+  fill?: string;
+
+  error?: boolean;
+  label?: JSX.Element | string | null;
+}
+
+class Radio extends React.Component<IRadioProps> {
+  static defaultProps = {
+    name: '',
+    value: '',
+    checked: false,
+    disabled: false,
+
+    onChange: () => { },
+    onBlur: () => { },
+    onFocus: () => { },
+
+    containerClassName: '',
+    checkboxClassName: '',
+    labelClassName: '',
+    squareRadioClassname: '',
+    color: '',
+    fill: '',
+
+    error: false,
+    label: false
+  };
+
+  input: HTMLInputElement = null;
+
+  setInputRef = (ref: HTMLInputElement) => {
+    this.input = ref;
+  };
+
+  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { disabled, value } = this.props;
+    const { checked } = event.target;
+
+    if (disabled) {
+      return false;
+    }
+
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+
+    this.props.onChange(event, checked, value);
+  };
+
+  onKeyPress = (event: any) => {
+    const { disabled } = this.props;
+    const checked = this.input.checked;
+    const value = this.input.value;
+
+    if (disabled) {
+      return false;
+    }
+
+    this.props.onChange(event, checked, value);
+  };
+
+  render(): JSX.Element {
+    const {
+      containerClassName, radioClassName, labelClassName,
+      checked, disabled, value, error, label, name, squareRadioClassname, color, fill
+    } = this.props;
+
+    const containerClasses = classnames(
+      styles.container,
+      containerClassName,
+      { [styles.checked]: checked },
+      { [styles.error]: error },
+      { [styles.disabled]: disabled },
+      { [styles.marginRadio]: !!squareRadioClassname }
+
+    );
+
+    const labelClasses = classnames(
+      styles.label,
+      labelClassName
+    );
+
+    const radioClasses = classnames(
+      styles.radioAll,
+      { [styles.radio]: !squareRadioClassname },
+      { [styles.squareRadio]: !!squareRadioClassname },
+      // styles.radio,
+      radioClassName,
+      squareRadioClassname,
+      { [styles.withLabel]: !!label }
+    );
+
+    return (
+      <div className={containerClasses} tabIndex={1} onFocus={this.props.onFocus} onBlur={this.props.onBlur} onKeyPress={this.onKeyPress}>
+        <label className={labelClasses}>
+          {/* Visual representation of the radio button */}
+          <span style={{ background: `${color}` }} className={radioClasses}>{checked && squareRadioClassname
+            ? <IconSVG name='common_CheckBlue' className={styles.checkBlueIcon} style={{ fill: `${fill}` }} />
+            : ''}
+          </span>
+
+          {/* Hidden radio input for SEO and HTML semantics */}
+          <input
+            className={styles.input}
+            type='radio'
+            name={name}
+            checked={checked}
+            value={value}
+            disabled={disabled}
+            tabIndex={-1}
+            onChange={this.onChange}
+            ref={this.setInputRef}
+          />
+          {!!label ? <span className={styles.labelContent}>{label}</span> : false}
+        </label>
+      </div>
+    );
+  }
+}
+
+export default Radio;

package/compat/Radio/RadioGroup.styl

@@ -0,0 +1,5 @@
+.container
+  position: relative
+
+.child
+  box-sizing: border-box

package/compat/Radio/RadioGroup.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import classnames from 'classnames';
+
+import styles from './RadioGroup.styl';
+
+interface IRadioGroupProps {
+  name: string;
+  value: any;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>, value: any, radioName?: string) => void;
+
+  children: any;
+  error?: boolean;
+
+  containerClassName?: string;
+  childClassName?: string;
+  wrapperClassname?: string;
+  radioName?: string;
+  onBlur?: () => void;
+}
+
+class RadioGroup extends React.Component<IRadioGroupProps> {
+  onChange = (event: React.ChangeEvent<HTMLInputElement>, _checked: boolean, value: any) => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    if (this.props.onBlur) this.props.onBlur();
+    this.props.onChange(event, value, this.props.radioName);
+  };
+
+  renderChildren = () => {
+    const { children, value, name, error, childClassName } = this.props;
+
+    return React.Children.map(children, (element: any) => {
+      const { type, props: _props } = element;
+
+      if (typeof type !== 'function') {
+        return;
+      }
+
+      const childClassNames = classnames(styles.child, childClassName);
+      const isChecked = (value === _props.value);
+
+      const newProps = {
+        ..._props, name, error,
+        containerClassName: childClassNames,
+        checked: isChecked,
+        onChange: this.onChange
+      };
+
+      return React.cloneElement(element, newProps);
+    });
+  };
+
+  render() {
+    const { containerClassName, wrapperClassname } = this.props;
+    const containerClassNames = classnames(styles.container, containerClassName, wrapperClassname);
+
+    return (
+      <div className={containerClassNames}>
+        {this.renderChildren()}
+      </div>
+    );
+  }
+}
+
+export default RadioGroup;

package/compat/Range/Range.tsx

@@ -0,0 +1,79 @@
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI Slider `Range`. Same contract — min/max/step/value/units,
+// onChange(event, value), withRangeLimit/maxFinancingFirstInstallment — but
+// renders a native <input type="range"> tinted with the md3 primary token plus
+// a value bubble while dragging (the MUI slider showed the value label on drag).
+// Both call sites (fe-main FormSlider, OfferPanel RangeGroup) display the
+// current value themselves next to the slider header, exactly as before.
+
+import React, { useState, useEffect } from 'react';
+
+import FormattedNumber from '../FormattedNumber/FormattedNumber';
+
+interface IRangeProps {
+  children?: JSX.Element;
+  min: number;
+  max: number;
+  step: number;
+  units: string;
+  value: number;
+  withRangeLimit?: boolean;
+  onChange: (event: Event, value: number | number[], activeThumb?: number) => void;
+  maxFinancingFirstInstallment?: number;
+  // legacy RangeGroup passthroughs, accepted and ignored
+  isAlternative?: boolean;
+  onAfterChange?: () => void;
+  name?: string;
+}
+
+const Range: React.FC<IRangeProps> = ({
+  min, max, step, value = 0, units, withRangeLimit, onChange, maxFinancingFirstInstallment
+}) => {
+  const [rangeValue, setRangeValue] = useState<number>(0);
+  const [dragging, setDragging] = useState(false);
+
+  useEffect(() => { setRangeValue(value); }, [value]);
+
+  const effectiveMax = withRangeLimit && maxFinancingFirstInstallment != null ? maxFinancingFirstInstallment : max;
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const next = Number(event.target.value);
+    setRangeValue(next);
+    // legacy signature says DOM Event; hand over the native event under the hood.
+    onChange(event.nativeEvent, next);
+  };
+
+  const span = effectiveMax - min || 1;
+  const percent = Math.min(100, Math.max(0, ((rangeValue - min) / span) * 100));
+
+  return (
+    <span style={{ position: 'relative', display: 'block', padding: '10px 0' }}>
+      {dragging ? (
+        <span
+          style={{
+            position: 'absolute', top: -18, left: `${percent}%`, transform: 'translateX(-50%)',
+            fontSize: 12, padding: '2px 6px', borderRadius: 6, whiteSpace: 'nowrap',
+            background: 'var(--md-inverse-surface, #322F35)', color: 'var(--md-inverse-on-surface, #fff)'
+          }}
+        >
+          <FormattedNumber value={rangeValue} numbersAfterDot={0} />{` ${units}`}
+        </span>
+      ) : null}
+      <input
+        type='range'
+        min={min}
+        max={effectiveMax}
+        step={step}
+        value={rangeValue}
+        onChange={handleChange}
+        onPointerDown={() => setDragging(true)}
+        onPointerUp={() => setDragging(false)}
+        onBlur={() => setDragging(false)}
+        style={{ width: '100%', accentColor: 'var(--md-primary)', cursor: 'pointer' }}
+        aria-valuetext={`${rangeValue} ${units}`}
+      />
+    </span>
+  );
+};
+
+export default Range;

package/compat/RateSearchValue/RateSearchValue.styl

@@ -0,0 +1,22 @@
+@import '../legacy-theme/theme.styl'
+
+.RateSearchValue
+  box-sizing: border-box
+  font-size: 16px
+  line-height: 48px
+  height: 38px
+  width: 100%
+  padding: 0 5px
+  border: 1px solid $grey-d
+  cursor: pointer
+  text-align: left
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis
+  color: rgba(#333, .8);
+  &:hover
+    border-color: $grey-b
+
+.label
+  display: inline-block
+  margin-right: 5px