Skip to content

Commit b77ec05

Browse files
Mil4n0rMil4n0r
authored
Merge pull request #2175 from dxc-technology/gomezivann/status-light-redesign
Status light redesign
2 parents 384596a + 32f31cf commit b77ec05

File tree

16 files changed

+261
-318
lines changed

16 files changed

+261
-318
lines changed

‎apps/website/pages/components/status-light/code.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import StatusLightPageLayout from "screens/components/status-light/StatusLightPageLayout";
4+
import StatusLightCodePage from "screens/components/status-light/code/StatusLightCodePage";
5+
6+
const Code = () => (
7+
<>
8+
<Head>
9+
<title>Status light code — Halstack Design System</title>
10+
</Head>
11+
<StatusLightCodePage />
12+
</>
13+
);
14+
15+
Code.getLayout = (page: ReactElement) => <StatusLightPageLayout>{page}</StatusLightPageLayout>;
16+
17+
export default Code;

‎apps/website/pages/components/status-light/index.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import Head from "next/head";
22
import type { ReactElement } from "react";
3-
import StatusLightCodePage from "screens/components/status-light/code/StatusLightCodePage";
3+
import StatusLightOverviewPage from "screens/components/status-light/overview/StatusLightOverviewPage";
44
import StatusLightPageLayout from "screens/components/status-light/StatusLightPageLayout";
55

6-
const Index = () => {
7-
return (
8-
<>
9-
<Head>
10-
<title>Status Light — Halstack Design System</title>
11-
</Head>
12-
<StatusLightCodePage></StatusLightCodePage>
13-
</>
14-
);
15-
};
6+
const Index = () => (
7+
<>
8+
<Head>
9+
<title>Status light — Halstack Design System</title>
10+
</Head>
11+
<StatusLightOverviewPage />
12+
</>
13+
);
1614

17-
Index.getLayout = function getLayout(page: ReactElement) {
18-
return <StatusLightPageLayout>{page}</StatusLightPageLayout>;
19-
};
15+
Index.getLayout = (page: ReactElement) => <StatusLightPageLayout>{page}</StatusLightPageLayout>;
2016

2117
export default Index;

‎apps/website/pages/components/status-light/specifications.tsx‎

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

‎apps/website/pages/components/status-light/usage.tsx‎

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

‎apps/website/screens/components/status-light/StatusLightPageLayout.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@ import { ReactNode } from "react";
66

