@bytebrand/fe-ui-core 4.2.72 → 4.2.74

package/common.ts

@@ -3,6 +3,7 @@ export { default as Accordion } from './source/components/_common/Accordion/Acco
 export { default as Button } from './source/components/_common/Button/Button';
 export { default as ButtonOld } from './source/components/_common/ButtonOld/Button';
 export { default as PSGroup } from './source/components/_common/PropertySelector/PSGroup';
+export { default as FormPSGroup } from './source/components/_common/PropertySelector/FormPSGroup';
 export { default as PropertySelector } from './source/components/_common/PropertySelector/PropertySelector';
 
 export { default as FormRadioGroup } from './source/components/_common/Radio/FormRadioGroup';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.72",
+  "version": "4.2.74",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/OfferDetailedSection/partials/PanelConfig.styl

@@ -19,6 +19,10 @@
       width: 1px;
       height: 100%
       background-color $grey-5f;
+ 
+  [class^='OfferCheckboxGroup__labelContent']
+    @media (min-width: 990px) and (max-width: 1073px)
+      max-width: 230px   
 
 .wrapConfigDetails
   box-sizing: border-box

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

@@ -73,9 +73,6 @@
 .labelContent
   flex: 1 1 auto
   color: $grey-3;
-  @media (min-width: 990px) and (max-width: 1112px)
-    max-width: 230px
-    padding-right: 10px !important;
     
 .icon
   display: block
@@ -120,4 +117,4 @@
   font-size: 12px;
 
 .hidePlus
-  display: inline-block
+  display: inline-block

package/source/components/OfferPanel/OfferPanel.styl

@@ -167,14 +167,13 @@
   [class*='MuiFormControlLabel-root']
     height: 20px
     min-height: 0
+    margin-left:0
   .labelText
     font-size: 12px;
     font-weight: normal;
 
   [class*='labelContent']
     font-size: 12px
-    +media-phone-up()
-      padding-right: 62px;
 
 
 .checkBoxGroup
@@ -190,3 +189,6 @@
     margin: 0
     justify-content: space-between
     width: 100%
+
+[class*='MuiIconButton-root']
+  padding:5px!important

package/source/components/_common/Checkbox/FormCheckbox.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
+import { observer } from 'mobx-react';
+
 import Checkbox from './Checkbox';
 import styles from './FormCheckbox.styl';
 
