[LG-5567] Wizard Test harnesses

.changeset/dull-geese-hang.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/card': patch
+---
+
+Add children to Card type

.changeset/eleven-cars-obey.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/text-input': patch
+---
+
+Fixes props such that component now accepts a properly typed `ref`

.changeset/fine-phones-marry.md

@@ -0,0 +1,5 @@
+---
+'@lg-charts/chart-card': minor
+---
+
+Supports `React.ReactNode` as type for `title` prop

.changeset/funny-fans-punch.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/message-feedback': minor
+---
+
+Adds `disabledSend` prop to disable submit button

.changeset/light-crabs-stay.md

@@ -0,0 +1,5 @@
+---
+'@lg-charts/core': minor
+---
+
+Updates `ChartHeader` component's `title` prop to accept a `React.ReactNode` rather than a `string`

.changeset/soft-horses-fail.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/banner': minor
+---
+
+Exports `{ Banner }` as named export

.changeset/spotty-socks-leave.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/input-option': minor
+---
+
+Changes wedge y-axsis padding from `8px` to `4px`

.changeset/upset-seals-leave.md

@@ -0,0 +1,5 @@
+---
+'@lg-tools/codemods': patch
+---
+
+Adds `banner` to list of code-mod-able components for "named-exports" codemod

charts/chart-card/README.md

@@ -38,7 +38,7 @@ import { Chart } from '@lg-charts/core';
 
 | Name                               | Description                                                                                                                                           | Type                                                    | Default |
 | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
-| `title`                            | The title to display in the chart header.                                                                                                             | `string`                                                |         |
+| `title`                            | The title to display in the chart header.                                                                                                             | `React.ReactNode`                                       |         |
 | `defaultOpen` _(optional)_         | Defines the default state of the card.                                                                                                                | `boolean`                                               | `true`  |
 | `isOpen` _(optional)_              | Forces the card state.                                                                                                                                | `boolean`                                               |         |
 | `onToggleButtonClick` _(optional)_ | Callback fired when a user clicks the open/close toggle button.                                                                                       | `(event: MouseEventHandler<HTMLButtonElement>) => void` |         |

charts/chart-card/src/ChartCard/ChartCard.types.ts

@@ -13,7 +13,7 @@ export interface ChartCardProps
   /**
    * The title of the card
    */
-  title: string;
+  title: React.ReactNode;
 
   /**
    * Defines the default state of the card

charts/core/README.md

@@ -122,7 +122,7 @@ Component for rendering a header in a chart.
 
 | Name                         | Description                                                                                                                                           | Type              | Default |
 | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------- |
-| `title`                      | The title to display in the chart header.                                                                                                             | `string`          |         |
+| `title`                      | The title to display in the chart header.                                                                                                             | `React.ReactNode` |         |
 | `titleIcon` _(optional)_     | Content rendered immediately right of the title. Useful for quick contextual tooltips or other information concerning the title.                      | `React.ReactNode` |         |
 | `showDivider` _(optional)_   | When true, renders a dividing line on top of header. Useful when stacking charts, such as in a `ChartGroup`.                                          | `boolean`         |         |
 | `headerContent` _(optional)_ | Content that will be rendered to the right of the title. Useful for adding components such as `IconButton`'s that control functionality in the chart. | `React.ReactNode` |         |

charts/core/src/ChartContext/ChartContext.spec.tsx

@@ -3,19 +3,40 @@ import { render } from '@testing-library/react';
 
 import { renderHook } from '@leafygreen-ui/testing-lib';
 
+import { ChartInstance } from '../Chart/hooks/useChart.types';
+
 import { ChartContext, ChartProvider, useChartContext } from './ChartContext';
 
-const chartOptions = {};
-const updateChartOptions = jest.fn();
-const addChartSeries = jest.fn();
+const mockChartInstance: ChartInstance = {
+  id: 'test-chart',
+  ref: jest.fn(),
+  enableGroupTooltipSync: false,
+  state: undefined,
+  isChartHovered: false,
+  setTooltipMounted: jest.fn(),
+  tooltipPinned: false,
+  // EChartsInstance methods
+  _getEChartsInstance: jest.fn(),
+  _getOptions: jest.fn(),
+  addSeries: jest.fn(),
+  addToGroup: jest.fn(),
+  enableZoom: jest.fn(),
+  error: null,
+  hideTooltip: jest.fn(),
+  off: jest.fn(),
+  on: jest.fn(),
+  ready: true,
+  removeFromGroup: jest.fn(),
+  removeSeries: jest.fn(),
+  resize: jest.fn(),
+  setupZoomSelect: jest.fn(),
+  showTooltip: jest.fn(),
+  updateOptions: jest.fn(),
+};
 
 const ChartProviderMock = ({ children }: PropsWithChildren<{}>) => {
   return (
-    <ChartContext.Provider
-      //  TODO: Fix this test context @tsck
-      // @ts-expect-error - chartOptions is not defined in the ChartContextType
-      value={{ chartOptions, updateChartOptions, addChartSeries }}
-    >
+    <ChartContext.Provider value={{ chart: mockChartInstance }}>
       {children}
     </ChartContext.Provider>
   );
@@ -25,13 +46,7 @@ describe('lg-chart/core/ChartContext', () => {
   describe('ChartProvider', () => {
     test('renders children', async () => {
       const { getByTestId } = render(
-        <ChartProvider
-          // @ts-expect-error - chartOptions is not defined in the ChartContextType
-          chartOptions={{}}
-          updateChartOptions={() => {}}
-          addChartSeries={() => {}}
-          removeChartSeries={() => {}}
-        >
+        <ChartProvider chart={mockChartInstance}>
           <div data-testid="div" />
         </ChartProvider>,
       );
@@ -46,12 +61,10 @@ describe('lg-chart/core/ChartContext', () => {
       const { result } = renderHook(useChartContext, {
         wrapper: ChartProviderMock,
       });
-      // @ts-expect-error - chartOptions is not defined in the ChartContextType
-      const { chartOptions, updateChartOptions, addChartSeries } =
-        result.current;
-      expect(chartOptions).toBe(chartOptions);
-      expect(updateChartOptions).toBe(updateChartOptions);
-      expect(addChartSeries).toBe(addChartSeries);
+      const { chart } = result.current;
+      expect(chart).toBe(mockChartInstance);
+      expect(chart.id).toBe('test-chart');
+      expect(chart.enableGroupTooltipSync).toBe(false);
     });
   });
 });

charts/core/src/ChartHeader/ChartHeader.types.ts

@@ -5,7 +5,7 @@ export interface ChartHeaderProps
   /**
    * The title of the chart
    */
