import { Controls, Canvas, Meta } from '@storybook/blocks';
import * as TipStories from './tip.stories';

<Meta of={TipStories} />

# Tip

## Overview

Emphasize an essential recommendation about a component.
We will often use the tip to show a use case for which the documented component is inappropriate (even though many readers may mistake it).
We will direct the readers to the most appropriate component to use for the case described.

<Canvas of={TipStories.Overview} />

## Props

<Controls />

## Usage

<UsageGuidelines
  guidelines={[
    'There is no unique syntax for creating a Tip component in MDX files. Therefore, use the component as you would in a regular JSX file.',
    'If the tip contains a recommendation to use a different component, please add a link to the other component documentation MDX file.',
    'A tip will always be placed at the end of a section.',
  ]}
/>

## Variants

### Types

<Canvas of={TipStories.Types} />

### Emoji

<Canvas of={TipStories.Emoji} />