@@ -7,6 +9,8 @@ interface IFormCheckboxProps {
   className?: string;
   errorClassName?: string;
   label?: JSX.Element | string | null;
+
+  // mobx form field instance
   field: any;
   checkboxClassName?: string;
   labelClassName?: string;
@@ -14,70 +18,34 @@ interface IFormCheckboxProps {
   helperText?: string;
 }
 
-interface IFormCheckboxState {
-  field: {
-    name?: string;
-    value?: boolean;
-    checked?: boolean;
-    error?: boolean;
-    disabled?: boolean
-  }
-}
-
-class FormCheckbox extends React.Component<IFormCheckboxProps, IFormCheckboxState> {
-  constructor(props: IFormCheckboxProps) {
-    super(props);
-
-    this.state = {
-      field: {
-        value: this.props.field.value,
-        error: this.props.field.error,
-        checked: this.props.field.checked,
-        disabled: this.props.field.disabled,
-        name: this.props.field.name
-      }
-    };
-  }
+@observer
+class FormCheckbox extends React.Component<IFormCheckboxProps> {
   static defaultProps = {
     className: '',
     label: false
   };
 
-  handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean, value?: any) => {
-    const { name, disabled, onChange, rules } = this.props.field;
-    const customError = (rules.includes('accepted') && !checked);
-    this.setState(() => ({
-      field: {
-        value,
-        name,
-        disabled,
-        checked,
-        error: customError
-      }
-    }));
-    onChange(event, checked, value);
-  }
-
   render() {
-    const { label, className, checkboxClassName, labelClassName } = this.props;
-    const { name, value, checked, disabled, error } = this.state.field;
-    const customError = error || (this.props.field.error && !checked);
+    const { field, label, className, checkboxClassName, labelClassName, customError } = this.props;
+
+    // const customHasError = customError;
+    // const hasError = field.hasError;
+    const error = customError ? customError : field.error;
 
     const _props = {
-      value,
-      checked,
-      name,
-      disabled,
-      onChange: this.handleChange,
-      error: customError,
-      label,
+      ...field.bind(),
+      error, label,
       checkboxClassName,
       labelClassName
     };
 
+    // const errorClassNames = classnames(styles.errorText, errorClassName);
+
     return (
       <div className={classnames(styles.field, className)}>
         <Checkbox {..._props} />
+        {/* {hasError && error ? (<span className={errorClassNames}>{error}</span>) : false} */}
+        {/* {customHasError ? (<span className={errorClassNames}>{helperText}</span>) : false} */}
       </div>
     );
   }

package/source/components/_common/CheckboxMaterial/CheckboxMaterial.story.js

@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions';
 
 import { ROW_STYLES } from '../../../framework/constants';
 import CheckboxMaterial from './CheckboxMaterial';
+import FormCheckboxMaterial from './FormCheckboxMaterial';
 
 import styles from './CheckboxMaterial.story.styl';
 
@@ -123,4 +124,13 @@ const CheckboxWrap = () => {
 
 storiesOf('_Common_UI', module)
   .add('CheckboxMaterial', () => <CheckboxWrap />)
-
+  .add('FormCheckboxMaterial', () => (
+    <div>
+      <div style={ROW_STYLES}>
+        <FormCheckboxMaterial {...basePropsForm} />
+      </div>
+      <div style={ROW_STYLES}>
+        <FormCheckboxMaterial {...withErrorForm} />
+      </div>
+    </div>
+  ));

package/source/components/_common/CheckboxMaterial/FormCheckboxMaterial.styl

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

package/source/components/_common/CheckboxMaterial/FormCheckboxMaterial.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react';
+
+import CheckboxMaterial from './CheckboxMaterial';
+import styles from './FormCheckboxMaterial.styl';
+
+interface IFormCheckboxProps {
+  className?: string;
+  errorClassName?: string;
+  label?: JSX.Element | string | null;
+
+  // mobx form field instance
+  field: any;
+  checkboxClassName?: string;
+  labelClassName?: string;
+}
+
+@observer
+class FormCheckboxMaterial extends React.Component<IFormCheckboxProps> {
+  static defaultProps = {
+    className: '',
+    label: false
+  };
+
+  render() {
+    const { field, label, className, checkboxClassName, labelClassName, errorClassName } = this.props;
+
+    const hasError = field.hasError;
+    const error = field.error;
+
+    const _props = {
+      ...field.bind(),
+      error, label,
+      checkboxClassName,
+      labelClassName
+    };
+
+    const errorClassNames = classnames(styles.errorText, errorClassName);
+
+    return (
+      <div className={classnames(styles.field, className)}>
+        <CheckboxMaterial {..._props} />
+        {hasError && error ? (<span className={errorClassNames}>{error}</span>) : false}
+      </div>
+    );
+  }
+}
+
+export default FormCheckboxMaterial;

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

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

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

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

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

@@ -0,0 +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

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react';
+
+import PSGroup from './PSGroup';
+import styles from './FormPSGroup.styl';
+
+interface IFormRadioGroupProps {
+  children: any;
+  className?: string;
+  behavior?: string;
+
+  // mobx form field instance
+  field: any;
+
+  containerClassName?: string;
+  childClassName?: string;
+}
+
+@observer
+class FormPSGroup extends React.Component<IFormRadioGroupProps> {
+  static defaultProps = {
+    className: '',
+    label: false,
+    containerClassName: '',
+    childClassName: ''
+  };
+
+  render() {
+    const { field, className, behavior, containerClassName, childClassName } = this.props;
+
+    const hasError = field.hasError;
+    const error = field.error;
+
+    const _props = {
+      ...field.bind(),
+      behavior,
+      containerClassName,
+      childClassName,
+      error: hasError
+    };
+
+    return (
+      <div className={classnames(styles.field, className)}>
+        <PSGroup {..._props} >
+          {this.props.children}
+        </PSGroup>
+        {hasError && error ? (<span className={styles.errorText}>{error}</span>) : false}
+      </div>
+    );
+  }
+}
+
+export default FormPSGroup;