Skip to content

Status light redesign #2175

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

Merged
Mil4n0r merged 6 commits into from
Mar 19, 2025
Merged

Status light redesign #2175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9de6465
Status light design updates
GomezIvann Feb 27, 2025
489aefb
Updated test
GomezIvann Feb 27, 2025
b264fc5
Updated tests
GomezIvann Feb 27, 2025
5d8ab71
Status light feedback updates
GomezIvann Feb 28, 2025
fe88e9a
Merge branch 'master' into gomezivann/status-light-redesign
GomezIvann Mar 18, 2025
32f31cf
Status light documentation
GomezIvann Mar 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions apps/website/pages/components/status-light/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import StatusLightPageLayout from "screens/components/status-light/StatusLightPageLayout";
import StatusLightCodePage from "screens/components/status-light/code/StatusLightCodePage";

const Code = () => (
<>
<Head>
<title>Status light code — Halstack Design System</title>
</Head>
<StatusLightCodePage />
</>
);

Code.getLayout = (page: ReactElement) => <StatusLightPageLayout>{page}</StatusLightPageLayout>;

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/status-light/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import StatusLightCodePage from "screens/components/status-light/code/StatusLightCodePage";
import StatusLightOverviewPage from "screens/components/status-light/overview/StatusLightOverviewPage";
import StatusLightPageLayout from "screens/components/status-light/StatusLightPageLayout";

const Index = () => {
return (
<>
<Head>
<title>Status Light — Halstack Design System</title>
</Head>
<StatusLightCodePage></StatusLightCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Status light — Halstack Design System</title>
</Head>
<StatusLightOverviewPage />
</>
);

Index.getLayout = function getLayout(page: ReactElement) {
return <StatusLightPageLayout>{page}</StatusLightPageLayout>;
};
Index.getLayout = (page: ReactElement) => <StatusLightPageLayout>{page}</StatusLightPageLayout>;

export default Index;
21 changes: 0 additions & 21 deletions apps/website/pages/components/status-light/specifications.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions apps/website/pages/components/status-light/usage.tsx
View file
Open in desktop

This file was deleted.

14 changes: 7 additions & 7 deletions apps/website/screens/components/status-light/StatusLightPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,21 @@ import { ReactNode } from "react";

const StatusLightPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/status-light" },
{ label: "Usage", path: "/components/status-light/usage" },
{ label: "Specifications", path: "/components/status-light/specifications" },
{ label: "Overview", path: "/components/status-light" },
{ label: "Code", path: "/components/status-light/code" },
];

return (
<DxcFlex direction="column" gap="3rem">
<PageHeading>
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Status Light" />
<ComponentHeading name="Status light" />
<DxcParagraph>
Status lights, as semantic elements, allow the user to display the completion status of tasks, processes and
more.
Status light is a small, color-coded visual indicator used to represent the state or condition of a system,
process, or component. It provides at-a-glance feedback, helping users quickly assess statuses without
needing detailed explanations.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
40 changes: 19 additions & 21 deletions apps/website/screens/components/status-light/code/StatusLightCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,6 @@ const sections = [
</tr>
</thead>
<tbody>
<tr>
<td>mode</td>
<td>
<TableCode>'default' | 'info' | 'success' | 'warning' | 'error'</TableCode>
</td>
<td>It will define the color of the light based on its semantic meaning.</td>
<td>
<TableCode>'default'</TableCode>
</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
Expand All @@ -41,9 +31,19 @@ const sections = [
<td>
<TableCode>string</TableCode>
</td>
<td>An auxiliar text that will add some context to the status.</td>
<td>An auxiliary text that will add some context to the status.</td>
<td>-</td>
</tr>
<tr>
<td>mode</td>
<td>
<TableCode>'default' | 'info' | 'success' | 'warning' | 'error'</TableCode>
</td>
<td>It will define the color of the light based on its semantic meaning.</td>
<td>
<TableCode>'default'</TableCode>
</td>
</tr>
<tr>
<td>size</td>
<td>
Expand All @@ -69,15 +69,13 @@ const sections = [
},
];

const StatusLightCodePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/status-light/code/StatusLightCodePage.tsx" />
</DxcFlex>
);
};
const StatusLightCodePage = () => (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/status-light/code/StatusLightCodePage.tsx" />
</DxcFlex>
);

