dgrcorrientes-modulos 1.0.2 → 1.0.4

package/src/stories/Elements/Badge/badge.scss

@@ -1,24 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.badge {
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 18px;
-  padding: 2px 8px;
-  border-radius: 8px;
-  color: #ffffff;
-  line-height: 150%;
-  font-weight: $fw-medium;
-
-  &.badge--primary {
-    background-color: $primary-600;
-  }
-
-  &.badge--secondary {
-    background-color: $secondary-600;
-  }
-
-  &.badge--tertiary {
-    background-color: $tertiary-600;
-  }
-}

package/src/stories/Elements/Button/Button.stories.tsx

@@ -1,54 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Button} from './Button';
-import icono from '../../Elements/Icon/icono.svg';
-
-export default {
-  title: 'Elements/Button',
-  component: Button,
-  args: {
-    label: 'Button',
-    isFullWidth: false,
-    isRounded: false,
-    color: 'primary',
-    size: 'normal',
-    fill: 'solid',
-    loading: false,
-    disabled: false,
-    trailingIcon: false,
-    type: 'button',
-    onClick: () => console.log('Button Clicked'),
-  },
-} as ComponentMeta<typeof Button>;
-
-const Template: ComponentStory<typeof Button> = args => <Button {...args} />;
-
-export const Solid = Template.bind({});
-Solid.args = {
-  fill: 'solid',
-  icon: icono,
-  icon_type: 'svg_icon',
-  icon_color: 'white',
-};
-
-export const SolidIcon = Template.bind({});
-SolidIcon.args = {
-  fill: 'solid',
-};
-
-export const Outline = Template.bind({});
-Outline.args = {
-  fill: 'outline',
-  icon: 'fa-solid fa-user',
-};
-
-export const Unstyled = Template.bind({});
-Unstyled.args = {
-  fill: 'unstyled',
-  icon: 'fa-solid fa-user',
-};
-
-export const Link = Template.bind({});
-Link.args = {
-  fill: 'link',
-  icon: 'fa-solid fa-user',
-};

package/src/stories/Elements/Button/Button.tsx

@@ -1,118 +0,0 @@
-import './button.scss';
-import {Icon} from '../Icon/Icon';
-
-export interface IButton extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  //base
-  color?: 'primary' | 'secondary' | 'tertiary';
-  type?: 'button' | 'submit' | 'reset';
-  size?: 'small' | 'normal' | 'medium' | 'large';
-  fill?: 'solid' | 'outline' | 'unstyled' | 'link';
-  label?: string;
-
-  icon?: string;
-  icon_type?: 'fa_icon' | 'svg_icon';
-  icon_size?: string;
-  icon_size_height?: string;
-  icon_color?: string;
-  icon_className?: string;
-
-  // boolean
-  isFullWidth?: boolean;
-  isRounded?: boolean;
-  isOnlyIcon?: boolean;
-  loading?: boolean;
-  disabled?: boolean;
-  trailingIcon?: boolean;
-
-  // events
-  onClick?: () => void;
-
-  //REACT
-  className?: string;
-}
-
-export const Button = ({
-  color = 'primary',
-  type = 'button',
-  size = 'normal',
-  fill = 'solid',
-  isFullWidth,
-  isRounded,
-  isOnlyIcon,
-  loading = false,
-  disabled = false,
-  icon,
-  icon_type = 'fa_icon',
-  icon_size,
-  icon_size_height,
-  icon_color,
-  icon_className,
-  trailingIcon = false,
-  label,
-  onClick,
-  className,
-  ...props
-}: IButton) => {
-  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation();
-    onClick && onClick();
-  };
-
-  return (
-    <div className={`elv-component elv-button ${isFullWidth ? 'is-fullw' : ''}`} {...props}>
-      <button
-        type={type}
-        className={[
-          'button',
-          `${fill === 'solid' || fill === 'outline' ? ' is-' + color + '-600' : ''}`,
-          `${fill === 'link' ? ' is-linked' : ''}`,
-          `${fill === 'outline' ? ' is-outlined' : ''}`,
-          `${fill === 'unstyled' ? ' is-unstyled' : ''}`,
-          `${size !== 'normal' ? ' is-' + size : ''}`,
-          `${trailingIcon ? ' button__icon--trailing' : ''}`,
-          `${loading ? ' is-loading' : ''}`,
-          `${isFullWidth ? ' is-fullwidth' : ''}`,
-          `${isOnlyIcon ? ' is-only-icon' : ''}`,
-          `${isRounded ? ' is-rounded' : ''}`,
-          `${className ? ' ' + className : ''}`,
-        ].join('')}
-        onClick={e => {
-          handleButtonClick(e);
-        }}
-        disabled={disabled}
-      >
-        <div className="button-content is-flex">
-          {trailingIcon ? (
-            <>
-              {label}
-              {icon && (
-                <Icon
-                  icon={icon}
-                  type={icon_type}
-                  color={icon_color}
-                  size={icon_size}
-                  size_height={icon_size_height}
-                  className={'button__icon ' + icon_className}
-                />
-              )}
-            </>
-          ) : (
-            <>
-              {icon && (
-                <Icon
-                  icon={icon}
-                  type={icon_type}
-                  color={icon_color}
-                  size={icon_size}
-                  size_height={icon_size_height}
-                  className={'button__icon ' + icon_className}
-                />
-              )}
-              {label}
-            </>
-          )}
-        </div>
-      </button>
-    </div>
-  );
-};

