dgrcorrientes-modulos 1.0.3 → 1.0.4

package/src/sass/utilities/_derived-variables.scss

@@ -1,68 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-$custom_colors: (
-  // ====================== COLORS / PRINCIPAL ======================
-  // PRIMARY
-  'primary-100': $primary-100,
-  'primary-200': $primary-200,
-  'primary-400': $primary-400,
-  'primary-600': $primary-600,
-  // SECONDARY
-  'secondary-600': $secondary-600,
-  'secondary-700': $secondary-700,
-  'secondary-800': $secondary-800,
-  // TERTIARY
-  'tertiary-600': $tertiary-600,
-  'tertiary-700': $tertiary-700,
-  'tertiary-800': $tertiary-800,
-  // ====================== COLORS / STATES ======================
-  // INFO
-  'info-200': $info-200,
-  'info-700': $info-700,
-  // SUCCESS
-  'success-200': $success-200,
-  'success-500': $success-500,
-  'success-600': $success-600,
-  'success-700': $success-700,
-  // ERROR
-  'error-200': $error-200,
-  'error-600': $error-600,
-  'error-700': $error-700,
-  // DANGER
-  'danger-200': $danger-200,
-  'danger-600': $danger-600,
-  'danger-700': $danger-700,
-  // WARNING
-  'warning-200': $warning-200,
-  'warning-600': $warning-600,
-  'warning-700': $warning-700,
-  // ====================== COLORS / SINGLE TONE ======================
-  'white': $white,
-  'black': $black,
-  'darkText': $darkText,
-  'blueGray-100': $blueGray-100,
-  'blueGray-500': $blueGray-500,
-  'darkBlue-500': $darkBlue-500,
-  // ====================== COLORS / TEXT&MUTED ======================
-  'truegray-50': $truegray-50,
-  'truegray-100': $truegray-100,
-  'truegray-200': $truegray-200,
-  'truegray-300': $truegray-300,
-  'truegray-400': $truegray-400,
-  'truegray-500': $truegray-500,
-  'truegray-600': $truegray-600,
-  'truegray-700': $truegray-700,
-  'truegray-800': $truegray-800,
-  'truegray-900': $truegray-900
-);
-
-@each $name, $pair in $custom_colors {
-  $color: nth($pair, 1);
-  .has-tc-#{$name} {
-    color: $color !important;
-    fill: $color !important;
-  }
-  .has-bc-#{$name} {
-    background-color: $color !important;
-  }
-}

package/src/sass/utilities/_helpers.scss

@@ -1,70 +0,0 @@
-// FONT =============================================
-.has-text-weight-extrabold {
-  font-weight: 900;
-}
-
-.has-line-height-150 {
-  line-height: 150%;
-}
-
-.has-border-bottom-grey-lighter {
-  border-bottom: 1px solid $grey-lighter;
-}
-
-.is-size-18px {
-  font-size: 18px !important;
-}
-
-.is-size-14px {
-  font-size: 14px !important;
-}
-
-.is-size-10px {
-  font-size: 10px !important;
-}
-
-// DIV =============================================
-.is-border-box {
-  box-sizing: border-box !important;
-}
-
-.is-absolute {
-  position: absolute !important;
-}
-
-.is-fullw {
-  width: 100%;
-}
-
-.is-fullh {
-  height: 100%;
-}
-
-.has-minw-maxcontent {
-  min-width: max-content;
-}
-
-// FLEX =============================================
-.is-gap-6 {
-  gap: 48px !important;
-}
-
-.is-gap-5 {
-  gap: 24px !important;
-}
-
-.is-gap-4 {
-  gap: 16px !important;
-}
-
-.is-gap-3 {
-  gap: 12px !important;
-}
-
-.is-gap-2 {
-  gap: 8px !important;
-}
-
-.is-gap-1 {
-  gap: 4px !important;
-}

package/src/sass/utilities/_variables.scss

