Ooops!
- It looks like this page doesn't exist.
+ It looks like this page doesn't exist.
We track these errors automatically, but if the problem persists please feel free to
contact us.
diff --git a/pages/storybook.tsx b/pages/storybook.tsx
index f5c4f4a5b8..e3cb665f6f 100644
--- a/pages/storybook.tsx
+++ b/pages/storybook.tsx
@@ -2,6 +2,7 @@ import React from 'react'
import ReactDomServer from 'react-dom/server'
import { BumpLink, BumpLinkPropsT } from 'components/ui/BumpLink/BumpLink'
import { Callout, CalloutPropsT } from 'components/ui/Callout/Callout'
+import { Lead, LeadPropsT } from 'components/ui/Lead/Lead'
import {
MarkdownContent,
MarkdownContentPropsT,
@@ -78,9 +79,10 @@ const markdownExample = (
>
)
+// Trying to keep these alphabetical order
const stories = [
{
- name: 'BumpLink',
+ name: 'BumpLink', // {component.name} gets optimized away
component: BumpLink,
variants: [
{ title: 'Think basic', href: 'http://example.com' } as BumpLinkPropsT,
@@ -98,7 +100,7 @@ const stories = [
],
},
{
- name: 'Callout', // {component.name} gets optimized away
+ name: 'Callout',
component: Callout,
variants: [
{ variant: 'success', children: 'Yay you did it!', className: '' } as CalloutPropsT,
@@ -107,6 +109,21 @@ const stories = [
{ variant: 'success', children: 'I am a little font', className: 'f6' } as CalloutPropsT,
],
},
+ {
+ name: 'Lead',
+ component: Lead,
+ variants: [
+ { children: 'Lead by example' } as LeadPropsT,
+ { children: 'Lead by blue', className: 'color-bg-info' } as LeadPropsT,
+ {
+ children: (
+ <>
+ You can personalize Codespaces by using a dotfiles repository on GitHub.
+ >
+ ),
+ } as LeadPropsT,
+ ],
+ },
{
name: 'MarkdownContent',
component: MarkdownContent,
@@ -128,9 +145,7 @@ export default function Storybook() {
return (
GitHub Docs Storybook
-
- This page lists React components unique to the GitHub docs.
-
+
This page lists React components unique to the GitHub docs.