package/src/stories/Elements/Button/button.scss

@@ -1,102 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-button {
-  display: inline-flex;
-
-  .button {
-    border-radius: 12px;
-    height: max-content;
-  }
-
-  .button.is-small:not(.is-rounded) {
-    border-radius: 12px;
-  }
-
-  .is-unstyled {
-    background-color: transparent;
-    border-color: transparent;
-
-    &:hover {
-      background-color: transparent;
-      border-color: transparent;
-      color: $primary-600;
-      fill: $primary-600;
-    }
-
-    &:active {
-      color: $primary-600;
-      fill: $primary-600;
-      background-color: transparent;
-      border-color: transparent;
-    }
-
-    &:focus {
-      border-color: transparent;
-    }
-
-    &:focus:not(:active) {
-      box-shadow: none;
-    }
-  }
-
-  .is-linked {
-    background: none;
-    border: 0px;
-    border-color: transparent;
-    color: $primary-600;
-    fill: $primary-600;
-    text-decoration: none;
-
-    .button-content {
-      border-bottom: 1px solid transparent;
-    }
-
-    &:hover {
-      color: $primary-600;
-      fill: $primary-600;
-      border-color: transparent;
-
-      .button-content {
-        border-bottom: 1px solid $primary-600;
-      }
-    }
-
-    &:active {
-      color: $primary-600;
-      fill: $primary-600;
-
-      border-color: $primary-600;
-    }
-
-    &:focus {
-      color: $primary-600;
-      fill: $primary-600;
-      border-color: $primary-600;
-    }
-
-    &:focus:not(:active) {
-      box-shadow: none;
-    }
-  }
-
-  .is-only-icon {
-    padding: 3px;
-
-    &:hover {
-      border-color: transparent;
-    }
-
-    &:active {
-      border-color: transparent;
-    }
-
-    &:focus {
-      border-color: transparent;
-      box-shadow: none;
-    }
-  }
-
-  .button-content {
-    gap: 6px;
-  }
-}

package/src/stories/Elements/Icon/Icon.stories.tsx

@@ -1,33 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Icon} from './Icon';
-import icono from './icono.svg';
-
-export default {
-  title: 'Elements/Icon',
-  component: Icon,
-  args: {
-    className: '',
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Cada componente Icon, por defecto estará utilizando el type: "fa_icon", si se quiere usar un ícono del tipo SVG, se debe cargar la propiedad type: "svg_icon", y pasarle directamente la url del SVG en la propiedad "icon". Cabe aclarar que el TAMAÑO y el COLOR de un ícono SVG, se manejan con propiedades distintas de CSS.',
-      },
-    },
-  },
-} as ComponentMeta<typeof Icon>;
-
-const Template: ComponentStory<typeof Icon> = args => <Icon {...args} />;
-
-export const FA_Icon = Template.bind({});
-FA_Icon.args = {
-  icon: 'fa-solid fa-user',
-};
-
-export const SVG_Icon = Template.bind({});
-SVG_Icon.args = {
-  type: 'svg_icon',
-  size: '16px',
-  icon: icono.toString(),
-};

package/src/stories/Elements/Icon/Icon.tsx

@@ -1,57 +0,0 @@
-import {useEffect, useRef} from 'react';
-import './icon.scss';
-
-export interface IIcon extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  icon: string;
-  type?: 'fa_icon' | 'svg_icon';
-  size?: string;
-  size_height?: string;
-  color?: string;
-
-  // events
-  onClick?: () => void;
-
-  // react
-  className?: string;
-}
-
-export const Icon = ({icon, className, type, size = '16px', size_height, color, onClick, ...props}: IIcon) => {
-  const spanRef = useRef<HTMLSpanElement>(null);
-
-  useEffect(() => {
-    if (type == 'svg_icon') {
-      getTheSvg(icon).then(res => {
-        if (spanRef.current && icon) {
-          spanRef.current.innerHTML = res;
-        }
-      });
-    }
-  }, [spanRef.current, icon]);
-
-  function getTheSvg(url: string) {
-    return fetch(url).then(res => res.text());
-  }
-
-  return type === 'svg_icon' ? (
-    <span
-      className={`svg_icon ${className}`}
-      ref={spanRef}
-      style={{fill: color, width: size, height: size_height}}
-      onClick={() => {
-        onClick && onClick();
-      }}
-      {...props}
-    />
-  ) : (
-    <div className="elv-component elv-icon" {...props}>
-      <i
-        className={`fa_icon ${icon} ${className}`}
-        style={{fontSize: size, color: color}}
-        onClick={() => {
-          onClick && onClick();
-        }}
-      ></i>
-    </div>
-  );
-};

