Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add page templates stories #3518

Merged
merged 2 commits into from
Oct 9, 2023
Merged

chore: add page templates stories #3518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ec92eb7
chore: add page templates stories
nkrantz Oct 3, 2023
0d11499
chore: fix code formatting
nkrantz Oct 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
293 changes: 293 additions & 0 deletions packages/paste-website/src/component-examples/page-templates/ObjectDetailsExamples.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,293 @@
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 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
</Heading>
<Box display="flex" columnGap="space70" width="size80">
<Box width="size40">
<DescriptionList>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
</DescriptionList>
</Box>
<Box width="size40">
<DescriptionList>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
</DescriptionList>
</Box>
</Box>
</Box>
<Box>
<Box display="flex" width="100%" justifyContent="space-between" alignItems="flex-start">
<Heading as="h5" variant="heading20">
Heading
</Heading>
<Button variant="secondary">Label</Button>
</Box>
<Box maxWidth="size80">
<Paragraph>
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>
<Table>
<THead>
<Tr>
<Th>Header</Th>
<Th>Header</Th>
<Th>Header</Th>
</Tr>
</THead>
<TBody>
<Tr>
<Td>Content</Td>
<Td>Content</Td>
<Td>Content</Td>
</Tr>
<Tr>
<Td>Content</Td>
<Td>Content</Td>
<Td>Content</Td>
</Tr>
<Tr>
<Td>Content</Td>
<Td>Content</Td>
<Td>Content</Td>
</Tr>
</TBody>
</Table>
</Box>
</Box>
</Box>
</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 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">
Properties
</Heading>
<Box display="flex" columnGap="space70" width="size80">
<Box width="size40">
<DescriptionList>
<DescriptionListSet>
<DescriptionListTerm>Message SID</DescriptionListTerm>
<DescriptionListDetails>MG48n1d86b68737525hfd84w91dah0w3088n</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Message service</DescriptionListTerm>
<DescriptionListDetails>
<Text as="span" fontStyle="italic" color="colorTextWeak">
Not available
</Text>
</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Created at</DescriptionListTerm>
<DescriptionListDetails>13:42:57 PDT 2020-09-29</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>From</DescriptionListTerm>
<DescriptionListDetails>(606) 609-4293</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>To</DescriptionListTerm>
<DescriptionListDetails>(323) 754-2093</DescriptionListDetails>
</DescriptionListSet>
</DescriptionList>
</Box>
<Box width="size40">
<DescriptionList>
<DescriptionListSet>
<DescriptionListTerm>Direction</DescriptionListTerm>
<DescriptionListDetails>Incoming</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>API endpoint</DescriptionListTerm>
<DescriptionListDetails>
<Text as="span" fontStyle="italic" color="colorTextWeak">
Not available
</Text>
</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>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>
<Box display="flex" height="space60" columnGap="space20">
Term
<Button variant="primary_icon" size="reset">
<InformationIcon decorative={false} title="what are terms?" />
</Button>
</Box>
</DescriptionListTerm>
<DescriptionListDetails>$0.0075</DescriptionListDetails>
</DescriptionListSet>
</DescriptionList>
</Box>
</Box>
<DescriptionList>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>
<Box
backgroundColor="colorBackground"
maxWidth="size80"
padding="space50"
borderRadius="borderRadius20"
>
<Text as="span" fontFamily="fontFamilyCode">
Want to know what a day in the life of a Robotics Engineer is like? Join UAT tomorrow at 4PM MST
to learn about our innovative degrees. Registration is free but space is limited. Sign up here:
</Text>
</Box>
</DescriptionListDetails>
</DescriptionListSet>
</DescriptionList>
</Box>
<Box>
<Heading as="h5" variant="heading20">
Errors and warnings
</Heading>
<Table>
<THead>
<Tr>
<Th>Code</Th>
<Th>Type</Th>
<Th>Description</Th>
</Tr>
</THead>
<TBody>
<Tr>
<Td>
<Box display="flex" columnGap="space30">
<WarningIcon decorative={false} title="warning" color="colorTextIconWarning" />
<Text as="span" fontWeight="fontWeightSemibold">
11200 HTTP retrieval failure
</Text>
</Box>
</Td>
<Td>Warning</Td>
<Td>Twilio’s servers were unable to fetch a non-error response from the designated URL.</Td>
</Tr>
</TBody>
</Table>
</Box>
</Box>
</Box>
</Box>`.trim();
Loading