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

package/compat/Checkbox/FormCheckbox.tsx

@@ -1,86 +1,86 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Checkbox from './Checkbox';
-import styles from './FormCheckbox.styl';
-
-interface IFormCheckboxProps {
-  className?: string;
-  errorClassName?: string;
-  label?: JSX.Element | string | null;
-  field: any;
-  checkboxClassName?: string;
-  labelClassName?: string;
-  customError?: boolean;
-  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
-      }
-    };
-  }
-  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 _props = {
-      value,
-      checked,
-      name,
-      disabled,
-      label,
-      checkboxClassName,
-      labelClassName,
-      onChange: this.handleChange,
-      error: customError
-    };
-
-    return (
-      <div className={classnames(styles.field, className)}>
-        <Checkbox {..._props} />
-      </div>
-    );
-  }
-}
-
-export default FormCheckbox;
+import * as React from 'react';
+import classnames from 'classnames';
+import Checkbox from './Checkbox';
+import styles from './FormCheckbox.styl';
+
+interface IFormCheckboxProps {
+  className?: string;
+  errorClassName?: string;
+  label?: JSX.Element | string | null;
+  field: any;
+  checkboxClassName?: string;
+  labelClassName?: string;
+  customError?: boolean;
+  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
+      }
+    };
+  }
+  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 _props = {
+      value,
+      checked,
+      name,
+      disabled,
+      label,
+      checkboxClassName,
+      labelClassName,
+      onChange: this.handleChange,
+      error: customError
+    };
+
+    return (
+      <div className={classnames(styles.field, className)}>
+        <Checkbox {..._props} />
+      </div>
+    );
+  }
+}
+
+export default FormCheckbox;

package/compat/Co2Widget/CO2Efficiency.styl

