feat: add page-header package

.codesandbox/ci.json

@@ -66,6 +66,7 @@
     "/packages/paste-core/components/modal",
     "/packages/paste-core/primitives/modal-dialog",
     "/packages/paste-core/primitives/non-modal-dialog",
+    "/packages/paste-core/components/page-header",
     "/packages/paste-core/components/pagination",
     "/packages/paste-core/components/paragraph",
     "/packages/paste-core/components/popover",

packages/paste-codemods/tools/.cache/mappings.json

@@ -166,6 +166,8 @@
   "ModalFooterActions": "@twilio-paste/core/modal",
   "ModalHeader": "@twilio-paste/core/modal",
   "ModalHeading": "@twilio-paste/core/modal",
+  "PageHeader": "@twilio-paste/core/page-header",
+  "PageHeaderNavigation": "@twilio-paste/core/page-header",
   "Pagination": "@twilio-paste/core/pagination",
   "PaginationArrow": "@twilio-paste/core/pagination",
   "PaginationEllipsis": "@twilio-paste/core/pagination",

packages/paste-core/components/page-header/__tests__/index.spec.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+
+import {PageHeader} from '../src';
+
+describe('PageHeader', () => {
+  it('should render', () => {
+    const {getByText} = render(<PageHeader>test</PageHeader>);
+    expect(getByText('test')).toBeDefined();
+  });
+});

packages/paste-core/components/page-header/build.js

@@ -0,0 +1,3 @@
+const {build} = require('../../../../tools/build/esbuild');
+
+build(require('./package.json'));

packages/paste-core/components/page-header/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@twilio-paste/page-header",
+  "version": "0.0.0",
+  "category": "layout",
+  "status": "production",
+  "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",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn clean && NODE_ENV=production node build.js && tsc",
+    "build:js": "NODE_ENV=development node build.js",
+    "build:typedocs": "tsx ../../../../tools/build/generate-type-docs",
+    "clean": "rm -rf ./dist",
+    "tsc": "tsc"
+  },
+  "peerDependencies": {
+    "@twilio-paste/animation-library": "^2.0.0",
+    "@twilio-paste/box": "^10.2.0",
+    "@twilio-paste/color-contrast-utils": "^5.0.0",
+    "@twilio-paste/customization": "^8.1.1",
+    "@twilio-paste/design-tokens": "^10.3.0",
+    "@twilio-paste/heading": "^11.1.1",
+    "@twilio-paste/style-props": "^9.1.1",
+    "@twilio-paste/styling-library": "^3.0.0",
+    "@twilio-paste/theme": "^11.0.1",
+    "@twilio-paste/types": "^6.0.0",
+    "@types/react": "^16.8.6 || ^17.0.2 || ^18.0.27",
+    "@types/react-dom": "^16.8.6 || ^17.0.2 || ^18.0.10",
+    "react": "^16.8.6 || ^17.0.2 || ^18.0.0",
+    "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@twilio-paste/animation-library": "^2.0.0",
+    "@twilio-paste/box": "^10.2.0",
+    "@twilio-paste/color-contrast-utils": "^5.0.0",
+    "@twilio-paste/customization": "^8.1.1",
+    "@twilio-paste/design-tokens": "^10.3.0",
+    "@twilio-paste/heading": "^11.1.1",
+    "@twilio-paste/style-props": "^9.1.1",
+    "@twilio-paste/styling-library": "^3.0.0",
+    "@twilio-paste/theme": "^11.0.1",
+    "@twilio-paste/types": "^6.0.0",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsx": "^3.12.10",
+    "typescript": "^4.9.4"
+  }
+}

packages/paste-core/components/page-header/src/PageHeader.tsx

@@ -0,0 +1,44 @@
+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 PageHeaderProps extends HTMLPasteProps<"div"> {
+  children?: React.ReactNode;
+  /**
+   * Variant of the Page Header
+   * @default 'default'
+   * @type {'default' | 'compact''}
+   * @memberof PageHeaderProps
+   */
+  variant?: "default" | "compact";
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   * @default 'PAGE_HEADER'
+   * @type {BoxProps['element']}
+   * @memberof PageHeaderProps
+   */
+  element?: BoxProps["element"];
+}
+
+const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
+  ({ element = "PAGE_HEADER", variant, children, ...props }, ref) => {
+    return (
+      <Box
+        {...safelySpreadBoxProps(props)}
+        ref={ref}
+        element={element}
+        display="grid"
+        gridTemplateRows="auto auto auto"
+        gridTemplateAreas='"context" "details" "in_page_navigation"'
+        maxWidth="size90"
+      >
+        {children}
+      </Box>
+    );
+  },
+);
+
+PageHeader.displayName = "PageHeader";
+
+export { PageHeader };

