@bytebrand/fe-ui-core 4.8.26 → 4.8.28

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

@@ -1,58 +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>
-  ));
+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/ContactInfo/ContactInfo.styl

@@ -1,22 +1,22 @@
-@import '../../theme/theme.styl';
-
-.itemWrapper
-  line-height: 21px
-  margin-top: 6px
-  margin-bottom: 6px
-  color: $grey-3
-  font-family: $font-style-arial
-  font-size: 14px
-  word-break: break-word
-
-.iconWrapper
-  display: flex
-  align-items: center
-
-  & > svg
-    flex-shrink: 0
-    margin-right: 8px
-    fill: $grey-3
-
-  & > p
-    margin: 0
+@import '../../theme/theme.styl';
+
+.itemWrapper
+  line-height: 21px
+  margin-top: 6px
+  margin-bottom: 6px
+  color: $grey-3
+  font-family: $font-style-arial
+  font-size: 14px
+  word-break: break-word
+
+.iconWrapper
+  display: flex
+  align-items: center
+
+  & > svg
+    flex-shrink: 0
+    margin-right: 8px
+    fill: $grey-3
+
+  & > p
+    margin: 0

package/source/components/ContactInfo/ContactInfo.tsx

@@ -1,161 +1,161 @@
-import * as React from 'react';
-import { Col, Hidden, Row, Visible } from 'react-grid-system';
-import classnames from 'classnames';
-
-import styles from './ContactInfo.styl';
-
-import IconSVG from '../_common/IconSVG/IconSVG';
-import { TITLES } from './TemporaryTranslation';
-
-export interface IContactInfoProps {
-  t: (key: string) => string;
-
-  title?: number;
-  gender?: number;
-  street?: string;
-  number?: string;
-  streetAddition?: string;
-  city?: string;
-  zip?: string;
-  countryName?: string;
-  firstName?: string;
-  lastName?: string;
-  company?: string;
-  email?: string;
-
-  phoneMain?: string;
-  phoneMobile?: string;
-  fax?: string;
-
-  ustIdNr?: string;
-
-  website?: string;
-}
-
-interface IRender {
-  (props: IContactInfoProps): JSX.Element | null;
-}
-
-const colXS: number = 12;
-const col7: number = 7;
-const col5: number = 5;
-
-const renderName: IRender = ({ t, firstName, lastName, title }) => (
-  !firstName && !lastName ? null :
-    <p className={styles.itemWrapper}>
-      {title !== null && title !== undefined && `${t(`common:${TITLES[title].label}`)} `}<b>{firstName} {lastName}</b>
-    </p>
-);
-
-const renderEmail: IRender = ({ email }) => (
-  !email ? null :
-    <a className={classnames(styles.itemWrapper, styles.iconWrapper)} href={`mailto:${email}`}>
-      <IconSVG name={'whiteEnvelope'}/>
-      <p>{email}</p>
-    </a>
-);
-
-const renderAddress: IRender = ({ street, number, streetAddition, zip, city, countryName }) => {
-  const streetAddress = [street, number, streetAddition].filter(Boolean).join(' ');
-  return (
-    !street && !zip && !city && !countryName ? null :
-      <p className={styles.itemWrapper}>
-        {streetAddress}
-        {(zip && city) && (
-          <>{streetAddress && <br/>}{`${zip} ${city}`}</>
-        )}
-        {countryName && <><br/>{countryName}</>}
-      </p>
-  );
-};
-
-const renderPhones: IRender = ({ t, phoneMain, phoneMobile, fax }) => (
-  !phoneMain && !phoneMobile && !fax ? null :
-    <div className={classnames(styles.itemWrapper, styles.iconWrapper)}>
-      <IconSVG name={'grayPhoneIcon'}/>
-      <div>
-        {phoneMain && (
-          <div><b>{t('label.phoneMain')}:</b> {phoneMain}</div>
-        )}
-        {phoneMobile && (
-          <div><b>{t('label.phoneMobile')}:</b> {phoneMobile}</div>
-        )}
-        {fax && (
-          <div><b>{t('label.fax')}:</b> {phoneMobile}</div>
-        )}
-      </div>
-    </div>
-);
-
-const renderWebsite: IRender = ({ website }) => (
-  !website ? null :
-    <a className={classnames(styles.itemWrapper, styles.iconWrapper)} href={`//${website.replace(/^(http|https):\/\//, '')}`} target='_blank' rel='external'>
-      <IconSVG name={'internetIcon'}/>
-      <p>{website}</p>
-    </a>
-);
-
-const renderUstIdNr: IRender = ({ t, ustIdNr }) => (
-  !ustIdNr ? null :
-    <p className={styles.itemWrapper}>
-      <b>{t('label.ustIdNr')}:</b> {ustIdNr}
-    </p>
-);
-
-const renderCompany: IRender = ({ company }) => (
-  !company ? null :
-    <p className={styles.itemWrapper}>{company}</p>
-);
-
-const itemFromRenders = (renders: IRender [], props: IContactInfoProps): JSX.Element[] => {
-  return renders.map(render => render(props)).filter((col => col !== null));
-};
-
-const leftRenders: IRender [] = [renderName, renderAddress, renderCompany, renderUstIdNr];
-const rightRenders: IRender [] = [renderEmail, renderPhones, renderWebsite];
-
-const ContactInfo: React.FunctionComponent<IContactInfoProps> = (props: IContactInfoProps) => {
-  const leftItems: JSX.Element[] = itemFromRenders(leftRenders, props);
-  const rightItems: JSX.Element[] = itemFromRenders(rightRenders, props);
-
-  const rowsLength = Math.max(leftItems.length, rightItems.length);
-  const rows: JSX.Element [] = [];
-
-  for (let i = 0; i < rowsLength; i = i + 1) {
-    rows.push(
-      <Row key={i} justify='between'>
-        {leftItems[i] ? (
-          <>
-            <Col sm={col5}>
-              {leftItems[i]}
-            </Col>
-            <Col sm={col7}>
-              {rightItems[i]}
-            </Col>
-          </>
-        ) : (
-          <Col sm={col7} offset={{ sm: col5 }}>
-            {rightItems[i]}
-          </Col>
-        )}
-      </Row>
-    );
-  }
-
-  return <div>
-    <Visible xs>
-      <Row>
-        {leftItems.concat(rightItems).map((item, i) => (
-          <Col key={i} xs={colXS}>
-            {item}
-          </Col>
-        ))}
-      </Row>
-    </Visible>
-    <Hidden xs>
-      {rows}
-    </Hidden>
-  </div>;
-};
-
-export default ContactInfo;
+import * as React from 'react';
+import { Col, Hidden, Row, Visible } from 'react-grid-system';
+import classnames from 'classnames';
+
+import styles from './ContactInfo.styl';
+
+import IconSVG from '../_common/IconSVG/IconSVG';
+import { TITLES } from './TemporaryTranslation';
+
+export interface IContactInfoProps {
+  t: (key: string) => string;
+
+  title?: number;
+  gender?: number;
+  street?: string;
+  number?: string;
+  streetAddition?: string;
+  city?: string;
+  zip?: string;
+  countryName?: string;
+  firstName?: string;
+  lastName?: string;
+  company?: string;
+  email?: string;
+
+  phoneMain?: string;
+  phoneMobile?: string;
+  fax?: string;
+
+  ustIdNr?: string;
+
+  website?: string;
+}
+
+interface IRender {
+  (props: IContactInfoProps): JSX.Element | null;
+}
+
+const colXS: number = 12;
+const col7: number = 7;
+const col5: number = 5;
+
+const renderName: IRender = ({ t, firstName, lastName, title }) => (
+  !firstName && !lastName ? null :
+    <p className={styles.itemWrapper}>
+      {title !== null && title !== undefined && `${t(`common:${TITLES[title].label}`)} `}<b>{firstName} {lastName}</b>
+    </p>
+);
+
+const renderEmail: IRender = ({ email }) => (
+  !email ? null :
+    <a className={classnames(styles.itemWrapper, styles.iconWrapper)} href={`mailto:${email}`}>
+      <IconSVG name={'whiteEnvelope'}/>
+      <p>{email}</p>
+    </a>
+);
+
+const renderAddress: IRender = ({ street, number, streetAddition, zip, city, countryName }) => {
+  const streetAddress = [street, number, streetAddition].filter(Boolean).join(' ');
+  return (
+    !street && !zip && !city && !countryName ? null :
+      <p className={styles.itemWrapper}>
+        {streetAddress}
+        {(zip && city) && (
+          <>{streetAddress && <br/>}{`${zip} ${city}`}</>
+        )}
+        {countryName && <><br/>{countryName}</>}
+      </p>
+  );
+};
+
+const renderPhones: IRender = ({ t, phoneMain, phoneMobile, fax }) => (
+  !phoneMain && !phoneMobile && !fax ? null :
+    <div className={classnames(styles.itemWrapper, styles.iconWrapper)}>
+      <IconSVG name={'grayPhoneIcon'}/>
+      <div>
+        {phoneMain && (
+          <div><b>{t('label.phoneMain')}:</b> {phoneMain}</div>
+        )}
+        {phoneMobile && (
+          <div><b>{t('label.phoneMobile')}:</b> {phoneMobile}</div>
+        )}
+        {fax && (
+          <div><b>{t('label.fax')}:</b> {phoneMobile}</div>
+        )}
+      </div>
+    </div>
+);
+
+const renderWebsite: IRender = ({ website }) => (
+  !website ? null :
+    <a className={classnames(styles.itemWrapper, styles.iconWrapper)} href={`//${website.replace(/^(http|https):\/\//, '')}`} target='_blank' rel='external'>
+      <IconSVG name={'internetIcon'}/>
+      <p>{website}</p>
+    </a>
+);
+
+const renderUstIdNr: IRender = ({ t, ustIdNr }) => (
+  !ustIdNr ? null :
+    <p className={styles.itemWrapper}>
+      <b>{t('label.ustIdNr')}:</b> {ustIdNr}
+    </p>
+);
+
+const renderCompany: IRender = ({ company }) => (
+  !company ? null :
+    <p className={styles.itemWrapper}>{company}</p>
+);
+
+const itemFromRenders = (renders: IRender [], props: IContactInfoProps): JSX.Element[] => {
+  return renders.map(render => render(props)).filter((col => col !== null));
+};
+
+const leftRenders: IRender [] = [renderName, renderAddress, renderCompany, renderUstIdNr];
+const rightRenders: IRender [] = [renderEmail, renderPhones, renderWebsite];
+
+const ContactInfo: React.FunctionComponent<IContactInfoProps> = (props: IContactInfoProps) => {
+  const leftItems: JSX.Element[] = itemFromRenders(leftRenders, props);
+  const rightItems: JSX.Element[] = itemFromRenders(rightRenders, props);
+
+  const rowsLength = Math.max(leftItems.length, rightItems.length);
+  const rows: JSX.Element [] = [];
+
+  for (let i = 0; i < rowsLength; i = i + 1) {
+    rows.push(
+      <Row key={i} justify='between'>
+        {leftItems[i] ? (
+          <>
+            <Col sm={col5}>
+              {leftItems[i]}
+            </Col>
+            <Col sm={col7}>
+              {rightItems[i]}
+            </Col>
+          </>
+        ) : (
+          <Col sm={col7} offset={{ sm: col5 }}>
+            {rightItems[i]}
+          </Col>
+        )}
+      </Row>
+    );
+  }
+
+  return <div>
+    <Visible xs>
+      <Row>
+        {leftItems.concat(rightItems).map((item, i) => (
+          <Col key={i} xs={colXS}>
+            {item}
+          </Col>
+        ))}
+      </Row>
+    </Visible>
+    <Hidden xs>
+      {rows}
+    </Hidden>
+  </div>;
+};
+
+export default ContactInfo;

package/source/components/ContactInfo/TemporaryTranslation.ts

@@ -1,11 +1,11 @@
-interface ITitle {
-  value: number;
-  label: string;
-}
-
-export const TITLES: ITitle[] = [
-  { value: 0, label: 'TITLE_DOCTOR_LABEL' },
-  { value: 1, label: 'TITLE_PROF_LABEL' },
-  { value: 2, label: 'TITLE_MR_LABEL' },
-  { value: 3, label: 'TITLE_MRS_LABEL' }
-];
+interface ITitle {
+  value: number;
+  label: string;
+}
+
+export const TITLES: ITitle[] = [
+  { value: 0, label: 'TITLE_DOCTOR_LABEL' },
+  { value: 1, label: 'TITLE_PROF_LABEL' },
+  { value: 2, label: 'TITLE_MR_LABEL' },
+  { value: 3, label: 'TITLE_MRS_LABEL' }
+];

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

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