@bytebrand/fe-ui-core 4.8.54 → 4.8.56

package/source/components/ContactForm/ContactForm.story.js

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import ContactForm from "./ContactForm";
+import { storiesOf } from "@storybook/react";
+import styles from './ContactForm.story.styl';
+
+const ContactFormContainer = () => {
+
+    const [contactFormValues, setContactFormValues] = useState({
+        firstName: {
+            value: 'firstname',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'firstName'
+          },
+          lastName: {
+            value: 'lastName',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'lastName'
+          },
+          email: {
+            value: 'email',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'email'
+          },
+          countryCode: {
+            value: 'countryCode',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'countryCode',
+            extra: [10, 20, 30]
+          },
+          areaCode: {
+            value: 'areaCode',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'areaCode'
+          },
+          phoneNumber: {
+            value: 'phoneNumber',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'phoneNumber'
+          },
+          message: {
+            value: 'message',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'message',
+            placeHolder: 'placeHolder'
+          },
+          checkBox: {
+            error: null,
+            hasError: true,
+            name: 'terms',
+            placeHolder: '',
+            type: 'checkbox',
+            value: false,
+            bind: () => {}
+          },
+          formIsValid: true
+    })
+
+    const config = {
+        recaptchaSiteKey: '6LdunNEaAAAAAB1DazkKJFN2CbCT7YbMfUZ80R6C'
+    }
+  
+    const contactFormProps = {
+        t: () => {},
+        carStore: {
+            formStatus: 'done'
+        },
+        contactFormValues,
+        config
+    }
+    return (
+        <ContactForm { ...contactFormProps }/>
+    )
+}
+
+storiesOf('ContactForm', module)
+  .add('ContactForm', () => (
+    <>
+      <ContactFormContainer/>
+    </>
+  ));

package/source/components/ContactInfo/ContactInfo.story.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Container, Row, Col } from 'react-grid-system';
+
+import ContactInfo from './ContactInfo';
+
+const colStyle = {
+  outline: 'silver solid 1px'
+};
+
+const props = {
+  t: key => key,
+
+  title: 1,
+  gender: 2,
+  street: 'Musterstraße',
+  number: '14',
+  streetAddition: 'A',
+  city: 'Musterstadt',
+  zip: '01234',
+  countryName: 'Deutschland',
+  firstName: 'Peter',
+  lastName: 'Mustermann',
+  company: 'Company',
+  email: 'email@email.com',
+
+  phoneMain: '(+49) 123 456789',
+  phoneMobile: '(+49) 341 456789',
+
+  ustIdNr: '122134',
+
+  website: 'www.mustermann.ag',
+};
+
+storiesOf('ContactInfo', module)
+  .add('default', () => (
+    <div style={{ width: 992 }}>
+      <Container fluid>
+        <Row>
+          <Col sm={6} style={colStyle}>
+            <ContactInfo {...props}/>
+          </Col>
+          <Col sm={6} style={colStyle}>
+            <ContactInfo {...props} company={undefined} phoneMain={undefined}/>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={6} style={colStyle}>
+            <ContactInfo {...props} ustIdNr={undefined} website={undefined} company={undefined}/>
+          </Col>
+          <Col sm={6} style={colStyle}>
+            <ContactInfo {...props} phones={undefined} streetAddress={undefined}/>
+          </Col>
+        </Row>
+      </Container>
+    </div>
+  ));

package/source/components/CustomerQuote/CustomerQuote.story.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+// import { action } from '@storybook/addon-actions';
+
+import CustomerQuote from './CustomerQuote';
+
+const vertical = {
+  margin: '10px 0',
+  width: '220px',
+  backgroundColor: 'white'
+};
+
+const horizontal = {
+  width: '375px',
+  backgroundColor: 'white'
+};
+
+const verticalProps = {
+  image: 'http://placekitten.com/200/200',
+  name: 'First Last',
+  source: 'Kundenbewertung via Google',
+  review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem. Consequuntur distinctio facilis minus necessitatibus possimus quisquam!'
+};
+
+const horizontalProps = {
+  ...verticalProps,
+  isHorizontal: true
+};
+
+storiesOf('CustomerQuote', module)
+  .add('CustomerQuote', () => (
+    <div>
+      <div style={vertical}>
+        <CustomerQuote {...verticalProps} />
+      </div>
+
+      <div style={horizontal}>
+        <CustomerQuote {...horizontalProps} />
+      </div>
+    </div>
+  ));

