@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/ButtonOld/Button.styl

@@ -0,0 +1,65 @@
+@import '../legacy-theme/theme.styl';
+
+.button
+  position: relative
+  display: inline-block
+  margin: 0
+
+  background-color: $primary
+  font-family: 'Arial', sans-serif
+
+  min-height: 28px
+  min-width: 140px
+
+  line-height: 26px
+  font-size: 14px
+  padding: 0 10px
+
+  color: white
+  cursor: pointer
+  box-sizing: border-box
+  text-decoration: none
+  border: 1px solid transparent
+  border-radius: 3px
+  transition: all 0.2s ease-in-out
+  outline: none
+  user-select: none
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis
+
+.button:hover:not(:disabled)
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5)
+
+.button:disabled
+  cursor: not-allowed
+  background-color: $grey-c
+
+.primary
+  composes: button
+  background-color: $primary
+
+.secondary
+  composes: button
+  background-color: $grey-9
+
+.danger
+  composes: button
+  background-color red
+
+.ghost
+  composes: button
+  background-color: transparent
+  border: 1px solid $primary
+  color: $primary
+
+.loader
+  position: absolute
+  left: 50%
+  top: 50%
+
+  // because of size of the 'small' loader
+  // we need to setup such negative margins
+  margin-left: -12.5px
+  margin-top: -12.5px
+

package/compat/ButtonOld/Button.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import classnames from 'classnames';
+
+import styles from './Button.styl';
+import Loader from '../Loader/Loader';
+
+export type ButtonType = 'primary' | 'secondary' | 'danger' | 'ghost';
+export type ButtonHTMLType = 'button' | 'reset' | 'submit';
+
+export interface IButtonProps {
+  className?: string;
+  children?: any;
+
+  disabled?: boolean;
+  loading?: boolean;
+
+  type?: ButtonType;
+  buttonType?: ButtonHTMLType;
+
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+class Button extends React.Component<IButtonProps, {}> {
+  public static defaultProps = {
+    className: '',
+
+    disabled: false,
+    loading: false,
+
+    type: 'primary',
+    buttonType: 'button',
+
+    onClick: () => { },
+
+    onMouseEnter: () => { },
+    onMouseLeave: () => { }
+  };
+
+  onClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+
+    this.props.onClick(event);
+  };
+
+  onMouseEnter = (event: React.MouseEvent<HTMLButtonElement>) => {
+    this.props.onMouseEnter(event);
+  };
+
+  onMouseLeave = (event: React.MouseEvent<HTMLButtonElement>) => {
+    this.props.onMouseLeave(event);
+  };
+
+  renderLoader = () => {
+    return <Loader className={styles.loader} size='small' />;
+  };
+
+  render() {
+    const { className, buttonType, type, loading, disabled, children } = this.props;
+    const classNames = classnames(
+      styles[type],
+      { [styles.loading]: loading },
+      className
+    );
+
+    const props = {
+      className: classNames,
+      disabled: disabled || loading,
+      type: buttonType,
+
+      onClick: this.onClick,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave
+    };
+
+    return (
+      <button {...props}>{loading ? this.renderLoader() : children}</button>
+    );
+  }
+}
+
+export default Button;

package/compat/Checkbox/Checkbox.styl

