feat(page-header): add PageHeaderSeparator, also use page header on d…

…ocs site (#3731) * chore: update docs site page headers round 1 * feat(page-header): add PageHeaderSeparator * chore: page header docs site updates round 2 * chore: page header replace docs updates round 3 * chore: add pageHeaderSeparator to docs and megan updates * chore: test fix and typedocs * chore: changeset * chore: sarah feedback * chore: sarah feedback 2 * chore: fix page header capitalization
twilio-labs · Jan 25, 2024 · e0e69e7 · e0e69e7
1 parent ce91032
commit e0e69e7
Show file tree

Hide file tree

Showing 88 changed files with 2,245 additions and 486 deletions.
diff --git a/.changeset/few-needles-drop.md b/.changeset/few-needles-drop.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/page-header": minor
+"@twilio-paste/core": minor
+---
+
+[Page Header] Create new PageHeaderSeparator component as part of the Page Header package
diff --git a/.changeset/hip-humans-ring.md b/.changeset/hip-humans-ring.md
@@ -0,0 +1,5 @@
+---
+"@twilio-paste/codemods": patch
+---
+
+[codemods] add new export to page-header package: PageHeaderSeparator
diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json
@@ -175,6 +175,7 @@
   "PageHeaderMeta": "@twilio-paste/core/page-header",
   "PageHeaderParagraph": "@twilio-paste/core/page-header",
   "PageHeaderPrefix": "@twilio-paste/core/page-header",
+  "PageHeaderSeparator": "@twilio-paste/core/page-header",
   "PageHeaderSetting": "@twilio-paste/core/page-header",
   "Pagination": "@twilio-paste/core/pagination",
   "PaginationArrow": "@twilio-paste/core/pagination",

diff --git a/packages/paste-core/components/page-header/package.json b/packages/paste-core/components/page-header/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "category": "layout",
   "status": "production",
-  "description": "Page header is a layout component that wraps all top level components on a page.",
+  "description": "Page Header is a layout component that wraps all top-level components on a page.",
   "author": "Twilio Inc.",
   "license": "MIT",
   "main:dev": "src/index.tsx",

diff --git a/packages/paste-core/components/page-header/src/PageHeader.tsx b/packages/paste-core/components/page-header/src/PageHeader.tsx
@@ -33,7 +33,7 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
           element={element}
           display="grid"
           gridTemplateRows="auto auto auto"
-          gridTemplateAreas='"setting" "details" "in_page_navigation"'
+          gridTemplateAreas='"setting" "details" "content_barrier"'
         >
           {children}
         </Box>

diff --git a/packages/paste-core/components/page-header/src/PageHeaderInPageNavigation.tsx b/packages/paste-core/components/page-header/src/PageHeaderInPageNavigation.tsx
@@ -17,7 +17,7 @@ export interface PageHeaderInPageNavigationProps extends HTMLPasteProps<"div"> {
 const PageHeaderInPageNavigation = React.forwardRef<HTMLDivElement, PageHeaderInPageNavigationProps>(
   ({ element = "PAGE_HEADER_IN_PAGE_NAVIGATION", children, ...props }, ref) => {
     return (
-      <Box {...safelySpreadBoxProps(props)} ref={ref} element={element} gridArea="in_page_navigation">
+      <Box {...safelySpreadBoxProps(props)} ref={ref} element={element} gridArea="content_barrier">
         {children}
       </Box>
     );

diff --git a/packages/paste-core/components/page-header/src/PageHeaderSeparator.tsx b/packages/paste-core/components/page-header/src/PageHeaderSeparator.tsx
@@ -0,0 +1,35 @@
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { BoxProps } from "@twilio-paste/box";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import * as React from "react";
+
+export interface PageHeaderSeparatorProps extends HTMLPasteProps<"div"> {
+  children?: React.ReactNode;
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   * @default 'PAGE_HEADER_SEPARATOR'
+   * @type {BoxProps['element']}
+   * @memberof PageHeaderSeparatorProps
+   */
+  element?: BoxProps["element"];
+}
+
+const PageHeaderSeparator = React.forwardRef<HTMLDivElement, PageHeaderSeparatorProps>(
+  ({ element = "PAGE_HEADER_SEPARATOR", children, ...props }, ref) => {
+    return (
+      <Box
+        {...safelySpreadBoxProps(props)}
+        ref={ref}
+        element={element}
+        gridArea="content_barrier"
+        marginBottom="space60"
+      >
+        {children}
+      </Box>
+    );
+  },
+);
+
+PageHeaderSeparator.displayName = "PageHeaderSeparator";
+
+export { PageHeaderSeparator };
diff --git a/packages/paste-core/components/page-header/src/index.tsx b/packages/paste-core/components/page-header/src/index.tsx
@@ -18,3 +18,5 @@ export { PageHeaderActions } from "./PageHeaderActions";
 export type { PageHeaderActionsProps } from "./PageHeaderActions";
 export { PageHeaderInPageNavigation } from "./PageHeaderInPageNavigation";
 export type { PageHeaderInPageNavigationProps } from "./PageHeaderInPageNavigation";
+export { PageHeaderSeparator } from "./PageHeaderSeparator";
+export type { PageHeaderSeparatorProps } from "./PageHeaderSeparator";
diff --git a/packages/paste-core/components/page-header/stories/index.stories.tsx b/packages/paste-core/components/page-header/stories/index.stories.tsx
@@ -18,6 +18,7 @@ import {
   ProgressStepSeparator,
   ProgressSteps,
 } from "@twilio-paste/progress-steps";
+import { Separator } from "@twilio-paste/separator";
 import { StatusBadge } from "@twilio-paste/status";
 import { useTheme } from "@twilio-paste/theme";
 import * as React from "react";
@@ -32,6 +33,7 @@ import {
   PageHeaderMeta,
   PageHeaderParagraph,
   PageHeaderPrefix,
+  PageHeaderSeparator,
   PageHeaderSetting,
 } from "../src";
 
@@ -84,6 +86,81 @@ export const Default = (): React.ReactElement => {
   );
 };
 
+export const SeparatorVersusNav = (): React.ReactElement => {
+  return (
+    <Box display="flex" columnGap="space200">
+      <Box width="size70" backgroundColor="colorBackground" height="min-content">
+        <PageHeader size="default">
+          <PageHeaderSetting>
+            <Breadcrumb>
+              <BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
+              <BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
+            </Breadcrumb>
+          </PageHeaderSetting>
+          <PageHeaderDetails>
+            <PageHeaderKeyword>Wizard title</PageHeaderKeyword>
+            <PageHeaderPrefix>
+              <Avatar size="sizeIcon90" name="Avatar Name" />
+            </PageHeaderPrefix>
+            <PageHeaderHeading>Page title</PageHeaderHeading>
+            <PageHeaderActions>
+              <Button variant="secondary">Action</Button>
+            </PageHeaderActions>
+            <PageHeaderMeta>
+              <Badge variant="success" as="span">
+                Badge
+              </Badge>
+              Meta
+              <Anchor href="#">Meta</Anchor>
+            </PageHeaderMeta>
+            <PageHeaderParagraph>Paragraph text</PageHeaderParagraph>
+          </PageHeaderDetails>
+          <PageHeaderSeparator>
+            <Separator orientation="horizontal" />
+          </PageHeaderSeparator>
+        </PageHeader>
+      </Box>
+      <Box width="size70" backgroundColor="colorBackground" height="min-content">
+        <PageHeader size="default">
+          <PageHeaderSetting>
+            <Breadcrumb>
+              <BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
+              <BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
+            </Breadcrumb>
+          </PageHeaderSetting>
+          <PageHeaderDetails>
+            <PageHeaderKeyword>Wizard title</PageHeaderKeyword>
+            <PageHeaderPrefix>
+              <Avatar size="sizeIcon90" name="Avatar Name" />
+            </PageHeaderPrefix>
+            <PageHeaderHeading>Page title</PageHeaderHeading>
+            <PageHeaderActions>
+              <Button variant="secondary">Action</Button>
+            </PageHeaderActions>
+            <PageHeaderMeta>
+              <Badge variant="success" as="span">
+                Badge
+              </Badge>
+              Meta
+              <Anchor href="#">Meta</Anchor>
+            </PageHeaderMeta>
+            <PageHeaderParagraph>Paragraph text</PageHeaderParagraph>
+          </PageHeaderDetails>
+          <PageHeaderInPageNavigation>
+            <InPageNavigation aria-label="get started">
+              <InPageNavigationItem href="#" currentPage>
+                Label
+              </InPageNavigationItem>
+              <InPageNavigationItem href="#">Label</InPageNavigationItem>
+              <InPageNavigationItem href="#">Label</InPageNavigationItem>
+            </InPageNavigation>
+          </PageHeaderInPageNavigation>
+        </PageHeader>
+      </Box>
+    </Box>
+  );
+};
+
 export const Compact = (): React.ReactElement => {
   return (
     <Box maxWidth="size50">