[Feature] Accordion middle partials

apps/web/src/pages/ManagerDashboardPage/ManagerDashboardPage.tsx

@@ -11,6 +11,7 @@ import {
   PreviewList,
   ResourceBlock,
   Accordion,
+  AccordionMetaData,
 } from "@gc-digital-talent/ui";
 import { navigationMessages } from "@gc-digital-talent/i18n";
 import { FragmentType, getFragment, graphql } from "@gc-digital-talent/graphql";
@@ -71,6 +72,36 @@ const ManagerDashboard = ({ userQuery }: ManagerDashboardProps) => {
   // Easily identify parts of the page that are unfinished still.
   const showUnfinishedPieces = true;
 
+  const talentRequestMetaData: AccordionMetaData[] = [
+    {
+      key: "request-history-key",
+      type: "link",
+      // This link is missing an href since the page doesn't exist yet.  Probably #10982
+      children: (
+        <Link color="primary" href="#">
+          {intl.formatMessage({
+            defaultMessage: "All requests",
+            id: "mJKi1Y",
+            description: "Link to a page to view all the requests",
+          })}
+        </Link>
+      ),
+    },
+    {
+      key: "new-request-key",
+      type: "link",
+      children: (
+        <Link color="primary" href={paths.search()}>
+          {intl.formatMessage({
+            defaultMessage: "New request",
+            id: "BGQaDq",
+            description: "Link to a page to start a new request",
+          })}
+        </Link>
+      ),
+    },
+  ];
+
   return (
     <>
       <SEO
@@ -140,37 +171,7 @@ const ManagerDashboard = ({ userQuery }: ManagerDashboardProps) => {
                           },
                         )}
                       </Accordion.Trigger>
-                      <div
-                        // match accordion padding
-                        data-h2-padding="base(0 x1 x0.75 x1.3)"
-                        data-h2-display="base(flex)"
-                        data-h2-gap="base(x0.5)"
-                      >
-                        {showUnfinishedPieces ? (
-                          // This link is missing an href since the page doesn't exist yet.  Probably #10982
-                          <>
-                            <Link color="primary" href="#">
-                              {intl.formatMessage({
-                                defaultMessage: "All requests",
-                                id: "mJKi1Y",
-                                description:
-                                  "Link to a page to view all the requests",
-                              })}
-                            </Link>
-                            &bull;
-                          </>
-                        ) : (
-                          <></>
-                        )}
-                        <Link color="primary" href={paths.search()}>
-                          {intl.formatMessage({
-                            defaultMessage: "New request",
-                            id: "BGQaDq",
-                            description:
-                              "Link to a page to start a new request",
-                          })}
-                        </Link>
-                      </div>
+                      <Accordion.MetaData metadata={talentRequestMetaData} />
                       <Accordion.Content>
                         <div
                           data-h2-display="base(flex)"

packages/ui/src/components/Accordion/Accordion.stories.tsx

@@ -7,8 +7,9 @@ import { ComponentPropsWithoutRef, useState } from "react";
 
 import { allModes } from "@gc-digital-talent/storybook-helpers";
 
-import Accordion from "./Accordion";
+import Accordion, { AccordionMetaData } from "./Accordion";
 import Button from "../Button";
+import Link from "../Link";
 
 const { Item, Trigger, Content, Root } = Accordion;
 
@@ -17,6 +18,38 @@ const Text = () => {
   return <p>{faker.lorem.sentences(5)}</p>;
 };
 
