intelicoreact 0.0.2 → 0.0.6

package/src/Atomic/FormElements/Textarea/Textarea.stories.js

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import Textarea from './Textarea';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 export default {
   title: 'Textarea',

package/src/Atomic/FormElements/TimeRange/TimeRange.js

@@ -2,7 +2,7 @@ import React, { useState, useMemo } from 'react';
 import cn from 'classnames';
 import moment from 'moment';
 
-import useToggle from '../../../../JS/Functions/useToggle';
+import useToggle from '../../../Functions/useToggle';
 import Label from '../Label/Label';
 import Input from '../Input/Input';
 

package/src/Atomic/FormElements/TimeRange/TimeRange.stories.js

@@ -2,8 +2,6 @@ import React from 'react';
 
 import TimeRange from './TimeRange';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 
 export default {

package/src/Atomic/{FormElements/MainMenu → MainMenu}/MainMenu.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import cn from 'classnames';
-import * as Icons from 'react-icons/fi';
+import * as Icons from 'react-feather';
 import { NavLink } from 'react-router-dom';
 
 import Langs from '../../../../Langs';
-import Accordion from '../../UI/Accordion/Accordion';
+import Accordion from '../UI/Accordion/Accordion';
 
 import './MainMenu.scss';
 
@@ -51,9 +51,9 @@ const MainMenu = props => {
   };
 
   const changeMenuIcon = () => {
-    if (isOpen && !isMenuIconHovered) return <Icons.FiMenu />;
-    if (isOpen && isMenuIconHovered) return <Icons.FiChevronLeft />;
-    if (!isOpen && isMenuHovered) return <Icons.FiChevronRight />;
+    if (isOpen && !isMenuIconHovered) return <Icons.Menu />;
+    if (isOpen && isMenuIconHovered) return <Icons.ChevronLeft />;
+    if (!isOpen && isMenuHovered) return <Icons.ChevronRight />;
     if (!isOpen) return <div className="main-menu--logo-close" />;
     return null;
   };

package/src/Atomic/{FormElements/MainMenu → MainMenu}/MainMenu.scss

@@ -1,5 +1,5 @@
-@import "../../../scss/anme/anme-vars";
-@import "../../../scss/anme/anme-mixins";
+@import "../../scss/anme/anme-vars";
+@import "../../scss/anme/anme-mixins";
 
 .main-menu {
   display: flex;

package/src/Atomic/{FormElements/MainMenu → MainMenu}/MainMenu.stories.js

@@ -18,13 +18,13 @@ MainMenuTemplate.args = {
     main: [
       {
         title: 'Dashboard',
-        icon: 'FiAirplay',
+        icon: 'Airplay',
         className: 'color--green-haze main-menu__icon'
         // link: '/'
       },
       {
         title: 'Consumers',
-        icon: 'FiUser',
+        icon: 'User',
         className: 'color--primary main-menu__icon'
         // link: '/consumers/'
       }
@@ -32,44 +32,44 @@ MainMenuTemplate.args = {
     mainMenu: [
       {
         title: 'Ticket Desk',
-        icon: 'FiTag',
+        icon: 'Tag',
         className: 'color--froly',
         children: []
       },
       {
         title: 'Accounting',
-        icon: 'FiDollarSign',
+        icon: 'DollarSign',
         className: 'color--sea-buckthorn',
         children: []
       },
       {
         title: 'Users',
-        icon: 'FiUsers',
+        icon: 'Users',
         className: 'color--gray-gull',
         children: []
       },
       {
         title: 'Settings',
-        icon: 'FiSliders',
+        icon: 'Sliders',
         className: 'color--primary'
       }
     ],
     partners: [
       {
         title: 'Merchants',
-        icon: 'FiShoppingBag',
+        icon: 'ShoppingBag',
         className: 'color--froly'
         // link: '/merchants/'
       },
       {
         title: 'Lenders',
-        icon: 'FiBriefcase',
+        icon: 'Briefcase',
         className: 'color--green-haze'
         // link: '/lenders/'
       },
       {
         title: 'Lender Ping Tree',
-        icon: 'FiShuffle',
+        icon: 'Shuffle',
         className: 'color--primary'
         // link: '/ping-tree/'
       }
@@ -77,13 +77,13 @@ MainMenuTemplate.args = {
     other: [
       {
         title: 'Reports',
-        icon: 'FiPieChart',
+        icon: 'PieChart',
         className: 'color--gray-gull'
         // link: '/reports/'
       },
       {
         title: 'Tools',
-        icon: 'FiTool',
+        icon: 'Tool',
         className: 'color--sea-buckthorn'
       }
     ]

package/src/Atomic/UI/Accordion/Accordion.js

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import cn from 'classnames';
-import * as Icons from 'react-icons/fi';
+import * as Icons from 'react-feather';
 import { NavLink } from 'react-router-dom';
 
 import AccordionItem from './AccordionItem';
 import { handleObjectChange } from '../../../Functions/utils';
 
 import './Accordion.scss';
-import '../../FormElements/MainMenu/MainMenu.scss';
+import '../../MainMenu/MainMenu.scss';
 
 const Accordion = ({ items, className, itemClassName, isMenuHovered, isOpen }) => {
   const [data, setData] = useState(items);

package/src/Atomic/UI/Accordion/Accordion.stories.js

@@ -5,7 +5,7 @@ import Accordion from './Accordion';
 global.lng = 'en';
 
 export default {
-  title: 'Accordion',
+  title: 'UI/Accordion',
   component: Accordion
 };
 
@@ -18,7 +18,7 @@ AccordionTemplate.args = {
     {
       id: 1,
       title: 'tools',
-      icon: 'FiTool',
+      icon: 'Tool',
       className: 'color--sea-buckthorn',
       isOpen: true,
       children: [
@@ -42,7 +42,7 @@ AccordionTemplate.args = {
     {
       id: 2,
       title: 'lenders',
-      icon: 'FiBriefcase',
+      icon: 'Briefcase',
       className: 'color--green-haze',
       isOpen: false,
       children: [
@@ -56,7 +56,7 @@ AccordionTemplate.args = {
     {
       id: 3,
       title: 'settings',
-      icon: 'FiSliders',
+      icon: 'Sliders',
       className: 'color--primary',
       isOpen: false,
       status: {

package/src/Atomic/UI/Accordion/AccordionItem.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import cn from 'classnames';
-import * as Icons from 'react-icons/fi';
+import * as Icons from 'react-feather';
 import { NavLink } from 'react-router-dom';
 
-import Status from '../../FormElements/Status/Status';
+import Status from '../Status/Status';
 
 import './Accordion.scss';
 
@@ -70,7 +70,7 @@ const AccordionItem = ({ item, onClick, isOpen, className, children, noChevron }
             </div>
           )}
 
-          {!noChevron && <Icons.FiChevronRight className={cn('accordion--title-chevron', { 'accordion--title-chevron-open': isOpen })} />}
+          {!noChevron && <Icons.ChevronRight className={cn('accordion--title-chevron', { 'accordion--title-chevron-open': isOpen })} />}
         </div>
       </div>
 

package/src/Atomic/UI/AdvancedTag/AdvTag.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import cn from 'classnames';
-import { IoWarningOutline } from 'react-icons/io5';
+import { AlertTriangle } from 'react-feather';
 
 import './AdvancedTags.scss';
 
@@ -39,7 +39,7 @@ const AdvTag = ({ item, className }) => {
     <div className={advancedTagClass} ref={hintRef}>
       {warnLeft && (
         <div className="pointer" onMouseEnter={() => onWarningClick('warnLeft')} onMouseLeave={() => setIsOpen(false)}>
-          <IoWarningOutline className="advanced-tags--warning-icon mr5" />
+          <AlertTriangle className="advanced-tags--warning-icon mr5" />
         </div>
       )}
 
@@ -62,7 +62,7 @@ const AdvTag = ({ item, className }) => {
       ) : (
         item.type !== 'simple' && (
           <div className="pointer" onMouseEnter={() => onWarningClick('warnRight')} onMouseLeave={() => setIsOpen(false)}>
-            <IoWarningOutline className="advanced-tags--warning-icon" />
+            <AlertTriangle className="advanced-tags--warning-icon" />
           </div>
         )
       )}

package/src/Atomic/UI/AdvancedTag/AdvancedTags.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 
 import AdvTag from './AdvTag';
 
-const AdvancedTags = ({ items }) => {
+const AdvancedTags = ({ items, className }) => {
   if (!items) return null;
 
   const [showedItems, setShowedItems] = useState([items[0], items[1]]);
@@ -15,13 +15,13 @@ const AdvancedTags = ({ items }) => {
   };
 
   return (
-    <div className="j4 wrap">
+    <div className={cn(className, 'j4 wrap')}>
       {showedItems?.map((item, index) => (
         <AdvTag key={index} item={item} />
       ))}
 
       {items.length >= 3 && (
-        <span onClick={() => onShowMoreClick()} className={cn('advanced-tags advanced-tags--showMore')}>
+        <span onClick={() => onShowMoreClick()} className="advanced-tags advanced-tags--showMore">
           {showMore ? `+${items.length - showedItems.length}` : '...'}
         </span>
       )}

package/src/Atomic/UI/AdvancedTag/AdvancedTags.scss

@@ -1,5 +1,3 @@
-@import '../../../scss/anme/anme-vars';
-
 .advanced-tags {
     display: inline-flex;
     background-color: #e2e5ec;
@@ -27,7 +25,7 @@
 
     &__warn-text {
         position: absolute;
-        background-color: $color--primary;
+        background-color: #6b81dd;
         color: #fff;
         font-size: 10px;
         line-height: 16px;
@@ -42,7 +40,7 @@
             position: absolute;
             width: 8.5px;
             height: 8.5px;
-            background-color: $color--primary;
+            background-color: #6b81dd;
             transform: rotate(45deg);
         }
 
@@ -67,7 +65,7 @@
     }
 
     &--showMore {
-        background-color: $color--sandy-beach;
+        background-color: #ffedc8;
         cursor: pointer;
         user-select: none;
     }

package/src/Atomic/UI/AdvancedTag/AdvancedTags.stories.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import AdvancedTags from './AdvancedTags';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 
 export default {
-  title: 'AdvancedTags',
+  title: 'UI/AdvancedTags',
   component: AdvancedTags
 };
 

package/src/Atomic/UI/Alert/Alert.js

@@ -1,18 +1,21 @@
 import React, { useState } from 'react';
 import cn from 'classnames';
-import { FiX } from 'react-icons/fi';
+import { X } from 'react-feather';
 
 import './Alert.scss';
 
-const Alert = ({ message, variant, className }) => {
+const Alert = ({ message, icon, variant, className, children, noDismiss }) => {
   const [onClose, setOnClose] = useState(false);
 
   return (
     <div className={cn(className, { hidden: onClose }, `alert alert--${variant || 'warning'}`)}>
-      <div>{message}</div>
-      <div className="alert__close-btn">
-        <FiX onClick={() => setOnClose(!onClose)} />
-      </div>
+      {icon}
+      <div>{children || message}</div>
+      {!noDismiss && (
+        <div className="alert__close-btn">
+          <X onClick={() => setOnClose(!onClose)} />
+        </div>
+      )}
     </div>
   );
 };

package/src/Atomic/UI/Alert/Alert.scss

@@ -40,6 +40,7 @@
     min-width: 15px;
     cursor: pointer;
     user-select: none;
+    margin-left: 10px;
   }
 
   &--title {
@@ -55,4 +56,10 @@
       display: none;
     }
   }
+
+  svg {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+  }
 }

package/src/Atomic/UI/Alert/Alert.stories.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import Alert from './Alert';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 
 export default {
-  title: 'Alert',
+  title: 'UI/Alert',
   component: Alert,
   argTypes: {
     variant: {

package/src/Atomic/UI/Arrow/Arrow.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef, useState } from 'react';
+import cn from 'classnames';
+
+import { getStyles } from '../../../Functions/utils';
+
+import './Arrow.scss';
+
+const Arrow = ({type, className, onClick, disabled}) => {
+  if (!type || (type !== 'left' && type !== 'right')) return null;
+  const ref = useRef();
+  const [color, setColor] = useState('black');
+
+  useEffect(() => {
+    if (ref.current) {
+      setColor(getStyles(ref.current, 'color'));
+    };
+  }, [ref.current]);
+
+  return (
+    <div 
+      ref={ref}
+      className={cn('arrow', `arrow_${type}`, className, {
+        'arrow_disabled': disabled
+      })}
+      onClick={onClick} >
+      {type !== 'right' 
+        ? (
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M15 18L9 12L15 6" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        ) : (
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9 18L15 12L9 6" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        )
+      }
+    </div>
+  );
+};
+
+export default Arrow;

package/src/Atomic/UI/Arrow/Arrow.scss

@@ -0,0 +1,22 @@
+.arrow {
+  width: 24px;
+  height: 24px;
+  color: #1F7499;
+  // cursor: pointer;
+  // border: 1px solid #EAF2FF;
+
+  &_disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}
+
+.arrow>svg {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+
+
+

package/src/Atomic/UI/Arrow/Arrow.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Check} from 'react-feather';
+import Arrow from './Arrow';
+
+global.lng = 'en';
+
+export default {
+  title: 'UI/Arrow',
+  component: Arrow,
+  argTypes: {
+    type: {
+      description: 'string: ["left", "right"]',
+      control: {
+        type: 'select',
+        options: ['left', 'right']
+      }
+    }
+  }
+};
+
+const Template = args => {
+  const { className, onClick } = args;
+  return <Arrow {...args} />;
+};
+
+export const ArrowTemplate = Template.bind({});
+
+ArrowTemplate.args = {
+  type: 'left',
+  className: 'externall-class-name',
+  onClick: ev => console.log(ev.target.className)
+};

package/src/Atomic/UI/Button/Button.js

@@ -1,19 +1,15 @@
 import React from 'react';
 import cn from 'classnames';
-import * as Icons from 'react-icons/fi';
 
 import './Button.scss';
 
-const RC = 'button';
-
-const Button = ({ text, variant = 'primary', onClick, disabled, icon, className, children }) => {
-  const Icon = Icons[icon];
-
+const Button = ({ label, variant = 'primary', onClick, disabled, icon, className, children, style, noIcon }) => {
+  const noRenderIcon = noIcon || variant === "ellipse-apply" || variant === "ellipse-cancel";
   return (
-    <button className={cn(className, RC, { [`${RC}_${variant}`]: variant })} onClick={onClick} disabled={disabled}>
-      {icon && <Icon className={`${RC}__icon`} />}
-      {text && <span className={`${RC}__text`}>{text}</span>}
-      {!text && children ? children : null}
+    <button style={style} className={cn(className, 'button', { [`button_${variant}`]: variant })} onClick={onClick} disabled={disabled}>
+      {!noRenderIcon && icon}
+      {label && <div className="button__text">{label}</div>}
+      {!label && children ? children : null}
     </button>
   );
 };

package/src/Atomic/UI/Button/Button.scss

@@ -1,22 +1,23 @@
 .button {
-    display: inline-flex;
-    align-items: center;
-    font-size: 13px;
-    line-height: 20px;
-    border-radius: 3px;
-    padding: 3px 10px;
-    cursor: pointer;
-    box-sizing: border-box;
-    text-align: center;
-    user-select: none;
-    height: 28px;
-    white-space: nowrap;
-    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 13px;
+  line-height: 20px;
+  border-radius: 3px;
+  padding: 3px 10px;
+  cursor: pointer;
+  box-sizing: border-box;
+  text-align: center;
+  user-select: none;
+  height: 28px;
+  white-space: nowrap;
+  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
 
-    &:disabled {
-        opacity: 0.5;
-        pointer-events: none;
-    }
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 
     &_dark-outline {
         border: 1px solid #bac2c9;
@@ -45,36 +46,63 @@
         }
     }
 
-    &_link {
-        color: #6b81dd;
-
-        svg {
-            display: none;
-        }
+    &_ellipse-apply{
+      padding: 8px 16px;
+      border-radius: 40px;
+      background: #1F7499;
+      font-family: 'Sarabun';
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: 0.1px;
+      color: #FFFFFF;
     }
 
-    &_success {
-        background-color: #7AC48C;
-        border: 1px solid #7AC48C;
-        color: #fff;
-        &:hover {
-            filter: brightness(1.1);
-        }
+    &_ellipse-cancel{
+      padding: 8px 18px;
+      border-radius: 32px;
+      font-family: Sarabun;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.2px;
+      color: #1F7499;
     }
 
-    &__text {
-        width: 100%;
-        text-align: center;
-    }
+  &_link {
+    color: #6b81dd;
+    box-shadow: none;
 
-    &:active {
-        filter: brightness(1.3);
+    svg {
+      display: none;
     }
+  }
 
-    &__icon {
-        width: 20px;
-        height: 25px;
-        margin-right: 5px;
-        min-width: 15px;
+  &_success {
+    background-color: #7ac48c;
+    border: 1px solid #7ac48c;
+    color: #fff;
+
+    &:hover {
+      filter: brightness(1.1);
     }
+  }
+
+  &__text {
+    width: 100%;
+    text-align: center;
+  }
+
+  &:active {
+    filter: brightness(1.1);
+  }
+
+  &__icon {
+    width: 20px;
+    height: 25px;
+    margin-right: 5px;
+    min-width: 15px;
+  }
 }