@bytebrand/fe-ui-core 4.2.47 → 4.2.49

package/source/components/_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper.styl

@@ -1,120 +1,120 @@
-
-@import '../../../theme/mixins.styl';
-@import '../../../theme/theme.styl';
-
-.checkIcon
-  fill: white
-  height: 18px
-  width: 18px
-  margin-right: 5px
-
-.controlsContainer
-  position relative
-  display: flex
-  z-index: 1
-  width: 100%;
-  margin-top: auto;
-  column-gap: 10px
-
-.controlButton
-  height: 35px
-  line-height: unset
-  font-weight: bold
-  border-radius: 2px;
-  font-size: 13px !important;
-  display: flex
-  align-items: center
-  justify-content: center
-  +media-tablet-up()
-    text-transform: uppercase !important;
-
-.offerButtonGet
-  flex: 1 60%
-  +media-phone-only()
-    &:hover
-      background-color: $green
-  +media-tablet-up()
-    width: 100%
-
-.offerButtonSuccess
-  background-color: $lightGreen !important
-  display: flex !important
-  align-items: center
-  justify-content: center
-  cursor: inherit
-  &:hover
-    box-shadow: none !important
-
-.envelopeIcon
-  margin-right: 10px
-  fill: white
-  width: 1.5em
-
-  path
-    fill: #fff
-
-.phoneIcon
-  margin-right: 5px
-  width: 1.5em
-  & path
-    transition: all 0.2s ease-in-out
-
-.phoneButton
-  box-sizing: border-box
-  margin-left: 16px;
-  flex: 1 40%
-  color: $primary !important
-  font-size 13px;
-  border: 2px solid $primary
-  border-radius: 2px;
-  transition: all 0.2s ease-in-out
-
-.checkIcon
-  fill: white
-  height: 18px
-  width: 18px
-  margin-right: 5px
-
-.autoDeIdContainer
-  position: relative;
-  z-index: 1;
-
-.detalis
-  font-size 10px
-  align-items center
-  cursor pointer
-  display flex;
-  [class*='infoIcon']
-    transform: scale(.75);
-    margin-right 5px
-
-.infoIcon
-  margin-right: 10px;
-
-.detalisText
-  color: rgba($grey-3, .83);
-
-.autoDeIdContainer
-  position: relative;
-  z-index: 1;
-
-.autoDeId
-  font-weight: bold
-  font-size: 12px
-  color: $skyBlue
-  cursor: pointer
-
-.autoDeId:hover
-  text-decoration: underline
-
-.bottomDetailsContainer
-  display flex
-  justify-content: space-between;
-  margin-top: 4px;
-  margin-bottom: 4px;
-
-.aboUnits
-  color: rgba($grey-3, .8)
-
-.isAlternativeButton
+
+@import '../../../theme/mixins.styl';
+@import '../../../theme/theme.styl';
+
+.checkIcon
+  fill: white
+  height: 18px
+  width: 18px
+  margin-right: 5px
+
+.controlsContainer
+  position relative
+  display: flex
+  z-index: 1
+  width: 100%;
+  margin-top: auto;
+  column-gap: 10px
+
+.controlButton
+  height: 35px
+  line-height: unset
+  font-weight: bold
+  border-radius: 2px;
+  font-size: 13px !important;
+  display: flex
+  align-items: center
+  justify-content: center
+  +media-tablet-up()
+    text-transform: uppercase !important;
+
+.offerButtonGet
+  flex: 1 60%
+  +media-phone-only()
+    &:hover
+      background-color: $green
+  +media-tablet-up()
+    width: 100%
+
+.offerButtonSuccess
+  background-color: $lightGreen !important
+  display: flex !important
+  align-items: center
+  justify-content: center
+  cursor: inherit
+  &:hover
+    box-shadow: none !important
+
+.envelopeIcon
+  margin-right: 10px
+  fill: white
+  width: 1.5em
+
+  path
+    fill: #fff
+
+.phoneIcon
+  margin-right: 5px
+  width: 1.5em
+  & path
+    transition: all 0.2s ease-in-out
+
+.phoneButton
+  box-sizing: border-box
+  margin-left: 16px;
+  flex: 1 40%
+  color: $primary !important
+  font-size 13px;
+  border: 2px solid $primary
+  border-radius: 2px;
+  transition: all 0.2s ease-in-out
+
+.checkIcon
+  fill: white
+  height: 18px
+  width: 18px
+  margin-right: 5px
+
+.autoDeIdContainer
+  position: relative;
+  z-index: 1;
+
+.detalis
+  font-size 10px
+  align-items center
+  cursor pointer
+  display flex;
+  [class*='infoIcon']
+    transform: scale(.75);
+    margin-right 5px
+
+.infoIcon
+  margin-right: 10px;
+
+.detalisText
+  color: rgba($grey-3, .83);
+
+.autoDeIdContainer
+  position: relative;
+  z-index: 1;
+
+.autoDeId
+  font-weight: bold
+  font-size: 12px
+  color: $skyBlue
+  cursor: pointer
+
+.autoDeId:hover
+  text-decoration: underline
+
+.bottomDetailsContainer
+  display flex
+  justify-content: space-between;
+  margin-top: 4px;
+  margin-bottom: 4px;
+
+.aboUnits
+  color: rgba($grey-3, .8)
+
+.isAlternativeButton
   background-color: $alternative

