@bytebrand/fe-ui-core 4.8.26 → 4.8.27

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

@@ -1,36 +1,36 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import Accordion from './Accordion';
-
-const Label = ({ opened }) => (
-  <div style={{ padding: 10, borderBottom: '1px solid lightgray' }}>
-    {opened ? '-' : '+'} Some label here.
-  </div>
-);
-
-const Content = ({ opened }) => (
-  <div style={{ padding: 10 }}>
-    Wow some expandable content.
-  </div>
-);
-
-const item = {
-  content: <Content />,
-  title: <Label />
-};
-
-const props = {
-  // toggleMany: true,
-  defaultOpened: 0,
-  items: [item, item, item],
-  accordionName: 'storybookAccordion',
-  onPanelFocus: (panelKey) => action(`onPanelFocus ${panelKey}`),
-  onToggle: action('state changed')
-};
-
-storiesOf('_Common_UI', module)
-.add('Accordion', () => (
-  <Accordion {...props} />
-));
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import Accordion from './Accordion';
+
+const Label = ({ opened }) => (
+  <div style={{ padding: 10, borderBottom: '1px solid lightgray' }}>
+    {opened ? '-' : '+'} Some label here.
+  </div>
+);
+
+const Content = ({ opened }) => (
+  <div style={{ padding: 10 }}>
+    Wow some expandable content.
+  </div>
+);
+
+const item = {
+  content: <Content />,
+  title: <Label />
+};
+
+const props = {
+  // toggleMany: true,
+  defaultOpened: 0,
+  items: [item, item, item],
+  accordionName: 'storybookAccordion',
+  onPanelFocus: (panelKey) => action(`onPanelFocus ${panelKey}`),
+  onToggle: action('state changed')
+};
+
+storiesOf('_Common_UI', module)
+.add('Accordion', () => (
+  <Accordion {...props} />
+));

package/source/components/_common/Accordion/Accordion.styl

@@ -1,2 +1,2 @@
-.container
-  position: relative
+.container
+  position: relative

package/source/components/_common/Accordion/Accordion.tsx

