Skip to content

Commit

Permalink
docs: updated Used By/Requires SassDoc to be collapsible
Browse files Browse the repository at this point in the history
  • Loading branch information
mlaursen committed Feb 28, 2021
1 parent 0abe05e commit 37a7536
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const Parameters: FC<ParametersProps> = ({ parameters }) => {

return (
<TableContainer>
<Table>
<Table disableHover>
<caption className={styles.caption}>Parameters</caption>
<TableHeader>
<TableRow>
Expand Down
Original file line number Diff line number Diff line change
@@ -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));
}
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 37a7536

Please sign in to comment.