chore: implement accordions

.eslintrc.js

@@ -298,8 +298,13 @@ module.exports = {
     // Regex Plugin
     "regex/invalid": [
       "error",
-      // Don't use trailing slashes or cyclic index imports. Don't use numerical strings. Don't use "styled" components. Don't disable rules.
-      ['import.*(/|\\.)";', '"\\d+"', "Style[d]", "eslint\\-disable"],
+      [
+        'import.*(/|\\.)";', // Don't use trailing slashes or cyclic index imports.
+        '"\\d+"', // Don't use numerical strings.
+        "[^\\d]0\\px", // Don't use pixels unit for zero values.
+        "Style[d]", // Don't use "styled" components.
+        "eslint\\-disable", // Don't disable rules.
+      ],
     ],
 
     // GraphQL Plugin

_pages/profile/[id]/index.js

@@ -1,6 +1,7 @@
 import { Card, Text, useQuery } from "@kleros/components";
 import { graphql } from "relay-hooks";
 
+import SubmissionDetailsAccordion from "./submission-details-accordion";
 import SubmissionDetailsCard from "./submission-details-card";
 
 import { submissionStatusEnum } from "data";
@@ -36,6 +37,7 @@ export default function ProfileWithID() {
       {props?.submission && (
         <SubmissionDetailsCard submission={props.submission} />
       )}
+      <SubmissionDetailsAccordion />
     </>
   );
 }

_pages/profile/[id]/submission-details-accordion/appeal-accordion-item.js

@@ -0,0 +1,17 @@
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  Text,
+} from "@kleros/components";
+
+export default function AppealAccordionItem() {
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>Appeal</AccordionItemHeading>
+      <AccordionItemPanel>
+        <Text>Appeal.</Text>
+      </AccordionItemPanel>
+    </AccordionItem>
+  );
+}

_pages/profile/[id]/submission-details-accordion/evidence-accordion-item.js

@@ -0,0 +1,17 @@
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  Text,
+} from "@kleros/components";
+
+export default function EvidenceAccordionItem() {
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>Evidence</AccordionItemHeading>
+      <AccordionItemPanel>
+        <Text>Evidence.</Text>
+      </AccordionItemPanel>
+    </AccordionItem>
+  );
+}

_pages/profile/[id]/submission-details-accordion/index.js

@@ -0,0 +1,15 @@
+import { Accordion } from "@kleros/components";
+
+import AppealAccordionItem from "./appeal-accordion-item";
+import EvidenceAccordionItem from "./evidence-accordion-item";
+import VotingHistoryAccordionItem from "./voting-history-accordion-item";
+
+export default function SubmissionDetailsAccordion() {
+  return (
+    <Accordion>
+      <AppealAccordionItem />
+      <EvidenceAccordionItem />
+      <VotingHistoryAccordionItem />
+    </Accordion>
+  );
+}

_pages/profile/[id]/submission-details-accordion/voting-history-accordion-item.js

@@ -0,0 +1,17 @@
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  Text,
+} from "@kleros/components";
+
+export default function VotingHistoryAccordionItem() {
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>Voting History</AccordionItemHeading>
+      <AccordionItemPanel>
+        <Text>Voting History.</Text>
+      </AccordionItemPanel>
+    </AccordionItem>
+  );
+}

components/accordion.js

@@ -0,0 +1,51 @@
+import {
+  Accordion as _Accordion,
+  AccordionItem as _AccordionItem,
+  AccordionItemButton as _AccordionItemButton,
+  AccordionItemHeading as _AccordionItemHeading,
+  AccordionItemPanel as _AccordionItemPanel,
+} from "react-accessible-accordion";
+import { Box } from "theme-ui";
+
+export default function Accordion({
+  allowMultipleExpanded = true,
+  allowZeroExpanded = true,
+  ...rest
+}) {
+  return (
+    <Box
+      as={(props) => (
+        <_Accordion
+          allowMultipleExpanded={allowMultipleExpanded}
+          allowZeroExpanded={allowZeroExpanded}
+          {...rest}
+          {...props}
+        />
+      )}
+      {...rest}
+    />
+  );
+}
+
+export function AccordionItem(props) {
+  return <Box as={_AccordionItem} variant="accordion.item" {...props} />;
+}
+
+export function AccordionItemHeading(props) {
+  return (
+    <Box
+      as={({ children, ...rest }) => (
+        <_AccordionItemHeading {...props} {...rest}>
+          <Box as={_AccordionItemButton} variant="accordion.heading">
+            {children}
+          </Box>
+        </_AccordionItemHeading>
+      )}
+      {...props}
+    />
+  );
+}
+
+export function AccordionItemPanel(props) {
+  return <Box as={_AccordionItemPanel} variant="accordion.panel" {...props} />;
+}

components/index.js

@@ -1,5 +1,11 @@
 export { Box, Flex } from "theme-ui";
 
+export {
+  default as Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+} from "./accordion";
 export { default as AccountSettingsPopup } from "./account-settings-popup";
 export { default as ArchonProvider, useArchon } from "./archon-provider";
 export { default as Button } from "./button";

components/theme-provider.js

@@ -60,6 +60,27 @@ const theme = merge(merge(base, toTheme(typographyTheme)), {
   },
 
   // Components
+  accordion: {
+    item: {
+      marginY: 2,
+    },
+    heading: {
+      backgroundColor: "accent",
+      borderRadius: 3,
+      color: "background",
+      fontWeight: "bold",
+      paddingX: 2,
+      paddingY: 1,
+    },
+    panel: {
+      backgroundColor: "background",
+      bordeRadius: 3,
+      boxShadow: "0 6px 90px rgba(255, 153, 0, 0.25)",
+      fontSize: 1,
+      paddingX: 4,
+      paddingY: 3,
+    },
+  },
   buttons: {
     primary: {
       borderRadius: 300,

package.json

@@ -45,6 +45,7 @@
     "next": "^9.5.1",
     "path-to-regexp": "^6.1.0",
     "react": "^16.13.1",
+    "react-accessible-accordion": "^3.3.3",
     "react-dom": "^16.13.1",
     "react-loading-skeleton": "^2.1.1",
     "react-player": "^2.6.1",