Add standalone "Analyze"section to top nav (#65)

app/components/About/components/Section/components/SectionAbout/sectionAbout.styles.ts

@@ -1,7 +1,12 @@
 import styled from "@emotion/styled";
-import { SectionLayout } from "../../section.styles";
+import {
+  sectionGrid,
+  sectionLayout,
+} from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
 
-export const StyledSectionLayout = styled(SectionLayout)`
+export const SectionLayout = styled.div`
+  ${sectionLayout};
+  ${sectionGrid};
   grid-template-columns: 1fr;
   padding: 98px 16px;
 

app/components/About/components/Section/components/SectionAbout/sectionAbout.tsx

@@ -1,13 +1,13 @@
 import { AboutContent } from "../../../../content";
 import { Section } from "../../section.styles";
-import { StyledSectionLayout } from "./sectionAbout.styles";
+import { SectionLayout } from "./sectionAbout.styles";
 
 export const SectionAbout = (): JSX.Element => {
   return (
     <Section>
-      <StyledSectionLayout>
+      <SectionLayout>
         <AboutContent />
-      </StyledSectionLayout>
+      </SectionLayout>
     </Section>
   );
 };

app/components/About/components/Section/section.styles.ts

@@ -1,46 +1,6 @@
-import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
-import { white } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
 import styled from "@emotion/styled";
-import {
-  sectionGrid,
-  SectionLayout as DefaultLayout,
-} from "../../../Layout/components/AppLayout/components/Section/section.styles";
+import { sectionSubHero } from "../../../Layout/components/AppLayout/components/Section/section.styles";
 
 export const Section = styled.section`
-  background-color: ${white};
-  position: relative;
-  width: 100%;
-  z-index: 1;
-`;
-
-export const SectionLayout = styled(DefaultLayout)`
-  ${sectionGrid};
-`;
-
-export const SubHeadline = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  grid-column: 1 / -1;
-
-  ${mediaTabletUp} {
-    grid-column: 1 / 6;
-  }
-`;
-
-export const Subhead = styled.h2`
-  font-size: 40px;
-  font-weight: 500;
-  grid-column: 1 / -1;
-  letter-spacing: -0.4px;
-  line-height: 48px;
-  margin: 0;
-`;
-
-export const SectionContent = styled.div`
-  grid-column: 1 / -1;
-
-  ${mediaTabletUp} {
-    grid-column: 7 / -1;
-  }
+  ${sectionSubHero};
 `;

app/components/Analyze/components/Section/components/SectionAnalysisMethod/components/AnalysisMethod/analysisMethod.styles.ts

@@ -0,0 +1,45 @@
+import { ButtonPrimary } from "@databiosphere/findable-ui/lib/components/common/Button/components/ButtonPrimary/buttonPrimary";
+import {
+  CardContent as DXCardContent,
+  CardSection as DXCardSection,
+} from "@databiosphere/findable-ui/lib/components/common/Card/card.styles";
+import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+const boxShadow = css`
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 -1px 0 0 rgba(0, 0, 0, 0.2) inset;
+`;
+
+export const StyledCardSection = styled(DXCardSection)`
+  padding: 16px;
+
+  ${mediaTabletUp} {
+    padding: 16px;
+  }
+`;
+
+export const StyledCardContent = styled(DXCardContent)`
+  gap: 4px;
+`;
+
+export const StyledButtonPrimary = styled(ButtonPrimary)`
+  background-color: #1f1f47;
+  ${boxShadow};
+  justify-self: flex-start;
+
+  &:hover {
+    background-color: #1f1f47;
+    ${boxShadow};
+  }
+
+  &:active {
+    background-color: #1f1f47;
+    box-shadow: none;
+  }
+
+  &.Mui-disabled {
+    background-color: #1f1f47;
+    ${boxShadow};
+  }
+`;

app/components/Entity/components/AnalysisMethod/analysisMethod.tsx → app/components/Analyze/components/Section/components/SectionAnalysisMethod/components/AnalysisMethod/analysisMethod.tsx

@@ -1,34 +1,36 @@
 import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card";
-import { CardSection } from "@databiosphere/findable-ui/lib/components/common/Card/card.styles";
-import { CardText } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardText/cardText";
 import { CardTitle } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardTitle/cardTitle";
-import { FluidPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
+import { RoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
 import {
   ANCHOR_TARGET,
   REL_ATTRIBUTE,
 } from "@databiosphere/findable-ui/lib/components/Links/common/entities";
-import { Card } from "@mui/material";
+import { TEXT_BODY_SMALL_400_2_LINES } from "@databiosphere/findable-ui/lib/theme/common/typography";
+import { Card, Typography } from "@mui/material";
 import {
   StyledButtonPrimary,
   StyledCardContent,
+  StyledCardSection,
 } from "./analysisMethod.styles";
 
 export interface AnalysisMethodProps extends CardProps {
   url: string;
 }
 
 export const AnalysisMethod = ({
-  Paper = FluidPaper,
+  Paper = RoundedPaper,
   text,
   title,
   url,
 }: AnalysisMethodProps): JSX.Element => {
   return (
     <Card component={Paper}>
-      <CardSection>
+      <StyledCardSection>
         <StyledCardContent>
           <CardTitle>{title}</CardTitle>
-          <CardText>{text}</CardText>
+          <Typography color="ink.light" variant={TEXT_BODY_SMALL_400_2_LINES}>
+            {text}
+          </Typography>
         </StyledCardContent>
         <StyledButtonPrimary
           disabled={!url}
@@ -42,7 +44,7 @@ export const AnalysisMethod = ({
         >
           Analyze
         </StyledButtonPrimary>
-      </CardSection>
+      </StyledCardSection>
     </Card>
   );
 };

app/components/Analyze/components/Section/components/SectionAnalysisMethod/sectionAnalysisMethod.styles.ts

@@ -0,0 +1,53 @@
+import { mediaDesktopSmallUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
+import styled from "@emotion/styled";
+import {
+  sectionGrid,
+  sectionLayout,
+} from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
+
+export const SectionLayout = styled.div`
+  ${sectionLayout};
+  ${sectionGrid};
+  gap: 64px 16px;
+  padding: 64px 16px;
+`;
+
+export const VideoContainer = styled.div`
+  grid-column: 1 / -1;
+
+  iframe {
+    aspect-ratio: 16 / 9;
+  }
+
+  ${mediaDesktopSmallUp} {
+    grid-column: 1 / span 7;
+  }
+`;
+
+export const SubHeadline = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  grid-column: 1 / -1;
+  grid-row: 1;
+
+  ${mediaDesktopSmallUp} {
+    grid-column: 8 / -1;
+    margin-left: 48px;
+  }
+`;
+
+export const Subhead = styled.h2`
+  font-family: "Inter Tight", sans-serif;
+  font-size: 32px;
+  font-weight: 500;
+  line-height: 40px;
+  margin: 0;
+`;
+
+export const SectionContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  grid-column: 1 / -1;
+`;

app/components/Analyze/components/Section/components/SectionAnalysisMethod/sectionAnalysisMethod.tsx

@@ -0,0 +1,63 @@
+import { TEXT_BODY_LARGE_400_2_LINES } from "@databiosphere/findable-ui/lib/theme/common/typography";
+import { Typography } from "@mui/material";
+import { Video } from "../../../../../common/Video/video";
+import {
+  Assembly,
+  GenomeComparisons,
+  ProteinFolding,
+  Regulation,
+  SubHeadText,
+  Transcriptomics,
+  VariantCalling,
+} from "../../../../content";
+import { Section } from "../../section.styles";
+import { AnalysisMethod } from "./components/AnalysisMethod/analysisMethod";
+import {
+  SectionContent,
+  SectionLayout,
+  Subhead,
+  SubHeadline,
+  VideoContainer,
+} from "./sectionAnalysisMethod.styles";
+
+export const SectionAnalysisMethod = (): JSX.Element => {
+  return (
+    <Section>
+      <SectionLayout>
+        <VideoContainer>
+          <Video url="https://youtu.be/k6fTVIR4GME" />
+        </VideoContainer>
+        <SubHeadline>
+          <Subhead>How to run the workflows</Subhead>
+          <Typography color="ink.light" variant={TEXT_BODY_LARGE_400_2_LINES}>
+            <SubHeadText />
+          </Typography>
+        </SubHeadline>
+        <SectionContent>
+          <AnalysisMethod
+            text={<VariantCalling />}
+            title="Variant calling"
+            url=""
+          />
+          <AnalysisMethod
+            text={<Transcriptomics />}
+            title="Transcriptomics"
+            url=""
+          />
+          <AnalysisMethod text={<Regulation />} title="Regulation" url="" />
+          <AnalysisMethod text={<Assembly />} title="Assembly" url="" />
+          <AnalysisMethod
+            text={<GenomeComparisons />}
+            title="Genome comparisons"
+            url=""
+          />
+          <AnalysisMethod
+            text={<ProteinFolding />}
+            title="Protein folding"
+            url=""
+          />
+        </SectionContent>
+      </SectionLayout>
+    </Section>
+  );
+};

app/components/Analyze/components/Section/section.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+import { sectionSubHero } from "../../../Layout/components/AppLayout/components/Section/section.styles";
+
+export const Section = styled.section`
+  ${sectionSubHero};
+`;

app/components/Analyze/content/AnalysisMethod/subheadText.mdx

@@ -0,0 +1,7 @@
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+commodo ligula eget dolor. Aenean massa. Cum sociis natoque
+penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
+sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
+vel, aliquet nec, vulputate eget, arcu.

app/components/Analyze/content/index.tsx

@@ -0,0 +1,7 @@
+export { default as Assembly } from "./AnalysisMethod/assembly.mdx";
+export { default as GenomeComparisons } from "./AnalysisMethod/genomeComparisons.mdx";
+export { default as ProteinFolding } from "./AnalysisMethod/proteinFolding.mdx";
+export { default as Regulation } from "./AnalysisMethod/regulation.mdx";
+export { default as SubHeadText } from "./AnalysisMethod/subheadText.mdx";
+export { default as Transcriptomics } from "./AnalysisMethod/transcriptomics.mdx";
+export { default as VariantCalling } from "./AnalysisMethod/variantCalling.mdx";

app/components/Home/components/Section/components/SectionAnalytics/components/AnalyticsTools/analyticsTools.styles.ts

@@ -55,6 +55,11 @@ export const StyledCardActions = styled.div`
   .MuiLink-root {
     ${textBody500};
     color: #035c94;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 `;
 

app/components/Home/components/Section/components/SectionAnalytics/sectionAnalytics.styles.ts

@@ -3,7 +3,7 @@ import {
   smokeMain,
 } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
 import styled from "@emotion/styled";
-import { SectionLayout as DefaultLayout } from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
+import { sectionLayout } from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
 import { SectionHeadline } from "../../section.styles";
 
 export const Section = styled.section`
@@ -13,7 +13,8 @@ export const Section = styled.section`
   width: 100%;
 `;
 
-export const SectionLayout = styled(DefaultLayout)`
+export const SectionLayout = styled.div`
+  ${sectionLayout};
   display: flex;
   flex-direction: column;
   gap: 48px 16px;