@@ -1,132 +1,132 @@
-import * as React from 'react';
-import classnames from 'classnames';
-
-import ExpandablePanel from '../ExpandablePanel/ExpandablePanel';
-import styles from './Accordion.styl';
-
-export interface IItem {
-  content: any;
-  title: any;
-}
-
-export interface IAccordionProps {
-  className?: string;
-  itemClassName?: string;
-
-  items: IItem[];
-
-  // If you need to open some item by default, pass item index
-  defaultOpened?: number;
-
-  // used in keys and ids
-  accordionName?: string;
-
-  // This flag switches accordion behaviour
-  // from toggle one to toggle many. (few items can be open at a time)
-  toggleMany?: boolean;
-
-  // Callback to do something on ExpandablePanel focus, exposes panelKey
-  // requires accordionName to be set
-  onPanelFocus?: (panelKey: string) => void;
-
-  // Callback for run something after changing the opened state
-  onToggle?: () => void;
-}
-
-export interface IAccordionState {
-  itemsOpened: number[];
-}
-
-class Accordion extends React.PureComponent<IAccordionProps, IAccordionState> {
-  constructor(props: IAccordionProps) {
-    super(props);
-
-    this.state = {
-      itemsOpened: props.defaultOpened !== undefined ? [props.defaultOpened] : []
-    };
-  }
-
-  static readonly defaultProps = {
-    toggleMany: false,
-    accordionName: '',
-    onToggle: () => {}
-  };
-
-  onItemToggle = (index: number) => (opened: boolean): void => {
-    const { toggleMany, onToggle } = this.props;
-    const { itemsOpened } = this.state;
-    let newItemsOpened: number[] = [...itemsOpened];
-
-    const itemIndexInArr: number = itemsOpened.indexOf(index);
-
-    if (toggleMany) {
-      // Toggle many strategy
-      if (opened) {
-
-        // add item to array
-        newItemsOpened.push(index);
-      } else {
-
-        // remove item from array
-        newItemsOpened.splice(itemIndexInArr, 1);
-      }
-    } else {
-      // Toggle one strategy
-      if (opened) {
-
-        // add one current item to array (replace previously opened)
-        newItemsOpened = [index];
-      } else {
-
-        // remove one current item from array (clear array)
-        newItemsOpened.length = 0;
-      }
-    }
-
-    this.setState(() => ({
-      itemsOpened: newItemsOpened
-    }), onToggle); // tslint:disable-line
-  };
-
-  onPanelFocus = (panelKey: string) => (): void => {
-    if (!panelKey) return;
-
-    if (this.props.onPanelFocus) {
-      this.props.onPanelFocus(panelKey);
-    }
-  }
-
-  renderItems = (): React.ReactNode => {
-    const { items, itemClassName, accordionName } = this.props;
-    return items.map((item: any, index: number) => {
-      const isItemOpened: boolean = this.state.itemsOpened.includes(index);
-      const panelKey: string = accordionName ? `${accordionName}-${index}` : `${index}`;
-
-      const props = {
-        id: panelKey,
-        key: panelKey,
-        onPanelFocus: this.onPanelFocus(panelKey),
-        className: itemClassName,
-        label: item.title,
-        isOpened: isItemOpened,
-        onToggle: this.onItemToggle(index)
-      };
-
-      return (
-        <ExpandablePanel {...props}>
-          {item.content}
-        </ExpandablePanel>
-      );
-    });
-  };
-
-  render() {
-    return (
-      <div className={classnames(styles.container, this.props.className)}>
-        {this.renderItems()}
-      </div>
-    );
-  }
-}
-
-export default Accordion;
+import * as React from 'react';
+import classnames from 'classnames';
+
+import ExpandablePanel from '../ExpandablePanel/ExpandablePanel';
+import styles from './Accordion.styl';
+
+export interface IItem {
+  content: any;
+  title: any;
+}
+
+export interface IAccordionProps {
+  className?: string;
+  itemClassName?: string;
+
+  items: IItem[];
+
+  // If you need to open some item by default, pass item index
+  defaultOpened?: number;
+
+  // used in keys and ids
+  accordionName?: string;
+
+  // This flag switches accordion behaviour
+  // from toggle one to toggle many. (few items can be open at a time)
+  toggleMany?: boolean;
+
+  // Callback to do something on ExpandablePanel focus, exposes panelKey
+  // requires accordionName to be set
+  onPanelFocus?: (panelKey: string) => void;
+
+  // Callback for run something after changing the opened state
+  onToggle?: () => void;
+}
+
+export interface IAccordionState {
+  itemsOpened: number[];
+}
+
+class Accordion extends React.PureComponent<IAccordionProps, IAccordionState> {
+  constructor(props: IAccordionProps) {
+    super(props);
+
+    this.state = {
+      itemsOpened: props.defaultOpened !== undefined ? [props.defaultOpened] : []
+    };
+  }
+
+  static readonly defaultProps = {
+    toggleMany: false,
+    accordionName: '',
+    onToggle: () => {}
+  };
+
+  onItemToggle = (index: number) => (opened: boolean): void => {
+    const { toggleMany, onToggle } = this.props;
+    const { itemsOpened } = this.state;
+    let newItemsOpened: number[] = [...itemsOpened];
+
+    const itemIndexInArr: number = itemsOpened.indexOf(index);
+
+    if (toggleMany) {
+      // Toggle many strategy
+      if (opened) {
+
+        // add item to array
+        newItemsOpened.push(index);
+      } else {
+
+        // remove item from array
+        newItemsOpened.splice(itemIndexInArr, 1);
+      }
+    } else {
+      // Toggle one strategy
+      if (opened) {
+
+        // add one current item to array (replace previously opened)
+        newItemsOpened = [index];
+      } else {
+
+        // remove one current item from array (clear array)
+        newItemsOpened.length = 0;
+      }
+    }
+
+    this.setState(() => ({
+      itemsOpened: newItemsOpened
+    }), onToggle); // tslint:disable-line
+  };
+
+  onPanelFocus = (panelKey: string) => (): void => {
+    if (!panelKey) return;
+
+    if (this.props.onPanelFocus) {
+      this.props.onPanelFocus(panelKey);
+    }
+  }
+
+  renderItems = (): React.ReactNode => {
+    const { items, itemClassName, accordionName } = this.props;
+    return items.map((item: any, index: number) => {
+      const isItemOpened: boolean = this.state.itemsOpened.includes(index);
+      const panelKey: string = accordionName ? `${accordionName}-${index}` : `${index}`;
+
+      const props = {
+        id: panelKey,
+        key: panelKey,
+        onPanelFocus: this.onPanelFocus(panelKey),
+        className: itemClassName,
+        label: item.title,
+        isOpened: isItemOpened,
+        onToggle: this.onItemToggle(index)
+      };
+
+      return (
+        <ExpandablePanel {...props}>
+          {item.content}
+        </ExpandablePanel>
+      );
+    });
+  };
+
+  render() {
+    return (
+      <div className={classnames(styles.container, this.props.className)}>
+        {this.renderItems()}
+      </div>
+    );
+  }
+}
+
+export default Accordion;

