dgrcorrientes-modulos 1.0.2 → 1.0.4

package/src/stories/Components/Cards/Card Vertical/CardVertical.tsx

@@ -1,106 +0,0 @@
-import './cardVertical.scss';
-import {Button, IButton} from '../../../Elements/Button/Button';
-import {Icon, IIcon} from '../../../Elements/Icon/Icon';
-import {Badge, BadgeProps} from '../../../Elements/Badge/Badge';
-import {shortenText} from '../../../../utils/functions';
-
-export interface ICardVertical extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  image?: boolean;
-  img?: any;
-  badge?: BadgeProps[];
-  imgAvatar?: any;
-  title?: string;
-  iconDate?: IIcon[];
-  date?: string;
-  description?: string;
-  button: IButton;
-
-  // boolean
-  avatar?: boolean;
-  icon?: boolean;
-  isClickable?: boolean;
-  isBorderless?: boolean;
-
-  // events
-  onClick?: () => void;
-
-  // react
-  className?: string;
-}
-
-export const CardVertical = ({
-  image,
-  img,
-  badge,
-  avatar,
-  imgAvatar,
-  icon,
-  title,
-  iconDate,
-  date,
-  description,
-  button,
-  className,
-  isClickable,
-  isBorderless,
-  onClick,
-  ...props
-}: ICardVertical) => {
-  return (
-    <div className="elv-component elv-card" {...props}>
-      <div
-        className={[
-          'card card-vertical',
-          `${className ? ' ' + className : ''}`,
-          `${isClickable ? ' is-clickable' : ''}`,
-          `${isBorderless ? ' is-shadowless' : ' card-box'}`,
-        ].join('')}
-        onClick={() => {
-          if (isClickable && onClick) {
-            onClick();
-          }
-        }}
-      >
-        <div className="card-header">
-          {image && (
-            <div className="card__img">
-              <img src={img} alt="" />
-              {badge && <Badge {...badge[0]} />}
-            </div>
-          )}
-          {icon && (
-            <div className="card__icon">
-              <div className="icon">{iconDate ? <Icon {...iconDate[0]} className={'icon'} /> : null}</div>
-            </div>
-          )}
-
-          {avatar && (
-            <div className="card__avatar">
-              <img src={imgAvatar} alt="" />
-            </div>
-          )}
-        </div>
-
-        <div className="card-body">
-          <div className="card__title">
-            <p className="title is-5">{title}</p>
-          </div>
-
-          <div className="card__date">
-            {iconDate && <Icon {...iconDate[0]} className={'icon'} />}
-            <span className="date">{date}</span>
-          </div>
-          <div className="card__description">
-            <p>{description}</p>
-          </div>
-        </div>
-        <div className="card-footer">
-          <div className="card__button">
-            <Button {...button} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

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

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

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

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

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

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

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

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