Skip to content

Added specs and usage doc to StatusLight component #1848

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
merged 7 commits into from
Mar 5, 2024
Merged

Added specs and usage doc to StatusLight component #1848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a9c1f41
Added specs and usage doc
Mil4n0r Feb 26, 2024
63f2482
Merge branch 'master' into Mil4n0r/status-light-doc
Mil4n0r Mar 4, 2024
d054fb4
Changed statuslight usage page structure
Mil4n0r Mar 4, 2024
21449be
Changed statusLight example text
Mil4n0r Mar 4, 2024
5e70337
Added Design Tokens section
Mil4n0r Mar 4, 2024
bd51077
Merge branch 'master' into Mil4n0r/status-light-doc
Mil4n0r Mar 4, 2024
1e2357d
Fixed typo
Mil4n0r Mar 5, 2024
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
21 changes: 21 additions & 0 deletions website/pages/components/status-light/specifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import Head from "next/head";
import type { ReactElement } from "react";
import StatusLightPageLayout from "../../../screens/components/status-light/StatusLightPageLayout";
import StatusLightSpecsPage from "../../../screens/components/status-light/specs/StatusLightSpecsPage";

const Specifications = () => {
return (
<>
<Head>
<title>Status Light Specs — Halstack Design System</title>
</Head>
<StatusLightSpecsPage></StatusLightSpecsPage>
</>
);
};

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

export default Specifications;
21 changes: 21 additions & 0 deletions website/pages/components/status-light/usage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import Head from "next/head";
import type { ReactElement } from "react";
import StatusLightPageLayout from "../../../screens/components/status-light/StatusLightPageLayout";
import StatusLightUsagePage from "../../../screens/components/status-light/usage/StatusLightUsagePage";

const Usage = () => {
return (
<>
<Head>
<title>Status Light Usage — Halstack Design System</title>
</Head>
<StatusLightUsagePage></StatusLightUsagePage>
</>
);
};

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

