Merge pull request #102 from cipick/feature/remove-ballot

Remove ballot from ElectionCandidatesTableSection

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4ro/reusable-components",
-  "version": "0.1.52",
+  "version": "0.1.53",
   "description": "Component library for code4ro",
   "keywords": [
     "code4ro",

src/components/ElectionCandidatesTableSection/ElectionCandidatesTableSection.module.scss

@@ -14,8 +14,3 @@
 th.heading {
   text-align: left;
 }
-
-.collapseButton {
-  margin-top: 0.5rem;
-  align-self: flex-end;
-}

src/components/ElectionCandidatesTableSection/ElectionCandidatesTableSection.stories.tsx

@@ -3,20 +3,12 @@
 import React from "react";
 import { mockCandidatesList } from "../../util/mocks";
 import { ElectionCandidatesTableSection } from "./ElectionCandidatesTableSection";
-import cssClasses from "./ElectionCandidatesTableSection.module.scss";
 
 export default {
   title: "Election results candidates tables section",
   component: ElectionCandidatesTableSection,
 };
 
 export const SimpleExample = () => {
-  return (
-    <ElectionCandidatesTableSection
-      classes={cssClasses}
-      heading="Partid"
-      ballot="Camera deputatilor"
-      parties={mockCandidatesList}
-    />
-  );
+  return <ElectionCandidatesTableSection heading="Partid" parties={mockCandidatesList} />;
 };

src/components/ElectionCandidatesTableSection/ElectionCandidatesTableSection.tsx

@@ -8,13 +8,12 @@ import cssClasses from "./ElectionCandidatesTableSection.module.scss";
 type Props = {
   heading: string;
   parties: ElectionResultsPartyCandidates[] | undefined;
-  ballot: string;
 };
 
 export const ElectionCandidatesTableSection = themable<Props>(
   "ElectionCandidatesTableSection",
   cssClasses,
-)(({ heading, parties, ballot }) => (
+)(({ heading, parties }) => (
   <div className={cssClasses.tableContainer}>
     <ResultsTable className={cssClasses.table}>
       <thead>
@@ -25,7 +24,7 @@ export const ElectionCandidatesTableSection = themable<Props>(
       <tbody>
         {parties &&
           parties.map((party, index) => (
-            <ElectionPartyRow key={index} name={party.name} candidates={party.candidates} ballot={ballot} />
+            <ElectionPartyRow key={index} name={party.name} candidates={party.candidates} />
           ))}
       </tbody>
     </ResultsTable>

src/components/ElectionPartyRow/ElectionPartyRow.module.scss

@@ -10,6 +10,7 @@
   position: absolute;
   top: 50%;
   right: 10px;
+  transform: translatey(-50%);
 
   width: 0;
   height: 0;

src/components/ElectionPartyRow/ElectionPartyRow.tsx

@@ -6,14 +6,13 @@ import cssClasses from "./ElectionPartyRow.module.scss";
 
 type Props = {
   name: string;
-  ballot: string;
   candidates: ElectionResultsPartyCandidate[];
 };
 
 export const ElectionPartyRow = themable<Props>(
   "ElectionPartyRow",
   cssClasses,
-)(({ name, ballot, candidates }) => {
+)(({ name, candidates }) => {
   const [expanded, setExpanded] = useState<boolean>(false);
 
   const onExpandClick = useCallback(() => {
@@ -37,7 +36,6 @@ export const ElectionPartyRow = themable<Props>(
             {candidates.map((candidate: ElectionResultsPartyCandidate) => (
               <tr key={candidate.name} className={cssClasses.candidate}>
                 <td>{candidate.name}</td>
-                <td>{ballot}</td>
               </tr>
             ))}
           </tbody>

src/stories/APIIntegration.stories.tsx

@@ -131,7 +131,7 @@ export const ElectionCandidatesComponent = (args: { api: string; apiUrl: string
   return (
     <>
       <APIRequestPreview data={data} loading={loading} error={error} />
-      {data && <ElectionCandidatesTableSection heading="Partid" parties={data} ballot="Senat" />}
+      {data && <ElectionCandidatesTableSection heading="Partid" parties={data} />}
     </>
   );
 };