feat: 'about' page changes (#92)

app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.styles.ts

@@ -1,12 +1,5 @@
 import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
-import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
-import {
-  textBodyLarge4002Lines,
-  textBodyLarge500,
-} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
-import { elevation01 } from "@databiosphere/findable-ui/lib/theme/common/shadows";
 import styled from "@emotion/styled";
-import { Accordion as MAccordion } from "@mui/material";
 import { sectionGrid } from "../../../../../../../Layout/components/AppLayout/components/Section/section.styles";
 
 export const Grid = styled.div`
@@ -19,28 +12,3 @@ export const Grid = styled.div`
     grid-template-columns: repeat(7, 1fr);
   }
 `;
-
-export const StyledAccordion = styled(MAccordion)`
-  box-shadow: ${elevation01} !important;
-  display: grid;
-  grid-column: 1 / -1;
-  padding: 12px 0;
-
-  .MuiAccordionSummary-root {
-    flex-direction: row;
-    min-height: 0;
-    padding: 8px 20px;
-
-    .MuiAccordionSummary-content {
-      ${textBodyLarge500};
-      margin: 0;
-    }
-  }
-
-  .MuiAccordionDetails-root {
-    ${textBodyLarge4002Lines};
-    color: ${inkLight};
-    margin: 0;
-    padding: 0 20px 8px;
-  }
-` as typeof MAccordion;

app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.tsx

@@ -1,21 +1,15 @@
-import { AddIcon as DXAddIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/AddIcon/addIcon";
-import { RoundedPaper as DXRoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
 import { Link as DXLink } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
-import {
-  AccordionDetails as MAccordionDetails,
-  AccordionSummary as MAccordionSummary,
-} from "@mui/material";
+import { AccordionDetails as MAccordionDetails } from "@mui/material";
+import { Accordion } from "../../../../../../../common/Accordion/accordion";
+import { AccordionSummary } from "../../../../../../../common/Accordion/components/AccordionSummary/accordionSummary";
 import { URLS } from "../../../../../../common/constants";
-import { Grid, StyledAccordion } from "./questions.styles";
+import { Grid } from "./questions.styles";
 
 export const Questions = (): JSX.Element => {
-  const expandIcon = <DXAddIcon color="inkLight" fontSize="small" />;
   return (
     <Grid>
-      <StyledAccordion component={DXRoundedPaper}>
-        <MAccordionSummary expandIcon={expandIcon}>
-          What is the plan?
-        </MAccordionSummary>
+      <Accordion>
+        <AccordionSummary>What is the plan?</AccordionSummary>
         <MAccordionDetails>
           BRC-Analytics is very new. Out plan is (1) establish access to
           official versions of VEuPathDB’s 785 genomes; (2) develop analytical
@@ -24,34 +18,28 @@ export const Questions = (): JSX.Element => {
           provide access to custom annotations that were previously available
           from VEuPathDB. To learn more click “Roadmap” on top.
         </MAccordionDetails>
-      </StyledAccordion>
-      <StyledAccordion component={DXRoundedPaper}>
-        <MAccordionSummary expandIcon={expandIcon}>
-          Where is the data?
-        </MAccordionSummary>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Where is the data?</AccordionSummary>
         <MAccordionDetails>
           I used to be able to access many types of data including genomes and
           associated annotations. Where do I find it now? Data for the majority
           of VEuPathDB organisms is available by clicking the “Datasets” link at
           the top.
         </MAccordionDetails>
-      </StyledAccordion>
-      <StyledAccordion component={DXRoundedPaper}>
-        <MAccordionSummary expandIcon={expandIcon}>
-          How do I do analyses?
-        </MAccordionSummary>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>How do I do analyses?</AccordionSummary>
         <MAccordionDetails>
           I used to rely on VEuPathDB to perform my analyses. Now that it is no
           longer available, what can I do? Many types of analyses are possible
           via integration with the{" "}
           <DXLink label="Galaxy system" url={URLS.GALAXY_SYSTEM} /> while we
           continue to build this new BRC resource.
         </MAccordionDetails>
-      </StyledAccordion>
-      <StyledAccordion component={DXRoundedPaper}>
-        <MAccordionSummary expandIcon={expandIcon}>
-          How does brc-analytics work?
-        </MAccordionSummary>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>How does brc-analytics work?</AccordionSummary>
         <MAccordionDetails>
           BRC-Analytics will provide access to genomic data and an analytical
           environment. The data will be based on the official releases provided
@@ -61,7 +49,7 @@ export const Questions = (): JSX.Element => {
           Center (<DXLink label="TACC" url={URLS.TACC} />) and{" "}
           <DXLink label="ACCESS-CI" url={URLS.ACCESS_CONSORTIUM} /> consortium.
         </MAccordionDetails>
-      </StyledAccordion>
+      </Accordion>
     </Grid>
   );
 };

app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts

@@ -6,10 +6,9 @@ import {
 import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
 import styled from "@emotion/styled";
 import { Section } from "../../../../../../../common/Section/section";
-import { section, sectionGrid, sectionLayout } from "../../section.styles";
+import { sectionGrid, sectionLayout } from "../../section.styles";
 
 export const StyledSection = styled(Section)`
