Skip to content

Commit

Permalink
feat: add page header docs (#3711)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nkrantz
nkrantz authored Jan 11, 2024
1 parent cdd820d commit 569be77
Show file tree
Hide file tree
Showing 10 changed files with 602 additions and 3 deletions.
3 changes: 3 additions & 0 deletions cypress/integration/sitemap-vrt/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,9 @@ export const SITEMAP = [
"/components/meter",
"/components/meter/api",
"/components/meter/changelog",
"/components/page-header",
"/components/page-header/api",
"/components/page-header/changelog",
"/components/pagination/",
"/components/pagination/api",
"/components/pagination/changelog",
Expand Down
Empty file added packages/paste-core/components/page-header/CHANGELOG.md
View file
Empty file.
1 change: 1 addition & 0 deletions packages/paste-website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,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",
Expand Down
Binary file added packages/paste-website/src/assets/images/PageHeaderPNG.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
214 changes: 214 additions & 0 deletions packages/paste-website/src/component-examples/PageHeaderExamples.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
export const defaultPageHeaderExample = `
const PageHeaderExample = () => {
return (
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb>
<BreadcrumbItem href="#">Manage billing</BreadcrumbItem>
</Breadcrumb>
</PageHeaderSetting>
<PageHeaderDetails>
<PageHeaderKeyword>
<Badge as="span" variant="new">
<NewIcon decorative />
Beta
</Badge>
</PageHeaderKeyword>
<PageHeaderHeading>Subscriptions</PageHeaderHeading>
<PageHeaderActions>
<ButtonGroup>
<Button variant="primary">Add a subscription <ArrowForwardIcon decorative /></Button>
</ButtonGroup>
</PageHeaderActions>
<PageHeaderParagraph>Manage your subscriptions here. Costs listed here may exclude taxes, fees, support fees, expert services costs, and certain other products.</PageHeaderParagraph>
</PageHeaderDetails>
<PageHeaderInPageNavigation>
<InPageNavigation aria-label="get started">
<InPageNavigationItem href="#" currentPage>
Subscriptions
</InPageNavigationItem>
<InPageNavigationItem href="#">Recurring items</InPageNavigationItem>
</InPageNavigation>
</PageHeaderInPageNavigation>
</PageHeader>
);
};
render(
<PageHeaderExample />
)
`.trim();

export const interruptedPageHeaderExample = `
const PageHeaderExample = () => {
return (
<PageHeader size="default">
<PageHeaderSetting>
<Anchor href="#" display="inline-flex" alignItems="center"><ArrowBackIcon decorative />Return to Flex</Anchor>
</PageHeaderSetting>
<PageHeaderDetails>
<PageHeaderHeading>Getting started with Segment</PageHeaderHeading>
<PageHeaderMeta><Anchor href="#">Download the help guide PDF</Anchor></PageHeaderMeta>
</PageHeaderDetails>
</PageHeader>
);
};
render(
<PageHeaderExample />
)
`.trim();

export const compactPageHeaderExample = `
const PageHeaderExample = () => {
return (
<Box maxWidth="size50" borderStyle="solid" padding="space50" borderWidth="borderWidth10" borderColor="colorBorderDecorative10Weaker" borderRadius="borderRadius20">
<PageHeader size="compact">
<PageHeaderDetails>
<PageHeaderPrefix><Avatar name="parker smith" size="sizeIcon100" icon={UserIcon} /></PageHeaderPrefix>
<PageHeaderHeading>Parker Smith</PageHeaderHeading>
<PageHeaderActions>
<ButtonGroup>
<Button variant="secondary" size="small">Edit</Button>
<Button variant="secondary" size="small"><MoreIcon decorative={false} title="more menu" /></Button>
</ButtonGroup>
</PageHeaderActions>
<PageHeaderMeta>
Customer since June 11, 2009
<StatusBadge variant="ConnectivityAvailable">
Online
</StatusBadge>
</PageHeaderMeta>
</PageHeaderDetails>
<PageHeaderInPageNavigation>
<InPageNavigation aria-label="get started">
<InPageNavigationItem href="#" currentPage>
Customer details
</InPageNavigationItem>
<InPageNavigationItem href="#">Customer history</InPageNavigationItem>
</InPageNavigation>
</PageHeaderInPageNavigation>
</PageHeader>
</Box>
);
};
render(
<PageHeaderExample />
)
`.trim();

export const objectDetailsPageHeaderExample = `
const PageHeaderExample = () => {
return (
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb>
<BreadcrumbItem href="#">Voice</BreadcrumbItem>
<BreadcrumbItem href="#">Calls</BreadcrumbItem>
</Breadcrumb>
</PageHeaderSetting>
<PageHeaderDetails>
<PageHeaderHeading>Call details</PageHeaderHeading>
<PageHeaderActions>
<Button variant="secondary">Give call quality feedback</Button>
</PageHeaderActions>
</PageHeaderDetails>
<PageHeaderInPageNavigation>
<InPageNavigation aria-label="get started">
<InPageNavigationItem href="#" currentPage>
Overview
</InPageNavigationItem>
<InPageNavigationItem href="#">Insights summary</InPageNavigationItem>
</InPageNavigation>
</PageHeaderInPageNavigation>
</PageHeader>
);
};
render(
<PageHeaderExample />
)
`.trim();

export const objectsListPageHeaderExample = `
const PageHeaderExample = () => {
return (
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb>
<BreadcrumbItem href="#">Phone numbers</BreadcrumbItem>
<BreadcrumbItem href="#">Manage</BreadcrumbItem>
</Breadcrumb>
</PageHeaderSetting>
<PageHeaderDetails>
<PageHeaderHeading>Verified caller IDs</PageHeaderHeading>
<PageHeaderActions>
<Button variant="primary">Add caller ID</Button>
</PageHeaderActions>
<PageHeaderParagraph>Use numbers you own as caller ID or the "To" number for outbound calls and messages. Phone numbers you buy from Twilio or port to Twilio can always be used as caller IDs.</PageHeaderParagraph>
</PageHeaderDetails>
</PageHeader>
);
};
render(
<PageHeaderExample />
)
`.trim();

export const settingsPageHeaderExample = `
const PageHeaderExample = () => {
return (
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb>
<BreadcrumbItem href="#">Phone numbers</BreadcrumbItem>
<BreadcrumbItem href="#">Manage</BreadcrumbItem>
</Breadcrumb>
</PageHeaderSetting>
<PageHeaderDetails>
<PageHeaderHeading>Billing settings</PageHeaderHeading>
<PageHeaderParagraph>Use numbers you own as caller ID or the "To" number for outbound calls and messages. Phone numbers you buy from Twilio or port to Twilio can always be used as caller IDs.</PageHeaderParagraph>
</PageHeaderDetails>
<PageHeaderInPageNavigation>
<InPageNavigation aria-label="get started">
<InPageNavigationItem href="#" currentPage>
Invoicing
</InPageNavigationItem>
<InPageNavigationItem href="#">Service address</InPageNavigationItem>
<InPageNavigationItem href="#">Tax information</InPageNavigationItem>
</InPageNavigation>
</PageHeaderInPageNavigation>
</PageHeader>
);
};
render(
<PageHeaderExample />
)
`.trim();

export const wizardPageHeaderExample = `
const PageHeaderExample = () => {
return (
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
<ProgressSteps>
<ProgressStepComplete as="div">Select warehouse type</ProgressStepComplete>
<ProgressStepSeparator />
<ProgressStepCurrent as="div">Connect warehouse</ProgressStepCurrent>
<ProgressStepSeparator />
<ProgressStepIncomplete as="div">Set sync schedule</ProgressStepIncomplete>
</ProgressSteps>
</PageHeaderSetting>
<PageHeaderDetails>
<PageHeaderKeyword>Add warehouse</PageHeaderKeyword>
<PageHeaderHeading>Connect Azure SQL data warehouse</PageHeaderHeading>
<PageHeaderParagraph>Follow the steps below to start setting up Azure SQL data warehouse.</PageHeaderParagraph>
</PageHeaderDetails>
</PageHeader>
);
};
render(
<PageHeaderExample />
)
`.trim();
6 changes: 3 additions & 3 deletions packages/paste-website/src/components/homepage/HomeHero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,14 +77,14 @@ const HomeHero = (): JSX.Element => {
<NewIcon decorative />
New
</Badge>
<NewComponentBannerText>Introducing page templates!</NewComponentBannerText>
<NewComponentBannerText>The Page Header component is here!</NewComponentBannerText>
<NewComponentBannerLink
href="/page-templates"
href="/components/page-header"
onClick={() =>
event({
category: "Hero",
action: "click-new-banner",
label: "Page templates announcement",
label: "Page header announcement",
})
}
>
Expand Down
105 changes: 105 additions & 0 deletions packages/paste-website/src/pages/components/page-header/api.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
export const meta = {
title: 'Page Header',
package: '@twilio-paste/page-header',
description: 'Page Header is a layout component that wraps all top-level components on a page.',
slug: '/components/page-header/api',
};

import Changelog from '@twilio-paste/page-header/CHANGELOG.md'; // I don't know why this is needed but if you remove it the page fails to render
import packageJson from '@twilio-paste/page-header/package.json';

import {SidebarCategoryRoutes} from '../../../constants';
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api';

export default ComponentPageLayout;

export const getStaticProps = async () => {
const navigationData = await getNavigationData();
const feature = await getFeature('Page header');
const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/page-header');
return {
props: {
data: {
...packageJson,
...feature,
},
componentApi,
mdxHeadings: [...mdxHeadings, ...componentApiTocData],
navigationData,
pageHeaderData: {
categoryRoute: SidebarCategoryRoutes.COMPONENTS,
githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/page-header',
storybookUrl: '/?path=/story/components-page-header--default',
},
},
};
};

## Installation

```bash
yarn add @twilio-paste/page-header - or - yarn add @twilio-paste/core
```

## Usage

```jsx
import {
PageHeader,
PageHeaderActions,
PageHeaderDetails,
PageHeaderHeading,
PageHeaderInPageNavigation,
PageHeaderKeyword,
PageHeaderMeta,
PageHeaderParagraph,
PageHeaderPrefix,
PageHeaderSetting,
} from '@twilio-paste/core/page-header';

const MyPageHeader = () => {
return (
<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>
<ButtonGroup>
<Button variant="secondary">Action</Button>
<Button variant="secondary">Action</Button>
</ButtonGroup>
</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>
);
};
```
## Props
<PropsTable componentApi={props.componentApi} />
37 changes: 37 additions & 0 deletions packages/paste-website/src/pages/components/page-header/changelog.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
export const meta = {
title: 'Page Header',
package: '@twilio-paste/page-header',
description: 'Page Header is a layout component that wraps all top-level components on a page.',
slug: '/components/page-header/changelog',
};

import Changelog from '@twilio-paste/page-header/CHANGELOG.md';
import packageJson from '@twilio-paste/page-header/package.json';

import {SidebarCategoryRoutes} from '../../../constants';
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
import {getFeature, getNavigationData} from '../../../utils/api';

export default ComponentPageLayout;

export const getStaticProps = async () => {
const navigationData = await getNavigationData();
const feature = await getFeature('Page header');
return {
props: {
data: {
...packageJson,
...feature,
},
navigationData,
mdxHeadings,
pageHeaderData: {
categoryRoute: SidebarCategoryRoutes.COMPONENTS,
githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/page-header',
storybookUrl: '/?path=/story/components-page-header--default',
},
},
};
};

<Changelog />
Loading

1 comment on commit 569be77

@vercel
Copy link

@vercel vercel bot commented on 569be77 Jan 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

paste-remix – ./

remix.twilio.design
paste-remix-theta.vercel.app
paste-remix-twilio.vercel.app
paste-remix-git-main-twilio.vercel.app

Please sign in to comment.