Skip to content

Commit afc9f97

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #1963 from dxc-technology/gomezivann/new-status
New status stages included in the site
2 parents 2bd2d63 + e94f816 commit afc9f97

File tree

20 files changed

+183
-199
lines changed

20 files changed

+183
-199
lines changed

‎catalog/components/catalog.json‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎lib/src/file-input/FileInput.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ const isFileIncluded = (file: FileData, fileList: FileData[]) => {
3636
const DxcFileInput = React.forwardRef<RefType, FileInputPropsType>(
3737
(
3838
{
39-
name = "",
4039
mode = "file",
4140
label = "",
4241
buttonLabel,

‎lib/src/file-input/types.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,6 @@ export type FileData = {
2121
};
2222

2323
type CommonProps = {
24-
/**
25-
* @deprecated Name attribute.
26-
*/
27-
name?: string;
2824
/**
2925
* Text to be placed above the component.
3026
*/

‎scripts/create-catalog.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const fs = require("fs");
22

3-
const componentsLinks = require("../website/screens/common/componentList.js");
3+
const componentsLinks = require("../website/screens/common/componentsList.json");
44

55
const setCatalog = () => {
66
let catalog = [];

‎website/pages/_app.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,8 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
116116
selected={matchPaths(path)}
117117
>
118118
{label}
119-
{status !== "ready" && (
120-
<StatusBadge status={status} />
119+
{status && status !== "stable" && (
120+
<StatusBadge componentStatus status={status} />
121121
)}
122122
</DxcApplicationLayout.SideNav.Link>
123123
</Link>

‎website/screens/common/StatusBadge.tsx‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,50 @@
11
import { DxcBadge } from "@dxc-technology/halstack-react";
2+
import { ComponentStatus } from "./pagesList";
23

3-
type InfoStatus = {
4-
status: "information";
5-
label: string;
4+
type StatusBadgeProps = {
5+
componentStatus?: boolean;
6+
status: ComponentStatus | "required";
67
};
78

8-
type NoInfoStatus = {
9-
status: "deprecated" | "experimental" | "ready" | "required";
10-
label?: never;
11-
};
12-
13-
type Props = InfoStatus | NoInfoStatus;
14-
15-
const getBadgeColor = (status: Props["status"]) => {
9+
const getBadgeColor = (status: StatusBadgeProps["status"]) => {
1610
switch (status) {
17-
case "deprecated":
18-
return "yellow";
11+
case "required":
12+
return "orange";
1913
case "experimental":
20-
return "purple";
21-
case "information":
2214
return "blue";
23-
case "ready":
15+
case "new":
16+
return "purple";
17+
case "stable":
2418
return "green";
25-
case "required":
26-
return "orange";
19+
case "legacy":
20+
return "yellow";
2721
default:
2822
return "grey";
2923
}
3024
};
3125

32-
const getStatusLabel = (label: Props["label"], status: Props["status"]) => {
33-
return label ? label : status.charAt(0).toUpperCase() + status.slice(1);
26+
const getBadgeTitle = (status: StatusBadgeProps["status"]) => {
27+
switch (status) {
28+
case "experimental":
29+
return "This component is ready for preliminary usage.";
30+
case "new":
31+
return "This component has reached a level of maturity and completeness that the Halstack team is happy and confident with.";
32+
case "stable":
33+
return "This component is significantly mature and usage is strongly encouraged, with long-term support expected.";
34+
case "legacy":
35+
return "This component is stable but there are plans to replace its functionality with a new component or a combination of new components.";
36+
case "deprecated":
37+
return "This component will be removed in the near future.";
38+
default:
39+
return "";
40+
}
3441
};
3542

36-
const StatusBadge = ({ label, status }: Props) => (
43+
const StatusBadge = ({ componentStatus = false, status }: StatusBadgeProps) => (
3744
<DxcBadge
38-
label={getStatusLabel(label, status)}
45+
label={status[0].toUpperCase() + status.slice(1)}
3946
color={getBadgeColor(status)}
47+
title={componentStatus ? getBadgeTitle(status) : undefined}
4048
size="small"
4149
/>
4250
);

‎website/screens/common/componentList.js‎

Lines changed: 0 additions & 80 deletions
This file was deleted.

‎website/screens/common/componentsList.json‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
[
2+
{ "label": "Accordion", "path": "/components/accordion", "status": "stable" },
3+
{ "label": "Alert", "path": "/components/alert", "status": "stable" },
4+
{
5+
"label": "Application Layout",
6+
"path": "/components/application-layout",
7+
"status": "stable"
8+
},
9+
{
10+
"label": "Badge",
11+
"path": "/components/badge",
12+
"status": "new"
13+
},
14+
{ "label": "Bleed", "path": "/components/bleed", "status": "stable" },
15+
{ "label": "Box", "path": "/components/box", "status": "deprecated" },
16+
{
17+
"label": "Breadcrumbs",
18+
"path": "/components/breadcrumbs",
19+
"status": "experimental"
20+
},
21+
{
22+
"label": "Bulleted List",
23+
"path": "/components/bulleted-list",
24+
"status": "stable"
25+
},
26+
{ "label": "Button", "path": "/components/button", "status": "stable" },
27+
{ "label": "Card", "path": "/components/card", "status": "stable" },
28+
{ "label": "Checkbox", "path": "/components/checkbox", "status": "stable" },
29+
{ "label": "Chip", "path": "/components/chip", "status": "stable" },
30+
{
31+
"label": "Container",
32+
"path": "/components/container",
33+
"status": "experimental"
34+
},
35+
{
36+
"label": "Contextual Menu",
37+
"path": "/components/contextual-menu",
38+
"status": "new"
39+
},
40+
{
41+
"label": "Date Input",
42+
"path": "/components/date-input",
43+
"status": "stable"
44+
},
45+
{ "label": "Dialog", "path": "/components/dialog", "status": "stable" },
46+
{
47+
"label": "Divider",
48+
"path": "/components/divider",
49+
"status": "new"
50+
},
51+
{ "label": "Dropdown", "path": "/components/dropdown", "status": "stable" },
52+
{
53+
"label": "File Input",
54+
"path": "/components/file-input",
55+
"status": "stable"
56+
},
57+
{ "label": "Flex", "path": "/components/flex", "status": "stable" },
58+
{ "label": "Footer", "path": "/components/footer", "status": "stable" },
59+
{ "label": "Grid", "path": "/components/grid", "status": "stable" },
60+
{ "label": "Header", "path": "/components/header", "status": "stable" },
61+
{ "label": "Heading", "path": "/components/heading", "status": "stable" },
62+
{ "label": "Image", "path": "/components/image", "status": "experimental" },
63+
{ "label": "Inset", "path": "/components/inset", "status": "stable" },
64+
{ "label": "Link", "path": "/components/link", "status": "stable" },
65+
{ "label": "Nav Tabs", "path": "/components/nav-tabs", "status": "stable" },
66+
{
67+
"label": "Number Input",
68+
"path": "/components/number-input",
69+
"status": "stable"
70+
},
71+
{ "label": "Paginator", "path": "/components/paginator", "status": "stable" },
72+
{ "label": "Paragraph", "path": "/components/paragraph", "status": "stable" },
73+
{
74+
"label": "Password Input",
75+
"path": "/components/password-input",
76+
"status": "stable"
77+
},
78+
{
79+
"label": "Progress Bar",
80+
"path": "/components/progress-bar",
81+
"status": "stable"
82+
},
83+
{ "label": "Quick Nav", "path": "/components/quick-nav", "status": "stable" },
84+
{
85+
"label": "Radio Group",
86+
"path": "/components/radio-group",
87+
"status": "stable"
88+
},
89+
{
90+
"label": "Resultset Table",
91+
"path": "/components/resultset-table",
92+
"status": "stable"
93+
},
94+
{ "label": "Select", "path": "/components/select", "status": "stable" },
95+
{ "label": "Sidenav", "path": "/components/sidenav", "status": "stable" },
96+
{ "label": "Slider", "path": "/components/slider", "status": "stable" },
97+
{ "label": "Spinner", "path": "/components/spinner", "status": "stable" },
98+
{
99+
"label": "Status Light",
100+
"path": "/components/status-light",
101+
"status": "new"
102+
},
103+
{ "label": "Switch", "path": "/components/switch", "status": "stable" },
104+
{ "label": "Table", "path": "/components/table", "status": "stable" },
105+
{ "label": "Tabs", "path": "/components/tabs", "status": "stable" },
106+
{ "label": "Tag", "path": "/components/tag", "status": "legacy" },
107+
{
108+
"label": "Text Input",
109+
"path": "/components/text-input",
110+
"status": "stable"
111+
},
112+
{ "label": "Textarea", "path": "/components/textarea", "status": "stable" },
113+
{
114+
"label": "Toggle Group",
115+
"path": "/components/toggle-group",
116+
"status": "stable"
117+
},
118+
{
119+
"label": "Typography",
120+
"path": "/components/typography",
121+
"status": "stable"
122+
},
123+
{ "label": "Wizard", "path": "/components/wizard", "status": "stable" }
124+
]

0 commit comments

Comments
 (0)