refactor: se refactoriza el codigo de tipografia pasando a ser componente react

src/styles/Typography/Typography.stories.tsx

@@ -4,6 +4,22 @@ import './Typography.stories.scss';
 
 // Addons
 import { withA11y } from '@storybook/addon-a11y';
+import {
+  Heading,
+  Text,
+  Small,
+  Subtitle,
+  Epigraph,
+  Em,
+  Mark,
+  Sup,
+  Sub,
+  Kbd,
+  Blockquote,
+  UnorderedList,
+  ListItem,
+  OrderedList
+} from '.';
 
 // Configuración general del componente
 export default {
@@ -31,47 +47,90 @@ export const Headings = (): JSX.Element => {
       <h4>H4 - Nunito {isMobile ? 'Semibold' : 'Bold'} 19px</h4>
       <h5>H5 - Nunito Semibold 17px</h5>
       <h6>H6 - Open Sans Bold 16px</h6>
+
+      <hr />
+
+      <Heading as="h1">H1 - Nunito Bold 37px</Heading>
+      <Heading as="h2">H2 - Nunito Semibold 28px</Heading>
+      <Heading as="h3">H3 - Nunito Semibold 21px</Heading>
+      <Heading as="h4">H4 - Nunito {isMobile ? 'Semibold' : 'Bold'} 19px</Heading>
+      <Heading as="h5">H5 - Nunito Semibold 17px</Heading>
+      <Heading as="h6">H6 - Open Sans Bold 16px</Heading>
     </>
   );
 };
 
 Headings.story = { name: 'Títulos' };
 
