Add docs

packages/react/src/drafts/ActionBar/ActionBar.docs.json

@@ -0,0 +1,62 @@
+{
+  "id": "actionbar",
+  "name": "ActionBar",
+  "status": "draft",
+  "a11yReviewed": false,
+  "stories": [
+    {"id": "components-actionbar--default"},
+    {"id": "components-actionbar--small-action-bar"},
+    {"id": "components-actionbar--comment-box"}
+  ],
+  "props": [
+    {
+      "name": "size",
+      "type": "'small' | 'medium' | 'large'",
+      "required": false,
+      "description": "Size of the action bar"
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "description": "When provided, a label is added to the action bar"
+    },
+    {
+      "name": "children",
+      "type": "React.ReactElement",
+      "required": true
+    }
+  ],
+  "subcomponents": [
+    {
+      "name": "ActionBar.Icon",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "defaultValue": "",
+          "required": true,
+          "description": "This will be the Button description."
+        },
+        {
+          "name": "icon",
+          "type": "Component",
+          "defaultValue": "",
+          "description": "provide an octicon. It will be placed in the center of the button"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "defaultValue": "",
+          "description": "Use an aria label to describe the functionality of the button. Please refer to [our guidance on alt text](https://primer.style/guides/accessibility/alternative-text-for-images) for tips on writing good alternative text."
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ]
+    },
+    {
+      "name": "ActionBar.Divider"
+    }
+  ]
+}

packages/react/src/ActionBar/ActionBar.stories.tsx → packages/react/src/drafts/ActionBar/ActionBar.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react'
 import ActionBar from '.'
 import {
   BoldIcon,
@@ -14,9 +14,10 @@ import {
   ListOrderedIcon,
   TasklistIcon,
 } from '@primer/octicons-react'
-import {MarkdownInput} from '../drafts/MarkdownEditor/_MarkdownInput'
-import {ViewSwitch, type MarkdownViewMode} from '../drafts/MarkdownEditor/_ViewSwitch'
-import {Box} from '..'
+import {MarkdownInput} from '../MarkdownEditor/_MarkdownInput'
+import {ViewSwitch} from '../MarkdownEditor/_ViewSwitch'
+import type {MarkdownViewMode} from '../MarkdownEditor/_ViewSwitch'
+import {Box} from '../..'
 
 export default {
   title: 'Components/ActionBar',

packages/react/src/ActionBar/ActionBar.tsx → packages/react/src/drafts/ActionBar/ActionBar.tsx

@@ -1,28 +1,18 @@
-/*
-TODO
-- Decide props for ActionBar
-- Add api docs
-- Add proper types\
-Bugs
-- Nothing in More items
-- Divider is loopy
-*/
-
 import type {RefObject, MutableRefObject} from 'react'
 import React, {useState, useCallback, useRef, forwardRef} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
-import {ActionList} from '../ActionList'
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
+import {ActionList} from '../../ActionList'
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 import styled from 'styled-components'
-import sx from '../sx'
-import {useOnEscapePress} from '../hooks/useOnEscapePress'
-import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
-import {useResizeObserver} from '../hooks/useResizeObserver'
-
-import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
-import type {IconButtonProps} from '../Button'
-import {IconButton} from '../Button'
-import Box from '../Box'
+import sx from '../../sx'
+import {useOnEscapePress} from '../../hooks/useOnEscapePress'
+import type {ResizeObserverEntry} from '../../hooks/useResizeObserver'
+import {useResizeObserver} from '../../hooks/useResizeObserver'
+
+import {useOnOutsideClick} from '../../hooks/useOnOutsideClick'
+import type {IconButtonProps} from '../../Button'
+import {IconButton} from '../../Button'
+import Box from '../../Box'
 
 type ChildSize = {
   text: string

packages/react/src/ActionBar/index.ts → packages/react/src/drafts/ActionBar/index.ts

@@ -1,5 +1,5 @@
 import {ActionBar as Bar, ActionBarIconButton, VerticalDivider} from './ActionBar'
-//export type {ActionBarProps} from './ActionBar'
+export type {ActionBarProps} from './ActionBar'
 
 const ActionBar = Object.assign(Bar, {
   IconButton: ActionBarIconButton,

packages/react/src/drafts/index.ts

@@ -62,3 +62,4 @@ export type {
 } from '../NavList'
 export * from './SelectPanel2'
 export * from './Tooltip'
+export * from './ActionBar'