@@ -0,0 +1,120 @@
+@import '../legacy-theme/mixins.styl'
+
+.container
+  position: relative
+  display: inline-block
+  vertical-align: middle
+  outline: none !important
+
+.wrapInput
+  display flex;
+
+.wrapInput.reversed
+  order: 2;
+  .checkbox
+    margin-left: 5px;
+    margin-right: 0;
+
+.container:focus
+  outline: 2px auto lighten($primary, 80%)
+  outline-offset: 2px
+
+.container.checked
+  .checkbox
+    border-color: $primary
+
+.container.disabled
+  .checkbox, .label
+    cursor: not-allowed
+
+  .label
+    color: lighten(black, 40%)
+
+  .checkbox
+    background-color: $grey-e
+    border-color: $grey-d !important
+
+.container.error
+  .checkbox
+    border-color: $darkRed !important
+
+.checkbox
+  background-color: white
+  flex-shrink: 0
+  width: 20px
+  height: 20px
+
+  border-width: 1px
+  border-style: solid
+  border-color: $grey-d
+  border-radius: 3px
+  vertical-align: middle
+
+  box-sizing: border-box
+  cursor: pointer
+  transition: border 0.2s ease-in-out
+
+.checkbox:hover,
+.container:hover .checkbox
+  border-color: $primary
+
+.checkbox.withLabel
+  margin-right: 10px
+
+.label
+  display: flex
+  flex-direction: row
+  align-items: center
+  position: relative
+  font-size: 14px
+  cursor: pointer
+
+.labelContent
+  flex: 1 1 auto
+  color: $grey-3;
+
+.icon
+  display: block
+  width: 18px
+  height: 18px
+  padding: 3px
+  box-sizing: border-box
+
+.checkBlueIcon
+  display: block
+  width: 18px !important
+  height: auto
+  padding: 3px
+  box-sizing: border-box
+  fill: $primary
+
+/* styles for the hidden input */
+.hiddenInput
+  position: absolute
+  left: 0
+  right: 0
+  display: inline-block
+  width: 0
+  height: 0
+  visibility: hidden
+  opacity: 0
+  margin: 0
+  padding: 0
+
+.tooltipCheckbox
+  display inline-flex
+  margin-left: 3px;
+
+  svg
+    max-width: inherit;
+    max-height: inherit;
+    width: inherit !important
+
+.checkboxPrice
+  align-self: center;
+  color: rgba(#000000, .63);
+  font-size: 12px;
+  line-height:12px;
+
+.hidePlus
+  display: inline-block

package/compat/Checkbox/Checkbox.tsx

@@ -0,0 +1,151 @@
+import React, { ReactNode } from 'react';
+import styles from './Checkbox.styl';
+import classnames from 'classnames';
+import IconSVG from '../../iconsvg/IconSVG';
+import Tooltip from '../Tooltip/Tooltip';
+import FormattedNumber from '../FormattedNumber/FormattedNumber';
+
+export interface ICheckboxProps {
+  // Native checkbox props
+  name?: string;
+  value?: any;
+  checked?: boolean;
+  disabled?: boolean;
+  reversed?: boolean;
+  isAboAccordionExpanded0?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean, value?: any) => void;
+  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+
+  // Custom checkbox props
+  containerClassName?: string;
+  checkboxClassName?: string;
+  labelClassName?: string;
+  tooltipDescription?: string;
+  checkboxPriceValue: any;
+  tooltipPosX?: string;
+  error?: boolean;
+  label?: JSX.Element | string | null | ReactNode;
+}
+
+class Checkbox extends React.Component<ICheckboxProps, {}> {
+  static defaultProps = {
+    name: '',
+    value: '',
+    checked: false,
+    disabled: false,
+    reversed: false,
+
+    onChange: () => { },
+    onBlur: () => { },
+    onFocus: () => { },
+
+    containerClassName: '',
+    checkboxClassName: '',
+    labelClassName: '',
+    tooltipDescription: '',
+    checkboxPriceValue: '',
+    tooltipPosX: '',
+
+    error: false,
+    label: false
+  };
+
+  input: HTMLInputElement = null;
+
+  setInputRef = (ref: HTMLInputElement) => {
+    this.input = ref;
+  };
+
+  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { disabled, value } = this.props;
+    const { checked } = event.target;
+
+    if (disabled) {
+      return false;
+    }
+    if (!!event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+    }
+
+    this.props.onChange(event, checked, value);
+  };
+
+  onKeyPress = (event: any) => {
+    const { disabled } = this.props;
+    const checked = !this.input.checked;
+    const value = this.input.value;
+
+    if (disabled) {
+      return false;
+    }
+
+    this.props.onChange(event, checked, value);
+  };
+
+  render() {
+    const {
+      containerClassName, checkboxClassName, labelClassName, reversed,
+      checked, disabled, value, error, label, tooltipDescription, checkboxPriceValue, tooltipPosX, isAboAccordionExpanded0 = true
+    } = this.props;
+
+    const containerClasses = classnames(
+      styles.container,
+      containerClassName,
+      { [styles.checked]: checked },
+      { [styles.error]: error },
+      { [styles.disabled]: disabled }
+    );
+
+    const labelClasses = classnames(
+      styles.label,
+      labelClassName
+    );
+
+    const checkboxClasses = classnames(
+      styles.checkbox,
+      checkboxClassName,
+      { [styles.withLabel]: !!label }
+    );
+
+    const wrapInputClasses = classnames(
+      styles.wrapInput,
+      { [styles.reversed]: reversed }
+    );
+
+    return (
+      <div className={containerClasses} tabIndex={1} onFocus={this.props.onFocus} onBlur={this.props.onBlur} onKeyPress={this.onKeyPress}>
+        <label className={labelClasses}>
+          <div className={wrapInputClasses}>
+            {/* Visual representation of the checkbox */}
+            {/* HidePlus class for OrderOverview component */}
+            {checkboxPriceValue && <span className={styles.checkboxPrice}><span className={styles.hidePlus}>+</span><FormattedNumber numbersAfterDot={0} value={checkboxPriceValue} /> €</span>}
+            {/* Hidden input for SEO and HTML semantics */}
+            <input
+              className={styles.hiddenInput}
+              type='checkbox'
+              checked={checked}
+              value={value}
+              disabled={disabled}
+              tabIndex={-1}
+              onChange={this.onChange}
+              ref={this.setInputRef}
+            />
+
+            {isAboAccordionExpanded0 && <span className={checkboxClasses}>{checked ? <IconSVG name='common_CheckBlue' className={styles.checkBlueIcon} /> : false}</span>}
+
+          </div>
+          {!!label ? (
+            <span className={styles.labelContent}>
+              {label}
+              {tooltipDescription && <Tooltip description={tooltipDescription} positionY={'top'} positionX={tooltipPosX} tooltipClassName={styles.tooltipCheckbox} iconName='InfoTransparent' />}
+            </span>
+          ) : false}
+        </label>
+      </div>
+    );
+  }
+}
+
+export default Checkbox;

package/compat/Checkbox/FormCheckbox.styl

@@ -0,0 +1,22 @@
+@import '../legacy-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/compat/Checkbox/FormCheckbox.tsx

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