package/src/stories/Elements/Icon/icon.scss

@@ -1,15 +0,0 @@
-.elv-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .fa_icon {
-    position: relative;
-  }
-}
-
-.svg_icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

package/src/stories/Elements/Icon/icono.svg

@@ -1 +0,0 @@
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M249 1c-4 1-11 8-12 13l-1 113v109H13l-4 3c-6 4-8 9-8 17 0 5 0 7 2 11l7 6 4 2 111 1h111v222l3 4 6 7c4 2 6 2 11 2 6 0 7 0 11-2l6-7 2-4 1-111V276h111l111-1 4-2 7-6c2-4 2-6 2-11s0-7-2-11l-7-6-4-2-111-1H276V125l-1-112-2-3c-5-8-15-12-24-9z" /></svg>

package/src/stories/Elements/ProgressBar/ProgressBar.scss

@@ -1,26 +0,0 @@
-@import '/src/sass/utilities/variables';
-.elv-progressbar{
-    .progressbar{
-
-        .progress{
-            &--small{
-                height: 3px;
-            }
-
-            &--normal{
-                height: 6px;
-            }
-
-            &--medium{
-                height: 12px;
-            }
-
-            &--large{
-                height: 18px;
-            }
-        }
-
-
-
-    }
-}

package/src/stories/Elements/ProgressBar/ProgressBar.stories.tsx

@@ -1,19 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {ProgressBar} from './ProgressBar';
-
-export default {
-  title: 'Elements/ProgressBar',
-  component: ProgressBar,
-  args: {
-    value: 50,
-    max: '100',
-    color: 'primary',
-    size: 'normal',
-    type: 'progress',
-  },
-} as ComponentMeta<typeof ProgressBar>;
-
-const Template: ComponentStory<typeof ProgressBar> = args => <ProgressBar {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {};

package/src/stories/Elements/ProgressBar/ProgressBar.tsx

@@ -1,35 +0,0 @@
-import {link} from 'fs';
-import './ProgressBar.scss';
-import {Warning} from '../Alert/Alert.stories';
-
-export interface IProgressBar extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // BASE
-  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
-  size?: 'small' | 'normal' | 'medium' | 'large';
-  max?: string;
-  value?: number;
-
-  // IS-OPTIONS
-
-  // EVENTS
-
-  // GENERIC
-  className?: string;
-}
-
-export const ProgressBar = ({color = 'primary', size = 'normal', max, value, className, ...props}: IProgressBar) => {
-  return (
-    <div className="elv-component elv-progressbar" {...props}>
-      <div className={['progressbar ', `${className ? ' ' + className : ''}`].join('')}>
-        <progress
-          className={[
-            `progress  progress--${size}`,
-            `${color === 'primary' || 'link' || 'info' || 'success' || 'warning' || 'danger' ? ' is-' + color : ''}`,
-          ].join('')}
-          value={value}
-          max={max}
-        ></progress>
-      </div>
-    </div>
-  );
-};

package/src/stories/Form/Autocomplete/Autocomplete.stories.tsx

@@ -1,55 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Autocomplete} from './Autocomplete';
-
-export default {
-  title: 'Form/Autocomplete',
-  component: Autocomplete,
-  args: {
-    size: 'md',
-    fill: 'outline',
-    disabled: false,
-    error: false,
-    placeholder: 'Default Autocomplete',
-    defaultValue: '2',
-    maxCharacters: 10,
-    options: [
-      {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-      {value: '2', label: 'Option 2'},
-      {value: '3', label: 'Option 3'},
-      {value: '4', label: 'Option 4', icon: 'fa fa-house'},
-      {value: '5', label: 'Option 5'},
-      {value: '6', label: 'Option 6'},
-      {value: '7', label: 'Option 7'},
-      {value: '8', label: 'Option 8'},
-    ],
-    onChangeSelect(value) {
-      console.log('Select change: ' + value);
-    },
-  },
-} as ComponentMeta<typeof Autocomplete>;
-
-const Template: ComponentStory<typeof Autocomplete> = args => <Autocomplete {...args} />;
-
-export const Outline = Template.bind({});
-Outline.args = {
-  fill: 'outline',
-};
-
-export const Rounded = Template.bind({});
-Rounded.args = {
-  fill: 'rounded',
-};
-
-export const Underline = Template.bind({});
-Underline.args = {
-  fill: 'underline',
-};
-
-export const Unstyled = Template.bind({});
-Unstyled.args = {
-  fill: 'unstyled',
-};
-export const Background = Template.bind({});
-Background.args = {
-  fill: 'background',
-};