@@ -1,147 +0,0 @@
-// ====================== FONT-VARIABLES ======================
-$fw-regular: 400;
-$fw-medium: 500;
-$fw-semibold: 600;
-$fw-bold: 700;
-$fw-heavy: 800;
-
-// ====================== COLORS / PRINCIPAL ======================
-// PRIMARY
-$primary-100: #b9d4ff;
-$primary-200: #7dafff;
-$primary-400: #2b71df;
-$primary-600: #124596;
-// SECONDARY
-$secondary-600: #db2777;
-$secondary-700: #be185d;
-$secondary-800: #9d174d;
-// TERTIARY
-$tertiary-600: #059669;
-$tertiary-700: #047857;
-$tertiary-800: #065f46;
-
-// ====================== COLORS / STATES ======================
-// INFO
-$info-200: #bae6fd;
-$info-700: #0369a1;
-
-// SUCCESS
-$success-200: #bbf7d0;
-$success-500: #22c55e;
-$success-600: #16a34a;
-$success-700: #15803d;
-
-// ERROR
-$error-200: #fecaca;
-$error-600: #dc2626;
-$error-700: #b91c1c;
-
-// DANGER
-$danger-200: #fecdd3;
-$danger-600: #e11d48;
-$danger-700: #be123c;
-
-// WARNING
-$warning-200: #fed7aa;
-$warning-600: #ea580c;
-$warning-700: #c2410c;
-
-// ====================== COLORS / SINGLE TONE ======================
-$white: #fff;
-$black: #000;
-$darkText: #27272a;
-
-$blueGray-100: #f1f5f9;
-$blueGray-500: #64748b;
-
-$darkBlue-500: #0077e6;
-// ====================== COLORS / TEXT&MUTED ======================
-$truegray-50: #fafafa;
-$truegray-100: #f5f5f5;
-$truegray-200: #e5e5e5;
-$truegray-300: #d4d4d4;
-$truegray-400: #a3a3a3;
-$truegray-500: #737373;
-$truegray-600: #525252;
-$truegray-700: #404040;
-$truegray-800: #262626;
-$truegray-900: #171717;
-
-$text-50: $truegray-50;
-$text-100: $truegray-100;
-$text-200: $truegray-200;
-$text-300: $truegray-300;
-$text-400: $truegray-400;
-$text-500: $truegray-500;
-$text-600: $truegray-600;
-$text-700: $truegray-700;
-$text-800: $truegray-900;
-$text-900: $truegray-900;
-
-$muted-50: $truegray-50;
-$muted-100: $truegray-100;
-$muted-200: $truegray-200;
-$muted-300: $truegray-300;
-$muted-400: $truegray-400;
-$muted-500: $truegray-500;
-$muted-600: $truegray-600;
-$muted-700: $truegray-700;
-$muted-800: $truegray-800;
-$muted-900: $truegray-900;
-
-// ============================== FONTS ==============================
-$shadow: 0px 8px 16px -2px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.02);
-
-// ============================== COLORS ==============================
-// PRIMARY ==========================
-$primary: #124596;
-$primary-light: #b9d4ff;
-$primary-hover: #214e96;
-$primary-active: #0c3b87;
-$primary-dark: #042e70;
-
-// LINK =============================
-$link: #3273dc;
-$link-light: #eef3fc;
-$link-hover: #326fd2;
-$link-active: #3069c5;
-$link-dark: #234e95;
-
-// INFO =============================
-$info: #209cee;
-$info-light: #ecf7fe;
-$info-hover: #1f96e4;
-$info-active: #1e8cd4;
-$info-dark: #044977;
-
-// INFO =============================
-$success: #68da90;
-$success-light: #eefcf3;
-$success-hover: #5fd086;
-$success-active: #55c37b;
-$success-dark: #208a45;
-
-// WARNING =============================
-$warning: #ffe681;
-$warning-light: #fffbeb;
-$warning-hover: #ffe167;
-$warning-active: #ffd943;
-$warning-dark: #be9d19;
-
-// DANGER =============================
-$danger: #ff7a95;
-$danger-light: #ffebef;
-$danger-hover: #ff5e7e;
-$danger-active: #ff4168;
-$danger-dark: #b12945;
-
-// ================= DEVICES =================
-$mobile: 600px;
-$desktop: 1200px;
-$desktopFullHd: 1920px;
-
-$breakpoint_header1: 1500px;
-$breakpoint_header1_5: 1380px;
-$breakpoint_header2: 1217px;
-$breakpoint_header3_burger: 1045px;
-$breakpoint_header4_logo: 654px;

package/src/stories/Changelog.stories.tsx

