dgrcorrientes-modulos 1.0.0

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

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

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