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

feat(dossier): secondary cards #8

Merged
merged 9 commits into from
Nov 29, 2023
Merged

feat(dossier): secondary cards #8

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6285986
feat(dossier): CardLayout component
aaadryyy Nov 28, 2023
f94bc97
feat(dossier): Link and Info icons
aaadryyy Nov 28, 2023
5bd7f6f
refactor(dossier): AdditionalInfoCard
aaadryyy Nov 28, 2023
137a222
refactor(dossier): CommiteeCard
aaadryyy Nov 28, 2023
6fb8306
refactor(dossier): LegislativeDocumentCard
aaadryyy Nov 28, 2023
9a82b83
refactor(dossier): DeputyPreview
aaadryyy Nov 28, 2023
bed1d46
feat(theme): Button
aaadryyy Nov 28, 2023
a4db64c
update textTransform only for secondary color
alexfauquette Nov 29, 2023
a365001
feat(button):add secondary buttons specific font weight and font size
aaadryyy Nov 29, 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
17 changes: 16 additions & 1 deletion components/ThemeRegistry/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ const theme = createTheme({
light: "#FEE6D9",
main: "#EF4444",
},
secondary: {
main: "#E9ECEF",
contrastText: "#495057",
},
grey: {
900: "#171B1E",
800: "#343A40",
Expand Down Expand Up @@ -52,8 +56,19 @@ const theme = createTheme({
allVariants: {
color: "#171B1E",
},
button: {
fontSize: 12,
fontWeight: 700,
textTransform: "none",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexfauquette any idea how to remove uppercase on secondary buttons but keep it on the others (primary, tabs...)?

Copy link
Collaborator

@alexfauquette alexfauquette Nov 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can apply this style to the className containedSecondary class: https://mui.com/material-ui/api/button/#Button-css-containedSecondary It exists also for the other variants

Then maybe better to move this textTransform to the style override
https://mui.com/material-ui/customization/theme-components/#theme-style-overrides

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So should I also move the fontSize and fontWeight in the style override?
I am not sure how to style the containedSecondary className properly (other than in a .css file).

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You have multiple choices

https://mui.com/material-ui/customization/theme-components/#theme-style-overrides

Usually you can write a CSS selector as a key, using & to target the current element.

As an example, you have in the codebase the following code. The same type of property can be use in styleOverride

sx={{
   [`& .${timelineOppositeContentClasses.root}`]: {
        flex: 0.2,
      },
    }}

But I found an easier one for your issue. I just commit

Copy link
Collaborator Author

@aaadryyy aaadryyy Nov 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!
I added the fontSize and fontWeight to the fonction in the following commit 👇 .

It felt weird not to use the global theme for buttons, as those will (probably) be reused everywhere.

},
},
components: {
MuiButton: {
defaultProps: {
disableElevation: true,
},
},
},
components: {},
});

export default theme;
73 changes: 40 additions & 33 deletions components/folders/AdditionalInfoCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,59 @@
import * as React from "react";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
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";

const AdditionalInfoCard = () => {
return (
<Card elevation={0} sx={{ backgroundColor: "grey.50" }}>
<CardContent sx={{ padding: 2 }}>
<Typography variant="body1" fontWeight="bold" pb={2}>
Informations complémentaires
</Typography>
<Typography variant="body2" fontWeight="light" pb={1}>
Amendements
</Typography>
<Typography variant="body2" fontWeight="bold" pb={2}>
411
</Typography>
<Stack direction="column" spacing={2}>
<Stack direction="column" spacing={1}>
<CardLayout title={"Informations complémentaires"}>
<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
</Typography>
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<Button fullWidth variant="contained">
Tous les signataires (7)
</Button>
<InfoIcon sx={{ fontSize: "14px" }} />
</Stack>
<Stack direction="column" spacing={1}>
<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">
Orateurs
Co-signataires
</Typography>
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<Button fullWidth variant="contained">
Tous les orateurs (34)
</Button>
<InfoIcon sx={{ fontSize: "14px" }} />
</Stack>
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<DeputyPreview />
<Button fullWidth variant="contained" color="secondary">
Tous les orateurs (7)
</Button>
</Stack>
</CardContent>
</Card>
</Stack>
</CardLayout>
);
};

Expand Down
26 changes: 26 additions & 0 deletions components/folders/CardLayout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
import DeputyPreview from "../DeputyPreview";

interface CardLayoutProps {
title: string;
children: React.ReactNode;
}

const CardLayout = ({ title, children }: CardLayoutProps) => {
return (
<Card elevation={0} sx={{ backgroundColor: "grey.50" }}>
<CardContent sx={{ padding: 2 }}>
<Typography variant="body1" fontWeight="bold" pb={3}>
{title}
</Typography>
{children}
</CardContent>
</Card>
);
};

export default CardLayout;
59 changes: 38 additions & 21 deletions components/folders/CommiteeCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,46 @@
import * as React from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import DeputyPreview from "../DeputyPreview";
import Stack from "@mui/material/Stack";

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

const CommiteeCard = () => {
return (
<Card elevation={0} sx={{ backgroundColor: "grey.50" }}>
<CardContent sx={{ padding: 2 }}>
<Typography variant="body1" fontWeight="bold" pb={2}>
Comission
</Typography>
<Typography variant="body2" fontWeight="light" pb={1}>
Commission de travail parlementaire
</Typography>
<Typography variant="body2" fontWeight="bold" pb={2}>
Commission du développement durable
</Typography>
<Typography variant="body2" fontWeight="light" pb={1}>
Rapporteur
</Typography>

<DeputyPreview />
</CardContent>
</Card>
<CardLayout title={"Commissions"}>
<Stack direction="column" spacing={2}>
<div>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="body2" fontWeight="light">
Comission 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>
</div>
<div>
<Typography variant="body2" fontWeight="light" pb={1}>
Rapporteur
</Typography>
<DeputyPreview />
</div>
</Stack>
</CardLayout>
);
};

Expand Down
3 changes: 0 additions & 3 deletions components/folders/DeputyPreview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,6 @@ const DeputyPreview = () => {
<Typography variant="caption" fontWeight="light">
REN
</Typography>
<Typography variant="caption" fontWeight="light">
Info complémentaire
</Typography>
</Stack>
</Stack>
</Box>
Expand Down
29 changes: 17 additions & 12 deletions components/folders/LegislativeDocuments/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
import * as React from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";

import CardLayout from "@/components/folders/CardLayout";
import LinkIcon from "@/icons/LinkIcon";
import Link from "next/link";

const LegislativeDocuments = () => {
return (
<Card elevation={0} sx={{ backgroundColor: "grey.50" }}>
<CardContent sx={{ padding: 2 }}>
<Typography variant="body1" fontWeight="bold" pb={2}>
Document législatifs
</Typography>
<CardLayout title={"Documents législatifs"}>
<Stack direction="column" spacing={2}>
{Array.from(Array(10).keys()).map((link) => (
<Typography key={link} variant="body1" fontWeight="bold">
Lien vers {link}
</Typography>
<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>
))}
</CardContent>
</Card>
</Stack>
</CardLayout>
);
};

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

export default function InfoIcon(props: SvgIconProps) {
return (
<SvgIcon {...props}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="13"
viewBox="0 0 12 13"
fill="none"
>
<path
d="M5.4 9.5H6.6V5.9H5.4V9.5ZM6 4.7C6.17 4.7 6.3125 4.6425 6.4275 4.5275C6.5425 4.4125 6.6 4.27 6.6 4.1C6.6 3.93 6.5425 3.7875 6.4275 3.6725C6.3125 3.5575 6.17 3.5 6 3.5C5.83 3.5 5.6875 3.5575 5.5725 3.6725C5.4575 3.7875 5.4 3.93 5.4 4.1C5.4 4.27 5.4575 4.4125 5.5725 4.5275C5.6875 4.6425 5.83 4.7 6 4.7ZM6 12.5C5.17 12.5 4.39 12.3425 3.66 12.0275C2.93 11.7125 2.295 11.285 1.755 10.745C1.215 10.205 0.7875 9.57 0.4725 8.84C0.1575 8.11 0 7.33 0 6.5C0 5.67 0.1575 4.89 0.4725 4.16C0.7875 3.43 1.215 2.795 1.755 2.255C2.295 1.715 2.93 1.2875 3.66 0.9725C4.39 0.6575 5.17 0.5 6 0.5C6.83 0.5 7.61 0.6575 8.34 0.9725C9.07 1.2875 9.705 1.715 10.245 2.255C10.785 2.795 11.2125 3.43 11.5275 4.16C11.8425 4.89 12 5.67 12 6.5C12 7.33 11.8425 8.11 11.5275 8.84C11.2125 9.57 10.785 10.205 10.245 10.745C9.705 11.285 9.07 11.7125 8.34 12.0275C7.61 12.3425 6.83 12.5 6 12.5ZM6 11.3C7.34 11.3 8.475 10.835 9.405 9.905C10.335 8.975 10.8 7.84 10.8 6.5C10.8 5.16 10.335 4.025 9.405 3.095C8.475 2.165 7.34 1.7 6 1.7C4.66 1.7 3.525 2.165 2.595 3.095C1.665 4.025 1.2 5.16 1.2 6.5C1.2 7.84 1.665 8.975 2.595 9.905C3.525 10.835 4.66 11.3 6 11.3Z"
fill="#ADB5BD"
/>
</svg>
</SvgIcon>
);
}
20 changes: 20 additions & 0 deletions icons/LinkIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";

export default function LinkIcon(props: SvgIconProps) {
return (
<SvgIcon {...props}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="15"
viewBox="0 0 14 15"
fill="none"
>
<path
d="M6.3 11H3.5C2.53167 11 1.70625 10.6588 1.02375 9.97625C0.34125 9.29375 0 8.46833 0 7.5C0 6.53167 0.34125 5.70625 1.02375 5.02375C1.70625 4.34125 2.53167 4 3.5 4H6.3V5.4H3.5C2.91667 5.4 2.42083 5.60417 2.0125 6.0125C1.60417 6.42083 1.4 6.91667 1.4 7.5C1.4 8.08333 1.60417 8.57917 2.0125 8.9875C2.42083 9.39583 2.91667 9.6 3.5 9.6H6.3V11ZM4.2 8.2V6.8H9.8V8.2H4.2ZM7.7 11V9.6H10.5C11.0833 9.6 11.5792 9.39583 11.9875 8.9875C12.3958 8.57917 12.6 8.08333 12.6 7.5C12.6 6.91667 12.3958 6.42083 11.9875 6.0125C11.5792 5.60417 11.0833 5.4 10.5 5.4H7.7V4H10.5C11.4683 4 12.2937 4.34125 12.9762 5.02375C13.6587 5.70625 14 6.53167 14 7.5C14 8.46833 13.6587 9.29375 12.9762 9.97625C12.2937 10.6588 11.4683 11 10.5 11H7.7Z"
fill="#171B1E"
/>
</svg>
</SvgIcon>
);
}