add tsdoc

easy-ui-react/src/FocusedProductLayout/Content.tsx

@@ -1,6 +1,10 @@
 import React, { ReactNode } from "react";
 
 export type ContentProps = {
+  /**
+   * Main content to render for the focused product layout.
+   * Rendered in a `<main />`.
+   */
   children: ReactNode;
 };
 

easy-ui-react/src/FocusedProductLayout/FocusedProductLayout.mdx

@@ -106,21 +106,18 @@ Steps can be supplied to `FocusedProductLayout.WizardContent` through the `steps
   {/* other focused product layout props... */}
   content={
     <FocusedProductLayout.WizardContent
-      stepper={
-        <Stepper activeStepIndex={0}>
-          {["Step 1", "Step 2", "Step 3", "Step 4"].map((step, index) => (
-            <Stepper.Step
-              key={step}
-              stepIndex={index}
-              onPress={() => {}}
-              isComplete={false}
-              isAccessible={false}
-            >
-              {step}
-            </Stepper.Step>
-          ))}
-        </Stepper>
-      }
+      activeStepIndex={1}
+      steps={["Step 1", "Step 2", "Step 3", "Step 4"].map((step, index) => (
+        <Stepper.Step
+          key={step}
+          stepIndex={index}
+          onPress={() => {}}
+          isComplete={index < 1}
+          isAccessible={false}
+        >
+          {step}
+        </Stepper.Step>
+      ))}
       previousAction={{
         content: "Back",
         onAction: () => {

easy-ui-react/src/FocusedProductLayout/FocusedProductLayout.stories.tsx

@@ -100,21 +100,18 @@ export const WizardContent: Story = {
   args: {
     content: (
       <FocusedProductLayout.WizardContent
-        stepper={
-          <Stepper activeStepIndex={1}>
-            {["Step 1", "Step 2", "Step 3", "Step 4"].map((step, index) => (
-              <Stepper.Step
-                key={step}
-                stepIndex={index}
-                onPress={() => {}}
-                isComplete={index < 1}
-                isAccessible={false}
-              >
-                {step}
-              </Stepper.Step>
-            ))}
-          </Stepper>
-        }
+        activeStepIndex={1}
+        steps={["Step 1", "Step 2", "Step 3", "Step 4"].map((step, index) => (
+          <Stepper.Step
+            key={step}
+            stepIndex={index}
+            onPress={() => {}}
+            isComplete={index < 1}
+            isAccessible={false}
+          >
+            {step}
+          </Stepper.Step>
+        ))}
         previousAction={{
           content: "Back",
           onAction: action("previousAction.onAction pressed"),

easy-ui-react/src/FocusedProductLayout/FocusedProductLayout.tsx

@@ -10,19 +10,113 @@ import { WizardContent } from "./WizardContent";
 import styles from "./FocusedProductLayout.module.scss";
 
 export type HeaderProps = {
+  /**
+   * List of help menu items to render. Should be an array of `<Menu.Item />`s.
+   */
   helpMenuItems: MenuOverlayProps<object>["children"];
+
+  /**
+   * Handler that is called when a help menu item is selected.
+   */
   onHelpMenuAction?: MenuOverlayProps<object>["onAction"];
+
+  /**
+   * Back arrow to render in the header. The back functionality is completely
+   * up to the consumer.
+   *
+   * @example
+   * ```tsx
+   * <FocusedProductLayout
+   *   renderBackArrow={(props) => <a href="/account/settings" {...props} />}
+   * />
+   * ```
+   *
+   * @example
+   * ```tsx
+   * import Link from "next/link";
+   *
+   * <FocusedProductLayout
+   *   renderBackArrow={(props) => <Link href="/account/settings" {...props} />}
+   * />
+   * ```
+   *
+   * @example
+   * ```tsx
+   * <FocusedProductLayout
+   *   renderBackArrow={(props) => <button onClick={() => {}} {...props} />}
+   * />
+   * ```
+   */
   renderBackArrow: (props: { children: ReactNode }) => ReactNode;
+
+  /**
+   * Logo to render in the header.
+   */
   renderLogo: () => ReactNode;
+
+  /**
+   * Page title.
+   */
   title: ReactNode;
 };
 
 export type FocusedProductLayoutProps = HeaderProps & {
+  /**
+   * Main content area for the focused product layout. Should be either a
+   * `<FocusedProductLayout.Content />` component or a
+   * `<FocusedProductLayout.WizardContent />`.
+   */
   content: ReactNode;
+
+  /**
+   * Optional side panel for the focused product layout. Should be
+   * a `<FocusedProductLayout.SidePanel />`.
+   */
   sidePanel?: ReactNode;
+
+  /**
+   * Position of the side panel.
+   */
   sidePanelPosition?: "start" | "end";
 };
 
+/**
+ * `FocusedProductLayout` defines the areas of a product page in a
+ * focused state.
+ *
+ * @example
+ * ```tsx
+ * <FocusedProductLayout
+ *   helpMenuItems={[
+ *     <Menu.Item
+ *       key="1"
+ *       href="https://www.easypost.com/docs/api"
+ *       target="_blank"
+ *       rel="noopener"
+ *     >
+ *       Documentation
+ *     </Menu.Item>,
+ *   ]}
+ *   // Optionally accept a menu handler for menu items that are not links
+ *   onHelpMenuAction={(key) => {}}
+ *   renderBackArrow={(props) => (
+ *     <button {...props} onClick={action("backArrow.onClick pressed")} />
+ *   )}
+ *   renderLogo={() => <EasyPostFullLogo />}
+ *   title="Page Title"
+ *   sidePanel={
+ *     <FocusedProductLayout.SidePanel>
+ *       Side panel content
+ *     </FocusedProductLayout.SidePanel>
+ *   }
+ *   content={
+ *     <FocusedProductLayout.Content>
+ *       Content
+ *     </FocusedProductLayout.Content>
+ *   }
+ * />
+ * ```
+ */
 export function FocusedProductLayout(props: FocusedProductLayoutProps) {
   const { content, sidePanel, sidePanelPosition, title, ...headerProps } =
     props;
@@ -45,6 +139,17 @@ export function FocusedProductLayout(props: FocusedProductLayoutProps) {
   );
 }
 
+/**
+ * Represents the side panel in a `<FocusedProductLayout />`.
+ */
 FocusedProductLayout.SidePanel = SidePanel;
+
+/**
+ * Represents empty content in a `<FocusedProductLayout />`.
+ */
 FocusedProductLayout.Content = Content;
+
+/**
+ * Represents wizard content in a `<FocusedProductLayout />`.
+ */
 FocusedProductLayout.WizardContent = WizardContent;

easy-ui-react/src/FocusedProductLayout/HeaderAtTopOfPage.tsx

@@ -7,6 +7,13 @@ import type { HeaderProps } from "./FocusedProductLayout";
 
 import styles from "./Header.module.scss";
 
+/**
+ * Header to render at the top of the page. Above the main content. Only
+ * visible on small screens.
+ *
+ * @private
+ * @ignore
+ */
 export function HeaderAtTopOfPage(props: Omit<HeaderProps, "title">) {
   const { helpMenuItems, onHelpMenuAction, renderBackArrow, renderLogo } =
     props;

easy-ui-react/src/FocusedProductLayout/HeaderInContentArea.tsx

@@ -8,6 +8,13 @@ import type { HeaderProps } from "./FocusedProductLayout";
 
 import styles from "./Header.module.scss";
 
+/**
+ * Header to render in the main content area. Most of this is rendered only
+ * on large screens.
+ *
+ * @private
+ * @ignore
+ */
 export function HeaderInContentArea(props: HeaderProps) {
   const {
     helpMenuItems,

easy-ui-react/src/FocusedProductLayout/WizardContent.tsx

@@ -1,27 +1,70 @@
 import React, { ReactNode } from "react";
 import { Button } from "../Button";
+import { Stepper, StepperProps } from "../Stepper";
 
 import styles from "./WizardContent.module.scss";
 
 export type WizardContentProps = {
+  /**
+   * The active step, represented as an index of the sequence.
+   */
+  activeStepIndex: StepperProps["activeStepIndex"];
+
+  /**
+   * Content to render for the active wizard step.
+   */
   children: ReactNode;
-  stepper: ReactNode;
-  previousAction: WizardContentActionProps;
+
+  /**
+   * Configuration for the wizard's next action button.
+   */
   nextAction: WizardContentActionProps;
+
+  /**
+   * Configuration for the wizard's previous action button.
+   */
+  previousAction: WizardContentActionProps;
+
+  /**
+   * The steps to render, represented as `<Stepper.Step/ >`.
+   */
+  steps: StepperProps["children"];
 };
 
 type WizardContentActionProps = {
+  /**
+   * The action's text.
+   */
   content: string;
+
+  /**
+   * Handler to run for the action. Should generally progress or regress
+   * the stepper.
+   */
   onAction: () => void;
+
+  /**
+   * Whether or not the action is disabled.
+   */
   isDisabled?: boolean;
 };
 
+/**
+ * @privateRemarks
+ * Represents a wizard type of content to be used within a FocusedProductLayout.
+ *
+ * @private
+ * @ignore
+ */
 export function WizardContent(props: WizardContentProps) {
-  const { stepper, previousAction, nextAction, children } = props;
+  const { activeStepIndex, steps, previousAction, nextAction, children } =
+    props;
   return (
     <div className={styles.WizardContent}>
       <div className={styles.stepperContainer}>
-        <div className={styles.stepper}>{stepper}</div>
+        <div className={styles.stepper}>
+          <Stepper activeStepIndex={activeStepIndex}>{steps}</Stepper>
+        </div>
       </div>
       <main className={styles.main}>{children}</main>
       <div className={styles.footer}>