intelicoreact 0.0.24 → 0.0.41

package/src/Atomic/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,6 +1,6 @@
 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';

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/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 }) => {
 
   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}>
+      {icon}
+      {label && <div className="button__text">{label}</div>}
+      {!label && children ? children : null}
     </button>
   );
 };

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

@@ -1,22 +1,22 @@
 .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;
+  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 +45,38 @@
         }
     }
 
-    &_link {
-        color: #6b81dd;
+  &_link {
+    color: #6b81dd;
+    box-shadow: none;
 
-        svg {
-            display: none;
-        }
+    svg {
+      display: none;
     }
+  }
 
-    &_success {
-        background-color: #7AC48C;
-        border: 1px solid #7AC48C;
-        color: #fff;
-        &:hover {
-            filter: brightness(1.1);
-        }
-    }
+  &_success {
+    background-color: #7ac48c;
+    border: 1px solid #7ac48c;
+    color: #fff;
 
-    &__text {
-        width: 100%;
-        text-align: center;
+    &:hover {
+      filter: brightness(1.1);
     }
+  }
 
-    &:active {
-        filter: brightness(1.3);
-    }
+  &__text {
+    width: 100%;
+    text-align: center;
+  }
 
-    &__icon {
-        width: 20px;
-        height: 25px;
-        margin-right: 5px;
-        min-width: 15px;
-    }
+  &:active {
+    filter: brightness(1.1);
+  }
+
+  &__icon {
+    width: 20px;
+    height: 25px;
+    margin-right: 5px;
+    min-width: 15px;
+  }
 }

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

@@ -1,12 +1,11 @@
 import React from 'react';
+import {Check} from 'react-feather';
 import Button from './Button';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 
 export default {
-  title: 'Button',
+  title: 'UI/Button',
   component: Button,
   argTypes: {
     variant: {
@@ -16,7 +15,7 @@ export default {
         options: ['primary', 'secondary', 'dark-outline', 'link']
       }
     },
-    text: {
+    label: {
       description: 'string'
     },
     disabled: {
@@ -29,25 +28,9 @@ export default {
       description: 'svg icon code',
       control: {
         type: 'select',
-        options: ['FiCheck', 'FiEdit3', 'FiPlus', 'FiTool', 'FiUploadCloud', 'FiX', 'FiArrowLeft']
+        options: ['Check', 'Edit3', 'Plus', 'Tool', 'UploadCloud', 'X', 'ArrowLeft']
       }
     }
-  },
-  text: {
-    description: 'string'
-  },
-  disabled: {
-    description: 'boolean'
-  },
-  onClick: {
-    description: 'function'
-  },
-  icon: {
-    description: 'svg icon code',
-    control: {
-      type: 'select',
-      options: ['FiCheck', 'FiEdit3', 'FiPlus', 'FiTool', 'FiUploadCloud', 'FiX']
-    }
   }
 };
 
@@ -60,6 +43,6 @@ export const ButtonTemplate = Template.bind({});
 ButtonTemplate.args = {
   disabled: false,
   onClick: () => null,
-  text: 'Button',
-  icon: 'FiCheck'
+  label: 'Button',
+  icon: <Check/>
 };

package/src/Atomic/UI/Hint/Hint.js

@@ -1,13 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react';
 import cn from 'classnames';
-import { MdHelpOutline } from 'react-icons/md';
-import { IoMdHelpCircle } from 'react-icons/io';
+import { HelpCircle } from 'react-feather';
 
 import './Hint.scss';
 
-const RC = 'hint';
-
-const Hint = ({ hint, side = 'right', className, label = '', iconOutline }) => {
+const Hint = ({ hint, side = 'right', className, label = '' }) => {
   const [isOpen, setIsOpen] = useState(false);
   const hintRef = useRef(null);
 
@@ -23,13 +20,13 @@ const Hint = ({ hint, side = 'right', className, label = '', iconOutline }) => {
   });
 
   return (
-    <div className={cn(RC, className)} ref={hintRef}>
-      <button onClick={() => setIsOpen(!isOpen)} className={cn(`${RC}__button`, { [`${RC}__button_active`]: isOpen })}>
-        {iconOutline ? <MdHelpOutline /> : <IoMdHelpCircle className="hint__icon" />}
+    <div className={cn('hint', className)} ref={hintRef}>
+      <button onClick={() => setIsOpen(!isOpen)} className={cn('hint__button', { hint__button_active: isOpen })}>
+        <HelpCircle className="hint__icon" />
         {label && <span className={cn('hint__label', { 'color--primary': isOpen })}>{label[0].toUpperCase() + label.slice(1)}</span>}
       </button>
 
-      {isOpen && <div className={cn(`${RC}__text`, `${RC}__text_${side}`)}>{hint}</div>}
+      {isOpen && <div className={cn('hint__text', `hint__text_${side}`)}>{hint}</div>}
     </div>
   );
 };

package/src/Atomic/UI/Hint/Hint.scss

@@ -1,5 +1,3 @@
-@import "../../../scss/vars";
-
 .hint {
   position: relative;
   display: inline-block;
@@ -12,24 +10,22 @@
     svg {
       width: 16px;
       height: 16px;
-      margin-right: 3px;
-    }
-
-    &:hover {
-      color: $color--primary;
+      margin-right: 5px;
     }
 
     &:hover,
     &_active {
-      svg > path {
-        fill: $color--primary;
+      color: #6b81dd;
+
+      svg {
+        color: #6b81dd;
       }
     }
   }
 
   &__text {
     position: absolute;
-    background-color: $color--primary;
+    background-color: #6b81dd;
     color: #fff;
     font-size: 10px;
     line-height: 16px;
@@ -49,7 +45,7 @@
       position: absolute;
       width: 8.5px;
       height: 8.5px;
-      background-color: $color--primary;
+      background-color: #6b81dd;
       transform: rotate(45deg);
     }
 
@@ -91,6 +87,6 @@
   }
 
   &__icon {
-    color: #9AA0B9;
+    color: #9aa0b9;
   }
 }

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import Hint from './Hint';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
+
 export default {
-  title: 'Hint',
+  title: 'UI/Hint',
   component: Hint,
   argTypes: {
     side: {
@@ -31,4 +30,5 @@ HintTemplate.args = {
   hint: ' hint text hint text hint text hint text hint text hint text hint text hint text',
   side: 'right',
   label: ''
+  // isIconOutline: false
 };

package/src/Atomic/UI/Price/Price.js

@@ -0,0 +1,19 @@
+import React from 'react';
+const Price = ({ value, unit = '$', unitAfter, className }) => {
+  let formatted;
+  if (value.length <= 3) {
+    formatted = parseFloat(value).toFixed(2);
+  } else {
+    formatted = Number(value.toString().replace(/[+*?$^(,)]/g, '')).toLocaleString('en-US');
+  }
+
+  return (
+    <div className={`price ${className}`}>
+      {!unitAfter && unit}
+      {formatted}
+      {unitAfter && unit}
+    </div>
+  );
+};
+
+export default Price;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import Price from './Price';
+
+global.lng = 'en';
+
+export default {
+  title: 'UI/Price',
+  component: Price,
+  argTypes: {
+    value: {
+      description: 'string',
+    },
+    unit: {
+      description: 'string'
+    },
+    unitAfter: {
+      description: 'boolean'
+    }
+  }
+};
+
+const Template = args => <Price {...args} />;
+
+export const PriceTemplate = Template.bind({});
+
+PriceTemplate.args = {
+  value: '15000',
+  unit: '$',
+  unitAfter: false
+};