Skip to content

Accordion redesign #2196

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 9 commits into from
Apr 11, 2025
Merged

Accordion redesign #2196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e032e51
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Apr 1, 2025
bd7e7e2
Fixes based on review
Apr 1, 2025
f53818b
Started adding Accordion doc
Apr 1, 2025
975e10b
Added documentation text
Apr 1, 2025
d8f9b69
Added accordion examples
Apr 2, 2025
6027a2a
Fixed sublabel height
Apr 3, 2025
6100be5
Fixes based on feedback
Apr 11, 2025
a7d4564
Chevron -> chevron icon
Apr 11, 2025
2455c2d
Merge branch 'master' into Mil4n0r/tokens-accordion
Jialecl Apr 11, 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/accordion/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 AccordionPageLayout from "screens/components/accordion/AccordionPageLayout";
import AccordionCodePage from "screens/components/accordion/code/AccordionCodePage";

const Code = () => (
<>
<Head>
<title>Accordion code — Halstack Design System</title>
</Head>
<AccordionCodePage />
</>
);

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

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/accordion/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 AccordionPageLayout from "screens/components/accordion/AccordionPageLayout";
import AccordionCodePage from "screens/components/accordion/code/AccordionCodePage";
import AccordionOverviewPage from "screens/components/accordion/overview/AccordionOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Accordion — Halstack Design System</title>
</Head>
<AccordionCodePage></AccordionCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Accordion — Halstack Design System</title>
</Head>
<AccordionOverviewPage />
</>
);

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

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

This file was deleted.

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

This file was deleted.

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

return (
Expand All @@ -22,7 +21,7 @@ const AccordionPageHeading = ({ children }: { children: ReactNode }) => {
enhances the user experience by organizing information into smaller, digestible chunks, helping reduce
cognitive load and save screen space.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
108 changes: 54 additions & 54 deletions apps/website/screens/components/accordion/code/AccordionCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,17 @@ const sections = [
</thead>
<tbody>
<tr>
<td>independent</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>
When true, limits the user to single-open section at a time. When false, multiple sections can be opened
simultaneously.
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
children
</DxcFlex>
</td>
<td>
<TableCode>false</TableCode>
<TableCode>{`ReactElement<AccordionPropsType>[] | ReactElement<AccordionPropsType>`}</TableCode>
</td>
<td>Contains one or more accordion items.</td>
<td>-</td>
</tr>
<tr>
<td>defaultIndexActive</td>
Expand All @@ -52,25 +52,27 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>indexActive</td>
<td>independent</td>
<td>
<TableCode>number | number[]</TableCode>
<TableCode>boolean</TableCode>
</td>
<td>
The index of the active accordion. If undefined, the component will be uncontrolled and the active
accordion will be managed internally by the component. If null, the component will be controlled and all
accordions will be closed. If the accordion is not independent, several accordions can be activated.
When true, limits the user to single-open section at a time. When false, multiple sections can be opened
simultaneously.
</td>
<td>
<TableCode>false</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>onActiveChange</td>
<td>indexActive</td>
<td>
<TableCode>{`(index: number | number[]) => void`}</TableCode>
<TableCode>number | number[]</TableCode>
</td>
<td>
This function will be called when the user clicks on an accordion. The index of the clicked accordion will
be passed as a parameter.
The index of the active accordion. If undefined, the component will be uncontrolled and the active
accordion will be managed internally by the component. If null, the component will be controlled and all
accordions will be closed. If the accordion is not independent, several accordions can be activated.
</td>
<td>-</td>
</tr>
Expand All @@ -86,16 +88,14 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>onActiveChange</td>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
children
</DxcFlex>
<TableCode>{`(index: number | number[]) => void`}</TableCode>
</td>
<td>
<TableCode>{`ReactElement<AccordionPropsType>[] | ReactElement<AccordionPropsType>`}</TableCode>
This function will be called when the user clicks on an accordion. The index of the clicked accordion will
be passed as a parameter.
</td>
<td>Contains one or more accordion items.</td>
<td>-</td>
</tr>
</tbody>
Expand All @@ -120,56 +120,48 @@ const sections = [
</thead>
<tbody>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
label
</DxcFlex>
</td>
<td>assistiveText</td>
<td>
<TableCode>string</TableCode>
</td>
<td>The panel label.</td>
<td>Assistive text to be placed on the right side of the panel.</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="new" />
subLabel
badge
</DxcFlex>
</td>
<td>
<TableCode>string</TableCode>
<TableCode>{"{ position: 'before' | 'after'; element: ReactNode }"}</TableCode>
</td>
<td>Additional info label positioned under the label.</td>
<td>Badge component to add extra value to the accordion.</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="new" />
badge
<StatusBadge status="required" />
children
</DxcFlex>
</td>
<td>
<TableCode>{"{ position: 'before' | 'after'; element: ReactNode }"}</TableCode>
<TableCode>React.ReactNode</TableCode>
</td>
<td>Badge component to add extra value to the accordion.</td>
<td>The expanded panel of the accordion. This area can be used to render custom content.</td>
<td>-</td>
</tr>
<tr>
<td>disabled</td>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="new" />
statusLight
</DxcFlex>
<TableCode>boolean</TableCode>
</td>
<td>If true, the component will be disabled.</td>
<td>
<TableCode>React.ReactNode</TableCode>
<TableCode>false</TableCode>
</td>
<td>Status light component to add extra value to the accordion.</td>
<td>-</td>
</tr>
<tr>
<td>icon</td>
Expand All @@ -187,34 +179,42 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>assistiveText</td>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
label
</DxcFlex>
</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Assistive text to be placed on the right side of the panel.</td>
<td>The panel label.</td>
<td>-</td>
</tr>
<tr>
<td>disabled</td>
<td>
<TableCode>boolean</TableCode>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="new" />
statusLight
</DxcFlex>
</td>
<td>If true, the component will be disabled.</td>
<td>
<TableCode>false</TableCode>
<TableCode>React.ReactNode</TableCode>
</td>
<td>Status light component to add extra value to the accordion.</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
children
<StatusBadge status="new" />
subLabel
</DxcFlex>
</td>
<td>
<TableCode>React.ReactNode</TableCode>
<TableCode>string</TableCode>
</td>
<td>The expanded panel of the accordion. This area can be used to render custom content.</td>
<td>Additional info label positioned under the label.</td>
<td>-</td>
</tr>
<tr>
Expand Down
Loading