-  title: string;
+  title: React.ReactNode;
 
   /**
    * Icon to be rendered directly to the right of the title.

chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.spec.tsx

@@ -90,6 +90,15 @@ describe('packages/inline-message-feedback', () => {
           expect(cancelButton).toHaveAttribute('aria-disabled', 'true');
         }
       });
+
+      test('disables form elements when disabledSend prop is true', () => {
+        const { container } = render(
+          <InlineMessageFeedback {...defaultProps} disabledSend={true} />,
+        );
+
+        const submitButton = container.querySelector('button[type="submit"]');
+        expect(submitButton).toHaveAttribute('aria-disabled', 'true');
+      });
     });
 
     describe('error state', () => {

chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.tsx

@@ -12,7 +12,8 @@ import {
   Variant,
 } from '@lg-chat/leafygreen-chat-provider';
 
-import Button, {
+import {
+  Button,
   Size as ButtonSize,
   Variant as ButtonVariant,
 } from '@leafygreen-ui/button';
@@ -52,6 +53,7 @@ export const InlineMessageFeedback = forwardRef(
       submittedMessage = 'Submitted! Thanks for your feedback.',
       onSubmit: onSubmitProp,
       darkMode: darkModeProp,
+      disabledSend = false,
       onClose,
       textareaProps,
       errorMessage = 'Oops, please try again.',
@@ -170,7 +172,9 @@ export const InlineMessageFeedback = forwardRef(
                     type="submit"
                     variant={ButtonVariant[isCompact ? 'Default' : 'Primary']}
                     size={ButtonSize[isCompact ? 'Default' : 'Small']}
-                    disabled={!!hasEmptyTextarea || isSubmitting}
+                    disabled={
+                      !!hasEmptyTextarea || isSubmitting || disabledSend
+                    }
                     {...submitButtonProps}
                   >
                     {submitButtonText}

chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.types.ts

@@ -101,4 +101,10 @@ export type InlineMessageFeedbackProps = Required<
      * This is mainly for internal use as most instances of InlineMessageFeedback should be closed solely by onCancel.
      */
     onClose?: MouseEventHandler<HTMLButtonElement>;
+
+    /**
+     * Whether the submit button should be disabled
+     * @default false
+     */
+    disabledSend?: boolean;
   };

chat/message-prompts/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @lg-chat/message-prompts
 
