Feat: typography

.storybook/preview.ts

@@ -61,6 +61,9 @@ const headers = [
   'componentes-tarjetas-disposición',
   'componentes-tooltip--tooltip',
   'estilos-grilla',
+  'estilos-tipografía--headings',
+  'estilos-tipografía-cuerpo',
+  'estilos-tipografía-titulares',
   'estilos-tipografía',
   'formulario-archivo',
   'formulario-buscador',

.vscode/settings.json

@@ -1,8 +1,8 @@
 {
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "editor.tabSize": 2,
 }

src/components/Scrollbar/Scrollbar.stories.tsx

@@ -20,7 +20,7 @@ export const HorizontalScrollbarComponent = (): JSX.Element => {
     <div className="storybook__container-scrollbar">
       <Scrollbar>
         <div className="horizontal-example">
-          <h1>Esto es un título de ejemplo</h1>
+          <h2 className="font-weight-bold">Esto es un título de ejemplo</h2>
           <p className="lead">
             Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún
             fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal,
@@ -31,8 +31,6 @@ export const HorizontalScrollbarComponent = (): JSX.Element => {
           <hr />
           <br />
 
-          <h2>Esto es un título de ejemplo</h2>
-
           <p>
             Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún
             fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal,
@@ -53,7 +51,7 @@ export const VerticalScrollbarComponent = (): JSX.Element => {
     <div className="storybook__container-scrollbar">
       <Scrollbar>
         <div className="vertical-example">
-          <h1>Esto es un título de ejemplo</h1>
+          <h2 className="font-weight-bold">Esto es un título de ejemplo</h2>
           <p className="lead">
             Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún
             fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal,
@@ -74,7 +72,7 @@ export const VerticalScrollbarComponent = (): JSX.Element => {
           <hr />
           <br />
 
-          <h2>Esto es un título de ejemplo</h2>
+          <h3>Esto es un título de ejemplo</h3>
 
           <p>
             Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún
@@ -86,7 +84,7 @@ export const VerticalScrollbarComponent = (): JSX.Element => {
           <hr />
           <br />
 
-          <h2>Esto es un título de ejemplo</h2>
+          <h3>Esto es un título de ejemplo</h3>
 
           <p>
             Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún

src/components/Switch/Switch.stories.scss

@@ -1,14 +1,8 @@
-/* .switch {
-  & + & {
-    margin-left: 20px;
-  }
-}
-
-.switch-label, .switch-sm {
-  margin-right: 20px;
-} */
 .storybook__container-switch {
   display: flex;
   gap: 1rem;
   margin-bottom: 1rem;
+  .switch {
+    min-width: 150px;
+  }
 }

src/components/Switch/Switch.stories.tsx

@@ -17,6 +17,16 @@ export default {
 export const Switch = (): JSX.Element => {
   return (
     <>
+      {/* HTML previo a modificiacion de accesibilidad */}
+      {/* <div className="mb-3">
+        <label className="switch">
+          <input type="checkbox" id="example" />
+          <span className="slider"></span>
+        </label>
+        <label htmlFor="example" className="switch-label">
+          Prendido
+        </label>
+      </div> */}
       <div className="storybook__container-switch">
         <SwitchContainer label="Apagado" id="switch-1" />
         <SwitchContainer label="Prendido" id="switch-2" isChecked />

src/organisms/Table/Table.stories.tsx

@@ -638,3 +638,187 @@ export const CheckboxAndText = (): JSX.Element => {
 CheckboxAndText.story = {
   name: 'Con checkbox'
 };
+
+export const WithSubtitle = (): JSX.Element => {
+  return (
+    <div className="storybook__container-table-responsive">
+      <div className="responsive-scroll" tabIndex={0}>
+        <table className="table table-borderless">
+          <thead>
+            <tr>
+              <th scope="col" className="tb-number">
+                <span className="th-title">Número</span>
+                <span className="th-subtitle">
+                  Subtítulo de hasta 2 líneas donde se puede sumar contenido de soporte
+                </span>
+              </th>
+              <th scope="col" className="tb-text">
+                <span className="th-title">Texto</span>
+                <span className="th-subtitle">
+                  Subtítulo de hasta 2 líneas donde se puede sumar contenido de soporte
+                </span>
+              </th>
+              <th scope="col" className="tb-link">
+                <span className="th-title">Enlace</span>
+                <span className="th-subtitle">
+                  Subtítulo de hasta 2 líneas donde se puede sumar contenido de soporte
+                </span>
+              </th>
+              <th scope="col" className="tb-button">
+                <span className="th-title">Botón</span>
+                <span className="th-subtitle">
+                  Subtítulo de hasta 2 líneas donde se puede sumar contenido de soporte
+                </span>
+              </th>
+              <th scope="col" className="tb-check">
+                <span className="th-title">Checkbox</span>
+                <span className="th-subtitle">
+                  Subtítulo de hasta 2 líneas donde se puede sumar contenido de soporte
+                </span>
+              </th>
+              <th scope="col" className="tb-tag">
+                <span className="th-title">Etiqueta</span>
+                <span className="th-subtitle">
+                  Subtítulo de hasta 2 líneas donde se puede sumar contenido de soporte
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="text-right">1</td>
+              <td>Juan</td>
+              <td>
+                <a href="#" target="_blank" rel="noreferrer">
+                  Enlace predeterminado
+                </a>
+              </td>
+              <td>
+                <button type="button" className="btn btn-primary btn-icon">
+                  <i className="bx bxs-info-circle"></i>
+                  botón
+                </button>
+              </td>
+              <td>
+                <div className="custom-control custom-checkbox">
+                  <input
+                    className="custom-control-input"
+                    type="checkbox"
+                    id="skills-copywrite-input"
+                    name="skills"
+                    value="copywrite"
+                  />
+                  <label className="custom-control-label" htmlFor="skills-copywrite-input">
+                    Redacción
+                  </label>
+                </div>
+              </td>
+              <td>
+                <span className="badge badge-secondary">Etiqueta 1</span>
+              </td>
+            </tr>
+            <tr>
+              <td className="text-right">2</td>
+              <td>María</td>
+              <td>
+                <a href="#" target="_blank" rel="noreferrer">
+                  Enlace predeterminado
+                </a>
+              </td>
+              <td>
+                <button type="button" className="btn btn-primary btn-icon">
+                  <i className="bx bxs-info-circle"></i>
+                  botón
+                </button>
+              </td>
+              <td>
+                <div className="custom-control custom-checkbox">
+                  <input
+                    className="custom-control-input"
+                    type="checkbox"
+                    id="skills-design-input"
+                    name="skills"
+                    value="design"
+                  />
+                  <label className="custom-control-label" htmlFor="skills-design-input">
+                    Diseño
+                  </label>
+                </div>
+              </td>
+              <td>
+                <span className="badge badge-secondary">Etiqueta 1</span>
+              </td>
+            </tr>
+            <tr>
+              <td className="text-right">3</td>
+              <td>Esther</td>
+              <td>
+                <a href="#" target="_blank" rel="noreferrer">
+                  Enlace predeterminado
+                </a>
+              </td>
+              <td>
+                <button type="button" className="btn btn-primary btn-icon">
+                  <i className="bx bxs-info-circle"></i>
+                  botón
+                </button>
+              </td>
+              <td>
+                <div className="custom-control custom-checkbox">
+                  <input
+                    className="custom-control-input"
+                    type="checkbox"
+                    id="skills-development-input"
+                    name="skills"
+                    value="development"
+                  />
+                  <label className="custom-control-label" htmlFor="skills-development-input">
+                    Desarrollo
+                  </label>
+                </div>
+              </td>
+              <td>
+                <span className="badge badge-secondary">Etiqueta 1</span>
+              </td>
+            </tr>
+            <tr>
+              <td className="text-right">4</td>
+              <td>José</td>
+              <td>
+                <a href="#" target="_blank" rel="noreferrer">
+                  Enlace predeterminado
+                </a>
+              </td>
+              <td>
+                <button type="button" className="btn btn-primary btn-icon">
+                  <i className="bx bxs-info-circle"></i>
+                  botón
+                </button>
+              </td>
+              <td>
+                <div className="custom-control custom-checkbox">
+                  <input
+                    className="custom-control-input"
+                    type="checkbox"
+                    id="skills-validation-input"
+                    name="skills"
+                    value="development"
+                  />
+                  <label className="custom-control-label" htmlFor="skills-validation-input">
+                    Validacion
+                  </label>
+                </div>
+              </td>
+              <td>
+                <span className="badge badge-secondary">Etiqueta 1</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+WithSubtitle.story = {
+  name: 'Con subtítulo'
+};

src/scss/components/_badge.scss

@@ -2,14 +2,15 @@
 
 $badge-color: $grisulado-900;
 $badge-color-hover: $blue;
-$badge-font-size: 0.8125rem;
+$badge-font-size: $text-sm;
 $badge-font-weight: $font-weight-normal;
 $badge-border-radius: spaceUnits(2);
 $badge-separation: spaceUnits(2);
 
 $badge-bg-level: -9;
 $badge-bg-level-hover: -9.6;
-$badge-padding-y: 0;
+$badge-padding-y: 0.125rem;
+$badge-padding-x: 0.25rem;
 
 /* === Custom variables and mixins === */
 
@@ -44,8 +45,8 @@ $badge-padding-y: 0;
 .badge {
   text-decoration: none;
   text-transform: uppercase;
-  line-height: 1.6;
-  min-height: 18px;
+  line-height: $height-text-sm;
+  min-height: 24px;
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;

src/scss/components/_block.scss

@@ -9,7 +9,9 @@ $card-block-box-shadow: 0 0 0 2px $grisulado-50;
 
   .block-title {
     margin-bottom: 0;
-    @extend .h4;
+    font-size: $headline-lg;
+    line-height: $height-headline;
+    font-weight: $font-weight-bold;
   }
 
   .block-text {