Skip to content

Commit

Permalink
chore: update page template stories to use page headers (#3715)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nkrantz
nkrantz committed Jan 11, 2024
1 parent 8a226b9 commit ed0f03a
Show file tree
Hide file tree
Showing 5 changed files with 836 additions and 966 deletions.
138 changes: 54 additions & 84 deletions packages/paste-website/src/component-examples/page-templates/ObjectDetailsExamples.ts
View file
@@ -1,41 +1,32 @@
export const FullObjectDetailsExample = `
<Box
paddingX="space100"
paddingTop="space130"
paddingBottom="space160"
display="flex"
flexDirection="column"
rowGap="space130"
>
<Box display="flex" columnGap="space30" justifyContent="space-between" alignItems="flex-end">
<Box>
<Box display="flex" rowGap="space30" marginBottom="space30">
<Breadcrumb aria-label={useUID()}>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
</Box>
<Box>
<Heading as="h4" variant="heading10" marginBottom="space0">
Object details
</Heading>
</Box>
</Box>
<Box marginBottom="space30">
<Button variant="secondary">Label</Button>
</Box>
</Box>
<Box paddingX="space100" paddingTop="space130" paddingBottom="space160">
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb aria-label={useUID()}>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
</PageHeaderSetting>
<PageHeaderDetails>
<PageHeaderHeading>Object details</PageHeaderHeading>
<PageHeaderActions>
<Button variant="secondary">Label</Button>
</PageHeaderActions>
</PageHeaderDetails>
<PageHeaderInPageNavigation>
<InPageNavigation aria-label={useUID()}>
<InPageNavigationItem href="#" currentPage>
Nav item
</InPageNavigationItem>
<InPageNavigationItem href="#">Nav item</InPageNavigationItem>
<InPageNavigationItem href="#">Nav item</InPageNavigationItem>
</InPageNavigation>
</PageHeaderInPageNavigation>
</PageHeader>
<Box display="flex" flexDirection="column">
<InPageNavigation aria-label={useUID()}>
<InPageNavigationItem href="#" currentPage>
Nav item
</InPageNavigationItem>
<InPageNavigationItem href="#">Nav item</InPageNavigationItem>
<InPageNavigationItem href="#">Nav item</InPageNavigationItem>
</InPageNavigation>
<Box display="flex" flexDirection="column" rowGap="space100">
<Box>
<Heading as="h5" variant="heading20">
<Heading as="h2" variant="heading20">
Heading
</Heading>
<Box display="flex" columnGap="space70" width="size80">
Expand Down Expand Up @@ -91,7 +82,7 @@ export const FullObjectDetailsExample = `
</Box>
<Box>
<Box display="flex" width="100%" justifyContent="space-between" alignItems="flex-start">
<Heading as="h5" variant="heading20">
<Heading as="h2" variant="heading20">
Heading
</Heading>
<Button variant="secondary">Label</Button>
Expand Down Expand Up @@ -134,42 +125,33 @@ export const FullObjectDetailsExample = `
</Box>`.trim();

export const DefaultObjectDetailsExample = `
<Box
paddingX="space100"
paddingTop="space130"
paddingBottom="space160"
display="flex"
flexDirection="column"
rowGap="space130"
>
<Box display="flex" columnGap="space30" justifyContent="space-between" alignItems="flex-end">
<Box>
<Box display="flex" rowGap="space30" marginBottom="space30">
<Breadcrumb aria-label={useUID()}>
<BreadcrumbItem href="#">Voice</BreadcrumbItem>
<BreadcrumbItem href="#">Calls</BreadcrumbItem>
</Breadcrumb>
</Box>
<Box>
<Heading as="h4" variant="heading10" marginBottom="space0">
Call details
</Heading>
</Box>
</Box>
<Box marginBottom="space30">
<Button variant="secondary">Give call quality feedback</Button>
</Box>
</Box>
<Box paddingX="space100" paddingTop="space130" paddingBottom="space160">
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb aria-label={useUID()}>
<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={useUID()}>
<InPageNavigationItem href="#" currentPage>
Overview
</InPageNavigationItem>
<InPageNavigationItem href="#">Insights summary</InPageNavigationItem>
</InPageNavigation>
</PageHeaderInPageNavigation>
</PageHeader>
<Box display="flex" flexDirection="column">
<InPageNavigation aria-label={useUID()}>
<InPageNavigationItem href="#overview" currentPage>
Overview
</InPageNavigationItem>
<InPageNavigationItem href="#insights-summary">Insights summary</InPageNavigationItem>
</InPageNavigation>
<Box display="flex" flexDirection="column" rowGap="space130">
<Box>
<Heading as="h5" variant="heading20">
<Heading as="h2" variant="heading20">
Properties
</Heading>
<Box display="flex" columnGap="space70" width="size80">
Expand All @@ -181,11 +163,7 @@ export const DefaultObjectDetailsExample = `
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Message service</DescriptionListTerm>
<DescriptionListDetails>
<Text as="span" fontStyle="italic" color="colorTextWeak">
Not available
</Text>
</DescriptionListDetails>
<DescriptionListDetails>N/A</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Created at</DescriptionListTerm>
Expand All @@ -209,23 +187,15 @@ export const DefaultObjectDetailsExample = `
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>API endpoint</DescriptionListTerm>
<DescriptionListDetails>
<Text as="span" fontStyle="italic" color="colorTextWeak">
Not available
</Text>
</DescriptionListDetails>
<DescriptionListDetails>N/A</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Message segments</DescriptionListTerm>
<DescriptionListDetails>1</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Encoding</DescriptionListTerm>
<DescriptionListDetails>
<Text as="span" fontStyle="italic" color="colorTextWeak">
Not available
</Text>
</DescriptionListDetails>
<DescriptionListDetails>N/A</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>
Expand Down Expand Up @@ -261,7 +231,7 @@ export const DefaultObjectDetailsExample = `
</DescriptionList>
</Box>
<Box>
<Heading as="h5" variant="heading20">
<Heading as="h2" variant="heading20">
Errors and warnings
</Heading>
<Table>
Expand Down
99 changes: 41 additions & 58 deletions packages/paste-website/src/component-examples/page-templates/ObjectsListExamples.ts
View file
@@ -1,36 +1,27 @@
export const FullObjectsListExample = `
<Box
paddingX="space100"
paddingTop="space130"
paddingBottom="space160"
display="flex"
flexDirection="column"
rowGap="space130"
>
<Box display="flex" columnGap="space30" justifyContent="space-between" alignItems="flex-start">
<Box maxWidth="size70">
<Box display="flex" rowGap="space30" marginBottom="space30">
<Breadcrumb aria-label={useUID()}>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
</Box>
<Heading as="h4" variant="heading10">
Objects
</Heading>
<Paragraph marginBottom="space0">
<Box paddingX="space100" paddingTop="space130" paddingBottom="space160">
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb aria-label={useUID()}>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
</PageHeaderSetting>
<PageHeaderDetails>
<PageHeaderHeading>Objects</PageHeaderHeading>
<PageHeaderActions>
<ButtonGroup>
<Button variant="secondary">Label</Button>
<Button variant="primary">Label</Button>
</ButtonGroup>
</PageHeaderActions>
<PageHeaderParagraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ex risus. Aenean at ante id lectus
faucibus hendrerit a fringilla lorem. Pellentesque faucibus sit amet dolor vitae lacinia.
</Paragraph>
</Box>
<Box marginBottom="space30" marginTop="space80">
<ButtonGroup>
<Button variant="secondary">Label</Button>
<Button variant="primary">Label</Button>
</ButtonGroup>
</Box>
</Box>
</PageHeaderParagraph>
</PageHeaderDetails>
</PageHeader>
<Box>
<Box display="flex" flexDirection="column" rowGap="space50" marginBottom="space90">
<Box display="flex" columnGap="space80" alignItems="flex-end">
Expand All @@ -48,6 +39,7 @@ export const FullObjectsListExample = `
<Select id={criteria3}>3</Select>
</Box>
</Box>
<Box
height="100%"
display="flex"
Expand Down Expand Up @@ -169,34 +161,25 @@ export const FullObjectsListExample = `
</Box>`.trim();

export const DefaultObjectsListExample = `
<Box
paddingX="space100"
paddingTop="space130"
paddingBottom="space160"
display="flex"
flexDirection="column"
rowGap="space130"
>
<Box display="flex" columnGap="space30" justifyContent="space-between" alignItems="flex-start">
<Box maxWidth="size70">
<Box display="flex" rowGap="space30" marginBottom="space30">
<Breadcrumb aria-label={useUID()}>
<BreadcrumbItem href="#">Phone numbers</BreadcrumbItem>
<BreadcrumbItem href="#">Manage</BreadcrumbItem>
</Breadcrumb>
</Box>
<Heading as="h4" variant="heading10">
Verified caller IDs
</Heading>
<Paragraph marginBottom="space0">
Verify a number that you own to use it as a caller ID or as the “To” number for outbound calls and messages.
The phone numbers you buy from Twilio or port to Twilio can always be used as caller IDs.
</Paragraph>
</Box>
<Box marginBottom="space30" marginTop="space80" whiteSpace="nowrap">
<Button variant="primary">Add a new caller ID</Button>
</Box>
</Box>
<Box paddingX="space100" paddingTop="space130" paddingBottom="space160">
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb aria-label={useUID()}>
<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 &quot;To&quot; 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>
<Box>
<Box maxWidth="size70" marginBottom="space90" display="flex" columnGap="space80" alignItems="flex-end">
<Box maxWidth="size90" display="flex" columnGap="space50">
Expand Down

1 comment on commit ed0f03a

@vercel
Copy link

@vercel vercel bot commented on ed0f03a 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 – ./

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

Please sign in to comment.