packages/paste-core/components/page-header/src/PageHeaderActions.tsx

@@ -0,0 +1,29 @@
+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 PageHeaderActionsProps extends HTMLPasteProps<"div"> {
+  children?: React.ReactNode;
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   * @default 'PAGE_HEADER_ACTIONS'
+   * @type {BoxProps['element']}
+   * @memberof PageHeaderActionsProps
+   */
+  element?: BoxProps["element"];
+}
+
+const PageHeaderActions = React.forwardRef<HTMLDivElement, PageHeaderActionsProps>(
+  ({ element = "PAGE_HEADER_ACTIONS", children, ...props }, ref) => {
+    return (
+      <Box {...safelySpreadBoxProps(props)} ref={ref} element={element} gridArea="actions" justifySelf="end">
+        {children}
+      </Box>
+    );
+  },
+);
+
+PageHeaderActions.displayName = "PageHeaderActions";
+
+export { PageHeaderActions };

packages/paste-core/components/page-header/src/PageHeaderContext.tsx

@@ -0,0 +1,29 @@
+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 PageHeaderContextProps extends HTMLPasteProps<"div"> {
+  children?: React.ReactNode;
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   * @default 'PAGE_HEADER_CONTEXT'
+   * @type {BoxProps['element']}
+   * @memberof PageHeaderContextProps
+   */
+  element?: BoxProps["element"];
+}
+
+const PageHeaderContext = React.forwardRef<HTMLDivElement, PageHeaderContextProps>(
+  ({ element = "PAGE_HEADER_CONTEXT", children, ...props }, ref) => {
+    return (
+      <Box {...safelySpreadBoxProps(props)} ref={ref} element={element} gridArea="context" marginBottom="space40">
+        {children}
+      </Box>
+    );
+  },
+);
+
+PageHeaderContext.displayName = "PageHeaderContext";
+
+export { PageHeaderContext };

packages/paste-core/components/page-header/src/PageHeaderDetailText.tsx

@@ -0,0 +1,29 @@
+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 PageHeaderDetailTextProps extends HTMLPasteProps<"div"> {
+  children?: React.ReactNode;
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   * @default 'PAGE_HEADER_DETAIL_TEXT'
+   * @type {BoxProps['element']}
+   * @memberof PageHeaderDetailTextProps
+   */
+  element?: BoxProps["element"];
+}
+
+const PageHeaderDetailText = React.forwardRef<HTMLDivElement, PageHeaderDetailTextProps>(
+  ({ element = "PAGE_HEADER_DETAIL_TEXT", children, ...props }, ref) => {
+    return (
+      <Box {...safelySpreadBoxProps(props)} ref={ref} element={element} marginBottom="space30">
+        {children}
+      </Box>
+    );
+  },
+);
+
+PageHeaderDetailText.displayName = "PageHeaderDetailText";
+
+export { PageHeaderDetailText };

packages/paste-core/components/page-header/src/PageHeaderDetails.tsx

@@ -0,0 +1,29 @@
+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 PageHeaderDetailsProps extends HTMLPasteProps<"div"> {
+  children?: React.ReactNode;
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   * @default 'PAGE_HEADER_DETAILS'
+   * @type {BoxProps['element']}
+   * @memberof PageHeaderDetailsProps
+   */
+  element?: BoxProps["element"];
+}
+
+const PageHeaderDetails = React.forwardRef<HTMLDivElement, PageHeaderDetailsProps>(
+  ({ element = "PAGE_HEADER_DETAILS", children, ...props }, ref) => {
+    return (
+      <Box {...safelySpreadBoxProps(props)} ref={ref} element={element} gridArea="details" marginBottom="space130">
+        {children}
+      </Box>
+    );
+  },
+);
+
+PageHeaderDetails.displayName = "PageHeaderDetails";
+
+export { PageHeaderDetails };

packages/paste-core/components/page-header/src/PageHeaderHeading.tsx

