Skip to content

Commit 26f3851

Browse files
JialeclJialecl
authored
Merge branch 'master' into gomezivann/breadcrumbs
2 parents c66893b + 8b295c2 commit 26f3851

File tree

37 files changed

+258
-205
lines changed

37 files changed

+258
-205
lines changed

‎website/pages/_app.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
themeGeneratorLinks,
1919
} from "@/common/pagesList";
2020
import Link from "next/link";
21-
import StatusTag from "@/common/StatusTag";
21+
import StatusBadge from "@/common/StatusBadge";
2222

2323
type NextPageWithLayout = NextPage & {
2424
getLayout?: (page: ReactElement) => ReactNode;
@@ -116,8 +116,8 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
116116
selected={matchPaths(path)}
117117
>
118118
{label}
119-
{status !== "Ready" && (
120-
<StatusTag status={status}>{status}</StatusTag>
119+
{status !== "ready" && (
120+
<StatusBadge status={status} />
121121
)}
122122
</DxcApplicationLayout.SideNav.Link>
123123
</Link>

‎website/screens/common/StatusBadge.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { DxcBadge } from "@dxc-technology/halstack-react";
2+
3+
type InfoStatus = {
4+
status: "information";
5+
label: string;
6+
};
7+
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"]) => {
16+
switch (status) {
17+
case "deprecated":
18+
return "yellow";
19+
case "experimental":
20+
return "purple";
21+
case "information":
22+
return "blue";
23+
case "ready":
24+
return "green";
25+
case "required":
26+
return "orange";
27+
default:
28+
return "grey";
29+
}
30+
};
31+
32+
const getStatusLabel = (label: Props["label"], status: Props["status"]) => {
33+
return label ? label : status.charAt(0).toUpperCase() + status.slice(1);
34+
};
35+
36+
const StatusBadge = ({ label, status }: Props) => (
37+
<DxcBadge
38+
label={getStatusLabel(label, status)}
39+
color={getBadgeColor(status)}
40+
size="small"
41+
/>
42+
);
43+
44+
export default StatusBadge;

‎website/screens/common/StatusTag.tsx‎

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

‎website/screens/common/componentList.js‎

Lines changed: 52 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,74 @@
11
exports.componentsList = [
2-
{ label: "Accordion", path: "/components/accordion", status: "Ready" },
3-
{ label: "Alert", path: "/components/alert", status: "Ready" },
2+
{ label: "Accordion", path: "/components/accordion", status: "ready" },
3+
{ label: "Alert", path: "/components/alert", status: "ready" },
44
{
55
label: "Application Layout",
66
path: "/components/application-layout",
7-
status: "Ready",
7+
status: "ready",
88
},
99
{
1010
label: "Badge",
1111
path: "/components/badge",
12-
status: "Experimental",
12+
status: "experimental",
1313
},
14-
{ label: "Bleed", path: "/components/bleed", status: "Ready" },
15-
{ label: "Box", path: "/components/box", status: "Deprecated" },
14+
{ label: "Bleed", path: "/components/bleed", status: "ready" },
15+
{ label: "Box", path: "/components/box", status: "deprecated" },
1616
{
1717
label: "Bulleted List",
1818
path: "/components/bulleted-list",
19-
status: "Ready",
19+
status: "ready",
2020
},
21-
{ label: "Button", path: "/components/button", status: "Ready" },
22-
{ label: "Card", path: "/components/card", status: "Ready" },
23-
{ label: "Checkbox", path: "/components/checkbox", status: "Ready" },
24-
{ label: "Chip", path: "/components/chip", status: "Ready" },
25-
{ label: "Container", path: "/components/container", status: "Experimental" },
26-
{ label: "Date Input", path: "/components/date-input", status: "Ready" },
27-
{ label: "Dialog", path: "/components/dialog", status: "Ready" },
28-
{ label: "Divider", path: "/components/divider", status: "Experimental" },
29-
{ label: "Dropdown", path: "/components/dropdown", status: "Ready" },
30-
{ label: "File Input", path: "/components/file-input", status: "Ready" },
31-
{ label: "Flex", path: "/components/flex", status: "Ready" },
32-
{ label: "Footer", path: "/components/footer", status: "Ready" },
33-
{ label: "Grid", path: "/components/grid", status: "Ready" },
34-
{ label: "Header", path: "/components/header", status: "Ready" },
35-
{ label: "Heading", path: "/components/heading", status: "Ready" },
36-
{ label: "Image", path: "/components/image", status: "Experimental" },
37-
{ label: "Inset", path: "/components/inset", status: "Ready" },
38-
{ label: "Link", path: "/components/link", status: "Ready" },
39-
{ label: "Nav Tabs", path: "/components/nav-tabs", status: "Ready" },
40-
{ label: "Number Input", path: "/components/number-input", status: "Ready" },
41-
{ label: "Paginator", path: "/components/paginator", status: "Ready" },
42-
{ label: "Paragraph", path: "/components/paragraph", status: "Ready" },
21+
{ label: "Button", path: "/components/button", status: "ready" },
22+
{ label: "Card", path: "/components/card", status: "ready" },
23+
{ label: "Checkbox", path: "/components/checkbox", status: "ready" },
24+
{ label: "Chip", path: "/components/chip", status: "ready" },
25+
{ label: "Container", path: "/components/container", status: "experimental" },
26+
{ label: "Date Input", path: "/components/date-input", status: "ready" },
27+
{ label: "Dialog", path: "/components/dialog", status: "ready" },
28+
{ label: "Divider", path: "/components/divider", status: "experimental" },
29+
{ label: "Dropdown", path: "/components/dropdown", status: "ready" },
30+
{ label: "File Input", path: "/components/file-input", status: "ready" },
31+
{ label: "Flex", path: "/components/flex", status: "ready" },
32+
{ label: "Footer", path: "/components/footer", status: "ready" },
33+
{ label: "Grid", path: "/components/grid", status: "ready" },
34+
{ label: "Header", path: "/components/header", status: "ready" },
35+
{ label: "Heading", path: "/components/heading", status: "ready" },
36+
{ label: "Image", path: "/components/image", status: "experimental" },
37+
{ label: "Inset", path: "/components/inset", status: "ready" },
38+
{ label: "Link", path: "/components/link", status: "ready" },
39+
{ label: "Nav Tabs", path: "/components/nav-tabs", status: "ready" },
40+
{ label: "Number Input", path: "/components/number-input", status: "ready" },
41+
{ label: "Paginator", path: "/components/paginator", status: "ready" },
42+
{ label: "Paragraph", path: "/components/paragraph", status: "ready" },
4343
{
4444
label: "Password Input",
4545
path: "/components/password-input",
46-
status: "Ready",
46+
status: "ready",
4747
},
48-
{ label: "Progress Bar", path: "/components/progress-bar", status: "Ready" },
49-
{ label: "Quick Nav", path: "/components/quick-nav", status: "Ready" },
50-
{ label: "Radio Group", path: "/components/radio-group", status: "Ready" },
48+
{ label: "Progress Bar", path: "/components/progress-bar", status: "ready" },
49+
{ label: "Quick Nav", path: "/components/quick-nav", status: "ready" },
50+
{ label: "Radio Group", path: "/components/radio-group", status: "ready" },
5151
{
5252
label: "Resultset Table",
5353
path: "/components/resultset-table",
54-
status: "Ready",
54+
status: "ready",
5555
},
56-
{ label: "Select", path: "/components/select", status: "Ready" },
57-
{ label: "Sidenav", path: "/components/sidenav", status: "Ready" },
58-
{ label: "Slider", path: "/components/slider", status: "Ready" },
59-
{ label: "Spinner", path: "/components/spinner", status: "Ready" },
60-
{ label: "Status Light", path: "/components/status-light", status: "Experimental" },
61-
{ label: "Switch", path: "/components/switch", status: "Ready" },
62-
{ label: "Table", path: "/components/table", status: "Ready" },
63-
{ label: "Tabs", path: "/components/tabs", status: "Ready" },
64-
{ label: "Tag", path: "/components/tag", status: "Ready" },
65-
{ label: "Text Input", path: "/components/text-input", status: "Ready" },
66-
{ label: "Textarea", path: "/components/textarea", status: "Ready" },
67-
{ label: "Toggle Group", path: "/components/toggle-group", status: "Ready" },
68-
{ label: "Typography", path: "/components/typography", status: "Ready" },
69-
{ label: "Wizard", path: "/components/wizard", status: "Ready" },
56+
{ label: "Select", path: "/components/select", status: "ready" },
57+
{ label: "Sidenav", path: "/components/sidenav", status: "ready" },
58+
{ label: "Slider", path: "/components/slider", status: "ready" },
59+
{ label: "Spinner", path: "/components/spinner", status: "ready" },
60+
{
61+
label: "Status Light",
62+
path: "/components/status-light",
63+
status: "experimental",
64+
},
65+
{ label: "Switch", path: "/components/switch", status: "ready" },
66+
{ label: "Table", path: "/components/table", status: "ready" },
67+
{ label: "Tabs", path: "/components/tabs", status: "ready" },
68+
{ label: "Tag", path: "/components/tag", status: "ready" },
69+
{ label: "Text Input", path: "/components/text-input", status: "ready" },
70+
{ label: "Textarea", path: "/components/textarea", status: "ready" },
71+
{ label: "Toggle Group", path: "/components/toggle-group", status: "ready" },
72+
{ label: "Typography", path: "/components/typography", status: "ready" },
73+
{ label: "Wizard", path: "/components/wizard", status: "ready" },
7074
];

‎website/screens/common/pagesList.ts‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { componentsList } from "./componentList";
2-
type ComponentStatus = "Ready" | "Deprecated" | "Experimental";
2+
type ComponentStatus = "ready" | "deprecated" | "experimental";
33

44
export type LinkDetails = {
55
label: string;
@@ -23,26 +23,25 @@ export const themeGeneratorLinks = [
2323
];
2424

2525
const overviewLinks: LinkDetails[] = [
26-
{ label: "Introduction", path: "/overview/introduction", status: "Ready" },
27-
{ label: "Releases", path: "/overview/releases", status: "Ready" },
26+
{ label: "Introduction", path: "/overview/introduction", status: "ready" },
27+
{ label: "Releases", path: "/overview/releases", status: "ready" },
2828
];
2929
const utilitiesLinks: LinkDetails[] = [
3030
{
3131
label: "Halstack Provider",
3232
path: "/utilities/halstack-provider",
33-
status: "Ready",
33+
status: "ready",
3434
},
3535
];
3636

3737
const principlesLinks: LinkDetails[] = [
38-
{ label: "Color", path: "/principles/color", status: "Ready" },
39-
{ label: "Layout", path: "/principles/layout", status: "Ready" },
40-
{ label: "Localization", path: "/principles/localization", status: "Ready" },
41-
{ label: "Spacing", path: "/principles/spacing", status: "Ready" },
42-
{ label: "Themes", path: "/principles/themes", status: "Ready" },
43-
{ label: "Typography", path: "/principles/typography", status: "Ready" },
44-
{ label: "Iconography", path: "/principles/iconography", status: "Ready" },
45-
38+
{ label: "Color", path: "/principles/color", status: "ready" },
39+
{ label: "Iconography", path: "/principles/iconography", status: "ready" },
40+
{ label: "Layout", path: "/principles/layout", status: "ready" },
41+
{ label: "Localization", path: "/principles/localization", status: "ready" },
42+
{ label: "Spacing", path: "/principles/spacing", status: "ready" },
43+
{ label: "Themes", path: "/principles/themes", status: "ready" },
44+
{ label: "Typography", path: "/principles/typography", status: "ready" },
4645
];
4746

4847
const componentsLinks = componentsList as LinkDetails[];

‎website/screens/common/sidenav/SidenavLogo.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import styled from "styled-components";
22
import Image from "@/common/Image";
33
import halstackLogo from "@/common/images/halstack_logo.svg";
4-
import StatusTag from "@/common/StatusTag";
54
import React from "react";
65
import { useRouter } from "next/router";
76
import pjson from "../../../package-lock.json";
7+
import { DxcBadge } from "@dxc-technology/halstack-react";
88

99
type SidenavLogoProps = { subtitle?: string };
1010

@@ -31,13 +31,17 @@ const SidenavLogo = ({
3131
</Header>
3232
<Subtitle>{subtitle}</Subtitle>
3333
</LogoContainer>
34-
<StatusTag>
35-
{isDev
36-
? "dev"
37-
: isNaN(parseInt(pathVersion))
38-
? "next"
39-
: `v${halstackVersion}`}
40-
</StatusTag>
34+
<DxcBadge
35+
label={
36+
isDev
37+
? "dev"
38+
: isNaN(parseInt(pathVersion))
39+
? "next"
40+
: `v${halstackVersion}`
41+
}
42+
color="purple"
43+
size="small"
44+
/>
4145
</SidenavLogoContainer>
4246
);
4347
};

‎website/screens/components/accordion/code/AccordionCodePage.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import icons from "./examples/icons";
1414
import controlledAccordionGroup from "./examples/controlledAccordionGroup";
1515
import uncontrolledAccordionGroup from "./examples/uncontrolledAccordionGroup";
1616
import TableCode from "@/common/TableCode";
17-
import StatusTag from "@/common/StatusTag";
17+
import StatusBadge from "@/common/StatusBadge";
1818
import Code from "@/common/Code";
1919

2020
const sections = [
@@ -34,7 +34,8 @@ const sections = [
3434
<tr>
3535
<td>
3636
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
37-
<StatusTag status="Required">Required</StatusTag>label
37+
<StatusBadge status="required" />
38+
label
3839
</DxcFlex>
3940
</td>
4041
<td>
@@ -115,7 +116,7 @@ const sections = [
115116
<tr>
116117
<td>
117118
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
118-
<StatusTag status="Required">Required</StatusTag>
119+
<StatusBadge status="required" />
119120
children
120121
</DxcFlex>
121122
</td>
@@ -233,7 +234,7 @@ const sections = [
233234
gap="0.25rem"
234235
alignItems="baseline"
235236
>
236-
<StatusTag status="Required">Required</StatusTag>
237+
<StatusBadge status="required" />
237238
children
238239
</DxcFlex>
239240
</td>
@@ -294,7 +295,8 @@ const sections = [
294295
gap="0.25rem"
295296
alignItems="baseline"
296297
>
297-
<StatusTag status="Required">Required</StatusTag>label
298+
<StatusBadge status="required" />
299+
label
298300
</DxcFlex>
299301
</td>
300302
<td>
@@ -351,7 +353,7 @@ const sections = [
351353
gap="0.25rem"
352354
alignItems="baseline"
353355
>
354-
<StatusTag status="Required">Required</StatusTag>
356+
<StatusBadge status="required" />
355357
children
356358
</DxcFlex>
357359
</td>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import QuickNavContainer from "@/common/QuickNavContainer";
99
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
1010
import Link from "next/link";
1111
import TableCode from "@/common/TableCode";
12-
import StatusTag from "@/common/StatusTag";
12+
import StatusBadge from "@/common/StatusBadge";
1313
import Code from "@/common/Code";
1414

1515
const ApplicationLayoutPropsTable = () => (
@@ -84,7 +84,7 @@ const ApplicationLayoutPropsTable = () => (
8484
<tr>
8585
<td>
8686
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
87-
<StatusTag status="Required">Required</StatusTag>
87+
<StatusBadge status="required" />
8888
children
8989
</DxcFlex>
9090
</td>

0 commit comments

Comments
 (0)