intelicoreact 0.0.96 → 0.0.97

package/src/Atomic/FormElements/Modal/Modal.scss

@@ -1,230 +0,0 @@
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transition: opacity 0.2s ease;
-  background-color: black;
-  opacity: 0.5;
-  z-index: 4;
-}
-
-.modal {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  width: 600px;
-  left: calc(50% - 300px);
-  margin: 0 auto;
-  background-color: #fff;
-  border-radius: 5px;
-  z-index: 5;
-  box-shadow: 0 20px 20px rgb(0 0 0 / 20%);
-
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 15px;
-    border-bottom: 1px solid #e2e5ec;
-    background-color: #f7fafc;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-
-    &-primary {
-      background-color: #6b81dd;
-
-      &-title {
-        color: #ffff !important;
-        font-weight: 400;
-      }
-    }
-
-    &-title {
-      font-size: 16px;
-      font-weight: 400;
-      color: #6b81dd;
-    }
-  }
-
-  &__body {
-    background-color: #f7fafc;
-    padding: 15px;
-    max-height: calc(100vh - 150px);
-    overflow-y: auto;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-
-    scrollbar-color: rgb(186, 194, 201) rgba(0, 0, 0, 0) !important;
-    scrollbar-width: thin !important;
-
-    scrollbar {
-      -moz-appearance: none !important;
-    }
-    scrollbarbutton {
-      -moz-appearance: none !important;
-    }
-    thumb {
-      -moz-appearance: none !important;
-    }
-    scrollcorner {
-      -moz-appearance: none !important;
-      resize: both;
-    }
-    // overflow-y: overlay;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      -webkit-border-radius: 3px;
-      border-radius: 3px;
-      background: #bac2c9;
-
-      &:hover {
-        background: #9aa0b9;
-      }
-    }
-
-    &::-webkit-scrollbar:horizontal {
-      height: 8px;
-    }
-
-    &::-webkit-scrollbar-track:horizontal {
-      background: inherit;
-    }
-
-    &::-webkit-scrollbar-thumb:horizontal {
-      -webkit-border-radius: 6px;
-      border-radius: 6px;
-      background: #bac2c9;
-      background-clip: padding-box;
-      border: 2px solid rgba(0, 0, 0, 0);
-
-      &:hover {
-        background: #9aa0b9;
-        border: 1px solid rgba(0, 0, 0, 0);
-        background-clip: padding-box;
-      }
-    }
-  }
-
-  &__footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 10px 15px;
-    border-top: 1px solid #e2e5ec;
-    background-color: #f7fafc;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-
-    &--inbody {
-      padding-bottom: 0;
-    }
-  }
-
-  &-290 {
-    width: 290px;
-    left: calc(50% - 145px);
-  }
-
-  &-420 {
-    width: 420px;
-    left: calc(50% - 210px);
-  }
-
-  &-770 {
-    width: 770px;
-    left: calc(50% - 385px);
-  }
-
-  &-870 {
-    width: 870px;
-    left: calc(50% - 435px);
-  }
-
-  &-950 {
-    width: 950px;
-    left: calc(50% - 475px);
-  }
-
-  &-1024 {
-    width: 1024px;
-    left: calc(50% - 510px);
-  }
-}
-.modal__footer--noborder {
-  border-top: none;
-}
-.modal-box {
-  z-index: 100;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.consumer-info-modal {
-  .modal__body {
-    min-height: 200px;
-    padding: 0 15px;
-  }
-}
-
-.modal-close-icon-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: inherit;
-  border-top-right-radius: 5px;
-  width: 40px;
-  height: 39px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  cursor: pointer;
-
-  &:hover {
-    opacity: 0.6;
-  }
-
-  &-primary {
-    color: #ffff;
-
-    &:hover {
-      background-color: #5162d4;
-      opacity: 1;
-    }
-  }
-}
-
-.modal-close-icon {
-  width: 20px;
-  min-width: 20px;
-  height: 20px;
-}
-
-.modal-text-card {
-  text-align: left;
-  padding: 15px 0;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 20px;
-}
-
-.included-selector-modal {
-  .table {
-    min-height: 400px;
-    max-height: 500px;
-  }
-}
-
-.reports-settings-modal-box {
-  .modal__body {
-    padding: 0;
-  }
-}

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