@@ -1,219 +1,219 @@
-@import '../legacy-theme/mixins.styl'
-
-.co2Efficiency
-  font-family: $font-style-arial
-  position: relative
-  width 132px
-  display flex
-  flex-direction column
-  align-items: flex-start
-  margin: 10px 0
-  margin-right: 20px
-  box-sizing: border-box
-
-  +media-phone-only()
-    width: auto
-
-.classContainer
-  position: relative
-  width 100%
-  height 14px
-
-.classContainer:not(:last-child)
-  margin-bottom: 3px
-
-.class
-  position: relative
-  display: block
-  height 14px
-  color white
-  font-size 7px
-  line-height 10px
-  padding-left 4px
-  text-transform uppercase
-  box-sizing: border-box
-  background-color: $grey-trans
-.class::after
-  position: absolute
-  right: -5px
-  top: 0
-  content ''
-  width 0
-  height 0
-  border-style solid
-  border-width 8px 0 5px 5px
-  border-color transparent
-
-.title
-  font-size: 15px
-  font-weight: 700
-  color: #000000DE
-
-.subTitle
-  font-size: 12px
-  margin: 5px 0 24px
-  font-weight: 400
-  color: #000000DE
-
-.divider
-  position: absolute
-  width: 1px
-  background-color: black
-  top: 0
-  left: 161px
-  height: 127px
-
-.activeClass
-  @extends .class
-  position: absolute
-  top: 0
-  right -20px
-  padding 0 5px
-  background-color $grey-3
-  display: flex
-  align-items: center
-.activeClass::before
-  content ''
-  position absolute
-  top 0
-  left -5px
-  width 0
-  height 0
-  border-style solid
-  border-width 7px 5px 6px 0
-  border-color transparent $grey-3 transparent transparent
-
-.secondActiveClass
-  @extends .class
-  position: absolute
-  top: 0
-  right -60px
-  padding 0 5px
-  background-color $grey-3
-  display: flex
-  align-items: center
-.secondActiveClass::before
-  content ''
-  position absolute
-  top 0
-  left -5px
-  width 0
-  height 0
-  border-style solid
-  border-width 7px 5px 6px 0
-  border-color transparent $grey-3 transparent transparent
-
-.levelsContainer
-  position relative
-
-.container
-  position relative
-
-.levelTitle
-  top: -21px;
-  left: 78px;
-  position: absolute;
-  width: 74px;
-  font-size: 9px;
-  text-align: right;
-
-.wltpLevelTitle
-  width: 80px;
-  top: -21px
-  left: 172px
-  position: absolute
-  font-size: 9px
-
-.wltpLevelsContainer
-  padding: 13.5px 7.5px
-  border-top: 1px solid #e8e8e8;
-
-:global
-  .auto_de_selector_energyEfficiencyClass_appp
-    background-color: #1D9453
-  .auto_de_selector_energyEfficiencyClass_appp::after
-    border-left-color: #1D9453
-
-  .auto_de_selector_energyEfficiencyClass_app
-    background-color: #24A728
-  .auto_de_selector_energyEfficiencyClass_app::after
-    border-left-color: #24A728
-
-  .auto_de_selector_energyEfficiencyClass_ap
-    background-color: #ACC535
-  .auto_de_selector_energyEfficiencyClass_ap::after
-    border-left-color: #ACC535
-
-  .auto_de_selector_energyEfficiencyClass_a
-    background-color: #FFFB67
-  .auto_de_selector_energyEfficiencyClass_a::after
-    border-left-color: #FFFB67
-
-  .auto_de_selector_energyEfficiencyClass_b
-    background-color: #FECA59
-  .auto_de_selector_energyEfficiencyClass_b::after
-    border-left-color: #FECA59
-
-  .auto_de_selector_energyEfficiencyClass_c
-    background-color: #FD7D2C
-  .auto_de_selector_energyEfficiencyClass_c::after
-    border-left-color: #FD7D2C
-
-  .auto_de_selector_energyEfficiencyClass_d
-    background-color: #FB1520
-  .auto_de_selector_energyEfficiencyClass_d::after
-    border-left-color: #FB1520
-
-  .auto_de_selector_energyEfficiencyClass_e
-    background-color: #DE111B
-  .auto_de_selector_energyEfficiencyClass_e::after
-    border-left-color: #DE111B
-
-  .auto_de_selector_energyEfficiencyClass_f
-    background-color: #C60E16
-  .auto_de_selector_energyEfficiencyClass_f::after
-    border-left-color: #C60E16
-
-  .auto_de_selector_energyEfficiencyClass_g
-    background-color: #AC0A13
-  .auto_de_selector_energyEfficiencyClass_g::after
-    border-left-color: #AC0A13
-
-
-
-
-:global
-  .auto_de_selector_energyEfficiencyClass_a_wltp
-    background-color: #4AA35A
-  .auto_de_selector_energyEfficiencyClass_a_wltp::after
-    border-left-color: #4AA35A
-
-  .auto_de_selector_energyEfficiencyClass_b_wltp
-    background-color: #6EBB4D
-  .auto_de_selector_energyEfficiencyClass_b_wltp::after
-    border-left-color: #6EBB4D
-
-  .auto_de_selector_energyEfficiencyClass_c_wltp
-    background-color: #BDDB4A
-  .auto_de_selector_energyEfficiencyClass_c_wltp::after
-    border-left-color: #BDDB4A
-
-  .auto_de_selector_energyEfficiencyClass_d_wltp
-    background-color: #FBF151
-  .auto_de_selector_energyEfficiencyClass_d_wltp::after
-    border-left-color: #FBF151
-
-  .auto_de_selector_energyEfficiencyClass_e_wltp
-    background-color: #EFB741
-  .auto_de_selector_energyEfficiencyClass_e_wltp::after
-    border-left-color: #EFB741
-
-  .auto_de_selector_energyEfficiencyClass_f_wltp
-    background-color: #E26733
-  .auto_de_selector_energyEfficiencyClass_f_wltp::after
-    border-left-color: #E26733
-
-  .auto_de_selector_energyEfficiencyClass_g_wltp
-    background-color: #DB3733
-  .auto_de_selector_energyEfficiencyClass_g_wltp::after
-    border-left-color: #DB3733
+@import '../legacy-theme/mixins.styl'
+
+.co2Efficiency
+  font-family: $font-style-arial
+  position: relative
+  width 132px
+  display flex
+  flex-direction column
+  align-items: flex-start
+  margin: 10px 0
+  margin-right: 20px
+  box-sizing: border-box
+
+  +media-phone-only()
+    width: auto
+
+.classContainer
+  position: relative
+  width 100%
+  height 14px
+
+.classContainer:not(:last-child)
+  margin-bottom: 3px
+
+.class
+  position: relative
+  display: block
+  height 14px
+  color white
+  font-size 7px
+  line-height 10px
+  padding-left 4px
+  text-transform uppercase
+  box-sizing: border-box
+  background-color: $grey-trans
+.class::after
+  position: absolute
+  right: -5px
+  top: 0
+  content ''
+  width 0
+  height 0
+  border-style solid
+  border-width 8px 0 5px 5px
+  border-color transparent
+
+.title
+  font-size: 15px
+  font-weight: 700
+  color: #000000DE
+
+.subTitle
+  font-size: 12px
+  margin: 5px 0 24px
+  font-weight: 400
+  color: #000000DE
+
+.divider
+  position: absolute
+  width: 1px
+  background-color: black
+  top: 0
+  left: 161px
+  height: 127px
+
+.activeClass
+  @extends .class
+  position: absolute
+  top: 0
+  right -20px
+  padding 0 5px
+  background-color $grey-3
+  display: flex
+  align-items: center
+.activeClass::before
+  content ''
+  position absolute
+  top 0
+  left -5px
+  width 0
+  height 0
+  border-style solid
+  border-width 7px 5px 6px 0
+  border-color transparent $grey-3 transparent transparent
+
+.secondActiveClass
+  @extends .class
+  position: absolute
+  top: 0
+  right -60px
+  padding 0 5px
+  background-color $grey-3
+  display: flex
+  align-items: center
+.secondActiveClass::before
+  content ''
+  position absolute
+  top 0
+  left -5px
+  width 0
+  height 0
+  border-style solid
+  border-width 7px 5px 6px 0
+  border-color transparent $grey-3 transparent transparent
+
+.levelsContainer
+  position relative
+
+.container
+  position relative
+
+.levelTitle
+  top: -21px;
+  left: 78px;
+  position: absolute;
+  width: 74px;
+  font-size: 9px;
+  text-align: right;
+
+.wltpLevelTitle
+  width: 80px;
+  top: -21px
+  left: 172px
+  position: absolute
+  font-size: 9px
+
+.wltpLevelsContainer
+  padding: 13.5px 7.5px
+  border-top: 1px solid #e8e8e8;
+
+:global
+  .auto_de_selector_energyEfficiencyClass_appp
+    background-color: #1D9453
+  .auto_de_selector_energyEfficiencyClass_appp::after
+    border-left-color: #1D9453
+
+  .auto_de_selector_energyEfficiencyClass_app
+    background-color: #24A728
+  .auto_de_selector_energyEfficiencyClass_app::after
+    border-left-color: #24A728
+
+  .auto_de_selector_energyEfficiencyClass_ap
+    background-color: #ACC535
+  .auto_de_selector_energyEfficiencyClass_ap::after
+    border-left-color: #ACC535
+
+  .auto_de_selector_energyEfficiencyClass_a
+    background-color: #FFFB67
+  .auto_de_selector_energyEfficiencyClass_a::after
+    border-left-color: #FFFB67
+
+  .auto_de_selector_energyEfficiencyClass_b
+    background-color: #FECA59
+  .auto_de_selector_energyEfficiencyClass_b::after
+    border-left-color: #FECA59
+
+  .auto_de_selector_energyEfficiencyClass_c
+    background-color: #FD7D2C
+  .auto_de_selector_energyEfficiencyClass_c::after
+    border-left-color: #FD7D2C
+
+  .auto_de_selector_energyEfficiencyClass_d
+    background-color: #FB1520
+  .auto_de_selector_energyEfficiencyClass_d::after
+    border-left-color: #FB1520
+
+  .auto_de_selector_energyEfficiencyClass_e
+    background-color: #DE111B
+  .auto_de_selector_energyEfficiencyClass_e::after
+    border-left-color: #DE111B
+
+  .auto_de_selector_energyEfficiencyClass_f
+    background-color: #C60E16
+  .auto_de_selector_energyEfficiencyClass_f::after
+    border-left-color: #C60E16
+
+  .auto_de_selector_energyEfficiencyClass_g
+    background-color: #AC0A13
+  .auto_de_selector_energyEfficiencyClass_g::after
+    border-left-color: #AC0A13
+
+
+
+
+:global
+  .auto_de_selector_energyEfficiencyClass_a_wltp
+    background-color: #4AA35A
+  .auto_de_selector_energyEfficiencyClass_a_wltp::after
+    border-left-color: #4AA35A
+
+  .auto_de_selector_energyEfficiencyClass_b_wltp
+    background-color: #6EBB4D
+  .auto_de_selector_energyEfficiencyClass_b_wltp::after
+    border-left-color: #6EBB4D
+
+  .auto_de_selector_energyEfficiencyClass_c_wltp
+    background-color: #BDDB4A
+  .auto_de_selector_energyEfficiencyClass_c_wltp::after
+    border-left-color: #BDDB4A
+
+  .auto_de_selector_energyEfficiencyClass_d_wltp
+    background-color: #FBF151
+  .auto_de_selector_energyEfficiencyClass_d_wltp::after
+    border-left-color: #FBF151
+
+  .auto_de_selector_energyEfficiencyClass_e_wltp
+    background-color: #EFB741
+  .auto_de_selector_energyEfficiencyClass_e_wltp::after
+    border-left-color: #EFB741
+
+  .auto_de_selector_energyEfficiencyClass_f_wltp
+    background-color: #E26733
+  .auto_de_selector_energyEfficiencyClass_f_wltp::after
+    border-left-color: #E26733
+
+  .auto_de_selector_energyEfficiencyClass_g_wltp
+    background-color: #DB3733
+  .auto_de_selector_energyEfficiencyClass_g_wltp::after
+    border-left-color: #DB3733