-export const Subtitle = (): JSX.Element => {
-  return <p className="lead">Open Sans Regular 19px</p>;
+export const SubTitle = (): JSX.Element => {
+  return (
+    <>
+      <p className="lead">Open Sans Regular 19px</p>
+
+      <hr />
+
+      <Subtitle>Open Sans Regular 19px</Subtitle>
+    </>
+  );
 };
 
-Subtitle.story = { name: 'Subtítulo' };
+SubTitle.story = { name: 'Subtítulo' };
 
-export const Text = (): JSX.Element => {
+export const Texts = (): JSX.Element => {
   return (
     <>
       <p>Open Sans Regular 16px</p>
       <small>Open Sans Regular 13px</small>
+
+      <hr></hr>
+
+      <Text>Open Sans Regular 16px</Text>
+      <Small>Open Sans Regular 13px</Small>
     </>
   );
 };
 
-Text.story = { name: 'Párrafo' };
+Texts.story = { name: 'Párrafo' };
+
+export const Epigraphs = (): JSX.Element => {
+  return (
+    <>
+      <p className="text-xs">Open Sans Regular 11.7px</p>
+
+      <hr />
 
-export const Epigraph = (): JSX.Element => {
-  return <p className="text-xs">Open Sans Regular 11.7px</p>;
+      <Epigraph>Open Sans Regular 11.7px</Epigraph>
+    </>
+  );
 };
 
-Epigraph.story = {
+Epigraphs.story = {
   name: 'Epígrafe'
 };
 
 export const Transformations = (): JSX.Element => {
   return (
-    <p>
-      Nuestro sistema de <strong>estándares</strong> brinda un <em>conjunto de herramientas</em> y componentes
-      colaborativos
-      <br />y <small>accesibles</small> que define procesos para que los equipos internos y externos puedan trabajar
-      <br />
-      alineadamente. De esta forma, ayudamos a crear <mark>servicios</mark> consistent<sup>es</sup> para mejorar
-      <br /> la experiencia digit<sub>al</sub> de vecinos y vecina<kbd>s</kbd>.
-    </p>
+    <>
+      <p>
+        Nuestro sistema de <strong>estándares</strong> brinda un <em>conjunto de herramientas</em> y componentes
+        colaborativos
+        <br />y <small>accesibles</small> que define procesos para que los equipos internos y externos puedan trabajar
+        <br />
+        alineadamente. De esta forma, ayudamos a crear <mark>servicios</mark> consistent<sup>es</sup> para mejorar
+        <br /> la experiencia digit<sub>al</sub> de vecinos y vecina<kbd>s</kbd>.
+      </p>
+
+      <hr />
+
+      <p>
+        Nuestro sistema de <strong>estándares</strong> brinda un <Em>conjunto de herramientas</Em> y componentes
+        colaborativos
+        <br />y <Small>accesibles</Small> que define procesos para que los equipos internos y externos puedan trabajar
+        <br />
+        alineadamente. De esta forma, ayudamos a crear <Mark>servicios</Mark> consistent<Sup>es</Sup> para mejorar
+        <br /> la experiencia digit<Sub>al</Sub> de vecinos y vecina<Kbd>s</Kbd>.
+      </p>
+    </>
   );
 };
 Transformations.story = {
@@ -93,6 +152,21 @@ export const Quote = (): JSX.Element => {
         </p>
         <small>Nombre del autor de la cita</small>
       </blockquote>
+
+      <hr />
+
+      <Blockquote>
+        <p>
+          Este es un apartado del texto que se quiere destacar por su importancia dentro del contenido de la página.
+        </p>
+      </Blockquote>
+      <br />
+      <Blockquote>
+        <p>
+          Este es un apartado del texto que se quiere destacar por su importancia dentro del contenido de la página.
+        </p>
+        <Small>Nombre del autor de la cita</Small>
+      </Blockquote>
     </div>
   );
 };
@@ -102,11 +176,21 @@ Quote.story = {
 
 export const List = (): JSX.Element => {
   return (
-    <ul>
-      <li>Esto es el texto de una lista</li>
-      <li>Esto es el texto de una lista</li>
-      <li>Esto es el texto de una lista</li>
-    </ul>
+    <>
+      <ul>
+        <li>Esto es el texto de una lista</li>
+        <li>Esto es el texto de una lista</li>
+        <li>Esto es el texto de una lista</li>
+      </ul>
+
+      <hr />
+
+      <UnorderedList>
+        <ListItem>Esto es el texto de una lista</ListItem>
+        <ListItem>Esto es el texto de una lista</ListItem>
+        <ListItem>Esto es el texto de una lista</ListItem>
+      </UnorderedList>
+    </>
   );
 };
 List.story = {
@@ -115,11 +199,21 @@ List.story = {
 
 export const OrderList = (): JSX.Element => {
   return (
-    <ol>
-      <li>Esto es el texto de una lista ordenada</li>
-      <li>Esto es el texto de una lista ordenada</li>
-      <li>Esto es el texto de una lista ordenada</li>
-    </ol>
+    <>
+      <ol>
+        <li>Esto es el texto de una lista ordenada</li>
+        <li>Esto es el texto de una lista ordenada</li>
+        <li>Esto es el texto de una lista ordenada</li>
+      </ol>
+
+      <hr />
+
+      <OrderedList>
+        <ListItem>Esto es el texto de una lista ordenada</ListItem>
+        <ListItem>Esto es el texto de una lista ordenada</ListItem>
+        <ListItem>Esto es el texto de una lista ordenada</ListItem>
+      </OrderedList>
+    </>
   );
 };
 

src/styles/Typography/index.tsx

@@ -0,0 +1,83 @@
+/**
+ * Componentes de Texto
+ *
+ * Estos componentes ofrecen variaciones para renderizar texto y aplicar transformaciones de texto.
+ *
+ * @param {object} props - Propiedades compartidas por todos los componentes de texto.
+ * @param {string} [props.as] - Se aplica solo en el tipo de encabezado (h1 - h6).
+ * @param {string} [props.className] - Clases CSS adicionales.
+ * @param {React.ReactNode} props.children - Contenido del componente de texto.
+ */
+
+import React from 'react';
+
+interface BaseTextProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+interface HeadingProps extends BaseTextProps {
+  as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+interface TextProps extends BaseTextProps {
+  lead?: boolean;
+}
+
+export const Heading: React.FC<HeadingProps> = ({ as, className, children }) => {
+  return React.createElement(as, { className }, children);
+};
+
+export const Subtitle: React.FC<TextProps> = ({ className, children }) => {
+  const classes = className ? `lead ${className}` : 'lead';
+  return <p className={classes}>{children}</p>;
+};
+
+export const Text: React.FC<TextProps> = ({ className, children }) => {
+  return <p className={className}>{children}</p>;
+};
+
+export const Small: React.FC<TextProps> = ({ className, children }) => {
+  return <small className={className}>{children}</small>;
+};
+
+export const Epigraph: React.FC<TextProps> = ({ className, children }) => {
+  const classes = className ? `text-xs ${className}` : 'text-xs';
+  return <p className={classes}>{children}</p>;
+};
+
+export const Em: React.FC<TextProps> = ({ className, children }) => {
+  return <em className={className}>{children}</em>;
+};
+
+export const Mark: React.FC<TextProps> = ({ className, children }) => {
+  return <mark className={className}>{children}</mark>;
+};
+
+export const Sup: React.FC<TextProps> = ({ className, children }) => {
+  return <sup className={className}>{children}</sup>;
+};
+
+export const Sub: React.FC<TextProps> = ({ className, children }) => {
+  return <sub className={className}>{children}</sub>;
+};
+
+export const Kbd: React.FC<TextProps> = ({ className, children }) => {
+  return <kbd className={className}>{children}</kbd>;
+};
+
+export const Blockquote: React.FC<TextProps> = ({ className, children }) => {
+  return <blockquote className={className}>{children}</blockquote>;
+};
+
+export const UnorderedList: React.FC<TextProps> = ({ className, children }) => {
+  return <ul className={className}>{children}</ul>;
+};
+
+export const OrderedList: React.FC<TextProps> = ({ className, children }) => {
+  return <ol className={className}>{children}</ol>;
+};
+
+export const ListItem: React.FC<TextProps> = ({ className, children }) => {
+  return <li className={className}>{children}</li>;
+};