feat(contributions): add badge group

dataesr · Jan 8, 2025 · 7f21066 · 7f21066
1 parent 2ba3281
commit 7f21066
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 46 deletions.
diff --git a/client/src/pages/contact-contributionbyobject-page/components/contributor-summary.tsx b/client/src/pages/contact-contributionbyobject-page/components/contributor-summary.tsx
@@ -1,11 +1,4 @@
-import {
-  Badge,
-  Col,
-  Row,
-  SideMenu,
-  SideMenuItem,
-  Text,
-} from "@dataesr/dsfr-plus";
+import { Badge, BadgeGroup, Col, Row, SideMenu, SideMenuItem, Text } from "@dataesr/dsfr-plus"
 import {
   BadgeColor,
   BadgeStatus,
@@ -34,44 +27,36 @@ const ContributorSummary: React.FC<ContributorSummaryProps> = ({
             <>
               <Row gutters>
                 <Col>
-                  {contribution?.type && (
-                    <Badge
-                      size="sm"
-                      icon={typeIcon({ icon: contribution.type })}
-                      color={BadgeColor({ type: contribution.type })}
-                      className="fr-mr-1w fr-mb-1w"
-                    >
-                      {TypeLabel({ type: contribution.type })}
-                    </Badge>
-                  )}
-                  {contribution?.status && (
-                    <Badge
-                      size="sm"
-                      color={BadgeStatus({ status: contribution?.status })}
-                      className="fr-mr-1w fr-mb-1w"
-                    >
-                      {StatusLabel({ status: contribution.status })}
-                    </Badge>
-                  )}
-                  {contribution?.tags?.length > 0 &&
-                    contribution.tags
-                      .filter((tag) => tag !== "")
-                      .map((tag, key) => (
-                        <Badge
-                          key={key}
-                          size="sm"
-                          color="green-menthe"
-                          className="fr-mr-1w fr-mb-1w"
-                        >
-                          {tag}
-                        </Badge>
-                      ))}
+                  <BadgeGroup>
+                    {contribution?.type && (
+                      <Badge
+                        size="sm"
+                        icon={typeIcon({ icon: contribution.type })}
+                        color={BadgeColor({ type: contribution.type })}
+                        className="fr-mr-1w fr-mb-1w"
+                      >
+                        {TypeLabel({ type: contribution.type })}
+                      </Badge>
+                    )}
+                    {contribution?.status && (
+                      <Badge size="sm" color={BadgeStatus({ status: contribution?.status })} className="fr-mr-1w fr-mb-1w">
+                        {StatusLabel({ status: contribution.status })}
+                      </Badge>
+                    )}
+                    {contribution?.tags?.length > 0 &&
+                      contribution.tags
+                        .filter((tag) => tag !== "")
+                        .map((tag, key) => (
+                          <Badge key={key} size="sm" color="green-menthe" className="fr-mr-1w fr-mb-1w">
+                            {tag}
+                          </Badge>
+                        ))}
+                  </BadgeGroup>
                 </Col>
               </Row>
               <div>
                 <Text size="sm">
-                  {contribution.name}{" "}
-                  {new Date(contribution.created_at).toLocaleDateString()}
+                  {contribution.name} {new Date(contribution.created_at).toLocaleDateString()}
                 </Text>
                 <p className="contribution-message">{contribution.message}</p>
               </div>
@@ -82,7 +67,7 @@ const ContributorSummary: React.FC<ContributorSummaryProps> = ({
         />
       ))}
     </SideMenu>
-  );
+  )
 };
 
 export default ContributorSummary;
diff --git a/client/src/pages/home/components/item.tsx b/client/src/pages/home/components/item.tsx
@@ -1,4 +1,4 @@
-import { Badge, Col, Container, Link, Row, Text } from "@dataesr/dsfr-plus";
+import { Badge, BadgeGroup, Col, Container, Link, Row, Text } from "@dataesr/dsfr-plus";
 import "./styles.scss";
 import { generateLinkFromAllDatas } from "./generate-links";
 import {
@@ -58,7 +58,7 @@ const AllContributions: React.FC<AllContributionsProps & { query: string }> = ({
                 className="contribution-content"
               >
                 <Col lg="12" md="10" sm="12">
-                  <div>
+                  <BadgeGroup>
                     {badgeContent && (
                       <Badge
                         size="sm"
@@ -122,7 +122,7 @@ const AllContributions: React.FC<AllContributionsProps & { query: string }> = ({
                           {`Traité par ${contribution.team[0]}`}
                         </Badge>
                       ))}
-                  </div>
+                  </BadgeGroup>
                   <div>
                     <Text className="fr-mb-0 ">
                       Contribution de{" "}