primer · broccolinisoup · Nov 3, 2022 · Nov 1, 2022 · Nov 2, 2022 · Nov 2, 2022
@@ -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.
 ---
 

@@ -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.
 ---
 

@@ -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.

@@ -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'

@@ -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.
 ---
 

@@ -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
 ---
 

@@ -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'

@@ -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 {

@@ -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.
 ---
 

@@ -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.
 ---
 

@@ -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 (
     <Link href={href} passHref>
       <NavList.Item aria-current={isCurrent ? 'page' : false}>{children}</NavList.Item>
@@ -230,7 +227,7 @@ function App() {
       <NavItem
         href={{
           pathname: '/[owner]/[repo]',
-          query: { owner, repo },
+          query: {owner, repo}
         }}
       >
         Summary

@@ -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

@@ -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'
 
 <Note>
 
-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.
 
 </Note>
 

@@ -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

@@ -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'

@@ -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

@@ -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'

@@ -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
 ---
 

@@ -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.

@@ -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'

@@ -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'

@@ -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

@@ -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'

@@ -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

@@ -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

@@ -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 (
-    <MarkdownEditor
-      value={value}
-      onChange={setValue}
-      onRenderPreview={renderMarkdown}
-    >
+    <MarkdownEditor value={value} onChange={setValue} onRenderPreview={renderMarkdown}>
       <MarkdownEditor.Label>Minimal Example</MarkdownEditor.Label>
     </MarkdownEditor>
   )
@@ -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}
     >
       <MarkdownEditor.Label>Suggestions, File Uploads, and Saved Replies Example</MarkdownEditor.Label>
@@ -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 (
-    <MarkdownEditor
-      value={value}
-      onChange={setValue}
-      onRenderPreview={renderMarkdown}
-    >
+    <MarkdownEditor value={value} onChange={setValue} onRenderPreview={renderMarkdown}>
       <MarkdownEditor.Label visuallyHidden>Custom Buttons</MarkdownEditor.Label>
 
       <MarkdownEditor.Toolbar>
@@ -147,12 +136,8 @@ const MinimalExample = () => {
       </MarkdownEditor.Toolbar>
 
       <MarkdownEditor.Actions>
-        <MarkdownEditor.ActionButton variant="danger">
-          Cancel
-        </MarkdownEditor.ActionButton>
-        <MarkdownEditor.ActionButton variant="primary">
-          Submit
-        </MarkdownEditor.ActionButton>
+        <MarkdownEditor.ActionButton variant="danger">Cancel</MarkdownEditor.ActionButton>
+        <MarkdownEditor.ActionButton variant="primary">Submit</MarkdownEditor.ActionButton>
       </MarkdownEditor.Actions>
     </MarkdownEditor>
   )

@@ -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

@@ -469,24 +469,21 @@ export function LinkItemStory(): JSX.Element {
             </ActionList.LeadingVisual>
             ActionList.LinkItem with anchor attributes
           </ActionList.LinkItem>
-          <ActionList.LinkItem
-            as={ReactRouterLikeLink}
-            to="?path=/story/composite-components-actionlist--simple-list-story"
-          >
+          <ActionList.LinkItem as={ReactRouterLikeLink} to="?path=/story/components-actionlist--simple-list-story">
             <ActionList.LeadingVisual>
               <LinkIcon />
             </ActionList.LeadingVisual>
             as ReactRouterLink
           </ActionList.LinkItem>
-          <NextJSLikeLink href="?path=/story/composite-components-actionlist--simple-list-story">
+          <NextJSLikeLink href="?path=/story/components-actionlist--simple-list-story">
             <ActionList.LinkItem>
               <ActionList.LeadingVisual>
                 <LinkIcon />
               </ActionList.LeadingVisual>
               NextJS style Link
             </ActionList.LinkItem>
           </NextJSLikeLink>
-          <ActionList.LinkItem href="?path=/story/composite-components-actionlist--simple-list-story">
+          <ActionList.LinkItem href="?path=/story/components-actionlist--simple-list-story">
             <ActionList.LeadingVisual>
               <LinkIcon />
             </ActionList.LeadingVisual>