Skip to content
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

refactor(dossier): cards secondary replaced by accordion #12

Merged
merged 1 commit into from
Dec 2, 2023
Merged

refactor(dossier): cards secondary replaced by accordion #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 25 additions & 0 deletions components/ThemeRegistry/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,31 @@ const theme = createTheme({
},
},
},
MuiAccordion: {
styleOverrides: {
root: {
"&:before": {
display: "none",
},
},
},
},
MuiAccordionSummary: {
styleOverrides: {
root: ({ ownerState }) => ({
backgroundColor: "#F8F9FA",
borderRadius: ownerState.expanded ? "4px 4px 0px 0px" : "4px",
}),
},
},
MuiCollapse: {
styleOverrides: {
root: {
backgroundColor: "#F8F9FA",
borderRadius: " 0px 0px 4px 4px",
},
},
},
},
});

Expand Down
97 changes: 55 additions & 42 deletions components/folders/AdditionalInfoCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,72 @@
import * as React from "react";

import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import Button from "@mui/material/Button";
import DeputyPreview from "../DeputyPreview";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";

import InfoIcon from "@/icons/InfoIcon";
import CardLayout from "@/components/folders/CardLayout";
import MinusIcon from "@/icons/MinusIcon";

const AdditionalInfoCard = () => {
return (
<CardLayout title={"Informations complémentaires"} variant="secondary">
<Stack direction="column" spacing={2}>
<div>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="body2" fontWeight="light">
Amendements
</Typography>
<InfoIcon sx={{ fontSize: "14px" }} />
</Stack>
<Typography variant="body2" fontWeight="bold">
411
</Typography>
</div>
<Stack direction="column" spacing={1}>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="body2" fontWeight="light">
Co-signataires
<Accordion elevation={0} disableGutters defaultExpanded>
<AccordionSummary
expandIcon={<MinusIcon sx={{ fontSize: "10px" }} />}
aria-controls="additional-info-content"
id="additional-info-header"
>
<Typography>Informations complémentaires</Typography>
</AccordionSummary>
<AccordionDetails>
<Stack direction="column" spacing={2}>
<div>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="body2" fontWeight="light">
Amendements
</Typography>
<InfoIcon sx={{ fontSize: "14px" }} />
</Stack>
<Typography variant="body2" fontWeight="bold">
411
</Typography>
<InfoIcon sx={{ fontSize: "14px" }} />
</div>
<Stack direction="column" spacing={1}>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="body2" fontWeight="light">
Co-signataires
</Typography>
<InfoIcon sx={{ fontSize: "14px" }} />
</Stack>
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<Button fullWidth variant="contained" color="secondary">
Tous les signataires (7)
</Button>
</Stack>
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<Button fullWidth variant="contained" color="secondary">
Tous les signataires (7)
</Button>
</Stack>
<Stack direction="column" spacing={1}>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="body2" fontWeight="light">
Co-signataires
</Typography>
<InfoIcon sx={{ fontSize: "14px" }} />
<Stack direction="column" spacing={1}>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="body2" fontWeight="light">
Co-signataires
</Typography>
<InfoIcon sx={{ fontSize: "14px" }} />
</Stack>
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<Button fullWidth variant="contained" color="secondary">
Tous les orateurs (7)
</Button>
</Stack>
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<Button fullWidth variant="contained" color="secondary">
Tous les orateurs (7)
</Button>
</Stack>
</Stack>
</CardLayout>
</AccordionDetails>
</Accordion>
);
};

Expand Down
77 changes: 45 additions & 32 deletions components/folders/CommiteeCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,59 @@
import * as React from "react";

import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";

import CardLayout from "@/components/folders/CardLayout";
import DeputyPreview from "@/components/folders/DeputyPreview";
import InfoIcon from "@/icons/InfoIcon";
import MinusIcon from "@/icons/MinusIcon";

