dgrcorrientes-modulos 1.0.2 → 1.0.4

package/src/stories/Components/Cart/Cart.stories.tsx

@@ -1,350 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Cart} from './Cart';
-
-export default {
-  title: 'Components/Cart',
-  component: Cart,
-  args: {},
-} as ComponentMeta<typeof Cart>;
-
-const Template: ComponentStory<typeof Cart> = args => <Cart {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {
-  contentType: 'perception',
-  footerType: 'button',
-  wallet: 'none',
-  title: 'Percepción',
-  button: [
-    {
-      type: 'button',
-      color: 'primary',
-      size: 'normal',
-      fill: 'solid',
-      loading: false,
-      disabled: false,
-      label: 'Pagar',
-      trailingIcon: true,
-      onClick: () => console.log('Button Clicked'),
-    },
-  ],
-  optionButton: {
-    type: 'button',
-    color: 'primary',
-    size: 'normal',
-    fill: 'unstyled',
-    loading: false,
-    disabled: false,
-    isOnlyIcon: true,
-    icon: 'fa-solid fa-ellipsis-vertical',
-    onClick: () => console.log('OptionButton Clicked'),
-  },
-  list: [
-    {
-      label: 'Cantidad no anuladas',
-      sub_label: 'sub_label 1',
-      value: '$ 300',
-    },
-    {
-      label: 'Cantidad no anuladas',
-      sub_label: 'sub_label 2',
-      value: '$ 300',
-    },
-    {
-      label: 'Cantidad no anuladas',
-      sub_label: 'sub_label 3',
-      value: '$ 300',
-    },
-  ],
-  total: {label: 'Total a pagar', values: [{value: '$ 5.900'}]},
-};
-
-export const Example1 = Template.bind({});
-Example1.args = {
-  contentType: 'perception',
-  footerType: 'button',
-  wallet: 'none',
-  title: 'Percepción',
-  button: [
-    {
-      type: 'button',
-      color: 'primary',
-      size: 'normal',
-      fill: 'solid',
-      loading: false,
-      disabled: false,
-      label: 'Pagar',
-      trailingIcon: true,
-      onClick: () => console.log('Button Clicked'),
-    },
-  ],
-  optionButton: {
-    type: 'button',
-    color: 'primary',
-    size: 'normal',
-    fill: 'unstyled',
-    loading: false,
-    disabled: false,
-    isOnlyIcon: true,
-    icon: 'fa-solid fa-ellipsis-vertical',
-    trailingIcon: true,
-    onClick: () => console.log('OptionButton Clicked'),
-  },
-  list: [
-    {
-      label: 'Cantidad no anuladas',
-      sub_label: 'sub_label 1',
-      value: '$ 300',
-    },
-    {
-      label: 'Cantidad no anuladas',
-      sub_label: 'sub_label 2',
-      value: '$ 300',
-    },
-    {
-      label: 'Cantidad no anuladas',
-      sub_label: 'sub_label 3',
-      value: '$ 300',
-    },
-  ],
-  sub_list: [
-    {
-      label: 'Importe Actualizado',
-      color: '#09101D',
-      value: '$ 54.000',
-    },
-    {
-      label: 'Subtotales',
-      color: '#124596',
-      value: '$ 46.661',
-    },
-    {
-      label: 'Diferencia',
-      color: '#124596',
-      value: '$ 46.661',
-    },
-  ],
-  total: {label: 'Total a pagar', label_color: 'red', values: [{value: '$ 5.900', value_color: 'red'}]},
-};
-
-export const Example2 = Template.bind({});
-Example2.args = {
-  contentType: 'bonds',
-  footerType: 'button',
-  wallet: 'icon',
-  button: [
-    {
-      type: 'button',
-      color: 'primary',
-      size: 'normal',
-      fill: 'solid',
-      loading: false,
-      disabled: false,
-      label: 'Pagar',
-      trailingIcon: true,
-      onClick: () => console.log('Button Clicked'),
-    },
-  ],
-  list: [
-    {
-      label: 'DÓLAR',
-      sub_label: 'Compra',
-      value: '$ 172,50',
-    },
-    {
-      label: 'DÓLAR',
-      sub_label: 'Venta',
-      value: '$ 180,50',
-    },
-  ],
-  interLabel: 'DOL 1 = ARS 1',
-  isInterLabelCenter: true,
-  total: {label: 'Total a pagar', values: [{value: '$ 1.118.586'}]},
-};
-
-// export const BondsMobile = Template.bind({});
-// BondsMobile.args = {
-//   contentType: 'bonds',
-//   footerType: 'total-button',
-//   wallet: 'dropdownButton',
-//   button: [
-//     {
-//       type: 'button',
-//       color: 'primary',
-//       fill: 'solid',
-//       loading: false,
-//       disabled: false,
-//       label: 'Pagar',
-//       trailingIcon: true,
-//       onClick: () => console.log('Button Clicked'),
-//     },
-//   ],
-//   optionButton: {
-//     type: 'button',
-//     color: 'primary',
-//     fill: 'unstyled',
-//     loading: false,
-//     disabled: false,
-//     label: '',
-//     icon: 'fa-solid fa-chevron-down',
-//     trailingIcon: true,
-//     onClick: () => console.log('OptionButton Clicked'),
-//   },
-//   list: [
-//     {
-//       label: 'DÓLAR',
-//       sub_label: 'Compra',
-//       value: '$ 172,50',
-//     },
-//     {
-//       label: 'DÓLAR',
-//       sub_label: 'Venta',
-//       value: '$ 180,50',
-//     },
-//   ],
-//   interLabel: 'DOL 1 = ARS 1',
-//   isInterLabelCenter: true,
-//   total: {label: 'Total a pagar', values: [{value: '$ 1.118.586'}]},
-// };
-
-export const Example3 = Template.bind({});
-Example3.args = {
-  contentType: 'bonds',
-  footerType: 'big-total-button',
-  wallet: 'icon',
-  button: [
-    {
-      type: 'button',
-      color: 'primary',
-      size: 'normal',
-      fill: 'solid',
-      loading: false,
-      disabled: false,
-      label: 'Pagar',
-      trailingIcon: true,
-      onClick: () => console.log('Button Clicked'),
-    },
-  ],
-  list: [
-    {
-      label: 'DÓLAR',
-      sub_label: 'Compra',
-      value: '$ 172,50',
-    },
-    {
-      label: 'DÓLAR',
-      sub_label: 'Venta',
-      value: '$ 180,50',
-    },
-  ],
-  interLabel: 'DOL 1 = ARS 1',
-  isInterLabelCenter: true,
-  total: {label: 'Total a pagar', values: [{value: '$ 1.118.586'}]},
-};
-
-export const Example4 = Template.bind({});
-Example4.args = {
-  contentType: 'none',
-  footerType: 'big-total-button-sub',
-  wallet: 'icon',
-  button: [
-    {
-      type: 'button',
-      color: 'primary',
-      size: 'normal',
-      fill: 'solid',
-      loading: false,
-      disabled: false,
-      label: 'Pagar',
-      trailingIcon: true,
-      onClick: () => console.log('Button Clicked'),
-    },
-  ],
-  total: {label: 'Total a pagar', sub_label: 'de 11 obligaciones seleccionadas', values: [{value: '$ 1.118.586', sub_value: '$ 837,35'}]},
-};
-
-export const Example5 = Template.bind({});
-Example5.args = {
-  contentType: 'none',
-  footerType: 'big-total-button-sub',
-  wallet: 'icon',
-  button: [
-    {
-      type: 'button',
-      color: 'primary',
-      size: 'normal',
-      fill: 'solid',
-      loading: false,
-      disabled: false,
-      label: 'Pagar',
-      trailingIcon: true,
-      onClick: () => console.log('Button Clicked'),
-    },
-  ],
-  total: {
-    label: 'Total a pagar',
-    sub_label: 'de 0 créditos seleccionadas',
-    values: [{value: '$ 0,00', value_color: '#16A34A', sub_desc: 'COMPENSACIÓN A UTILIZAR'}],
-  },
-};
-
-export const Example6 = Template.bind({});
-Example6.args = {
-  contentType: 'none',
-  footerType: 'big-total-button-sub',
-  wallet: 'icon',
-  button: [
-    {
-      type: 'button',
-      color: 'primary',
-      size: 'normal',
-      fill: 'solid',
-      loading: false,
-      disabled: false,
-      label: 'Pagar',
-      trailingIcon: true,
-      onClick: () => console.log('Button Clicked'),
-    },
-    {
-      type: 'button',
-      color: 'primary',
-      size: 'normal',
-      fill: 'unstyled',
-      loading: false,
-      disabled: false,
-      label: 'Volver',
-      trailingIcon: true,
-      onClick: () => console.log('Button Clicked'),
-    },
-  ],
-  total: {
-    label: 'Total a pagar',
-    sub_label: 'de 0 créditos seleccionadas',
-    values: [
-      {value: '$ 8.230,23', value_color: '#16A34A', sub_desc: 'COMPENSACIÓN A UTILIZAR'},
-      {value: '$ 0,00', value_color: '#124596', sub_desc: 'COMPENSACIÓN RESTANTE'},
-      {value: '$ 9.322,63', value_color: '#DC2626', sub_desc: 'MONTO SELECCIONADO'},
-    ],
-    value_description: 'El monto seleccionado supera el monto del crédito por lo que hay obligaciones que se cubrirán parcialmente.',
-  },
-};
-
-// export const DefaultMobile = Template.bind({});
-// DefaultMobile.args = {
-//   contentType: 'none',
-//   footerType: 'total-button-sub-mobile',
-//   wallet: 'none',
-//   button: [
-//     {
-//       type: 'button',
-//       color: 'primary',
-//       fill: 'solid',
-//       loading: false,
-//       disabled: false,
-//       label: 'Pagar',
-//       trailingIcon: true,
-//       onClick: () => console.log('Button Clicked'),
-//     },
-//   ],
-//   total: {label: 'Total a pagar', sub_label: 'de 11 obligaciones seleccionadas', values: [{value: '$ 1.118.586', sub_value: '$ 837,35'}]},
-// };

package/src/stories/Components/Cart/Cart.tsx

@@ -1,277 +0,0 @@
-import React from 'react';
-import {Button, IButton} from '../../Elements/Button/Button';
-import './Cart.scss';
-import {generateRandomKey, shortenText} from '../../../utils/functions';
-import {Icon} from '../../Elements/Icon/Icon';
-
-export interface ICart extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  contentType: 'perception' | 'bonds' | 'none';
-  footerType?: 'button' | 'total-button' | 'big-total-button' | 'big-total-button-sub' | 'total-button-sub-mobile';
-  button?: IButton[];
-  className?: string;
-
-  // WALLET TOP
-  wallet?: 'none' | 'icon' | 'dropdownButton';
-  walletIcon?: string;
-  walletSVG?: string;
-
-  //ALL TYPES
-  list?: {
-    label: string;
-    sub_label?: string;
-    value: string;
-  }[];
-  total?: {
-    label: string;
-    label_color?: string;
-
-    sub_label?: string;
-    sub_label_color?: string;
-
-    values: {
-      value: string;
-      value_color?: string;
-      sub_desc?: string;
-      sub_desc_color?: string;
-      sub_value?: string;
-      sub_value_color?: string;
-    }[];
-
-    value_description?: string;
-  };
-
-  // PERCEPTION
-  title?: string;
-  optionButton?: IButton;
-  sub_list?: {label: string; value: string; color?: string}[];
-
-  // BONDS
-  interLabel?: string;
-  isInterLabelCenter?: boolean;
-}
-
-export const Cart = ({
-  button,
-  title,
-  optionButton,
-  sub_list,
-  wallet,
-  walletIcon,
-  walletSVG,
-  contentType,
-  footerType,
-  interLabel,
-  isInterLabelCenter,
-  list,
-  total,
-  className,
-  ...props
-}: ICart) => {
-  return (
-    <div className="elv-component elv-cart" {...props}>
-      <div className={`cart ${className ? className : ''}`}>
-        {/* ============================================================================================================================== */}
-        {/* ======================= WALLET TYPES ======================= */}
-        {wallet === 'icon' && (
-          <div className="cart__wallet--icon is-flex is-align-items-center is-justify-content-center">
-            {walletSVG ? (
-              <Icon type="svg_icon" icon={walletSVG}></Icon>
-            ) : (
-              <Icon icon={walletIcon ? walletIcon : 'fa-solid fa-wallet'}></Icon>
-            )}
-          </div>
-        )}
-        {wallet === 'dropdownButton' && (
-          <div className="cart__wallet--dropdownButton is-flex is-justify-content-end">
-            {optionButton && (
-              <Button
-                type={optionButton.type}
-                size={optionButton.size}
-                fill={optionButton.fill}
-                loading={false}
-                disabled={optionButton.disabled}
-                icon={optionButton.icon}
-                label={optionButton.label !== undefined ? shortenText(optionButton.label, 25) : ''}
-                trailingIcon={optionButton.trailingIcon}
-                onClick={optionButton.onClick}
-              />
-            )}
-          </div>
-        )}
-
-        {/* ============================================================================================================================== */}
-        {/* ======================= CONTENT TYPES ======================= */}
-        <div className={`cart__content`}>
-          {contentType === 'perception' && (
-            <div className="perception is-flex is-flex-direction-column">
-              <div className="perception__title is-flex is-justify-content-space-between">
-                <p className="title is-5">{title}</p>
-                {optionButton && (
-                  <Button
-                    type={optionButton.type}
-                    size={optionButton.size}
-                    fill={optionButton.fill}
-                    loading={false}
-                    disabled={optionButton.disabled}
-                    icon={optionButton.icon}
-                    label={optionButton.label !== undefined ? shortenText(optionButton.label, 25) : ''}
-                    trailingIcon={optionButton.trailingIcon}
-                    onClick={optionButton.onClick}
-                  />
-                )}
-              </div>
-              <div className="perception__labels">
-                {list?.map(item => (
-                  <div key={generateRandomKey()} className="item is-flex is-justify-content-space-between">
-                    <p className="item__label">{item.label}</p>
-                    <p className="item__value">{item.value}</p>
-                  </div>
-                ))}
-              </div>
-              {sub_list && (
-                <div className="perception__sub-list">
-                  {sub_list?.map(item => (
-                    <div key={generateRandomKey()} className="item is-flex is-justify-content-space-between" style={{color: item.color}}>
-                      <p className="item__label">{item.label}</p>
-                      <p className="item__value">{item.value}</p>
-                    </div>
-                  ))}
-                </div>
-              )}
-              <div className="perception__total is-flex is-justify-content-space-between">
-                <p className="total-label" style={total?.label_color ? {color: total.label_color} : {}}>
-                  {total?.label}
-                </p>
-                <p className="total-value" style={total?.values[0].value_color ? {color: total.values[0].value_color} : {}}>
-                  {total?.values[0].value}
-                </p>
-              </div>
-            </div>
-          )}
-          {contentType === 'bonds' && (
-            <div className="bods is-flex is-flex-direction-column">
-              {list && (
-                <div className="bonds__labels">
-                  <div className="item is-flex is-justify-content-space-between is-align-items-center">
-                    <div className="item__label">
-                      <p className="micro-label is-4">{list[0].label}</p>
-                      <p className="micro-sub_label">{list[0].sub_label}</p>
-                    </div>
-                    <p className="item__value">{list[0].value}</p>
-                  </div>
-                  <div className={`inter-label is-flex ${isInterLabelCenter ? 'is-justify-content-center' : ''}`}>
-                    <p>{interLabel}</p>
-                  </div>
-                  <div className="item is-flex is-justify-content-space-between is-align-items-center">
-                    <div className="item__label">
-                      <p className="micro-label">{list[1].label}</p>
-                      <p className="micro-sub_label">{list[1].sub_label}</p>
-                    </div>
-                    <p className="item__value">{list[1].value}</p>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* ============================================================================================================================== */}
-          {/* ====================== FOOTER TYPES ====================== */}
-          {footerType === 'button' && (
-            <div className="footer--button">
-              {button && (
-                <div className="button-list is-flex is-flex-direction-column">
-                  {button[0] && <Button {...button[0]} />}
-                  {button[1] && <Button {...button[1]} />}
-                </div>
-              )}
-            </div>
-          )}
-          {footerType === 'total-button' && (
-            <div className="footer--total-button is-flex is-justify-content-space-between is-align-items-center">
-              {total && (
-                <div className="total">
-                  <p className="total__label">{shortenText(total.label, 25)}</p>
-                  <p className="total__value">{shortenText(total.values[0].value, 25)}</p>
-                </div>
-              )}
-              {button && <Button {...button[0]} />}
-            </div>
-          )}
-          {footerType === 'big-total-button' && (
-            <div className="footer--big-total-button is-flex is-flex-direction-column is-justify-content-center is-align-items-center">
-              {total && (
-                <>
-                  <p className="total__label">{shortenText(total.label, 25)}</p>
-                  <p className="total__value">{shortenText(total.values[0].value, 25)}</p>
-                </>
-              )}
-              {button && (
-                <div className="button-list is-flex is-flex-direction-column">
-                  {button[0] && <Button {...button[0]} />}
-                  {button[1] && <Button {...button[1]} />}
-                </div>
-              )}
-            </div>
-          )}
-          {footerType === 'big-total-button-sub' && (
-            <div className="footer--big-total-button-sub is-flex is-flex-direction-column is-justify-content-center is-align-items-center">
-              {total && (
-                <>
-                  <p className="total__label">{shortenText(total.label, 35)}</p>
-                  {total.sub_label && (
-                    <p className="total__sub_label" style={total?.label_color ? {color: total.label_color} : {}}>
-                      {shortenText(total.sub_label, 35)}
-                    </p>
-                  )}
-                  {total.values[0].sub_value && (
-                    <p className="total__sub_value" style={total?.values[0].value_color ? {color: total.values[0].value_color} : {}}>
-                      {shortenText(total.values[0].sub_value, 35)}
-                    </p>
-                  )}
-
-                  {total.values.map(item => (
-                    <>
-                      {item.sub_desc && (
-                        <p
-                          key={generateRandomKey()}
-                          className="total__sub_desc"
-                          style={item.sub_desc_color ? {color: item.sub_desc_color} : {}}
-                        >
-                          {shortenText(item.sub_desc, 35)}
-                        </p>
-                      )}
-                      <p className="total__value" style={item.value_color ? {color: item.value_color} : {}}>
-                        {shortenText(item.value, 35)}
-                      </p>
-                    </>
-                  ))}
-
-                  {total.value_description && <p className="total__description">{total.value_description}</p>}
-                </>
-              )}
-              {button && (
-                <div className="button-list is-flex is-flex-direction-column">
-                  {button[0] && <Button {...button[0]} />}
-                  {button[1] && <Button {...button[1]} />}
-                </div>
-              )}
-            </div>
-          )}
-          {footerType === 'total-button-sub-mobile' && (
-            <div className="footer--total-button-sub-mobile is-flex is-justify-content-space-between is-align-items-center">
-              {total && (
-                <div className="total">
-                  <p className="total__label">{shortenText(total.label, 18)}</p>
-                  {total.sub_label && <p className="total__sub_label">{shortenText(total.sub_label, 50)}</p>}
-                  {total.values[0].sub_value && <p className="total__sub_value">{shortenText(total.values[0].sub_value, 21)}</p>}
-                  <p className="total__value">{shortenText(total.values[0].value, 16)}</p>
-                </div>
-              )}
-              {button && <Button {...button[0]} />}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};