package/source/components/_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper.styled.tsx

@@ -1,23 +1,23 @@
-import { styled } from '@mui/system';
-import Button from '../../_common/Button/Button';
-import IconSVG from '../../_common/IconSVG/IconSVG';
-
-export const StyledButton = styled(Button)({
-  height: 35,
-  lineHeight: 'unset',
-  fontWeight: 'bold',
-  borderRadius: 2,
-  fontSize: 13,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  ['@media all and (min-width: 992px)'] :// and (min-height: $tablet)// -- set mobile layout for high resolution in a landscape mode ACF-3974
-    { textTransform: 'uppercase' }
-});
-
-export const StyledIconSVG = styled(IconSVG)({
-  marginRight: 10,
-  fill: '#4C4E648A',
-  width: '14px',
-  height: 'auto'
-});
+import { styled } from '@mui/system';
+import Button from '../../_common/Button/Button';
+import IconSVG from '../../_common/IconSVG/IconSVG';
+
+export const StyledButton = styled(Button)({
+  height: 35,
+  lineHeight: 'unset',
+  fontWeight: 'bold',
+  borderRadius: 2,
+  fontSize: 13,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ['@media all and (min-width: 992px)'] :// and (min-height: $tablet)// -- set mobile layout for high resolution in a landscape mode ACF-3974
+    { textTransform: 'uppercase' }
+});
+
+export const StyledIconSVG = styled(IconSVG)({
+  marginRight: 10,
+  fill: '#4C4E648A',
+  width: '14px',
+  height: 'auto'
+});

package/source/components/_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper.tsx

@@ -1,113 +1,113 @@
-import React, { useRef } from 'react';
-import classnames from 'classnames';
-import { Visible } from 'react-grid-system';
-import _get from 'lodash/get';
-import { IOfferRequestButtonWrapperProps } from '../../../framework/types/types';
-import styles from './OfferRequestButtonWrapper.styl';
-
-import { supportPhoneLink } from '../../../framework/constants/app';
-import { StyledButton, StyledIconSVG } from './OfferRequestButtonWrapper.styled';
-
-const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapperProps> = ({
-  t,
-  car,
-  detailsText,
-  OfferRequestButtonWrapper,
-  priceTabActiveIndex,
-  isAdditionalOption,
-  controlsClassContainer,
-  onShowOfferDetails
-}) => {
-  const btnEl = useRef(null);
-  const autoDeId = _get(car, 'metaData.vehicleId', null);
-  const dealerId = _get(car, 'metaData.ownerId') || null;
-  const carId = _get(car, '_id', '');
-  const onAutoDeIdClick = () => {
-    btnEl.current.onClick();
-  };
-
-  const controlsContainerClassName = classnames(
-    styles.controlsContainer,
-    controlsClassContainer
-  );
-  return (
-    <>
-      <div className={controlsContainerClassName}>
-        <OfferRequestButtonWrapper carId={carId} dealerId={dealerId} >
-          {(
-            onClick: () => void,
-            isOfferRequested: boolean,
-            hasCheckout: boolean,
-            _: void,
-            isLoading: boolean,
-            isSale: boolean,
-            isAlternative: boolean
-            ) => {
-            const { metaData } = car;
-            const isAlternativeType = !!metaData && !!metaData.type;
-            const offerButtonClassName = classnames(
-              styles.controlButton,
-              styles.offerButtonGet,
-              { [styles.offerButtonSuccess]: isOfferRequested || hasCheckout },
-              { [styles.isAlternativeButton]: isAlternative || isSale || isAlternativeType }
-            );
-
-            const getRequestButtonTitle = () => {
-              if (isSale) return t('sidebar.requestOfferSale');
-              else if (isAlternativeType) return t('sidebar.importRequest');
-              else if (hasCheckout) return t('vehicleProps:title.toCheckoutCar');
-              else if (isOfferRequested) return t('CheckoutPage:onlineCheckoutModal.redirectBtn');
-              else return t('sidebar.requestOffer');
-            };
-
-            return (
-              <StyledButton
-                refs={btnEl}
-                className={offerButtonClassName}
-                onClick={onClick}
-                loading={isLoading}
-              >
-                {isOfferRequested
-                  ? null
-                  : <StyledIconSVG name='whiteEnvelope' customDimensions className={styles.envelopeIcon} />
-                }
-                {isOfferRequested ? <StyledIconSVG name='dealerCheckIcon' customDimensions className={styles.checkIcon} /> : null}
-                {getRequestButtonTitle()}
-              </StyledButton>
-            );
-          }}
-        </OfferRequestButtonWrapper>
-
-        {isAdditionalOption ? (
-          <Visible xs sm md>
-            <StyledButton onClick={() => location.href = `tel:${supportPhoneLink}`} variant='outlined' color='primary' className={classnames(styles.controlButton, styles.phoneButton)}>
-              <StyledIconSVG name='popoverPhone' className={styles.phoneIcon} customDimensions />
-              {t('sidebar.callUp')}
-            </StyledButton>
-          </Visible>
-        ) : ''}
-      </div>
-      {isAdditionalOption ? (
-        <div className={styles.bottomDetailsContainer}>
-          {autoDeId ? <div className={styles.autoDeIdContainer} onClick={onAutoDeIdClick}>
-            <span className={styles.autoDeId}>auto.de-ID: {autoDeId}</span>
-          </div> : false}
-          {detailsText && (
-            <div className={styles.detalis} onClick={(event?: React.ChangeEvent<{}>) => onShowOfferDetails(event, car, priceTabActiveIndex)}>
-              <StyledIconSVG name='infoIcon' className={styles.infoIcon} customDimensions />
-              <span className={styles.detalisText}>
-                {t(`sidebar.financingBlock.${detailsText}`)}
-              </span>
-            </div>
-          )}
-        </div>
-      ) : ''}
-    </>
-  );
-};
-
-OfferRequestBtnWrapper.defaultProps = {
-  isAdditionalOption: false
-};
-
-export default OfferRequestBtnWrapper;
+import React, { useRef } from 'react';
+import classnames from 'classnames';
+import { Visible } from 'react-grid-system';
+import _get from 'lodash/get';
+import { IOfferRequestButtonWrapperProps } from '../../../framework/types/types';
+import styles from './OfferRequestButtonWrapper.styl';
+
+import { supportPhoneLink } from '../../../framework/constants/app';
+import { StyledButton, StyledIconSVG } from './OfferRequestButtonWrapper.styled';
+
+const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapperProps> = ({
+  t,
+  car,
+  detailsText,
+  OfferRequestButtonWrapper,
+  priceTabActiveIndex,
+  isAdditionalOption,
+  controlsClassContainer,
+  onShowOfferDetails
+}) => {
+  const btnEl = useRef(null);
+  const autoDeId = _get(car, 'metaData.vehicleId', null);
+  const dealerId = _get(car, 'metaData.ownerId') || null;
+  const carId = _get(car, '_id', '');
+  const onAutoDeIdClick = () => {
+    btnEl.current.onClick();
+  };
+
+  const controlsContainerClassName = classnames(
+    styles.controlsContainer,
+    controlsClassContainer
+  );
+  return (
+    <>
+      <div className={controlsContainerClassName}>
+        <OfferRequestButtonWrapper carId={carId} dealerId={dealerId} >
+          {(
+            onClick: () => void,
+            isOfferRequested: boolean,
+            hasCheckout: boolean,
+            _: void,
+            isLoading: boolean,
+            isSale: boolean,
+            isAlternative: boolean
+            ) => {
+            const { metaData } = car;
+            const isAlternativeType = !!metaData && !!metaData.type;
+            const offerButtonClassName = classnames(
+              styles.controlButton,
+              styles.offerButtonGet,
+              { [styles.offerButtonSuccess]: isOfferRequested || hasCheckout },
+              { [styles.isAlternativeButton]: isAlternative || isSale || isAlternativeType }
+            );
+
+            const getRequestButtonTitle = () => {
+              if (isSale) return t('sidebar.requestOfferSale');
+              else if (isAlternativeType) return t('sidebar.importRequest');
+              else if (hasCheckout) return t('vehicleProps:title.toCheckoutCar');
+              else if (isOfferRequested) return t('CheckoutPage:onlineCheckoutModal.redirectBtn');
+              else return t('sidebar.requestOffer');
+            };
+
+            return (
+              <StyledButton
+                refs={btnEl}
+                className={offerButtonClassName}
+                onClick={onClick}
+                loading={isLoading}
+              >
+                {isOfferRequested
+                  ? null
+                  : <StyledIconSVG name='whiteEnvelope' customDimensions className={styles.envelopeIcon} />
+                }
+                {isOfferRequested ? <StyledIconSVG name='dealerCheckIcon' customDimensions className={styles.checkIcon} /> : null}
+                {getRequestButtonTitle()}
+              </StyledButton>
+            );
+          }}
+        </OfferRequestButtonWrapper>
+
+        {isAdditionalOption ? (
+          <Visible xs sm md>
+            <StyledButton onClick={() => location.href = `tel:${supportPhoneLink}`} variant='outlined' color='primary' className={classnames(styles.controlButton, styles.phoneButton)}>
+              <StyledIconSVG name='popoverPhone' className={styles.phoneIcon} customDimensions />
+              {t('sidebar.callUp')}
+            </StyledButton>
+          </Visible>
+        ) : ''}
+      </div>
+      {isAdditionalOption ? (
+        <div className={styles.bottomDetailsContainer}>
+          {autoDeId ? <div className={styles.autoDeIdContainer} onClick={onAutoDeIdClick}>
+            <span className={styles.autoDeId}>auto.de-ID: {autoDeId}</span>
+          </div> : false}
+          {detailsText && (
+            <div className={styles.detalis} onClick={(event?: React.ChangeEvent<{}>) => onShowOfferDetails(event, car, priceTabActiveIndex)}>
+              <StyledIconSVG name='infoIcon' className={styles.infoIcon} customDimensions />
+              <span className={styles.detalisText}>
+                {t(`sidebar.financingBlock.${detailsText}`)}
+              </span>
+            </div>
+          )}
+        </div>
+      ) : ''}
+    </>
+  );
+};
+
+OfferRequestBtnWrapper.defaultProps = {
+  isAdditionalOption: false
+};
+
+export default OfferRequestBtnWrapper;

