Skip to content

Commit b111529

Browse files
giodd360giodd360
authored
Merge pull request #73 from dd3tech/feat/page-template-and-top-page-docs
Feat(PageTemplate-TopPage): Add documentation top-page and page-template components
2 parents 38e2235 + 229e169 commit b111529

5 files changed

Lines changed: 594 additions & 12 deletions

File tree

‎docs/layout/page-template.mdx‎

Lines changed: 348 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,348 @@
1+
---
2+
product: dd360-ds
3+
title: React PageTemplate component
4+
components: PageTemplate
5+
---
6+
7+
<br id='top' />
8+
<br />
9+
10+
<Label>Layout</Label>
11+
12+
# <HeaderDocCustom title="PageTemplate" pathUrl="layout-page-template--page-template" />
13+
14+
15+
The `PageTemplate` is a flexible layout component that structures a page's content, including search bars, filters, action buttons, and result displays. It allows easy customization of the header, footer, and interactive elements, ensuring a consistent and user-friendly interface.
16+
17+
<br />
18+
<br />
19+
##### <span name="floating-nav">Import</span>
20+
21+
<WindowEditor codeString="import { PageTemplate } from 'dd360-ds'" />
22+
<WindowEditor codeString="import PageTemplate from 'dd360-ds/PageTemplate'" />
23+
24+
<br />
25+
<br />
26+
##### <span name="floating-nav">Usage</span>
27+
28+
<Playground >
29+
<PageTemplate title={{label:'PageTemplate Component'}}>Children</PageTemplate>
30+
</Playground>
31+
32+
<WindowEditor codeString={`import { PageTemplate } from "dd360-ds"
33+
34+
<PageTemplate title={{label:'PageTemplate Component'}}>Children</PageTemplate>
35+
`} />
36+
37+
<br />
38+
<br />
39+
40+
##### <span name="floating-nav">Children</span>
41+
42+
With the prop <TagDocs text='Children' />, you can pass any valid React node to be rendered as the main content inside the `PageTemplate` component. This allows you to define custom content, such as text, components, or elements, within the layout.
43+
44+
45+
<Playground >
46+
<PageTemplate title={{label:'PageTemplate Component'}}>Children</PageTemplate>
47+
</Playground>
48+
49+
<WindowEditor codeString={`import { PageTemplate } from "dd360-ds"
50+
51+
<PageTemplate title={{label:'PageTemplate Component'}}>Children</PageTemplate>
52+
`} />
53+
54+
<br />
55+
<br />
56+
57+
58+
59+
##### <span name="floating-nav">Search</span>
60+
61+
With the prop <TagDocs text='Search' />, you can pass an object with properties like `value`, `onChange`, `placeholder`, and `disabled` to render a search bar within the `PageTemplate` component. This allows users to search and filter content directly from the header.
62+
63+
<Playground>
64+
<PageTemplate title={{label:'PageTemplate Component'}}
65+
search={{onchange:()=>alert('searching...'),value:'Search',placeholder:'Search',disabled:true}}
66+
>Children</PageTemplate>
67+
</Playground>
68+
69+
<WindowEditor codeString={`import { PageTemplate } from "dd360-ds"
70+
71+
<PageTemplate
72+
title={{label:'PageTemplate Component'}}
73+
search={{onchange:()=>alert('searching...'),
74+
value:'Search',placeholder:'Search',disabled:true}}>
75+
Children</PageTemplate>
76+
`} />
77+
78+
<br />
79+
<br />
80+
81+
##### <span name="floating-nav">Results</span>
82+
83+
With the prop <TagDocs text='Results' />, you can pass an object with properties like `number` and `label` to display the number of results and a custom label within the `PageTemplate` component. This helps users quickly understand the amount of available data.
84+
85+
<Playground>
86+
<PageTemplate title={{label:'PageTemplate Component'}}
87+
search={{onchange:()=>alert('searching...'),value:'Search',placeholder:'Search',disabled:true}}
88+
results={{number:4,label:'results'}}
89+
>Children</PageTemplate>
90+
</Playground>
91+
92+
<WindowEditor codeString={`import { PageTemplate } from "dd360-ds"
93+
94+
<PageTemplate
95+
title={{label:'PageTemplate Component'}}
96+
results={{number:4,label:'results'}}>
97+
Children
98+
</PageTemplate>
99+
`} />
100+
101+
<br />
102+
<br />
103+
104+
##### <span name="floating-nav">ViewToggle</span>
105+
106+
With the prop <TagDocs text='ViewToggle' />, you can pass an object with properties like `onToggle`, `isActive`, `iconOff`, and `iconOn` to enable a toggle button within the `PageTemplate` component. This allows users to switch between different views, such as list or grid.
107+
108+
<Playground>
109+
<PageTemplate title={{label:'PageTemplate Component'}}
110+
search={{onchange:()=>alert('searching...'),value:'Search',placeholder:'Search',disabled:true}}
111+
results={{number:4,label:'results'}}
112+
viewToggle= {{
113+
onToggle: () => alert('View toggled'),
114+
isActive: false,
115+
iconOff: <span>A</span>,
116+
iconOn: <span>B</span>}
117+
}
118+
>Children</PageTemplate>
119+
</Playground>
120+
121+
<WindowEditor codeString={`import { PageTemplate } from "dd360-ds"
122+
123+
<PageTemplate
124+
title={{label:'PageTemplate Component'}}
125+
results={{number:4,label:'results'}}
126+
viewToggle= {{
127+
onToggle: () => alert('View toggled'),
128+
isActive: false,
129+
iconOff: <span>A</span>,
130+
iconOn: <span>B</span>}
131+
}>
132+
Children
133+
</PageTemplate>
134+
`} />
135+
136+
<br />
137+
<br />
138+
139+
##### <span name="floating-nav">Filters</span>
140+
141+
With the prop <TagDocs text='Filters' />, With the prop <TagDocs text='Filters' />, you can pass an object to define filtering options within the `PageTemplate` component. This allows you to add dropdown checkboxes with customizable options, labels, and callback functions for submission and closing.
142+
143+
<Playground className='h-72'>
144+
<PageTemplate title={{label:'PageTemplate Component'}}
145+
filters={{ dropdownCheckbox: [{ cancelText: 'Cancel',
146+
confirmText: 'Confirm',
147+
onSubmit: () => alert('Checkbox filter submitted'),
148+
onClose: () => alert('Checkbox filter closed'),
149+
title: 'Filter Options',
150+
align: 'left',
151+
options: [ { label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' },{ label: 'Option 3', value: 'option3' }
152+
],
153+
allText: 'Select All',
154+
initialValue: ['option1']
155+
}
156+
]}}
157+
>Children</PageTemplate>
158+
</Playground>
159+
160+
<WindowEditor codeString={`import { PageTemplate } from "dd360-ds"
161+
162+
<PageTemplate
163+
title={{label:'PageTemplate Component'}}
164+
filters={{ dropdownCheckbox: [{ cancelText: 'Cancel',
165+
confirmText: 'Confirm',
166+
onSubmit: () => alert('Checkbox filter submitted'),
167+
onClose: () => alert('Checkbox filter closed'),
168+
title: 'Filter Options',
169+
align: 'left',
170+
options: [
171+
{ label: 'Option 1', value: 'option1' },
172+
{ label: 'Option 2', value: 'option2' },
173+
{ label: 'Option 3', value: 'option3' }
174+
],
175+
allText: 'Select All',
176+
initialValue: ['option1']
177+
}
178+
]}}>
179+
Children
180+
</PageTemplate>
181+
`} />
182+
183+
<br />
184+
<br />
185+
186+
##### <span name="floating-nav">ClearFilters</span>
187+
188+
With the prop <TagDocs text='ClearFilters' />, you can pass an object to define a button or action to reset the filters applied within the `PageTemplate` component. This allows you to customize the button label and define a callback function that executes when the button is clicked.
189+
190+
<Playground className='h-72'>
191+
<PageTemplate title={{label:'PageTemplate Component'}}
192+
filters={{ dropdownCheckbox: [{ cancelText: 'Cancel',
193+
confirmText: 'Confirm',
194+
onSubmit: () => alert('Checkbox filter submitted'),
195+
onClose: () => alert('Checkbox filter closed'),
196+
title: 'Filter Options',
197+
align: 'left',
198+
options: [ { label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' },{ label: 'Option 3', value: 'option3' }
199+
],
200+
allText: 'Select All',
201+
initialValue: ['option1']
202+
}
203+
]}}
204+
clearFilters={{
205+
label: 'Restore',
206+
onClick: () => alert('Filters have been reset')
207+
}}
208+
>Children</PageTemplate>
209+
</Playground>
210+
211+
<WindowEditor codeString={`import { PageTemplate } from "dd360-ds"
212+
213+
<PageTemplate
214+
title={{label:'PageTemplate Component'}}
215+
filters={{ dropdownCheckbox: [{ cancelText: 'Cancel',
216+
confirmText: 'Confirm',
217+
onSubmit: () => alert('Checkbox filter submitted'),
218+
onClose: () => alert('Checkbox filter closed'),
219+
title: 'Filter Options',
220+
align: 'left',
221+
options: [
222+
{ label: 'Option 1', value: 'option1' },
223+
{ label: 'Option 2', value: 'option2' },
224+
{ label: 'Option 3', value: 'option3' }
225+
],
226+
allText: 'Select All',
227+
initialValue: ['option1']
228+
}
229+
]}}
230+
clearFilters={{
231+
label: 'Restore',
232+
onClick: () => alert('Filters have been reset')
233+
}}>
234+
Children
235+
</PageTemplate>
236+
`} />
237+
238+
<br />
239+
<br />
240+
241+
##### <span name="floating-nav">CallToAction</span>
242+
243+
With the prop <TagDocs text='CallToAction' />, you can pass an object to define a customizable button within the `PageTemplate` component. This allows you to specify a label, an icon, and an `onClick` event handler to define the action that will be executed when the button is clicked.
244+
245+
<Playground className='h-72'>
246+
<PageTemplate title={{label:'PageTemplate Component'}}
247+
filters={{ dropdownCheckbox: [{ cancelText: 'Cancel',
248+
confirmText: 'Confirm',
249+
onSubmit: () => alert('Checkbox filter submitted'),
250+
onClose: () => alert('Checkbox filter closed'),
251+
title: 'Filter Options',
252+
align: 'left',
253+
options: [ { label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' },{ label: 'Option 3', value: 'option3' }
254+
],
255+
allText: 'Select All',
256+
initialValue: ['option1']
257+
}
258+
]}}
259+
callToAction={{
260+
onClick: () => alert('call to action clicked'),
261+
label: 'Call to action',
262+
icon: "CalendarIcon" }}
263+
>Children</PageTemplate>
264+
</Playground>
265+
266+
<WindowEditor codeString={`import { PageTemplate } from "dd360-ds"
267+
268+
<PageTemplate
269+
title={{label:'PageTemplate Component'}}
270+
filters={{ dropdownCheckbox: [{ cancelText: 'Cancel',
271+
confirmText: 'Confirm',
272+
onSubmit: () => alert('Checkbox filter submitted'),
273+
onClose: () => alert('Checkbox filter closed'),
274+
title: 'Filter Options',
275+
align: 'left',
276+
options: [
277+
{ label: 'Option 1', value: 'option1' },
278+
{ label: 'Option 2', value: 'option2' },
279+
{ label: 'Option 3', value: 'option3' }
280+
],
281+
allText: 'Select All',
282+
initialValue: ['option1']
283+
}
284+
]}}
285+
callToAction={{
286+
onClick: () => alert('call to action clicked'),
287+
label: 'Call to action',
288+
icon: "CalendarIcon" }}>
289+
Children
290+
</PageTemplate>
291+
`} />
292+
293+
<br />
294+
<br />
295+
296+
##### <span name="floating-nav">ArrowSelector</span>
297+
298+
With the prop <TagDocs text='ArrowSelector' />, you can pass an object to display left and right navigation buttons within the `PageTemplate` component. This allows you to define a label and set `onClickLeft` and `onClickRight` event handlers to execute custom actions when the user clicks the left or right buttons.
299+
300+
<Playground >
301+
<PageTemplate title={{label:'PageTemplate Component'}}
302+
results={{number:4,label:'results'}}
303+
arrowSelector={ {
304+
label: 'Action Move',
305+
onClickLeft: () => alert('Navigated left'),
306+
onClickRight: () => alert('Navigated right')
307+
}}
308+
>Children</PageTemplate>
309+
</Playground>
310+
311+
<WindowEditor codeString={`import { PageTemplate } from "dd360-ds"
312+
313+
<PageTemplate
314+
title={{label:'PageTemplate Component'}}
315+
results={{number:4,label:'results'}}
316+
arrowSelector={ {
317+
label: 'Move to Month',
318+
onClickLeft: () => alert('Navigated left'),
319+
onClickRight: () => alert('Navigated right')
320+
}}
321+
Children
322+
</PageTemplate>
323+
`} />
324+
325+
<br />
326+
<br />
327+
328+
##### <span name="floating-nav">API Reference</span>
329+
330+
<CustomTableDocs
331+
dataTable={[
332+
{ title: 'children', default: null, types: ['React.React.Node'] },
333+
{ title: 'footer', default: null, types: ['React.React.Node'],},
334+
{ title: 'search', default: null, types: ['FilterSearchProps'],},
335+
{ title: 'results', default: null, types: ['FilterLabelProps'],},
336+
{ title: 'viewToggle', default: null, types: ['ToggleButtonProps'],},
337+
{ title: 'filters', default: null, types: ['FiltersProps'],},
338+
{ title: 'clearFilters', default: null, types: ['ClearFiltersProps'],},
339+
{ title: 'callToAction', default: null, types: ['CallToActionProps'],},
340+
{ title: 'arrowSelector', default: null, types: ['ArrowSelectorProps'],},
341+
{ title: 'role', default: null, types: ['string'],},
342+
{ title: 'hiddenFilterBar', default: null, types: ['boolean'],},
343+
// Note about additional props extending from TopPageProps
344+
{ title: '...otherProps', default: null, types: ['TopPageProps'], description: 'This component also accepts all props that extend from the TopPage component.' },
345+
]}
346+
/>
347+
348+
<BackAndForwardController />

0 commit comments

Comments
 (0)