@bytebrand/fe-ui-core 4.8.26 → 4.8.28

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

@@ -1,210 +1,210 @@
-import React, { useState, useEffect } from 'react';
-import styles from './CheckboxMaterial.styl';
-import classnames from 'classnames';
-import IconSVG from '../IconSVG/IconSVG';
-
-import { Checkbox, FormControlLabel, Radio } from '@mui/material';
-
-export interface ICheckboxProps {
-  name?: string;
-  value?: any;
-  checked?: boolean;
-  disabled?: boolean;
-  label?: JSX.Element | string | null;
-  error?: boolean;
-
-  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any) => void;
-
-  containerClassName?: string;
-  checkboxClassName?: string;
-  labelClassName?: string;
-  tooltipDescription?: string;
-  tooltipPosX?: string;
-  aggregation?: number;
-  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
-  icon?: any;
-  checkedIcon?: any;
-  className?: string;
-  type?: string;
-  content?: string | JSX.Element;
-  radio?: boolean;
-  formControlClassName?: string;
-  contentType?: string;
-}
-
-const CheckboxMaterial = ({
-  checked,
-  value,
-  disabled,
-  onChange,
-  label,
-  aggregation,
-  labelPlacement,
-  className,
-  type,
-  content,
-  icon,
-  radio,
-  formControlClassName,
-  contentType,
-  error
- }: ICheckboxProps) => {
-  const [isChecked, setIsChecked] = useState(!!checked);
-
-  useEffect(
-    () => {
-      setIsChecked(!!checked);
-    },
-    [checked]
-  );
-
-  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checked } = event.target;
-
-    if (disabled) {
-      return false;
-    }
-    if (!!event) {
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-    }
-    setIsChecked(checked);
-    onChange(event, checked, value);
-  };
-
-  const contentInner = contentType === 'text' ? content.toString() : content;
-
-  const labelClassName = classnames(
-    styles.periodLabel,
-    { [styles.periodChecked]: checked }
-  );
-
-  const renderIcon = () => {
-    switch (type) {
-      case 'color':
-        return <div className={classnames(
-          styles.color,
-          `auto-de-color-${content}`,
-          { [styles.iconError]: error }
-        )}></div>;
-      case 'icon':
-        return <IconSVG customDimensions name={icon} className={classnames(styles.interiorIcon, { [styles.iconError]: error })} />;
-      case 'door':
-        return (
-          <div className={styles.doorsContainer}>
-            <div className={styles.door}>
-              <span className={styles.content}>{content}</span>
-            </div>
-          </div>
-        );
-      case 'text':
-        return (
-          <span className={classnames(styles.stickerTextContent, { [styles.iconError]: error })}>
-            <span className={classnames(styles.inner, styles.textContent)}>{contentInner}</span>
-          </span>
-        );
-      case 'sticker':
-        return (
-          <span className={classnames(styles.stickerContent, { [styles.iconError]: error })}>
-            <span className={classnames(styles.inner, styles.stickerIcon)}>{contentInner}</span>
-          </span>
-        );
-      case 'period':
-        return (
-          <div className={labelClassName} key={value}>
-            <span>{value}</span>
-          </div>
-        );
-      default:
-        return;
-    }
-  };
-
-  const renderCheckedIcon = () => {
-    switch (type) {
-      case 'color':
-        return <div className={classnames(styles.color, `auto-de-color-${content}`)}>
-            <IconSVG className={styles.checkBlueIcon} name='common_CheckBlue'/>
-          </div>;
-      case 'icon':
-        return (
-          <div className={styles.interiorCheckedIconWrapper}>
-            <IconSVG className={styles.interiorCheckedIcon} customDimensions name={icon} />
-            <IconSVG className={styles.interiorCheckedIconCheck} customDimensions name='common_CheckBlue' />
-          </div>
-        );
-      case 'door':
-        return (
-          <div className={styles.doorsContainer}>
-            <div className={classnames(styles.door, styles.selected)}>
-              <span className={classnames(styles.content, styles.selected)}>{content}</span>
-            </div>
-          </div>
-        );
-      case 'text':
-        return (
-          <span className={styles.stickerTextContent}>
-            {content ? <span className={classnames(styles.inner, styles.textContent)}>{contentInner}</span> : false}
-            <IconSVG name='common_CheckBlue' className={classnames(styles.checkBlueIcon)} />
-          </span>
-        );
-      case 'sticker':
-        return (
-          <span className={styles.stickerContent}>
-            {content ? <span className={classnames(styles.inner, styles.stickerIcon)}>{contentInner}</span> : false}
-            <IconSVG name='common_CheckBlue' className={classnames(styles.checkBlueIconSticker, styles.checkBlueIcon)} />
-          </span>
-        );
-
-      case 'period':
-        return (
-          <div className={labelClassName} key={value}>
-            <span>{value}</span>
-          </div>
-        );
-      default:
-        return;
-    }
-  };
-
-  const checkboxLabel = <span className={styles.checkboxLabel}>{label} {aggregation}</span>;
-
-  const checkboxProps = {
-    value,
-    className,
-    disabled,
-    error,
-    icon: renderIcon(),
-    checkedIcon: renderCheckedIcon(),
-    onChange: onChangeHandler,
-    checked: isChecked // fix offerDetailedSection withFinalInstallment checkbox bug
-  };
-
-  const radioProps = {
-    value,
-    error,
-    label,
-    disabled,
-    className,
-    icon: renderIcon(),
-    checkedIcon: renderCheckedIcon()
-  };
-
-  return (
-    <FormControlLabel
-      control={ radio
-        ? <Radio { ...radioProps } sx={{ color: error ? '#d32f2f;' : '#d7d7d7' }} />
-        : <Checkbox { ...checkboxProps } sx={{ color: error ? '#d32f2f;' : '#d7d7d7', '&.Mui-checked': { color: '#005CCB' } }} />
-      }
-      sx={{
-        fontSize: 14,
-        minHeight: 48
-      }}
-      label={checkboxLabel}
-      labelPlacement={labelPlacement}
-      className={formControlClassName}
-    />
-  );
-};
-
-export default CheckboxMaterial;
+import React, { useState, useEffect } from 'react';
+import styles from './CheckboxMaterial.styl';
+import classnames from 'classnames';
+import IconSVG from '../IconSVG/IconSVG';
+
+import { Checkbox, FormControlLabel, Radio } from '@mui/material';
+
+export interface ICheckboxProps {
+  name?: string;
+  value?: any;
+  checked?: boolean;
+  disabled?: boolean;
+  label?: JSX.Element | string | null;
+  error?: boolean;
+
+  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any) => void;
+
+  containerClassName?: string;
+  checkboxClassName?: string;
+  labelClassName?: string;
+  tooltipDescription?: string;
+  tooltipPosX?: string;
+  aggregation?: number;
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
+  icon?: any;
+  checkedIcon?: any;
+  className?: string;
+  type?: string;
+  content?: string | JSX.Element;
+  radio?: boolean;
+  formControlClassName?: string;
+  contentType?: string;
+}
+
+const CheckboxMaterial = ({
+  checked,
+  value,
+  disabled,
+  onChange,
+  label,
+  aggregation,
+  labelPlacement,
+  className,
+  type,
+  content,
+  icon,
+  radio,
+  formControlClassName,
+  contentType,
+  error
+ }: ICheckboxProps) => {
+  const [isChecked, setIsChecked] = useState(!!checked);
+
+  useEffect(
+    () => {
+      setIsChecked(!!checked);
+    },
+    [checked]
+  );
+
+  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { checked } = event.target;
+
+    if (disabled) {
+      return false;
+    }
+    if (!!event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+    }
+    setIsChecked(checked);
+    onChange(event, checked, value);
+  };
+
+  const contentInner = contentType === 'text' ? content.toString() : content;
+
+  const labelClassName = classnames(
+    styles.periodLabel,
+    { [styles.periodChecked]: checked }
+  );
+
+  const renderIcon = () => {
+    switch (type) {
+      case 'color':
+        return <div className={classnames(
+          styles.color,
+          `auto-de-color-${content}`,
+          { [styles.iconError]: error }
+        )}></div>;
+      case 'icon':
+        return <IconSVG customDimensions name={icon} className={classnames(styles.interiorIcon, { [styles.iconError]: error })} />;
+      case 'door':
+        return (
+          <div className={styles.doorsContainer}>
+            <div className={styles.door}>
+              <span className={styles.content}>{content}</span>
+            </div>
+          </div>
+        );
+      case 'text':
+        return (
+          <span className={classnames(styles.stickerTextContent, { [styles.iconError]: error })}>
+            <span className={classnames(styles.inner, styles.textContent)}>{contentInner}</span>
+          </span>
+        );
+      case 'sticker':
+        return (
+          <span className={classnames(styles.stickerContent, { [styles.iconError]: error })}>
+            <span className={classnames(styles.inner, styles.stickerIcon)}>{contentInner}</span>
+          </span>
+        );
+      case 'period':
+        return (
+          <div className={labelClassName} key={value}>
+            <span>{value}</span>
+          </div>
+        );
+      default:
+        return;
+    }
+  };
+
+  const renderCheckedIcon = () => {
+    switch (type) {
+      case 'color':
+        return <div className={classnames(styles.color, `auto-de-color-${content}`)}>
+            <IconSVG className={styles.checkBlueIcon} name='common_CheckBlue'/>
+          </div>;
+      case 'icon':
+        return (
+          <div className={styles.interiorCheckedIconWrapper}>
+            <IconSVG className={styles.interiorCheckedIcon} customDimensions name={icon} />
+            <IconSVG className={styles.interiorCheckedIconCheck} customDimensions name='common_CheckBlue' />
+          </div>
+        );
+      case 'door':
+        return (
+          <div className={styles.doorsContainer}>
+            <div className={classnames(styles.door, styles.selected)}>
+              <span className={classnames(styles.content, styles.selected)}>{content}</span>
+            </div>
+          </div>
+        );
+      case 'text':
+        return (
+          <span className={styles.stickerTextContent}>
+            {content ? <span className={classnames(styles.inner, styles.textContent)}>{contentInner}</span> : false}
+            <IconSVG name='common_CheckBlue' className={classnames(styles.checkBlueIcon)} />
+          </span>
+        );
+      case 'sticker':
+        return (
+          <span className={styles.stickerContent}>
+            {content ? <span className={classnames(styles.inner, styles.stickerIcon)}>{contentInner}</span> : false}
+            <IconSVG name='common_CheckBlue' className={classnames(styles.checkBlueIconSticker, styles.checkBlueIcon)} />
+          </span>
+        );
+
+      case 'period':
+        return (
+          <div className={labelClassName} key={value}>
+            <span>{value}</span>
+          </div>
+        );
+      default:
+        return;
+    }
+  };
+
+  const checkboxLabel = <span className={styles.checkboxLabel}>{label} {aggregation}</span>;
+
+  const checkboxProps = {
+    value,
+    className,
+    disabled,
+    error,
+    icon: renderIcon(),
+    checkedIcon: renderCheckedIcon(),
+    onChange: onChangeHandler,
+    checked: isChecked // fix offerDetailedSection withFinalInstallment checkbox bug
+  };
+
+  const radioProps = {
+    value,
+    error,
+    label,
+    disabled,
+    className,
+    icon: renderIcon(),
+    checkedIcon: renderCheckedIcon()
+  };
+
+  return (
+    <FormControlLabel
+      control={ radio
+        ? <Radio { ...radioProps } sx={{ color: error ? '#d32f2f;' : '#d7d7d7' }} />
+        : <Checkbox { ...checkboxProps } sx={{ color: error ? '#d32f2f;' : '#d7d7d7', '&.Mui-checked': { color: '#005CCB' } }} />
+      }
+      sx={{
+        fontSize: 14,
+        minHeight: 48
+      }}
+      label={checkboxLabel}
+      labelPlacement={labelPlacement}
+      className={formControlClassName}
+    />
+  );
+};
+
+export default CheckboxMaterial;

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

