diff --git a/app/components/common/Card/components/SectionContentCard/constants.ts b/app/components/common/Card/components/SectionContentCard/constants.ts new file mode 100644 index 00000000..3f7f7335 --- /dev/null +++ b/app/components/common/Card/components/SectionContentCard/constants.ts @@ -0,0 +1,24 @@ +import { CardProps, StackProps, SvgIconProps } from "@mui/material"; +import { RoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/components/RoundedPaper/roundedPaper"; +import { TYPOGRAPHY_PROPS as MUI_TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography"; +import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/svgIcon"; + +export const CARD_PROPS: CardProps = { + component: RoundedPaper, +}; + +export const STACK_PROPS: StackProps = { + gap: 1, + useFlexGap: true, +}; + +export const SVG_ICON_PROPS: SvgIconProps = { + color: MUI_SVG_ICON_PROPS.COLOR.PRIMARY, + fontSize: MUI_SVG_ICON_PROPS.FONT_SIZE.SMALL, + sx: { gridColumn: 2, gridRow: 1, p: 2.5 }, +}; + +export const TYPOGRAPHY_PROPS = { + color: MUI_TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, + variant: MUI_TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES, +}; diff --git a/app/components/common/Card/components/SectionContentCard/sectionContentCard.styles.ts b/app/components/common/Card/components/SectionContentCard/sectionContentCard.styles.ts new file mode 100644 index 00000000..814b3a6d --- /dev/null +++ b/app/components/common/Card/components/SectionContentCard/sectionContentCard.styles.ts @@ -0,0 +1,29 @@ +import styled from "@emotion/styled"; +import { Card, Stack } from "@mui/material"; + +export const StyledCard = styled(Card)` + &.MuiPaper-root { + align-items: stretch; + display: flex; + } + + .MuiButtonBase-root { + align-content: flex-start; + display: grid; + gap: 16px; + grid-template-columns: 1fr; + padding: 16px; + + .MuiSvgIcon-root { + box-sizing: content-box; + } + + img { + margin: 0; + } + } +` as typeof Card; + +export const StyledStack = styled(Stack)` + grid-column: 1 / -1; +`; diff --git a/app/components/common/Card/components/SectionContentCard/sectionContentCard.tsx b/app/components/common/Card/components/SectionContentCard/sectionContentCard.tsx new file mode 100644 index 00000000..ea0f416d --- /dev/null +++ b/app/components/common/Card/components/SectionContentCard/sectionContentCard.tsx @@ -0,0 +1,43 @@ +import { CardTitle } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardTitle/cardTitle"; +import { BaseComponentProps } from "@databiosphere/findable-ui/lib/components/types"; +import { CardActionArea } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardActionArea/cardActionArea"; +import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card"; +import { ForwardArrowIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/ForwardArrowIcon/forwardArrowIcon"; +import { StyledStack, StyledCard } from "./sectionContentCard.styles"; +import { Typography } from "@mui/material"; +import { Props } from "./types"; +import { + CARD_PROPS, + STACK_PROPS, + SVG_ICON_PROPS, + TYPOGRAPHY_PROPS, +} from "./constants"; +import { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage"; + +export const SectionContentCard = ({ + cardUrl, + className, + EndIcon = ForwardArrowIcon, + image, + secondaryText, + StartIcon, + title, +}: BaseComponentProps & + Pick & + Props): JSX.Element => { + return ( + + + {StartIcon && } + {image && } + + + {title} + {secondaryText && ( + {secondaryText} + )} + + + + ); +}; diff --git a/app/components/common/Card/components/SectionContentCard/types.ts b/app/components/common/Card/components/SectionContentCard/types.ts new file mode 100644 index 00000000..8f2a82e4 --- /dev/null +++ b/app/components/common/Card/components/SectionContentCard/types.ts @@ -0,0 +1,8 @@ +import { ComponentProps, ElementType } from "react"; +import { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage"; + +export interface Props { + EndIcon?: ElementType; + image?: ComponentProps; + StartIcon?: ElementType; +} diff --git a/app/docs/learn/faqs.mdx b/app/docs/learn/faqs.mdx new file mode 100644 index 00000000..8fe6c8e5 --- /dev/null +++ b/app/docs/learn/faqs.mdx @@ -0,0 +1,10 @@ +--- +breadcrumbs: + - path: "/learn" + text: "Learn" + - path: "" + text: "FAQs" +description: "" +enableOutline: true +title: "FAQs" +--- diff --git a/app/docs/learn/featured-analyses.mdx b/app/docs/learn/featured-analyses.mdx index 71c6f5e6..c271fca1 100644 --- a/app/docs/learn/featured-analyses.mdx +++ b/app/docs/learn/featured-analyses.mdx @@ -1,6 +1,6 @@ --- breadcrumbs: - - path: "" + - path: "/learn" text: "Learn" - path: "" text: "Featured Analyses" diff --git a/app/docs/learn/featured-analyses/evolutionary-dynamics-of-coding-overlaps-in-measles.mdx b/app/docs/learn/featured-analyses/evolutionary-dynamics-of-coding-overlaps-in-measles.mdx index 74ff0be4..b512e633 100644 --- a/app/docs/learn/featured-analyses/evolutionary-dynamics-of-coding-overlaps-in-measles.mdx +++ b/app/docs/learn/featured-analyses/evolutionary-dynamics-of-coding-overlaps-in-measles.mdx @@ -1,6 +1,6 @@ --- breadcrumbs: - - path: "" + - path: "/learn" text: "Learn" - path: "/learn/featured-analyses" text: "Featured Analyses" diff --git a/app/docs/learn/getting-started.mdx b/app/docs/learn/getting-started.mdx new file mode 100644 index 00000000..db693045 --- /dev/null +++ b/app/docs/learn/getting-started.mdx @@ -0,0 +1,10 @@ +--- +breadcrumbs: + - path: "/learn" + text: "Learn" + - path: "" + text: "Getting Started" +description: "" +enableOutline: true +title: "Getting Started" +--- diff --git a/app/docs/learn/using-galaxy.mdx b/app/docs/learn/using-galaxy.mdx new file mode 100644 index 00000000..4b2c9139 --- /dev/null +++ b/app/docs/learn/using-galaxy.mdx @@ -0,0 +1,10 @@ +--- +breadcrumbs: + - path: "/learn" + text: "Learn" + - path: "" + text: "Using Galaxy" +description: "" +enableOutline: true +title: "Using Galaxy" +--- diff --git a/app/views/LearnView/components/icon/BookmarkStarIcon/bookmarkStarIcon.tsx b/app/views/LearnView/components/icon/BookmarkStarIcon/bookmarkStarIcon.tsx new file mode 100644 index 00000000..55cee21c --- /dev/null +++ b/app/views/LearnView/components/icon/BookmarkStarIcon/bookmarkStarIcon.tsx @@ -0,0 +1,17 @@ +import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette"; +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export const BookmarkStarIcon = ({ + fontSize = "large", + viewBox = "0 0 48 48", + ...props +}: SvgIconProps): JSX.Element => { + return ( + + + + ); +}; diff --git a/app/views/LearnView/components/icon/GalaxyIcon/galaxyIcon.tsx b/app/views/LearnView/components/icon/GalaxyIcon/galaxyIcon.tsx new file mode 100644 index 00000000..5215dae2 --- /dev/null +++ b/app/views/LearnView/components/icon/GalaxyIcon/galaxyIcon.tsx @@ -0,0 +1,38 @@ +import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette"; +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export const GalaxyIcon = ({ + fontSize = "large", + viewBox = "0 0 48 48", + ...props +}: SvgIconProps): JSX.Element => { + return ( + + + + + + + + + + + + ); +}; diff --git a/app/views/LearnView/components/icon/LiveHelpIcon/liveHelpIcon.tsx b/app/views/LearnView/components/icon/LiveHelpIcon/liveHelpIcon.tsx new file mode 100644 index 00000000..a7d9039b --- /dev/null +++ b/app/views/LearnView/components/icon/LiveHelpIcon/liveHelpIcon.tsx @@ -0,0 +1,17 @@ +import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette"; +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export const LiveHelpIcon = ({ + fontSize = "large", + viewBox = "0 0 48 48", + ...props +}: SvgIconProps): JSX.Element => { + return ( + + + + ); +}; diff --git a/app/views/LearnView/components/icon/RocketLaunchIcon/rocketLaunchIcon.tsx b/app/views/LearnView/components/icon/RocketLaunchIcon/rocketLaunchIcon.tsx new file mode 100644 index 00000000..a30d0fb7 --- /dev/null +++ b/app/views/LearnView/components/icon/RocketLaunchIcon/rocketLaunchIcon.tsx @@ -0,0 +1,17 @@ +import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette"; +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export const RocketLaunchIcon = ({ + fontSize = "large", + viewBox = "0 0 48 48", + ...props +}: SvgIconProps): JSX.Element => { + return ( + + + + ); +}; diff --git a/app/views/LearnView/constants.ts b/app/views/LearnView/constants.ts new file mode 100644 index 00000000..72f55c72 --- /dev/null +++ b/app/views/LearnView/constants.ts @@ -0,0 +1,33 @@ +import { SectionContentCard } from "../../components/common/Card/components/SectionContentCard/sectionContentCard"; +import { ComponentProps } from "react"; +import { RocketLaunchIcon } from "./components/icon/RocketLaunchIcon/rocketLaunchIcon"; +import { BookmarkStarIcon } from "./components/icon/BookmarkStarIcon/bookmarkStarIcon"; +import { LiveHelpIcon } from "./components/icon/LiveHelpIcon/liveHelpIcon"; +import { GalaxyIcon } from "./components/icon/GalaxyIcon/galaxyIcon"; + +export const CARDS: ComponentProps[] = [ + { + StartIcon: RocketLaunchIcon, + cardUrl: "/learn/getting-started", + secondaryText: "", + title: "Get Started", + }, + { + StartIcon: GalaxyIcon, + cardUrl: "/learn/using-galaxy", + secondaryText: "", + title: "Using Galaxy", + }, + { + StartIcon: BookmarkStarIcon, + cardUrl: "/learn/featured-analyses", + secondaryText: "", + title: "Featured Analyses", + }, + { + StartIcon: LiveHelpIcon, + cardUrl: "/learn/faqs", + secondaryText: "", + title: "FAQs", + }, +]; diff --git a/app/views/LearnView/learnView.styles.ts b/app/views/LearnView/learnView.styles.ts new file mode 100644 index 00000000..f384bbd1 --- /dev/null +++ b/app/views/LearnView/learnView.styles.ts @@ -0,0 +1,13 @@ +import styled from "@emotion/styled"; +import { bpDownSm } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import { Stack } from "@mui/material"; + +export const StyledStack = styled(Stack)` + display: grid; + gap: 16px; + grid-template-columns: repeat(2, 1fr); + + ${bpDownSm} { + grid-template-columns: 1fr; + } +`; diff --git a/app/views/LearnView/learnView.tsx b/app/views/LearnView/learnView.tsx new file mode 100644 index 00000000..16c38ced --- /dev/null +++ b/app/views/LearnView/learnView.tsx @@ -0,0 +1,33 @@ +import { Fragment } from "react"; +import { StyledStack } from "./learnView.styles"; +import { SectionContentCard } from "../../components/common/Card/components/SectionContentCard/sectionContentCard"; +import { CARDS } from "./constants"; +import { StyledSectionHero } from "../../components/Docs/components/SectionHero/sectionHero.styles"; +import { SectionContent } from "../../components/Docs/components/SectionContent/sectionContent"; + +export const LearnView = (): JSX.Element => { + return ( + + + + {CARDS.map((card, index) => ( + + ))} + + } + frontmatter={null} + pageTitle="Learn About BRC Analytics" + slug={[]} + /> + + ); +}; diff --git a/pages/learn/index.tsx b/pages/learn/index.tsx new file mode 100644 index 00000000..218110af --- /dev/null +++ b/pages/learn/index.tsx @@ -0,0 +1,18 @@ +import { LearnView } from "../../app/views/LearnView/learnView"; +import { GetStaticProps } from "next"; +import { StyledPagesMain } from "../../app/components/Layout/components/Main/main.styles"; +import { StaticProps } from "../../app/docs/common/staticGeneration/types"; + +const Page = (): JSX.Element => { + return ; +}; + +export const getStaticProps: GetStaticProps< + Pick +> = async () => { + return { props: { pageTitle: "Learn About BRC Analytics" } }; +}; + +export default Page; + +Page.Main = StyledPagesMain; diff --git a/routes/constants.ts b/routes/constants.ts index 64f64492..c082cdc4 100644 --- a/routes/constants.ts +++ b/routes/constants.ts @@ -4,7 +4,7 @@ export const ROUTES = { CONFIGURE_WORKFLOW: "/data/assemblies/{entityId}/{trsId}", GENOME: "/data/assemblies/{entityId}", GENOMES: "/data/assemblies", - LEARN: "/learn/featured-analyses", + LEARN: "/learn", ORGANISMS: "/data/organisms", PRIORITY_PATHOGEN: "/data/[entityListType]/[entityId]", PRIORITY_PATHOGENS: "/data/priority-pathogens",