import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { Message } from './message.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="Feedback|Message" component={Message} />

# Message

Renders text and an optional title in a rounded Box. Use this to render helpful messaging that should include information on what is happening and how it affects users.

## Default

<Canvas>
  <Story id="components-feedback-message--default" />
</Canvas>

## Success

<Canvas>
  <Story id="components-feedback-message--success" />
</Canvas>

## Info

<Canvas>
  <Story id="components-feedback-message--info" />
</Canvas>

## Error

<Canvas>
  <Story id="components-feedback-message--error" />
</Canvas>

## Success Title

<Canvas>
  <Story id="components-feedback-message--success-title" />
</Canvas>

## Info Title

<Canvas>
  <Story id="components-feedback-message--info-title" />
</Canvas>

## Error Title

<Canvas>
  <Story id="components-feedback-message--error-title" />
</Canvas>

## Supported Property Mixins:

Margin-only spacing:

<Canvas>
  <Story id="components-feedback-message--mixins-margin-only-spacing" />
</Canvas>

## Props

<FlowPropsTable ofComponent={Message} />

## External Reference

<ExternalReferenceLink
  src="https://www.figma.com/file/FDd6CaSdzwPebuzTexclKm/Patchwork-Web-Component-Library?node-id=746%3A2026"
  type="figma"
/>
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/feedback-ui/message"
  type="github"
/>