@@ -1,43 +1,43 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
-import { ChipExample } from '../../../framework/constants/Search';
-
-import Chip from './Chip';
-
-// Props related to the Chip stories
-const baseProps = {
-  chip: ChipExample,
-  onClick: action('chip click'),
-  onDelete: action('chip delete')
-};
-
-const longText = {
-  ...baseProps,
-  chip: { key: '111', value: 'Veeeeeeeeerrrrrrry looooooooong manufacturer name'}
-};
-
-const withoutContent = {
-  ...baseProps,
-  chip: { }
-};
-
-
-storiesOf('_Common_UI', module)
-  .add('Chip', () => (
-    <div style={{ ... CONTAINER_STYLES, background: '#BADA' }}>
-      <div style={COLUMN_STYLES}>
-        <div style={ROW_STYLES}>
-          <Chip {...baseProps} />
-        </div>
-        <div style={ROW_STYLES}>
-          <Chip {...longText} />
-        </div>
-        <div style={ROW_STYLES}>
-          <Chip {...withoutContent} />
-        </div>
-      </div>
-    </div>
-  ));
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
+import { ChipExample } from '../../../framework/constants/Search';
+
+import Chip from './Chip';
+
+// Props related to the Chip stories
+const baseProps = {
+  chip: ChipExample,
+  onClick: action('chip click'),
+  onDelete: action('chip delete')
+};
+
+const longText = {
+  ...baseProps,
+  chip: { key: '111', value: 'Veeeeeeeeerrrrrrry looooooooong manufacturer name'}
+};
+
+const withoutContent = {
+  ...baseProps,
+  chip: { }
+};
+
+
+storiesOf('_Common_UI', module)
+  .add('Chip', () => (
+    <div style={{ ... CONTAINER_STYLES, background: '#BADA' }}>
+      <div style={COLUMN_STYLES}>
+        <div style={ROW_STYLES}>
+          <Chip {...baseProps} />
+        </div>
+        <div style={ROW_STYLES}>
+          <Chip {...longText} />
+        </div>
+        <div style={ROW_STYLES}>
+          <Chip {...withoutContent} />
+        </div>
+      </div>
+    </div>
+  ));