+## 4.1.0
+
+### Minor Changes
+
+- 9c44076: - [LG-5438](https://jira.mongodb.org/browse/LG-5438) add `onClickRefresh` prop which conditionally renders refresh button
+  - [LG-5440](https://jira.mongodb.org/browse/LG-5440) add `enableHideOnSelect` prop which causes fade/shrink transition when a prompt is selected. This is set to `true` by default.
+
 ## 4.0.6
 
 ### Patch Changes

chat/message-prompts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lg-chat/message-prompts",
-  "version": "4.0.6",
+  "version": "4.1.0",
   "description": "LeafyGreen UI Kit Message Prompts",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",

deprecated-packages/box/src/Box.spec.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jest/expect-expect */
 import React from 'react';
 import { cleanup, render } from '@testing-library/react';
 import { axe } from 'jest-axe';

packages/banner/src/index.ts

@@ -1,2 +1,9 @@
-export { bannerChildrenContainerClassName, default } from './Banner';
+export {
+  bannerChildrenContainerClassName,
+  /**
+   * @deprecated Use named export `{ Banner }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  default,
+} from './Banner';
+export { default as Banner } from './Banner';
 export { type BannerProps, Variant } from './shared.types';

packages/card/README.md

@@ -40,6 +40,7 @@ Card is a styled wrapper for the Box component. Any properties you would pass to
 
 | Prop           | Type                    | Description                                                       | Default                                                                 |
 | -------------- | ----------------------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `children`     | `React.ReactNode`       | Content rendered inside of the `<Card />` component               |                                                                         |
 | `className`    | `string`                | Adds a className to the class attribute                           |                                                                         |
 | `contentStyle` | `'none'`, `'clickable'` | Whether the card should display as a visually clickable element.  | `'clickable'` when a valid `onClick` handler or `href` link is provided |
 | `darkMode`     | `boolean`               | Determines whether or not the component will appear in dark mode. | `false`                                                                 |

packages/card/src/Card/types.ts

@@ -12,6 +12,11 @@ export const ContentStyle = {
 export type ContentStyle = (typeof ContentStyle)[keyof typeof ContentStyle];
 
 export interface InternalCardProps extends DarkModeProps {
+  /**
+   * The content that will appear inside of the `<Card />` component.
+   */
+  children?: React.ReactNode;
+
   /**
    * Determines whether the Card should be styled as clickable.
    *

packages/confirmation-modal/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @leafygreen-ui/confirmation-modal
 
+## 10.1.1
+
+### Patch Changes
+
+- fb93ebb: Update `@leafygreen-ui/modal` dependency to use version 20.1.1
+
 ## 10.1.0
 
 ### Minor Changes

packages/confirmation-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/confirmation-modal",
-  "version": "10.1.0",
+  "version": "10.1.1",
   "description": "leafyGreen UI Kit Confirmation Modal",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",

packages/hooks/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @leafygreen-ui/hooks
 
+## 9.2.1
+
+### Patch Changes
+
+- bab8e2a: The type of the returned `value` is now inferred from the types of the parameters in `useControlled`
+
 ## 9.2.0
 
 ### Minor Changes

packages/hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/hooks",
-  "version": "9.2.0",
+  "version": "9.2.1",
   "description": "LeafyGreen UI Kit Custom Hooks",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",

packages/input-option/src/InputOption/InputOption.style.ts

@@ -89,7 +89,7 @@ export const getInputOptionStyles = ({
 /** in px */
 const wedgeWidth = spacing[100];
 /** in px */
-const wedgePaddingY = spacing[200];
+const wedgePaddingY = spacing[100];
 
 export const getInputOptionWedge = ({
   disabled,

packages/marketing-modal/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @leafygreen-ui/marketing-modal
 
+## 8.1.1
+
+### Patch Changes
+
+- fb93ebb: Update `@leafygreen-ui/modal` dependency to use version 20.1.1
+
 ## 8.1.0
 
 ### Minor Changes

packages/marketing-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/marketing-modal",
-  "version": "8.1.0",
+  "version": "8.1.1",
   "description": "leafyGreen UI Kit Marketing Modal",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",

packages/text-area/src/TextArea/TextArea.spec.tsx

@@ -182,9 +182,14 @@ describe('packages/text-area', () => {
     });
   });
 
-  /* eslint-disable jest/no-disabled-tests */
-  describe.skip('types behave as expected', () => {
-    test('TextArea throws error when neither aria-labelledby or label is supplied', () => {
+  describe('types behave as expected', () => {
+    test('TextArea takes a ref for a HTMLTextAreaElement', () => {
+      const ref = React.createRef<HTMLTextAreaElement>();
+      render(<TextArea label="Some label" ref={ref} />);
+    });
+
+    /* eslint-disable jest/no-disabled-tests */
+    test.skip('TextArea throws error when neither aria-labelledby or label is supplied', () => {
       // @ts-expect-error
       <TextArea />;
       <TextArea label="Some label" />;

packages/text-input/src/TextInput/TextInput.spec.tsx

@@ -228,8 +228,12 @@ describe('packages/text-input', () => {
     });
   });
 
-  /* eslint-disable jest/no-disabled-tests */
-  describe.skip('types behave as expected', () => {
+  describe('types behave as expected', () => {
+    test('TextInput takes a ref for a HTMLInputElement', () => {
+      const ref = React.createRef<HTMLInputElement>();
+      render(<TextInput label="some label" ref={ref} />);
+    });
+
     test('TextInput throws error when no label is supplied', () => {
       // @ts-expect-error
       <TextInput />;
@@ -246,5 +250,4 @@ describe('packages/text-input', () => {
       <TextInput type="search" aria-labelledby="some label" />;
     });
   });
-  /* eslint-enable jest/no-disabled-tests */
 });