Updated post analytics page

apps/admin-x-design-system/src/components/ui/breadcrumb.stories.tsx

@@ -0,0 +1,39 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator
+} from './breadcrumb';
+
+const meta = {
+    title: 'GHDS 1.0 / Breadcrumb',
+    component: Breadcrumb,
+    tags: ['autodocs']
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {
+    args: {
+        children: (
+            <BreadcrumbList>
+                <BreadcrumbItem>
+                    <BreadcrumbLink href="/">Home</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                    <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+                </BreadcrumbItem>
+            </BreadcrumbList>
+        )
+    }
+};

apps/admin-x-design-system/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import {Slot} from '@radix-ui/react-slot';
+import {ChevronRight, MoreHorizontal} from 'lucide-react';
+
+import {cn} from '@/lib/utils';
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<'nav'> & {
+    separator?: React.ReactNode
+  }
+>(({...props}, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = 'Breadcrumb';
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<'ol'>
+>(({className, ...props}, ref) => (
+    <ol
+        ref={ref}
+        className={cn(
+            'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+            className
+        )}
+        {...props}
+    />
+));
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<'li'>
+>(({className, ...props}, ref) => (
+    <li
+        ref={ref}
+        className={cn('inline-flex items-center gap-1.5', className)}
+        {...props}
+    />
+));
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean
+  }
+>(({asChild, className, ...props}, ref) => {
+    const Comp = asChild ? Slot : 'a';
+
+    return (
+        <Comp
+            ref={ref}
+            className={cn('transition-colors hover:text-foreground', className)}
+            {...props}
+        />
+    );
+});
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<'span'>
+>(({className, ...props}, ref) => (
+    <span
+        ref={ref}
+        aria-current="page"
+        aria-disabled="true"
+        className={cn('font-normal text-foreground', className)}
+        role="link"
+        {...props}
+    />
+));
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+const BreadcrumbSeparator = ({
+    children,
+    className,
+    ...props
+}: React.ComponentProps<'li'>) => (
+    <li
+        aria-hidden="true"
+        className={cn('[&>svg]:w-3.5 [&>svg]:h-3.5', className)}
+        role="presentation"
+        {...props}
+    >
+        {children ?? <ChevronRight />}
+    </li>
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+const BreadcrumbEllipsis = ({
+    className,
+    ...props
+}: React.ComponentProps<'span'>) => (
+    <span
+        aria-hidden="true"
+        className={cn('flex h-9 w-9 items-center justify-center', className)}
+        role="presentation"
+        {...props}
+    >
+        <MoreHorizontal className="h-4 w-4" />
+        <span className="sr-only">More</span>
+    </span>
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
+
+export {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbEllipsis
+};

apps/admin-x-design-system/src/index.ts

@@ -163,7 +163,15 @@ export type {StripeButtonProps} from './settings/StripeButton';
  * Ghost Design System 1.0
  */
 export {Heading as GHDSHeading, headingVariants} from './components/typography/heading';
-export type {HeadingProps as GHDSHeadingProps} from './components/typography/heading';
+export {
+    Breadcrumb as GHDSBreadcrumb,
+    BreadcrumbItem as GHDSBreadcrumbItem,
+    BreadcrumbLink as GHDSBreadcrumbLink,
+    BreadcrumbList as GHDSBreadcrumbList,
+    BreadcrumbPage as GHDSBreadcrumbPage,
+    BreadcrumbSeparator as GHDSBreadcrumbSeparator
+} from './components/ui/breadcrumb';
+export {Button as GHDSButton} from './components/ui/button';
 
 export {default as useGlobalDirtyState} from './hooks/useGlobalDirtyState';
 export {usePagination} from './hooks/usePagination';

apps/post-analytics-spike/dist/modals-227cf2ca.mjs

@@ -1,4 +1,4 @@
-import { f as $, j as e, S as N0, c as o, R as U, a as t, u as K, b as l0, d as t0, e as E, N as P, g as g0 } from "./index-8d345a23.mjs";
+import { f as $, j as e, S as N0, c as o, R as U, a as t, u as K, b as l0, d as t0, e as E, N as P, g as g0 } from "./index-aeb0d0b2.mjs";
 var a0 = [
   "a",
   "button",
@@ -1078,4 +1078,4 @@ const lo = "bg-[rgba(98,109,121,0.2)] backdrop-blur-[3px]", o0 = ({
 export {
   Do as default
 };
-//# sourceMappingURL=modals-890e6b55.mjs.map
+//# sourceMappingURL=modals-227cf2ca.mjs.map

apps/post-analytics-spike/src/PostAnalytics.tsx

@@ -1,9 +1,31 @@
-import { GHDSHeading } from "@tryghost/admin-x-design-system";
+import { GHDSBreadcrumb, GHDSBreadcrumbItem, GHDSBreadcrumbList, GHDSBreadcrumbLink, GHDSHeading, GHDSBreadcrumbPage, GHDSBreadcrumbSeparator, GHDSButton } from "@tryghost/admin-x-design-system";
 
 const PostAnalytics = () => {
     return (
-        <div>
-            <GHDSHeading size={1}>Post analytics — Spike Lee</GHDSHeading>
+        // The div below should be converted into an app container component in the design system
+        <div className="p-8 pt-9">
+
+            {/* Should this `header` become a component? DRY */}
+            <header>
+                <GHDSBreadcrumb>
+                    <GHDSBreadcrumbList>
+                        <GHDSBreadcrumbItem>
+                            <GHDSBreadcrumbLink href="/posts/">Posts</GHDSBreadcrumbLink>
+                        </GHDSBreadcrumbItem>
+                        <GHDSBreadcrumbSeparator />
+                        <GHDSBreadcrumbPage>
+                            Analytics
+                        </GHDSBreadcrumbPage>
+                    </GHDSBreadcrumbList>
+                </GHDSBreadcrumb>
+                <div className="flex items-start justify-between">
+                    <GHDSHeading size={1}>Post analytics</GHDSHeading>
+                    <GHDSButton size={'sm'} className="mt-1">It is something!</GHDSButton>
+                </div>
+            </header>
+            <div className="mt-8 border rounded-lg border-grey-300 min-h-[500px] flex items-center justify-center text-grey-500">
+                TK
+            </div>
         </div>
     );
 }