@@ -0,0 +1,49 @@
+import type { BoxProps } from "@twilio-paste/box";
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import { Heading } from "@twilio-paste/heading";
+import type { HeadingVariants, asTags as AsTags } from "@twilio-paste/heading";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import * as React from "react";
+
+export interface PageHeaderHeadingProps extends HTMLPasteProps<"div"> {
+  children?: React.ReactNode;
+  /**
+   * The HTML element to render.
+   *
+   * @type {AsTags}
+   * @memberof HeadingProps
+   */
+  as?: AsTags;
+  /**
+   * Style variant to apply to the heading, affects the visual appearance of the heading.
+   *
+   * @default 'heading20'
+   * @type {HeadingVariants}
+   * @memberof HeadingProps
+   */
+  variant?: HeadingVariants;
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   * @default 'PAGE_HEADER_HEADING'
+   * @type {BoxProps['element']}
+   * @memberof PageHeaderHeadingProps
+   */
+  element?: BoxProps["element"];
+}
+
+// TODO: in the middle of making PageHeaderTitle a grid with 4 columns, naming each one, getting the spacing right, turning this into a box with a heading inside of it
+const PageHeaderHeading = React.forwardRef<HTMLDivElement, PageHeaderHeadingProps>(
+  ({ element = "PAGE_HEADER_HEADING", children, as = "h1", variant = "heading10", ...props }, ref) => {
+    return (
+      <Box {...safelySpreadBoxProps(props)} element={`${element}_WRAPPER`} gridArea="heading">
+        <Heading ref={ref} element={element} as={as} variant={variant} marginBottom="space0">
+          {children}
+        </Heading>
+      </Box>
+    );
+  },
+);
+
+PageHeaderHeading.displayName = "PageHeaderHeading";
+
+export { PageHeaderHeading };

packages/paste-core/components/page-header/src/PageHeaderInPageNavigation.tsx

@@ -0,0 +1,29 @@
+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 PageHeaderInPageNavigationProps extends HTMLPasteProps<"div"> {
+  children?: React.ReactNode;
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   * @default 'PAGE_HEADER_IN_PAGE_NAVIGATION'
+   * @type {BoxProps['element']}
+   * @memberof PageHeaderInPageNavigationProps
+   */
+  element?: BoxProps["element"];
+}
+
+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">
+        {children}
+      </Box>
+    );
+  },
+);
+
+PageHeaderInPageNavigation.displayName = "PageHeaderInPageNavigation";
+
+export { PageHeaderInPageNavigation };

packages/paste-core/components/page-header/src/PageHeaderMeta.tsx

@@ -0,0 +1,29 @@
+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 PageHeaderMetaProps extends HTMLPasteProps<"div"> {
+  children?: React.ReactNode;
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   * @default 'PAGE_HEADER_META'
+   * @type {BoxProps['element']}
+   * @memberof PageHeaderMetaProps
+   */
+  element?: BoxProps["element"];
+}
+
+const PageHeaderMeta = React.forwardRef<HTMLDivElement, PageHeaderMetaProps>(
+  ({ element = "PAGE_HEADER_META", children, ...props }, ref) => {
+    return (
+      <Box {...safelySpreadBoxProps(props)} ref={ref} element={element} gridArea="meta">
+        {children}
+      </Box>
+    );
+  },
+);
+
+PageHeaderMeta.displayName = "PageHeaderMeta";
+
+export { PageHeaderMeta };

packages/paste-core/components/page-header/src/PageHeaderParagraph.tsx

@@ -0,0 +1,29 @@
+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 PageHeaderParagraphProps extends HTMLPasteProps<"div"> {
+  children?: React.ReactNode;
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   * @default 'PAGE_HEADER_PARAGRAPH'
+   * @type {BoxProps['element']}
+   * @memberof PageHeaderParagraphProps
+   */
+  element?: BoxProps["element"];
+}
+
+const PageHeaderParagraph = React.forwardRef<HTMLDivElement, PageHeaderParagraphProps>(
+  ({ element = "PAGE_HEADER_PARAGRAPH", children, ...props }, ref) => {
+    return (
+      <Box {...safelySpreadBoxProps(props)} ref={ref} element={element} marginTop="space50">
+        {children}
+      </Box>
+    );
+  },
+);
+
+PageHeaderParagraph.displayName = "PageHeaderParagraph";
+
+export { PageHeaderParagraph };