diff --git a/app/components/Docs/components/Content/content.styles.ts b/app/components/Docs/components/Content/content.styles.ts index 50a82105..67f4bdef 100644 --- a/app/components/Docs/components/Content/content.styles.ts +++ b/app/components/Docs/components/Content/content.styles.ts @@ -1,13 +1,14 @@ import { SectionContent } from "../../../content/content.styles"; import styled from "@emotion/styled"; +import { css } from "@emotion/react"; +import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette"; +import { FONT } from "@databiosphere/findable-ui/lib/styles/common/constants/font"; -// See https://github.com/emotion-js/emotion/issues/1105. -// See https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Fcache%4011.10.2. -const ignoreSsrWarning = - "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */"; -export const StyledSectionContent = styled(SectionContent)` - margin-top: 0; +interface Props { + offset: number; +} +const heading = ({ offset }: Props) => css` h1, h2, h3, @@ -21,6 +22,95 @@ export const StyledSectionContent = styled(SectionContent)` } } + h1 { + font: ${FONT.HEADING_LARGE}; + margin: 0 0 8px; + scroll-margin-top: ${offset + 24}px; + } + + h2 { + font: ${FONT.HEADING}; + margin: 32px 0 16px; + scroll-margin-top: ${offset + 32}px; + } + + h3 { + font: ${FONT.HEADING_SMALL}; + margin: 32px 0 16px; + scroll-margin-top: ${offset + 32}px; + } + + h4 { + font: ${FONT.BODY_LARGE_500}; + margin: 24px 0 16px; + scroll-margin-top: ${offset + 24}px; + } +`; + +const iframe = css` + iframe { + aspect-ratio: 16/ 9; + border: none; + display: block; + height: auto; + margin: 16px 0; + width: 100%; + } +`; + +const image = css` + img { + border: 1px solid ${PALETTE.SMOKE_MAIN}; + border-radius: 6px; + margin: 16px 0; + max-width: 100%; + } + + figure { + figcaption { + margin-top: 24px; + } + img { + margin: 0; + } + } +`; + +const muiAlert = css` + .MuiAlert-root { + margin: 24px 0; + padding: 24px; + + .MuiAlert-icon { + padding: 4px 0; + } + + .MuiAlert-message { + font: ${FONT.BODY_LARGE_400_2_LINES}; + gap: 16px; + + .MuiAlertTitle-root { + font: ${FONT.HEADING_SMALL}; + } + } + } +`; + +// See https://github.com/emotion-js/emotion/issues/1105. +// See https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Fcache%4011.10.2. +const ignoreSsrWarning = + "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */"; +export const StyledSectionContent = styled(SectionContent, { + shouldForwardProp: (prop) => prop !== "offset", +})` + margin-top: 0; + min-width: 0; + + ${heading} + ${iframe} + ${image} + ${muiAlert} + > *:first-child:not(style) ${ignoreSsrWarning} { margin-top: 0; } diff --git a/app/components/Docs/components/Content/content.tsx b/app/components/Docs/components/Content/content.tsx new file mode 100644 index 00000000..5e3163d0 --- /dev/null +++ b/app/components/Docs/components/Content/content.tsx @@ -0,0 +1,16 @@ +import { ReactNode } from "react"; +import { StyledSectionContent } from "./content.styles"; +import { useLayoutDimensions } from "@databiosphere/findable-ui/lib/providers/layoutDimensions/hook"; + +export interface ContentProps { + children: ReactNode | ReactNode[]; +} + +export const Content = ({ children }: ContentProps): JSX.Element => { + const { dimensions } = useLayoutDimensions(); + return ( + + {children} + + ); +}; diff --git a/app/components/Docs/components/SectionContent/sectionContent.styles.ts b/app/components/Docs/components/SectionContent/sectionContent.styles.ts new file mode 100644 index 00000000..7995d082 --- /dev/null +++ b/app/components/Docs/components/SectionContent/sectionContent.styles.ts @@ -0,0 +1,46 @@ +import { + ContentGrid, + OutlineGrid, + Positioner, +} from "@databiosphere/findable-ui/lib/components/Layout/components/ContentLayout/contentLayout.styles"; +import { bpUp1366 } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import styled from "@emotion/styled"; +import { sectionLayout } from "../../../Layout/components/AppLayout/components/Section/section.styles"; +import { ContentLayout } from "@databiosphere/findable-ui/lib/components/Layout/components/ContentLayout/contentLayout.styles"; + +export const StyledContentLayout = styled(ContentLayout)` + ${bpUp1366} { + grid-template-areas: "content"; + grid-template-columns: 1fr; + } + + ${({ theme }) => theme.breakpoints.up(1728)} { + grid-template-areas: "navigation content outline"; + grid-template-columns: 280px 1fr 280px; + } +`; + +export const StyledContentGrid = styled(ContentGrid)` + ${sectionLayout} + display: grid; + padding: 64px 16px; + width: calc(100% - 32px); +`; + +export const StyledOutlineGrid = styled(OutlineGrid)` + padding: 64px 0; + + ${bpUp1366} { + display: none; + } + + ${({ theme }) => theme.breakpoints.up(1728)} { + display: block; + } +`; + +export const StyledPositioner = styled(Positioner)` + max-height: ${({ headerHeight }) => `calc(100vh - ${headerHeight}px)`}; + padding-top: 0; + top: ${({ headerHeight }) => `${headerHeight}px`}; +`; diff --git a/app/components/Docs/components/SectionContent/sectionContent.tsx b/app/components/Docs/components/SectionContent/sectionContent.tsx new file mode 100644 index 00000000..70f5df3b --- /dev/null +++ b/app/components/Docs/components/SectionContent/sectionContent.tsx @@ -0,0 +1,47 @@ +import { PANEL_BACKGROUND_COLOR } from "@databiosphere/findable-ui/lib/components/Layout/components/ContentLayout/common/entities"; +import { Outline } from "@databiosphere/findable-ui/lib/components/Layout/components/ContentLayout/contentLayout.styles"; +import { ContentViewProps } from "@databiosphere/findable-ui/lib/views/ContentView/contentView"; +import { + StyledContentGrid, + StyledContentLayout, + StyledOutlineGrid, + StyledPositioner, +} from "./sectionContent.styles"; +import { useLayoutDimensions } from "@databiosphere/findable-ui/lib/providers/layoutDimensions/hook"; +import { StaticProps } from "../../../../docs/common/staticGeneration/types"; +import { Section } from "../../../../components/content/content.styles"; + +export const SectionContent = ({ + content, + outline, + slug, +}: Omit & + Pick): JSX.Element => { + const { dimensions } = useLayoutDimensions(); + return ( +
+ + + {content} + + {outline && ( + + + {outline} + + + )} + +
+ ); +}; diff --git a/app/components/Docs/components/common/Link/link.tsx b/app/components/Docs/components/common/Link/link.tsx new file mode 100644 index 00000000..aae5e428 --- /dev/null +++ b/app/components/Docs/components/common/Link/link.tsx @@ -0,0 +1,20 @@ +import { TypographyWordBreak } from "@databiosphere/findable-ui/lib/components/common/Typography/TypographyWordBreak/TypographyWordBreak"; +import { Link as DXLink } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; + +/** + * Basic anchor link component, used by MDX for all anchor links. + * Takes in children and href as props, and passes them to the DXLink component. + */ + +export const Link = ({ + ...props /* Spread props to allow for anchor link specific props e.g. "href". */ +}): JSX.Element => { + const { children, href, ...linkProps } = props; + return ( + {children}} + url={href} + {...linkProps} + /> + ); +}; diff --git a/app/components/Docs/components/common/Table/table.styles.ts b/app/components/Docs/components/common/Table/table.styles.ts new file mode 100644 index 00000000..12482656 --- /dev/null +++ b/app/components/Docs/components/common/Table/table.styles.ts @@ -0,0 +1,40 @@ +import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette"; +import styled from "@emotion/styled"; +import { TableContainer } from "@mui/material"; +import { FONT } from "@databiosphere/findable-ui/lib/styles/common/constants/font"; + +export const StyledTableContainer = styled(TableContainer)` + margin: 24px 0; + + .MuiTable-root { + min-width: calc(390px - 32px); + + tr { + td, + th { + border-bottom: 1px solid ${PALETTE.SMOKE_MAIN}; + padding: 12px; + + &:first-of-type { + padding-left: 0; + } + + &:last-of-type { + padding-right: 0; + } + } + + th { + font: ${FONT.BODY_500}; + + &:empty { + padding: 0; + } + } + + td { + font: ${FONT.BODY_400}; + } + } + } +`; diff --git a/app/components/Docs/components/common/Table/table.tsx b/app/components/Docs/components/common/Table/table.tsx new file mode 100644 index 00000000..eccfc159 --- /dev/null +++ b/app/components/Docs/components/common/Table/table.tsx @@ -0,0 +1,10 @@ +import { Table as MTable } from "@mui/material"; +import { StyledTableContainer } from "./table.styles"; + +export const Table = ({ ...props }): JSX.Element => { + return ( + + {props.children} + + ); +}; diff --git a/app/components/Docs/components/common/Video/video.tsx b/app/components/Docs/components/common/Video/video.tsx new file mode 100644 index 00000000..8b1f1e18 --- /dev/null +++ b/app/components/Docs/components/common/Video/video.tsx @@ -0,0 +1,12 @@ +export const Video = ({ ...props }): JSX.Element | null => { + return ( +