Consolidate Heading Components into a Single Typography Component

[AlSirang]

Consolidate Heading Components into a Single Text Component

This pull request consolidates individual heading components (H1, H2, H3, H4, H5, and H6) into a single, flexible Text component. This approach streamlines the implementation of headings while maintaining semantic HTML and accessibility.

Features:

• Single Text Component: A unified component that allows users to specify the desired heading level (from h1 to h6 and p) using props, while applying the appropriate styles for each level.
• Variant Support: Utilizes class-variance-authority to handle styling variants, ensuring consistent typography across different heading levels.
• Flexible Props: Supports className, component, and additional HTML attributes, allowing for extensive customization and integration.
• Improved Documentation: Updated documentation includes usage examples and guidelines for the new consolidated component, making it easier for developers to adopt.

Usage Example:

import { Text } from "./Text";

const ExampleComponent = () => {
  return (
    <div>
      <Text as="h1">This is an H1 Heading</Text>
      <Text as="h2">This is an H2 Heading</Text>
      <Text as="h3">This is an H3 Heading</Text>
      <Text as="h4">This is an H4 Heading</Text>
      <Text as="h5">This is an H5 Heading</Text>
      <Text as="h6">This is an H6 Heading</Text>
      <Text>This is a paragraph Element</Text>
    </div>
  );
};

[ariflogs]

Good idea. thanks for the great work.
But don't you think naming the component something like Heading would be better?

[AlSirang]

Yes, we could have used a component name like Heading, but in the future, we can add a paragraph to the Typography component to cover all text tags.

[ariflogs]

like every typography types(heading, p, quotes, code...) all in the same component?
that might start to get a little confusing for the users.

[ariflogs]

btw are you in our Discord server?

[AlSirang]

like every typography types(heading, p, quotes, code...) all in the same component?
that might start to get a little confusing for the users.

No, just h1 to h6 and p tag. Not all of them. Just like the MUI Typography component.

[AlSirang]

btw are you in our Discord server?
No, not yet.

[ariflogs]

makes sense. I started a poll on the community server. let's see if others have any opinion on this.

[ariflogs]

Looks like we don't need both variant and tag, let's combine both and make it as

[AlSirang]

The reason for both the tag and variants is to allow users to apply sizes and styles from other elements to the specified tag. If we remove the variants, we will lose that feature.

[ariflogs]

you mean to let users do something like this <Text variant="h2" tag="p" />?

[ariflogs]

variants: {
  as: {
    p: ""
    }
....

[AlSirang]

You mean I should update the variant prop to as?

[ariflogs]

yes

[ariflogs]

Thanks for the great work 🚀

[ariflogs]

as = "p" as T

[ariflogs]

you mean to let users do something like this <Text variant="h2" tag="p" />?

[ariflogs]

yes