export default StatusLightCodePage;
137 changes: 137 additions & 0 deletions apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
import variants from "./example/variants";
import anatomy from "./images/status_light_anatomy.png";
import Image from "@/common/Image";

const sections = [
{
title: "Introduction",
content: (
<DxcParagraph>
Being a <strong>non-clickable UI element</strong>, the status light is used to provide a quick, at-a-glance
indication of system states, alerts, or conditions within an interface. Designed for clarity and instant
recognition, it seamlessly integrates into various layouts without adding cognitive load. Status lights follow a
consistent color-coded system to ensure users can easily interpret their meaning. They are often used alongside
other components, such as tables, accordions, or dashboards, to enhance visibility and provide contextual
awareness.
</DxcParagraph>
),
},
{
title: "Anatomy",
content: (
<>
<Image src={anatomy} alt="Status light's anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Status light:</strong> the core visual element of a status light, designed as dot for clarity and
easy recognition.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Label:</strong> a short text description alongside the status light to provide additional context.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Variants",
content: (
<>
<DxcParagraph>
The status light component is available in five semantic variants, each represented by a distinct color. These
colors ensure clear communication of different states.
</DxcParagraph>
<DxcParagraph>
Additionally, the component comes in three different sizes, allowing for flexibility across various layouts
and screen sizes while maintaining readability and visual consistency.
</DxcParagraph>
<Example example={variants} />
<DxcTable>
<thead>
<tr>
<th>Variant</th>
<HeaderDescriptionCell>Description</HeaderDescriptionCell>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>Default</strong>
</td>
<td>For neutral statuses, like archived, draft, paused...</td>
</tr>
<tr>
<td>
<strong>Info</strong>
</td>
<td>For live statuses, like active, in use, uploaded...</td>
</tr>
<tr>
<td>
<strong>Success</strong>
</td>
<td>For positive statuses, like finished, approved, completed...</td>
</tr>
<tr>
<td>
<strong>Warning</strong>
</td>
<td>For pending or critical statuses, like scheduled, in progress, processing...</td>
</tr>
<tr>
<td>
<strong>Error</strong>
</td>
<td>For negative statuses, like incomplete, rejected, failed...</td>
</tr>
</tbody>
</DxcTable>
</>
),
},
{
title: "Best practices",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Ensure semantic accuracy:</strong> always match each status light color with the correct meaning to
maintain clarity and avoid misinterpretation.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Optimize for different screen sizes:</strong> Select the appropriate size to ensure visibility and
legibility across various layouts.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use clear and concise labels:</strong> Keep them brief and ensure they accurately describe the current
state.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Combine with badges carefully:</strong> status lights and semantic badges can only be used together if
one of them does not use a semantic color or if their semantic colors do not contradict each other. This
prevents misinterpretation and maintains clarity in data visualizations such as tables, charts, or grids.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use strategically:</strong> overusing status lights in interfaces with high cognitive load can
overwhelm users and disrupt readability. Use them only where they add real value.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
];

const StatusLightOverviewPage = () => (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx" />
</DxcFlex>
);

export default StatusLightOverviewPage;
0 ...ts/status-light/usage/example/variants.ts → ...status-light/overview/example/variants.ts
View file
Open in desktop
File renamed without changes.
Binary file added ...ebsite/screens/components/status-light/overview/images/status_light_anatomy.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 0 additions & 52 deletions apps/website/screens/components/status-light/specs/StatusLightSpecsPage.tsx
View file
Open in desktop

This file was deleted.

Binary file removed apps/website/screens/components/status-light/specs/images/status-light_anatomy.jpg
View file
Open in desktop
Binary file not shown.
Binary file removed apps/website/screens/components/status-light/specs/images/status-light_specs.jpg
View file
Open in desktop
Binary file not shown.
Loading