77
const StatusLightPageHeading = ({ children }: { children: ReactNode }) => {
88
const tabs = [
9-
{ label: "Code", path: "/components/status-light" },
10-
{ label: "Usage", path: "/components/status-light/usage" },
11-
{ label: "Specifications", path: "/components/status-light/specifications" },
9+
{ label: "Overview", path: "/components/status-light" },
10+
{ label: "Code", path: "/components/status-light/code" },
1211
];
1312

1413
return (
1514
<DxcFlex direction="column" gap="3rem">
1615
<PageHeading>
1716
<DxcFlex direction="column" gap="2rem">
18-
<ComponentHeading name="Status Light" />
17+
<ComponentHeading name="Status light" />
1918
<DxcParagraph>
20-
Status lights, as semantic elements, allow the user to display the completion status of tasks, processes and
21-
more.
19+
Status light is a small, color-coded visual indicator used to represent the state or condition of a system,
20+
process, or component. It provides at-a-glance feedback, helping users quickly assess statuses without
21+
needing detailed explanations.
2222
</DxcParagraph>
23-
<TabsPageHeading tabs={tabs}></TabsPageHeading>
23+
<TabsPageHeading tabs={tabs} />
2424
</DxcFlex>
2525
</PageHeading>
2626
{children}

‎apps/website/screens/components/status-light/code/StatusLightCodePage.tsx‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,6 @@ const sections = [
2121
</tr>
2222
</thead>
2323
<tbody>
24-
<tr>
25-
<td>mode</td>
26-
<td>
27-
<TableCode>'default' | 'info' | 'success' | 'warning' | 'error'</TableCode>
28-
</td>
29-
<td>It will define the color of the light based on its semantic meaning.</td>
30-
<td>
31-
<TableCode>'default'</TableCode>
32-
</td>
33-
</tr>
3424
<tr>
3525
<td>
3626
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
@@ -41,9 +31,19 @@ const sections = [
4131
<td>
4232
<TableCode>string</TableCode>
4333
</td>
44-
<td>An auxiliar text that will add some context to the status.</td>
34+
<td>An auxiliary text that will add some context to the status.</td>
4535
<td>-</td>
4636
</tr>
37+
<tr>
38+
<td>mode</td>
39+
<td>
40+
<TableCode>'default' | 'info' | 'success' | 'warning' | 'error'</TableCode>
41+
</td>
42+
<td>It will define the color of the light based on its semantic meaning.</td>
43+
<td>
44+
<TableCode>'default'</TableCode>
45+
</td>
46+
</tr>
4747
<tr>
4848
<td>size</td>
4949
<td>
@@ -69,15 +69,13 @@ const sections = [
6969
},
7070
];
7171

72-
const StatusLightCodePage = () => {
73-
return (
74-
<DxcFlex direction="column" gap="4rem">
75-
<QuickNavContainerLayout>
76-
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
77-
</QuickNavContainerLayout>
78-
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/status-light/code/StatusLightCodePage.tsx" />
79-
</DxcFlex>
80-
);
81-
};
72+
const StatusLightCodePage = () => (
73+
<DxcFlex direction="column" gap="4rem">
74+
<QuickNavContainerLayout>
75+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
76+
</QuickNavContainerLayout>
77+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/status-light/code/StatusLightCodePage.tsx" />
78+
</DxcFlex>
79+
);
8280

8381
export default StatusLightCodePage;

‎apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
2+
import QuickNavContainer from "@/common/QuickNavContainer";
3+
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
4+
import DocFooter from "@/common/DocFooter";
5+
import Example from "@/common/example/Example";
6+
import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
7+
import variants from "./example/variants";
8+
import anatomy from "./images/status_light_anatomy.png";
9+
import Image from "@/common/Image";
10+
11+
const sections = [
12+
{
13+
title: "Introduction",
14+
content: (
15+
<DxcParagraph>
16+
Being a <strong>non-clickable UI element</strong>, the status light is used to provide a quick, at-a-glance
17+
indication of system states, alerts, or conditions within an interface. Designed for clarity and instant
18+
recognition, it seamlessly integrates into various layouts without adding cognitive load. Status lights follow a
19+
consistent color-coded system to ensure users can easily interpret their meaning. They are often used alongside
20+
other components, such as tables, accordions, or dashboards, to enhance visibility and provide contextual
21+
awareness.
22+
</DxcParagraph>
23+
),
24+
},
25+
{
26+
title: "Anatomy",
27+
content: (
28+
<>
29+
<Image src={anatomy} alt="Status light's anatomy" />
30+
<DxcBulletedList type="number">
31+
<DxcBulletedList.Item>
32+
<strong>Status light:</strong> the core visual element of a status light, designed as dot for clarity and
33+
easy recognition.
34+
</DxcBulletedList.Item>
35+
<DxcBulletedList.Item>
36+
<strong>Label:</strong> a short text description alongside the status light to provide additional context.
37+
</DxcBulletedList.Item>
38+
</DxcBulletedList>
39+
</>
40+
),
41+
},
42+
{
43+
title: "Variants",
44+
content: (
45+
<>
46+
<DxcParagraph>
47+
The status light component is available in five semantic variants, each represented by a distinct color. These
48+
colors ensure clear communication of different states.
49+
</DxcParagraph>
50+
<DxcParagraph>
51+
Additionally, the component comes in three different sizes, allowing for flexibility across various layouts
52+
and screen sizes while maintaining readability and visual consistency.
53+
</DxcParagraph>
54+
<Example example={variants} />
55+
<DxcTable>
56+
<thead>
57+
<tr>
58+
<th>Variant</th>
59+
<HeaderDescriptionCell>Description</HeaderDescriptionCell>
60+
</tr>
61+
</thead>
62+
<tbody>
63+
<tr>
64+
<td>
65+
<strong>Default</strong>
66+
</td>
67+
<td>For neutral statuses, like archived, draft, paused...</td>
68+
</tr>
69+
<tr>
70+
<td>
71+
<strong>Info</strong>
72+
</td>
73+
<td>For live statuses, like active, in use, uploaded...</td>
74+
</tr>
75+
<tr>
76+
<td>
77+
<strong>Success</strong>
78+
</td>
79+
<td>For positive statuses, like finished, approved, completed...</td>
80+
</tr>
81+
<tr>
82+
<td>
83+
<strong>Warning</strong>
84+
</td>
85+
<td>For pending or critical statuses, like scheduled, in progress, processing...</td>
86+
</tr>
87+
<tr>
88+
<td>
89+
<strong>Error</strong>
90+
</td>
91+
<td>For negative statuses, like incomplete, rejected, failed...</td>
92+
</tr>
93+
</tbody>
94+
</DxcTable>
95+
</>
96+
),
97+
},
98+
{
99+
title: "Best practices",
100+
content: (
101+
<DxcBulletedList>
102+
<DxcBulletedList.Item>
103+
<strong>Ensure semantic accuracy:</strong> always match each status light color with the correct meaning to
104+
maintain clarity and avoid misinterpretation.
105+
</DxcBulletedList.Item>
106+
<DxcBulletedList.Item>
107+
<strong>Optimize for different screen sizes:</strong> Select the appropriate size to ensure visibility and
108+
legibility across various layouts.
109+
</DxcBulletedList.Item>
110+
<DxcBulletedList.Item>
111+
<strong>Use clear and concise labels:</strong> Keep them brief and ensure they accurately describe the current
112+
state.
113+
</DxcBulletedList.Item>
114+
<DxcBulletedList.Item>
115+
<strong>Combine with badges carefully:</strong> status lights and semantic badges can only be used together if
116+
one of them does not use a semantic color or if their semantic colors do not contradict each other. This
117+
prevents misinterpretation and maintains clarity in data visualizations such as tables, charts, or grids.
118+
</DxcBulletedList.Item>
119+
<DxcBulletedList.Item>
120+
<strong>Use strategically:</strong> overusing status lights in interfaces with high cognitive load can
121+
overwhelm users and disrupt readability. Use them only where they add real value.
122+
</DxcBulletedList.Item>
123+
</DxcBulletedList>
124+
),
125+
},
126+
];
127+
128+
const StatusLightOverviewPage = () => (
129+
<DxcFlex direction="column" gap="4rem">
130+
<QuickNavContainerLayout>
131+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
132+
</QuickNavContainerLayout>
133+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx" />
134+
</DxcFlex>
135+
);
136+
137+
export default StatusLightOverviewPage;

apps/website/screens/components/status-light/usage/example/variants.ts renamed to apps/website/screens/components/status-light/overview/example/variants.ts

File renamed without changes.

‎apps/website/screens/components/status-light/overview/images/status_light_anatomy.png‎

24.5 KB
Loading

‎apps/website/screens/components/status-light/specs/StatusLightSpecsPage.tsx‎

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

0 commit comments

Comments
 (0)