Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update stories - batch 1 #663

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
+381 −165
Draft

Update stories - batch 1 #663

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dfeb560
Nest Accordion stories
pouretrebelle Jul 23, 2024
0e021c0
Add Playground story to Accordion
pouretrebelle Jul 23, 2024
01fc345
Add Playground story to ActionMenu
pouretrebelle Jul 23, 2024
01a179c
Update AnchorNav playground story
pouretrebelle Jul 23, 2024
bbbf5b1
Update Avatar stories
pouretrebelle Jul 23, 2024
cc14203
Add Playground story to Box
pouretrebelle Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/docs/content/components/Box/react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Box
status: Experimental
a11yReviewed: false
source: https://github.com/primer/brand/blob/main/packages/react/src/Box/Box.tsx
storybook: '/brand/storybook/?path=/story/components-box--default'
storybook: '/brand/storybook/?path=/story/components-box--playground'
description: Use a box to simplify the process of applying one-off styles to an element
---

Expand Down
68 changes: 68 additions & 0 deletions packages/react/src/Accordion/Accordion.examples.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import {Meta} from '@storybook/react'
import React from 'react'
import {Accordion} from '.'
import {UnorderedList} from '../'

export default {
title: 'Components/Accordion/Examples',
component: Accordion,
} as Meta<typeof Accordion>

export const Composition = () => (
<>
<Accordion>
<Accordion.Heading>What&apos;s included in the GitHub for Startups offer?</Accordion.Heading>
<Accordion.Content>
<p>
All GitHub for Startups companies receive up to 20 seats of GitHub Enterprise for free for year one and 50%
off year two. Learn more about the features and capabilities of GitHub Enterprise{' '}
<a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
here
</a>
.
</p>
</Accordion.Content>
</Accordion>
<Accordion>
<Accordion.Heading>Who is eligible to apply?</Accordion.Heading>
<Accordion.Content>
<p>Startups who meet the following criteria are eligible to apply for the program:</p>
<UnorderedList>
<UnorderedList.Item>Must be associated with a current GitHub for Startups partner.</UnorderedList.Item>
<UnorderedList.Item>Self-funded or funded (Seed-Series A)</UnorderedList.Item>
<UnorderedList.Item>Not a current GitHub Enterprise customer</UnorderedList.Item>
<UnorderedList.Item>Must not have previously received credits for GitHub Enterprise</UnorderedList.Item>
</UnorderedList>
</Accordion.Content>
</Accordion>
<Accordion>
<Accordion.Heading>What if my startup is not eligible? Are there other resources for me?</Accordion.Heading>
<Accordion.Content>
<p>
If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise, please
feel to sign up for a trial{' '}
<a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
here
</a>
.
</p>
</Accordion.Content>
</Accordion>
<Accordion>
<Accordion.Heading>How can my organization become a GitHub for Startups partner?</Accordion.Heading>
<Accordion.Content>
<p>
Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
program.
</p>
<p>
{' '}
<a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
Apply here
</a>
.
</p>
</Accordion.Content>
</Accordion>
</>
)
116 changes: 58 additions & 58 deletions packages/react/src/Accordion/Accordion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {Meta} from '@storybook/react'
import React from 'react'
import {Accordion} from '.'
import {UnorderedList} from '../'

