diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx index 227be633698..5445e99dbe5 100644 --- a/docs/content/ActionList.mdx +++ b/docs/content/ActionList.mdx @@ -3,7 +3,7 @@ componentId: action_list title: ActionList status: Beta source: https://github.com/primer/react/tree/main/src/ActionList -storybook: '/react/storybook?path=/story/composite-components-actionlist' +storybook: '/react/storybook?path=/story/components-actionlist' description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including ActionMenu and SelectPanel. --- diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx index ac7a1630447..937a06a07d2 100644 --- a/docs/content/ActionMenu.mdx +++ b/docs/content/ActionMenu.mdx @@ -4,7 +4,7 @@ title: ActionMenu status: Beta a11yReviewed: true source: https://github.com/primer/react/tree/main/src/ActionMenu.tsx -storybook: '/react/storybook?path=/story/composite-components-actionmenu' +storybook: '/react/storybook?path=/story/components-actionmenu' description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button. --- diff --git a/docs/content/AnchoredOverlay.mdx b/docs/content/AnchoredOverlay.mdx index d6e890619ed..2ebfaad8a0a 100644 --- a/docs/content/AnchoredOverlay.mdx +++ b/docs/content/AnchoredOverlay.mdx @@ -3,7 +3,7 @@ componentId: anchored_overlay title: AnchoredOverlay status: Alpha source: https://github.com/primer/react/blob/main/src/AnchoredOverlay/AnchoredOverlay.tsx -storybook: https://primer.style/react/storybook?path=/story/generic-behaviors-anchoredoverlay--default-portal +storybook: '/react/storybook?path=/story/behaviors-anchoredoverlay--default-portal' --- An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor. diff --git a/docs/content/Autocomplete.mdx b/docs/content/Autocomplete.mdx index 17215ae9953..cc4c7263247 100644 --- a/docs/content/Autocomplete.mdx +++ b/docs/content/Autocomplete.mdx @@ -4,7 +4,7 @@ title: Autocomplete status: Alpha description: Used to render a text input that allows a user to quickly filter through a list of options to pick one or more values. source: https://github.com/primer/react/tree/main/src/Autocomplete -storybook: '/react/storybook?path=/story/forms-form-controls-autocomplete' +storybook: '/react/storybook?path=/story/components-forms-autocomplete' --- import {Autocomplete} from '@primer/react' diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx index cae431cb378..922ccba6aa8 100644 --- a/docs/content/Button.mdx +++ b/docs/content/Button.mdx @@ -3,7 +3,7 @@ componentId: button title: Button status: Alpha source: https://github.com/primer/react/tree/main/src/Button -storybook: '/react/storybook?path=/story/composite-components-button' +storybook: '/react/storybook?path=/story/components-button' description: Use button for the main actions on a page or form. --- diff --git a/docs/content/Checkbox.mdx b/docs/content/Checkbox.mdx index 5d799d5373b..c748b01fdab 100644 --- a/docs/content/Checkbox.mdx +++ b/docs/content/Checkbox.mdx @@ -3,7 +3,7 @@ title: Checkbox description: Use checkboxes to toggle between checked and unchecked states in a list or as a standalone form field status: Alpha source: https://github.com/primer/react/blob/main/src/Checkbox.tsx -storybook: '/react/storybook?path=/story/forms-form-controls-checkbox' +storybook: '/react/storybook?path=/story/components-forms-checkbox' componentId: checkbox --- diff --git a/docs/content/CheckboxGroup.mdx b/docs/content/CheckboxGroup.mdx index a78ea15a1bb..484da1a6d04 100644 --- a/docs/content/CheckboxGroup.mdx +++ b/docs/content/CheckboxGroup.mdx @@ -4,7 +4,7 @@ componentId: checkbox_group description: Renders a set of checkboxes to let users make one or more selections from a short list of options status: Alpha source: https://github.com/primer/react/blob/main/src/CheckboxGroup/CheckboxGroup.tsx -storybook: '/react/storybook/?path=/story/forms-checkboxgroup-examples' +storybook: '/react/storybook/?path=/story/components-forms-checkboxgroup-examples' --- import {CheckboxGroup, Checkbox, Box} from '@primer/components' diff --git a/docs/content/FormControl.mdx b/docs/content/FormControl.mdx index ad6c69da4a2..a810169db59 100644 --- a/docs/content/FormControl.mdx +++ b/docs/content/FormControl.mdx @@ -4,7 +4,7 @@ title: FormControl status: Alpha description: Renders a labelled input and, optionally, associated validation text and/or hint text. source: https://github.com/primer/react/blob/main/src/FormControl/FormControl.tsx -storybook: '/react/storybook?path=/story/forms-form-controls-text-input--default' +storybook: '/react/storybook?path=/story/components-forms-autocomplete' --- import { diff --git a/docs/content/IconButton.mdx b/docs/content/IconButton.mdx index b4dc32f0202..49508bcd1f2 100644 --- a/docs/content/IconButton.mdx +++ b/docs/content/IconButton.mdx @@ -3,7 +3,7 @@ title: IconButton componentId: icon_button status: Alpha source: https://github.com/primer/react/tree/main/src/Button -storybook: '/react/storybook?path=/story/composite-components-button--icon-button' +storybook: '/react/storybook?path=/story/components-button--icon-button' description: An accessible button component with no text and only icon. --- diff --git a/docs/content/Label.mdx b/docs/content/Label.mdx index e02be0f6f27..8cead543c57 100644 --- a/docs/content/Label.mdx +++ b/docs/content/Label.mdx @@ -3,7 +3,7 @@ title: Label componentId: label status: Alpha source: https://github.com/primer/react/tree/main/src/Label -storybook: '/react/storybook?path=/story/labels-label--label' +storybook: '/react/storybook?path=/story/components-label--label' description: Use Label components to add contextual metadata to a design. --- diff --git a/docs/content/NavList.mdx b/docs/content/NavList.mdx index 4cc7d78dc2b..642b680c7f8 100644 --- a/docs/content/NavList.mdx +++ b/docs/content/NavList.mdx @@ -4,7 +4,7 @@ status: Alpha componentId: nav_list description: Use a nav list to render a vertical list of navigation links. source: https://github.com/primer/react/tree/main/src/NavList -storybook: '/react/storybook/?path=/story/composite-components-navlist--simple' +storybook: '/react/storybook/?path=/story/components-navlist--simple' --- ```js @@ -210,10 +210,7 @@ import {NavList} from '@primer/react' function NavItem({href, children}) { const router = useRouter() - const isCurrent = - typeof href === 'string' - ? router.asPath === href - : router.pathname === href.pathname; + const isCurrent = typeof href === 'string' ? router.asPath === href : router.pathname === href.pathname return ( {children} @@ -230,7 +227,7 @@ function App() { Summary diff --git a/docs/content/Overlay.mdx b/docs/content/Overlay.mdx index 90a912e9dd0..a1ad6ca2b36 100644 --- a/docs/content/Overlay.mdx +++ b/docs/content/Overlay.mdx @@ -4,7 +4,7 @@ description: Use Overlay to provide a flexible floating surface for displaying t componentId: overlay status: Alpha source: https://github.com/primer/react/blob/main/src/Overlay.tsx -storybook: '/react/storybook?path=/story/internal-components-overlay--dropdown-overlay' +storybook: '/react/storybook?path=/story/private-components-overlay--dropdown-overlay' --- ```js diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx index a69a135b3b3..1b3f6ba2a72 100644 --- a/docs/content/PageLayout.mdx +++ b/docs/content/PageLayout.mdx @@ -4,7 +4,7 @@ componentId: page_layout status: Alpha # description: TODO source: https://github.com/primer/react/tree/main/src/PageLayout -storybook: https://primer.style/react/storybook?path=/story/layout-pagelayout--default +storybook: '/react/storybook?path=/story/components-pagelayout--default' a11yReviewed: true --- @@ -16,7 +16,7 @@ import {PageLayout} from '@primer/react' -See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayout) for fullscreen examples. +See [storybook](https://primer.style/react/storybook?path=/story/components-pagelayout) for fullscreen examples. diff --git a/docs/content/Radio.mdx b/docs/content/Radio.mdx index 4e93156591e..501e5ca0828 100644 --- a/docs/content/Radio.mdx +++ b/docs/content/Radio.mdx @@ -4,7 +4,7 @@ title: Radio description: Use radios when a user needs to select one option from a list status: Alpha source: https://github.com/primer/react/blob/main/src/Radio.tsx -storybook: '/react/storybook?path=/story/forms-form-controls-radio--default' +storybook: '/react/storybook?path=/story/components-forms-radiogroup' --- ## Examples diff --git a/docs/content/RadioGroup.mdx b/docs/content/RadioGroup.mdx index 99d2ae75b79..08c4439c5f5 100644 --- a/docs/content/RadioGroup.mdx +++ b/docs/content/RadioGroup.mdx @@ -4,7 +4,7 @@ componentId: radio_group description: Renders a set of radio inputs to let users make a single selection from a short list of options status: Alpha source: https://github.com/primer/react/blob/main/src/RadioGroup/RadioGroup.tsx -storybook: '/react/storybook/?path=/story/forms-radiogroup-examples--basic' +storybook: '/react/storybook/?path=/story/components-forms-radiogroup-examples' --- import {RadioGroup, Radio, Box} from '@primer/components' diff --git a/docs/content/SegmentedControl.mdx b/docs/content/SegmentedControl.mdx index c6b51cabb55..df2e635e8bc 100644 --- a/docs/content/SegmentedControl.mdx +++ b/docs/content/SegmentedControl.mdx @@ -3,6 +3,8 @@ componentId: segmented_control title: SegmentedControl description: Use a segmented control to let users select an option from a short list and immediately apply the selection status: Alpha +source: https://github.com/primer/react/tree/main/src/SegmentedControl +storybook: '/react/storybook/?path=/story/components-segmentedcontrol' --- ## Examples diff --git a/docs/content/Select.mdx b/docs/content/Select.mdx index a2ee1e296a2..924677c3cd8 100644 --- a/docs/content/Select.mdx +++ b/docs/content/Select.mdx @@ -5,7 +5,7 @@ description: Use a select input when a user needs to select one option from a lo status: Alpha a11yReviewed: true source: https://github.com/primer/react/blob/main/src/Select.tsx -storybook: '/react/storybook?path=/story/forms-form-controls-select--default' +storybook: '/react/storybook?path=/story/components-forms-select--default' --- import {Select, Text} from '@primer/react' diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx index 3b22b1af8d4..aba9d27c29f 100644 --- a/docs/content/SplitPageLayout.mdx +++ b/docs/content/SplitPageLayout.mdx @@ -4,7 +4,7 @@ componentId: split_page_layout status: Alpha description: Provides structure for a split page layout, including independent scrolling for the pane and content regions. Useful for responsive list/detail patterns, when an item in the pane updates the page content on selection. source: https://github.com/primer/react/tree/main/src/SplitPageLayout -storybook: https://primer.style/react/storybook?path=/story/layout-splitpagelayout--default +storybook: '/react/storybook?path=/story/components-splitpagelayout--default' a11yReviewed: true --- diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index a8b322c3311..5725cebd021 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -3,7 +3,7 @@ componentId: text_input title: TextInput status: Alpha source: https://github.com/primer/react/blob/main/src/TextInput.tsx -storybook: '/react/storybook?path=/story/forms-form-controls-text-input--default' +storybook: '/react/storybook?path=/story/components-forms-textinput--default' --- TextInput is a form component to add default styling to the native text input. diff --git a/docs/content/TextInputWithTokens.mdx b/docs/content/TextInputWithTokens.mdx index 167aed4f83c..c77b8fad2c4 100644 --- a/docs/content/TextInputWithTokens.mdx +++ b/docs/content/TextInputWithTokens.mdx @@ -4,7 +4,7 @@ title: TextInputWithTokens status: Alpha description: Used to show multiple values in one field source: https://github.com/primer/react/tree/main/src/TextInputWithTokens.tsx -storybook: '/react/storybook?path=/story/forms-form-controls-text-input-with-tokens--default' +storybook: '/react/storybook?path=/story/components-forms-textinputwithtokens--default' --- import {TextInputWithTokens} from '@primer/react' diff --git a/docs/content/Textarea.mdx b/docs/content/Textarea.mdx index 89ee395bf4f..4491f504ff9 100644 --- a/docs/content/Textarea.mdx +++ b/docs/content/Textarea.mdx @@ -4,7 +4,7 @@ title: Textarea description: Use Textarea for multi-line text input form fields status: Alpha source: https://github.com/primer/react/blob/main/src/Textarea.tsx -storybook: '/react/storybook?path=/story/forms-form-controls--textarea-story' +storybook: '/react/storybook?path=/story/components-forms-textarea--textarea-story' --- import {Textarea} from '@primer/react' diff --git a/docs/content/ToggleSwitch.mdx b/docs/content/ToggleSwitch.mdx index ae2764af93e..0c3998ecb2d 100644 --- a/docs/content/ToggleSwitch.mdx +++ b/docs/content/ToggleSwitch.mdx @@ -4,7 +4,7 @@ title: ToggleSwitch description: Toggles a setting on or off, and immediately saves the change status: Alpha source: https://github.com/primer/react/blob/main/src/ToggleSwitch.tsx -storybook: '/react/storybook?path=/story/toggleswitch-examples--default' +storybook: '/react/storybook?path=/story/components-toggleswitch-examples--default' --- ## Examples diff --git a/docs/content/Token.mdx b/docs/content/Token.mdx index b79fd627f47..a75d292255f 100644 --- a/docs/content/Token.mdx +++ b/docs/content/Token.mdx @@ -4,7 +4,7 @@ title: Token status: Alpha description: A Token represents a piece of data. They are typically used to show a collection of related attributes. source: https://github.com/primer/react/tree/main/src/Token -storybook: '/react/storybook?path=/story/tokens-default--default-token' +storybook: '/react/storybook?path=/story/components-token--default-token' --- import {AvatarToken, IssueLabelToken, Token} from '@primer/react' diff --git a/docs/content/deprecated/Buttons.mdx b/docs/content/deprecated/Buttons.mdx index f7b11b908d5..b21816fb812 100644 --- a/docs/content/deprecated/Buttons.mdx +++ b/docs/content/deprecated/Buttons.mdx @@ -2,7 +2,7 @@ title: Button (legacy) status: Deprecated source: https://github.com/primer/react/blob/main/src/Button -storybook: '/react/storybook?path=/story/composite-components-button--default-button' +storybook: '/react/storybook?path=/story/components-button--default-button' --- ## Deprecation diff --git a/docs/content/drafts/InlineAutocomplete.mdx b/docs/content/drafts/InlineAutocomplete.mdx index 32fa20c9dcf..00500149fd8 100644 --- a/docs/content/drafts/InlineAutocomplete.mdx +++ b/docs/content/drafts/InlineAutocomplete.mdx @@ -4,7 +4,7 @@ componentId: inline_autocomplete status: Draft description: Provides inline auto completion suggestions for an input or textarea. source: https://github.com/primer/react/tree/main/src/InlineAutocomplete -storybook: '/react/storybook?path=/story/forms-inlineautocomplete--default' +storybook: '/react/storybook?path=/story/components-forms-inlineautocomplete--default' --- ```js diff --git a/docs/content/drafts/MarkdownEditor.mdx b/docs/content/drafts/MarkdownEditor.mdx index 3f45498ce9a..1aae71fb45c 100644 --- a/docs/content/drafts/MarkdownEditor.mdx +++ b/docs/content/drafts/MarkdownEditor.mdx @@ -3,7 +3,7 @@ componentId: markdown_editor title: MarkdownEditor status: Draft description: Full-featured Markdown input. -storybook: '/react/storybook?path=/story/forms-markdowneditor--default' +storybook: '/react/storybook?path=/story/components-forms-markdowneditor--default' --- ```js @@ -27,20 +27,16 @@ import {MarkdownEditor} from '@primer/react/drafts' A `Label` is always required for accessibility: ```javascript live noinline drafts -const renderMarkdown = async (markdown) => { +const renderMarkdown = async markdown => { // In production code, this would make a query to some external API endpoint to render - return "Rendered Markdown." + return 'Rendered Markdown.' } const MinimalExample = () => { const [value, setValue] = React.useState('') return ( - + Minimal Example ) @@ -52,9 +48,9 @@ render(MinimalExample) ### Suggestions, File Uploads, and Saved Replies ```javascript live noinline drafts -const renderMarkdown = async (markdown) => "Rendered Markdown." +const renderMarkdown = async markdown => 'Rendered Markdown.' -const uploadFile = async (file) => ({ +const uploadFile = async file => ({ url: `https://example.com/${encodeURIComponent(file.name)}`, file }) @@ -107,13 +103,10 @@ const MinimalExample = () => { value={value} onChange={setValue} onRenderPreview={renderMarkdown} - onUploadFile={uploadFile} - emojiSuggestions={emojis} referenceSuggestions={references} mentionSuggestions={mentionables} - savedReplies={savedReplies} > Suggestions, File Uploads, and Saved Replies Example @@ -127,17 +120,13 @@ render(MinimalExample) ### Custom Buttons ```javascript live noinline drafts -const renderMarkdown = async (markdown) => "Rendered Markdown." +const renderMarkdown = async markdown => 'Rendered Markdown.' const MinimalExample = () => { const [value, setValue] = React.useState('') return ( - + Custom Buttons @@ -147,12 +136,8 @@ const MinimalExample = () => { - - Cancel - - - Submit - + Cancel + Submit ) diff --git a/docs/content/drafts/UnderlineNav2.mdx b/docs/content/drafts/UnderlineNav2.mdx index 8bfbf710140..087116aa6e3 100644 --- a/docs/content/drafts/UnderlineNav2.mdx +++ b/docs/content/drafts/UnderlineNav2.mdx @@ -4,7 +4,7 @@ componentId: underline_nav_2 status: Draft description: Use an underlined nav to allow tab like navigation with overflow behaviour in your UI. source: https://github.com/primer/react/tree/main/src/UnderlineNav2 -storybook: https://primer.style/react/storybook/?path=/story/layout-underlinenav +storybook: '/react/storybook/?path=/story/components-underlinenav --- ```js diff --git a/src/stories/ActionList/fixtures.stories.tsx b/src/stories/ActionList/fixtures.stories.tsx index 556b796b177..f1cbcf71064 100644 --- a/src/stories/ActionList/fixtures.stories.tsx +++ b/src/stories/ActionList/fixtures.stories.tsx @@ -469,16 +469,13 @@ export function LinkItemStory(): JSX.Element { ActionList.LinkItem with anchor attributes - + as ReactRouterLink - + @@ -486,7 +483,7 @@ export function LinkItemStory(): JSX.Element { NextJS style Link - +