dgrcorrientes-modulos 1.0.2 → 1.0.4

package/src/stories/Form/Select/select.scss

@@ -1,303 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-select {
-  min-width: 200px;
-  .select-container {
-    position: relative;
-
-    &__select {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 4px;
-      font-weight: 500;
-      flex: none;
-      align-self: stretch;
-      flex-grow: 0;
-      color: #171717;
-      background: transparent;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 285 285'%3E%3Cpath fill='%23737373' d='m282 77-14-15a9 9 0 0 0-13 0L142 174 30 62a9 9 0 0 0-13 0L3 77a9 9 0 0 0 0 13l133 133a9 9 0 0 0 13 0L282 90a9 9 0 0 0 0-13z'/%3E%3C/svg%3E");
-      background-position: center right calc(0.375em + 0.1875rem);
-      background-size: 12px;
-      background-repeat: no-repeat;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      cursor: pointer;
-      padding: 8px 40px 8px 12px;
-      // white-space: nowrap;
-
-      // =================== VARIABLES ====================
-      /*outline*/
-      &.select--outline {
-        border: 1px solid #d4d4d4;
-        border-radius: 12px;
-        background-color: transparent;
-
-        &:hover {
-          border: 1px solid $primary-600;
-        }
-
-        &:focus {
-          background-color: rgba(18, 69, 150, 0.1);
-          outline: 2px solid $primary-600;
-        }
-
-        &.select--error {
-          border: 2px solid red;
-        }
-
-        &[disabled] {
-          cursor: not-allowed;
-          background-color: #ffffff;
-          border: 1px solid #d4d4d4;
-          color: #171717;
-        }
-      }
-
-      /*rounded*/
-      &.select--rounded {
-        border: 1px solid #d4d4d4;
-        border-radius: 16px;
-        background-color: transparent;
-
-        &:hover {
-          border: 1px solid $primary-600;
-        }
-
-        &:focus {
-          background-color: rgba(18, 69, 150, 0.1);
-          outline: 2px solid $primary-600;
-        }
-
-        &.select--error {
-          border: 2px solid #dc2626;
-        }
-
-        &[disabled] {
-          cursor: not-allowed;
-          background-color: #ffffff;
-          border: 1px solid #d4d4d4;
-          color: #171717;
-        }
-      }
-
-      /*underline*/
-      &.select--underline {
-        border: none;
-        border-bottom: 1px solid #d4d4d4;
-
-        &:hover {
-          border-bottom: 1px solid $primary-600;
-        }
-
-        &:focus {
-          background-color: rgba(18, 69, 150, 0.1);
-          outline: none;
-          border-bottom: 2px solid $primary-600;
-        }
-
-        &.select--error {
-          outline: none;
-          border-bottom: 2px solid #dc2626;
-        }
-
-        &.select--disabled {
-          cursor: not-allowed;
-          border-bottom: 1px solid #d4d4d4;
-          color: #171717;
-        }
-      }
-
-      /*unstyled*/
-      &.select--unstyled {
-        border: 1px solid transparent;
-        border-radius: 12px;
-
-        &:focus {
-          outline: none;
-        }
-      }
-
-      /*background*/
-      &.select--background {
-        border: 1px solid #d4d4d4;
-        border-radius: 12px;
-        background-color: #f5f5f5;
-
-        &:hover {
-          border: 1px solid $primary-600;
-        }
-
-        &:focus {
-          background-color: rgba(18, 69, 150, 0.1);
-          outline: 2px solid $primary-600;
-        }
-
-        &.select--error {
-          border: 2px solid #dc2626;
-        }
-
-        &[disabled] {
-          cursor: not-allowed;
-          background-color: #ffffff;
-          border: 1px solid #d4d4d4;
-          color: #171717;
-        }
-      }
-
-      // =================== STATES ====================
-      &.select--disabled {
-        cursor: not-allowed;
-        pointer-events: none;
-        background-color: white;
-        border-color: $muted-300;
-        color: $muted-400;
-      }
-
-      &.select--error {
-        border-color: 1px solid red;
-      }
-    }
-
-    &__dropdown {
-      display: none;
-      position: absolute;
-      background-color: white;
-      width: 100%;
-      padding: 12px 12px 12px 0px;
-
-      background: #ffffff;
-      box-shadow: 0px 14px 24px rgba(20, 23, 38, 0.12);
-      border-radius: 16px;
-      z-index: 1;
-
-      &--active {
-        display: block;
-      }
-
-      .dropdown__list {
-        max-height: 193.6px;
-        overflow-y: scroll;
-        list-style: none;
-        padding-left: 4px;
-        padding-right: 4px;
-        font-weight: $fw-semibold;
-        color: $text-900;
-
-        &::-webkit-scrollbar {
-          width: 6px; /* Ancho de la barra de desplazamiento */
-    
-        }
-        &::-webkit-scrollbar-track {
-          background-color: $truegray-200; /* Color de fondo del riel */
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color:  $truegray-400; /* Color del pulgar */
-          border-radius: 6px;
-        }
-        &::-webkit-scrollbar-thumb:hover {
-          background-color: $primary-600; /* Color del pulgar al pasar el ratón por encima */
-        }
-
-
-        .list__item {
-          display: flex;
-          padding: 15px 5px 15px 15px;
-          border-radius: 15px;
-          cursor: pointer;
-          align-items: center;
-
-        
-
-            .item__icon {
-              color: $primary-600;
-            }
-          
-
-          &--default {
-            color: $text-500;
-          }
-
-          &:hover {
-            background-color: $muted-300;
-          }
-
-          .item__label {
-            margin: 0px;
-          }
-
-          .item__icon {
-            margin-right: 10px;
-          }
-        }
-      }
-    }
-  }
-}
-
-/* sizes */
-.select--xs {
-  font-size: 10px;
-}
-
-.select--sm {
-  font-size: 12px;
-}
-
-.select--md {
-  font-size: 14px;
-}
-
-.select--lg {
-  font-size: 16px;
-}
-
-.select--xl {
-  font-size: 18px;
-}
-
-.select--xxl {
-  font-size: 20px;
-}
-
-/*icon
-.select--group{
-    position: relative;
-    width: 343px;
-}
-.select--icon{
-    position: absolute;
-    padding-left: 32px;
-}
-
- .select__icon {
-    position: absolute;
-    left: 10px;
-    top: 5px;
-    height: 18px;
-}
-.select__icon svg {
-    height: 18px;
-    vertical-align: middle;
-}
-
-.select__icon.select__icon__xs{
-    top: 4px;
-}
-.select__icon.select__icon__sm{
-    top: 5px;
-}
-.select__icon.select__icon__md{
-    top: 6px;
-}
-.select__icon.select__icon__lg{
-    top: 7px;
-}
-.select__icon.select__icon__xl{
-    top: 9px;
-}
-.select__icon.select__icon__xxl{
-    top: 10px;
-}
-*/