@@ -1,116 +0,0 @@
-import React, { useState } from 'react';
-
-import Modal from './Modal';
-import Button from '../../UI/Button/Button';
-import Alert from '../../UI/Alert/Alert';
-
-global.lng = 'en';
-
-const examples = [
-  JSON.stringify({ withConfirmation: { cancel: true } }),
-  JSON.stringify({ withConfirmation: { confirm: true } }),
-  JSON.stringify({ withConfirmation: { confirm: true, cancel: true } }),
-  JSON.stringify({
-    withConfirmation: {
-      title: 'some value',
-      children: 'some value',
-      confirmBtnLabel: 'some value'
-    }
-  })
-];
-const confirmationDescrip =
-  'If you pass the "withConfirmation" property, you will be able to request confirmation of the user\'s action.\n\n' +
-  `For example, if you want to request confirmation to close a modal window, pass the property like this: ${examples[0]}\n\n` +
-  `To confirm submit, pass the property like this: with Confirmation: ${examples[1]}\n\n` +
-  `If you want confirmation for each action, pass the property like this: with Confirmation: ${examples[2]}\n\n` +
-  `If you want to control the contents of the confirmation window, pass an object with values instead of boolean values, like this:\n\n${examples[3]}\n\n`;
-
-export default {
-  title: 'Modal',
-  component: Modal,
-  argTypes: {
-    mode: {
-      control: {
-        type: 'select',
-        options: ['default', 'edit', 'create', 'add']
-      }
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['default', 'primary']
-      }
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: ['default', '290', '420', '870', '770', '950']
-      }
-    },
-    type: {
-      control: {
-        type: 'select',
-        options: ['default', 'primary']
-      }
-    },
-    withConfirmation: {
-      description: confirmationDescrip
-    }
-  }
-};
-
-const Template = args => {
-  const [isOpen, setIsOpen] = useState(false);
-  const closeModal = () => setIsOpen(false);
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)} text="Show modal" />
-      <Modal
-        {...args}
-        closeModal={closeModal}
-        submitHandler={() => {
-          args.submitHandler();
-          closeModal();
-        }}
-        isOpen={isOpen}
-      >
-        <Alert message="Alert message" variant="error" className="mb5" />
-        <Alert message="Alert message" variant="warning" className="mb5" />
-        <Alert message="Alert message" variant="success" className="mb5" />
-        <Alert message="Alert message" variant="info" />
-      </Modal>
-    </>
-  );
-};
-
-export const ModalTemplate = Template.bind({});
-export const ModalWithConfirmation = Template.bind({});
-
-const mainProps = {
-  title: 'Modal',
-  variant: 'primary',
-  mode: 'edit',
-  size: '',
-  confirmBtnLabel: '',
-  submitHandler: () => {
-    console.log('Hi');
-  }
-};
-
-const confirmationProps = {
-  title: '',
-  children: '',
-  confirmBtnLabel: ''
-};
-
-const confirmationVariants = {
-  // confirm: { ...confirmationProps },
-  cancel: { ...confirmationProps }
-};
-
-ModalTemplate.args = { ...mainProps };
-ModalWithConfirmation.args = {
-  ...mainProps,
-  withConfirmation: { ...confirmationVariants }
-};

package/src/Atomic/FormElements/MultiSelect/MultiSelect.js

