[LG-5830] feat(collection-toolbar): Collection Toolbar component

.changeset/collection-toolbar.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/collection-toolbar': minor
+---
+
+Initial release of `CollectionToolbar`

packages/collection-toolbar/README.md

@@ -0,0 +1,25 @@
+# Collection Toolbar
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/collection-toolbar.svg)
+
+#### [View on MongoDB.design](https://www.mongodb.design/component/collection-toolbar/live-example/)
+
+## Installation
+
+### PNPM
+
+```shell
+pnpm add @leafygreen-ui/collection-toolbar
+```
+
+### Yarn
+
+```shell
+yarn add @leafygreen-ui/collection-toolbar
+```
+
+### NPM
+
+```shell
+npm install @leafygreen-ui/collection-toolbar
+```

packages/collection-toolbar/package.json

@@ -0,0 +1,56 @@
+
+{
+  "name": "@leafygreen-ui/collection-toolbar",
+  "version": "0.0.1",
+  "description": "LeafyGreen UI Kit Collection Toolbar",
+  "main": "./dist/umd/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "license": "Apache-2.0",
+  "exports": {
+    ".": {
+      "require": "./dist/umd/index.js",
+      "import": "./dist/esm/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./testing": {
+      "require": "./dist/umd/testing/index.js",
+      "import": "./dist/esm/testing/index.js",
+      "types": "./dist/types/testing/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "lg-build bundle",
+    "tsc": "lg-build tsc",
+    "docs": "lg-build docs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/button": "workspace:^",
+    "@leafygreen-ui/compound-component": "workspace:^",
+    "@leafygreen-ui/emotion": "workspace:^",
+    "@leafygreen-ui/lib": "workspace:^",
+    "@leafygreen-ui/hooks": "workspace:^",
+    "@leafygreen-ui/icon": "workspace:^",
+    "@leafygreen-ui/icon-button": "workspace:^",
+    "@leafygreen-ui/menu": "workspace:^",
+    "@leafygreen-ui/pagination": "workspace:^",
+    "@leafygreen-ui/tokens": "workspace:^",
+    "@leafygreen-ui/tooltip": "workspace:^",
+    "@leafygreen-ui/typography": "workspace:^",
+    "@lg-tools/test-harnesses": "workspace:^"
+  },
+  "peerDependencies": {
+    "@leafygreen-ui/leafygreen-provider": "workspace:^5.0.0 || ^4.0.0 || ^3.2.0"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/collection-toolbar",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/LG/summary"
+  }
+}

packages/collection-toolbar/src/CollectionToolbar.stories.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { storybookArgTypes, StoryMetaType } from '@lg-tools/storybook-utils';
+import { StoryFn } from '@storybook/react';
+
+import { ButtonVariant, CollectionToolbar, Size, Variant } from '.';
+
+const meta: StoryMetaType<typeof CollectionToolbar> = {
+  title: 'Components/CollectionToolbar',
+  component: CollectionToolbar,
+  parameters: {
+    default: 'LiveExample',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        size: Object.values(Size),
+        variant: Object.values(Variant),
+      },
+    },
+    docs: {
+      description: {
+        component:
+          'CollectionToolbar is a component that displays a toolbar for a collection.',
+      },
+    },
+  },
+  argTypes: {
+    darkMode: storybookArgTypes.darkMode,
+    size: {
+      control: 'select',
+      options: Object.values(Size),
+    },
+    variant: {
+      control: 'select',
+      options: Object.values(Variant),
+    },
+  },
+};
+
+export default meta;
+
+export const LiveExample: StoryFn<typeof CollectionToolbar> = props => (
+  <CollectionToolbar {...props}>
+    <CollectionToolbar.Title>Collection Title</CollectionToolbar.Title>
+    <CollectionToolbar.Actions showToggleButton>
+      <CollectionToolbar.Actions.Button variant={ButtonVariant.Default}>
+        Action
+      </CollectionToolbar.Actions.Button>
+      <CollectionToolbar.Actions.Button variant={ButtonVariant.Primary}>
+        Action
+      </CollectionToolbar.Actions.Button>
+      <CollectionToolbar.Actions.Pagination
+        onBackArrowClick={() => {}}
+        onForwardArrowClick={() => {}}
+        itemsPerPage={10}
+        numTotalItems={100}
+      />
+      <CollectionToolbar.Actions.Menu>
+        <CollectionToolbar.Actions.Menu.MenuItem>
+          Menu Item
+        </CollectionToolbar.Actions.Menu.MenuItem>
+        <CollectionToolbar.Actions.Menu.MenuItem>
+          Menu Item
+        </CollectionToolbar.Actions.Menu.MenuItem>
+        <CollectionToolbar.Actions.Menu.MenuItem>
+          Menu Item
+        </CollectionToolbar.Actions.Menu.MenuItem>
+      </CollectionToolbar.Actions.Menu>
+    </CollectionToolbar.Actions>
+  </CollectionToolbar>
+);
+
+export const Title: StoryFn<typeof CollectionToolbar> = props => (
+  <CollectionToolbar {...props}>
+    <CollectionToolbar.Title>Collection Title</CollectionToolbar.Title>
+  </CollectionToolbar>
+);
+
+export const Actions: StoryFn<typeof CollectionToolbar.Actions> = ({
+  showToggleButton,
+  ...props
+}) => {
+  return (
+    <CollectionToolbar {...props}>
+      <CollectionToolbar.Title>Collection Title</CollectionToolbar.Title>
+      <CollectionToolbar.Actions showToggleButton={showToggleButton}>
+        <CollectionToolbar.Actions.Button variant={ButtonVariant.Default}>
+          Action
+        </CollectionToolbar.Actions.Button>
+        <CollectionToolbar.Actions.Button variant={ButtonVariant.Primary}>
+          Action
+        </CollectionToolbar.Actions.Button>
+      </CollectionToolbar.Actions>
+    </CollectionToolbar>
+  );
+};
+
+Actions.argTypes = {
+  showToggleButton: {
+    description:
+      'Shows the toggle button. Only shows if the variant is collapsible.',
+    control: 'boolean',
+    defaultValue: false,
+  },
+};