package/source/components/CustomerQuotesSlider/CustomerQuotesSlider.story.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import styles from './CustomerQuotesSlider.story.styl';
+import CustomerQuotesSlider from './CustomerQuotesSlider';
+
+const quotes = [
+  {
+    id: Date.now().toString(),
+    image: 'http://placekitten.com/200/200',
+    name: 'First Last',
+    source: 'Kundenbewertung via Google',
+    review: '“BRückfragen wurden innerhalb kurzer Zeit telefonisch oder per Mail'
+  },
+  {
+    id: Date.now().toString(),
+    image: 'http://placekitten.com/200/200',
+    name: 'Klaus Andres',
+    source: 'Google Kundenbevertung',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
+  },
+  {
+    id: Date.now().toString(),
+    image: 'http://placekitten.com/200/200',
+    name: 'First Last',
+    source: 'Kundenbewertung via Google',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
+  },
+  {
+    id: Date.now().toString(),
+    image: 'http://placekitten.com/200/200',
+    name: 'First Last',
+    source: 'Kundenbewertung via Google',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
+  },
+  {
+    id: Date.now().toString(),
+    image: 'http://placekitten.com/200/200',
+    name: 'First Last',
+    source: 'Kundenbewertung via Google',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
+  },
+  {
+    id: Date.now().toString(),
+    image: 'http://placekitten.com/200/200',
+    name: 'First Last',
+    source: 'Kundenbewertung via Google',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
+  }
+];
+
+const props = {
+  quotes,
+  className: styles.multiContainer,
+};
+
+const singleQuote = {
+  quotes,
+  className: styles.singleContainer,
+  slidesToShow: 1
+};
+
+storiesOf('CustomerQuotesSlider', module)
+  .add('CustomerQuotesSlider', () => (
+    <>
+      <div style={{ width: '100%', maxWidth: '716px', backgroundColor: 'white' }}>
+        <CustomerQuotesSlider {...props} />
+      </div>
+
+      <div style={{ width: '100%', maxWidth: '380px', marginTop: '50px', backgroundColor: 'white' }}>
+        <CustomerQuotesSlider {...singleQuote} />
+      </div>
+    </>
+  ));

package/source/components/CustomerQuotesSlider/CustomerQuotesSlider.story.styl

@@ -0,0 +1,5 @@
+.singleContainer
+  padding: 12px 32px;
+
+.multiContainer
+  padding: 15px 25px;