export default {
title: 'Components/Accordion',
Expand All @@ -18,61 +17,62 @@ export const Default = () => (
</Accordion>
)

export const Composition = () => (
<>
<Accordion>
<Accordion.Heading>What&apos;s included in the GitHub for Startups offer?</Accordion.Heading>
<Accordion.Content>
<p>
All GitHub for Startups companies receive up to 20 seats of GitHub Enterprise for free for year one and 50%
off year two. Learn more about the features and capabilities of GitHub Enterprise{' '}
<a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
here
</a>
.
</p>
</Accordion.Content>
</Accordion>
<Accordion>
<Accordion.Heading>Who is eligible to apply?</Accordion.Heading>
<Accordion.Content>
<p>Startups who meet the following criteria are eligible to apply for the program:</p>
<UnorderedList>
<UnorderedList.Item>Must be associated with a current GitHub for Startups partner.</UnorderedList.Item>
<UnorderedList.Item>Self-funded or funded (Seed-Series A)</UnorderedList.Item>
<UnorderedList.Item>Not a current GitHub Enterprise customer</UnorderedList.Item>
<UnorderedList.Item>Must not have previously received credits for GitHub Enterprise</UnorderedList.Item>
</UnorderedList>
</Accordion.Content>
</Accordion>
<Accordion>
<Accordion.Heading>What if my startup is not eligible? Are there other resources for me?</Accordion.Heading>
<Accordion.Content>
<p>
If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise, please
feel to sign up for a trial{' '}
<a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
here
</a>
.
</p>
</Accordion.Content>
</Accordion>
<Accordion>
<Accordion.Heading>How can my organization become a GitHub for Startups partner?</Accordion.Heading>
<Accordion.Content>
<p>
Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
program.
</p>
<p>
{' '}
<a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
Apply here
</a>
.
</p>
</Accordion.Content>
</Accordion>
</>
export const Playground = args => (
<Accordion variant={args.variant}>
<Accordion.Heading reversedToggles={args.reversedToggles}>{args.heading}</Accordion.Heading>
<Accordion.Content>{args.content}</Accordion.Content>
</Accordion>
)
Playground.argTypes = {
variant: {
name: 'variant',
control: {
type: 'radio',
},
options: ['default', 'emphasis'],
},
heading: {
name: 'text',
control: {
type: 'text',
},
table: {
category: 'Accordion.Heading',
},
},
reversedToggles: {
name: 'reversedToggles',
control: {
type: 'boolean',
},
table: {
category: 'Accordion.Heading',
},
},
headingAs: {
name: 'as',
control: {
type: 'inline-radio',
},
options: ['h2', 'h3', 'h4', 'h5', 'h6'],
table: {
category: 'Accordion.Heading',
},
},
content: {
name: 'text',
control: {
type: 'text',
},
table: {
category: 'Accordion.Content',
},
},
}
Playground.args = {
variant: 'default',
heading: 'Heading',
reversedToggles: false,
headingAs: 'h4',
content: 'Content',
}
49 changes: 45 additions & 4 deletions packages/react/src/ActionMenu/ActionMenu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Meta, StoryFn} from '@storybook/react'
import {Meta} from '@storybook/react'
import React from 'react'
import {ActionMenu} from './ActionMenu'

Expand All @@ -7,8 +7,8 @@ export default {
component: ActionMenu,
} as Meta<typeof ActionMenu>

const Template: StoryFn<typeof ActionMenu> = args => (
<ActionMenu {...args} onSelect={newValue => alert(newValue)}>
export const Default = () => (
<ActionMenu onSelect={newValue => alert(newValue)}>
<ActionMenu.Button>Open menu</ActionMenu.Button>
<ActionMenu.Overlay aria-label="Actions">
<ActionMenu.Item value="Copy link pressed" selected>
Expand All @@ -20,4 +20,45 @@ const Template: StoryFn<typeof ActionMenu> = args => (
</ActionMenu>
)

export const Default = Template.bind({})
export const Playground = args => (
<ActionMenu {...args} onSelect={newValue => alert(newValue)}>
<ActionMenu.Button>{args.buttonText}</ActionMenu.Button>
<ActionMenu.Overlay aria-label="Actions">
{args.items.map(item => (
<ActionMenu.Item key={item.value} {...item} />
))}
</ActionMenu.Overlay>
</ActionMenu>
)
Playground.argTypes = {
buttonText: {
name: 'text',
control: {type: 'text'},
table: {
category: 'ActionMenu.Button',
},
},
items: {
name: 'Menu items',
control: {type: 'object'},
table: {
category: 'Story customization',
},
},
}
Playground.args = {
selectionVariant: 'none',
size: 'medium',
disabled: false,
menuAlignment: 'start',
menuSide: 'outside-bottom',
buttonText: 'Open menu',
items: [
{value: 'Copy link pressed', children: 'Copy link', selected: true, disabled: false},
{value: 'Quote reply pressed', children: 'Quote reply', selected: false, disabled: false},
{value: 'Edit comment pressed', children: 'Edit comment', selected: false, disabled: false},
],
}
Playground.parameters = {
controls: {include: ['Menu items', 'text', ...Object.keys(Playground.args)]},
}
Loading
Loading