dgrcorrientes-modulos 1.0.2 → 1.0.4

package/src/stories/Components/Tooltip/Tooltip.stories.tsx

@@ -1,125 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Tooltip} from './Tooltip';
-
-export default {
-  title: 'Components/Tooltip',
-  component: Tooltip,
-  args: {
-    contentType: 'text',
-    trianglePos: 'center',
-    active: true,
-  },
-} as ComponentMeta<typeof Tooltip>;
-
-const Template: ComponentStory<typeof Tooltip> = args => <Tooltip {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {
-  contentType: 'text',
-  text: 'Usá esta Base Imponible para tu declaración de Bienes Personales 2020',
-};
-
-export const Example1 = Template.bind({});
-Example1.args = {
-  contentType: 'calendar',
-  date: '14 de Julio',
-  sub_title: 'CUIT terminado en 8 y 9',
-  text: 'CONTRIBUYENTES DEL IMPUESTO SOBRE LOS INGRESOS BRUTOS – DECLARACIÓN JURADA MENSUAL',
-};
-
-export const Example2 = Template.bind({});
-Example2.args = {
-  contentType: 'taxes',
-  principal_item: {label: 'Impuesto inicial', value: '$ 8.700,50'},
-  sections: [
-    {
-      title: 'Descuentos',
-      labels: [
-        {label: '30% por estar al día', value: '- $ 1.400,00'},
-        {label: '15% por cuota única', value: '- $ 660,00'},
-      ],
-    },
-  ],
-  total: {label: 'Total a pagar', value: '$ 5.900,50'},
-  notification: 'Ahorrá 5% extra pagando online.',
-  doubleStates: [
-    {label: 'Planes', sub_label: 'No apta plan'},
-    {label: 'Estado', sub_label: 'A vencer', type: 'state', colorStatus: '#22c55e'},
-  ],
-};
-
-export const Example3 = Template.bind({});
-if (Example1.args.sections) {
-  Example3.args = {
-    ...Example2.args,
-    sections: [
-      ...Example1.args.sections,
-      {
-        title: 'Extras',
-        labels: [{label: 'Municipalidad Anisacate', value: '+ $ 740,00'}],
-      },
-    ],
-  };
-} else {
-  Example3.args = {
-    ...Example2.args,
-    sections: [
-      {
-        title: 'Extras',
-        labels: [{label: 'Municipalidad Anisacate', value: '+ $ 740,00'}],
-      },
-    ],
-  };
-}
-
-export const Example4 = Template.bind({});
-Example4.args = {
-  ...Example2.args,
-  principal_item: {label: 'Impuesto inicial', value: '$ 38.700,50'},
-  sections: [
-    {
-      title: 'Descuentos',
-      labels: [
-        {label: '30% por estar al día', value: '- $ 11.400,00'},
-        {label: '15% por cuota única', value: '- $ 3.400,00'},
-        {label: 'Cupón de crédito 2020', value: '- $ 3.012,00'},
-        {label: 'Tope por ley', value: '- $ 3.000,00'},
-        {label: 'Tope por ley 2', value: '- $ 4.000,00'},
-      ],
-    },
-  ],
-  total: {label: 'Total a pagar', value: '$ 21.093,50'},
-  notification: 'Sin el 5% de descuento extra de las buenas prácticas agropecuarias.',
-  alert: {
-    icon: 'fa-solid fa-circle-info',
-    label: 'El Tope en el Aumento 2021 es el valor que limita los incrementos en tu Impuesto Inmobiliario.',
-  },
-  tripleStates: [
-    {label: 'Anulado', sub_label: 'No'},
-    {label: 'Inscripto', sub_label: 'No'},
-    {label: 'Registro', sub_label: 'Duplicado', sub_label_color: '#FAC300'},
-  ],
-};
-
-export const Example5 = Template.bind({});
-Example5.args = {
-  contentType: 'taxes',
-  sections: [
-    {
-      labels: [
-        {label: 'Imponible', value: '$ 103.795,00'},
-        {label: 'Alícuota', value: '$ 2,00'},
-      ],
-    },
-  ],
-  amount: {label: 'Importe', value: '$ 2.071,90'},
-  doubleStates: [
-    {label: 'Factura', sub_label: 'Error', sub_label_color: '#DA1414'},
-    {label: 'Fecha', sub_label: 'Periodo Incorrecto', sub_label_color: '#DA1414'},
-  ],
-  tripleStates: [
-    {label: 'Anulado', sub_label: 'No'},
-    {label: 'Inscripto', sub_label: 'Si'},
-    {label: 'Registro', sub_label: 'Duplicado', sub_label_color: '#FAC300'},
-  ],
-};

package/src/stories/Components/Tooltip/Tooltip.tsx

@@ -1,222 +0,0 @@
-import React from 'react';
-import './Tooltip.scss';
-import {Icon} from '../../Elements/Icon/Icon';
-
-export interface ITooltip extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  contentType: 'calendar' | 'text' | 'taxes';
-  trianglePos?: 'none' | 'right' | 'center' | 'left' | 'top-right' | 'top-center' | 'top-left';
-
-  // boolean
-  active?: boolean;
-
-  // react
-  className?: string;
-
-  // ALL TYPES
-  text?: string;
-
-  // CALENDAR
-  date?: string;
-  sub_title?: string;
-
-  // TAXES base
-  principal_item?: {label: string; value: string};
-  sections?: {title?: string; labels: {label: string; value: string}[]}[];
-  total?: {label: string; value: string};
-  amount?: {label: string; value: string};
-  import?: {label: string; value: string};
-  notification?: string;
-
-  doubleStates?: {label?: string; sub_label?: string; sub_label_color?: string; type?: 'default' | 'state'; colorStatus?: string}[];
-  tripleStates?: {label?: string; sub_label?: string; sub_label_color?: string; type?: 'default' | 'state'; colorStatus?: string}[];
-
-  alert?: {icon?: string; label: string};
-}
-
-export const Tooltip = ({
-  contentType,
-  trianglePos,
-  className,
-  active,
-  text,
-  date,
-  sub_title,
-  principal_item,
-  sections,
-  total,
-  amount,
-  notification,
-  doubleStates,
-  tripleStates,
-  alert,
-  ...props
-}: ITooltip) => {
-  return (
-    <>
-      {active ? (
-        <div className="elv-component elv-tooltip" {...props}>
-          <div className={`tooltip ${className ? className : ''}`}>
-            <div
-              className={`tooltip__content ${contentType && 'tooltip__content--' + contentType} ${
-                trianglePos !== 'none' && 'tp tp--' + trianglePos
-              }`}
-            >
-              <div className={`labels is-flex flex-column`}>
-                {/* ================ CALENDAR ================ */}
-                {contentType === 'calendar' && (
-                  <>
-                    <p className="labels__date">{date}</p>
-                    <p className="labels__text">{text}</p>
-                    <p className="labels__sub_title">{sub_title}</p>
-                  </>
-                )}
-
-                {/* ================ TEXT ================ */}
-                {contentType === 'text' && <>{text && <p className="labels__text">{text}</p>}</>}
-
-                {/* ================ TAXES ================ */}
-                {contentType === 'taxes' && (
-                  <>
-                    {principal_item && (
-                      <div className="principal-item is-flex is-justify-content-space-between">
-                        <p className="principal-item__label">{principal_item?.label}</p>
-                        <p className="principal-item__value">{principal_item?.value}</p>
-                      </div>
-                    )}
-
-                    {sections && (
-                      <div className="tax-sections">
-                        {sections?.map(sec => (
-                          <div key={sec.title} className="tax-sections__sec">
-                            {sec.title && <div className="sec-title">{sec.title}</div>}
-                            {sec.labels.map(item => (
-                              <div key={item.label} className="sec-label is-flex is-justify-content-space-between">
-                                <p className="sec-label__label">{item.label}</p>
-                                <p className="sec-label__value">{item.value}</p>
-                              </div>
-                            ))}
-                          </div>
-                        ))}
-                      </div>
-                    )}
-
-                    {total && (
-                      <div className="total is-flex is-justify-content-space-between">
-                        <p className="total__label">{total?.label}</p>
-                        <p className="total__value">{total?.value}</p>
-                      </div>
-                    )}
-
-                    {amount && (
-                      <div className="amount is-flex is-justify-content-space-between">
-                        <p className="amount__label">{amount?.label}</p>
-                        <p className="amount__value">{amount?.value}</p>
-                      </div>
-                    )}
-
-                    {notification && <div className="tax-notification">{notification}</div>}
-
-                    {doubleStates && (
-                      <div className="double-state columns is-mobile">
-                        <div className="double-state__state column is-6">
-                          <p className="state-label">{doubleStates[0]?.label}</p>
-                          {doubleStates[0].type === 'state' ? (
-                            <div className="state-status" style={{color: doubleStates[0]?.colorStatus}}>
-                              <Icon icon="fa-solid fa-circle"></Icon>{' '}
-                              <p className="state-status__text" style={{color: doubleStates[0]?.sub_label_color}}>
-                                {doubleStates[0]?.sub_label}
-                              </p>
-                            </div>
-                          ) : (
-                            <p className="state-sub_label" style={{color: doubleStates[0]?.sub_label_color}}>
-                              {doubleStates[0]?.sub_label}
-                            </p>
-                          )}
-                        </div>
-                        <div className="double-state__state column is-6">
-                          <p className="state-label">{doubleStates[1]?.label}</p>
-                          {doubleStates[1].type === 'state' ? (
-                            <div className="state-status" style={{color: doubleStates[1]?.colorStatus}}>
-                              <Icon icon="fa-solid fa-circle"></Icon>{' '}
-                              <p className="state-status__text" style={{color: doubleStates[1]?.sub_label_color}}>
-                                {doubleStates[1]?.sub_label}
-                              </p>
-                            </div>
-                          ) : (
-                            <p className="state-sub_label" style={{color: doubleStates[1]?.sub_label_color}}>
-                              {doubleStates[1]?.sub_label}
-                            </p>
-                          )}
-                        </div>
-                      </div>
-                    )}
-
-                    {tripleStates && (
-                      <div className="triple-state columns is-mobile">
-                        <div className="triple-state__state column is-4">
-                          <p className="state-label">{tripleStates[0]?.label}</p>
-                          {tripleStates[0].type === 'state' ? (
-                            <div className="state-status" style={{color: tripleStates[0]?.colorStatus}}>
-                              <Icon icon="fa-solid fa-circle"></Icon>{' '}
-                              <p className="state-status__text" style={{color: tripleStates[0]?.sub_label_color}}>
-                                {tripleStates[0]?.sub_label}
-                              </p>
-                            </div>
-                          ) : (
-                            <p className="state-sub_label" style={{color: tripleStates[0]?.sub_label_color}}>
-                              {tripleStates[0]?.sub_label}
-                            </p>
-                          )}
-                        </div>
-                        <div className="triple-state__state column is-4">
-                          <p className="state-label">{tripleStates[1]?.label}</p>
-                          {tripleStates[1].type === 'state' ? (
-                            <div className="state-status" style={{color: tripleStates[1]?.colorStatus}}>
-                              <Icon icon="fa-solid fa-circle"></Icon>{' '}
-                              <p className="state-status__text" style={{color: tripleStates[1]?.sub_label_color}}>
-                                {tripleStates[1]?.sub_label}
-                              </p>
-                            </div>
-                          ) : (
-                            <p className="state-sub_label" style={{color: tripleStates[1]?.sub_label_color}}>
-                              {tripleStates[1]?.sub_label}
-                            </p>
-                          )}
-                        </div>
-                        <div className="triple-state__state column is-4">
-                          <p className="state-label">{tripleStates[2]?.label}</p>
-                          {tripleStates[2].type === 'state' ? (
-                            <div className="state-status" style={{color: tripleStates[2]?.colorStatus}}>
-                              <Icon icon="fa-solid fa-circle"></Icon>{' '}
-                              <p className="state-status__text" style={{color: tripleStates[2]?.sub_label_color}}>
-                                {tripleStates[2]?.sub_label}
-                              </p>
-                            </div>
-                          ) : (
-                            <p className="state-sub_label" style={{color: tripleStates[2]?.sub_label_color}}>
-                              {tripleStates[2]?.sub_label}
-                            </p>
-                          )}
-                        </div>
-                      </div>
-                    )}
-
-                    {alert && (
-                      <div className="tax-alert is-flex">
-                        {alert?.icon && <Icon icon={alert?.icon}></Icon>}
-                        <p className="tax-alert__label">{alert?.label}</p>
-                      </div>
-                    )}
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <></>
-      )}
-    </>
-  );
-};

package/src/stories/Elements/Alert/Alert.stories.tsx

@@ -1,65 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Alert} from './Alert';
-
-export default {
-  title: 'Elements/Alert',
-  component: Alert,
-  args: {
-    type: 'info',
-    fill: 'solid',
-    accent: 'none',
-    icon: {control: 'text'},
-    isButton: false,
-    button: [
-      {
-        type: 'button',
-        size: 'small',
-        fill: 'solid',
-        loading: false,
-        disabled: false,
-        label: 'Ver Todo',
-        trailingIcon: true,
-      },
-    ],
-    labelTitle: {control: 'text'},
-    label: {control: 'text'},
-  },
-} as ComponentMeta<typeof Alert>;
-
-const Template: ComponentStory<typeof Alert> = args => <Alert {...args} />;
-
-export const Info = Template.bind({});
-Info.args = {
-  type: 'info',
-  fill: 'solid',
-  icon: 'fa-solid fa-circle-info',
-  labelTitle: 'Prueba título con <a href="https://www.google.com">link</a> en el medio.',
-  label: 'Prueba título con <a href="https://www.google.com">link</a> en el medio.',
-};
-
-export const Success = Template.bind({});
-Success.args = {
-  type: 'success',
-  fill: 'solid',
-  icon: 'fa-solid fa-circle-check',
-  labelTitle: 'Prueba título con <a href="https://www.google.com">link</a> en el medio.',
-  label: 'Prueba título con <a href="https://www.google.com">link</a> en el medio.',
-};
-
-export const Warning = Template.bind({});
-Warning.args = {
-  type: 'warning',
-  fill: 'solid',
-  icon: 'fa-solid fa-circle-exclamation',
-  labelTitle: 'Prueba título con <a href="https://www.google.com">link</a> en el medio.',
-  label: 'Prueba título con <a href="https://www.google.com">link</a> en el medio.',
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  type: 'error',
-  fill: 'solid',
-  icon: 'fa-solid fa-triangle-exclamation',
-  labelTitle: 'Prueba título con <a href="https://www.google.com">link</a> en el medio.',
-  label: 'Prueba título con <a href="https://www.google.com">link</a> en el medio.',
-};

package/src/stories/Elements/Alert/Alert.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import {Button, IButton} from '../Button/Button';
-import './alert.scss';
-
-export interface IAlert extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  type: 'info' | 'success' | 'error' | 'warning';
-  fill: 'solid' | 'outline' | 'outline-light';
-  accent: 'none' | 'left' | 'top';
-  icon?: any;
-  labelTitle?: any;
-  label: any;
-
-  // boolean
-  isButton: boolean;
-  button?: IButton[];
-
-  // react
-  className?: string;
-}
-
-export const Alert = ({type, className, fill, accent, icon, labelTitle, label, isButton, button, ...props}: IAlert) => {
-  return (
-    <div className="elv-component elv-notification" {...props}>
-      <div className={`notification --type-${type} --fill-${fill} --accent-${accent} ${className ? className : ''}`}>
-        {icon && (
-          <div className="notification__icon">
-            <i className={`__icon ${icon}`}></i>
-          </div>
-        )}
-        <div className="notification__text">
-          {labelTitle !== undefined && (
-            <p className="__title">
-              <div dangerouslySetInnerHTML={{__html: labelTitle}} />
-            </p>
-          )}
-          <p className="__label">
-            <div dangerouslySetInnerHTML={{__html: label}} />
-          </p>
-          {isButton && button !== undefined && (
-            <div className="notification__button">
-              <Button {...button[0]} />
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/stories/Elements/Alert/alert.scss

@@ -1,189 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.notification {
-  display: flex;
-  padding: 0px;
-  word-wrap: break-word;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-
-  &.--type- {
-    &info {
-      &.--fill- {
-        &solid {
-          background-color: $info-700;
-          color: $text-50;
-        }
-
-        &outline {
-          background-color: white;
-          border: 1px solid $info-700;
-
-          .__icon {
-            color: $info-700;
-          }
-        }
-
-        &outline-light {
-          background-color: $info-200;
-
-          .__icon {
-            color: $info-700;
-          }
-
-          &.--accent- {
-            &left {
-              border-left: 4px solid $info-700;
-            }
-
-            &top {
-              border-top: 4px solid $info-700;
-            }
-          }
-        }
-      }
-    }
-
-    &success {
-      &.--fill- {
-        &solid {
-          background-color: $success-700;
-          color: $text-50;
-        }
-
-        &outline {
-          background-color: white;
-          border: 1px solid $success-700;
-
-          .__icon {
-            color: $success-700;
-          }
-        }
-
-        &outline-light {
-          background-color: $success-200;
-
-          .__icon {
-            color: $success-700;
-          }
-
-          &.--accent- {
-            &left {
-              border-left: 4px solid $success-700;
-            }
-
-            &top {
-              border-top: 4px solid $success-700;
-            }
-          }
-        }
-      }
-    }
-
-    &warning {
-      &.--fill- {
-        &solid {
-          background-color: $warning-700;
-          color: $text-50;
-        }
-
-        &outline {
-          background-color: white;
-          border: 1px solid $warning-700;
-
-          .__icon {
-            color: $warning-600;
-          }
-        }
-
-        &outline-light {
-          background-color: $warning-200;
-
-          .__icon {
-            color: $warning-700;
-          }
-
-          &.--accent- {
-            &left {
-              border-left: 4px solid $warning-700;
-            }
-
-            &top {
-              border-top: 4px solid $warning-700;
-            }
-          }
-        }
-      }
-    }
-
-    &error {
-      &.--fill- {
-        &solid {
-          background-color: $error-700;
-          color: $text-50;
-        }
-
-        &outline {
-          background-color: white;
-          border: 1px solid $error-700;
-
-          .__icon {
-            color: $error-600;
-          }
-        }
-
-        &outline-light {
-          background-color: $error-200;
-
-          .__icon {
-            color: $error-700;
-          }
-
-          &.--accent- {
-            &left {
-              border-left: 4px solid $error-700;
-            }
-
-            &top {
-              border-top: 4px solid $error-700;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &__icon {
-    width: 20px;
-    display: block;
-    padding-left: 13px;
-    padding-top: 17px;
-  }
-
-  &__text {
-    padding-left: 9px;
-    margin-top: 13px;
-    margin-bottom: 13px;
-    width: auto;
-
-    .__title {
-      font-weight: $fw-semibold;
-      margin-top: 3px;
-      margin-bottom: 0px;
-    }
-
-    .__label {
-      margin-top: 4px;
-      margin-bottom: 4px;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 21px;
-    }
-  }
-
-  &__button {
-    width: 100%;
-    margin: 10px 0px 3px 0px;
-  }
-}

package/src/stories/Elements/Badge/Badge.stories.tsx

@@ -1,15 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Badge} from './Badge';
-
-export default {
-  title: 'Elements/Badge',
-  component: Badge,
-  args: {
-    color: 'primary',
-    text: 'Badge',
-  },
-} as ComponentMeta<typeof Badge>;
-
-const Template: ComponentStory<typeof Badge> = args => <Badge {...args} />;
-
-export const Solid = Template.bind({});

package/src/stories/Elements/Badge/Badge.tsx

@@ -1,21 +0,0 @@
-import './badge.scss';
-
-export interface BadgeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  color: string;
-  text: string;
-  colorText?: string;
-
-  // react
-  className?: string;
-}
-
-export const Badge = ({color, className, text, colorText, ...props}: BadgeProps) => {
-  return (
-    <div className="elv-component elv-badge" {...props}>
-      <span style={{backgroundColor: color, color: colorText}} className={`badge badge--${color} ${className ? className : ''}`}>
-        {text}
-      </span>
-    </div>
-  );
-};