From b110bc060a4fc4d7a55d575d0876d8cc4051d512 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Thu, 7 Dec 2023 10:02:06 -0500 Subject: [PATCH] feat: add page-header package --- .codesandbox/ci.json | 1 + .../paste-codemods/tools/.cache/mappings.json | 2 + .../page-header/__tests__/index.spec.tsx | 11 +++ .../components/page-header/build.js | 3 + .../components/page-header/package.json | 61 ++++++++++++++ .../components/page-header/src/PageHeader.tsx | 44 ++++++++++ .../page-header/src/PageHeaderActions.tsx | 29 +++++++ .../page-header/src/PageHeaderContext.tsx | 29 +++++++ .../page-header/src/PageHeaderDetailText.tsx | 29 +++++++ .../page-header/src/PageHeaderDetails.tsx | 29 +++++++ .../page-header/src/PageHeaderHeading.tsx | 49 +++++++++++ .../src/PageHeaderInPageNavigation.tsx | 29 +++++++ .../page-header/src/PageHeaderMeta.tsx | 29 +++++++ .../page-header/src/PageHeaderParagraph.tsx | 29 +++++++ .../page-header/src/PageHeaderPrefix.tsx | 29 +++++++ .../page-header/src/PageHeaderSuffix.tsx | 29 +++++++ .../page-header/src/PageHeaderTitle.tsx | 38 +++++++++ .../components/page-header/src/index.tsx | 24 ++++++ .../page-header/stories/index.stories.tsx | 82 +++++++++++++++++++ .../components/page-header/tsconfig.json | 12 +++ packages/paste-core/core-bundle/.gitignore | 1 + packages/paste-core/core-bundle/package.json | 1 + packages/paste-core/core-bundle/src/index.tsx | 1 + .../core-bundle/src/page-header.tsx | 1 + yarn.lock | 36 ++++++++ 25 files changed, 628 insertions(+) create mode 100644 packages/paste-core/components/page-header/__tests__/index.spec.tsx create mode 100644 packages/paste-core/components/page-header/build.js create mode 100644 packages/paste-core/components/page-header/package.json create mode 100644 packages/paste-core/components/page-header/src/PageHeader.tsx create mode 100644 packages/paste-core/components/page-header/src/PageHeaderActions.tsx create mode 100644 packages/paste-core/components/page-header/src/PageHeaderContext.tsx create mode 100644 packages/paste-core/components/page-header/src/PageHeaderDetailText.tsx create mode 100644 packages/paste-core/components/page-header/src/PageHeaderDetails.tsx create mode 100644 packages/paste-core/components/page-header/src/PageHeaderHeading.tsx create mode 100644 packages/paste-core/components/page-header/src/PageHeaderInPageNavigation.tsx create mode 100644 packages/paste-core/components/page-header/src/PageHeaderMeta.tsx create mode 100644 packages/paste-core/components/page-header/src/PageHeaderParagraph.tsx create mode 100644 packages/paste-core/components/page-header/src/PageHeaderPrefix.tsx create mode 100644 packages/paste-core/components/page-header/src/PageHeaderSuffix.tsx create mode 100644 packages/paste-core/components/page-header/src/PageHeaderTitle.tsx create mode 100644 packages/paste-core/components/page-header/src/index.tsx create mode 100644 packages/paste-core/components/page-header/stories/index.stories.tsx create mode 100644 packages/paste-core/components/page-header/tsconfig.json create mode 100644 packages/paste-core/core-bundle/src/page-header.tsx diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 2a673afae2..d704d1fb93 100644 --- a/.codesandbox/ci.json +++ b/.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", diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json index c2dee97c32..afbf4457b2 100644 --- a/packages/paste-codemods/tools/.cache/mappings.json +++ b/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", diff --git a/packages/paste-core/components/page-header/__tests__/index.spec.tsx b/packages/paste-core/components/page-header/__tests__/index.spec.tsx new file mode 100644 index 0000000000..ad4c69884b --- /dev/null +++ b/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(test); + expect(getByText('test')).toBeDefined(); + }); +}); diff --git a/packages/paste-core/components/page-header/build.js b/packages/paste-core/components/page-header/build.js new file mode 100644 index 0000000000..a4edeab49b --- /dev/null +++ b/packages/paste-core/components/page-header/build.js @@ -0,0 +1,3 @@ +const {build} = require('../../../../tools/build/esbuild'); + +build(require('./package.json')); diff --git a/packages/paste-core/components/page-header/package.json b/packages/paste-core/components/page-header/package.json new file mode 100644 index 0000000000..276b523c6e --- /dev/null +++ b/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" + } +} diff --git a/packages/paste-core/components/page-header/src/PageHeader.tsx b/packages/paste-core/components/page-header/src/PageHeader.tsx new file mode 100644 index 0000000000..6cd6621fc4 --- /dev/null +++ b/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( + ({ element = "PAGE_HEADER", variant, children, ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +PageHeader.displayName = "PageHeader"; + +export { PageHeader }; diff --git a/packages/paste-core/components/page-header/src/PageHeaderActions.tsx b/packages/paste-core/components/page-header/src/PageHeaderActions.tsx new file mode 100644 index 0000000000..4b4c17b25e --- /dev/null +++ b/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( + ({ element = "PAGE_HEADER_ACTIONS", children, ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +PageHeaderActions.displayName = "PageHeaderActions"; + +export { PageHeaderActions }; diff --git a/packages/paste-core/components/page-header/src/PageHeaderContext.tsx b/packages/paste-core/components/page-header/src/PageHeaderContext.tsx new file mode 100644 index 0000000000..b293c72699 --- /dev/null +++ b/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( + ({ element = "PAGE_HEADER_CONTEXT", children, ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +PageHeaderContext.displayName = "PageHeaderContext"; + +export { PageHeaderContext }; diff --git a/packages/paste-core/components/page-header/src/PageHeaderDetailText.tsx b/packages/paste-core/components/page-header/src/PageHeaderDetailText.tsx new file mode 100644 index 0000000000..29b8ffa1a8 --- /dev/null +++ b/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( + ({ element = "PAGE_HEADER_DETAIL_TEXT", children, ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +PageHeaderDetailText.displayName = "PageHeaderDetailText"; + +export { PageHeaderDetailText }; diff --git a/packages/paste-core/components/page-header/src/PageHeaderDetails.tsx b/packages/paste-core/components/page-header/src/PageHeaderDetails.tsx new file mode 100644 index 0000000000..d0379e80a4 --- /dev/null +++ b/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( + ({ element = "PAGE_HEADER_DETAILS", children, ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +PageHeaderDetails.displayName = "PageHeaderDetails"; + +export { PageHeaderDetails }; diff --git a/packages/paste-core/components/page-header/src/PageHeaderHeading.tsx b/packages/paste-core/components/page-header/src/PageHeaderHeading.tsx new file mode 100644 index 0000000000..2c54409b3b --- /dev/null +++ b/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( + ({ element = "PAGE_HEADER_HEADING", children, as = "h1", variant = "heading10", ...props }, ref) => { + return ( + + + {children} + + + ); + }, +); + +PageHeaderHeading.displayName = "PageHeaderHeading"; + +export { PageHeaderHeading }; diff --git a/packages/paste-core/components/page-header/src/PageHeaderInPageNavigation.tsx b/packages/paste-core/components/page-header/src/PageHeaderInPageNavigation.tsx new file mode 100644 index 0000000000..9d539a2c05 --- /dev/null +++ b/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( + ({ element = "PAGE_HEADER_IN_PAGE_NAVIGATION", children, ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +PageHeaderInPageNavigation.displayName = "PageHeaderInPageNavigation"; + +export { PageHeaderInPageNavigation }; diff --git a/packages/paste-core/components/page-header/src/PageHeaderMeta.tsx b/packages/paste-core/components/page-header/src/PageHeaderMeta.tsx new file mode 100644 index 0000000000..a3e7ed36a1 --- /dev/null +++ b/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( + ({ element = "PAGE_HEADER_META", children, ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +PageHeaderMeta.displayName = "PageHeaderMeta"; + +export { PageHeaderMeta }; diff --git a/packages/paste-core/components/page-header/src/PageHeaderParagraph.tsx b/packages/paste-core/components/page-header/src/PageHeaderParagraph.tsx new file mode 100644 index 0000000000..9be1abda40 --- /dev/null +++ b/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( + ({ element = "PAGE_HEADER_PARAGRAPH", children, ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +PageHeaderParagraph.displayName = "PageHeaderParagraph"; + +export { PageHeaderParagraph }; diff --git a/packages/paste-core/components/page-header/src/PageHeaderPrefix.tsx b/packages/paste-core/components/page-header/src/PageHeaderPrefix.tsx new file mode 100644 index 0000000000..7b2f35b598 --- /dev/null +++ b/packages/paste-core/components/page-header/src/PageHeaderPrefix.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 PageHeaderPrefixProps extends HTMLPasteProps<"div"> { + children?: React.ReactNode; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * @default 'PAGE_HEADER_PREFIX' + * @type {BoxProps['element']} + * @memberof PageHeaderPrefixProps + */ + element?: BoxProps["element"]; +} + +const PageHeaderPrefix = React.forwardRef( + ({ element = "PAGE_HEADER_PREFIX", children, ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +PageHeaderPrefix.displayName = "PageHeaderPrefix"; + +export { PageHeaderPrefix }; diff --git a/packages/paste-core/components/page-header/src/PageHeaderSuffix.tsx b/packages/paste-core/components/page-header/src/PageHeaderSuffix.tsx new file mode 100644 index 0000000000..672c191714 --- /dev/null +++ b/packages/paste-core/components/page-header/src/PageHeaderSuffix.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 PageHeaderSuffixProps extends HTMLPasteProps<"div"> { + children?: React.ReactNode; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * @default 'PAGE_HEADER_SUFFIX' + * @type {BoxProps['element']} + * @memberof PageHeaderSuffixProps + */ + element?: BoxProps["element"]; +} + +const PageHeaderSuffix = React.forwardRef( + ({ element = "PAGE_HEADER_SUFFIX", children, ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +PageHeaderSuffix.displayName = "PageHeaderSuffix"; + +export { PageHeaderSuffix }; diff --git a/packages/paste-core/components/page-header/src/PageHeaderTitle.tsx b/packages/paste-core/components/page-header/src/PageHeaderTitle.tsx new file mode 100644 index 0000000000..5bb64d5049 --- /dev/null +++ b/packages/paste-core/components/page-header/src/PageHeaderTitle.tsx @@ -0,0 +1,38 @@ +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 PageHeaderTitleProps extends HTMLPasteProps<"div"> { + children?: React.ReactNode; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * @default 'PAGE_HEADER_TITLE' + * @type {BoxProps['element']} + * @memberof PageHeaderTitleProps + */ + element?: BoxProps["element"]; +} + +const PageHeaderTitle = React.forwardRef( + ({ element = "PAGE_HEADER_TITLE", children, ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +PageHeaderTitle.displayName = "PageHeaderTitle"; + +export { PageHeaderTitle }; diff --git a/packages/paste-core/components/page-header/src/index.tsx b/packages/paste-core/components/page-header/src/index.tsx new file mode 100644 index 0000000000..8fbd2ad0a2 --- /dev/null +++ b/packages/paste-core/components/page-header/src/index.tsx @@ -0,0 +1,24 @@ +export { PageHeader } from "./PageHeader"; +export type { PageHeaderProps } from "./PageHeader"; +export { PageHeaderContext } from "./PageHeaderContext"; +export type { PageHeaderContextProps } from "./PageHeaderContext"; +export { PageHeaderDetails } from "./PageHeaderDetails"; +export type { PageHeaderDetailsProps } from "./PageHeaderDetails"; +export { PageHeaderDetailText } from "./PageHeaderDetailText"; +export type { PageHeaderDetailTextProps } from "./PageHeaderDetailText"; +export { PageHeaderTitle } from "./PageHeaderTitle"; +export type { PageHeaderTitleProps } from "./PageHeaderTitle"; +export { PageHeaderPrefix } from "./PageHeaderPrefix"; +export type { PageHeaderPrefixProps } from "./PageHeaderPrefix"; +export { PageHeaderHeading } from "./PageHeaderHeading"; +export type { PageHeaderHeadingProps } from "./PageHeaderHeading"; +export { PageHeaderSuffix } from "./PageHeaderSuffix"; +export type { PageHeaderSuffixProps } from "./PageHeaderSuffix"; +export { PageHeaderParagraph } from "./PageHeaderParagraph"; +export type { PageHeaderParagraphProps } from "./PageHeaderParagraph"; +export { PageHeaderMeta } from "./PageHeaderMeta"; +export type { PageHeaderMetaProps } from "./PageHeaderMeta"; +export { PageHeaderActions } from "./PageHeaderActions"; +export type { PageHeaderActionsProps } from "./PageHeaderActions"; +export { PageHeaderInPageNavigation } from "./PageHeaderInPageNavigation"; +export type { PageHeaderInPageNavigationProps } from "./PageHeaderInPageNavigation"; diff --git a/packages/paste-core/components/page-header/stories/index.stories.tsx b/packages/paste-core/components/page-header/stories/index.stories.tsx new file mode 100644 index 0000000000..a855f49735 --- /dev/null +++ b/packages/paste-core/components/page-header/stories/index.stories.tsx @@ -0,0 +1,82 @@ +// eslint-disable-next-line eslint-comments/disable-enable-pair +/* eslint-disable import/no-extraneous-dependencies */ +import { Avatar } from "@twilio-paste/avatar"; +import { Badge } from "@twilio-paste/badge"; +import { Breadcrumb, BreadcrumbItem } from "@twilio-paste/breadcrumb"; +import { Button } from "@twilio-paste/button"; +import { ButtonGroup } from "@twilio-paste/button-group"; +import { DetailText } from "@twilio-paste/detail-text"; +import { InPageNavigation, InPageNavigationItem } from "@twilio-paste/in-page-navigation"; +import { Paragraph } from "@twilio-paste/paragraph"; +import * as React from "react"; + +import { + PageHeader, + PageHeaderActions, + PageHeaderContext, + PageHeaderDetailText, + PageHeaderDetails, + PageHeaderHeading, + PageHeaderInPageNavigation, + PageHeaderMeta, + PageHeaderParagraph, + PageHeaderPrefix, + PageHeaderSuffix, + PageHeaderTitle, +} from "../src"; + +// eslint-disable-next-line import/no-default-export +export default { + title: "Components/Page Header", + component: PageHeader, +}; + +export const Default = (): React.ReactNode => { + return ( + + + + Breadcrumb + Breadcrumb + + + + + Detail text + + + + + + Page title + + + Suffix + + + + + + + + + + Meta + + + + Paragraph text + + + + + + Label + + Label + Label + + + + ); +}; diff --git a/packages/paste-core/components/page-header/tsconfig.json b/packages/paste-core/components/page-header/tsconfig.json new file mode 100644 index 0000000000..b5daed7034 --- /dev/null +++ b/packages/paste-core/components/page-header/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "dist/", + }, + "include": [ + "src/**/*", + ], + "exclude": [ + "node_modules" + ] +} diff --git a/packages/paste-core/core-bundle/.gitignore b/packages/paste-core/core-bundle/.gitignore index 48c8931860..5d522999b1 100644 --- a/packages/paste-core/core-bundle/.gitignore +++ b/packages/paste-core/core-bundle/.gitignore @@ -62,6 +62,7 @@ /modal /modal-dialog-primitive /non-modal-dialog-primitive +/page-header /pagination /paragraph /popover diff --git a/packages/paste-core/core-bundle/package.json b/packages/paste-core/core-bundle/package.json index b4f00e2e3f..d2bda4347c 100644 --- a/packages/paste-core/core-bundle/package.json +++ b/packages/paste-core/core-bundle/package.json @@ -133,6 +133,7 @@ "@twilio-paste/modal": "^16.1.1", "@twilio-paste/modal-dialog-primitive": "^2.0.1", "@twilio-paste/non-modal-dialog-primitive": "^2.0.2", + "@twilio-paste/page-header": "^0.0.0", "@twilio-paste/pagination": "^7.1.1", "@twilio-paste/paragraph": "^10.1.1", "@twilio-paste/popover": "^13.2.0", diff --git a/packages/paste-core/core-bundle/src/index.tsx b/packages/paste-core/core-bundle/src/index.tsx index 12b2d809c6..12f1130f83 100644 --- a/packages/paste-core/core-bundle/src/index.tsx +++ b/packages/paste-core/core-bundle/src/index.tsx @@ -51,6 +51,7 @@ export * from "@twilio-paste/minimizable-dialog"; export * from "@twilio-paste/modal"; export * from "@twilio-paste/modal-dialog-primitive"; export * from "@twilio-paste/non-modal-dialog-primitive"; +export * from "@twilio-paste/page-header"; export * from "@twilio-paste/pagination"; export * from "@twilio-paste/paragraph"; export * from "@twilio-paste/popover"; diff --git a/packages/paste-core/core-bundle/src/page-header.tsx b/packages/paste-core/core-bundle/src/page-header.tsx new file mode 100644 index 0000000000..724feb42a9 --- /dev/null +++ b/packages/paste-core/core-bundle/src/page-header.tsx @@ -0,0 +1 @@ +export * from "@twilio-paste/page-header"; diff --git a/yarn.lock b/yarn.lock index 73a19e0206..33bee3e908 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12474,6 +12474,42 @@ __metadata: languageName: unknown linkType: soft +"@twilio-paste/page-header@workspace:packages/paste-core/components/page-header": + version: 0.0.0-use.local + resolution: "@twilio-paste/page-header@workspace:packages/paste-core/components/page-header" + dependencies: + "@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/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 + 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/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 + languageName: unknown + linkType: soft + "@twilio-paste/pagination@^7.1.1, @twilio-paste/pagination@workspace:packages/paste-core/components/pagination": version: 0.0.0-use.local resolution: "@twilio-paste/pagination@workspace:packages/paste-core/components/pagination"