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

package/compat/PriceRatingDetailed/PriceRatingDetailed.styl

@@ -1,120 +1,120 @@
-@import '../legacy-theme/theme.styl';
-@import '../legacy-theme/mixins.styl';
-@import '../legacy-theme/priceReviewColors.styl';
-
-.wrapper
-  font-family: $font-style-arial
-  display: flex
-  position: relative
-
-.segmentWrapper
-  flex: 1 1 0px
-
-.segment
-  position: relative
-  text-align: center
-  display: flex
-  justify-content: center
-  align-items: center
-  box-sizing: border-box
-  height: 30px
-  border: 1px solid #F5F5F5;
-  padding: 0 5px
-
-  & h6
-    color: white !important
-    font-size: 14px
-    font-weight: bold
-    text-transform: uppercase
-    margin: 0
-    line-height: 1em
-
-.priceRange
-  font-size: 11px
-  display: block
-  text-align: center
-  margin-top: 4px
-
-.tooltipWrapper
-  position: absolute
-  top: -40px
-  left: 50%
-  z-index: 1
-  &:after
-    content: ''
-    position: absolute
-    left: -6px
-    bottom: -6px
-    width: 12px
-    height: 12px
-    transform: rotate(45deg)
-    background-color: black
-    z-index: -1
-
-.noRatingTooltipWrapper
-  @extends .tooltipWrapper
-  &:after
-    content: none
-
-.baseTooltip
-  position: relative
-  left: -50%
-  font-size: 16px
-  height: 24px
-  font-weight bold
-  line-height: 24px;
-  border: 2px solid black
-  border-radius: 3px
-  padding: 0 10px
-  background-color: white
-  white-space: nowrap
-
-.noRatingTooltip
-  @extends .baseTooltip
-  color: black
-  border-color: $priceReviewColors[darkBackground]
-
-.tooltip
-  @extends .baseTooltip
-  color: white
-
-for colorName in $priceReviewColors
-  $color = $priceReviewColors[colorName]
-  .{colorName}
-    &.segment
-      background-color $color
-    .tooltipWrapper
-      &:after
-        background-color: $color    
-    .tooltip
-      border-color: $color
-      color: $color
-      &:after
-        background-color: $color
-
-.compact
-  & .segment
-    height: 21px
-    & h6 
-      font-size: 10px
-      font-weight: normal  
-  & .priceRange
-    font-size: 8px
-    margin-top: 2px
-  & .tooltipWrapper, & .noRatingTooltipWrapper
-    top: -30px
-  & .noRatingTooltip
-    font-size: 12px
-    height: 19px
-    line-height: 19px
-    padding: 0 5px  
-  & .tooltip
-    font-size: 12px
-    height: 19px
-    line-height: 19px
-    padding: 0 5px
-    &:after
-      width: 8px
-      height: 8px
-      left: calc(50% - 4px)
-      bottom: -5px
+@import '../legacy-theme/theme.styl';
+@import '../legacy-theme/mixins.styl';
+@import '../legacy-theme/priceReviewColors.styl';
+
+.wrapper
+  font-family: $font-style-arial
+  display: flex
+  position: relative
+
+.segmentWrapper
+  flex: 1 1 0px
+
+.segment
+  position: relative
+  text-align: center
+  display: flex
+  justify-content: center
+  align-items: center
+  box-sizing: border-box
+  height: 30px
+  border: 1px solid #F5F5F5;
+  padding: 0 5px
+
+  & h6
+    color: white !important
+    font-size: 14px
+    font-weight: bold
+    text-transform: uppercase
+    margin: 0
+    line-height: 1em
+
+.priceRange
+  font-size: 11px
+  display: block
+  text-align: center
+  margin-top: 4px
+
+.tooltipWrapper
+  position: absolute
+  top: -40px
+  left: 50%
+  z-index: 1
+  &:after
+    content: ''
+    position: absolute
+    left: -6px
+    bottom: -6px
+    width: 12px
+    height: 12px
+    transform: rotate(45deg)
+    background-color: black
+    z-index: -1
+
+.noRatingTooltipWrapper
+  @extends .tooltipWrapper
+  &:after
+    content: none
+
+.baseTooltip
+  position: relative
+  left: -50%
+  font-size: 16px
+  height: 24px
+  font-weight bold
+  line-height: 24px;
+  border: 2px solid black
+  border-radius: 3px
+  padding: 0 10px
+  background-color: white
+  white-space: nowrap
+
+.noRatingTooltip
+  @extends .baseTooltip
+  color: black
+  border-color: $priceReviewColors[darkBackground]
+
+.tooltip
+  @extends .baseTooltip
+  color: white
+
+for colorName in $priceReviewColors
+  $color = $priceReviewColors[colorName]
+  .{colorName}
+    &.segment
+      background-color $color
+    .tooltipWrapper
+      &:after
+        background-color: $color    
+    .tooltip
+      border-color: $color
+      color: $color
+      &:after
+        background-color: $color
+
+.compact
+  & .segment
+    height: 21px
+    & h6 
+      font-size: 10px
+      font-weight: normal  
+  & .priceRange
+    font-size: 8px
+    margin-top: 2px
+  & .tooltipWrapper, & .noRatingTooltipWrapper
+    top: -30px
+  & .noRatingTooltip
+    font-size: 12px
+    height: 19px
+    line-height: 19px
+    padding: 0 5px  
+  & .tooltip
+    font-size: 12px
+    height: 19px
+    line-height: 19px
+    padding: 0 5px
+    &:after
+      width: 8px
+      height: 8px
+      left: calc(50% - 4px)
+      bottom: -5px

package/compat/PriceRatingDetailed/PriceRatingDetailed.tsx

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

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