package/src/stories/Form/Switch/Switch.stories.tsx

@@ -1,17 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Switch} from './Switch';
-
-export default {
-  title: 'Form/Switch',
-  component: Switch,
-  args: {
-    size: 'md',
-    disabled: false,
-    defaultChecked: true,
-    error: false,
-  },
-} as ComponentMeta<typeof Switch>;
-
-const Template: ComponentStory<typeof Switch> = args => <Switch {...args} />;
-
-export const Standard = Template.bind({});

package/src/stories/Form/Switch/Switch.tsx

@@ -1,36 +0,0 @@
-import {useEffect, useState} from 'react';
-import './switch.scss';
-
-export interface ISwitch extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  size?: 'sm' | 'md' | 'lg';
-
-  // boolean
-  disabled?: boolean;
-  defaultChecked: boolean;
-  error?: boolean;
-
-  // events
-  onCheck?: (check: boolean) => void;
-
-  // react
-  className?: string;
-}
-
-export const Switch = ({size = 'md', disabled = false, defaultChecked, error, onCheck, className, ...props}: ISwitch) => {
-  const [isChecked, setIsChecked] = useState<boolean>();
-
-  const toggleChecked = () => {
-    setIsChecked(!isChecked);
-    onCheck && onCheck(!isChecked);
-  };
-
-  return (
-    <div className="elv-component elv-switch" {...props}>
-      <label className={['switch', ` switch--${size}`, `${error ? ` switch--error` : ''}`, `${className ? ' ' + className : ''}`].join('')}>
-        <input type="checkbox" disabled={disabled} defaultChecked={defaultChecked} onChange={toggleChecked} />
-        <span className="slider round" />
-      </label>
-    </div>
-  );
-};

package/src/stories/Form/Switch/switch.scss

@@ -1,123 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.switch {
-  position: relative;
-  display: inline-block;
-  margin-right: 5px;
-
-  input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-}
-
-.slider {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: $muted-300;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-
-  &:before {
-    position: absolute;
-    content: '';
-    background-color: $white;
-    -webkit-transition: transform 0.4s;
-    transition: transform 0.4s;
-  }
-}
-
-input {
-  &:checked + .slider {
-    background-color: $primary-600;
-  }
-
-  &:focus + .slider {
-    box-shadow: 0 0 3px $muted-400;
-  }
-
-  &:checked + .slider:before {
-    -webkit-transform: translateX(16px);
-    -ms-transform: translateX(16px);
-    transform: translateX(16px);
-  }
-}
-
-.switch.switch--lg input:checked + .slider:before {
-  -webkit-transform: translateX(20px);
-  -ms-transform: translateX(20px);
-  transform: translateX(20px);
-}
-
-/* Rounded sliders */
-
-.slider.round {
-  border-radius: 34px;
-
-  &:before {
-    border-radius: 50%;
-  }
-}
-
-/*size*/
-
-.switch {
-  &.switch--sm {
-    width: 32px;
-    height: 16px;
-  }
-
-  &.switch--md {
-    width: 40px;
-    height: 20px;
-  }
-
-  &.switch--lg {
-    width: 48px;
-    height: 24px;
-  }
-
-  &.switch--sm .slider {
-    padding: 0 2px;
-  }
-
-  &.switch--md .slider,
-  &.switch--lg .slider {
-    padding: 0 4px;
-  }
-
-  &.switch--sm .slider:before {
-    height: 12px;
-    width: 12px;
-  }
-
-  &.switch--md .slider:before {
-    height: 16px;
-    width: 16px;
-  }
-
-  &.switch--lg .slider:before {
-    height: 20px;
-    width: 20px;
-  }
-
-  &.switch--error .slider {
-    box-shadow: 0px 0px 0px 2px $error-600;
-  }
-}
-
-/*error*/
-
-/*disabled*/
-
-input:disabled + .slider {
-  opacity: 0.4;
-  cursor: not-allowed;
-}