+export const metaData: AccordionMetaData[] = [
+  {
+    key: "button-id",
+    type: "button",
+    children: (
+      <Button mode="text" color="primary">
+        Button label
+      </Button>
+    ),
+  },
+  {
+    key: "link-id",
+    type: "link",
+    children: (
+      <Link mode="text" color="primary">
+        Link label
+      </Link>
+    ),
+  },
+  {
+    key: "chip-id",
+    type: "chip",
+    color: "secondary",
+    children: "Chip label",
+  },
+  {
+    key: "text-2-id",
+    type: "text",
+    children: "Text",
+  },
+];
+
 export default {
   component: Accordion.Root,
   subcomponents: {
@@ -66,7 +99,15 @@ const Template: StoryFn<typeof Accordion.Root> = ({ children, ...rest }) => {
         <Accordion.Content>{children}</Accordion.Content>
       </Accordion.Item>
       <Accordion.Item value="three">
-        <Accordion.Trigger>Accordion Three</Accordion.Trigger>
+        <Accordion.Trigger subtitle="Subtitle">
+          Accordion Three
+        </Accordion.Trigger>
+        <Accordion.MetaData metadata={metaData} />
+        <Accordion.Content>{children}</Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="four">
+        <Accordion.Trigger>Accordion Four</Accordion.Trigger>
+        <Accordion.MetaData metadata={metaData} />
         <Accordion.Content>{children}</Accordion.Content>
       </Accordion.Item>
     </Accordion.Root>

packages/ui/src/components/Accordion/Accordion.test.tsx

@@ -10,6 +10,7 @@ import { ComponentPropsWithoutRef } from "react";
 import { renderWithProviders, axeTest } from "@gc-digital-talent/jest-helpers";
 
 import Accordion from "./Accordion";
+import { metaData } from "./Accordion.stories";
 
 type AccordionRootPrimitivePropsWithoutRef = ComponentPropsWithoutRef<
   typeof Accordion.Root
@@ -30,6 +31,7 @@ const DefaultChildren = () => (
   <>
     <Accordion.Item value="one">
       <Accordion.Trigger>Accordion One</Accordion.Trigger>
+      <Accordion.MetaData metadata={metaData} />
       <Accordion.Content>
         <Text />
       </Accordion.Content>
@@ -62,7 +64,7 @@ describe("Accordion", () => {
     await axeTest(container);
   });
 
-  it("should should only open one when single", async () => {
+  it("should only open one when single", async () => {
     renderAccordion({
       type: "single",
       children: <DefaultChildren />,

packages/ui/src/components/Accordion/Accordion.tsx

@@ -10,8 +10,9 @@ import {
   ReactNode,
 } from "react";
 
-import type { HeadingRank, IconType } from "../../types";
+import type { Color, HeadingRank, IconType } from "../../types";
 import { AccordionMode } from "./types";
+import Chip from "../Chip/Chip";
 
 type RootProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
   mode?: AccordionMode;
@@ -34,13 +35,14 @@ const Root = forwardRef<ElementRef<typeof AccordionPrimitive.Root>, RootProps>(
     let paddingStyles: Record<string, string> =
       mode === "card"
         ? {
-            "data-h2-padding": `
+            "data-h2-margin": `
               base:selectors[>.Accordion__Item > .Accordion__Header .Accordion__Trigger](x1)
+              base:selectors[>.Accordion__Item > .Accordion__MetaData](-x1 0 x.5 x2.5)
               base:selectors[>.Accordion__Item > .Accordion__Content](0 x1 x1 x2.3)
           `,
           }
         : {
-            "data-h2-padding": `
+            "data-h2-margin": `
               base:selectors[>.Accordion__Item > .Accordion__Header .Accordion__Trigger](x.5 0)
               base:selectors[>.Accordion__Item > .Accordion__Content](0 x1 x1 x1.3)
           `,
@@ -61,13 +63,14 @@ const Root = forwardRef<ElementRef<typeof AccordionPrimitive.Root>, RootProps>(
       paddingStyles =
         mode === "card"
           ? {
-              "data-h2-padding": `
+              "data-h2-margin": `
         base:selectors[>.Accordion__Item > .Accordion__Header .Accordion__Trigger](x1)
+        base:selectors[>.Accordion__Item > .Accordion__MetaData](-x1 0 x.5 x2.5)
         base:selectors[>.Accordion__Item > .Accordion__Content](0 x1 x1 x2.25)
           `,
             }
           : {
-              "data-h2-padding": `
+              "data-h2-margin": `
               base:selectors[>.Accordion__Item > .Accordion__Header .Accordion__Trigger](x.5 0)
               base:selectors[>.Accordion__Item > .Accordion__Content](0 x1 x1 x1.25)
           `,
@@ -89,13 +92,14 @@ const Root = forwardRef<ElementRef<typeof AccordionPrimitive.Root>, RootProps>(
       paddingStyles =
         mode === "card"
           ? {
-              "data-h2-padding": `
+              "data-h2-margin": `
         base:selectors[>.Accordion__Item > .Accordion__Header .Accordion__Trigger](x1)
+        base:selectors[>.Accordion__Item > .Accordion__MetaData](-x1 0 x.5 x2.7)
         base:selectors[>.Accordion__Item > .Accordion__Content](0 x1 x1 x2.45)
       `,
             }
           : {
-              "data-h2-padding": `
+              "data-h2-margin": `
           base:selectors[>.Accordion__Item > .Accordion__Header .Accordion__Trigger](x.5 0)
           base:selectors[>.Accordion__Item > .Accordion__Content](0 x1 x1 x1.45)
       `,
@@ -244,6 +248,57 @@ const Trigger = forwardRef<
   },
 );
 
+export interface AccordionMetaData {
+  children: ReactNode;
+  color?: Color;
+  key: string;
+  type: "button" | "link" | "text" | "chip";
+}
+interface AccordionMetaDataProps {
+  metadata: AccordionMetaData[];
+}
+
+const MetaData = ({ metadata }: AccordionMetaDataProps) => {
+  return (
+    <div
+      className="Accordion__MetaData"
+      data-h2-display="base(flex) p-tablet:children[::after](inline-block)"
+      data-h2-flex-direction="base(column) p-tablet(row)"
+      data-h2-flex-wrap="base(nowrap) p-tablet(wrap)"
+      data-h2-align-items="base(flex-start) p-tablet(center)"
+      data-h2-gap="base(x.5 0)"
+      data-h2-content='p-tablet:children[:not(:last-child)::after]("•")'
+      data-h2-text-decoration="p-tablet:children[::after](none)"
+      data-h2-color="p-tablet:children[::after](gray.darker)"
+      data-h2-margin="base(-x.25 0 x.5 x1.5) p-tablet:children[:not(:last-child)::after](0 x.5)"
+      data-h2-font-size="base(caption)"
+    >
+      {metadata.map(({ type, color, children }) => {
+        switch (type) {
+          case "text":
+            return <span data-h2-color="base(gray.darker)">{children}</span>;
+          case "chip":
+            return (
+              <span>
+                <Chip
+                  color={color || "primary"}
+                  data-h2-font-weight="base(400)"
+                >
+                  {children}
+                </Chip>
+              </span>
+            );
+          case "button":
+          case "link":
+            return <>{children}</>;
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+};
+
 const Content = forwardRef<
   ElementRef<typeof AccordionPrimitive.Content>,
   ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
@@ -282,6 +337,11 @@ const Accordion = {
    * @see [Documentation](https://www.radix-ui.com/docs/primitives/components/accordion#trigger)
    */
   Trigger,
+  /**
+   * @name MetaData
+   * @desc Adds metadata below trigger.
+   */
+  MetaData,
   /**
    * @name Content
    * @desc Contains the collapsible content for an item.

packages/ui/src/components/Accordion/index.ts

@@ -1,3 +1,4 @@
-import Accordion from "./Accordion";
+import Accordion, { AccordionMetaData } from "./Accordion";
 
 export default Accordion;
+export type { AccordionMetaData };

packages/ui/src/index.tsx

@@ -7,7 +7,7 @@ import {
   IconProps,
   ButtonLinkMode,
 } from "./types";
-import Accordion from "./components/Accordion";
+import Accordion, { type AccordionMetaData } from "./components/Accordion";
 import Alert, { type AlertProps } from "./components/Alert";
 import AlertDialog from "./components/AlertDialog";
 import Announcer, { useAnnouncer } from "./components/Announcer/Announcer";
@@ -99,6 +99,7 @@ import TaskCard from "./components/TaskCard";
 export type {
   Color,
   HeadingRank,
+  AccordionMetaData,
   AlertProps,
   BreadcrumbsProps,
   ButtonProps,