Skip to content

Commit e36d894

Browse files
nkrantznkrantz
authored
chore: add page templates stories (#3518)
* chore: add page templates stories * chore: fix code formatting
1 parent 9a6a14c commit e36d894

File tree

8 files changed

+1679
-33
lines changed

8 files changed

+1679
-33
lines changed

‎packages/paste-website/src/component-examples/page-templates/ObjectDetailsExamples.ts‎

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
export const FullObjectDetailsExample = `
2+
<Box
3+
paddingX="space100"
4+
paddingTop="space130"
5+
paddingBottom="space160"
6+
display="flex"
7+
flexDirection="column"
8+
rowGap="space130"
9+
>
10+
<Box display="flex" columnGap="space30" justifyContent="space-between" alignItems="flex-end">
11+
<Box>
12+
<Box display="flex" rowGap="space30" marginBottom="space30">
13+
<Breadcrumb aria-label={useUID()}>
14+
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
15+
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
16+
</Breadcrumb>
17+
</Box>
18+
<Box>
19+
<Heading as="h4" variant="heading10" marginBottom="space0">
20+
Object details
21+
</Heading>
22+
</Box>
23+
</Box>
24+
<Box marginBottom="space30">
25+
<Button variant="secondary">Label</Button>
26+
</Box>
27+
</Box>
28+
<Box display="flex" flexDirection="column">
29+
<InPageNavigation aria-label={useUID()}>
30+
<InPageNavigationItem href="#" currentPage>
31+
Nav item
32+
</InPageNavigationItem>
33+
<InPageNavigationItem href="#">Nav item</InPageNavigationItem>
34+
<InPageNavigationItem href="#">Nav item</InPageNavigationItem>
35+
</InPageNavigation>
36+
<Box display="flex" flexDirection="column" rowGap="space100">
37+
<Box>
38+
<Heading as="h5" variant="heading20">
39+
Heading
40+
</Heading>
41+
<Box display="flex" columnGap="space70" width="size80">
42+
<Box width="size40">
43+
<DescriptionList>
44+
<DescriptionListSet>
45+
<DescriptionListTerm>Term</DescriptionListTerm>
46+
<DescriptionListDetails>Details</DescriptionListDetails>
47+
</DescriptionListSet>
48+
<DescriptionListSet>
49+
<DescriptionListTerm>Term</DescriptionListTerm>
50+
<DescriptionListDetails>Details</DescriptionListDetails>
51+
</DescriptionListSet>
52+
<DescriptionListSet>
53+
<DescriptionListTerm>Term</DescriptionListTerm>
54+
<DescriptionListDetails>Details</DescriptionListDetails>
55+
</DescriptionListSet>
56+
<DescriptionListSet>
57+
<DescriptionListTerm>Term</DescriptionListTerm>
58+
<DescriptionListDetails>Details</DescriptionListDetails>
59+
</DescriptionListSet>
60+
<DescriptionListSet>
61+
<DescriptionListTerm>Term</DescriptionListTerm>
62+
<DescriptionListDetails>Details</DescriptionListDetails>
63+
</DescriptionListSet>
64+
</DescriptionList>
65+
</Box>
66+
<Box width="size40">
67+
<DescriptionList>
68+
<DescriptionListSet>
69+
<DescriptionListTerm>Term</DescriptionListTerm>
70+
<DescriptionListDetails>Details</DescriptionListDetails>
71+
</DescriptionListSet>
72+
<DescriptionListSet>
73+
<DescriptionListTerm>Term</DescriptionListTerm>
74+
<DescriptionListDetails>Details</DescriptionListDetails>
75+
</DescriptionListSet>
76+
<DescriptionListSet>
77+
<DescriptionListTerm>Term</DescriptionListTerm>
78+
<DescriptionListDetails>Details</DescriptionListDetails>
79+
</DescriptionListSet>
80+
<DescriptionListSet>
81+
<DescriptionListTerm>Term</DescriptionListTerm>
82+
<DescriptionListDetails>Details</DescriptionListDetails>
83+
</DescriptionListSet>
84+
<DescriptionListSet>
85+
<DescriptionListTerm>Term</DescriptionListTerm>
86+
<DescriptionListDetails>Details</DescriptionListDetails>
87+
</DescriptionListSet>
88+
</DescriptionList>
89+
</Box>
90+
</Box>
91+
</Box>
92+
<Box>
93+
<Box display="flex" width="100%" justifyContent="space-between" alignItems="flex-start">
94+
<Heading as="h5" variant="heading20">
95+
Heading
96+
</Heading>
97+
<Button variant="secondary">Label</Button>
98+
</Box>
99+
<Box maxWidth="size80">
100+
<Paragraph>
101+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ex risus. Aenean at ante id lectus
102+
faucibus hendrerit a fringilla lorem. Pellentesque faucibus sit amet dolor vitae lacinia.
103+
</Paragraph>
104+
</Box>
105+
<Table>
106+
<THead>
107+
<Tr>
108+
<Th>Header</Th>
109+
<Th>Header</Th>
110+
<Th>Header</Th>
111+
</Tr>
112+
</THead>
113+
<TBody>
114+
<Tr>
115+
<Td>Content</Td>
116+
<Td>Content</Td>
117+
<Td>Content</Td>
118+
</Tr>
119+
<Tr>
120+
<Td>Content</Td>
121+
<Td>Content</Td>
122+
<Td>Content</Td>
123+
</Tr>
124+
<Tr>
125+
<Td>Content</Td>
126+
<Td>Content</Td>
127+
<Td>Content</Td>
128+
</Tr>
129+
</TBody>
130+
</Table>
131+
</Box>
132+
</Box>
133+
</Box>
134+
</Box>`.trim();
135+
136+
export const DefaultObjectDetailsExample = `
137+
<Box
138+
paddingX="space100"
139+
paddingTop="space130"
140+
paddingBottom="space160"
141+
display="flex"
142+
flexDirection="column"
143+
rowGap="space130"
144+
>
145+
<Box display="flex" columnGap="space30" justifyContent="space-between" alignItems="flex-end">
146+
<Box>
147+
<Box display="flex" rowGap="space30" marginBottom="space30">
148+
<Breadcrumb aria-label={useUID()}>
149+
<BreadcrumbItem href="#">Voice</BreadcrumbItem>
150+
<BreadcrumbItem href="#">Calls</BreadcrumbItem>
151+
</Breadcrumb>
152+
</Box>
153+
<Box>
154+
<Heading as="h4" variant="heading10" marginBottom="space0">
155+
Call details
156+
</Heading>
157+
</Box>
158+
</Box>
159+
<Box marginBottom="space30">
160+
<Button variant="secondary">Give call quality feedback</Button>
161+
</Box>
162+
</Box>
163+
<Box display="flex" flexDirection="column">
164+
<InPageNavigation aria-label={useUID()}>
165+
<InPageNavigationItem href="#overview" currentPage>
166+
Overview
167+
</InPageNavigationItem>
168+
<InPageNavigationItem href="#insights-summary">Insights summary</InPageNavigationItem>
169+
</InPageNavigation>
170+
<Box display="flex" flexDirection="column" rowGap="space130">
171+
<Box>
172+
<Heading as="h5" variant="heading20">
173+
Properties
174+
</Heading>
175+
<Box display="flex" columnGap="space70" width="size80">
176+
<Box width="size40">
177+
<DescriptionList>
178+
<DescriptionListSet>
179+
<DescriptionListTerm>Message SID</DescriptionListTerm>
180+
<DescriptionListDetails>MG48n1d86b68737525hfd84w91dah0w3088n</DescriptionListDetails>
181+
</DescriptionListSet>
182+
<DescriptionListSet>
183+
<DescriptionListTerm>Message service</DescriptionListTerm>
184+
<DescriptionListDetails>
185+
<Text as="span" fontStyle="italic" color="colorTextWeak">
186+
Not available
187+
</Text>
188+
</DescriptionListDetails>
189+
</DescriptionListSet>
190+
<DescriptionListSet>
191+
<DescriptionListTerm>Created at</DescriptionListTerm>
192+
<DescriptionListDetails>13:42:57 PDT 2020-09-29</DescriptionListDetails>
193+
</DescriptionListSet>
194+
<DescriptionListSet>
195+
<DescriptionListTerm>From</DescriptionListTerm>
196+
<DescriptionListDetails>(606) 609-4293</DescriptionListDetails>
197+
</DescriptionListSet>
198+
<DescriptionListSet>
199+
<DescriptionListTerm>To</DescriptionListTerm>
200+
<DescriptionListDetails>(323) 754-2093</DescriptionListDetails>
201+
</DescriptionListSet>
202+
</DescriptionList>
203+
</Box>
204+
<Box width="size40">
205+
<DescriptionList>
206+
<DescriptionListSet>
207+
<DescriptionListTerm>Direction</DescriptionListTerm>
208+
<DescriptionListDetails>Incoming</DescriptionListDetails>
209+
</DescriptionListSet>
210+
<DescriptionListSet>
211+
<DescriptionListTerm>API endpoint</DescriptionListTerm>
212+
<DescriptionListDetails>
213+
<Text as="span" fontStyle="italic" color="colorTextWeak">
214+
Not available
215+
</Text>
216+
</DescriptionListDetails>
217+
</DescriptionListSet>
218+
<DescriptionListSet>
219+
<DescriptionListTerm>Message segments</DescriptionListTerm>
220+
<DescriptionListDetails>1</DescriptionListDetails>
221+
</DescriptionListSet>
222+
<DescriptionListSet>
223+
<DescriptionListTerm>Encoding</DescriptionListTerm>
224+
<DescriptionListDetails>
225+
<Text as="span" fontStyle="italic" color="colorTextWeak">
226+
Not available
227+
</Text>
228+
</DescriptionListDetails>
229+
</DescriptionListSet>
230+
<DescriptionListSet>
231+
<DescriptionListTerm>
232+
<Box display="flex" height="space60" columnGap="space20">
233+
Term
234+
<Button variant="primary_icon" size="reset">
235+
<InformationIcon decorative={false} title="what are terms?" />
236+
</Button>
237+
</Box>
238+
</DescriptionListTerm>
239+
<DescriptionListDetails>$0.0075</DescriptionListDetails>
240+
</DescriptionListSet>
241+
</DescriptionList>
242+
</Box>
243+
</Box>
244+
<DescriptionList>
245+
<DescriptionListSet>
246+
<DescriptionListTerm>Term</DescriptionListTerm>
247+
<DescriptionListDetails>
248+
<Box
249+
backgroundColor="colorBackground"
250+
maxWidth="size80"
251+
padding="space50"
252+
borderRadius="borderRadius20"
253+
>
254+
<Text as="span" fontFamily="fontFamilyCode">
255+
Want to know what a day in the life of a Robotics Engineer is like? Join UAT tomorrow at 4PM MST
256+
to learn about our innovative degrees. Registration is free but space is limited. Sign up here:
257+
</Text>
258+
</Box>
259+
</DescriptionListDetails>
260+
</DescriptionListSet>
261+
</DescriptionList>
262+
</Box>
263+
<Box>
264+
<Heading as="h5" variant="heading20">
265+
Errors and warnings
266+
</Heading>
267+
<Table>
268+
<THead>
269+
<Tr>
270+
<Th>Code</Th>
271+
<Th>Type</Th>
272+
<Th>Description</Th>
273+
</Tr>
274+
</THead>
275+
<TBody>
276+
<Tr>
277+
<Td>
278+
<Box display="flex" columnGap="space30">
279+
<WarningIcon decorative={false} title="warning" color="colorTextIconWarning" />
280+
<Text as="span" fontWeight="fontWeightSemibold">
281+
11200 HTTP retrieval failure
282+
</Text>
283+
</Box>
284+
</Td>
285+
<Td>Warning</Td>
286+
<Td>Twilio’s servers were unable to fetch a non-error response from the designated URL.</Td>
287+
</Tr>
288+
</TBody>
289+
</Table>
290+
</Box>
291+
</Box>
292+
</Box>
293+
</Box>`.trim();

0 commit comments

Comments
 (0)