The Typography component in goobs-frontend is a versatile text component for rendering customizable typography with support for different font families, variants, and colors. It provides a consistent and flexible way to display text content throughout your application.

To use the Typography component in your project, import it from the goobs-frontend package:

import { Typography } from 'goobs-frontend';

Here's a basic example of how to use the Typography component:

import React from 'react';
import { Typography } from 'goobs-frontend';

const TypographyExample: React.FC = () => {
  return (
    <div>
      <Typography text="Hello, World!" fontvariant="merrih1" fontcolor="black" />
      <Typography text="This is a paragraph." fontvariant="merriparagraph" fontcolor="gray" />
    </div>
  );
};

export default TypographyExample;

The Typography component accepts the following props:

• text: string (optional) - The text content to be rendered.
• fontvariant: CustomTypographyVariant (optional) - The variant of the typography, which determines the font family, size, and weight.
• fontcolor: string (optional) - The color of the text.
• variant: CustomTypographyVariant | MuiTypographyProps['variant'] (optional) - The variant of the typography, which can be either a custom variant or a Material-UI variant.

Additionally, it supports all the props from the Material-UI Typography component.

1. Font Families: Choose from three font families: Arapey, Inter, and Merriweather.
2. Typography Variants: Use predefined typography variants for consistent styling across your application.
3. Color Customization: Customize the color of the text using the fontcolor prop.
4. Responsive Typography: The typography adjusts its size and style based on the screen size and device.
5. Semantic Elements: Use semantic HTML elements (<h1>, <p>, etc.) for improved accessibility and SEO.

The Typography component supports three font families:

1. Arapey: A serif font family with a classic and elegant look.
2. Inter: A sans-serif font family with a modern and clean design.
3. Merriweather: A serif font family with a traditional and readable style.

To use a specific font family, prefix the fontvariant prop with the desired font family name (e.g., arapeyh1, interh2, merrih3).

The Typography component provides a set of predefined typography variants for each font family. These variants define the font size, weight, and other styles for consistent typography throughout your application. The available variants are:

• h1: Large heading
• h2: Medium heading
• h3: Small heading
• h4: Extra small heading
• h5: Subtitle
• h6: Subtitle 2
• paragraph: Regular paragraph text
• helperheader: Helper text in headers
• helperfooter: Helper text in footers

To use a specific variant, set the fontvariant prop to the desired variant name (e.g., merrih1, interh2, arapeyh3).

You can customize the typography styles beyond the predefined variants using the sx prop or styled-components:

import React from 'react';
import { Typography } from 'goobs-frontend';
import { styled } from '@mui/system';

const CustomTypography = styled(Typography)(({ theme }) => ({
  fontFamily: 'Roboto',
  fontSize: '24px',
  fontWeight: 'bold',
  color: theme.palette.primary.main,
}));

const CustomTypographyExample: React.FC = () => {
  return (
    <div>
      <CustomTypography text="Custom Typography" />
    </div>
  );
};

export default CustomTypographyExample;

You can use the Typography component in combination with other components to create more complex layouts and designs:

import React from 'react';
import { Typography, Card } from 'goobs-frontend';

const CardExample: React.FC = () => {
  return (
    <Card>
      <Typography text="Card Title" fontvariant="merrih4" fontcolor="black" />
      <Typography text="Card Content" fontvariant="merriparagraph" fontcolor="gray" />
    </Card>
  );
};

export default CardExample;

1. Consistent Usage: Use the Typography component consistently throughout your application for a cohesive design.
2. Semantic Markup: Choose the appropriate typography variant that matches the semantic meaning of the text.
3. Readability: Ensure sufficient contrast between the text color and background color for better readability.
4. Responsive Design: Consider how the typography will appear on different screen sizes and devices.
5. Accessibility: Use heading levels (h1, h2, etc.) appropriately to create a logical document structure.

The Typography component is lightweight and optimized for performance. However, keep in mind the following:

1. Font Loading: Ensure that the required font files are loaded efficiently to avoid any performance issues.
2. Render Optimization: If you have a large number of Typography components, consider using techniques like virtualization or lazy loading to optimize rendering performance.

1. Font Not Loading: Make sure that the font files are correctly loaded and accessible. Check the network tab in the browser's developer tools to ensure the font files are being fetched successfully.
2. Incorrect Styling: Verify that you are using the correct fontvariant and fontcolor props. If custom styles are not applying, check the specificity of your CSS rules.
3. Accessibility Issues: Ensure that you are using the appropriate heading levels and providing alternative text for any visual elements within the Typography component.

import React from 'react';
import { Typography } from 'goobs-frontend';

const HeroSection: React.FC = () => {
  return (
    <div>
      <Typography text="Welcome to Our Website" fontvariant="arapeyh1" fontcolor="white" />
      <Typography text="Discover amazing products and services" fontvariant="interh3" fontcolor="white" />
      <Typography text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." fontvariant="merriparagraph" fontcolor="white" />
    </div>
  );
};

export default HeroSection;

import React from 'react';
import { Typography, Card } from 'goobs-frontend';

const ProductCard: React.FC = () => {
  return (
    <Card>
      <Typography text="Product Name" fontvariant="merrih5" fontcolor="black" />
      <Typography text="$99.99" fontvariant="interh4" fontcolor="primary" />
      <Typography text="Product description goes here" fontvariant="merriparagraph" fontcolor="gray" />
    </Card>
  );
};

export default ProductCard;

• Grid: Use the Grid component to create layouts and structure for your typography.
• Card: Combine the Typography component with the Card component to create informative and visually appealing content blocks.

Some potential future enhancements for the Typography component could include:

1. More Font Families: Add support for additional font families to provide more design options.
2. Custom Font Support: Allow users to provide their own custom fonts for use with the Typography component.
3. Responsive Typography: Enhance the responsive behavior of the typography to adapt to different screen sizes more effectively.
4. Typography Themes: Introduce typography themes that define a set of pre-configured typography styles for consistent branding.
5. Animated Typography: Explore the possibility of adding animation effects to the typography, such as fade-in, slide-in, or typewriter effects.
6. Markdown Support: Integrate markdown parsing capabilities to allow rendering of formatted text content.
7. Localization: Provide support for localized typography styles and font handling for different languages and regions.
8. Accessibility Enhancements: Continuously improve the accessibility features of the Typography component, such as better ARIA attributes and roles.

These enhancements would further expand the capabilities and flexibility of the Typography component in future versions of goobs-frontend.