dgrcorrientes-modulos 1.0.0

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

@@ -0,0 +1,125 @@
+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

@@ -0,0 +1,222 @@
+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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,189 @@
+@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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,21 @@
+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>
+  );
+};