package/source/components/FormattedNumber/FormattedNumber.story.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import FormattedNumber from './FormattedNumber';
+
+const container = {
+  textAlign: 'left'
+};
+
+const item = {
+  margin: '5px 0',
+  width: '500px',
+  display: 'flex',
+  justifyContent: 'space-between'
+};
+
+const numbers = {
+  display: 'inline-flex',
+  flexDirection: 'row'
+};
+
+const simpleStories = [
+  {
+    title: 'simple number, rounded',
+    props: {
+      value: 33.25
+    }
+  },
+  {
+    title: 'simple number, formatted, not rounded (small)',
+    props: {
+      value: 33.25,
+      toRound: false
+    }
+  },
+  {
+    title: 'simple number, formatted, not rounded (big)',
+    props: {
+      value: 55476.36,
+      toRound: false
+    }
+  },
+  {
+    title: 'simple number',
+    props: {
+      value: 123
+    }
+  },
+  {
+    title: 'fixed after two digits',
+    props: {
+      value: 325.54
+    }
+  },
+  {
+    title: 'big number, formatted',
+    props: {
+      value: 65800000
+    }
+  }
+];
+
+const specialCases = [
+  {
+    title: 'without props',
+    props: {}
+  },
+  {
+    title: 'return original but formatted',
+    props: {
+      value: 3.99,
+      numbersAfterDot: 2,
+      toRound: false
+    }
+  },
+  {
+    title: 'return original number',
+    props: {
+      value: 325.59,
+      disableFormatting: true
+    }
+  }
+];
+
+storiesOf('Formatted Number', module)
+  .add('default', () => (
+    <div style={container}>
+      <div>
+        <h4>Simple cases</h4>
+        {simpleStories.map(({ title, props }, index) => (
+          <div style={item} key={index}>
+            <span>{title}</span>
+            <div style={numbers}>
+              <i>{props.value}&nbsp;>>>&nbsp;</i>
+              <FormattedNumber { ...props } />
+            </div>
+          </div>
+        ))}
+      </div>
+      <div>
+        <h4>Special cases</h4>
+        {specialCases.map(({ title, props }, index) => (
+          <div style={item} key={index}>
+            <span>{title}</span>
+            <div style={numbers}>
+              <i>{props.value}&nbsp;>>>&nbsp;</i>
+              <FormattedNumber { ...props } />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  ));
+

package/source/components/InfoBlocks/InfoBlockWrapper.story.js

@@ -0,0 +1,101 @@
+import { storiesOf } from '@storybook/react';
+import { InfoBlockWrapper } from '../../..';
+import React from 'react';
+import ServiceBlockItem from './ServicesBlock/ServiceBlockItem';
+// import PricingTool from './PricingToolBlock/PricingToolBlock';
+import styles from './InfoBlockWrapper.story.styl';
+import PricingToolBlock from './PricingToolBlock/PricingToolBlock';
+import { getPriceRatingConfig } from '../../framework/utils/CommonUtils';
+import _get from 'lodash/get';
+import FirstInfoBlock from '../InfoBlocks/FirstInfoBlock/FirstInfoBlock';
+import { firstInfoBlockTranslate } from '../../locales/data';
+
+
+const infoBlockData2 = [
+    {
+      src: 'orderWhite',
+      title: 'order',
+      content: 'orderText'
+    },
+    {
+      src: 'customerServiceWhite',
+      title: 'customerService',
+      content: 'customerServiceText'
+    },
+    {
+      src: 'priceGuaranteeWhite',
+      title: 'pay',
+      content: 'payText'
+    },
+    {
+      src: 'transportAndDelivery',
+      title: 'transport',
+      content: 'transportText'
+    }
+  ];
+
+const pricingToolBlockProps = {
+  showModal: () => {},
+  hideModal: () => {},
+  decoratedProps: { min: 20 },
+  currentSalesPrice: 500,
+  make: 'opel',
+  model: 'omega',
+  currentSalesPricePredicted: 100,
+  rating: 1,
+  ratingConfig: getPriceRatingConfig(10000, 1000),
+  equipmentCount: 3,
+  priceTabActiveIndex: 2
+}
+
+const onDetailsClick = () => {
+    alert('details click')
+}
+
+const InfoBlockWrapperContainer = () => {
+    const environment = window.location.origin;
+    const link = `${environment}/versichern/`;
+    return (
+        <div>
+            <InfoBlockWrapper title='It works so easy'>
+                <span className={styles.serviceBlockItemWrapper}>
+                    {infoBlockData2.map((item, index) => {
+                        return <ServiceBlockItem
+                                    iconSrc={item.src}
+                                    iconBgColor={true}
+                                    title={`${index + 1}. ${item.title}`}
+                                    content={item.content}
+                                    key={index} />;
+                    })}
+                </span>
+            </InfoBlockWrapper>
+            {/* <InfoBlockWrapper title='Price review' titleDetails='Details on the price evaluation' onDetailsClick={onDetailsClick}> */}
+            <PricingToolBlock { ...pricingToolBlockProps } />
+            {/* </InfoBlockWrapper> */}
+            <InfoBlockWrapper title='Car insurance' titleDetails='Compare now' onDetailsClick={onDetailsClick}>
+                No meaningful price information for this car is possible because too many different factors affect the value.
+            </InfoBlockWrapper>
+            <a href={link} className={styles.linkContainer}>
+                <InfoBlockWrapper title='ititle' titleDetails='ibutton'>
+                        <ul className={styles.itext}>
+                            <li>itext1</li>
+                            <li>itext2</li>
+                            <li>itext3</li>
+                        </ul>
+                </InfoBlockWrapper>
+            </a>
+            <FirstInfoBlock t={phrase => _get(firstInfoBlockTranslate(), phrase.replace(':', '.'), phrase)}/>
+        </div>
+    )
+}
+
+storiesOf('InfoBlockWrapper', module)
+  .add('InfoBlockWrapper', () => (
+    <div>
+      <div>
+        <InfoBlockWrapperContainer />
+      </div>
+    </div>
+  ));
+
+export default InfoBlockWrapperContainer;

package/source/components/InfoBlocks/InfoBlockWrapper.story.styl

@@ -0,0 +1,46 @@
+@import '../../theme/mixins.styl'
+
+.serviceBlockItemWrapper
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 50px;
+  +media-phone-only()
+    grid-template-columns: repeat(1, 1fr);
+    grid-gap: 0;
+
+.linkContainer
+  width: 100%
+  box-sizing border-box
+  background-color white
+  display block
+
+.itext
+  font-size: 14px
+  color:  $grey-54
+  line-height: 30px;
+  list-style: none;
+  margin 0;
+  padding: 0
+
+  +media-phone-only()
+    font-size: 12px
+    color: rgba(0, 0, 0, 0.63);
+    line-height: 14px;
+    text-align: justify;
+
+  & > li
+    position relative;
+    padding-left: 40px;
+
+    +media-phone-only()
+      margin-top: 10px
+
+    &::before
+      content: ''
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      background-image: url('../../../media/svg/common/insurance.svg');

package/source/components/OfferPanel/AboAccordion/AboFaq/AboFaq.story.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+// import { aboFaq } from '../../../../framework/constants';
+import AboFaq from './AboFaq';
+
+
+const item = {
+  margin: '5px 0',
+  width: '500px',
+  display: 'flex',
+  justifyContent: 'space-between'
+};
+
+const numbers = {
+  display: 'inline-flex',
+  flexDirection: 'row'
+};
+
+const simpleStories = [
+  {
+    title: 'simple number, rounded',
+    props: {
+      value: 33.25
+    }
+  },
+  {
+    title: 'simple number, formatted, not rounded (small)',
+    props: {
+      value: 33.25,
+      toRound: false
+    }
+  },
+  {
+    title: 'simple number, formatted, not rounded (big)',
+    props: {
+      value: 55476.36,
+      toRound: false
+    }
+  },
+  {
+    title: 'simple number',
+    props: {
+      value: 123
+    }
+  },
+  {
+    title: 'fixed after two digits',
+    props: {
+      value: 325.54
+    }
+  },
+  {
+    title: 'big number, formatted',
+    props: {
+      value: 65800000
+    }
+  }
+];
+
+const specialCases = [
+  {
+    title: 'without props',
+    props: {}
+  },
+  {
+    title: 'return original but formatted',
+    props: {
+      value: 3.99,
+      numbersAfterDot: 2,
+      toRound: false
+    }
+  },
+  {
+    title: 'return original number',
+    props: {
+      value: 325.59,
+      disableFormatting: true
+    }
+  }
+];
+
+storiesOf('Abo FAQ', module)
+  .add('default', () => (
+    <div>
+      <AboFaq />
+      {/* {aboFaq.map((item, index) =>
+        <span
+          className={styles.faqItem}
+          onClick={() => onShowFinancingDetailsClick('faqDetails', index)}
+          key={item}
+          >
+          {item}
+        </span>
+      )} */}
+    </div>
+  ));
+

package/source/components/OfferPanel/OfferCheckboxGroup/CheckboxContainer.tsx

@@ -21,7 +21,7 @@ export interface ICheckboxProps {
   checkboxClassName?: string;
   labelClassName?: string;
   labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
-  tooltipDescription?: string;
+  tooltipDescription?: React.ReactNode;
   checkboxPriceValue: any;
   tooltipPosX?: string;
   error?: boolean;
@@ -128,7 +128,7 @@ class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
           {description ? (
             <span className={styles.labelContent}>
               {description}
-              {tooltipDescription && <MaterialTooltip zindex={10000} text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
+              {tooltipDescription && <MaterialTooltip zindex={10000} disablePortal={false} text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
             </span>
           ) : false}
         </label>

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.styl

@@ -111,6 +111,30 @@
     max-height: inherit;
     width: inherit !important
 
+  :global
+    .MuiTooltip-tooltip
+      max-width: 360px !important
+      font-size: 11px
+      line-height: 1.45
+      color: #4C4E64AD
+      text-align: left
+
+      b
+        display: block
+        margin-bottom: 6px
+        font-size: 12px
+        color: #1a1a1a
+
+      p
+        margin: 0 0 6px
+
+      ul
+        margin: 4px 0 0
+        padding-left: 16px
+
+      li
+        margin-bottom: 3px
+
 .checkboxPrice
   align-self: center;
   color: rgba(#000000, .63);

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.tsx

@@ -11,12 +11,11 @@ interface IOfferPeriod {
   transferInstallments?: any;
 }
 
-const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, transferInstallments, isAboAccordionExpanded0 = true, priceTabIndex }) => {
+const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, isAboAccordionExpanded0 = true, priceTabIndex }) => {
   const offerGroupClass = classNames(styles.checkboxWrapped, { [styles.checkBoxGroup]: priceTabIndex !== THREE });
   return (
     <div className={offerGroupClass}>
       {isAboAccordionExpanded0 && <CheckboxContainer {...additionalService } />}
-      <CheckboxContainer {...{ ...transferInstallments, isAboAccordionExpanded0 }} />
     </div>
   );
 };