export default Usage;
2 changes: 2 additions & 0 deletions 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,6 +6,8 @@ import ComponentHeading from "@/common/ComponentHeading";
const StatusLightPageHeading = ({ children }: { children: React.ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/status-light" },
{ label: "Usage", path: "/components/status-light/usage" },
{ label: "Specifications", path: "/components/status-light/specifications" },
];

return (
Expand Down
61 changes: 61 additions & 0 deletions website/screens/components/status-light/specs/StatusLightSpecsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import {
DxcBulletedList,
DxcFlex,
DxcParagraph,
} from "@dxc-technology/halstack-react";
import Image from "@/common/Image";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Figure from "@/common/Figure";
import DocFooter from "@/common/DocFooter";
import specsImage from "./images/status-light_specs.jpg";
import anatomyImage from "./images/status-light_anatomy.jpg";

const sections = [
{
title: "Specifications",
content: (
<Figure caption="Status Light design specifications">
<Image src={specsImage} alt="Status Light design specifications" />
</Figure>
),
},
{
title: "Anatomy",
content: (
<>
<Image src={anatomyImage} alt="Status Light anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>Status Light</DxcBulletedList.Item>
<DxcBulletedList.Item>Label</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Design tokens",
content: (
<>
<DxcParagraph>
This component does not currently have design tokens.
</DxcParagraph>
</>
),
},
];

const StatusLightSpecsPage = () => {
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/website/screens/components/status-light/specs/StatusLightSpecsPage.tsx" />
</DxcFlex>
);
};

export default StatusLightSpecsPage;
Binary file added website/screens/components/status-light/specs/images/status-light_anatomy.jpg
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.
Binary file added website/screens/components/status-light/specs/images/status-light_specs.jpg
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.
161 changes: 161 additions & 0 deletions website/screens/components/status-light/usage/StatusLightUsagePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
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";

const sections = [
{
title: "Usage",
content: (
<DxcParagraph>
The Status light component serves as a powerful communicator of an
element or process' status. It focuses exclusively on conveying semantic
information within a range of five variants, each of them aligned with
its specific process status.
</DxcParagraph>
),
subSections: [
{
title: "Do's",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Match each status light variant with the correct semantic meaning
to communicate clearly and consistently messages about our
statuses.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Use each size of the component according to the different screen
sizes where it will be placed, paying special attention to
maintaining legibility and functionality.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Use concise and precise labels that reflect the status of a
process accordingly. You should not use more than three words in a
status light label.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Don'ts",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Mix semantic meanings within Status lights, as this will lead to
confusion and misinterpretation of process states.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Use Status light and semantic badges in the same data
visualization format (tables, charts, data grids...).
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Overuse the component. In screens with high cognitive load, you
should not overuse this component, as it may confuse users and
interrupt the reading flow.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
],
},
{
title: "Variants",
content: (
<>
<DxcParagraph>
The Status light component has five different modes, each one
corresponding to its semantic meaning.
</DxcParagraph>
<DxcParagraph>
Variants: <strong>default</strong>, <strong>info</strong>, <strong>success</strong>, <strong>warning</strong> and{" "}
<strong>error</strong>.
</DxcParagraph>
<Example example={variants} />
<DxcTable>
<thead>
<tr>
<th>Variant</th>
<HeaderDescriptionCell>Description</HeaderDescriptionCell>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>For neutral statuses, like archived, draft, paused...</td>
</tr>
<tr>
<td>Info</td>
<td>For live statuses, like active, in use, uploaded...</td>
</tr>
<tr>
<td>Success</td>
<td>
For positive statuses, like finished, approved, completed...
</td>
</tr>
<tr>
<td>Warning</td>
<td>
For pending or critical statuses, like scheduled, in progress,
processing...
</td>
</tr>
<tr>
<td>Error</td>
<td>
For negative statuses, like incomplete, rejected, failed...
</td>
</tr>
</tbody>
</DxcTable>
{/* <DxcBulletedList>
<DxcBulletedList.Item>
Default: for neutral statuses, like archived, draft, paused...
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Info: for live statuses, like active, in use, uploaded...
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Success: for positive statuses, like finished, approved,
completed...
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Warning: for pending or critical statuses, like scheduled, in
progress, processing...
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Error: for negative statuses, like incomplete, rejected, failed...
</DxcBulletedList.Item>
</DxcBulletedList>
<Figure caption="Status light variants">
<Image src={variants} alt="Status light variants" />
</Figure> */}
</>
),
},
];

const StatusLightUsagePage = () => {
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/website/screens/components/status-light/usage/StatusLightUsagePage.tsx" />
</DxcFlex>
);
};

export default StatusLightUsagePage;
47 changes: 47 additions & 0 deletions website/screens/components/status-light/usage/example/variants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import {
DxcStatusLight,
DxcInset,
DxcFlex,
} from "@dxc-technology/halstack-react";

const code = `() => {
return (
<DxcInset space="2rem">
<DxcFlex gap="2rem" justifyContent="center">
<DxcFlex gap="1rem" direction="column">
<DxcStatusLight label="Default" size="small" />
<DxcStatusLight label="Default" />
<DxcStatusLight label="Default"size="large" />
</DxcFlex>
<DxcFlex gap="1rem" direction="column">
<DxcStatusLight label="Info" mode="info" size="small" />
<DxcStatusLight label="Info" mode="info" />
<DxcStatusLight label="Info" mode="info" size="large" />
</DxcFlex>
<DxcFlex gap="1rem" direction="column">
<DxcStatusLight label="Success" mode="success" size="small" />
<DxcStatusLight label="Success" mode="success" />
<DxcStatusLight label="Success" mode="success" size="large" />
</DxcFlex>
<DxcFlex gap="1rem" direction="column">
<DxcStatusLight label="Warning" mode="warning" size="small" />
<DxcStatusLight label="Warning" mode="warning" />
<DxcStatusLight label="Warning" mode="warning" size="large" />
</DxcFlex>
<DxcFlex gap="1rem" direction="column">
<DxcStatusLight label="Error" mode="error" size="small" />
<DxcStatusLight label="Error" mode="error" />
<DxcStatusLight label="Error" mode="error" size="large" />
</DxcFlex>
</DxcFlex>
</DxcInset>
);
}`;

const scope = {
DxcStatusLight,
DxcFlex,
DxcInset,
};

export default { code, scope };