@@ -1,39 +0,0 @@
-import React, { useState } from 'react';
-
-import Input from '../Input/Input';
-import CheckboxInput from '../CheckboxInput/CheckboxInput';
-
-import './MultiSelect.scss';
-
-const MultiSelect = ({ options, chosenOptions, onChange }) => {
-  const [searchValue, setSearchValue] = useState('');
-
-  const checkHandler = (state, value) => {
-    if (state) {
-      onChange([...chosenOptions, value]);
-    } else {
-      onChange(chosenOptions.filter(item => item !== value));
-    }
-  };
-
-  const filteredOptions = options.filter(({ label }) => label.toLowerCase().includes(searchValue.toLowerCase()));
-
-  return (
-    <div className="multiselect">
-      <Input value={searchValue} onChange={value => setSearchValue(value)} placeholder="Search" />
-      <div className="multiselect__list">
-        {filteredOptions.map(({ label, value, id }) => (
-          <CheckboxInput
-            key={id}
-            value={chosenOptions.includes(value)}
-            label={label}
-            onChange={state => checkHandler(state, value)}
-            className="multiselect__item"
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default MultiSelect;

package/src/Atomic/FormElements/MultiSelect/MultiSelect.scss

@@ -1,16 +0,0 @@
-.multiselect {
-  display: inline-flex;
-  flex-direction: column;
-  background-color: #fff;
-  border: 1px solid #e2e5ec;
-  border-radius: 4px;
-  padding: 8px 10px;
-
-  &__item {
-    height: 24px;
-  }
-
-  &__list {
-    margin-top: 4px;
-  }
-}

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

@@ -1,28 +0,0 @@
-import React, { useState } from 'react';
-import MultiSelect from './MultiSelect';
-
-global.lng = 'en';
-
-export default {
-  title: 'MultiSelect',
-  component: MultiSelect
-};
-
-const MultiTemplate = args => {
-  const options = [
-    { id: 1, label: 'label test 1', value: 'check1' },
-    { id: 2, label: 'label test 2', value: 'check2' },
-    { id: 3, label: 'label test 3', value: 'check3' },
-    { id: 4, label: 'label test 4', value: 'check4' },
-    { id: 5, label: 'label test 5', value: 'check5' },
-    { id: 6, label: 'label test 6', value: 'check6' },
-    { id: 7, label: 'label test 7', value: 'check7' }
-  ];
-
-  const [value, setValue] = useState([]);
-
-  return <MultiSelect {...args} options={options} chosenOptions={value} onChange={setValue} />;
-};
-
-export const MultiDropdownTemplate = MultiTemplate.bind({});
-MultiDropdownTemplate.args = {};

package/src/Atomic/FormElements/NavLine/NavLine.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-import cn from 'classnames';
-import * as Icons from 'react-feather';
-
-import './NavLine.scss';
-
-const NavLine = ({ root, activeTab, variant, onChange, className, items, children, isLocal, mode }) => {
-  return (
-    <div className={cn({ 'nav-line': !variant }, { 'nav-line--simple': variant === 'simple' }, className)}>
-      <div className={`${variant === 'simple' ? 'nav-line--simple__inner' : 'nav-line__inner'}`}>
-        {items.map(item => {
-          const Icon = Icons[item?.icon];
-          return isLocal ? (
-            <span
-              onClick={() => onChange(item.tabId)}
-              key={`tab__${item.tabId}`}
-              className={cn(
-                { 'nav-line__item': !variant },
-                { 'nav-line--simple__item': variant === 'simple' },
-                { active: activeTab === item.tabId },
-                { disabled: item.disabled || (mode === 'create' && item.tabId !== 'general') }
-              )}
-            >
-              <div className="j4">
-                {item.icon && (
-                  <div className="nav-line__item--icon">
-                    <Icon />
-                  </div>
-                )}
-
-                <span className={cn({ 'nav-line__item--label': variant !== 'simple' })}>{item.label}</span>
-                {item.count !== undefined ? <span className="nav-line--count ml5">({item.count || 0})</span> : null}
-              </div>
-            </span>
-          ) : (
-            <NavLink
-              to={`${root}${item.tabId}/`}
-              key={`tab__${item.tabId}`}
-              className={cn(
-                { 'nav-line__item': !variant },
-                { 'nav-line--simple__item': variant === 'simple' },
-                { active: activeTab === item.tabId },
-                { disabled: item.disabled || (mode === 'create' && item.tabId !== 'general') }
-              )}
-            >
-              <div className="j4">
-                {item.icon && (
-                  <div className="nav-line__item--icon">
-                    <Icon />
-                  </div>
-                )}
-
-                <span className={cn({ 'nav-line__item--label': variant !== 'simple' })}>{item.label}</span>
-                {item.count !== undefined ? <span className="nav-line--count ml5">({item.count || 0})</span> : null}
-              </div>
-            </NavLink>
-          );
-        })}
-      </div>
-
-      <div className="nav-line__body">{children}</div>
-    </div>
-  );
-};
-
-export default NavLine;

package/src/Atomic/FormElements/NavLine/NavLine.scss

@@ -1,108 +0,0 @@
-.nav-line {
-  &__inner {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-wrap: wrap;
-    background-color: #f7fafc;
-  }
-
-  &__item {
-    padding: 10px;
-    cursor: pointer;
-    font-size: 13px;
-    color: #1e1e2d;
-    border-top: 2px solid transparent;
-    user-select: none;
-    margin-bottom: -1px;
-    border-left: 1px solid transparent;
-    border-right: 1px solid transparent;
-
-    &--label {
-      text-transform: uppercase;
-    }
-
-    &--icon {
-      display: flex;
-      align-items: center;
-      margin-right: 5px;
-
-      svg {
-        height: 17px;
-        width: 17px;
-      }
-    }
-
-    &.active {
-      color: #6b81dd;
-      background: #fff;
-      font-weight: 500;
-      border-top: 2px solid #6b81dd;
-      cursor: default;
-      border-left: 1px solid #cfcfcf;
-      border-right: 1px solid #cfcfcf;
-      text-decoration: none;
-    }
-  }
-
-  &__body {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 24px 32px;
-    font-size: 13px;
-    border-top: 1px solid #cfcfcf;
-    margin-left: -32px;
-    margin-right: -32px;
-    background-color: #f7fafc;
-    &:empty {
-      padding: 0 32px;
-    }
-  }
-}
-
-.nav-line--simple {
-  &__inner {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-wrap: wrap;
-    padding-left: 8px;
-  }
-
-  &__item {
-    padding: 10px 10px 14px 10px;
-    cursor: pointer;
-    font-size: 13px;
-    color: #1e1e2d;
-    border-bottom: 1px solid #cfcfcf;
-    user-select: none;
-    margin-bottom: -1px;
-    border-bottom: 2px solid transparent;
-    opacity: 65%;
-    text-decoration: none !important;
-    &:hover {
-      border-bottom: 2px solid rgba(107, 129, 221, 0.65);
-      opacity: 100%;
-    }
-
-    &.active {
-      border-bottom: 2px solid #6b81dd;
-      font-weight: 500;
-      cursor: default;
-      opacity: 100%;
-    }
-  }
-
-  &__body {
-    padding: 15px 10px;
-    font-size: 13px;
-  }
-}
-
-.nav-line-count {
-  margin-left: 5px;
-}
-
-.post-log-tab__body {
-  background-color: #f7fafc;
-}

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

@@ -1,108 +0,0 @@
-import React, { useState } from 'react';
-import { BrowserRouter } from 'react-router-dom';
-
-import NavLine from './NavLine';
-import Alert from '../../UI/Alert/Alert';
-import Status from '../../UI/Status/Status';
-
-global.lng = 'en';
-
-export default {
-  title: 'NavLine',
-  component: NavLine
-};
-
-const Template = args => {
-  const navLineContent = {
-    general: <Alert message="General tab content" />,
-    payments: <Status status="active" label="Payments tab content" />,
-    filters: 'Filters tab content',
-    offers: 'Offers tab content',
-    merchants: 'Merchants tab content',
-    integration: 'Integration tab content',
-    customDetails: <Alert message="Custom Details tab content" type="info" />,
-    postsLog: 'Posts Log tab content',
-    tab2: 'Tab2 content'
-  };
-  const { initialTab } = args;
-  const [activeTab, setActiveTab] = useState(initialTab);
-
-  return (
-    <BrowserRouter>
-      <NavLine {...args} activeTab={activeTab} onChange={setActiveTab}>
-        {navLineContent[activeTab]}
-      </NavLine>
-    </BrowserRouter>
-  );
-};
-
-export const NavLineSimpleTemplate = Template.bind({});
-export const NavLineTemplate = Template.bind({});
-
-NavLineSimpleTemplate.args = {
-  initialTab: 'general',
-  variant: 'simple',
-  isLocal: false,
-  items: [
-    {
-      tabId: 'general',
-      label: 'Tab1'
-    },
-    {
-      tabId: 'payments',
-      label: 'Tab2'
-    },
-    {
-      tabId: 'filters',
-      label: 'Tab3'
-    },
-    {
-      tabId: 'offers',
-      label: 'Tab4',
-      count: 2
-    },
-    {
-      tabId: 'merchants',
-      label: 'Tab5',
-      count: 15
-    },
-    {
-      tabId: 'integration',
-      label: 'Tab6'
-    },
-    {
-      tabId: 'tab',
-      label: 'Disabled tab',
-      status: 'disabled'
-    }
-  ]
-};
-
-NavLineTemplate.args = {
-  initialTab: 'customDetails',
-  isLocal: false,
-  items: [
-    {
-      tabId: 'customDetails',
-      label: 'Tab1',
-      icon: 'Gift'
-    },
-    {
-      tabId: 'postsLog',
-      label: 'Tab2',
-      icon: 'Gift',
-      count: 43
-    },
-    {
-      tabId: 'tab1',
-      label: 'disabled tab',
-      icon: 'Gift',
-      status: 'disabled'
-    },
-    {
-      tabId: 'tab2',
-      label: 'tab 2',
-      icon: 'Gift'
-    }
-  ]
-};