package/source/components/_common/Chip/Chip.styl

@@ -1,70 +1,70 @@
-@import '../../../theme/theme.styl'
-@import '../../../theme/mixins.styl'
-
-.chip
-  display: inline-flex
-  align-items: stretch
-  height: 23px
-  border: 1px solid $grey-e
-  background-color: white
-  box-sizing: border-box
-  border-radius: 3px
-  cursor: pointer
-  font-family: $font-style-arial
-  transition: background-color 0.2s ease-in-out
-
-  +media-phone-up()
-    height: 26px
-
-  +media-tablet-up()
-    height: 30px
-
-.chip:hover,
-.chip:active
-  background-color: darken(white, 10%)
-
-.text
-  flex: 1 0 auto
-  padding-left: 10px
-  white-space: nowrap
-  user-select: none
-  min-width: 30px
-  font-size: 10px
-  line-height: 21px
-
-  +media-phone-up()
-    font-size: 11px
-    line-height: 25px
-
-  +media-tablet-up()
-    line-height: 28px
-    font-size: 14px
-    min-width: 50px
-
-.delete
-  position: relative
-  box-sizing: border-box
-
-.delete:hover,
-.delete:active
-  +media-tablet-up()
-    background-color: darken(white, 12%)
-
-.icon
-  width: 6px !important
-  height: 6px !important
-  display: block
-  margin: 8px
-  fill: white
-
-  +media-phone-up()
-    width: 7px !important
-    height: 7px !important
-    margin: 8px 10px
-
-  +media-tablet-up()
-    width: 10px !important
-    height: 10px !important
-
-  +media-tablet-landscape-up()
+@import '../../../theme/theme.styl'
+@import '../../../theme/mixins.styl'
+
+.chip
+  display: inline-flex
+  align-items: stretch
+  height: 23px
+  border: 1px solid $grey-e
+  background-color: white
+  box-sizing: border-box
+  border-radius: 3px
+  cursor: pointer
+  font-family: $font-style-arial
+  transition: background-color 0.2s ease-in-out
+
+  +media-phone-up()
+    height: 26px
+
+  +media-tablet-up()
+    height: 30px
+
+.chip:hover,
+.chip:active
+  background-color: darken(white, 10%)
+
+.text
+  flex: 1 0 auto
+  padding-left: 10px
+  white-space: nowrap
+  user-select: none
+  min-width: 30px
+  font-size: 10px
+  line-height: 21px
+
+  +media-phone-up()
+    font-size: 11px
+    line-height: 25px
+
+  +media-tablet-up()
+    line-height: 28px
+    font-size: 14px
+    min-width: 50px
+
+.delete
+  position: relative
+  box-sizing: border-box
+
+.delete:hover,
+.delete:active
+  +media-tablet-up()
+    background-color: darken(white, 12%)
+
+.icon
+  width: 6px !important
+  height: 6px !important
+  display: block
+  margin: 8px
+  fill: white
+
+  +media-phone-up()
+    width: 7px !important
+    height: 7px !important
+    margin: 8px 10px
+
+  +media-tablet-up()
+    width: 10px !important
+    height: 10px !important
+
+  +media-tablet-landscape-up()
     fill: $primary