glide-design-system/src/stories/text/Text.stories.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import { Text } from "../../lib/components/text/Text";

export default {
  title: "Components/Text",
  component: Text,
  parameters: {
    layout: "centered",
    controls: { expanded: true },
    docs: {
      description: {
        component:
          "The Text component is used to display text content with various styles and formatting options. It supports customization for font size, color, alignment, and other text properties, making it versatile for use in different parts of an application.",
      },
    },
  },
  tags: ["autodocs"],
  argTypes: {
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the text component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the text component for custom styling.",
    },
    type: {
      control: "radio",
      description: "You can add the text type susch as h1,h2,h3",
      options: ["h1", "h2", "h3"],
    },
    id: {
      control: "",
      description: "The unique identifier for the text element.",
    },
    name: {
      control: "",
      description: "The name attribute for the text element.",
    },
    children: {
      control: "text",
      description:
        "The content to be displayed inside the component, such as text, elements, or components.",
    },
  },
};
export const Texts = {
  render: () => (
    <div>
      <Text>Iam Default text</Text>
      <hr />
      <Text type="h2">Iam h2 text</Text>
      <hr />
      <Text type="h1">Iam h1 text</Text>
    </div>
  ),
};
const Template = (args) => <Text {...args} />;

export const Default = Template.bind({});
Default.args = {
  children: (
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </p>
  ),
};
Default.parameters = {
  docs: {
    description: {
      story:
        "This is the default configuration of the Text component, displaying a simple section with text content.",
    },
  },
};

export const Type = Template.bind({});
Type.args = {
  type: "h2",
  children: (
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </p>
  ),
};
Type.parameters = {
  docs: {
    description: {
      story: "This example shows how to use Text with custom type.",
    },
  },
};

export const Style = Template.bind({});
Style.args = {
  type: "h6",
  style: { color: "grey" },
  children: (
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </p>
  ),
};
Style.parameters = {
  docs: {
    description: {
      story: "This example shows how to use Text with custom style.",
    },
  },
};