From 8d80893939cb21d83f6ba3c450c6d016019b4f72 Mon Sep 17 00:00:00 2001
From: David Linke <davelinke@users.noreply.github.com>
Date: Fri, 6 Sep 2024 14:07:25 -0400
Subject: [PATCH] docs: add ActionBar component documentation (#1527)

* docs(patterns): add base documentation for ActionBar

* docs(patterns): add SideNav link for Action Bar

* docs(patterns): add changeset for action bar documentation

* docs(patterns): correct array sample style for ActionButton

Co-authored-by: Chancellor Clark <chancellor.clark@bigcommerce.com>

---------

Co-authored-by: Chancellor Clark <chancellor.clark@bigcommerce.com>
---
 .changeset/grumpy-houses-happen.md            |  5 ++
 .../docs/PropTables/ActionBarPropTable.tsx    | 38 ++++++++
 packages/docs/components/SideNav/SideNav.tsx  |  1 +
 packages/docs/pages/action-bar.tsx            | 88 +++++++++++++++++++
 4 files changed, 132 insertions(+)
 create mode 100644 .changeset/grumpy-houses-happen.md
 create mode 100644 packages/docs/PropTables/ActionBarPropTable.tsx
 create mode 100644 packages/docs/pages/action-bar.tsx

diff --git a/.changeset/grumpy-houses-happen.md b/.changeset/grumpy-houses-happen.md
new file mode 100644
index 000000000..39a6b57ed
--- /dev/null
+++ b/.changeset/grumpy-houses-happen.md
@@ -0,0 +1,5 @@
+---
+'@bigcommerce/docs': patch
+---
+
+Added Action Bar pattern component documentation
diff --git a/packages/docs/PropTables/ActionBarPropTable.tsx b/packages/docs/PropTables/ActionBarPropTable.tsx
new file mode 100644
index 000000000..f646ca923
--- /dev/null
+++ b/packages/docs/PropTables/ActionBarPropTable.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { NextLink, Prop, PropTable, PropTableWrapper } from '../components';
+
+const actionBarProps: Prop[] = [
+  {
+    name: 'actions',
+    types: (
+      <>
+        <NextLink
+          href={{ hash: 'action-button-prop-table', query: { props: 'action-button-props' } }}
+        >
+          ActionButton
+        </NextLink>
+        []
+      </>
+    ),
+    description: 'An array of actions to display in the action bar. Supports up to three actions.',
+    required: true,
+  },
+];
+
+export const ActionBarPropsTable: React.FC<PropTableWrapper> = (props) => (
+  <PropTable propList={actionBarProps} title="ActionBar" {...props} />
+);
+
+const actionButtonProps: Prop[] = [
+  {
+    name: 'text',
+    types: 'string',
+    description: 'The text content of the button.',
+    required: true,
+  },
+];
+
+export const ActionButtonPropsTable: React.FC<PropTableWrapper> = (props) => (
+  <PropTable propList={actionButtonProps} title="ActionBar[ActionButton]" {...props} />
+);
diff --git a/packages/docs/components/SideNav/SideNav.tsx b/packages/docs/components/SideNav/SideNav.tsx
index cad3c699d..884dc6b9a 100644
--- a/packages/docs/components/SideNav/SideNav.tsx
+++ b/packages/docs/components/SideNav/SideNav.tsx
@@ -103,6 +103,7 @@ export const SideNav: React.FC = () => {
               </SideNavGroup>
 
               <SideNavGroup title="Patterns">
+                <SideNavLink href="/action-bar">Action Bar</SideNavLink>
                 <SideNavLink href="/header">Header</SideNavLink>
               </SideNavGroup>
 
diff --git a/packages/docs/pages/action-bar.tsx b/packages/docs/pages/action-bar.tsx
new file mode 100644
index 000000000..2c1405def
--- /dev/null
+++ b/packages/docs/pages/action-bar.tsx
@@ -0,0 +1,88 @@
+import { H1, Panel, Text } from '@bigcommerce/big-design';
+import { ActionBar } from '@bigcommerce/big-design-patterns';
+import React, { Fragment } from 'react';
+
+import { Code, CodePreview, CodeSnippet, ContentRoutingTabs, GuidelinesTable } from '../components';
+import { ButtonPropTable } from '../PropTables';
+import { ActionBarPropsTable, ActionButtonPropsTable } from '../PropTables/ActionBarPropTable';
+
+const ActionBarPage = () => {
+  return (
+    <>
+      <H1>ActionBar</H1>
+
+      <Panel header="Overview" headerId="overview">
+        <Text>
+          The <Code primary>ActionBar</Code> component provides a consistent way to display a set of
+          action buttons at the bottom of a page or section. It supports up to three actions and
+          ensures visual consistency across the platform.
+        </Text>
+
+        <Text>
+          Use to provide quick and consistent access to key actions at the bottom of a page.
+        </Text>
+      </Panel>
+
+      <Panel header="Implementation" headerId="implementation">
+        <Fragment key="basic">
+          <Text>
+            To use <Code primary>ActionBar</Code> import the component from the package:
+          </Text>
+          <CodeSnippet>{`import { ActionBar } from '@bigcommerce/big-design-patterns';`}</CodeSnippet>
+        </Fragment>
+        <CodePreview>
+          {/* jsx-to-string:start */}
+          <ActionBar
+            actions={[
+              {
+                text: 'Primary',
+                variant: 'primary',
+              },
+              {
+                text: 'Secondary',
+                variant: 'secondary',
+              },
+            ]}
+          />
+          {/* jsx-to-string:end */}
+        </CodePreview>
+      </Panel>
+
+      <Panel header="Props" headerId="props">
+        <ContentRoutingTabs
+          id="props"
+          routes={[
+            {
+              id: 'action-bar-props',
+              title: 'ActionBar',
+              render: () => <ActionBarPropsTable />,
+            },
+            {
+              id: 'action-button-props',
+              title: 'ActionButton',
+              render: () => (
+                <ActionButtonPropsTable
+                  id="action-button-prop-table"
+                  inheritedProps={<ButtonPropTable collapsible />}
+                />
+              ),
+            },
+          ]}
+        />
+      </Panel>
+
+      <Panel header="Do's and Don'ts" headerId="guidelines">
+        <GuidelinesTable
+          discouraged={["Don't use for non-critical actions."]}
+          recommended={[
+            'Use to provide quick and consistent access to key actions.',
+            'Limit the number of actions to three, prioritizing the most important ones.',
+            'Ensure that only one primary action is included to guide user focus.',
+          ]}
+        />
+      </Panel>
+    </>
+  );
+};
+
+export default ActionBarPage;