docs: updated Used By/Requires SassDoc to be collapsible

Author: mlaursen

packages/documentation/src/components/PackageSassDoc/Parameters.tsx

@@ -26,7 +26,7 @@ const Parameters: FC<ParametersProps> = ({ parameters }) => {
 
   return (
     <TableContainer>
-      <Table>
+      <Table disableHover>
         <caption className={styles.caption}>Parameters</caption>
         <TableHeader>
           <TableRow>

packages/documentation/src/components/PackageSassDoc/ReferenceLinkSection.module.scss

@@ -0,0 +1,16 @@
+@import '~@react-md/icon/dist/mixins';
+
+.container {
+  align-items: center;
+  display: flex;
+}
+
+// this should only happen when the previous `ReferenceLinkSection` is collapsed
+.container + .container {
+  margin-top: 1rem;
+}
+
+.chevron {
+  @include rmd-icon-theme-update-var(rotate-from, rotate(90deg));
+  @include rmd-icon-theme-update-var(rotate-to, rotate(270deg));
+}

packages/documentation/src/components/PackageSassDoc/ReferenceLinkSection.tsx

@@ -1,32 +1,49 @@
-import React, { FC } from "react";
+import React, { ReactElement, ReactNode, useState } from "react";
+import { Button } from "@react-md/button";
+import { IconRotator } from "@react-md/icon";
+import { ChevronLeftSVGIcon } from "@react-md/material-icons";
+import { Collapse } from "@react-md/transition";
 import { Text } from "@react-md/typography";
 
 import { ItemReferenceLink } from "utils/sassdoc";
 
 import ReferenceLinkList from "./ReferenceLinkList";
+import styles from "./ReferenceLinkSection.module.scss";
 
 export interface ReferenceLinkSectionProps {
   links: ItemReferenceLink[] | undefined;
+  children: ReactNode;
 }
 
-const ReferenceLinkSection: FC<ReferenceLinkSectionProps> = ({
+export default function ReferenceLinkSection({
   children,
   links,
-}) => {
+}: ReferenceLinkSectionProps): ReactElement | null {
+  const [collapsed, setCollapsed] = useState(true);
   if (!links || !links.length) {
     return null;
   }
 
   return (
     <>
-      <Text type="headline-6" margin="top">
+      <Text type="headline-6" margin="top" className={styles.container}>
         {children}
+        <Button
+          aria-label="Expand"
+          aria-pressed={!collapsed}
+          onClick={() => setCollapsed((p) => !p)}
+          buttonType="icon"
+        >
+          <IconRotator rotated={!collapsed}>
+            <ChevronLeftSVGIcon className={styles.chevron} />
+          </IconRotator>
+        </Button>
       </Text>
-      <ul>
-        <ReferenceLinkList links={links} />
-      </ul>
+      <Collapse collapsed={collapsed}>
+        <ul>
+          <ReferenceLinkList links={links} />
+        </ul>
+      </Collapse>
     </>
   );
-};
-
-export default ReferenceLinkSection;
+}