package/source/components/_common/Accordion/AccordionTitle/AccordionTitle.styl

@@ -1,50 +1,50 @@
-@import '../../../../theme/mixins.styl'
-
-.container
-  display: flex
-  justify-content: space-between
-  align-items: center
-  height: 44px
-  padding: 0 10px
-  border-bottom: 1px solid #e8e8e8
-  user-select: none
-
-.title
-  color: $skyBlue
-  font-weight: bold
-  font-size: 14px
-
-.icon
-  transition all 0.2s ease-in-out
-
-.icon.opened
-  transform: rotate(180deg)
-
-.container.small
-  height: 26px
-  line-height: 26px
-  padding: 0 3px 0
-
-  .title
-    color: $grey-1
-
-// .AccordionTitle
-//   font-size: 12px
-//   padding: 10px 0
-//   font-weight: bold
-//   border-top: 1px solid #efefef
-//   display: flex
-//   justify-content: space-between
-//   align-items: center
-//   +media-tablet-up()
-//     font-size: 13px
-
-// .icon
-//   transition: all 0.2s ease-in-out
-//   margin-left: 5px
-
-
-// .title
-//   color: $skyBlue
-//   font-weight: bold
+@import '../../../../theme/mixins.styl'
+
+.container
+  display: flex
+  justify-content: space-between
+  align-items: center
+  height: 44px
+  padding: 0 10px
+  border-bottom: 1px solid #e8e8e8
+  user-select: none
+
+.title
+  color: $skyBlue
+  font-weight: bold
+  font-size: 14px
+
+.icon
+  transition all 0.2s ease-in-out
+
+.icon.opened
+  transform: rotate(180deg)
+
+.container.small
+  height: 26px
+  line-height: 26px
+  padding: 0 3px 0
+
+  .title
+    color: $grey-1
+
+// .AccordionTitle
+//   font-size: 12px
+//   padding: 10px 0
+//   font-weight: bold
+//   border-top: 1px solid #efefef
+//   display: flex
+//   justify-content: space-between
+//   align-items: center
+//   +media-tablet-up()
+//     font-size: 13px
+
+// .icon
+//   transition: all 0.2s ease-in-out
+//   margin-left: 5px
+
+
+// .title
+//   color: $skyBlue
+//   font-weight: bold
 //   font-size: 14px

package/source/components/_common/Accordion/AccordionTitle/AccordionTitle.tsx

