feat(context-drawer): implement ContextDrawerButton component

Author: stephl3

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import {
+  storybookArgTypes,
+  storybookExcludedControlParams,
+  StoryMetaType,
+} from '@lg-tools/storybook-utils';
+import { StoryObj } from '@storybook/react';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+
+import { ContextDrawerButton } from './ContextDrawerButton';
+
+const meta: StoryMetaType<typeof ContextDrawerButton> = {
+  title: 'Components/ContextDrawer/ContextDrawerButton',
+  component: ContextDrawerButton,
+  parameters: {
+    default: 'LiveExample',
+    controls: {
+      exclude: [...storybookExcludedControlParams],
+    },
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        isOpen: [false, true],
+      },
+      decorator: (Instance, context) => {
+        return (
+          <LeafyGreenProvider darkMode={context?.args.darkMode}>
+            <Instance />
+          </LeafyGreenProvider>
+        );
+      },
+    },
+  },
+  argTypes: {
+    darkMode: storybookArgTypes.darkMode,
+    isOpen: {
+      control: 'boolean',
+    },
+  },
+};
+export default meta;
+
+export const LiveExample: StoryObj<typeof ContextDrawerButton> = {
+  render: ({ ...args }) => <ContextDrawerButton {...args} />,
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+};
+
+export const Generated: StoryObj<typeof ContextDrawerButton> = {
+  render: () => <></>,
+};

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

@@ -0,0 +1,44 @@
+import { css, cx } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+import { borderRadius, color, spacing } from '@leafygreen-ui/tokens';
+
+const getTriggerStyles = (theme: Theme) => {
+  const backgroundColor = color[theme].background.info.default;
+  const textColor = palette.blue[theme === Theme.Dark ? 'light2' : 'dark3'];
+
+  return css`
+    border: none;
+    background-color: ${backgroundColor};
+    color: ${textColor};
+    border-radius: 0 0 ${borderRadius[400]}px ${borderRadius[400]}px;
+    padding: 0 ${spacing[200]}px;
+
+    &:focus-visible {
+      background-color: ${backgroundColor};
+      color: ${textColor};
+      box-shadow: none;
+    }
+
+    &:hover,
+    &:active {
+      background-color: ${backgroundColor};
+      color: ${textColor};
+      box-shadow: none;
+    }
+  `;
+};
+
+const getGlyphStyles = (theme: Theme) => css`
+  & svg[role='presentation'] {
+    color: ${palette.blue[theme === Theme.Dark ? 'light2' : 'dark2']};
+  }
+`;
+
+export const getButtonStyles = ({
+  className,
+  theme,
+}: {
+  className?: string;
+  theme: Theme;
+}) => cx(getTriggerStyles(theme), getGlyphStyles(theme), className);

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

@@ -0,0 +1,39 @@
+import React, { forwardRef } from 'react';
+
+import Button, { Size } from '@leafygreen-ui/button';
+import ChevronDown from '@leafygreen-ui/icon/dist/ChevronDown';
+import LeafyGreenProvider, {
+  useDarkMode,
+} from '@leafygreen-ui/leafygreen-provider';
+
+import { ButtonCorner, Side } from '../ButtonCorner';
+
+import { getButtonStyles } from './ContextDrawerButton.styles';
+import { ContextDrawerButtonProps } from './ContextDrawerButton.types';
+
+export const ContextDrawerButton = forwardRef<
+  HTMLButtonElement,
+  ContextDrawerButtonProps
+>(({ children, className, isOpen = false, ...rest }, ref) => {
+  const { darkMode, theme } = useDarkMode();
+
+  const label = children ?? (isOpen ? 'Hide' : 'View more');
+
+  return (
+    <LeafyGreenProvider darkMode={darkMode}>
+      <Button
+        ref={ref}
+        rightGlyph={<ChevronDown />}
+        size={Size.XSmall}
+        className={getButtonStyles({ className, theme })}
+        {...rest}
+      >
+        <ButtonCorner side={Side.Left} />
+        {label}
+        <ButtonCorner side={Side.Right} />
+      </Button>
+    </LeafyGreenProvider>
+  );
+});
+
+ContextDrawerButton.displayName = 'ContextDrawerButton';

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

@@ -0,0 +1,10 @@
+import { ButtonProps } from '@leafygreen-ui/button';
+
+export interface ContextDrawerButtonProps
+  extends Pick<ButtonProps, 'children' | 'className' | 'disabled' | 'onClick'> {
+  /**
+   * Determines whether the trigger is in the 'open' state.
+   * @default false
+   */
+  isOpen?: boolean;
+}

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

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

packages/context-drawer/src/index.ts

@@ -0,0 +1 @@
+export { ContextDrawerButton, type ContextDrawerButtonProps } from './ContextDrawerButton';