package/source/components/_common/PropertySelector/FormPSGroup.story.js

@@ -1,36 +1,36 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import PropertySelector from './PropertySelector';
-import FormPSGroup from './FormPSGroup';
-import styles from './FormPSGroup.story.styl';
-
-const mockField = {
-  name: 'availability',
-  value: ['always'],
-  error: 'Something went wrong',
-  hasError: true,
-  onChange: action('FormRadioGroup change'),
-  bind: () => {
-    const { bind, ...rest } = mockField;
-    return rest;
-  }
-};
-
-storiesOf('_Common_UI', module)
-.add('FormPSGroup', () => (
-  <div>
-    <FormPSGroup field={mockField} childClassName={styles.child}>
-      <PropertySelector label='Available always' value='always'/>
-      <PropertySelector label='Available from' value='fromDate'/>
-      <PropertySelector label='Unknown' value='unknown' disabled={true} />
-    </FormPSGroup>
-
-    <FormPSGroup field={mockField} containerClassName={styles.vertical}>
-      <PropertySelector label='Available always' value='always'/>
-      <PropertySelector label='Available from' value='fromDate'/>
-      <PropertySelector label='Unknown' value='unknown' disabled={true} />
-    </FormPSGroup>
-  </div>
-));
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import PropertySelector from './PropertySelector';
+import FormPSGroup from './FormPSGroup';
+import styles from './FormPSGroup.story.styl';
+
+const mockField = {
+  name: 'availability',
+  value: ['always'],
+  error: 'Something went wrong',
+  hasError: true,
+  onChange: action('FormRadioGroup change'),
+  bind: () => {
+    const { bind, ...rest } = mockField;
+    return rest;
+  }
+};
+
+storiesOf('_Common_UI', module)
+.add('FormPSGroup', () => (
+  <div>
+    <FormPSGroup field={mockField} childClassName={styles.child}>
+      <PropertySelector label='Available always' value='always'/>
+      <PropertySelector label='Available from' value='fromDate'/>
+      <PropertySelector label='Unknown' value='unknown' disabled={true} />
+    </FormPSGroup>
+
+    <FormPSGroup field={mockField} containerClassName={styles.vertical}>
+      <PropertySelector label='Available always' value='always'/>
+      <PropertySelector label='Available from' value='fromDate'/>
+      <PropertySelector label='Unknown' value='unknown' disabled={true} />
+    </FormPSGroup>
+  </div>
+));

package/source/components/_common/PropertySelector/FormPSGroup.story.styl

@@ -1,5 +1,5 @@
-.vertical
-  display: flex
-  flex-direction: row
-  align-items: center
-
+.vertical
+  display: flex
+  flex-direction: row
+  align-items: center
+

package/source/components/_common/PropertySelector/FormPSGroup.styl

@@ -1,22 +1,22 @@
-@import '../../../theme/theme.styl'
-
-.field
-  position: relative
-  display: inline-block
-
-.errorText
-  position: absolute
-  left: 0
-  bottom: -15px
-  display: block
-  width: 100%
-  z-index: 1
-  font-family: $font-style-arial
-  font-weight: $font-weight-default
-  font-style: normal
-  font-size: 10px
-  line-height: 15px
-  color: $darkRed
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap
+@import '../../../theme/theme.styl'
+
+.field
+  position: relative
+  display: inline-block
+
+.errorText
+  position: absolute
+  left: 0
+  bottom: -15px
+  display: block
+  width: 100%
+  z-index: 1
+  font-family: $font-style-arial
+  font-weight: $font-weight-default
+  font-style: normal
+  font-size: 10px
+  line-height: 15px
+  color: $darkRed
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap