Merge branch 'main' into move-remaining-react-components-over

primer · Jun 27, 2023 · fdbfd10 · fdbfd10
2 parents f6645e2 + ad42688
commit fdbfd10
Show file tree

Hide file tree

Showing 69 changed files with 258 additions and 87 deletions.
diff --git a/content/components/action-list.mdx b/content/components/action-list.mdx
@@ -1,7 +1,8 @@
 ---
 title: Action list
 reactId: action_list
-railsId: Primer::Alpha::ActionList
+railsIds:
+- Primer::Alpha::ActionList
 figmaId: action_list
 description:
   Action list is a vertical list of interactive actions or options. It's composed of items presented in a consistent.

diff --git a/content/components/action-menu.mdx b/content/components/action-menu.mdx
@@ -1,7 +1,8 @@
 ---
 title: Action menu
 reactId: action_menu
-railsId: Primer::Alpha::ActionMenu
+railsIds:
+- Primer::Alpha::ActionMenu
 description: Action menu is composed of action list and overlay patterns used for quick actions and selections.
 ---
 

diff --git a/content/components/autocomplete.mdx b/content/components/autocomplete.mdx
@@ -2,7 +2,9 @@
 title: Autocomplete
 description: Autocomplete allows users to quickly filter through a list of options and pick one or more values for a field.
 reactId: autocomplete
-railsId: Primer::Beta::AutoComplete
+railsIds:
+- Primer::Beta::AutoComplete
+- Primer::Alpha::AutoComplete
 figmaId: autocomplete
 rails: https://primer.style/view-components/components/beta/autocomplete
 ---

diff --git a/content/components/avatar-stack.mdx b/content/components/avatar-stack.mdx
@@ -2,7 +2,8 @@
 title: Avatar stack
 description: Avatar stack displays two or more avatars in an inline stack.
 reactId: avatar_stack
-railsId: Primer::Beta::AvatarStack
+railsIds:
+- Primer::Beta::AvatarStack
 figmaId: avatar_stack
 ---
 

diff --git a/content/components/avatar.mdx b/content/components/avatar.mdx
@@ -2,7 +2,8 @@
 title: Avatar
 description: Avatar is an image that represents a user or organization.
 reactId: avatar
-railsId: Primer::Beta::Avatar
+railsIds:
+- Primer::Beta::Avatar
 figmaId: avatar
 ---
 

diff --git a/content/components/banner.mdx b/content/components/banner.mdx
@@ -2,7 +2,7 @@
 title: Banner
 description: Use Banner to highlight important information.
 componentId: banner
-railsId: Primer::Alpha::Banner
+Primer::Alpha::Banner
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/blankslate.mdx b/content/components/blankslate.mdx
@@ -2,7 +2,9 @@
 title: Blankslate
 description: Use Blankslate as placeholder to tell users why content is missing.
 componentId: blankslate
-railsId: Primer::Beta::Blankslate
+railsIds:
+Primer::Beta::Blankslate
+Primer::BlankslateComponent
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/border-box.mdx b/content/components/border-box.mdx
@@ -1,7 +1,8 @@
 ---
 title: BorderBox
 description: BorderBox is a Box component with a border.
-railsId: Primer::Beta::BorderBox
+railsIds:
+- Primer::Beta::BorderBox
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/box.mdx b/content/components/box.mdx
@@ -2,7 +2,8 @@
 title: Box
 description: Box is a basic wrapper component for most layout related needs.
 reactId: box
-railsId: Primer::Box
+railsIds:
+- Primer::Box
 rails: https://primer.style/view-components/components/box
 ---
 

diff --git a/content/components/breadcrumbs.mdx b/content/components/breadcrumbs.mdx
@@ -2,7 +2,8 @@
 title: Breadcrumbs
 description: Breadcrumbs display the current page or context within the site, allowing them to navigate different levels of the hierarchy.
 reactId: breadcrumbs
-railsId: Primer::Beta::Breadcrumbs
+railsIds:
+- Primer::Beta::Breadcrumbs
 figmaId: breadcrumbs
 rails: https://primer.style/view-components/components/beta/breadcrumbs
 ---

diff --git a/content/components/button-group.mdx b/content/components/button-group.mdx
@@ -2,7 +2,8 @@
 title: Button group
 description: Button group renders a series of buttons.
 reactId: button_group
-railsId: Primer::Beta::ButtonGroup
+railsIds:
+- Primer::Beta::ButtonGroup
 figmaId: button_group
 rails: https://primer.style/view-components/components/beta/buttongroup
 ---

diff --git a/content/components/button-marketing.mdx b/content/components/button-marketing.mdx
@@ -1,7 +1,8 @@
 ---
 title: ButtonMarketing
 description: Use ButtonMarketing for actions (e.g. in forms).
-railsId: Primer::Alpha::ButtonMarketing
+railsIds:
+- Primer::Alpha::ButtonMarketing
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/button.mdx b/content/components/button.mdx
@@ -2,7 +2,9 @@
 title: Button
 description: Button is used to initiate actions on a page or form.
 reactId: button
-railsId: Primer::Beta::Button
+railsIds:
+- Primer::Beta::Button
+- Primer::ButtonComponent
 figmaId: button
 rails: https://primer.style/view-components/components/beta/button
 ---

diff --git a/content/components/checkbox-group.mdx b/content/components/checkbox-group.mdx
@@ -2,7 +2,8 @@
 title: Checkbox group
 description: Checkbox group renders a set of checkboxes.
 reactId: checkbox_group
-railsId: Primer::Alpha::CheckBoxGroup
+railsIds:
+- Primer::Alpha::CheckBoxGroup
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/checkbox.mdx b/content/components/checkbox.mdx
@@ -2,7 +2,8 @@
 title: Checkbox
 description: Checkbox is a form control for single and multiple selections.
 reactId: checkbox
-railsId: Primer::Alpha::CheckBox
+railsIds:
+- Primer::Alpha::CheckBox
 figmaId: checkbox
 ---
 

diff --git a/content/components/clipboard-copy.mdx b/content/components/clipboard-copy.mdx
@@ -1,7 +1,8 @@
 ---
 title: Clipboard copy
 description: Copies element text content or input values to the clipboard.
-railsId: Primer::Beta::ClipboardCopy
+railsIds:
+- Primer::Beta::ClipboardCopy
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/close-button.mdx b/content/components/close-button.mdx
@@ -1,7 +1,8 @@
 ---
 title: CloseButton
 description: Use CloseButton to render an `×` without default button styles.
-railsId: Primer::Beta::CloseButton
+railsIds:
+- Primer::Beta::CloseButton
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/counter-label.mdx b/content/components/counter-label.mdx
@@ -2,7 +2,8 @@
 title: Counter label
 description: Counter label is a button with a numbered label accompanied by text.
 reactId: counter_label
-railsId: Primer::Beta::Counter
+railsIds:
+- Primer::Beta::Counter
 figmaId: counter_label
 rails: https://primer.style/view-components/components/beta/counter
 ---

diff --git a/content/components/details.mdx b/content/components/details.mdx
@@ -2,7 +2,8 @@
 title: Details
 description: Details is a styled component to enhance the native behaviors of the <details> element.
 reactId: details
-railsId: Primer::Beta::Details
+railsIds:
+- Primer::Beta::Details
 rails: https://primer.style/view-components/components/beta/details
 ---
 

diff --git a/content/components/dialog.mdx b/content/components/dialog.mdx
@@ -4,7 +4,8 @@ description:
   Dialog is a floating surface used to display transient content such as confirmation actions, selection options, and
   more.
 reactId: dialog
-railsId: Primer::Alpha::Dialog
+railsIds:
+- Primer::Alpha::Dialog
 figmaId: dialog
 rails: https://primer.style/view-components/components/alpha/dialog
 ---

diff --git a/content/components/dropdown.mdx b/content/components/dropdown.mdx
@@ -0,0 +1,15 @@
+---
+title: Dropdown
+description: Use dropdown for a lightweight context menu for housing navigation and actions.
+railsIds:
+- Primer::Alpha::Dropdown
+---
+
+import ComponentLayout from '~/src/layouts/component-layout'
+import {Text} from '@primer/react'
+export default ComponentLayout
+
+<Note variant="warning">
+  <Text sx={{display: 'block', fontWeight: 'bold', mb: 2}}>Work in progress</Text>
+  We are currently working on general guidance for this component.
+</Note>
diff --git a/content/components/flash.mdx b/content/components/flash.mdx
@@ -2,7 +2,8 @@
 title: Flash
 description: Flash alert informs users of successful or pending actions.
 reactId: flash
-railsId: Primer::Beta::Flash
+railsIds:
+- Primer::Beta::Flash
 figmaId: banner
 rails: https://primer.style/view-components/components/beta/flash
 ---

diff --git a/content/components/heading.mdx b/content/components/heading.mdx
@@ -2,7 +2,8 @@
 title: Heading
 description: Heading defines the hierarchical structure and importance of the content they contain.
 reactId: heading
-railsId: Primer::Beta::Heading
+railsIds:
+- Primer::Beta::Heading
 figmaId: heading
 rails: https://primer.style/view-components/components/beta/heading
 ---

diff --git a/content/components/hidden-text-expander.mdx b/content/components/hidden-text-expander.mdx
@@ -1,7 +1,8 @@
 ---
 title: HiddenTextExpander
 description: Use HiddenTextExpander to indicate and toggle hidden text.
-railsId: Primer::Alpha::HiddenTextExpander
+railsIds:
+- Primer::Alpha::HiddenTextExpander
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/icon-button.mdx b/content/components/icon-button.mdx
@@ -2,7 +2,9 @@
 title: Icon button
 description: Icon button is used for buttons that show an icon in place of a text label.
 reactId: icon_button
-railsId: Primer::Beta::IconButton
+railsIds:
+- Primer::Beta::IconButton
+- Primer::IconButton
 figma: https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=14919%3A49961&t=aWZ6bMYEtFusbdzZ-1
 ---
 

diff --git a/content/components/icon.mdx b/content/components/icon.mdx
@@ -1,6 +1,7 @@
 ---
 title: Icon
-railsId: Primer::Beta::Octicon
+railsIds:
+- Primer::Beta::Octicon
 figmaId: icon
 description: Icons at GitHub are called Octicons, which are available in various implementations including React, Figma, Rails, and Styled System.
 ---

diff --git a/content/components/image-crop.mdx b/content/components/image-crop.mdx
@@ -1,7 +1,8 @@
 ---
 title: Image crop
 description: Use image crop as a client-side mechanism to crop images.
-railsId: Primer::Alpha::ImageCrop
+railsIds:
+- Primer::Alpha::ImageCrop
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/image.mdx b/content/components/image.mdx
@@ -1,7 +1,8 @@
 ---
 title: Image
 description: Use image to render images.
-railsId: Primer::Alpha::Image
+railsIds:
+- Primer::Alpha::Image
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/label.mdx b/content/components/label.mdx
@@ -1,7 +1,8 @@
 ---
 title: Label
 description: Use the label component to add contextual metadata to a design.
-railsId: Primer::Beta::Label
+railsIds:
+- Primer::Beta::Label
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/layout.mdx b/content/components/layout.mdx
@@ -1,7 +1,9 @@
 ---
 title: Layout
 description: Layout provides foundational patterns for responsive pages.
-railsId: Primer::Alpha::Layout
+railsIds:
+- Primer::Alpha::Layout
+- Primer::LayoutComponent
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/link.mdx b/content/components/link.mdx
@@ -2,7 +2,8 @@
 title: Link
 description: Links are used to apply styles to hyperlink text.
 reactId: link
-railsId: Primer::Beta::Link
+railsIds:
+- Primer::Beta::Link
 figmaId: link
 ---
 

diff --git a/content/components/markdown.mdx b/content/components/markdown.mdx
@@ -1,7 +1,8 @@
 ---
 title: Markdown
 description: Use markdown to wrap markdown content.
-railsId: Primer::Beta::Markdown
+railsIds:
+- Primer::Beta::Markdown
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/menu.mdx b/content/components/menu.mdx
@@ -1,7 +1,8 @@
 ---
 title: Menu
 description: Use Menu to create vertical lists of navigational links.
-railsId: Primer::Alpha::Menu
+railsIds:
+- Primer::Alpha::Menu
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/nav-list.mdx b/content/components/nav-list.mdx
@@ -2,7 +2,8 @@
 title: Nav list
 description: Nav list renders a vertical list of navigation links.
 reactId: nav_list
-railsId: Primer::Alpha::NavList
+railsIds:
+- Primer::Alpha::NavList
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/octicon-symbols.mdx b/content/components/octicon-symbols.mdx
@@ -1,7 +1,8 @@
 ---
 title: OcticonSymbols
 description: OcticonSymbols renders a symbol dictionary using a list of Octicons.
-railsId: Primer::Alpha::OcticonSymbols
+railsIds:
+- Primer::Alpha::OcticonSymbols
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/overlay.mdx b/content/components/overlay.mdx
@@ -1,8 +1,9 @@
 ---
 title: Overlay
 description: Overlay components codify design patterns related to floating surfaces such as dialogs and menus.
-railsId: Primer::Alpha::Overlay
 reactId: overlay
+railsIds:
+Primer::Alpha::Overlay
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/popover.mdx b/content/components/popover.mdx
@@ -2,7 +2,8 @@
 title: Popover
 description: Popover is used to bring attention to specific user interface elements.
 reactId: popover
-railsId: Primer::Beta::Popover
+railsIds:
+- Primer::Beta::Popover
 figmaId: popover
 rails: https://primer.style/view-components/components/beta/popover
 ---

diff --git a/content/components/progress-bar.mdx b/content/components/progress-bar.mdx
@@ -2,7 +2,8 @@
 title: Progress bar
 description: Progress bar visualizes one or more parts of a whole.
 reactId: progress_bar
-railsId: Primer::Beta::ProgressBar
+railsIds:
+- Primer::Beta::ProgressBar
 figmaId: progress_bar
 ---
 

diff --git a/content/components/radio-group.mdx b/content/components/radio-group.mdx
@@ -2,7 +2,8 @@
 title: Radio group
 description: Radio group is used to render a short list of mutually exclusive options.
 reactId: radio_group
-railsId: Primer::Alpha::RadioButtonGroup
+railsIds:
+- Primer::Alpha::RadioButtonGroup
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'