Skip to content

Alert redesign #2150

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
GomezIvann merged 20 commits into from
Mar 3, 2025
Merged

Alert redesign #2150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
f4dc291
Added tokens to DxcAlert
Jan 30, 2025
564568f
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Jan 31, 2025
5b801cd
Reimplementation of the Alert and ActionIcon component with new CSS v…
Jan 31, 2025
4b21548
Removed unused imports
Jan 31, 2025
f4863c1
Fixed tokens
Jan 31, 2025
ca32367
Removed width prop
Jan 31, 2025
92964b3
Fixed styles for focus
Feb 3, 2025
bad77e8
Width fixed size
Feb 3, 2025
65d3f75
Fixed width for icon
Feb 4, 2025
4617d41
Modified preview for storybook
Feb 5, 2025
2f0c1ce
Modified preview for storybook
Feb 5, 2025
2df6ac5
Corrected styles
Feb 5, 2025
7e4d699
Added fixes from review
Feb 14, 2025
654e3b1
Added documentation with the new structure
Feb 17, 2025
ba3f520
Fixed doc and modal mode
Feb 17, 2025
222fef9
Changed category name
Feb 17, 2025
7fec078
Added fix for modal alert kb interaction
Feb 19, 2025
80ff2f6
Added improvements to modal from review
Feb 28, 2025
c7a4c6a
Merge branch 'master' into Mil4n0r/tokens-alert
Mil4n0r Feb 28, 2025
1836e97
Extracting Actions into a separate file
GomezIvann Mar 3, 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/alert/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 AlertPageLayout from "screens/components/alert/AlertPageLayout";
import AlertCodePage from "screens/components/alert/code/AlertCodePage";

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

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

export default Code;
8 changes: 3 additions & 5 deletions apps/website/pages/components/alert/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 AlertPageLayout from "screens/components/alert/AlertPageLayout";
import AlertCodePage from "screens/components/alert/code/AlertCodePage";
import AlertOverviewPage from "screens/components/alert/overview/AlertOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Alert — Halstack Design System</title>
</Head>
<AlertCodePage></AlertCodePage>
<AlertOverviewPage />
</>
);
};

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

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

This file was deleted.

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

This file was deleted.

11 changes: 4 additions & 7 deletions apps/website/screens/components/alert/AlertPageLayout.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 AlertPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/alert" },
{ label: "Usage", path: "/components/alert/usage" },
{ label: "Specifications", path: "/components/alert/specifications" },
{ label: "Overview", path: "/components/alert" },
{ label: "Code", path: "/components/alert/code" },
];

return (
Expand All @@ -17,11 +16,9 @@ const AlertPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Alert" />
<DxcParagraph>
Alert messages are meant to provide contextual feedback about important changes in the interface. They are
used to convey essential information to the user, ensuring that critical updates or warnings are immediately
noticeable.
Alert messages are meant to provide contextual feedback about important changes in the interface.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
18 changes: 8 additions & 10 deletions apps/website/screens/components/alert/code/AlertCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,15 +160,13 @@ const sections = [
},
];

const AlertCodePage = () => {
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/alert/code/AlertCodePage.tsx" />
</DxcFlex>
);
};
const AlertCodePage = () => (
<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/alert/code/AlertCodePage.tsx" />
</DxcFlex>
);

export default AlertCodePage;
Loading