dgrcorrientes-modulos 1.0.0

package/src/stories/Components/Cards/Card Vertical/cardVertical.scss

@@ -0,0 +1,130 @@
+@import '/src/sass/utilities/variables';
+
+.card-vertical {
+  min-width: 150px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  gap: 16px;
+  background-color: $white;
+
+  .card-header {
+    .card__img {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      border-radius: 16px;
+      width: 100%;
+      position: relative;
+
+      img {
+        border-radius: 16px 16px 0px 0px;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .elv-badge {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        border-radius: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+    }
+
+    .card__avatar {
+      width: 40px;
+      height: 40px;
+      padding: 9px 16px 0px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 16px;
+      }
+    }
+
+    .card__icon {
+      display: flex;
+      justify-content: flex-start;
+      padding: 9px 16px 0px;
+
+      .icon {
+        width: 40px;
+        height: 40px;
+        background-color: $muted-200;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+
+        span {
+          display: flex;
+
+          svg {
+            width: 15px;
+            fill: $text-800;
+          }
+        }
+      }
+    }
+  }
+
+  .card-body {
+    padding: 0px 8px;
+
+    .card__title {
+      margin-bottom: 20px;
+      padding: 10px 16px 0px;
+    }
+
+    .card__date {
+      display: flex;
+      justify-content: flex-start;
+      padding: 10px 16px 10px 10px;
+      align-items: center;
+
+      .icon {
+        font-size: 12px;
+        color: $text-400;
+        margin: 0px;
+      }
+
+      .date {
+        font-weight: $fw-regular;
+        font-size: 12px;
+        line-height: 16px;
+        color: $text-400;
+        padding-left: 4px;
+        max-width: 100%;
+      }
+    }
+
+    .card__description {
+      padding: 0px 16px 0px;
+
+      p {
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 22px;
+        color: $text-900;
+        margin: 0;
+      }
+    }
+  }
+
+  .card-footer {
+    .card__button {
+      padding: 0px 16px 16px;
+
+      .button {
+        width: 100%;
+        font-weight: $fw-semibold;
+        text-align: center;
+      }
+    }
+  }
+}

package/src/stories/Components/Cards/CardActivity/cardActivity.scss

@@ -0,0 +1,31 @@
+@import '/src/sass/utilities/variables';
+
+.card-activity {
+  padding: 16px;
+  background-color: $white;
+  gap: 5px;
+
+  &__title {
+    font-weight: $fw-regular;
+    font-size: 12px;
+    line-height: 21px;
+    margin: 0px;
+    color: $text-600;
+  }
+
+  &__description {
+    font-weight: $fw-semibold;
+    font-size: 12px;
+    line-height: 21px;
+    margin: 0px;
+    color: $text-900;
+  }
+
+  &__secondaryDescription {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 21px;
+    margin: 0px;
+    color: #8b5cf6;
+  }
+}

package/src/stories/Components/Cards/CardActivity/cardActivity.stories.tsx

@@ -0,0 +1,20 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {CardActivity} from './cardActivity';
+
+export default {
+  title: 'Components/Cards/CardActivity',
+  component: CardActivity,
+  args: {
+    fill: 'default',
+    title: '00990000',
+    description: 'Servicios de organizaciones y órganos extraterritoriales',
+    secondaryDescription: 'Alic. 1.5',
+  },
+} as ComponentMeta<typeof CardActivity>;
+
+const Template: ComponentStory<typeof CardActivity> = args => <CardActivity {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {
+  fill: 'default',
+};

package/src/stories/Components/Cards/CardActivity/cardActivity.tsx

@@ -0,0 +1,48 @@
+import './cardActivity.scss';
+
+export interface CardActivityProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  fill?: 'default';
+  title?: string;
+  description?: string;
+  secondaryDescription?: string;
+  className?: string;
+
+  // boolean
+  isClickable?: boolean;
+
+  // events
+  onClick?: () => void;
+}
+
+export const CardActivity = ({
+  fill,
+  className,
+  title,
+  description,
+  secondaryDescription,
+  isClickable,
+  onClick,
+  ...props
+}: CardActivityProps) => {
+  return (
+    <div className={`elv-component elv-card`} {...props}>
+      <div
+        className={[
+          'card-activity is-flex is-flex-direction-column',
+          `${isClickable ? ' is-clickable' : ''}`,
+          ` ${className ? className : ''}`,
+        ].join('')}
+        onClick={() => {
+          if (isClickable && onClick) {
+            onClick();
+          }
+        }}
+      >
+        <p className="card-activity__title">{title}</p>
+        <p className="card-activity__description">{description}</p>
+        <p className="card-activity__secondaryDescription">{secondaryDescription}</p>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,96 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {CardHorizontal} from './CardHorizontal';
+import icono from '/src/stories/Elements/Icon/icono.svg';
+import image2 from '../../../assets/e-isotype.svg';
+
+export default {
+  title: 'Components/Cards/CardHorizontal',
+  component: CardHorizontal,
+  args: {
+    trailingIcon: false,
+    title: 'Clave de Acceso Virtual',
+    subtitle: '54 DDJJ incumplidas',
+    menu: false,
+    menuButton: {icon: 'fa-solid fa-ellipsis-vertical', fill: 'unstyled'},
+    button: {
+      type: 'button',
+      fill: 'link',
+      icon: icono,
+      icon_type: 'svg_icon',
+      icon_className: 'has-tc-primary-600',
+      label: 'Ver detalle',
+      trailingIcon: true,
+      onClick: () => console.log('Button Clicked'),
+    },
+    buttonsArray: false,
+    buttons: [
+      {
+        type: 'button',
+        fill: 'link',
+        loading: false,
+        disabled: false,
+        icon: 'fa fa-house',
+        label: 'Información general',
+        trailingIcon: true,
+        onClick: () => console.log('Button Clicked'),
+      },
+      {
+        type: 'button',
+        fill: 'link',
+        loading: false,
+        disabled: false,
+        icon: 'fa fa-house',
+        label: 'Información general',
+        trailingIcon: true,
+        onClick: () => console.log('Button Clicked'),
+      },
+      {
+        type: 'button',
+        fill: 'link',
+        loading: false,
+        disabled: false,
+        icon: 'fa fa-house',
+        label: 'Información general',
+        trailingIcon: true,
+        onClick: () => console.log('Button Clicked'),
+      },
+    ],
+  },
+} as ComponentMeta<typeof CardHorizontal>;
+
+const Template: ComponentStory<typeof CardHorizontal> = args => <CardHorizontal {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {
+  iconLeft: true,
+  icon: [
+    {
+      icon: 'fa fa-home',
+    },
+  ],
+};
+
+export const Example1_IconSVG = Template.bind({});
+Example1_IconSVG.args = {
+  iconLeft: true,
+  icon: [
+    {
+      icon: icono,
+      type: 'svg_icon',
+    },
+  ],
+  isClickable: true,
+  onClick() {
+    console.log('Card Horizontal Click');
+  },
+};
+
+export const Example2_IconImage = Template.bind({});
+Example2_IconImage.args = {
+  iconLeft: true,
+  image: image2,
+  isClickable: true,
+  onClick() {
+    console.log('Card Horizontal Click');
+  },
+};

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

@@ -0,0 +1,94 @@
+import './cardHorizontal.scss';
+import {Button, IButton} from '../../../Elements/Button/Button';
+import {Icon, IIcon} from '../../../Elements/Icon/Icon';
+import {generateRandomKey} from '../../../../utils/functions';
+
+export interface ICardHorizontal extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  icon?: IIcon[];
+  image?: any;
+  title?: string;
+  subtitle?: string;
+  menuButton?: IButton;
+  button?: IButton;
+  buttons?: IButton[];
+
+  // boolean
+  iconLeft?: boolean;
+  trailingIcon?: boolean;
+  menu?: boolean;
+  isClickable?: boolean;
+  isBorderless?: boolean;
+
+  // events
+  onClick?: () => void;
+
+  // react
+  buttonsArray?: boolean;
+  className?: string;
+}
+
+export const CardHorizontal = ({
+  iconLeft,
+  icon,
+  image,
+  trailingIcon,
+  title,
+  subtitle,
+  menu,
+  menuButton,
+  button,
+  buttonsArray,
+  buttons,
+  className,
+  isClickable,
+  isBorderless,
+  onClick,
+  ...props
+}: ICardHorizontal) => {
+  return (
+    <div className="elv-component elv-card" {...props}>
+      <div
+        className={[
+          'card-horizontal',
+          `${className ? ' ' + className : ''}`,
+          `${isClickable ? ' is-clickable' : ''}`,
+          `${isBorderless ? ' is-shadowless' : ' card-box'}`,
+        ].join('')}
+        onClick={() => {
+          if (isClickable && onClick) {
+            onClick();
+          }
+        }}
+      >
+        <div className={[`card-header pb-0 `, `${icon || image ? `icon--${trailingIcon ? 'trailing' : 'leading'}` : ''}`, ,].join(' ')}>
+          {iconLeft && (icon || image) ? (
+            <div className="card__icon">{icon ? <Icon {...icon[0]} /> : image ? <img src={image} alt="Card-Image" /> : null}</div>
+          ) : (
+            <></>
+          )}
+
+          <div className="card__text">
+            <p className="title is-6 mb-1">{title}</p>
+            <p className="is-size-14px has-tc-truegray-500">{subtitle}</p>
+          </div>
+          {menu && (
+            <div className="card__menu ml-auto">
+              <Button {...menuButton} />
+            </div>
+          )}
+        </div>
+        <div className="card-body px-4 pb-4 pt-0">
+          {button && <Button {...button} />}
+          {buttonsArray && (
+            <div>
+              {buttons?.map((item, index) => (
+                <Button key={generateRandomKey()} {...item} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/stories/Components/Cards/CardHorizontal/cardHorizontal.scss

@@ -0,0 +1,65 @@
+@import '/src/sass/utilities/variables';
+
+.card-horizontal {
+  min-width: 150px;
+  border-radius: 16px;
+  gap: 16px;
+  display: flex;
+  background-color: $white;
+  flex-direction: column;
+
+  .card-header {
+    display: flex;
+    padding: 16px;
+
+    .card__icon {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      overflow: hidden;
+      min-width: 40px;
+    }
+
+    &.icon--trailing {
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
+
+    &.icon--leading .card__icon {
+      margin-right: 16px;
+    }
+
+    &.icon--trailing .card__icon {
+      margin-left: 16px;
+    }
+
+    .card__icon {
+      width: 40px;
+      height: 40px;
+      background-color: $muted-200;
+      border-radius: 16px;
+      display: flex;
+      justify-content: center;
+      pointer-events: none;
+
+      .icon {
+        display: flex;
+
+        svg {
+          width: 15px;
+          fill: $text-800;
+        }
+      }
+    }
+
+    .card__text {
+      width: 212px;
+    }
+  }
+
+  .card-body {
+    .button__icon {
+      font-size: 12px;
+    }
+  }
+}

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

@@ -0,0 +1,135 @@
+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',
+    },
+  ],
+};