-  ${section};
   background-color: ${smokeLightest};
   overflow: hidden;
   position: relative; /* positions svg */

app/components/Layout/components/AppLayout/components/Section/section.styles.ts

@@ -15,6 +15,10 @@ export const sectionGrid = css`
   grid-template-columns: repeat(12, 1fr);
 `;
 
+export const sectionGridAreas = css`
+  grid-template-areas: "feature feature feature feature . detail detail detail detail detail detail detail";
+`;
+
 export const sectionLayout = css`
   box-sizing: content-box;
   margin: 0 auto;
@@ -26,3 +30,32 @@ export const sectionSubHero = (props: ThemeProps) => css`
   background-color: ${white(props)};
   border-top: 1px solid ${smokeMain(props)};
 `;
+
+export const sectionWithDivider = (props: ThemeProps) => css`
+  position: relative; /* positions divider */
+  width: 100%;
+
+  > div:before {
+    background-color: ${smokeMain(props)};
+    content: "";
+    height: 1px;
+    max-width: min(1136px, calc(100vw - 32px));
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+`;
+
+export const headline = css`
+  h2 {
+    font-family: "Inter Tight", sans-serif;
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 40px;
+    margin: 0;
+
+    + div {
+      margin-top: 16px; /* TODO(cc) duplication of SectionHeadline class in SubHeadline */
+    }
+  }
+`;

app/components/common/Accordion/accordion.styles.ts

@@ -0,0 +1,33 @@
+import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import {
+  textBodyLarge4002Lines,
+  textBodyLarge500,
+} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
+import { elevation01 } from "@databiosphere/findable-ui/lib/theme/common/shadows";
+import styled from "@emotion/styled";
+import { Accordion as MAccordion } from "@mui/material";
+
+export const StyledAccordion = styled(MAccordion)`
+  box-shadow: ${elevation01} !important;
+  display: grid;
+  grid-column: 1 / -1;
+  padding: 12px 0;
+
+  .MuiAccordionSummary-root {
+    flex-direction: row;
+    min-height: 0;
+    padding: 8px 20px;
+
+    .MuiAccordionSummary-content {
+      ${textBodyLarge500};
+      margin: 0;
+    }
+  }
+
+  .MuiAccordionDetails-root {
+    ${textBodyLarge4002Lines};
+    color: ${inkLight};
+    margin: 0;
+    padding: 0 20px 8px;
+  }
+` as typeof MAccordion;

app/components/common/Accordion/accordion.tsx

@@ -0,0 +1,15 @@
+import { RoundedPaper as DXRoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
+import { AccordionProps as MAccordionProps } from "@mui/material";
+import { StyledAccordion } from "./accordion.styles";
+
+export const Accordion = ({
+  children,
+  component = DXRoundedPaper,
+  ...props
+}: MAccordionProps): JSX.Element => {
+  return (
+    <StyledAccordion component={component} {...props}>
+      {children}
+    </StyledAccordion>
+  );
+};

app/components/common/Accordion/components/AccordionSummary/accordionSummary.tsx

@@ -0,0 +1,17 @@
+import { AddIcon as DXAddIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/AddIcon/addIcon";
+import {
+  AccordionSummary as MAccordionSummary,
+  AccordionSummaryProps as MAccordionSummaryProps,
+} from "@mui/material";
+
+export const AccordionSummary = ({
+  children,
+  expandIcon = <DXAddIcon color="inkLight" fontSize="small" />,
+  ...props
+}: MAccordionSummaryProps): JSX.Element => {
+  return (
+    <MAccordionSummary expandIcon={expandIcon} {...props}>
+      {children}
+    </MAccordionSummary>
+  );
+};

app/components/common/Figure/figure.styles.ts

@@ -0,0 +1,30 @@
+import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
+import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import { textBodyLarge4002Lines } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
+import styled from "@emotion/styled";
+
+interface Props {}
+
+export const Figure = styled.figure<Props>`
+  margin: 16px 0;
+
+  img {
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  figcaption {
+    ${textBodyLarge4002Lines};
+    color: ${inkLight};
+    display: block;
+    margin-top: 32px;
+    text-align: justify;
+
+    ${mediaTabletUp} {
+      display: flex;
+      gap: 0 64px;
+      margin-top: 52px;
+      text-align: unset;
+    }
+  }
+`;

app/components/common/Figure/figure.tsx

@@ -0,0 +1,22 @@
+import {
+  StaticImage,
+  StaticImageProps,
+} from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage";
+import { ReactNode } from "react";
+import { Figure as FigureWithCaption } from "./figure.styles";
+
+export interface ImageProps extends StaticImageProps {
+  caption?: ReactNode;
+}
+
+export const Figure = ({
+  caption,
+  ...props /* Spread props to allow for StaticImage specific props StaticImageProps e.g. "height". */
+}: ImageProps): JSX.Element => {
+  return (
+    <FigureWithCaption>
+      <StaticImage {...props} />
+      {caption}
+    </FigureWithCaption>
+  );
+};