Skip to content

Commit 9ae100b

Browse files
JialeclJialecl
committed
New API documentation for ActionsCell
1 parent 3959e76 commit 9ae100b

File tree

7 files changed

+253
-19
lines changed

7 files changed

+253
-19
lines changed

‎lib/src/table/ActionsCell.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ const overwriteTheme = (theme: DeepPartial<AdvancedTheme>) => {
2222
newTheme.dropdown.buttonIconColor = theme.table.actionIconColor;
2323
newTheme.dropdown.disabledColor = theme.table.disabledActionIconColor;
2424
newTheme.dropdown.disabledButtonBackgroundColor = theme.table.disabledActionBackgroundColor;
25-
console.log(newTheme);
2625
return newTheme;
2726
};
2827

‎website/package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/screens/common/TableCode.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const ExtendedTableCode = ({
2020

2121
const ExtendedCodeContainer = styled.div`
2222
width: 100%;
23-
white-space: pre-wrap;
23+
white-space: pre;
2424
padding: 2px 4px;
2525
background-color: #f2eafa;
2626
border-radius: 0.25rem;

‎website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx‎

Lines changed: 86 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,34 @@
1-
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
1+
import {
2+
DxcFlex,
3+
DxcLink,
4+
DxcParagraph,
5+
DxcTable,
6+
} from "@dxc-technology/halstack-react";
27
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
38
import QuickNavContainer from "@/common/QuickNavContainer";
49
import Code from "@/common/Code";
510
import DocFooter from "@/common/DocFooter";
611
import Example from "@/common/example/Example";
712
import basicUsage from "./examples/basicUsage";
813
import sortable from "./examples/sortable";
9-
import TableCode from "@/common/TableCode";
14+
import TableCode, { ExtendedTableCode } from "@/common/TableCode";
1015
import StatusTag from "@/common/StatusTag";
1116
import reduced from "./examples/reduced";
17+
import Link from "next/link";
18+
19+
const actionsType = `{
20+
icon: string | SVG;
21+
title: string;
22+
onClick: () => void;
23+
disabled?: boolean;
24+
tabIndex?: number;
25+
}[] | {
26+
title: string;
27+
onClick: (value?: string) => void;
28+
disabled?: boolean;
29+
tabIndex?: number;
30+
options: Option[];
31+
}[]`;
1232

1333
const sections = [
1434
{
@@ -90,11 +110,12 @@ const sections = [
90110
<td>
91111
The available table modes:
92112
<ul>
93-
<li>
113+
<li>
94114
<b>default</b>: Default table size.
95115
</li>
96116
<li>
97-
<b>reduced</b>: More compact table with less spacing for high density information.
117+
<b>reduced</b>: More compact table with less spacing for high
118+
density information.
98119
</li>
99120
</ul>
100121
</td>
@@ -178,6 +199,66 @@ const sections = [
178199
</DxcTable>
179200
),
180201
},
202+
{
203+
title: "DxcResultsetTable.ActionsCell",
204+
content: (
205+
<DxcParagraph>
206+
A compound component aimed to be used inside the resultset table's
207+
displayValue.
208+
</DxcParagraph>
209+
),
210+
subSections: [
211+
{
212+
title: "Props",
213+
content: (
214+
<DxcTable>
215+
<thead>
216+
<tr>
217+
<th>Name</th>
218+
<th>Type</th>
219+
<th>Description</th>
220+
<th>Default</th>
221+
</tr>
222+
</thead>
223+
<tbody>
224+
<tr>
225+
<td>
226+
<DxcFlex
227+
direction="column"
228+
gap="0.25rem"
229+
alignItems="baseline"
230+
>
231+
<StatusTag status="Required">Required</StatusTag>actions
232+
</DxcFlex>
233+
</td>
234+
<td>
235+
<ExtendedTableCode>{actionsType}</ExtendedTableCode>
236+
</td>
237+
<td>
238+
<p>
239+
This prop represents a list of interactuable elements that
240+
will work as buttons or as a dropdown. Those with an
241+
<TableCode>icon</TableCode> are treated as buttons. If any
242+
element lacks an <TableCode>icon</TableCode> and includes
243+
<TableCode>options</TableCode>, it is interpreted as a
244+
dropdown. Only the first one with options will be displayed
245+
and no more than three elements will be displayed in total.
246+
In the case of the dropdown the click function will pass the
247+
value assigned to the option, check{" "}
248+
<Link href="/components/dropdown" passHref legacyBehavior>
249+
<DxcLink>dropdown</DxcLink>
250+
</Link>{" "}
251+
for more details.
252+
</p>
253+
</td>
254+
<td>-</td>
255+
</tr>
256+
</tbody>
257+
</DxcTable>
258+
),
259+
},
260+
],
261+
},
181262
{
182263
title: "Examples",
183264
subSections: [
@@ -187,9 +268,7 @@ const sections = [
187268
},
188269
{
189270
title: "Reduced usage",
190-
content: (
191-
<Example example={reduced} defaultIsVisible />
192-
),
271+
content: <Example example={reduced} defaultIsVisible />,
193272
},
194273
{
195274
title: "Sortable",

‎website/screens/components/table/code/TableCodePage.tsx‎

Lines changed: 90 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,33 @@
1-
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
1+
import {
2+
DxcFlex,
3+
DxcLink,
4+
DxcParagraph,
5+
DxcTable,
6+
} from "@dxc-technology/halstack-react";
27
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
38
import QuickNavContainer from "@/common/QuickNavContainer";
49
import DocFooter from "@/common/DocFooter";
510
import Example from "@/common/example/Example";
6-
import basic from "./examples/basicUsage";
11+
import TableCode, { ExtendedTableCode } from "@/common/TableCode";
712
import StatusTag from "@/common/StatusTag";
8-
import TableCode from "@/common/TableCode";
13+
import basic from "./examples/basicUsage";
914
import reduced from "./examples/reduced";
15+
import Link from "next/link";
16+
import actions from "./examples/actions";
17+
18+
const actionsType = `{
19+
icon: string | SVG;
20+
title: string;
21+
onClick: () => void;
22+
disabled?: boolean;
23+
tabIndex?: number;
24+
}[] | {
25+
title: string;
26+
onClick: (value?: string) => void;
27+
disabled?: boolean;
28+
tabIndex?: number;
29+
options: Option[];
30+
}[]`;
1031

1132
const sections = [
1233
{
@@ -53,7 +74,8 @@ const sections = [
5374
<b>default</b>: Default table size.
5475
</li>
5576
<li>
56-
<b>reduced</b>: More compact table with less spacing for high density information.
77+
<b>reduced</b>: More compact table with less spacing for high
78+
density information.
5779
</li>
5880
</ul>
5981
</td>
@@ -80,6 +102,65 @@ const sections = [
80102
</DxcTable>
81103
),
82104
},
105+
{
106+
title: "DxcTable.ActionsCell",
107+
content: (
108+
<DxcParagraph>
109+
A compound component aimed to be used inside the table.
110+
</DxcParagraph>
111+
),
112+
subSections: [
113+
{
114+
title: "Props",
115+
content: (
116+
<DxcTable>
117+
<thead>
118+
<tr>
119+
<th>Name</th>
120+
<th>Type</th>
121+
<th>Description</th>
122+
<th>Default</th>
123+
</tr>
124+
</thead>
125+
<tbody>
126+
<tr>
127+
<td>
128+
<DxcFlex
129+
direction="column"
130+
gap="0.25rem"
131+
alignItems="baseline"
132+
>
133+
<StatusTag status="Required">Required</StatusTag>actions
134+
</DxcFlex>
135+
</td>
136+
<td>
137+
<ExtendedTableCode>{actionsType}</ExtendedTableCode>
138+
</td>
139+
<td>
140+
<p>
141+
This prop represents a list of interactuable elements that
142+
will work as buttons or as a dropdown. Those with an
143+
<TableCode>icon</TableCode> are treated as buttons. If any
144+
element lacks an <TableCode>icon</TableCode> and includes
145+
<TableCode>options</TableCode>, it is interpreted as a
146+
dropdown. Only the first one with options will be displayed
147+
and no more than three elements will be displayed in total.
148+
In the case of the dropdown the click function will pass the
149+
value assigned to the option, check{" "}
150+
<Link href="/components/dropdown" passHref legacyBehavior>
151+
<DxcLink>dropdown</DxcLink>
152+
</Link>{" "}
153+
for more details.
154+
</p>
155+
</td>
156+
<td>-</td>
157+
</tr>
158+
</tbody>
159+
</DxcTable>
160+
),
161+
},
162+
],
163+
},
83164
{
84165
title: "Examples",
85166
subSections: [
@@ -93,9 +174,11 @@ const sections = [
93174
},
94175
{
95176
title: "Reduced usage",
96-
content: (
97-
<Example example={reduced} defaultIsVisible />
98-
),
177+
content: <Example example={reduced} defaultIsVisible />,
178+
},
179+
{
180+
title: "Actions cell usage",
181+
content: <Example example={actions} defaultIsVisible />,
99182
},
100183
],
101184
},

‎website/screens/components/table/code/examples/Icons.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from "react";
2+
3+
export const deleteIcon = (
4+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
5+
<path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
6+
<path d="M0 0h24v24H0z" fill="none" />
7+
</svg>
8+
);
9+

‎website/screens/components/table/code/examples/actions.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { DxcTable, DxcInset } from "@dxc-technology/halstack-react";
2+
import { deleteIcon } from "./Icons";
3+
4+
const code = `() => {
5+
const actions = [
6+
{
7+
icon: deleteIcon,
8+
title: "icon",
9+
onClick: () => {},
10+
},
11+
{
12+
title: "edit",
13+
onClick: (value) => {},
14+
options:[
15+
{
16+
value: "1",
17+
label: "Edit",
18+
},
19+
{
20+
value: "2",
21+
label: "Mark as selected",
22+
},
23+
]
24+
},
25+
];
26+
return (
27+
<DxcInset space="2rem">
28+
<DxcTable mode="reduced">
29+
<thead>
30+
<tr>
31+
<th>header 1</th>
32+
<th>header 2</th>
33+
<th>actions</th>
34+
</tr>
35+
</thead>
36+
<tbody>
37+
<tr>
38+
<td>cell 1</td>
39+
<td>cell 2</td>
40+
<td><DxcTable.ActionsCell actions={actions} /></td>
41+
</tr>
42+
<tr>
43+
<td>cell 4</td>
44+
<td>cell 5</td>
45+
<td><DxcTable.ActionsCell actions={actions} /></td>
46+
</tr>
47+
<tr>
48+
<td>cell 7</td>
49+
<td>cell 8</td>
50+
<td><DxcTable.ActionsCell actions={actions} /></td>
51+
</tr>
52+
</tbody>
53+
</DxcTable>
54+
</DxcInset>
55+
);
56+
}`;
57+
58+
const scope = {
59+
DxcTable,
60+
DxcInset,
61+
deleteIcon,
62+
};
63+
64+
export default { code, scope };

0 commit comments

Comments
 (0)