Skip to content

Commit 95b953e

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #1853 from dxc-technology/jialecl-actionsCell-doc
New API documentation for ActionsCell
2 parents 3959e76 + cf5e3f2 commit 95b953e

File tree

8 files changed

+269
-23
lines changed

8 files changed

+269
-23
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 to display up to three actions.
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+
It represents a list of interactuable elements that will
240+
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 action with options will be
245+
displayed and only up to 3 actions. In the case of the
246+
dropdown the click function will pass the value assigned to
247+
the option, click{" "}
248+
<Link href="/components/dropdown" passHref legacyBehavior>
249+
<DxcLink>here</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/resultset-table/code/examples/reduced.ts‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import {
2-
DxcResultsetTable,
3-
DxcInset,
4-
} from "@dxc-technology/halstack-react";
1+
import { DxcResultsetTable, DxcInset } from "@dxc-technology/halstack-react";
52
import { deleteIcon } from "./Icons";
63

74
const code = `() => {
@@ -18,6 +15,20 @@ const code = `() => {
1815
title: "icon",
1916
onClick: () => {},
2017
},
18+
{
19+
title: "edit",
20+
onClick: (value) => {},
21+
options:[
22+
{
23+
value: "1",
24+
label: "Edit",
25+
},
26+
{
27+
value: "2",
28+
label: "Mark as selected",
29+
},
30+
]
31+
},
2132
];
2233
2334
const rows = [

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

Lines changed: 91 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,66 @@ 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 to display up to
110+
three actions.
111+
</DxcParagraph>
112+
),
113+
subSections: [
114+
{
115+
title: "Props",
116+
content: (
117+
<DxcTable>
118+
<thead>
119+
<tr>
120+
<th>Name</th>
121+
<th>Type</th>
122+
<th>Description</th>
123+
<th>Default</th>
124+
</tr>
125+
</thead>
126+
<tbody>
127+
<tr>
128+
<td>
129+
<DxcFlex
130+
direction="column"
131+
gap="0.25rem"
132+
alignItems="baseline"
133+
>
134+
<StatusTag status="Required">Required</StatusTag>actions
135+
</DxcFlex>
136+
</td>
137+
<td>
138+
<ExtendedTableCode>{actionsType}</ExtendedTableCode>
139+
</td>
140+
<td>
141+
<p>
142+
It represents a list of interactuable elements that will
143+
work as buttons or as a dropdown. Those with an{" "}
144+
<TableCode>icon</TableCode> are treated as buttons. If any
145+
element lacks an <TableCode>icon</TableCode> and includes{" "}
146+
<TableCode>options</TableCode>, it is interpreted as a
147+
dropdown. Only the first action with options will be
148+
displayed and only up to 3 actions. In the case of the
149+
dropdown the click function will pass the value assigned to
150+
the option, click{" "}
151+
<Link href="/components/dropdown" passHref legacyBehavior>
152+
<DxcLink>here</DxcLink>
153+
</Link>{" "}
154+
for more details.
155+
</p>
156+
</td>
157+
<td>-</td>
158+
</tr>
159+
</tbody>
160+
</DxcTable>
161+
),
162+
},
163+
],
164+
},
83165
{
84166
title: "Examples",
85167
subSections: [
@@ -93,9 +175,11 @@ const sections = [
93175
},
94176
{
95177
title: "Reduced usage",
96-
content: (
97-
<Example example={reduced} defaultIsVisible />
98-
),
178+
content: <Example example={reduced} defaultIsVisible />,
179+
},
180+
{
181+
title: "Actions cell",
182+
content: <Example example={actions} defaultIsVisible />,
99183
},
100184
],
101185
},

‎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)