package/src/stories/Form/Textarea/Textarea.stories.tsx

@@ -1,19 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Textarea} from './Textarea';
-
-export default {
-  title: 'Form/Textarea',
-  component: Textarea,
-  args: {
-    placeholder: 'Placeholder',
-    label: 'Label',
-    error: false,
-    disabled: false,
-    required: false,
-    rows: 5,
-    cols: 50,
-  },
-} as ComponentMeta<typeof Textarea>;
-
-const Template: ComponentStory<typeof Textarea> = args => <Textarea {...args} />;
-export const Standard = Template.bind({});

package/src/stories/Form/Textarea/Textarea.tsx

@@ -1,52 +0,0 @@
-import {useEffect, useState} from 'react';
-import './textarea.scss';
-
-export interface ITextarea extends React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
-  // base
-  value: string;
-  placeholder?: string;
-  defaultValue?: string;
-  rows?: number;
-  cols?: number;
-
-  // boolean
-  disabled?: boolean;
-  required?: boolean;
-  error?: boolean;
-
-  // events
-  onChangeInput: (value: string) => void;
-
-  // react
-  className?: string;
-}
-
-export const Textarea = ({
-  value,
-  error,
-  onChangeInput,
-  placeholder,
-  defaultValue,
-  disabled,
-  required,
-  rows = 5,
-  cols = 50,
-  className,
-  ...props
-}: ITextarea) => {
-  return (
-    <div className="elv-component elv-textArea">
-      <textarea
-        className={['textarea', `${error ? ` textarea--error` : ''}`, `${className ? ' ' + className : ''}`].join('')}
-        onChange={e => onChangeInput(e.target.value)}
-        placeholder={placeholder}
-        disabled={disabled}
-        defaultValue={defaultValue}
-        required={required}
-        rows={rows}
-        cols={cols}
-        {...props}
-      />
-    </div>
-  );
-};

package/src/stories/Form/Textarea/textarea.scss

@@ -1,25 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-textArea {
-  display: inline-flex;
-  .textarea {
-    padding: 10px;
-    background-color: $muted-50;
-    border: 1px solid $muted-300;
-    border-radius: 4px;
-    box-sizing: border-box;
-    resize: none;
-
-    &.textarea--error {
-      border: 2px solid $error-600;
-    }
-
-    &:focus {
-      background: rgba(18, 69, 150, 0.1);
-    }
-
-    &:disabled {
-      opacity: 0.4;
-    }
-  }
-}

package/src/stories/Form/UploadFileItem/UploadFileItem.scss

@@ -1,49 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-uploadfile {
-  .uploadfile {
-    &:hover {
-      background-color: $truegray-100;
-      border-radius: 5px;
-    }
-
-    .file_name {
-      vertical-align: middle;
-    }
-
-    &__download {
-      border-radius: 5px;
-    }
-
-    &__info {
-      width: 100%;
-
-      .preview {
-        .button-content {
-          padding: 0;
-          font-size: 12px;
-          color: $primary-600;
-        }
-      }
-    }
-
-    &__elipse {
-      width: 3px;
-      height: 3px;
-      border-radius: 50%;
-    }
-
-    &__icon {
-      right: -8px;
-      top: -2px;
-      opacity: 0;
-      cursor: pointer;
-    }
-    &:hover .uploadfile__icon {
-      opacity: 1;
-    }
-    &__progress {
-      width: 100%;
-    }
-  }
-}

package/src/stories/Form/UploadFileItem/UploadFileItem.stories.tsx

@@ -1,18 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {UploadFileItem} from './UploadFileItem';
-
-export default {
-  title: 'Form/UploadFileItem',
-  component: UploadFileItem,
-  args: {
-    progressBar: {color: 'link', max: '100', value: 50, size: 'small'},
-    file_name: 'screenshot.png',
-    file_size: 255503331263,
-    showBar: true,
-  },
-} as ComponentMeta<typeof UploadFileItem>;
-
-const Template: ComponentStory<typeof UploadFileItem> = args => <UploadFileItem {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {};