Skip to content

Instantly share code, notes, and snippets.

@nathanyoung

nathanyoung/Heading.stories.mdx

Created July 21, 2020 12:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nathanyoung/1ae3f6ae55b6936d0d44e4fb6f1fffeb to your computer and use it in GitHub Desktop.
Save nathanyoung/1ae3f6ae55b6936d0d44e4fb6f1fffeb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Heading.stories.mdx

import Heading from './Heading'; import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; import { PALMETTO_FONT_SIZE_OPTIONS, PALMETTO_BRAND_COLOR_OPTIONS } from '../../lib/tokens'; import { HEADING_LEVELS } from './Heading.constants';

<Meta title="Components/Heading" component={Heading} argTypes={{ color: { control: { type: 'select', options: PALMETTO_BRAND_COLOR_OPTIONS } }, size: { control: { type: 'select', options: PALMETTO_FONT_SIZE_OPTIONS } }, as: { control: { type: 'select', options: HEADING_LEVELS } }, }} />

export const Template = (args, { argTypes }) => ({ props: Object.keys(argTypes), components: { Heading }, template: '{{children}}', });

Heading

Headings are used as titles for a page or section of a page.

{Template.bind({})}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment