monday-ui-react-core/src/components/Heading/__stories__/Heading.mdx

Official monday.com UI resources for application development in React.js

import { Canvas, Meta } from "@storybook/blocks";
import Heading from "../Heading";
import {
  EDITABLE_HEADING,
  HIDDEN_TEXT,
  TEXT
} from "../../../storybook/components/related-components/component-description-map";
import * as HeadingStories from "./Heading.stories";
import { TipEditableHeading } from "./Heading.stories.helpers";

<Meta of={HeadingStories} />

# Heading

- [Overview](#overview)
- [Import](#import)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Heading components are used for titles at the top of pages and sub-sections.

<Canvas of={HeadingStories.Overview} />

## Import

The Heading component has been introduced in version 2.0 of Vibe.
However, the import statement `{Heading}` from 'monday-ui-react-core' is already reserved for the <StorybookLink page="Text/LegacyHeading [deprecated]">LegacyHeading</StorybookLink> component.
Therefore, the new Heading with the updated API can be accessed using the following import statement:

```javascript
import { Heading } from "monday-ui-react-core/next";
```

In the upcoming major release of Vibe packages (3.0), we will remove LegacyHeading from the main entry, and then you will be able to import this Heading component
just like any other component.

## Props

<PropsTable />

## Usage

<UsageGuidelines guidelines={["Don't include more than one H1 title per web page."]} />

<TipEditableHeading />

## Variants

### Types and weights

Heading component comes in three types: H1 (32px), H2 (24px), H3 (18px) and four weights: bold (700), medium (600), normal (500), light (300)

<Canvas of={HeadingStories.TypesAndWeights} />

### Colors

Heading component comes in four colors: primary, secondary, on primary, on inverted

<Canvas of={HeadingStories.Colors} />

### Overflow

Our Heading component supports overflow state.
When the text is longer than its container and the ellipsis flag is on, the end of the text will be truncated and will display "..."

We support two kinds of ellipsis: single-line ellipsis with a tooltip displayed in hover or ellipsis after multiple lines. You can see examples for both use cases below.

<Canvas of={HeadingStories.Overflow} />

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: <Heading>Hello world</Heading>,
        description: "Always capitalize the first letter of the first word in the heading."
      },
      negative: {
        component: <Heading>Hello World</Heading>,
        description: "Please avoid capitalizing the first letter of each word in the heading."
      }
    }
  ]}
/>

## Use cases and examples

### Built-in page header (not editable)

<Canvas of={HeadingStories.BuiltInPageHeaderNotEditable} />

## Related components

<RelatedComponents componentsNames={[EDITABLE_HEADING, TEXT, HIDDEN_TEXT]} />