Skip to content

Commit a46671b

Browse files
willcodeforcoffeewillcodeforcoffee
committed
feat(#2469): Added PushDrawer documentation
1 parent f63a082 commit a46671b

File tree

1 file changed

+195
-63
lines changed

1 file changed

+195
-63
lines changed

‎src/routes/components/PushDrawer.tsx‎

Lines changed: 195 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -20,36 +20,37 @@ import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
2020

2121
const componentName = "Push Drawer";
2222
const description = "TODO: Add description here.";
23-
type ComponentPropsType = GoabPushDrawerProps;
24-
type CastingType = {
25-
// add any required props here
26-
[key: string]: unknown;
27-
};
23+
// type ComponentPropsType = GoabPushDrawerProps;
24+
// type CastingType = {
25+
// // add any required props here
26+
// [key: string]: unknown;
27+
// };
2828

2929
export default function PushDrawerPage() {
30-
const [open, setOpen] = useState(false);
30+
// const [open, setOpen] = useState(false);
3131

32-
const [componentProps, setComponentProps] = useState<ComponentPropsType>({
33-
open: open,
34-
heading: "Push Drawer heading",
35-
width: "492px",
36-
onClose: null,
37-
children: (
38-
<>
39-
<div style={{ height: "200px" }}>
40-
<h1>This is component children</h1>
41-
<p>More content inside the Push Drawer.</p>
42-
</div>
43-
</>
44-
),
45-
});
32+
// const [componentProps, setComponentProps] = useState<ComponentPropsType>({
33+
// open: open,
34+
// heading: "Push Drawer heading",
35+
// width: "492px",
36+
// onClose: null,
37+
// children: (
38+
// <>
39+
// <div style={{ height: "200px" }}>
40+
// <h1>This is component children</h1>
41+
// <p>More content inside the Push Drawer.</p>
42+
// </div>
43+
// </>
44+
// ),
45+
// });
4646

47-
const [componentBindings, setComponentBindings] = useState<ComponentBinding[]>([]);
47+
// const [componentBindings, setComponentBindings] = useState<ComponentBinding[]>([]);
4848

4949
const componentProperties: ComponentProperty[] = [
5050
{
5151
name: "open",
5252
type: "boolean",
53+
description: "Determines whether the drawer is open.",
5354
required: false,
5455
},
5556
{
@@ -68,15 +69,22 @@ export default function PushDrawerPage() {
6869
name: "width",
6970
type: "string",
7071
required: false,
72+
description: "Width of the drawer (e.g., '300px', '30%').",
73+
},
74+
{
75+
name: "actions",
76+
type: "ReactNode",
77+
description: "Actions to display in the drawer.",
78+
lang: "react",
79+
},
80+
{
81+
name: "actions",
82+
type: "TemplateRef",
83+
description: "Actions to display in the drawer.",
84+
lang: "angular",
7185
},
72-
// ...
7386
];
7487

75-
function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
76-
setComponentBindings(bindings);
77-
// setComponentProps(props as CastingType);
78-
}
79-
8088
return (
8189
<>
8290
<ComponentHeader
@@ -85,39 +93,8 @@ export default function PushDrawerPage() {
8593
description={description}
8694
/>
8795

88-
<GoabTabs>
89-
<GoabTab heading="Code playground">
90-
<h2 id="component" style={{ display: "none" }}>
91-
Push Drawer Component
92-
</h2>
93-
<Sandbox
94-
properties={componentBindings}
95-
onChange={onSandboxChange}
96-
skipRenderDom={true}
97-
variableNames={["open"]}>
98-
<GoabPushDrawer {...componentProps} open={true} onClose={() => setOpen(false)}>
99-
<p>
100-
This is a drawer. It is a panel that slides in from the edge of the screen to
101-
provide users access to secondary content and actions without leaving the current
102-
page.
103-
</p>
104-
</GoabPushDrawer>
105-
</Sandbox>
106-
107-
<ComponentProperties properties={componentProperties} />
108-
</GoabTab>
96+
<GoabTabs initialTab={0}>
10997
<GoabTab heading="Code examples">
110-
<Sandbox properties={componentBindings} onChange={onSandboxChange}>
111-
<GoabPushDrawer
112-
{...componentProps}
113-
actions={<GoabButton variant="normal">Close</GoabButton>}>
114-
<p style={{ minHeight: "30vh" }}>This is the content inside the Push Drawer.</p>
115-
<div key={`key=${Date.now()}`}>
116-
<h1>Drawer</h1>
117-
<p>This is a drawer</p>
118-
</div>
119-
</GoabPushDrawer>
120-
</Sandbox>
12198
<ComponentProperties properties={componentProperties} />
12299

123100
<h2 id="examples" className="hidden" aria-hidden="true">
@@ -129,13 +106,13 @@ export default function PushDrawerPage() {
129106
style={{
130107
display: "flex",
131108
flexDirection: "row",
132-
minHeight: "80vh",
109+
minHeight: "550px",
133110
}}>
134111
<div
135112
style={{
136113
flex: "1 1 0%",
137114
overflow: "hidden",
138-
border: "1px solid green",
115+
border: "var(--goa-border-width-s) solid var(--goa-color-greyscale-200)",
139116
}}
140117
test-id="container">
141118
<h1>Pushed In Content</h1>
@@ -155,12 +132,22 @@ export default function PushDrawerPage() {
155132
<tr key="row-1">
156133
<td>John</td>
157134
<td>Doe</td>
158-
<td className="goa-table-number-column">123</td>
135+
<td className="goa-table-number-column">1234</td>
159136
</tr>
160137
<tr key="row-2">
161138
<td>Jane</td>
162139
<td>Roe</td>
163-
<td className="goa-table-number-column">123</td>
140+
<td className="goa-table-number-column">2345</td>
141+
</tr>
142+
<tr key="row-3">
143+
<td>Don</td>
144+
<td>Joe</td>
145+
<td className="goa-table-number-column">3456</td>
146+
</tr>
147+
<tr key="row-4">
148+
<td>Ron</td>
149+
<td>Toe</td>
150+
<td className="goa-table-number-column">4567</td>
164151
</tr>
165152
</tbody>
166153
</GoabTable>
@@ -180,6 +167,151 @@ export default function PushDrawerPage() {
180167
</div>
181168
</GoabPushDrawer>
182169
</div>
170+
171+
<CodeSnippet
172+
lang="typescript"
173+
tags="angular"
174+
allowCopy={true}
175+
code={`
176+
<goab-page-block width="100%">
177+
<div style="display: flex; flex-direction: row; min-height: 550px">
178+
<div
179+
style="flex: 1 1 0%; overflow: hidden; border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200)"
180+
test-id="container"
181+
>
182+
<h1>Pushed In Content</h1>
183+
<div style={{ display: "flex", gap: "10px", marginTop: "20px" }}>
184+
<h2>This Content Gets Pushed</h2>
185+
</div>
186+
<p>Some might call it a shove.</p>
187+
<goab-table width="100%">
188+
<thead>
189+
<tr>
190+
<th>First</th>
191+
<th>Last</th>
192+
<th className="goa-table-number-header">Number Column</th>
193+
</tr>
194+
</thead>
195+
<tbody>
196+
<tr key="row-1">
197+
<td>John</td>
198+
<td>Doe</td>
199+
<td className="goa-table-number-column">1234</td>
200+
</tr>
201+
<tr key="row-2">
202+
<td>Jane</td>
203+
<td>Roe</td>
204+
<td className="goa-table-number-column">2345</td>
205+
</tr>
206+
<tr key="row-3">
207+
<td>Don</td>
208+
<td>Joe</td>
209+
<td className="goa-table-number-column">3456</td>
210+
</tr>
211+
<tr key="row-4">
212+
<td>Ron</td>
213+
<td>Toe</td>
214+
<td className="goa-table-number-column">4567</td>
215+
</tr>
216+
</tbody>
217+
</goab-table>
218+
</div>
219+
<goab-push-drawer
220+
testId="drawer"
221+
[open]="true"
222+
heading="Push Drawer"
223+
[width]="'300px'"
224+
[actions]="drawerActions"
225+
(onClose)="closePushDrawer()"
226+
>
227+
<div>
228+
<h1>Drawer</h1>
229+
<p>
230+
This is drawer content. It pushes the main content to the side, out of its way.
231+
</p>
232+
</div>
233+
</goab-push-drawer>
234+
</div>
235+
</goab-page-block>
236+
237+
<ng-template #drawerActions>
238+
<goab-button (click)="closePushDrawer()">Close</goab-button>
239+
</ng-template>
240+
`}
241+
/>
242+
243+
<CodeSnippet
244+
lang="typescript"
245+
tags="react"
246+
allowCopy={true}
247+
code={`
248+
<div
249+
style={{
250+
display: "flex",
251+
flexDirection: "row",
252+
minHeight: "550px",
253+
}}>
254+
<div
255+
style={{
256+
flex: "1 1 0%",
257+
overflow: "hidden",
258+
border: "var(--goa-border-width-s) solid var(--goa-color-greyscale-200)",
259+
}}
260+
test-id="container">
261+
<h1>Pushed In Content</h1>
262+
<div style={{ display: "flex", gap: "10px", marginTop: "20px" }}>
263+
<h2>This Content Gets Pushed</h2>
264+
</div>
265+
<p>Some might call it a shove.</p>
266+
<GoabTable width="100%">
267+
<thead>
268+
<tr>
269+
<th>First</th>
270+
<th>Last</th>
271+
<th className="goa-table-number-header">Number Column</th>
272+
</tr>
273+
</thead>
274+
<tbody>
275+
<tr key="row-1">
276+
<td>John</td>
277+
<td>Doe</td>
278+
<td className="goa-table-number-column">1234</td>
279+
</tr>
280+
<tr key="row-2">
281+
<td>Jane</td>
282+
<td>Roe</td>
283+
<td className="goa-table-number-column">2345</td>
284+
</tr>
285+
<tr key="row-3">
286+
<td>Don</td>
287+
<td>Joe</td>
288+
<td className="goa-table-number-column">3456</td>
289+
</tr>
290+
<tr key="row-4">
291+
<td>Ron</td>
292+
<td>Toe</td>
293+
<td className="goa-table-number-column">4567</td>
294+
</tr>
295+
</tbody>
296+
</GoabTable>
297+
</div>
298+
<GoabPushDrawer
299+
testId="drawer"
300+
open={true}
301+
heading="Push Drawer"
302+
width="300px"
303+
onClose={() => {}}
304+
actions={<GoabButton>Close</GoabButton>}>
305+
<div>
306+
<h1>Drawer</h1>
307+
<p>
308+
This is drawer content. It pushes the main content to the side, out of its way.
309+
</p>
310+
</div>
311+
</GoabPushDrawer>
312+
</div>
313+
`}
314+
/>
183315
</GoabTab>
184316

185317
<GoabTab heading={<>Design guidelines</>}></GoabTab>

0 commit comments

Comments
 (0)