dgrcorrientes-modulos 1.0.0

package/src/stories/Components/CTA/CTA.tsx

@@ -0,0 +1,70 @@
+import {Button, IButton} from '../../Elements/Button/Button';
+import './CTA.scss';
+import {shortenText} from '../../../utils/functions';
+import {Icon, IIcon} from '../../Elements/Icon/Icon';
+
+export interface ICTA extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  title: string;
+  button: IButton;
+  items: {
+    icon: IIcon;
+    title: string;
+    description: string;
+  }[];
+
+  // react
+  className?: string;
+}
+
+export const CTA = ({title, button, items, className, ...props}: ICTA) => {
+  return (
+    <div className="elv-component elv-cta" {...props}>
+      <div className={`cta columns ${className ? className : ''}`}>
+        <div className="cta__principal column is-3 is-flex is-flex-direction-column">
+          <p className="title">{shortenText(title, 25)}</p>
+          <div className="button-container">
+            <Button {...button} />
+          </div>
+        </div>
+        <div className="cta__items column">
+          <div className="columns is-flex">
+            {items[0] && (
+              <div className="item column is-flex">
+                <div className="item__icon is-flex is-align-items-center is-justify-content-center">
+                  <Icon {...items[0].icon} />
+                </div>
+                <div className="item__description">
+                  <p className="title is-6">{shortenText(items[0].title, 15)}</p>
+                  <p>{shortenText(items[0].description, 137)}</p>
+                </div>
+              </div>
+            )}
+            {items[1] && (
+              <div className="item column is-flex">
+                <div className="item__icon is-flex is-align-items-center is-justify-content-center">
+                  <Icon {...items[1].icon} />
+                </div>
+                <div className="item__description">
+                  <p className="title is-6">{shortenText(items[1].title, 15)}</p>
+                  <p>{shortenText(items[1].description, 137)}</p>
+                </div>
+              </div>
+            )}
+            {items[2] && (
+              <div className="item column is-flex">
+                <div className="item__icon is-flex is-align-items-center is-justify-content-center">
+                  <Icon {...items[2].icon} />
+                </div>
+                <div className="item__description">
+                  <p className="title is-6">{shortenText(items[2].title, 15)}</p>
+                  <p>{shortenText(items[2].description, 137)}</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/stories/Components/Cards/Card CTA/CardCta.stories.tsx

@@ -0,0 +1,34 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {CardCTA} from './CardCta';
+
+export default {
+  title: 'Components/Cards/CardCTA',
+  component: CardCTA,
+  args: {
+    img: 'https://img.freepik.com/fotos-premium/hombre-usando-computadora-portatil-casa-maqueta-pantalla-blanco-exhibicion-productos_44344-3360.jpg',
+    title: 'long established',
+    icon: [
+      {
+        icon: 'fa-solid fa-calendar-days',
+      },
+    ],
+    date: '13/10/2022',
+    description:
+      'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsun is that..',
+    button: {
+      type: 'button',
+      size: 'normal',
+      fill: 'link',
+      loading: false,
+      disabled: false,
+      label: 'Leer más',
+      trailingIcon: true,
+      onClick: () => console.log('Button Clicked'),
+    },
+  },
+} as ComponentMeta<typeof CardCTA>;
+
+const Template: ComponentStory<typeof CardCTA> = args => <CardCTA {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};

package/src/stories/Components/Cards/Card CTA/CardCta.tsx

@@ -0,0 +1,81 @@
+import './cardCta.scss';
+import {Button, IButton} from '../../../Elements/Button/Button';
+import {Icon, IIcon} from '../../../Elements/Icon/Icon';
+import {shortenText} from '../../../../utils/functions';
+
+export interface ICardCTA extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  img?: any;
+  imgAvatar?: any;
+  title: string;
+  icon?: IIcon[];
+  date?: string;
+  description?: string;
+  button?: IButton;
+
+  // boolean
+  avatar?: boolean;
+  isClickable?: boolean;
+  isBorderless?: boolean;
+
+  // events
+  onClick?: () => void;
+
+  // react
+  className?: string;
+}
+
+export const CardCTA = ({
+  img,
+  title,
+  icon,
+  date,
+  description,
+  button,
+  className,
+  isBorderless,
+  isClickable,
+  onClick,
+  ...props
+}: ICardCTA) => {
+  return (
+    <div className="elv-component elv-card" {...props}>
+      <div
+        className={[
+          'card card-cta',
+          `${className ? ' ' + className : ''}`,
+          `${isClickable ? ' is-clickable' : ''}`,
+          `${isBorderless ? ' is-shadowless' : ' card-box'}`,
+        ].join('')}
+        onClick={() => {
+          if (isClickable && onClick) {
+            onClick();
+          }
+        }}
+      >
+        <div className="card-content" style={{flexGrow: 1}}>
+          <div className="card-header">
+            <div className="card__text">
+              <p className="title is-3">{shortenText(title, 54)}</p>
+              {description && <p>{shortenText(description, 198)}</p>}
+            </div>
+          </div>
+          <div className="card-footer">
+            <div className="card__date">
+              {icon && <Icon {...icon[0]} />}
+              <span className="date">{date}</span>
+            </div>
+            {button && (
+              <div className="card__button">
+                <Button {...button} />
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="card-image">
+          <img src={img} alt="" />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/stories/Components/Cards/Card CTA/cardCta.scss

@@ -0,0 +1,71 @@
+@import '/src/sass/utilities/variables';
+
+.card-cta {
+  border-radius: 16px;
+  min-width: 517px;
+  max-width: none;
+  display: flex;
+  justify-content: space-between;
+
+  .card-content {
+    width: 484px;
+    height: auto;
+    padding: 30px 24px;
+
+    .card-header {
+      margin-bottom: 24px;
+
+      .card__text {
+        max-width: 100%;
+      }
+    }
+
+    .card-footer {
+      display: flex;
+      justify-content: space-between !important;
+      margin-top: 40px;
+
+      .card__date {
+        display: flex;
+        align-items: center;
+
+        .icon {
+          width: 12px;
+          color: $text-400;
+        }
+
+        .date {
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 16px;
+          color: $text-400;
+          padding-left: 7px;
+          max-width: 200px;
+        }
+      }
+
+      .card__button {
+        display: flex;
+        justify-content: center;
+
+        .button {
+          padding: 0;
+        }
+      }
+    }
+  }
+  .card-image {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    // min-width: 390px;
+    max-width: 40%;
+    border-radius: 0px 16px 16px 0px;
+    overflow: hidden;
+
+    img {
+      height: 100%;
+      max-width: none;
+    }
+  }
+}

package/src/stories/Components/Cards/Card Expiration/cardExpiration.scss

@@ -0,0 +1,105 @@
+@import '/src/sass/utilities/variables';
+
+.card-expiration {
+  min-width: 225px;
+  display: flex;
+  border-radius: 16px;
+  gap: 16px;
+  flex-direction: column;
+  background-color: $white;
+
+  &__content {
+    padding: 16px 24px;
+    .card_header {
+      padding-bottom: 20px;
+      border-bottom: 1px solid $muted-200;
+
+      .date__big {
+        text-align: center;
+
+        h1 {
+          font-weight: $fw-regular;
+          font-size: 96px;
+          color: $primary-600;
+          margin: 0;
+        }
+
+        h4 {
+          font-weight: $fw-semibold;
+          font-size: 30px;
+          color: $text-800;
+          margin: 0;
+        }
+
+        &.mb-20 {
+          margin-bottom: 20px;
+        }
+      }
+
+      .date__small {
+        text-align: center;
+
+        .title.is-5 {
+          font-weight: $fw-regular;
+          color: $text-400;
+          text-transform: capitalize;
+          margin-top: 20px;
+          margin-bottom: 0px;
+        }
+
+        .title.is-3 {
+          color: $primary-600;
+          margin-top: 5px;
+        }
+      }
+
+      .card__icon {
+        display: flex;
+        justify-content: center;
+
+        .icon {
+          width: 40px;
+          height: 40px;
+          background-color: $muted-200;
+          border-radius: 50%;
+          display: flex;
+          justify-content: center;
+
+          span {
+            display: flex;
+
+            .icon {
+              width: 15px;
+              fill: $text-800;
+            }
+          }
+        }
+      }
+    }
+
+    .card-footer {
+      padding-top: 20px;
+      .data__expiration {
+        .list {
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 22px;
+
+          .title.is-6 {
+            color: $text-400;
+            margin: 0;
+
+            span {
+              color: $text-900;
+              margin: 0;
+            }
+          }
+        }
+      }
+
+      .card__button {
+        margin-top: 5px;
+      }
+    }
+  }
+}

package/src/stories/Components/Cards/Card Expiration/cardExpiration.stories.tsx

@@ -0,0 +1,40 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {CardExpiration} from './cardExpiration';
+
+export default {
+  title: 'Components/Cards/CardExpiration',
+  component: CardExpiration,
+  args: {
+    fill: 'default',
+    dataBig: false,
+    bigNumber: '22',
+    bigMonth: 'febrero',
+    dataSmall: true,
+    iconCalendar: [
+      {
+        icon: 'fa-solid fa-calendar-days',
+      },
+    ],
+    day: 'martes',
+    fullDay: '15 de noviembre',
+    list: [
+      {
+        type: 'Cuotas',
+        text: '01',
+      },
+      {
+        type: 'Terminación CUIT',
+        text: '2-3',
+      },
+      {
+        type: 'Tipo',
+        text: 'Pago/Pres',
+      },
+    ],
+  },
+} as ComponentMeta<typeof CardExpiration>;
+
+const Template: ComponentStory<typeof CardExpiration> = args => <CardExpiration {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};

package/src/stories/Components/Cards/Card Expiration/cardExpiration.tsx

@@ -0,0 +1,95 @@
+import './cardExpiration.scss';
+import {Icon, IIcon} from '../../../Elements/Icon/Icon';
+import {generateRandomKey} from '../../../../utils/functions';
+
+export interface ICardExpiration extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  bigNumber?: string;
+  bigMonth?: string;
+  dataSmall?: boolean;
+  iconCalendar?: IIcon[];
+  day?: string;
+  fullDay?: string;
+  list: {
+    type: string;
+    text: string;
+  }[];
+
+  // boolean
+  dataBig?: boolean;
+  isClickable?: boolean;
+  isBorderless?: boolean;
+
+  // events
+  onClick?: () => void;
+
+  // react
+  className?: string;
+}
+
+export const CardExpiration = ({
+  dataBig,
+  bigNumber,
+  bigMonth,
+  dataSmall,
+  iconCalendar,
+  day,
+  fullDay,
+  list,
+  className,
+  isBorderless,
+  isClickable,
+  onClick,
+  ...props
+}: ICardExpiration) => {
+  return (
+    <div className="elv-component elv-card" {...props}>
+      <div
+        className={[
+          'card card-expiration',
+          `${className ? ' ' + className : ''}`,
+          `${isClickable ? ' is-clickable' : ''}`,
+          `${isBorderless ? ' is-shadowless' : ' card-box'}`,
+        ].join('')}
+        onClick={() => {
+          if (isClickable && onClick) {
+            onClick();
+          }
+        }}
+      >
+        <div className="card-expiration__content">
+          <div className="card_header">
+            {dataBig && (
+              <div className={['date__big', `${dataSmall ? 'mb-20' : ''}`].join(' ')}>
+                <h1>{bigNumber}</h1>
+                <h4>{bigMonth}</h4>
+              </div>
+            )}
+            {dataSmall && (
+              <div className="date__small">
+                {iconCalendar && (
+                  <div className="card__icon">
+                    <div className="icon">{iconCalendar ? <Icon icon={iconCalendar[0].icon} className="icon" /> : null}</div>
+                  </div>
+                )}
+                <p className="title is-5">{day}</p>
+                <p className="title is-3">{fullDay}</p>
+              </div>
+            )}
+          </div>
+          <div className="card-footer">
+            <div className="data__expiration">
+              <div className="list">
+                {list.map(list => (
+                  <p key={generateRandomKey()} className="title is-6">
+                    {list.type}: <span>{list.text}</span>
+                  </p>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,43 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {CardVertical} from './CardVertical';
+
+export default {
+  title: 'Components/Cards/CardVertical',
+  component: CardVertical,
+  args: {
+    image: true,
+    img: 'data:image/jpeg;base64,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',
+    badge: [
+      {
+        color: '#0284C7',
+        text: 'PRINCIPAL',
+      },
+    ],
+    avatar: false,
+    imgAvatar: 'https://as2.ftcdn.net/v2/jpg/02/79/66/93/1000_F_279669366_Lk12QalYQKMczLEa4ySjhaLtx1M2u7e6.jpg',
+    icon: false,
+    title: 'Título',
+    iconDate: [
+      {
+        icon: 'fa-solid fa-calendar-days',
+      },
+    ],
+    date: '13/10/2022',
+    description: 'Description. Loren ipsum dolor sit amet consectetur adipiscing elit, sed do',
+    button: {
+      type: 'button',
+      size: 'normal',
+      fill: 'outline',
+      loading: false,
+      disabled: false,
+      label: 'Button',
+      trailingIcon: true,
+      onClick: () => console.log('Button Clicked'),
+    },
+  },
+} as ComponentMeta<typeof CardVertical>;
+
+const Template: ComponentStory<typeof CardVertical> = args => <CardVertical {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};

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

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