dgrcorrientes-modulos 1.0.0

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

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

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

@@ -0,0 +1,279 @@
+@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%;
+        }
+      }
+    }
+  }
+}