npm - @dropi/ui-components - Versions diffs - 1.0.0 - Mend

@dropi/ui-components 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (393) hide show

package/src/components-source/storybook-doc-components/avatars-storybook/avatars-storybook.component.html ADDED Viewed

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Documentación de Dropi Avatars</title>
+  <style>
+    .avatar-example {
+      display: flex;
+      align-items: center;
+      margin: 20px 0;
+    }
+    .avatar-example img {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      margin-right: 20px;
+    }
+    .avatar-example .code {
+      font-family: 'Courier New', Courier, monospace;
+      background: #f4f4f4;
+      padding: 10px;
+      border-radius: 5px;
+      flex-grow: 1;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1><code appPrismHighlight>&lt;dropi-avatars&gt;</code></h1>
+    <h2>Descripción</h2>
+    <p>El componente <code appPrismHighlight>&lt;dropi-avatars&gt;</code> permite representar diferentes tipos de
+      avatares en la aplicación: <strong>usuarios, transportistas, proveedores, medios de pago</strong> y
+      <strong>contadores</strong>. Puede mostrar una <strong>imagen</strong> o unas <strong>iniciales</strong>,
+      dependiendo del caso de uso.
+    </p>
+    <h2>Uso Básico</h2>
+    <pre><code appPrismHighlight>&lt;dropi-avatars
+  [image]="'ruta/de/imagen.png'"
+  [type]="'tipo-avatar'"
+&gt;&lt;/dropi-avatars&gt;</code></pre>
+    <p>o</p>
+    <pre><code appPrismHighlight>&lt;dropi-avatars
+  [initials]="'Iniciales'"
+  [type]="'tipo-avatar'"
+&gt;&lt;/dropi-avatars&gt;</code></pre>
+    <h2>Propiedades</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Propiedad</th>
+          <th>Tipo</th>
+          <th>Descripción</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code appPrismHighlight>image</code></td>
+          <td>string</td>
+          <td>URL o path local de la imagen que se mostrará como avatar.</td>
+        </tr>
+        <tr>
+          <td><code appPrismHighlight>initials</code></td>
+          <td>string</td>
+          <td>Letras o número que se mostrará si no se usa imagen.</td>
+        </tr>
+        <tr>
+          <td><code appPrismHighlight>type</code></td>
+          <td>string</td>
+          <td>Categoría del avatar: <code appPrismHighlight>users</code>, <code appPrismHighlight>transport</code>,
+            <code appPrismHighlight>supplier</code>, <code appPrismHighlight>payment</code>, <code
+              appPrismHighlight>counter</code>.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <h2>Tipos de Avatares</h2>
+    <ul>
+      <li><strong>users</strong>: Representa a usuarios (personas).</li>
+      <li><strong>transport</strong>: Empresas de transporte o logística.</li>
+      <li><strong>supplier</strong>: Proveedores.</li>
+      <li><strong>payment</strong>: Métodos de pago.</li>
+      <li><strong>counter</strong>: Contadores de elementos (+2, +5, etc.).</li>
+    </ul>
+    <h2>Ejemplos de Uso</h2>
+    <h3>1. Avatar de transporte</h3>
+    <div class="avatar-example">
+      <dropi-avatars [image]="'assets/images/delivery/servientrega.png'" [type]="'transport'"></dropi-avatars>
+      <div class="code">
+        <pre><code appPrismHighlight>&lt;dropi-avatars
+  [image]="'assets/images/delivery/servientrega.png'"
+  [type]="'transport'"
+&gt;&lt;/dropi-avatars&gt;</code></pre>
+      </div>
+    </div>
+    <br>
+    <h3>2. Avatar de usuario (con imagen)</h3>
+    <div class="avatar-example">
+      <dropi-avatars [image]="'assets/images/users/avatar-1.jpg'" [type]="'users'"></dropi-avatars>
+      <div class="code">
+        <pre><code appPrismHighlight>&lt;dropi-avatars
+  [image]="'assets/images/users/avatar-6.jpg'"
+  [type]="'users'"
+&gt;&lt;/dropi-avatars&gt;</code></pre>
+      </div>
+    </div>
+    <br>
+    <h3>3. Avatar de usuario (con iniciales)</h3>
+    <div class="avatar-example">
+      <dropi-avatars [initials]="'MCSP'" [type]="'users'"></dropi-avatars>
+      <div class="code">
+        <pre><code appPrismHighlight>&lt;dropi-avatars
+  [initials]="'MCSP'"
+  [type]="'users'"
+&gt;&lt;/dropi-avatars&gt;</code></pre>
+      </div>
+    </div>
+    <br>
+    <h3>4. Avatar de contador (+2)</h3>
+    <div class="avatar-example">
+      <dropi-avatars [initials]="'+2'" [type]="'counter'"></dropi-avatars>
+      <div class="code">
+        <pre><code appPrismHighlight>&lt;dropi-avatars
+  [initials]="'+2'"
+  [type]="'counter'"
+&gt;&lt;/dropi-avatars&gt;</code></pre>
+      </div>
+    </div>
+    <br>
+    <h3>5. Avatar de proveedor (URL externa)</h3>
+    <div class="avatar-example">
+      <dropi-avatars [image]="
+          'https://d39ru7awumhhs2.cloudfront.net/colombia/user/315635/logo/1729173015LOGO.jpg'
+        " [type]="'supplier'"></dropi-avatars>
+      <div class="code">
+        <pre><code appPrismHighlight>&lt;dropi-avatars
+  [image]="'https://d39ru7awumhhs2.cloudfront.net/colombia/user/315635/logo/1729173015LOGO.jpg'"
+  [type]="'supplier'"
+&gt;&lt;/dropi-avatars&gt;</code></pre>
+      </div>
+    </div>
+    <br>
+    <h3>6. Avatar de método de pago</h3>
+    <div class="avatar-example">
+      <dropi-avatars [image]="'assets/img/payment-processors/global-66.png'" [type]="'payment'"></dropi-avatars>
+      <div class="code">
+        <pre><code appPrismHighlight>&lt;dropi-avatars
+  [image]="'assets/img/payment-processors/global-66.png'"
+  [type]="'payment'"
+&gt;&lt;/dropi-avatars&gt;</code></pre>
+      </div>
+    </div>
+    <br>
+    <br>
+    <h2>Consideraciones</h2>
+    <ul>
+      <li>Si el path de la imagen está incorrecto, se debe manejar un
+        <strong>fallback</strong> (por ejemplo, mostrar iniciales o un ícono de error).
+      </li>
+      <li>El campo type es <strong>obligatorio</strong> para definir el contexto visual
+        del avatar.</li>
+      <li>Si se usan initials, el campo image puede
+        omitirse.</li>
+    </ul>
+  </div>
+</body>
+</html>

package/src/components-source/storybook-doc-components/avatars-storybook/avatars-storybook.component.scss ADDED Viewed

@@ -0,0 +1,15 @@
+.avatar-example {
+    width: 10rem;
+    height: 10rem;
+}
+.avatar-example {
+    display: flex;
+    width: 100%;
+    gap: 1rem;
+    justify-content: space-between;
+    .code {
+        max-width: 80%;
+    }
+}

package/src/components-source/storybook-doc-components/avatars-storybook/avatars-storybook.component.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { PrismHighlightDirective } from '@app/directives/prism-highlight.directive';
+import { DropiAvatarsComponent } from '@app/ui/dropi-avatars/dropi-avatars.component';
+@Component({
+  selector: 'app-avatars-storybook',
+  templateUrl: './avatars-storybook.component.html',
+  styleUrls: ['./avatars-storybook.component.scss'],
+  standalone: true,
+  imports: [DropiAvatarsComponent, CommonModule, PrismHighlightDirective],
+})
+export class AvatarsStorybookComponent implements OnInit {
+  constructor() {}
+  ngOnInit() {}
+}

package/src/components-source/storybook-doc-components/border-radius-storybook/border-radius-storybook.component.html ADDED Viewed

@@ -0,0 +1,22 @@
+<div class="container">
+  <app-tillte-table-documentation [dataTable]="borderSizes" [tittle]="'Border radius'" [description]="description"
+    [type]="'borderRadius'"></app-tillte-table-documentation>
+  <h3 style="margin-top: 3rem;">
+    Uso de Tokens de Border en un Componente
+  </h3>
+  <p style="margin-top: 1rem;">
+    Los tokens de border-radius se utilizan para garantizar consistencia en los bordes de los elementos dentro de la
+    plataforma. A continuación, se muestra un ejemplo práctico de cómo aplicarlos a un div.
+  </p>
+  <pre>
+  <code appPrismHighlight class="language-css">
+   {{' .element {
+    border-radius: var(--border-1);
+  }'}}
+  </code>
+</pre>
+</div>

package/src/components-source/storybook-doc-components/border-radius-storybook/border-radius-storybook.component.scss ADDED Viewed

File without changes

package/src/components-source/storybook-doc-components/border-radius-storybook/border-radius-storybook.component.ts ADDED Viewed

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { PrismHighlightDirective } from '@app/directives/prism-highlight.directive';
+import { TillteTableDocumentationComponent } from '@app/ui/storybook-doc-components/tillte-table-documentation/tillte-table-documentation.component';
+@Component({
+  selector: 'app-border-radius-storybook',
+  templateUrl: './border-radius-storybook.component.html',
+  styleUrls: ['./border-radius-storybook.component.scss'],
+  standalone:true,
+  imports:[TillteTableDocumentationComponent,PrismHighlightDirective]
+})
+export class BorderRadiusStorybookComponent implements OnInit {
+  description = 'Este conjunto de bordes define los radios de redondeo utilizados en la interfaz. Cada valor de border-radius proporciona diferentes niveles de curvatura, permitiendo ajustar la apariencia de los elementos según su jerarquía y propósito visual.'
+   borderSizes = [
+    {
+      preview: "4px",
+      token: "Border-1",
+      number: "4px",
+      classname: ""
+    },
+    {
+      preview: "8px",
+      token: "Border-2",
+      number: "8px",
+      classname: ""
+    },
+    {
+      preview: "12px",
+      token: "Border-3",
+      number: "12px",
+      classname: ""
+    },
+    {
+      preview: "24px",
+      token: "Border-4",
+      number: "24px",
+      classname: ""
+    },
+    {
+      preview: "32px",
+      token: "Border-5",
+      number: "32px",
+      classname: ""
+    }
+  ];
+  constructor() { }
+  ngOnInit() {
+  }
+}

package/src/components-source/storybook-doc-components/breakpoints-and-grids-storybook/breakpoints-and-grids-storybook.component.css ADDED Viewed

@@ -0,0 +1,81 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+    background-color: #f8f9fa;
+}
+h2 {
+    text-align: center;
+    color: #333;
+}
+.table-container {
+    overflow-x: auto;
+    margin-bottom: 20px;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+th, td {
+    padding: 12px;
+    text-align: center;
+    border: 1px solid #ddd;
+}
+th {
+    background-color: rgba(255, 166, 0, 0.918);
+    color: #fff;
+    font-weight: bold;
+}
+td {
+    color: #333;
+}
+.breakpoints {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: 20px 0;
+    padding: 15px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+.breakpoint-item {
+    flex: 1;
+    text-align: center;
+    padding: 10px;
+    border-right: 2px solid #ddd;
+    color: #333;
+}
+.breakpoint-item:last-child {
+    border-right: none;
+}
+.notes {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+.notes ul {
+    padding-left: 20px;
+}
+.notes li {
+    margin: 10px 0;
+    color: #555;
+}

package/src/components-source/storybook-doc-components/breakpoints-and-grids-storybook/breakpoints-and-grids-storybook.component.html ADDED Viewed

@@ -0,0 +1,143 @@
+<div class="container">
+  <app-tillte-table-documentation [dataTable]="mobileGridExtraSmall" [description]="descriptionComponent" [tittle]="'Extra Small'"></app-tillte-table-documentation>
+  <app-template-breakpoint-storybook  [gutters]="mobileGridExtraSmall[0].gutters" [columns]="mobileGridExtraSmall[0].columns" [breakpoint]="mobileGridExtraSmall[0].breakpoint"  [margins]="mobileGridExtraSmall[0].margins"></app-template-breakpoint-storybook>
+  <app-tillte-table-documentation [dataTable]="tabletGridSmall" [description]="descriptionTablets" [tittle]="'Extra Small'"></app-tillte-table-documentation>
+  <app-template-breakpoint-storybook  [gutters]="tabletGridSmall[0].gutters" [columns]="tabletGridSmall[0].columns" [breakpoint]="tabletGridSmall[0].breakpoint"  [margins]="tabletGridSmall[0].margins"></app-template-breakpoint-storybook>
+  <app-tillte-table-documentation [dataTable]="desktopGridsMedium" [description]="descriptionDesktop" [tittle]="'Medium'"></app-tillte-table-documentation>
+  <app-tillte-table-documentation [dataTable]="desktopGridsLarge" [description]="descriptionDesktopLarge" [tittle]="'Large'"></app-tillte-table-documentation>
+  <app-template-breakpoint-storybook [container]="desktopGridsMedium[0].container" [gutters]="desktopGridsMedium[0].gutters" [columns]="desktopGridsMedium[0].columns" [breakpoint]="desktopGridsMedium[0].breakpoint"  [margins]="desktopGridsMedium[0].margins"></app-template-breakpoint-storybook>
+  <app-template-breakpoint-storybook [container]="'70px'" [gutters]="desktopGridsMedium[0].gutters" [columns]="desktopGridsMedium[0].columns" [breakpoint]="desktopGridsMedium[0].breakpoint"  [margins]="desktopGridsMedium[0].margins"></app-template-breakpoint-storybook>
+  <app-tillte-table-documentation [dataTable]="desktopGridsExtraLarge" [description]="descriptionExtraLarge" [tittle]="'Extra Large'"></app-tillte-table-documentation>
+  <app-tillte-table-documentation [dataTable]="desktopGridsFullWidth" [description]="descriptionFullWidth" [tittle]="'Full width'"></app-tillte-table-documentation>
+<app-template-breakpoint-storybook [container]="desktopGridsExtraLarge[0].container" [gutters]="desktopGridsExtraLarge[0].gutters" [columns]="desktopGridsExtraLarge[0].columns" [breakpoint]="desktopGridsExtraLarge[0].breakpoint"  [margins]="32"></app-template-breakpoint-storybook>
+  <app-template-breakpoint-storybook [container]="'70px'" [gutters]="desktopGridsExtraLarge[0].gutters" [columns]="desktopGridsExtraLarge[0].columns" [breakpoint]="desktopGridsExtraLarge[0].breakpoint"  ></app-template-breakpoint-storybook>
+<br>
+<br>
+  <body>
+    <h2>Breakpoints Grid</h2>
+<br>
+    <div class="table-container">
+        <table>
+            <thead>
+                <tr>
+                    <th>DEVICE</th>
+                    <th>BREAKPOINT</th>
+                    <th>CUT POINT</th>
+                    <th>CONTAINER</th>
+                    <th>COLUMNS</th>
+                    <th>GUTTERS</th>
+                    <th>GRIDS PADDINGS</th>
+                    <th>GRIDS MARGINS</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Mobile</td>
+                    <td>360px</td>
+                    <td>599px</td>
+                    <td>Responsive</td>
+                    <td>0-4</td>
+                    <td>16</td>
+                    <td>-</td>
+                    <td>16px</td>
+                </tr>
+                <tr>
+                    <td>Tablet</td>
+                    <td>600px</td>
+                    <td>600px - 999px</td>
+                    <td>Responsive</td>
+                    <td>12</td>
+                    <td>20</td>
+                    <td>-</td>
+                    <td>24px</td>
+                </tr>
+                <tr>
+                    <td>Desktop</td>
+                    <td>1000px</td>
+                    <td>1000px - 1199px</td>
+                    <td>Right</td>
+                    <td>12</td>
+                    <td>32</td>
+                    <td>-</td>
+                    <td>32px</td>
+                </tr>
+                <tr>
+                    <td>Flexible</td>
+                    <td>1000px</td>
+                    <td>1000px - 1199px</td>
+                    <td>Responsive</td>
+                    <td>12</td>
+                    <td>32</td>
+                    <td>-</td>
+                    <td>32px</td>
+                </tr>
+                <tr>
+                    <td>Desktop</td>
+                    <td>1200px</td>
+                    <td>1200px - 1536px</td>
+                    <td>Right</td>
+                    <td>12</td>
+                    <td>32</td>
+                    <td>-</td>
+                    <td>32px</td>
+                </tr>
+                <tr>
+                    <td>Flexible</td>
+                    <td>1200px</td>
+                    <td>1200px - 1536px</td>
+                    <td>Responsive</td>
+                    <td>12</td>
+                    <td>32</td>
+                    <td>-</td>
+                    <td>32px</td>
+                </tr>
+                <tr>
+                    <td>Desktop</td>
+                    <td>&lt;1535px</td>
+                    <td>&lt;1535px</td>
+                    <td>W-Max 1330px Centered</td>
+                    <td>12</td>
+                    <td>32</td>
+                    <td>Auto</td>
+                    <td>32px</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <h2>Breakpoints</h2>
+    <div class="breakpoints">
+        <div class="breakpoint-item">360px</div>
+        <div class="breakpoint-item">768px</div>
+        <div class="breakpoint-item">1280px</div>
+        <div class="breakpoint-item">1330px</div>
+        <div class="breakpoint-item">1536px+</div>
+    </div>
+    <div class="notes">
+        <h3>Tener en cuenta</h3>
+        <ul>
+            <li>Device mobile, se puede utilizar de 1 a 4 columnas si el diseño lo requiere.</li>
+            <li>Device tablet, no tiene sidebar, la grid se estira según el ancho de pantalla hasta el siguiente breakpoint.</li>
+            <li>Device desktop small, a partir de 1000px pasa a tener un sidebar, la grid se posiciona al lado derecho del frame.</li>
+            <li>Device desktop medium, la medida estándar para diseñar los mockups es 1280px. Al recoger el menú, el ancho de las columnas se aumenta.</li>
+            <li>Device desktop large, cuando el contenedor supere los 1330px de ancho, la grid quedará centrada en el contenedor.</li>
+        </ul>
+    </div>
+</body>
+</div>

package/src/components-source/storybook-doc-components/breakpoints-and-grids-storybook/breakpoints-and-grids-storybook.component.ts ADDED Viewed

@@ -0,0 +1,97 @@
+import { Component, OnInit } from '@angular/core';
+import { TemplateBreakpointStorybookComponent } from '@app/ui/storybook-doc-components/template-breakpoint-storybook/template-breakpoint-storybook.component';
+import { TillteTableDocumentationComponent } from '@app/ui/storybook-doc-components/tillte-table-documentation/tillte-table-documentation.component';
+@Component({
+  selector: 'app-breakpoints-and-grids-storybook',
+  templateUrl: './breakpoints-and-grids-storybook.component.html',
+  styleUrls: ['./breakpoints-and-grids-storybook.component.css'],
+  standalone:true,
+  imports :[TillteTableDocumentationComponent,TemplateBreakpointStorybookComponent]
+})
+export class BreakpointsAndGridsStorybookComponent implements OnInit {
+  constructor() { }
+   mobileGridExtraSmall = [
+    {
+    device: "Mobile",
+    breakpoint: "0PX",
+    container: "Strech",
+    columns: 1,
+    gutters: 0,
+    margins: 16,
+    className:''
+  }
+];
+tabletGridSmall = [{
+  device: "Tablet",
+  breakpoint: "600PX",
+  container: "Strech",
+  columns: 12,
+  gutters: 20,
+  margins: 24,
+  className:''
+}];
+desktopGridsMedium = [
+  {
+    device: "Desktop",
+    breakpoint: "1000px",
+    container: "686px Rigth",
+    columns: 12,
+    gutters: 32,
+    margins: 32,
+    classname: ""
+  }
+];
+ desktopGridsLarge = [
+  {
+    device: "Desktop",
+    breakpoint: "1200px",
+    container: "1126px Rigth",
+    columns: 12,
+    gutters: 32,
+    margin: 32,
+    classname: ""
+  }
+];
+ desktopGridsFullWidth = [
+  {
+    device: "Desktop",
+    breakpoint: ">1536px",
+    container: "Stretch",
+    columns: 12,
+    gutters: 32,
+    margin: "Center",
+    classname: ""
+  }
+];
+ desktopGridsExtraLarge = [
+  {
+    device: "Desktop",
+    breakpoint: "<1536px",
+    container: "max 1330px centered",
+    columns: 12,
+    gutters: 32,
+    margin: "Center",
+    classname: ""
+  }
+];
+descriptionComponent = "En Dropi, nos esforzamos por ofrecer una experiencia de usuario excepcional en todos los dispositivos. Para lograrlo, hemos desarrollado un sistema de grid robusto y flexible, especialmente optimizado para dispositivos móviles en su variante 'Extra Small'. La configuración que se detalla a continuación define parámetros clave —como el breakpoint, el ancho del contenedor, el número de columnas, así como los gutters y márgenes— que aseguran una visualización ordenada y funcional en pantallas pequeñas. Este enfoque permite a Dropi mantener una interfaz coherente y responsiva, facilitando la navegación y garantizando que cada elemento se adapte perfectamente a la experiencia móvil."
+descriptionTablets = "Define la configuración del sistema de grillas para dispositivos con resoluciones pequeñas, orientada a pantallas cuyo ancho alcanza aproximadamente los 600 píxeles. Esta configuración establece parámetros esenciales para el diseño y la disposición de los elementos en dispositivos de menor tamaño, garantizando una visualización coherente y óptima."
+descriptionDesktop =' La configuración "Desktop Medium" define el diseño de grillas para pantallas de escritorio. Con un breakpoint de 1000px y un contenedor de 686px alineado a la derecha, esta configuración establece 12 columnas y utiliza 32px tanto para gutters como para márgenes. Esto garantiza una distribución equilibrada y un diseño responsive para interfaces de escritorio.'
+descriptionDesktopLarge ='En Dropi, la configuración de grid para Desktop (Large) define la estructura de la interfaz en pantallas grandes. El breakpoint se establece en 1200px, con un contenedor de 1126px alineado a la derecha. Se organiza en 12 columnas, con un espaciado entre ellas (gutters) de 32px y márgenes exteriores de 32px. Esta configuración asegura una distribución óptima de los elementos en dispositivos de escritorio de gran tamaño.'
+descriptionFullWidth ='La configuración Full Width permite que la grilla se expanda a todo el ancho de la pantalla, rompiendo con la estructura estándar. Se aplica en dispositivos Desktop con un breakpoint menor a 1536px. El contenedor se estira completamente (Stretch) y mantiene una estructura de 12 columnas con un espaciado entre ellas (gutters) de 32px y márgenes centrados. Esta configuración se usa en Dropi para secciones donde el contenido debe ocupar todo el ancho de la pantalla, creando un diseño más inmersivo.'
+descriptionExtraLarge='La configuración Extra Large está optimizada para pantallas de hasta 1536px, con un contenedor máximo de 1330px centrado. Se aplica en dispositivos Desktop con una estructura de 12 columnas, espaciado entre ellas (gutters) de 32px y márgenes centrados. Se usa en Dropi para pantallas grandes, asegurando una disposición equilibrada sin que el contenido se extienda demasiado.'
+  ngOnInit() {
+  }
+}

package/src/components-source/storybook-doc-components/colors-storybook/colors-storybook.component.css ADDED Viewed

@@ -0,0 +1,10 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+.container-doc{
+    margin: 6rem 10rem;
+}