Skip to content

Commit 488ec71

Browse files
JialeclJialecl
authored
Merge pull request #1905 from dxc-technology/Mil4n0r/compound_component-doc
Standardize documentation of compound components
2 parents 5b15506 + b8f7f1d commit 488ec71

File tree

3 files changed

+91
-107
lines changed

3 files changed

+91
-107
lines changed

‎website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx‎

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -104,32 +104,27 @@ const ApplicationLayoutPropsTable = () => (
104104
const sections = [
105105
{
106106
title: "Props",
107-
subSections: [
108-
{
109-
title: "DxcApplicationLayout",
110-
content: <ApplicationLayoutPropsTable />,
111-
},
112-
{
113-
title: "DxcApplicationLayout.Main",
114-
content: (
115-
<DxcParagraph>
116-
Everything between the tags will be displayed as the main content of
117-
the application layout.
118-
</DxcParagraph>
119-
),
120-
},
121-
{
122-
title: "DxcApplicationLayout.useResponsiveSidenavVisibility",
123-
content: (
124-
<DxcParagraph>
125-
Custom hook that returns a function to manually change the
126-
visibility of the sidenav in responsive mode. This can be very
127-
useful for cases where a custom sidenav is being used and some of
128-
its inner elements can close it (for example, a navigation link).
129-
</DxcParagraph>
130-
),
131-
},
132-
],
107+
content: <ApplicationLayoutPropsTable />,
108+
},
109+
{
110+
title: "DxcApplicationLayout.Main",
111+
content: (
112+
<DxcParagraph>
113+
Everything between the tags will be displayed as the main content of the
114+
application layout.
115+
</DxcParagraph>
116+
),
117+
},
118+
{
119+
title: "DxcApplicationLayout.useResponsiveSidenavVisibility",
120+
content: (
121+
<DxcParagraph>
122+
Custom hook that returns a function to manually change the visibility of
123+
the sidenav in responsive mode. This can be very useful for cases where
124+
a custom sidenav is being used and some of its inner elements can close
125+
it (for example, a navigation link).
126+
</DxcParagraph>
127+
),
133128
},
134129
{
135130
title: "Examples",

‎website/screens/components/bulleted-list/code/BulletedListCodePage.tsx‎

Lines changed: 57 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,62 @@ import TableCode from "@/common/TableCode";
1616
const sections = [
1717
{
1818
title: "Props",
19+
content: (
20+
<DxcTable>
21+
<thead>
22+
<tr>
23+
<th>Name</th>
24+
<th>Type</th>
25+
<th>Description</th>
26+
<th>Default</th>
27+
</tr>
28+
</thead>
29+
<tbody>
30+
<tr>
31+
<td>type</td>
32+
<td>
33+
<TableCode>
34+
'disc' | 'circle' | 'square' | 'number' | 'icon'
35+
</TableCode>
36+
</td>
37+
<td>Defines the style of the bullet point in the list.</td>
38+
<td>
39+
<Code>'disc'</Code>
40+
</td>
41+
</tr>
42+
<tr>
43+
<td>icon</td>
44+
<td>
45+
<TableCode>
46+
string | {"(React.ReactNode & React.SVGProps<SVGSVGElement>)"}
47+
</TableCode>
48+
</td>
49+
<td>
50+
<DxcLink newWindow href="https://fonts.google.com/icons">
51+
Material Symbol
52+
</DxcLink>{" "}
53+
name or SVG element to be displayed as the bullet. When using
54+
Material Symbols, replace spaces with underscores. By default they
55+
are outlined if you want it to be filled prefix the symbol name
56+
with <TableCode>"filled_"</TableCode>.
57+
</td>
58+
<td>-</td>
59+
</tr>
60+
</tbody>
61+
</DxcTable>
62+
),
63+
},
64+
{
65+
title: "DxcBulletedList.Item",
66+
content: (
67+
<DxcParagraph>
68+
Everything between the tags will be displayed as a text item in the
69+
list.
70+
</DxcParagraph>
71+
),
1972
subSections: [
2073
{
21-
title: "DxcBulletedList",
74+
title: "Props",
2275
content: (
2376
<DxcTable>
2477
<thead>
@@ -31,76 +84,17 @@ const sections = [
3184
</thead>
3285
<tbody>
3386
<tr>
34-
<td>type</td>
35-
<td>
36-
<TableCode>
37-
'disc' | 'circle' | 'square' | 'number' | 'icon'
38-
</TableCode>
39-
</td>
40-
<td>Defines the style of the bullet point in the list.</td>
41-
<td>
42-
<Code>'disc'</Code>
43-
</td>
44-
</tr>
45-
<tr>
46-
<td>icon</td>
47-
<td>
48-
<TableCode>
49-
string |{" "}
50-
{"(React.ReactNode & React.SVGProps<SVGSVGElement>)"}
51-
</TableCode>
52-
</td>
87+
<td>children</td>
5388
<td>
54-
<DxcLink newWindow href="https://fonts.google.com/icons">
55-
Material Symbol
56-
</DxcLink>{" "}
57-
name or SVG element to be displayed as the bullet. When using
58-
Material Symbols, replace spaces with underscores. By default
59-
they are outlined if you want it to be filled prefix the
60-
symbol name with <TableCode>"filled_"</TableCode>.
89+
<TableCode>React.ReactNode</TableCode>
6190
</td>
91+
<td>Text to be shown in the list.</td>
6292
<td>-</td>
6393
</tr>
6494
</tbody>
6595
</DxcTable>
6696
),
6797
},
68-
{
69-
title: "DxcBulletedList.Item",
70-
content: (
71-
<DxcParagraph>
72-
Everything between the tags will be displayed as a text item in the
73-
list.
74-
</DxcParagraph>
75-
),
76-
subSections: [
77-
{
78-
title: "Props",
79-
content: (
80-
<DxcTable>
81-
<thead>
82-
<tr>
83-
<th>Name</th>
84-
<th>Type</th>
85-
<th>Description</th>
86-
<th>Default</th>
87-
</tr>
88-
</thead>
89-
<tbody>
90-
<tr>
91-
<td>children</td>
92-
<td>
93-
<TableCode>React.ReactNode</TableCode>
94-
</td>
95-
<td>Text to be shown in the list.</td>
96-
<td>-</td>
97-
</tr>
98-
</tbody>
99-
</DxcTable>
100-
),
101-
},
102-
],
103-
},
10498
],
10599
},
106100
{

‎website/screens/components/header/code/HeaderCodePage.tsx‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -104,24 +104,19 @@ const sections = [
104104
),
105105
},
106106
{
107-
title: "Children",
108-
subSections: [
109-
{
110-
title: "DxcHeader.Dropdown",
111-
content: (
112-
<DxcParagraph>
113-
Everything between this tags will be displayed as a dropdown. If you
114-
want to show a{" "}
115-
<Link href="/components/dropdown" passHref legacyBehavior>
116-
<DxcLink>DxcDropdown</DxcLink>
117-
</Link>
118-
, as a shortcut, you can also use it as a direct child of the
119-
DxcHeader without the tags, but we recommend to use it with the tags
120-
since some styles will be applied for a better fit in the header.
121-
</DxcParagraph>
122-
),
123-
},
124-
],
107+
title: "DxcHeader.Dropdown",
108+
content: (
109+
<DxcParagraph>
110+
Everything between the tags will be displayed as a dropdown. If you
111+
want to show a{" "}
112+
<Link href="/components/dropdown" passHref legacyBehavior>
113+
<DxcLink>DxcDropdown</DxcLink>
114+
</Link>
115+
, as a shortcut, you can also use it as a direct child of the DxcHeader
116+
without the tags, but we recommend to use it with the tags since some
117+
styles will be applied for a better fit in the header.
118+
</DxcParagraph>
119+
),
125120
},
126121
{
127122
title: "Examples",

0 commit comments

Comments
 (0)