@@ -1,33 +1,33 @@
-import React from 'react';
-import classnames from 'classnames';
-import IconSVG from '../../IconSVG/IconSVG';
-import styles from './AccordionTitle.styl';
-
-interface IAccordionTitleProps {
-  title: string;
-  id?: string;
-  opened?: string;
-  iconName?: string;
-  small?: boolean;
-  onClick?: (event: React.SyntheticEvent) => void;
-}
-
-const AccordionTitle: React.FC<IAccordionTitleProps> = ({ title, opened, iconName, id, small = false, onClick = () => {} }) => {
-  const iconProps = {
-    customDimensions: true,
-    className: classnames(styles.icon, { [styles.opened]: opened === 'true' }),
-    // name: 'arrowSearchAccordionBlue',
-    name: iconName, // 'ArrowDownBlueIcon',
-    width: '12',
-    height: '12'
-  };
-
-  return (
-    <div className={classnames(styles.container, { [styles.small]: small })} id={id} onClick={(event: React.SyntheticEvent) => onClick(event)}>
-      <span className={styles.title}>{title }</span>
-      <IconSVG {...iconProps} />
-    </div>
-  );
-};
-
-export default AccordionTitle;
+import React from 'react';
+import classnames from 'classnames';
+import IconSVG from '../../IconSVG/IconSVG';
+import styles from './AccordionTitle.styl';
+
+interface IAccordionTitleProps {
+  title: string;
+  id?: string;
+  opened?: string;
+  iconName?: string;
+  small?: boolean;
+  onClick?: (event: React.SyntheticEvent) => void;
+}
+
+const AccordionTitle: React.FC<IAccordionTitleProps> = ({ title, opened, iconName, id, small = false, onClick = () => {} }) => {
+  const iconProps = {
+    customDimensions: true,
+    className: classnames(styles.icon, { [styles.opened]: opened === 'true' }),
+    // name: 'arrowSearchAccordionBlue',
+    name: iconName, // 'ArrowDownBlueIcon',
+    width: '12',
+    height: '12'
+  };
+
+  return (
+    <div className={classnames(styles.container, { [styles.small]: small })} id={id} onClick={(event: React.SyntheticEvent) => onClick(event)}>
+      <span className={styles.title}>{title }</span>
+      <IconSVG {...iconProps} />
+    </div>
+  );
+};
+
+export default AccordionTitle;

package/source/components/_common/AccordionWrapper/AccordionItem/AccordionItem.styl

@@ -1,34 +1,34 @@
-@import '../../../../theme/theme.styl'
-
-.accordionItem
-  border-bottom: 1px solid $grey-d
-  &:last-child
-    border: none
-
-.title
-  display: flex
-  justify-content: space-between
-  align-items: center
-  height 60px
-  font-weight: 700;
-  font-size: 14px
-  text-transform: uppercase
-  cursor: pointer
-
-.body
-  max-height: 0
-  overflow: hidden
-  opacity: 0
-  transition: all 350ms ease-in
-
-.bodyExpand
-  max-height: 10000px
-  opacity: 1
-
-.icon
-  transform: rotateZ(0deg)
-  margin-right: 10px
-  transition: all 300ms ease-out
-
-.iconExpand
-  transform: rotateZ(180deg)
+@import '../../../../theme/theme.styl'
+
+.accordionItem
+  border-bottom: 1px solid $grey-d
+  &:last-child
+    border: none
+
+.title
+  display: flex
+  justify-content: space-between
+  align-items: center
+  height 60px
+  font-weight: 700;
+  font-size: 14px
+  text-transform: uppercase
+  cursor: pointer
+
+.body
+  max-height: 0
+  overflow: hidden
+  opacity: 0
+  transition: all 350ms ease-in
+
+.bodyExpand
+  max-height: 10000px
+  opacity: 1
+
+.icon
+  transform: rotateZ(0deg)
+  margin-right: 10px
+  transition: all 300ms ease-out
+
+.iconExpand
+  transform: rotateZ(180deg)