Skip to content

Accordion component funtionality #544

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
daniele-zurico merged 25 commits into from
Dec 12, 2023
Merged

Accordion component funtionality #544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
b5a0959
Accordion component funtionality
byohannes Oct 9, 2023
8d14fdc
improve the Accordion component as per the updated review
byohannes Nov 15, 2023
8097364
add comments to the props of the main component
byohannes Nov 15, 2023
7705031
Merge branch 'release/1.0.0' into feature/accordion
byohannes Nov 15, 2023
b8f5d3e
Add unit test for an accordion to be expanded when a default expanded…
byohannes Nov 16, 2023
b4f07e8
improve accordion component
byohannes Nov 22, 2023
c44095f
feat: add demo
daniele-zurico Nov 23, 2023
64b5245
feat: add demo
daniele-zurico Nov 23, 2023
dcef047
improve accordion as per discusion
byohannes Dec 5, 2023
58a0456
update accordion examples
byohannes Dec 5, 2023
04f9fa9
feat: add title on the item
daniele-zurico Dec 5, 2023
15d9d02
feat: add props
daniele-zurico Dec 6, 2023
51eb726
Fix typos and update default values in Accordion
byohannes Dec 6, 2023
bcf1c0e
Add collapsedIcon prop to AccordionContext and
byohannes Dec 6, 2023
fd6e95c
Add Accordion component documentation
byohannes Dec 10, 2023
af4961b
Add description of accordion andits items props
byohannes Dec 11, 2023
3950cab
feat: update css
daniele-zurico Dec 11, 2023
3685966
feat: update css
daniele-zurico Dec 11, 2023
dc60243
feat: fix accordion
daniele-zurico Dec 11, 2023
53b0804
imrove different posiibilities of the user can create with the accord…
byohannes Dec 11, 2023
73d0785
resolve conflicts
byohannes Dec 11, 2023
f99fd8a
Add useEffect hook to handle expanded items and improve class based d…
byohannes Dec 11, 2023
359b19c
Avoid repetion of unit tests
byohannes Dec 11, 2023
11a0c06
resolve comments
byohannes Dec 12, 2023
9dc6229
feat: fix documentation
daniele-zurico Dec 12, 2023
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
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ version: 2
jobs:
build:
docker:
- image: cimg/node:16.16.0
- image: cimg/node:18.14.0
working_directory: ~/repo
steps:
- checkout
Expand Down
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,5 @@ coverage
.parcel-cache
example/.parcel-cache/*
example/build
storybook-static
storybook-static
package-lock.json
19 changes: 11 additions & 8 deletions .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,14 +73,17 @@ export const parameters = {
],
'Layout',
[
'Breadcrumb',
['Documentation', 'Live', 'Without style', 'Class based'],
'Details',
['Documentation', 'Live', 'Without style', 'Class based'],
'Tabs',
['Documentation', 'Live', 'Without style', 'Class based'],
'Table',
['Documentation', 'Live', 'Without style', 'Class based'],
'Accordion',
['Documentation', 'Live', 'Without style', 'Class based'],
'Breadcrumb',
['Documentation', 'Live', 'Without style', 'Class based'],
'Details',
['Documentation', 'Live', 'Without style', 'Class based'],
'Tabs',
['Documentation', 'Live', 'Without style', 'Class based'],
'Table',
['Documentation', 'Live', 'Without style', 'Class based'],

],
'Typography',
[
Expand Down
208 changes: 208 additions & 0 deletions example/src/components/AccordionDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,208 @@
import React from 'react';
import {
Accordion,
AccordionItem,
AccordionTitle,
AccordionDetails,
} from '@capgeminiuk/dcx-react-library';
import './accordion.scss';

export const AccordionDemo = () => {
return (
<>
<h1>Accordion with single open - default</h1>
<Accordion>
<AccordionItem title="1">
<AccordionTitle className="accordion">
<>Section 1</>
</AccordionTitle>
<AccordionDetails className="panel">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle className="accordion">
<>Section 2</>
</AccordionTitle>
<AccordionDetails className="panel">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam.
</p>
</AccordionDetails>
</AccordionItem>
</Accordion>

<h1>Accordion with multiple open - multipleOpen</h1>
<Accordion multipleOpen>
<AccordionItem title="1">
<AccordionTitle className="accordion">
<>Title 1</>
</AccordionTitle>
<AccordionDetails className="panel">
<p>Panel 1 Details</p>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle className="accordion">
<>Title 2</>
</AccordionTitle>
<AccordionDetails className="panel">
<p>Panel 2 Details</p>
</AccordionDetails>
</AccordionItem>
</Accordion>

<h1>
Accordion with the second accordion item expanded by defaul - expanded
</h1>
<Accordion expanded={['2']}>
<AccordionItem title="1">
<AccordionTitle className="accordion">
<>Section 1</>
</AccordionTitle>
<AccordionDetails className="panel">
<p>Section 1 Details</p>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle className="accordion">
<>Section 2</>
</AccordionTitle>
<AccordionDetails className="panel">
<p>Section 2 Details</p>
</AccordionDetails>
</AccordionItem>
</Accordion>

<h1>Accordion with common title classes - titleClassName</h1>
<Accordion expanded={['2']} titleClassName="accordion">
<AccordionItem title="1">
<AccordionTitle>
<>Section 1</>
</AccordionTitle>
<AccordionDetails className="panel">
<p>Section 1 Details</p>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle>
<>Section 2</>
</AccordionTitle>
<AccordionDetails className="panel">
<p>Section 2 Details</p>
</AccordionDetails>
</AccordionItem>
</Accordion>

<h1>
Accordion with common title and details classes - titleClassName &
detailsClassName
</h1>
<Accordion
expanded={['2']}
titleClassName="accordion"
detailsClassName="panel"
>
<AccordionItem title="1">
<AccordionTitle>
<>Section 1</>
</AccordionTitle>
<AccordionDetails>
<p>Section 1 Details</p>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle>
<>Section 2</>
</AccordionTitle>
<AccordionDetails>
<p>Section 2 Details</p>
</AccordionDetails>
</AccordionItem>
</Accordion>

<h1>Accordion with common expand icon - expandIcon</h1>
<Accordion
expanded={['2']}
titleClassName="accordion"
detailsClassName="panel"
expandIcon={<span>&#94;</span>}
>
<AccordionItem title="1">
<AccordionTitle>
<>Section 1</>
</AccordionTitle>
<AccordionDetails>
<p>Section 1 Details</p>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle>
<>Section 2</>
</AccordionTitle>
<AccordionDetails>
<p>Section 2 Details</p>
</AccordionDetails>
</AccordionItem>
</Accordion>

<h1>Accordion with extra props</h1>
<Accordion
expanded={['2']}
titleClassName="accordion"
detailsClassName="panel"
expandIcon={<span>&#94;</span>}
>
<AccordionItem title="1" props={{ testId: 1 }}>
<AccordionTitle props={{ testId: 2 }}>
<>Section 1</>
</AccordionTitle>
<AccordionDetails props={{ testId: 3 }}>
<p>Section 1 Details</p>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle>
<>Section 2</>
</AccordionTitle>
<AccordionDetails>
<p>Section 2 Details</p>
</AccordionDetails>
</AccordionItem>
</Accordion>

<h1>Accordion with expanding and collapsing icons</h1>
<Accordion
expanded={['1']}
titleClassName="accordion"
detailsClassName="panel"
expandIcon={<span>&#x25B2;</span>}
collapsedIcon={<span>&#x25BC;</span>}
>
<AccordionItem title="1">
<AccordionTitle props={{ testId: 2 }}>
<>Section 1</>
</AccordionTitle>
<AccordionDetails props={{ testId: 3 }}>
<p>Section 1 Details</p>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle>
<>Section 2</>
</AccordionTitle>
<AccordionDetails>
<p>Section 2 Details</p>
</AccordionDetails>
</AccordionItem>
</Accordion>
</>
);
};
24 changes: 24 additions & 0 deletions example/src/components/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

.active, .accordion:hover {
background-color: #ccc;
}

.panel {
padding: 18px;
display: none;
background-color: white;
overflow: hidden;
margin: 0px;
}
1 change: 1 addition & 0 deletions example/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@ export { DescriptionListDemo } from './DescriptionListDemo';
export { LabelDemo } from './LabelDemo';
export { ListDemo } from './ListDemo';
export { BreadcrumbDemo } from './BreadcrumbDemo';
export { AccordionDemo } from './AccordionDemo';
export * from './library-candidates';
2 changes: 2 additions & 0 deletions example/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
CharacterCountDemo,
LinkDemo,
ListDemo,
AccordionDemo,
} from './components';
import './global-styles.scss';
import { Login } from './pages/Login';
Expand Down Expand Up @@ -70,6 +71,7 @@ const App = () => (
<Route path="/list" element={<ListDemo />} />
<Route path="/descriptionList" element={<DescriptionListDemo />} />
<Route path="/breadcrumb" element={<BreadcrumbDemo />} />
<Route path="/accordion" element={<AccordionDemo />} />
</Routes>
</BrowserRouter>
</div>
Expand Down
Loading