@@ -1,73 +0,0 @@
-import {Meta} from '@storybook/react';
-import Thumbnail from './assets/thumbnail-black[2].jpg';
-import {versions} from './changelog';
-import {generateRandomKey} from '../utils/functions';
-
-export const Changelog = () => {
-  return (
-    <div className="elv-component">
-      <section
-        className="hero is-black is-fullheight-with-navbar"
-        style={{background: `url("${Thumbnail}") center center / cover no-repeat`}}
-      >
-        <div className="hero-body is-flex is-align-items-flex-start">
-          <div className="container is-fluid">
-            <div className="column is-4">
-              <p className="subtitle is-3 mb-2 has-text-white" style={{whiteSpace: 'nowrap'}}>
-                @elevation/react
-              </p>
-              <p className="title is-1 has-text-white" style={{whiteSpace: 'nowrap'}}>
-                Changelog
-              </p>
-            </div>
-            {versions.map(ver => (
-              <div className="column is-6 mt-6" key={generateRandomKey()}>
-                <p className="title is-4 has-text-white mb-3">
-                  ====== {ver.version} - ({ver.date})
-                </p>
-                {ver.new && (
-                  <div>
-                    <p className="subtitle is-6 has-text-white mt-4 mb-1 has-text-weight-semibold">Nuevo:</p>
-                    {ver.new.map(item => (
-                      <div className="mb-3" key={generateRandomKey()}>
-                        <p className="subtitle is-6 has-text-white mb-1">- {item.component}</p>
-                        {item.changes.map(change => (
-                          <p key={generateRandomKey()} className="subtitle is-size-7 mb-1">
-                            {change}
-                          </p>
-                        ))}
-                      </div>
-                    ))}
-                  </div>
-                )}
-                {ver.fixes && (
-                  <div>
-                    <p className="subtitle is-6 has-text-white mt-4 mb-1 has-text-weight-semibold">Ajustes:</p>
-                    {ver.fixes.map(item => (
-                      <div className="mb-3">
-                        <p className="subtitle is-6 has-text-white mb-1">- {item.component && item.component}</p>
-                        {item.changes.map(change => (
-                          <p key={generateRandomKey()} className="subtitle is-size-7 mb-1">
-                            {change}
-                          </p>
-                        ))}
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-};
-export default {
-  title: 'Elevation/Changelog',
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-} as Meta;

package/src/stories/Components/AssistanceDiary/AssistanceDiary.scss

@@ -1,19 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-assistancediary{
-    .assistancediary{
-        &__date{
-            min-width: 73px;
-            color: $truegray-600;
-        }
-
-        &__widthstate{
-            min-width: 75px;
-        }
-
-        &__status{
-            border-radius: 11px;
-            color: $warning-light;
-        }
-    }
-}

package/src/stories/Components/AssistanceDiary/AssistanceDiary.stories.tsx

@@ -1,25 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {AssistanceDiary} from './AssistanceDiary';
-
-export default {
-  title: 'Components/AssistanceDiary',
-  component: AssistanceDiary,
-  args: {
-    title: 'Asistencia',
-    option: [
-      {detail: 'Se conectó tarde', date: '04/03/2023', state: 'Tardanza', stateBackground: '#F97316'},
-      {detail: 'No hay detalle', date: '04/03/2023', state: 'En horario', stateBackground: '#047857'},
-      {detail: 'El usuario pidió el día', date: '04/03/2023', state: 'Día libre', stateBackground: '#124596'},
-      {detail: 'No hay motivo que indique la falta', date: '04/03/2023', state: 'Ausente', stateBackground: '#DC2626'},
-      {detail: 'No hay motivo que indique la falta', date: '04/03/2023', state: 'Ausente', stateBackground: '#DC2626'},
-    ],
-    onSeeAll: () => {
-      console.log('clicked Button');
-    },
-  },
-} as ComponentMeta<typeof AssistanceDiary>;
-
-const Template: ComponentStory<typeof AssistanceDiary> = args => <AssistanceDiary {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {};

package/src/stories/Components/AssistanceDiary/AssistanceDiary.tsx

@@ -1,57 +0,0 @@
-import {title} from 'process';
-import './AssistanceDiary.scss';
-import {Button} from '../../Elements/Button/Button';
-
-export interface IAssistanceDiary {
-  // BASE
-  title?: string;
-  option?: IOption[];
-  // IS-OPTIONS
-
-  // EVENTS
-  onSeeAll?: () => void;
-
-  // GENERIC
-  className?: string;
-}
-export interface IOption {
-  detail?: string;
-  date?: string;
-  state?: string;
-  stateBackground?: string;
-}
-
-export const AssistanceDiary = ({title, option, onSeeAll, className}: IAssistanceDiary) => {
-  return (
-    <div className="elv-component elv-assistancediary">
-      <div
-        className={['assistancediary is-flex is-flex-direction-column p-5 is-gap-5 box', `${className ? ' ' + className : ''}`].join('')}
-      >
-        <div className="is-size-4 has-text-weight-bold has-text-grey-dark">{title}</div>
-        <div className="is-flex is-flex-direction-column is-gap-4">
-          {option?.map(item => (
-            <div className="is-flex is-size-7 is-justify-content-space-between py-2 is-align-items-center is-gap-2">
-              <div className="has-text-grey-dark has-text-weight-medium">{item.detail}</div>
-              <div className="assistancediary__date has-text-weight-medium">{item.date}</div>
-              <div className="assistancediary__widthstate p-1">
-                <div className="assistancediary__status has-text-centered" style={{backgroundColor: item.stateBackground}}>
-                  {item.state}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-        <div>
-          <Button
-            label="Ver todo"
-            fill="unstyled"
-            icon="fa-solid fa-arrow-right"
-            trailingIcon={true}
-            className="is-size-7 has-text-weight-medium has-text-grey px-4 py-3"
-            onClick={() => onSeeAll && onSeeAll()}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/stories/Components/AverageAttended/AverageAttended.scss

@@ -1,39 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-averageAttended{
-    .averageAttended{
-        flex-wrap: wrap;
-        padding: 20px;
-        border-radius: 16px;
-
-        @media (max-width: 640px){
-            padding: 10px;
-            gap: 24px !important;
-        }
-
-        &__option{
-            width: calc(33.33% - 16px);
-            gap: 30px;
-            @media (max-width: 920px){
-                width: calc(50% - 16px);
-            }
-            @media (max-width: 640px){
-                width: 100%;
-                
-            }
-        }
-
-        &__colorDark{
-            color: $darkText;
-        }
-
-        .badge{
-            
-            padding: 4px 8px;
-            @media (max-width: 950px){
-                max-width: 20px !important;
-                padding: 4px 4px;
-            }
-        }
-    }
-}

package/src/stories/Components/AverageAttended/AverageAttended.stories.tsx

@@ -1,71 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {AverageAttended} from './AverageAttended';
-
-export default {
-  title: 'Components/AverageAttended',
-  component: AverageAttended,
-  args: {
-    Call: [
-      //{id: 2, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 15, 18, 0), serviceStartTime: new Date(2023, 11, 18, 14, 0)},
-      //{id: 3, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 15, 18, 0), serviceStartTime: new Date(2023, 11, 18, 14, 0)},
-      //{id: 4, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 18, 18, 0), serviceStartTime: new Date(2023, 11, 18, 14, 0)},
-      {id: 1, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 18, 12, 30), serviceStartTime: new Date(2023, 11, 18, 12, 30)},
-      {id: 2, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 18, 12, 0), serviceStartTime: new Date(2023, 11, 18, 12, 0)},
-      {id: 3, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 18, 12, 0), serviceStartTime: new Date(2023, 11, 18, 12, 0)},
-      {id: 4, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 18, 12, 30), serviceStartTime: new Date(2023, 11, 18, 12, 30)},
-      {id: 5, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 18, 13, 0), serviceStartTime: new Date(2023, 11, 18, 13, 30)},
-      {id: 6, date: new Date(2023, 11, 29), arrivalTime: new Date(2023, 11, 29, 13, 0), serviceStartTime: new Date(2023, 11, 29, 13, 0)},
-      {id: 7, date: new Date(2023, 11, 29), arrivalTime: new Date(2023, 11, 29, 13, 0), serviceStartTime: new Date(2023, 11, 29, 13, 0)},
-      {id: 8, date: new Date(2023, 11, 29), arrivalTime: new Date(2023, 11, 29, 13, 0), serviceStartTime: new Date(2023, 11, 29, 13, 0)},
-      {id: 9, date: new Date(2023, 11, 29), arrivalTime: new Date(2023, 11, 29, 13, 0), serviceStartTime: new Date(2023, 11, 29, 13, 0)},
-      {id: 10, date: new Date(2023, 11, 29), arrivalTime: new Date(2023, 11, 29, 13, 0), serviceStartTime: new Date(2023, 11, 29, 13, 0)},
-    ],
-    option: [
-      {
-        status: 'Atendidos',
-        icon: 'fa-solid fa-users',
-        iconColor: '#124596',
-        amountCall: 0,
-        labelButtom: '▾',
-        labelTop: '▴+',
-        color: '#D4D4D4',
-        colorText: '#DC2626',
-        colorTextPositive: '#16A34A',
-        description: 'esta semana',
-      },
-    ],
-    option2: [
-      {
-        status: 'Promedio de espera',
-        icon: 'fa-regular fa-clock',
-        iconColor: '#124596',
-        amountCall: 'min',
-        labelTop: '▴+',
-        labelButtom: '▾',
-        color: '#D4D4D4',
-        colorText: '#DC2626',
-        colorTextPositive: '#16A34A',
-        description: 'esta semana',
-      },
-    ],
-    option3: [
-      {
-        status: 'Promedio de atención',
-        icon: 'fa-solid fa-stopwatch',
-        iconColor: '#124596',
-        amountCall: 'min',
-        labelTop: '▴+',
-        labelButtom: '▾',
-        color: '#D4D4D4',
-        colorText: '#DC2626',
-        description: 'esta semana',
-        colorTextPositive: '#16A34A',
-      },
-    ],
-  },
-} as ComponentMeta<typeof AverageAttended>;
-
-const Template: ComponentStory<typeof AverageAttended> = args => <AverageAttended {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {};