Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added small table variant website doc #1831

Merged
merged 18 commits into from
Feb 28, 2024
Merged

Added small table variant website doc #1831

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
f1dccef
Separated website doc from lib changes
Mil4n0r Feb 19, 2024
c803d9d
Updated example
Mil4n0r Feb 19, 2024
6bb7b8a
Merge branch 'master' into Mil4n0r/small_table_variant-doc
Mil4n0r Feb 21, 2024
5a2e33d
Updated package and examples
Mil4n0r Feb 21, 2024
ae25965
Merge branch 'Mil4n0r/small_table_variant-doc' of github.com:dxc-tech…
Mil4n0r Feb 21, 2024
74f2a67
Merge branch 'master' into Mil4n0r/small_table_variant-doc
Mil4n0r Feb 21, 2024
172bd05
Updated examples, pending lib update
Mil4n0r Feb 21, 2024
9dfb247
Merge with master
Mil4n0r Feb 26, 2024
0267b2e
Updated package
Mil4n0r Feb 26, 2024
bf3dad5
Updated resultset table examples
Mil4n0r Feb 26, 2024
b13b54a
Updated package
Mil4n0r Feb 27, 2024
d7316ff
Fixed description for table modes
Mil4n0r Feb 27, 2024
9921415
Fixed description for resultsettable modes
Mil4n0r Feb 27, 2024
67b0ef6
Removed unused components
Mil4n0r Feb 27, 2024
56548a0
Updated table doc based on new tokens
Mil4n0r Feb 27, 2024
671b394
Merge branch 'master' into Mil4n0r/small_table_variant-doc
Mil4n0r Feb 28, 2024
afcd9fb
Updated package
Mil4n0r Feb 28, 2024
f1e1e57
Revert changes from basic table examples
Mil4n0r Feb 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
54 changes: 27 additions & 27 deletions website/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions website/screens/common/themes/advanced-theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -842,10 +842,10 @@
"dataFontWeight": "400",
"dataFontColor": "#000000",
"dataFontTextTransform": "none",
"dataPaddingTop": "14px",
"dataPaddingBottom": "12px",
"dataPaddingTop": "16px",
"dataPaddingBottom": "16px",
"dataPaddingRight": "20px",
"dataPaddingLeft": "40px",
"dataPaddingLeft": "20px",
"dataTextAlign": "left",
Mil4n0r marked this conversation as resolved.
Show resolved Hide resolved
"dataTextLineHeight": "normal",
"headerBackgroundColor": "#5f249f",
Expand Down
31 changes: 31 additions & 0 deletions website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import basicUsage from "./examples/basicUsage";
import sortable from "./examples/sortable";
import TableCode from "@/common/TableCode";
import StatusTag from "@/common/StatusTag";
import reduced from "./examples/reduced";

const sections = [
{
Expand Down Expand Up @@ -77,6 +78,30 @@ const sections = [
</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusTag status="Information">New</StatusTag>mode
</DxcFlex>
</td>
<td>
<TableCode>'default' | 'reduced'</TableCode>
</td>
<td>
The available table modes:
<ul>
<li>
<b>default</b>: Table with big spacing, applicable to most cases.
</li>
<li>
<b>reduced</b>: Smaller table with minimal spacing for high density information.
</li>
</ul>
</td>
<td>
<TableCode>'default'</TableCode>
</td>
</tr>
<tr>
<td>showGoToPage</td>
<td>
Expand Down Expand Up @@ -160,6 +185,12 @@ const sections = [
title: "Basic usage",
content: <Example example={basicUsage} defaultIsVisible />,
},
{
title: "Reduced usage",
content: (
<Example example={reduced} defaultIsVisible />
),
},
{
title: "Sortable",
content: <Example example={sortable} defaultIsVisible />,
Expand Down
24 changes: 16 additions & 8 deletions website/screens/components/resultset-table/code/examples/Icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
import React from "react";

// export const deleteIcon = (
// <svg
// xmlns="http://www.w3.org/2000/svg"
// height="24"
// viewBox="0 0 24 24"
// width="24"
// fill="white"
// >
// <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
// <path d="M0 0h24v24H0z" fill="none" />
// </svg>
// );

export const deleteIcon = (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="white"
>
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<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" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
);

21 changes: 14 additions & 7 deletions website/screens/components/resultset-table/code/examples/basicUsage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,42 +13,50 @@ const code = `() => {
{ displayValue: "Actions"},
];

const actions = [
{
icon: deleteIcon,
title: "icon",
onClick: () => {},
},
];

const rows = [
Mil4n0r marked this conversation as resolved.
Show resolved Hide resolved
[
{ displayValue: "001"},
{ displayValue: "Peter"},
{ displayValue: "Miami"},
{ displayValue: <DxcButton icon={deleteIcon} /> },
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
Mil4n0r marked this conversation as resolved.
Show resolved Hide resolved
],
[
{ displayValue: "002"},
{ displayValue: "Louis"},
{ displayValue: "London"},
{ displayValue: <DxcButton icon={deleteIcon} /> },
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "003"},
{ displayValue: "Lana"},
{ displayValue: "Amsterdam"},
{ displayValue: <DxcButton icon={deleteIcon} /> },
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "004"},
{ displayValue: "Rick"},
{ displayValue: "London"},
{ displayValue: <DxcButton icon={deleteIcon} /> },
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "005"},
{ displayValue: "Mark"},
{ displayValue: "Miami"},
{ displayValue: <DxcButton icon={deleteIcon} /> },
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "006"},
{ displayValue: "Cris"},
{ displayValue: "Paris"},
{ displayValue: <DxcButton icon={deleteIcon} /> },
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
];

Expand All @@ -64,7 +72,6 @@ const code = `() => {

const scope = {
DxcResultsetTable,
DxcButton,
DxcInset,
deleteIcon,
};
Expand Down
80 changes: 80 additions & 0 deletions website/screens/components/resultset-table/code/examples/reduced.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import {
DxcResultsetTable,
DxcButton,
DxcInset,
Mil4n0r marked this conversation as resolved.
Show resolved Hide resolved
} from "@dxc-technology/halstack-react";
import { deleteIcon } from "./Icons";

const code = `() => {
const columns = [
{ displayValue: "Id"},
{ displayValue: "Name"},
{ displayValue: "City"},
{ displayValue: "Actions"},
];

const actions = [
{
icon: deleteIcon,
title: "icon",
onClick: () => {},
},
];

const rows = [
[
{ displayValue: "001"},
{ displayValue: "Peter"},
{ displayValue: "Miami"},
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "002"},
{ displayValue: "Louis"},
{ displayValue: "London"},
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "003"},
{ displayValue: "Lana"},
{ displayValue: "Amsterdam"},
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "004"},
{ displayValue: "Rick"},
{ displayValue: "London"},
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "005"},
{ displayValue: "Mark"},
{ displayValue: "Miami"},
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "006"},
{ displayValue: "Cris"},
{ displayValue: "Paris"},
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
];

return (
<DxcInset space="2rem">
<DxcResultsetTable
columns={columns}
rows={rows}
mode="reduced"
></DxcResultsetTable>
</DxcInset>
);
}`;

const scope = {
DxcResultsetTable,
DxcInset,
deleteIcon,
};

export default { code, scope };
14 changes: 11 additions & 3 deletions website/screens/components/resultset-table/code/examples/sortable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,32 @@ const code = `() => {
{ displayValue: "Actions", isSortable: false },
];

const actions = [
{
icon: deleteIcon,
Mil4n0r marked this conversation as resolved.
Show resolved Hide resolved
title: "icon",
onClick: () => {},
},
];

const rows = [
[
{ displayValue: "001", sortValue: "001" },
{ displayValue: showName(), sortValue: sortName() },
{ displayValue: "Miami", sortValue: "Miami" },
{ displayValue: <DxcButton icon={deleteIcon} /> },
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "002", sortValue: "002" },
{ displayValue: "Louis", sortValue: "Louis" },
{ displayValue: "London", sortValue: "London" },
{ displayValue: <DxcButton icon={deleteIcon} /> },
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "003", sortValue: "003" },
{ displayValue: "Lana", sortValue: "Lana" },
{ displayValue: "Amsterdam", sortValue: "Amsterdam" },
{ displayValue: <DxcButton icon={deleteIcon} /> },
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
];

Expand Down