packages/collection-toolbar/src/CollectionToolbar/CollectionToolbar.spec.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { Variant } from '../shared.types';
+import { getTestUtils } from '../testing/getTestUtils';
+
+import { CollectionToolbar } from '.';
+
+describe('packages/collection-toolbar', () => {
+  test('renders correctly', () => {
+    render(<CollectionToolbar />);
+    const utils = getTestUtils();
+    expect(utils.getCollectionToolbar()).toBeInTheDocument();
+  });
+
+  test('applies className to the root element', () => {
+    render(<CollectionToolbar className="test-class" />);
+    const utils = getTestUtils();
+    expect(utils.getCollectionToolbar()?.className).toContain('test-class');
+  });
+
+  describe('variant: collapsible', () => {
+    test('renders title when variant is collapsible', () => {
+      render(
+        <CollectionToolbar variant={Variant.Collapsible}>
+          <CollectionToolbar.Title>Test Title</CollectionToolbar.Title>
+        </CollectionToolbar>,
+      );
+      expect(screen.getByText('Test Title')).toBeInTheDocument();
+    });
+
+    test('does not render title when variant is not collapsible', () => {
+      render(
+        <CollectionToolbar variant={Variant.Default}>
+          <CollectionToolbar.Title>Test Title</CollectionToolbar.Title>
+        </CollectionToolbar>,
+      );
+      expect(screen.queryByText('Test Title')).not.toBeInTheDocument();
+    });
+  });
+});

packages/collection-toolbar/src/CollectionToolbar/CollectionToolbar.styles.ts

@@ -0,0 +1,20 @@
+import { css, cx } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
+
+import { Size, Variant } from '../shared.types';
+
+export const baseStyles = css`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${spacing[200]}px;
+`;
+
+export const getCollectionToolbarStyles = ({
+  className,
+}: {
+  size?: Size;
+  variant?: Variant;
+  className?: string;
+}) => cx(baseStyles, className);

packages/collection-toolbar/src/CollectionToolbar/CollectionToolbar.tsx

@@ -0,0 +1,74 @@
+import React, { forwardRef } from 'react';
+
+import {
+  CompoundComponent,
+  findChild,
+} from '@leafygreen-ui/compound-component';
+
+import { Actions, Title } from '../components';
+import { CollectionToolbarProvider } from '../Context/CollectionToolbarProvider';
+import {
+  CollectionToolbarSubComponentProperty,
+  Size,
+  Variant,
+} from '../shared.types';
+import { getLgIds } from '../utils';
+
+import { getCollectionToolbarStyles } from './CollectionToolbar.styles';
+import { CollectionToolbarProps } from './CollectionToolbar.types';
+
+export const CollectionToolbar = CompoundComponent(
+  // eslint-disable-next-line react/display-name
+  forwardRef<HTMLDivElement, CollectionToolbarProps>(
+    (
+      {
+        size = Size.Default,
+        variant = Variant.Default,
+        className,
+        children,
+        'data-lgid': dataLgId,
+        darkMode,
+        ...rest
+      },
+      fwdRef,
+    ) => {
+      const lgIds = getLgIds(dataLgId);
+
+      const title = findChild(
+        children,
+        CollectionToolbarSubComponentProperty.Title,
+      );
+
+      const actions = findChild(
+        children,
+        CollectionToolbarSubComponentProperty.Actions,
+      );
+
+      const showTitle = title && variant === Variant.Collapsible;
+
+      return (
+        <CollectionToolbarProvider
+          darkMode={darkMode}
+          size={size}
+          variant={variant}
+          lgIds={lgIds}
+        >
+          <div
+            data-lgid={lgIds.root}
+            className={getCollectionToolbarStyles({ size, variant, className })}
+            ref={fwdRef}
+            {...rest}
+          >
+            {showTitle && title}
+            {actions}
+          </div>
+        </CollectionToolbarProvider>
+      );
+    },
+  ),
+  {
+    displayName: 'CollectionToolbar',
+    Title,
+    Actions,
+  },
+);

packages/collection-toolbar/src/CollectionToolbar/CollectionToolbar.types.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithRef } from 'react';
+
+import { DarkModeProps, LgIdProps } from '@leafygreen-ui/lib';
+
+import { Size, Variant } from '../shared.types';
+
+export interface CollectionToolbarProps
+  extends ComponentPropsWithRef<'div'>,
+    DarkModeProps,
+    LgIdProps {
+  /**
+   * The size of the CollectionToolbar and it's sub-components.
+   *
+   * @default `'default'`
+   */
+  size?: typeof Size.Default | typeof Size.Small;
+  /**
+   * The variant of the CollectionToolbar. Determines the layout of the CollectionToolbar.
+   *
+   * @default `'default'`
+   */
+  variant?: Variant;
+}

packages/collection-toolbar/src/CollectionToolbar/index.ts

@@ -0,0 +1,2 @@
+export { CollectionToolbar } from './CollectionToolbar';
+export { type CollectionToolbarProps } from './CollectionToolbar.types';