dgrcorrientes-modulos 1.0.2 → 1.0.4

package/src/stories/Components/Cards/CardUser/CardUser.stories.tsx

@@ -1,135 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {CardUser} from './CardUser';
-import imglogo from '../../../assets/logo_rentas_corrientes_compacto.svg';
-import icon from '../../../Elements/Icon/icono.svg';
-
-export default {
-  title: 'Components/Cards/CardUser',
-  component: CardUser,
-  args: {
-    fill: 'outline',
-    list: [
-      {
-        icon: {icon: 'fa-solid fa-user'},
-        title: 'Juan Antonio Pérez',
-        subtitle: '20-20215992-8',
-        iconType: 'icon',
-        menuButton: {
-          size: 'large',
-          fill: 'unstyled',
-          icon: 'fa-solid fa-ellipsis-vertical',
-          type: 'button',
-          onClick: () => console.log('Button Clicked'),
-        },
-      },
-      {
-        icon: {icon: icon, type: 'svg_icon'},
-        title: 'Actividad',
-        subtitle: '54 DDJJ incumplidas',
-      },
-      {
-        img: imglogo,
-        title: 'Info extra',
-        subtitle: '54 DDJJ incumplidas',
-        iconType: 'img',
-        button: [
-          {
-            label: 'Cambiar',
-            size: 'small',
-            fill: 'link',
-            icon: 'fa-solid fa-circle-info',
-            type: 'button',
-            onClick: () => console.log('Button Clicked'),
-          },
-        ],
-      },
-      {
-        img: imglogo,
-        title: 'Periodo',
-        subtitle: '24/12/2022',
-        iconType: 'img',
-      },
-    ],
-  },
-} as ComponentMeta<typeof CardUser>;
-
-const Template: ComponentStory<typeof CardUser> = args => <CardUser {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {
-  fill: 'none',
-  button: [
-    {
-      label: 'Button',
-      color: 'primary',
-      fill: 'solid',
-      loading: false,
-      disabled: false,
-      type: 'button',
-      onClick: () => console.log('Button Clicked'),
-    },
-  ],
-  badge: [
-    {
-      color: 'primary',
-      text: 'Inscripción',
-    },
-    {
-      color: 'secondary',
-      text: 'En convenio',
-    },
-  ],
-};
-
-export const Outline = Template.bind({});
-Outline.args = {
-  fill: 'outline',
-  button: [
-    {
-      label: 'Button',
-      color: 'primary',
-      fill: 'solid',
-      loading: false,
-      disabled: false,
-      type: 'button',
-      onClick: () => console.log('Button Clicked'),
-    },
-  ],
-  badge: [
-    {
-      color: 'primary',
-      text: 'Inscripción',
-    },
-    {
-      color: 'secondary',
-      text: 'En convenio',
-    },
-  ],
-};
-
-export const Example1 = Template.bind({});
-Example1.args = {
-  fill: 'outline',
-  badge: [
-    {
-      color: 'primary',
-      text: 'Inscripción',
-    },
-    {
-      color: 'secondary',
-      text: 'En convenio',
-    },
-    {
-      color: 'secondary',
-      text: 'En convenio',
-    },
-    {
-      color: 'secondary',
-      text: 'En convenio',
-    },
-    {
-      color: 'secondary',
-      text: 'En convenio',
-    },
-  ],
-};

package/src/stories/Components/Cards/CardUser/CardUser.tsx

@@ -1,122 +0,0 @@
-import './cardUser.scss';
-import {Button, IButton} from '../../../Elements/Button/Button';
-import {Icon, IIcon} from '../../../Elements/Icon/Icon';
-import {Badge, BadgeProps} from '../../../Elements/Badge/Badge';
-
-export interface ICardUser extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  fill: 'outline' | 'none';
-  list: {
-    icon?: IIcon;
-    img?: string;
-    iconType: 'icon' | 'img';
-    title?: any;
-    subtitle?: any;
-    button?: IButton[];
-    menuButton?: IButton;
-  }[];
-  badge?: BadgeProps[];
-  button?: IButton[];
-
-  // boolean
-  isClickable?: boolean;
-
-  // events
-  onClick?: () => void;
-
-  // react
-  className?: string;
-}
-export interface IImgs {
-  img?: string;
-}
-
-export const CardUser = ({fill, list, badge, button, className, isClickable, onClick, ...props}: ICardUser) => {
-  return (
-    <div className="elv-component elv-card" {...props}>
-      <div
-        className={[
-          `card card-user ${fill === 'outline' && 'outline'} ${className ? className : ''}`,
-          `${isClickable ? ' is-clickable' : ''}`,
-        ].join('')}
-        onClick={() => {
-          if (isClickable && onClick) {
-            onClick();
-          }
-        }}
-      >
-        <div className="card-body">
-          {list.map((item, index) => (
-            <div key={index} className="list-item">
-              {item.iconType == 'img' ? (
-                <>
-                  {item.img && (
-                    <div className="list-item__img">
-                      <img key={index} src={item.img} className={'img-p'} />
-                    </div>
-                  )}
-                </>
-              ) : (
-                <>
-                  {item.icon && (
-                    <div className="list-item__img">
-                      <Icon key={index} className={'img-p'} {...item.icon} />
-                    </div>
-                  )}
-                </>
-              )}
-
-              <div className="list-item__text">
-                <p className="text__subtitle">{item.title}</p>
-                <p className="text__title">{item.subtitle}</p>
-              </div>
-              {item.button && (
-                <div className={'list-item__button left'}>
-                  {item?.button?.map(button => (
-                    <Button {...button} />
-                  ))}
-                </div>
-              )}
-
-              {item.menuButton && (
-                <div className="list-item__menu">
-                  <Button {...item.menuButton} />
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-        {badge || button ? (
-          <div className="card-footer p-4 mt-4 is-flex is-justify-content-space-between">
-            {badge && (
-              <>
-                {button ? (
-                  <div className="card-footer__badges card-footer__badges--button">
-                    {badge?.map((badge, index) => (
-                      <Badge key={index} {...badge} />
-                    ))}
-                  </div>
-                ) : (
-                  <div
-                    className={['card-footer__badges '].join('')}
-                    style={{maxWidth: `${badge.length * 100 < 400 ? badge.length * 100 : 400}px`}}
-                  >
-                    {badge.map((badge, index) => (
-                      <Badge key={index} {...badge} />
-                    ))}
-                  </div>
-                )}
-              </>
-            )}
-
-            {button?.map((button, index) => (
-              <Button {...button} className="px-6" />
-            ))}
-          </div>
-        ) : (
-          <></>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/stories/Components/Cards/CardUser/cardUser.scss

@@ -1,115 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.card-user {
-  display: flex;
-  min-width: 300px;
-  flex-direction: column;
-  background-color: $white;
-  box-shadow: none !important;
-
-  &.outline {
-    border-radius: 16px;
-    box-shadow: 0px 0px 2px rgba(14, 31, 53, 0.12), 0px 1px 4px rgba(14, 31, 53, 0.06) !important;
-  }
-
-  .card-body {
-    padding: 16px;
-    padding-bottom: 0px;
-
-    .list-item {
-      display: flex;
-      align-items: center;
-      margin-bottom: 16px;
-
-      &__img {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        color: $text-700;
-        min-width: 32px;
-        overflow: hidden;
-        width: 32px;
-        height: 32px;
-        background-color: $muted-200;
-        border-radius: 12px;
-        justify-content: center;
-
-        .img-p {
-          display: flex;
-          object-fit: cover;
-
-          svg {
-            width: 12px;
-            fill: $text-800;
-          }
-        }
-      }
-
-      &__text {
-        margin-left: 10px;
-        max-width: 100%;
-
-        .text__subtitle {
-          color: $text-600;
-          max-width: 300px;
-        }
-
-        .text__title {
-          color: $primary-600;
-          font-weight: $fw-semibold;
-          max-width: 300px;
-        }
-      }
-
-      &__menu {
-        margin-left: auto;
-
-        .button {
-          padding: 0;
-          margin: 0;
-          margin-right: 24px;
-          height: 23px;
-
-          .button__icon {
-            // width: 18px;
-            font-size: 18px;
-            margin: 0;
-          }
-        }
-      }
-
-      &__button {
-        &.left {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-left: auto;
-          margin-right: 24px;
-        }
-
-        button {
-          margin-left: 0;
-          font-size: 12px;
-        }
-      }
-    }
-  }
-
-  .card-footer {
-    max-width: 400px;
-
-    &__badges {
-      gap: 10px;
-      width: 100%;
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-
-      &--button {
-        display: flex;
-        @media screen and (max-width: 450px) {
-          flex-direction: column;
-        }
-      }
-    }
-  }
-}

package/src/stories/Components/Cart/Cart.scss

@@ -1,279 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.cart {
-  min-width: 306px;
-  background-color: $white;
-  border-radius: 16px;
-  box-shadow: 0px 0px 2px rgba(14, 31, 53, 0.12), 0px 1px 4px rgba(14, 31, 53, 0.06);
-  overflow: hidden;
-
-  &__wallet {
-    &--icon {
-      background-color: $truegray-100;
-      height: 65px;
-      border-bottom-left-radius: 50%;
-      border-bottom-right-radius: 50%;
-
-      .fa_icon {
-        height: 19px;
-        width: 18px;
-        color: $primary-600;
-      }
-
-      .svg_icon {
-        height: 19px;
-        width: 18px;
-        fill: $primary-600;
-      }
-    }
-
-    &--dropdownButton {
-      padding-top: 21px;
-      padding-right: 21px;
-      padding-left: 21px;
-    }
-  }
-
-  &__content {
-    background-color: white;
-    padding: 24px;
-
-    .perception {
-      &__title {
-        margin-bottom: 20px;
-        .title {
-          margin: 0;
-        }
-
-        .button {
-          .fa_icon {
-            height: 16px;
-            width: 4px;
-          }
-        }
-      }
-
-      &__labels {
-        padding-bottom: 5px;
-        margin-bottom: 5px;
-        border-bottom: 2px solid $truegray-300;
-        .item {
-          font-size: 14px;
-          font-weight: $fw-regular;
-
-          &__label {
-            color: $text-400;
-          }
-
-          &__value {
-            color: $black;
-            font-weight: $fw-medium;
-          }
-        }
-      }
-
-      &__sub-list {
-        margin-bottom: 5px;
-        padding-bottom: 5px;
-        border-bottom: 2px solid $truegray-300;
-        gap: 5px;
-
-        .item {
-          font-weight: $fw-medium;
-          font-size: 14px;
-        }
-      }
-
-      &__total {
-        color: $success-600;
-        margin-bottom: 17px;
-
-        .total-label {
-          font-size: 18px;
-          font-weight: $fw-regular;
-        }
-
-        .total-value {
-          font-size: 20px;
-          font-weight: $fw-medium;
-        }
-      }
-    }
-
-    .bonds {
-      &__labels {
-        padding-bottom: 5px;
-        margin-bottom: 25px;
-
-        .item {
-          font-size: 14px;
-          font-weight: $fw-regular;
-
-          &__label {
-            .micro-label {
-              font-size: 20px;
-              color: $text-500;
-            }
-
-            .micro-sub_label {
-              font-size: 12px;
-              color: $text-400;
-            }
-          }
-
-          &__value {
-            font-size: 30px;
-            color: $black;
-          }
-        }
-
-        .inter-label {
-          font-size: 14px;
-          color: $text-400;
-          border-top: 1px solid $truegray-300;
-          border-bottom: 1px solid $truegray-300;
-          margin-top: 15px;
-          margin-bottom: 15px;
-        }
-      }
-    }
-
-    .footer {
-      &--button {
-        .button-list {
-          width: 100%;
-          gap: 15px;
-          .button {
-            width: 100%;
-          }
-        }
-      }
-
-      &--total-button {
-        gap: 5%;
-        .total {
-          min-width: 40%;
-          &__label {
-            font-size: 16px;
-            font-weight: $fw-medium;
-          }
-
-          &__value {
-            font-size: 24px;
-            font-weight: $fw-medium;
-          }
-        }
-
-        .button {
-          width: 42%;
-        }
-      }
-
-      &--big-total-button {
-        .button-list {
-          width: 100%;
-          gap: 15px;
-          .button {
-            width: 100%;
-          }
-        }
-
-        .total {
-          &__label {
-            font-weight: $fw-semibold;
-          }
-
-          &__value {
-            font-size: 30px;
-            margin-bottom: 10px;
-          }
-
-          &__description {
-            font-size: 10px;
-            color: $text-400;
-          }
-        }
-      }
-
-      &--big-total-button-sub {
-        .button-list {
-          width: 100%;
-          gap: 15px;
-          .button {
-            width: 100%;
-          }
-        }
-
-        .total {
-          &__label {
-            font-weight: $fw-semibold;
-          }
-
-          &__sub_label {
-            color: $text-400;
-            font-size: 14px;
-            margin-top: 15px;
-            margin-bottom: 15px;
-          }
-
-          &__sub_value {
-            color: $text-400;
-            font-size: 18px;
-            margin-bottom: 5px;
-            text-decoration: line-through;
-          }
-
-          &__value {
-            font-size: 30px;
-            margin-bottom: 10px;
-            font-weight: $fw-semibold;
-          }
-
-          &__sub_desc {
-            font-size: 10px;
-            line-height: 11.93px;
-            font-weight: $fw-semibold;
-            color: $text-600;
-          }
-
-          &__description {
-            font-size: 10px;
-            color: $text-400;
-            padding-bottom: 15px;
-          }
-        }
-      }
-
-      &--total-button-sub-mobile {
-        gap: 5%;
-        .total {
-          min-width: 40%;
-          &__label {
-            font-size: 14px;
-            font-weight: $fw-semibold;
-          }
-
-          &__sub_label {
-            color: $text-400;
-            font-size: 12px;
-          }
-
-          &__sub_value {
-            color: $text-400;
-            font-size: 12px;
-            text-decoration: line-through;
-          }
-
-          &__value {
-            font-size: 16px;
-            font-weight: $fw-semibold;
-          }
-        }
-
-        .button {
-          width: 45%;
-        }
-      }
-    }
-  }
-}