const CommiteeCard = () => {
return (
<CardLayout title={"Commissions"} variant="secondary">
<Stack direction="column" spacing={2}>
<div>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="body2" fontWeight="light">
Comission saisie au fond
<Accordion elevation={0} disableGutters defaultExpanded>
<AccordionSummary
expandIcon={<MinusIcon sx={{ fontSize: "10px" }} />}
aria-controls="commission-content"
id="commission-header"
>
<Typography>Commissions 1</Typography>
</AccordionSummary>
<AccordionDetails>
<Stack direction="column" spacing={2}>
<div>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="body2" fontWeight="light">
Commission saisie au fond
</Typography>
<InfoIcon sx={{ fontSize: "14px" }} />
</Stack>
<Typography variant="body2" fontWeight="bold" pb={2}>
Commission des affaires économiques
</Typography>
</div>
<div>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="body2" fontWeight="light">
Comission saisie pour avis
</Typography>
<InfoIcon sx={{ fontSize: "14px" }} />
</Stack>
<Typography variant="body2" fontWeight="bold" pb={2}>
Commission du développement durable et de l&apos;aménagement du
territoire
</Typography>
<InfoIcon sx={{ fontSize: "14px" }} />
</Stack>
<Typography variant="body2" fontWeight="bold" pb={2}>
Commission des affaires économiques
</Typography>
</div>
<div>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="body2" fontWeight="light">
Comission saisie pour avis
</div>
<div>
<Typography variant="body2" fontWeight="light" pb={1}>
Rapporteur
</Typography>
<InfoIcon sx={{ fontSize: "14px" }} />
</Stack>
<Typography variant="body2" fontWeight="bold" pb={2}>
Commission du développement durable et de l&apos;aménagement du
territoire
</Typography>
</div>
<div>
<Typography variant="body2" fontWeight="light" pb={1}>
Rapporteur
</Typography>
<DeputyPreview />
</div>
</Stack>
</CardLayout>
<DeputyPreview />
</div>
</Stack>
</AccordionDetails>
</Accordion>
);
};

Expand Down
44 changes: 29 additions & 15 deletions components/folders/LegislativeDocumentsCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,40 @@ import * as React from "react";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";

import CardLayout from "@/components/folders/CardLayout";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";

import LinkIcon from "@/icons/LinkIcon";
import MinusIcon from "@/icons/MinusIcon";

import Link from "next/link";

const LegislativeDocumentsCard = () => {
return (
<CardLayout title={"Documents législatifs"} variant="secondary">
<Stack direction="column" spacing={2}>
{Array.from(Array(10).keys()).map((link) => (
<Stack key={link} direction="row" spacing={1} alignItems="center">
<LinkIcon sx={{ fontSize: "14px" }} />
<Link href="">
<Typography variant="body2" fontWeight="bold">
Lien vers {link}
</Typography>
</Link>
</Stack>
))}
</Stack>
</CardLayout>
<Accordion elevation={0} disableGutters defaultExpanded>
<AccordionSummary
expandIcon={<MinusIcon sx={{ fontSize: "10px" }} />}
aria-controls="additional-info-content"
id="additional-info-header"
>
<Typography>Documents législatifs</Typography>
</AccordionSummary>
<AccordionDetails>
<Stack direction="column" spacing={2}>
{Array.from(Array(10).keys()).map((link) => (
<Stack key={link} direction="row" spacing={1} alignItems="center">
<LinkIcon sx={{ fontSize: "14px" }} />
<Link href="">
<Typography variant="body2" fontWeight="bold">
Lien vers {link}
</Typography>
</Link>
</Stack>
))}
</Stack>
</AccordionDetails>
</Accordion>
);
};

Expand Down
17 changes: 17 additions & 0 deletions icons/MinusIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";

export default function MinusIcon(props: SvgIconProps) {
return (
<SvgIcon {...props}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
>
<path d="M0 7.83325V5.83325H14V7.83325H0Z" fill="#171B1E" />
</svg>
</SvgIcon>
);
}