Skip to content

Badge redesign #2151

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
Jialecl merged 11 commits into from
Mar 13, 2025
Merged

Badge redesign #2151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e089459
Reimplementation of the Badge component with new CSS variables
Jan 31, 2025
5b6f294
Fixed preview for storybook
Feb 5, 2025
f928032
Added documentation with the new structure
Feb 17, 2025
6831160
Removed duplicated category
Feb 17, 2025
02e0aa7
Fixed font color for notification
Feb 18, 2025
dbbc033
Fixed wrong overview badge text
Mar 10, 2025
1ff6774
Fixed paddings
Mar 10, 2025
c055853
Merge branch 'master' into Mil4n0r/tokens-badge
Jialecl Mar 11, 2025
6ccf241
Changed spacing token
Mar 13, 2025
b322705
Merge branch 'Mil4n0r/tokens-badge' of github.com:dxc-technology/hals…
Mar 13, 2025
ffaed8b
Merge branch 'master' into Mil4n0r/tokens-badge
Mil4n0r Mar 13, 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
19 changes: 19 additions & 0 deletions apps/website/pages/components/badge/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Head from "next/head";
import type { ReactElement } from "react";
import BadgePageLayout from "screens/components/badge/BadgePageLayout";
import BadgeCodePage from "screens/components/badge/code/BadgeCodePage";

const Code = () => {
return (
<>
<Head>
<title>Badge Code — Halstack Design System</title>
</Head>
<BadgeCodePage />
</>
);
};

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

export default Code;
8 changes: 3 additions & 5 deletions apps/website/pages/components/badge/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
import Head from "next/head";
import type { ReactElement } from "react";
import BadgePageLayout from "screens/components/badge/BadgePageLayout";
import BadgeCodePage from "screens/components/badge/code/BadgeCodePage";
import BadgeOverviewPage from "screens/components/badge/overview/BadgeOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Badge — Halstack Design System</title>
</Head>
<BadgeCodePage></BadgeCodePage>
<BadgeOverviewPage />
</>
);
};

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

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

This file was deleted.

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

This file was deleted.

7 changes: 3 additions & 4 deletions apps/website/screens/components/badge/BadgePageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import { ReactNode } from "react";

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

return (
Expand All @@ -21,7 +20,7 @@ const BadgePageHeading = ({ children }: { children: ReactNode }) => {
It offers a quick overview of a category or status and is frequently used to display numerical or status
data.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
78 changes: 39 additions & 39 deletions apps/website/screens/components/badge/code/BadgeCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,31 @@ const sections = [
<th>Description</th>
<th>Default</th>
</tr>
<tr>
<td>color</td>
<td>
<TableCode>'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow' | 'purple'</TableCode>
</td>
<td>Affects the visual style of the badge. It can be used following semantic purposes or not.</td>
<td>
<TableCode>'grey'</TableCode>
</td>
</tr>
<tr>
<td>icon</td>
<td>
<TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
</td>
<td>
<DxcLink newWindow href="https://fonts.google.com/icons">
Material Symbol
</DxcLink>{" "}
name or SVG element as the icon that will be placed next to the badge label. When using Material Symbols,
replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the symbol
name with <TableCode>"filled_"</TableCode>.
</td>
<td>-</td>
</tr>
<tr>
<td>label</td>
<td>
Expand Down Expand Up @@ -51,51 +76,26 @@ const sections = [
</td>
</tr>
<tr>
<td>title</td>
<td>
<TableCode>string</TableCode>
</td>
<td>
Text representing advisory information related to the badge. Under the hood, this prop also serves as an
accessible label for the component.
</td>
<td>-</td>
</tr>
<tr>
<td>color</td>
<td>size</td>
<td>
<TableCode>'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow' | 'purple'</TableCode>
<TableCode>'small' | 'medium' | 'large'</TableCode>
</td>
<td>Affects the visual style of the badge. It can be used following semantic purposes or not.</td>
<td>Size of the component.</td>
<td>
<TableCode>'grey'</TableCode>
<TableCode>'medium'</TableCode>
</td>
</tr>
<tr>
<td>icon</td>
<td>title</td>
<td>
<TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
<TableCode>string</TableCode>
</td>
<td>
<DxcLink newWindow href="https://fonts.google.com/icons">
Material Symbol
</DxcLink>{" "}
name or SVG element as the icon that will be placed next to the badge label. When using Material Symbols,
replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the symbol
name with <TableCode>"filled_"</TableCode>.
Text representing advisory information related to the badge. Under the hood, this prop also serves as an
accessible label for the component.
</td>
<td>-</td>
</tr>
<tr>
<td>size</td>
<td>
<TableCode>'small' | 'medium' | 'large'</TableCode>
</td>
<td>Size of the component.</td>
<td>
<TableCode>'medium'</TableCode>
</td>
</tr>
</DxcTable>
),
},
Expand All @@ -106,19 +106,19 @@ const sections = [
title: "Contextual",
content: <Example example={contextual} defaultIsVisible />,
},
{
title: "Notification",
content: <Example example={notification} defaultIsVisible />,
},
{
title: "Icons",
content: <Example example={icons} defaultIsVisible />,
},
{
title: "Notification",
content: <Example example={notification} defaultIsVisible />,
},
],
},
];

const BadgeTableCodePage = () => {
const BadgeCodePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
Expand All @@ -129,4 +129,4 @@ const BadgeTableCodePage = () => {
);
};

export default BadgeTableCodePage;
export default BadgeCodePage;
Loading