[LG-5293] feat: ContextDrawer (#2918)

* feat(context-drawer): create context-drawer package and install deps

* feat(context-drawer): implement ButtonCorner component used internally for styling ContextDrawerButton

* feat(context-drawer): implement ContextDrawerButton component

* docs(context-drawer): add comment about internal ButtonCorner component and fix lint

* [LG-5293] feat: ContextDrawer part 2 (#2922)

* chore(context-drawer): update dependencies

* fix(context-drawer): ContextDrawerButton glyph rotates

* feat(context-drawer): implement ContextDrawer component with stories and specs

* docs(context-drawer): README

* fix(ContextDrawerButton): styling

* refactor(ContextDrawer): hardcode additional spacing for bottomInterceptRef

* style(ContextDrawer): improve visibility transition and collapse reference border

* docs(context-drawer): README format

* refactor(context-drawer): tab navigation with specs

* update spec

* Reduce redundant css selector specificity

* feat(lib): add formatCssSize util (#2930)

* feat(lib): add formatCssSize util

* refactor(ContextDrawer): formatCssSize on expandedHeight

* chore(lib): changeset

* refactor(lib): formatCssSize trims string values before format

* refactor(lib): formatCssSize types

Author: stephl3

.changeset/lemon-adults-accept.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': minor
+---
+
+Adds `formatCssSize` util for properly formatting a number or string into a valid css value

README.md

@@ -81,6 +81,7 @@ import Button from '@leafygreen-ui/button';
 | [@leafygreen-ui/code](./packages/code)                               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/code)](https://www.npmjs.com/package/@leafygreen-ui/code)                               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/code?color=white)                | [Live Example](http://mongodb.design/component/code/live-example)                     |
 | [@leafygreen-ui/combobox](./packages/combobox)                       | [![version](https://img.shields.io/npm/v/@leafygreen-ui/combobox)](https://www.npmjs.com/package/@leafygreen-ui/combobox)                       | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/combobox?color=white)            | [Live Example](http://mongodb.design/component/combobox/live-example)                 |
 | [@leafygreen-ui/confirmation-modal](./packages/confirmation-modal)   | [![version](https://img.shields.io/npm/v/@leafygreen-ui/confirmation-modal)](https://www.npmjs.com/package/@leafygreen-ui/confirmation-modal)   | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/confirmation-modal?color=white)  | [Live Example](http://mongodb.design/component/confirmation-modal/live-example)       |
+| [@leafygreen-ui/context-drawer](./packages/context-drawer)           | [![version](https://img.shields.io/npm/v/@leafygreen-ui/context-drawer)](https://www.npmjs.com/package/@leafygreen-ui/context-drawer)           | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/context-drawer?color=white)      | [Live Example](http://mongodb.design/component/context-drawer/live-example)           |
 | [@leafygreen-ui/copyable](./packages/copyable)                       | [![version](https://img.shields.io/npm/v/@leafygreen-ui/copyable)](https://www.npmjs.com/package/@leafygreen-ui/copyable)                       | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/copyable?color=white)            | [Live Example](http://mongodb.design/component/copyable/live-example)                 |
 | [@leafygreen-ui/date-picker](./packages/date-picker)                 | [![version](https://img.shields.io/npm/v/@leafygreen-ui/date-picker)](https://www.npmjs.com/package/@leafygreen-ui/date-picker)                 | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/date-picker?color=white)         | [Live Example](http://mongodb.design/component/date-picker/live-example)              |
 | [@leafygreen-ui/date-utils](./packages/date-utils)                   | [![version](https://img.shields.io/npm/v/@leafygreen-ui/date-utils)](https://www.npmjs.com/package/@leafygreen-ui/date-utils)                   | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/date-utils?color=white)          | [Live Example](http://mongodb.design/component/date-utils/live-example)               |

packages/context-drawer/README.md

@@ -0,0 +1,72 @@
+# Context Drawer
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/context-drawer.svg)
+
+#### [View on MongoDB.design](https://www.mongodb.design/component/context-drawer/live-example/)
+
+## Installation
+
+### PNPM
+
+```shell
+pnpm add @leafygreen-ui/context-drawer
+```
+
+### Yarn
+
+```shell
+yarn add @leafygreen-ui/context-drawer
+```
+
+### NPM
+
+```shell
+npm install @leafygreen-ui/context-drawer
+```
+
+## Description
+
+The Context Drawer is a container component that can be used to vertically expand and collapse content. It is intended to be used in situations where there is a need to reveal additional information or functionality in-context, without navigating the user to a new page or view.
+
+## Example
+
+```tsx
+import {
+  ContextDrawer,
+  ContextDrawerButton,
+} from '@leafygreen-ui/context-drawer';
+
+<ContextDrawer
+  reference={
+    <div
+      className={css`
+        display: flex;
+        flex-direction: column;
+      `}
+    >
+      <h2>Reference Element</h2>
+      <p>This is the element that the drawer is positioned relative to.</p>
+    </div>
+  }
+  trigger={({ isOpen }) => <ContextDrawerButton isOpen={isOpen} />}
+  content={
+    <div>
+      <p>This is the content of the drawer.</p>
+    </div>
+  }
+/>;
+```
+
+## Properties
+
+### ContextDrawer
+
+| Prop             | Type                                                             | Description                                                                                                                             | Default |
+| ---------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `content`        | `ReactElement`                                                   | The content to be displayed within the drawer.                                                                                          |         |
+| `defaultOpen`    | `boolean`                                                        | The default open state of the drawer when it is uncontrolled.                                                                           | `false` |
+| `expandedHeight` | `number \| string`                                               | The maximum height of the content area when expanded. Can be a number (in pixels) or a string (e.g., '50%').                            | `160`   |
+| `isOpen`         | `boolean`                                                        | The open state of the drawer. Providing this prop will switch the component to controlled mode.                                         |         |
+| `onOpenChange`   | `ChangeEventHandler<boolean>`                                    | Event handler called when the open state of the drawer changes.                                                                         |         |
+| `reference`      | `ReactElement`                                                   | The element that the drawer is positioned relative to.                                                                                  |         |
+| `trigger`        | `ReactElement` or `(props: { isOpen: boolean }) => ReactElement` | The element that triggers the opening and closing of the drawer. Can be a React element or a function that receives the `isOpen` state. |         |

packages/context-drawer/package.json

@@ -0,0 +1,57 @@
+  
+{
+  "name": "@leafygreen-ui/context-drawer",
+  "version": "0.1.0",
+  "description": "LeafyGreen UI Kit Context Drawer",
+  "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/emotion": "workspace:^",
+    "@leafygreen-ui/hooks": "workspace:^",
+    "@leafygreen-ui/icon": "workspace:^",
+    "@leafygreen-ui/lib": "workspace:^",
+    "@leafygreen-ui/palette": "workspace:^",
+    "@leafygreen-ui/tokens": "workspace:^",
+    "react-intersection-observer": "^8.25.1"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^8.0.2",
+    "@storybook/test": "8.5.3",
+    "@leafygreen-ui/typography": "workspace:^",
+    "@lg-tools/build": "workspace:^"
+  },
+  "peerDependencies": {
+    "@leafygreen-ui/leafygreen-provider": "workspace:^"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/context-drawer",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/LG/summary"
+  }
+}

packages/context-drawer/src/ButtonCorner/ButtonCorner.styles.ts

@@ -0,0 +1,29 @@
+import { css, cx } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { color } from '@leafygreen-ui/tokens';
+
+import { Side } from './ButtonCorner.types';
+
+const CORNER_SIZE = 8;
+const CORNER_OFFSET = 15;
+
+const baseWrapperStyles = css`
+  display: flex;
+  position: absolute;
+  top: 0;
+  width: ${CORNER_SIZE}px;
+  height: ${CORNER_SIZE}px;
+`;
+
+export const getWrapperStyles = (side: Side) =>
+  cx(baseWrapperStyles, {
+    [css`
+      left: -${CORNER_OFFSET}px;
+    `]: side === Side.Left,
+    [css`
+      right: -${CORNER_OFFSET}px;
+      transform: scaleX(-1);
+    `]: side === Side.Right,
+  });
+
+export const getFill = (theme: Theme) => color[theme].background.info.default;

packages/context-drawer/src/ButtonCorner/ButtonCorner.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+
+import { getFill, getWrapperStyles } from './ButtonCorner.styles';
+import { Side } from './ButtonCorner.types';
+
+/**
+ * @returns component that renders the visually rounded sides of the ContextDrawerButton.
+ *
+ * @internal
+ */
+export const ButtonCorner = ({ side }: { side: Side }) => {
+  const { theme } = useDarkMode();
+
+  return (
+    <div className={getWrapperStyles(side)}>
+      <svg
+        width="8"
+        height="8"
+        viewBox="0 0 8 8"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0 0.000523481C4.39583 0.0500261 7.94998 3.60417 7.99949 8H8V0H0V0.000523481Z"
+          fill={getFill(theme)}
+        />
+      </svg>
+    </div>
+  );
+};

packages/context-drawer/src/ButtonCorner/ButtonCorner.types.ts

@@ -0,0 +1,5 @@
+export const Side = {
+  Left: 'left',
+  Right: 'right',
+} as const;
+export type Side = (typeof Side)[keyof typeof Side];

packages/context-drawer/src/ButtonCorner/index.ts

@@ -0,0 +1,2 @@
+export { ButtonCorner } from './ButtonCorner';
+export { Side } from './ButtonCorner.types';

packages/context-drawer/src/ContextDrawer.stories.tsx

@@ -0,0 +1,171 @@
+import React, { useMemo, useState } from 'react';
+import { faker } from '@faker-js/faker';
+import {
+  storybookArgTypes,
+  storybookExcludedControlParams,
+  StoryMetaType,
+} from '@lg-tools/storybook-utils';
+import { StoryFn, StoryObj } from '@storybook/react';
+
+import { css } from '@leafygreen-ui/emotion';
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { DarkModeProps, getTheme } from '@leafygreen-ui/lib';
+import {
+  borderRadius,
+  color,
+  InteractionState,
+  spacing,
+  Variant,
+} from '@leafygreen-ui/tokens';
+import { Body, Subtitle } from '@leafygreen-ui/typography';
+
+import { ContextDrawerProps } from './ContextDrawer/ContextDrawer.types';
+import { ContextDrawer } from './ContextDrawer';
+import { ContextDrawerButton } from './ContextDrawerButton';
+
+const SEED = 0;
+faker.seed(SEED);
+
+const defaultExcludedControls = [
+  ...storybookExcludedControlParams,
+  'content',
+  'onOpenChange',
+  'reference',
+  'trigger',
+];
+
+const meta: StoryMetaType<typeof ContextDrawer> = {
+  title: 'Components/ContextDrawer',
+  component: ContextDrawer,
+  parameters: {
+    default: 'LiveExample',
+    controls: {
+      exclude: [...defaultExcludedControls, 'isOpen'],
+    },
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        isOpen: [false, true],
+      },
+      decorator: (Instance, context) => {
+        return (
+          <LeafyGreenProvider darkMode={context?.args.darkMode}>
+            <Instance
+              reference={<MockReference darkMode={context?.args.darkMode} />}
+              content={<MockContent />}
+              trigger={({ isOpen }: { isOpen: boolean }) => (
+                <ContextDrawerButton isOpen={isOpen} />
+              )}
+            />
+          </LeafyGreenProvider>
+        );
+      },
+    },
+  },
+  args: {
+    darkMode: false,
+    defaultOpen: false,
+    expandedHeight: 160,
+  },
+  argTypes: {
+    darkMode: storybookArgTypes.darkMode,
+  },
+};
+export default meta;
+
+const MockReference = ({ darkMode }: DarkModeProps) => {
+  const fillerText = useMemo(() => faker.lorem.paragraphs(2), []);
+
+  return (
+    <div
+      className={css`
+        overflow: hidden;
+        padding: ${spacing[400]}px;
+        height: 200px;
+        border: 1px solid
+          ${color[getTheme(!!darkMode)].border[Variant.Secondary][
+            InteractionState.Default
+          ]};
+        border-radius: ${borderRadius[400]}px;
+        display: flex;
+        flex-direction: column;
+        gap: ${spacing[200]}px;
+      `}
+    >
+      <Subtitle>Reference Element</Subtitle>
+      <Body>{fillerText}</Body>
+    </div>
+  );
+};
+
+const MockContent = () => {
+  const fillerText = useMemo(() => faker.lorem.paragraphs(10), []);
+
+  return (
+    <div
+      className={css`
+        padding: ${spacing[400]}px;
+      `}
+    >
+      <Subtitle>Content Element</Subtitle>
+      <Body>{fillerText}</Body>
+    </div>
+  );
+};
+
+const TemplateComponent: StoryFn<ContextDrawerProps> = (
+  props: ContextDrawerProps,
+) => {
+  const [isOpen, setIsOpen] = useState(props.defaultOpen);
+
+  const isOpenVal = props.isOpen ?? isOpen;
+
+  const toggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <ContextDrawer
+      {...props}
+      className={css`
+        width: 100%;
+      `}
+      reference={<MockReference darkMode={props.darkMode} />}
+      content={<MockContent />}
+      trigger={
+        <ContextDrawerButton isOpen={isOpenVal} onClick={toggle}>
+          {isOpenVal ? 'Hide' : 'View'}
+        </ContextDrawerButton>
+      }
+      isOpen={isOpenVal}
+    />
+  );
+};
+
+export const LiveExample: StoryObj<ContextDrawerProps> = {
+  render: TemplateComponent,
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+};
+
+export const Controlled: StoryObj<ContextDrawerProps> = {
+  render: TemplateComponent,
+  parameters: {
+    controls: {
+      exclude: [...defaultExcludedControls, 'defaultOpen', 'expandedHeight'],
+    },
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+  args: {
+    isOpen: true,
+  },
+};
+
+export const Generated: StoryObj<ContextDrawerProps> = {
+  render: () => <></>,
+};