dgrcorrientes-modulos 1.0.2 → 1.0.4

package/src/stories/Components/Stepper/Stepper.tsx

@@ -1,102 +0,0 @@
-import {useEffect, useState} from 'react';
-import './stepper.scss';
-
-export interface IStepper extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  activeLabel: string;
-  items: {
-    label: string;
-    icon: string;
-    onClick?: () => void;
-  }[];
-
-  // events
-  handlePosition?: (itemActive: ItemValue) => void;
-
-  // react
-  className?: string;
-}
-
-export interface ItemValue {
-  label: string;
-  icon: any;
-  onClick?: () => void;
-}
-
-export const Stepper = ({items, activeLabel, handlePosition, className, ...props}: IStepper) => {
-  var activeItemIndex = 0;
-  const itemActive = items.find(item => item.label === activeLabel);
-
-  const [activeStep, setActiveStep] = useState(itemActive);
-  const [positionStep, setPositionStep] = useState(itemActive);
-
-  if (activeStep) {
-    var activeItemIndex = items.indexOf(activeStep);
-  }
-
-  useEffect(() => {
-    var newItemActive = items.find(item => item.label === activeLabel);
-    setActiveStep(newItemActive);
-
-    if (activeStep) {
-      activeItemIndex = items.indexOf(activeStep);
-    }
-
-    setPositionStep(newItemActive);
-  }, [activeLabel, items]);
-
-  const handleClick = (item: ItemValue) => {
-    setPositionStep(item);
-
-    if (handlePosition) {
-      handlePosition(item);
-    }
-
-    if (item.onClick) {
-      item.onClick();
-    }
-  };
-
-  return (
-    <div className="elv-component elv-steps" {...props}>
-      <ul className={`steps has-content-centered is-horizontal ${className ? className : ''}`}>
-        {items.map((item, index) => (
-          <li
-            className={`steps-segment ${items[index + 1] !== undefined && items[index + 1] == activeStep ? 'is-pre-active' : ''} ${
-              item == activeStep ? 'is-active' : ''
-            }`}
-            key={index}
-          >
-            <span
-              className="steps-marker"
-              onClick={() => {
-                if (index <= activeItemIndex) {
-                  handleClick(item);
-                } else {
-                  if (item.onClick) {
-                    item.onClick();
-                  }
-                }
-              }}
-            >
-              {index < activeItemIndex ? (
-                <span className="icon">
-                  <i className={`${item.icon}`}></i>
-                </span>
-              ) : (
-                <span>{index + 1}</span>
-              )}
-            </span>
-            <div
-              className={`steps-content ${index <= activeItemIndex ? 'steps-content--completed' : 'steps-content--incompleted'} ${
-                item === positionStep && 'steps-content--position'
-              }`}
-            >
-              <p className="steps-content__item-label">{item.label}</p>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};

package/src/stories/Components/Stepper/stepper.scss

@@ -1,59 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.steps {
-  list-style: none;
-  padding-left: 0px;
-  .steps-segment {
-    .steps-content {
-      word-wrap: break-word;
-
-      &__item-label {
-        font-size: 16px;
-        line-height: 125%;
-        margin: 5px;
-        text-align: center;
-      }
-
-      &--completed {
-        color: $text-500;
-      }
-
-      &--incompleted {
-        color: $text-300;
-      }
-
-      &--position {
-        font-weight: bold;
-        color: $text-900;
-      }
-    }
-
-    .steps-marker {
-      font-family: 'SF UI Text', sans-serif;
-      cursor: pointer;
-
-      &:not(.is-hollow) {
-        color: white !important;
-      }
-    }
-
-    &.is-pre-active {
-      &::after {
-        background-image: linear-gradient(to right, $success-600 50%, $primary-600 50%);
-      }
-    }
-
-    &.is-active {
-      .steps-content {
-        &__item-label {
-          // font-weight: bold;
-          // color: $text-900;
-        }
-      }
-
-      &::after {
-        background-image: linear-gradient(to right, $primary-600 50%, $muted-300 50%);
-      }
-    }
-  }
-}

package/src/stories/Components/Tabs/Tabs.stories.tsx

@@ -1,76 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Tabs} from './Tabs';
-
-export default {
-  title: 'Components/Tabs',
-  component: Tabs,
-  args: {
-    activeLabel: {
-      label: 'Inmobiliario',
-      disabled: false,
-      icon: {icon: 'fa fa-home'},
-      subtitle: '$ 14.181,28',
-      onClick: () => console.log('Inmobiliario Clicked'),
-    },
-    subActiveLabel: null,
-    items: [
-      {
-        label: 'Inmobiliario',
-        disabled: false,
-        icon: {icon: 'fa fa-home'},
-        subtitle: '$ 14.181,28',
-        onClick: () => console.log('Inmobiliario Clicked'),
-      },
-      {
-        label: 'Ingresos Brutos',
-        disabled: false,
-        icon: {icon: 'fa-solid fa-user'},
-        subtitle: '$ 2.865,86',
-        onClick: () => console.log('Ingresos Brutos Clicked'),
-      },
-      {
-        label: 'Inmobiliario Rural',
-        onClick: () => console.log('Inmobiliario Rural Clicked'),
-        disabled: false,
-        icon: {icon: 'fa-solid fa-truck-field'},
-        subtitle: '$ 1.485,71',
-        sub_labels: [
-          {label: 'Sub-label 1', disabled: false, onClick: () => console.log('Sub-label 1 Clicked')},
-          {label: 'Sub-label 2', disabled: false, onClick: () => console.log('Sub-label 2 Clicked')},
-          {label: 'Sub-label 3', disabled: false, onClick: () => console.log('Sub-label 3 Clicked')},
-        ],
-      },
-      {
-        label: 'Agentes - Impuestos de Sello',
-        disabled: false,
-        icon: {icon: 'fa-solid fa-stamp'},
-        subtitle: '$ 150,99',
-        onClick: () => console.log('Impuestos de Sello Clicked'),
-      },
-      {
-        label: 'Agentes - IIBB',
-        disabled: true,
-        icon: {icon: 'fa-solid fa-dollar-sign'},
-        subtitle: '$ 1.161,05',
-        onClick: () => console.log('IIBB Clicked'),
-      },
-    ],
-  },
-} as ComponentMeta<typeof Tabs>;
-
-const Template: ComponentStory<typeof Tabs> = args => <Tabs {...args} />;
-
-export const BorderBottom = Template.bind({});
-BorderBottom.args = {
-  type: 'border-bottom',
-};
-
-export const Boxed = Template.bind({});
-Boxed.args = {
-  type: 'boxed',
-};
-
-export const Vertical = Template.bind({});
-Vertical.args = {
-  type: 'vertical',
-};

package/src/stories/Components/Tabs/Tabs.tsx

@@ -1,111 +0,0 @@
-import {useState} from 'react';
-import './tabs.scss';
-import {generateRandomKey, shortenText} from '../../../utils/functions';
-import {IIcon, Icon} from '../../Elements/Icon/Icon';
-
-export interface ITabs extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  type: 'border-bottom' | 'boxed' | 'vertical';
-  activeTab: ITabItemValue | null;
-  subactiveTab?: ITabSubITabItemValue | null;
-  items: {
-    label: string;
-    sub_labels?: ITabSubITabItemValue[];
-    icon?: IIcon;
-    subtitle?: string;
-    disabled: boolean;
-    onClick?: () => void;
-  }[];
-
-  // events
-  handleActive?: (itemActive: ITabItemValue) => void;
-  handleSubActive?: (itemActive: ITabSubITabItemValue) => void;
-
-  // react
-  className?: string;
-}
-
-export interface ITabItemValue {
-  label: string;
-  sub_labels?: ITabSubITabItemValue[];
-  icon?: IIcon;
-  subtitle?: string;
-  disabled: boolean;
-  onClick?: () => void;
-}
-
-export interface ITabSubITabItemValue {
-  label: string;
-  disabled: boolean;
-  onClick?: () => void;
-}
-
-export const Tabs = ({items, type, activeTab, handleActive, handleSubActive, subactiveTab, className, ...props}: ITabs) => {
-  return (
-    <div className="elv-component elv-tabs" {...props}>
-      <ul className={`tabs tabs--${type} ${className ? className : ''}`}>
-        {items.map((item, index) => (
-          <div className="tabs__item" key={item.label + generateRandomKey()}>
-            {type === 'boxed' && item.icon && item.subtitle ? (
-              <li
-                onClick={() => {
-                  handleActive && handleActive(item);
-
-                  if (item.sub_labels && handleSubActive) {
-                    handleSubActive(item.sub_labels[0]);
-                  }
-                  item.onClick && item.onClick();
-                }}
-                className={`item is-clickable ${index !== 0 ? 'ml-3' : ''} ${item.label == activeTab?.label ? 'item--active' : ''} ${
-                  item.disabled ? 'item--disabled' : ''
-                }`}
-              >
-                <div className="boxed-container is-flex is-justify-content-center mb-1">
-                  <Icon {...item.icon} className="boxed-container__icon mb-1 mr-1" />
-                  <p className="boxed-container__label">{shortenText(item.label, 30)}</p>
-                </div>
-                <p className="boxed-subtitle mb-1 is-size-7 has-text-weight-normal has-tc-truegray-600 has-text-centered">
-                  {shortenText(item.subtitle, 20)}
-                </p>
-              </li>
-            ) : (
-              <li
-                onClick={() => {
-                  handleActive && handleActive(item);
-
-                  if (item.sub_labels && handleSubActive) {
-                    handleSubActive(item.sub_labels[0]);
-                  }
-                  item.onClick && item.onClick();
-                }}
-                className={`item is-clickable ${index === 0 ? 'item--is-first' : ''} ${
-                  item.label == activeTab?.label ? 'item--active' : ''
-                } ${item.disabled ? 'item--disabled' : ''}`}
-              >
-                {shortenText(item.label, 30)}
-              </li>
-            )}
-            {item.sub_labels !== undefined &&
-              type === 'vertical' &&
-              item.sub_labels.map((sub_item, sub_index) => (
-                <li
-                  key={generateRandomKey()}
-                  onClick={() => {
-                    handleActive && handleActive(item);
-                    handleSubActive && handleSubActive(sub_item);
-
-                    sub_item.onClick && sub_item.onClick();
-                  }}
-                  className={`sub-item ${index === 0 ? 'sub-item__--first' : ''} ${
-                    item.label == activeTab?.label && sub_item.label == subactiveTab?.label ? 'sub-item--active' : ''
-                  } ${sub_item.disabled ? 'sub-item--inactive' : ''}`}
-                >
-                  {shortenText(sub_item.label, 25)}
-                </li>
-              ))}
-          </div>
-        ))}
-      </ul>
-    </div>
-  );
-};

package/src/stories/Components/Tabs/tabs.scss

@@ -1,118 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-tabs {
-  .tabs {
-    // min-width: max-content;
-    flex-wrap: wrap;
-    font-size: 14px;
-
-    &--border-bottom {
-      padding-bottom: 20px;
-
-      .item {
-        padding: 0px 50px 15px 50px !important;
-
-        &--disabled {
-          color: $text-300;
-          pointer-events: none !important;
-          display: block;
-        }
-
-        &--active {
-          font-weight: $fw-semibold;
-          border-bottom: 3px solid $primary-600;
-          color: $primary-600;
-        }
-      }
-    }
-
-    &--boxed {
-      padding-bottom: 20px;
-
-      .tabs__item {
-        flex:  1 0 0;
-        border-right: 2px solid #eff2f6;
-        border-bottom: 2px solid #eff2f6;
-        padding: 10px 16px 0px 0px;
-        
-        @media screen and (max-width: 870px){
-          max-width: calc(50% - 20px); 
-        }
-        @media screen and (max-width: 530px){
-          max-width: 100%;
-          
-        }
-      }
-
-      .item {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 10px;
-
-
-        &--inactive {
-          color: $text-300;
-          pointer-events: none;
-          display: block;
-        }
-
-        &--active {
-          font-weight: $fw-semibold;
-          color: $primary-600 !important;
-          border-bottom: 3px solid $primary-600;
-        }
-      }
-    }
-
-    &--vertical {
-      flex-direction: column;
-      align-items: flex-start !important;
-      padding: 0px;
-      min-width: min-content;
-      max-width: 300px;
-
-      .tabs__item {
-        width: 100%;
-
-        li {
-          border-left: 6px solid transparent;
-          padding: 8px 16px;
-          color: $muted-400;
-          text-align: left !important;
-        }
-
-        .item {
-          border-left-color: $muted-400;
-          border-bottom-width: 0px !important;
-          justify-content: flex-start;
-
-          &:hover {
-            border-left-color: $primary-600;
-          }
-
-          &--active {
-            font-weight: $fw-semibold;
-            border-left: 6px solid $primary-600;
-            color: $primary-600;
-          }
-        }
-
-        .sub-item {
-          padding-left: 30px;
-          cursor: pointer;
-
-          &:hover {
-            border-bottom: 0px;
-            color: $primary-600;
-          }
-
-          &--active {
-            background-color: #e7f0ff;
-            border-left-color: #e7f0ff;
-            color: $primary-600;
-          }
-        }
-      }
-    }
-  }
-}

package/src/stories/Components/Tooltip/Tooltip.scss

@@ -1,235 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.tooltip {
-  border-radius: 6px;
-  box-shadow: 0px 10px 28px 5px rgba(14, 31, 53, 0.1);
-  backdrop-filter: drop-shadow(0px 3px 6px rgba(14, 31, 53, 0.08)) drop-shadow(0px 6px 12px rgba(14, 31, 53, 0.12))
-    drop-shadow(0px 14px 24px rgba(14, 31, 53, 0.08));
-  position: relative;
-  min-width: 290px;
-
-  &__content {
-    border-radius: 6px;
-    padding: 10px;
-    z-index: 2;
-    background-color: $white;
-
-    .labels {
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-
-      &__text {
-        color: $darkText;
-        font-size: 14px;
-      }
-    }
-
-    &--calendar {
-      .labels {
-        &__date {
-          color: $text-400;
-          font-size: 10px;
-        }
-
-        &__sub_title {
-          color: $black;
-          font-size: 10px;
-          font-weight: $fw-medium;
-        }
-      }
-    }
-
-    &--text {
-      .labels {
-        padding: 5px;
-      }
-    }
-
-    &--taxes {
-      padding: 15px;
-      .labels {
-        font-size: 14px;
-
-        .principal-item {
-          &__label {
-            color: $text-500;
-            font-weight: $fw-semibold;
-          }
-
-          &__value {
-            color: $darkText;
-            font-weight: $fw-semibold;
-          }
-        }
-
-        .tax-sections {
-          border-bottom: 1px solid $truegray-300;
-
-          &__sec {
-            .sec-title {
-              font-size: 12px;
-              color: $text-500;
-            }
-
-            .sec-label {
-              padding-bottom: 5px;
-              &__label {
-                color: $text-500;
-              }
-
-              &__value {
-                color: $darkText;
-                font-weight: $fw-semibold;
-              }
-            }
-          }
-        }
-
-        .total {
-          color: $success-500;
-          font-weight: $fw-medium;
-        }
-
-        .amount {
-          color: $black;
-          font-weight: $fw-medium;
-          padding-bottom: 4px;
-          border-bottom: 1px solid $truegray-300;
-          margin-bottom: 10px;
-        }
-
-        .tax-notification {
-          margin-top: 10px;
-          margin-bottom: 10px;
-          background-color: $blueGray-100;
-          color: $blueGray-500;
-          padding: 10px;
-        }
-
-        .double-state {
-          &__state {
-            font-weight: $fw-medium;
-
-            .state-label {
-              font-size: 12px;
-              color: $text-500;
-              margin-bottom: 2px;
-            }
-
-            .state-status {
-              display: flex;
-              align-items: center;
-              gap: 5px;
-
-              i {
-                font-size: 9px;
-              }
-
-              &__text {
-                color: $darkText;
-              }
-            }
-          }
-        }
-
-        .triple-state {
-          padding-top: 10px;
-
-          &__state {
-            font-weight: $fw-medium;
-
-            .state-label {
-              font-size: 12px;
-              color: $text-500;
-              margin-bottom: 2px;
-            }
-
-            .state-status {
-              display: flex;
-              align-items: center;
-              gap: 5px;
-
-              i {
-                font-size: 9px;
-              }
-
-              &__text {
-                color: $darkText;
-              }
-            }
-          }
-        }
-
-        .tax-alert {
-          gap: 7px;
-          font-size: 12px;
-          color: $text-500;
-          margin-top: 15px;
-          padding-top: 15px;
-          border-top: 1px solid $truegray-300;
-
-          i {
-            font-size: 20px;
-            color: $darkBlue-500;
-          }
-        }
-      }
-    }
-
-    &.tp {
-      &::after {
-        content: '';
-        position: absolute;
-        background-color: $white;
-
-        width: 16px;
-        height: 16px;
-        bottom: -8px;
-        transform: rotate(-45deg);
-        z-index: -1;
-      }
-
-      &--center {
-        &::after {
-          left: 47%;
-        }
-      }
-
-      &--right {
-        &::after {
-          bottom: -4px;
-          right: 20px;
-        }
-      }
-
-      &--left {
-        &::after {
-          bottom: -4px;
-          left: 20px;
-        }
-      }
-
-      &--top-center {
-        &::after {
-          top: -10px;
-          left: 47%;
-        }
-      }
-
-      &--top-right {
-        &::after {
-          top: -4px;
-          right: 20px;
-        }
-      }
-
-      &--top-left {
-        &::after {
-          top: -4px;
-          left: 20px;
-        }
-      }
-    }
-  }
-}