@databiosphere/findable-ui 0.0.0

package/src/components/Layout/components/BackPage/backPageView.tsx

@@ -0,0 +1,50 @@
+import React, { Fragment, ReactNode } from "react";
+import {
+  BackPageContent,
+  BackPageContentMainColumn,
+  BackPageContentSideColumn,
+  BackPageHero,
+  BackPageTabs,
+  BackPageView as BackPageLayout,
+  DetailPageOverviewContent,
+  DetailPageOverviewContentMainColumn,
+  DetailPageOverviewContentSideColumn,
+} from "./backPageView.styles";
+
+export interface BackPageViewProps {
+  isDetailOverview?: boolean;
+  mainColumn: ReactNode;
+  sideColumn?: ReactNode;
+  Tabs?: ReactNode;
+  top: ReactNode;
+}
+
+export const BackPageView = ({
+  isDetailOverview = false,
+  mainColumn,
+  sideColumn,
+  Tabs,
+  top,
+}: BackPageViewProps): JSX.Element => {
+  const Content = isDetailOverview
+    ? DetailPageOverviewContent
+    : BackPageContent;
+  const MainColumn = isDetailOverview
+    ? DetailPageOverviewContentMainColumn
+    : sideColumn
+    ? BackPageContentMainColumn
+    : Fragment;
+  const SideColumn = isDetailOverview
+    ? DetailPageOverviewContentSideColumn
+    : BackPageContentSideColumn;
+  return (
+    <BackPageLayout>
+      <BackPageHero>{top}</BackPageHero>
+      {Tabs && <BackPageTabs>{Tabs}</BackPageTabs>}
+      <Content>
+        <MainColumn>{mainColumn}</MainColumn>
+        {sideColumn && <SideColumn>{sideColumn}</SideColumn>}
+      </Content>
+    </BackPageLayout>
+  );
+};

package/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { BackPageHero } from "./backPageHero";
+
+export default {
+  component: BackPageHero,
+  title: "Components/Hero",
+} as Meta<typeof BackPageHero>;
+
+type Story = StoryObj<typeof BackPageHero>;
+
+export const BackPageHeroStory: Story = {
+  args: {
+    title:
+      "A Single-Cell Transcriptomic Map of the Human and Mouse Pancreas Reveals Inter- and Intra-cell Population Structure",
+  },
+};

package/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.styles.ts

@@ -0,0 +1,35 @@
+import styled from "@emotion/styled";
+import { Stack } from "@mui/material";
+import { TABLET } from "../../../../../../theme/common/breakpoints";
+import { CallToActionButton as CTAButton } from "../../../../../common/Button/components/CallToActionButton/callToActionButton";
+
+export const BackPageHeroHeadline = styled.div`
+  display: contents;
+
+  > * {
+    grid-column: 1 / -1; // Title and breadcrumbs consume full width of available grid.
+  }
+
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+    display: flex;
+    flex: 1;
+    gap: 88px;
+
+    > * {
+      grid-column: unset;
+    }
+  }
+`;
+
+export const HeroHeader = styled(Stack)`
+  flex: 1;
+`;
+
+export const CallToActionButton = styled(CTAButton)`
+  align-self: center;
+  justify-self: flex-start;
+
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+    justify-self: flex-end;
+  }
+`;

package/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.tsx

@@ -0,0 +1,50 @@
+import React, { Fragment, ReactNode } from "react";
+import {
+  Breadcrumb,
+  Breadcrumbs,
+} from "../../../../../common/Breadcrumbs/breadcrumbs";
+import { CallToAction } from "../../../../../common/Button/components/CallToActionButton/callToActionButton";
+import { Title } from "../../../../../common/Title/title";
+import {
+  BackPageHeroHeadline,
+  CallToActionButton,
+  HeroHeader,
+} from "./backPageHero.styles";
+import { SubTitle } from "./components/SubTitle/subTitle";
+
+/**
+ * Back page hero component comprising breadcrumbs, title, status and tabs.
+ */
+
+export interface BackPageHeroProps {
+  breadcrumbs?: Breadcrumb[];
+  callToAction?: CallToAction;
+  children?: ReactNode;
+  subTitle?: ReactNode;
+  title?: ReactNode;
+}
+
+export const BackPageHero = ({
+  breadcrumbs,
+  callToAction,
+  children,
+  subTitle,
+  title,
+}: BackPageHeroProps): JSX.Element => {
+  const HeroHeadline = callToAction ? BackPageHeroHeadline : Fragment;
+  return (
+    <>
+      {(breadcrumbs || title) && (
+        <HeroHeadline>
+          <HeroHeader gap={1}>
+            {breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs} />}
+            {title && <Title title={title} />}
+            <SubTitle subTitle={subTitle} />
+          </HeroHeader>
+          {callToAction && <CallToActionButton callToAction={callToAction} />}
+        </HeroHeadline>
+      )}
+      {children}
+    </>
+  );
+};

package/src/components/Layout/components/BackPage/components/BackPageHero/components/SubTitle/subTitle.tsx

@@ -0,0 +1,24 @@
+import { Typography } from "@mui/material";
+import React, { ReactNode } from "react";
+import { TEXT_BODY_SMALL_400 } from "../../../../../../../../theme/common/typography";
+
+export interface SubTitleProps {
+  subTitle?: ReactNode;
+}
+
+export const SubTitle = ({
+  subTitle,
+  ...props /* Spread props to allow for Typography specific props TypographyProps e.g. "gutterBottom" or "noWrap". */
+}: SubTitleProps): JSX.Element => {
+  return (
+    <>
+      {typeof subTitle === "string" ? (
+        <Typography color="ink.light" variant={TEXT_BODY_SMALL_400} {...props}>
+          {subTitle}
+        </Typography>
+      ) : (
+        subTitle
+      )}
+    </>
+  );
+};

package/src/components/Layout/components/ContentLayout/common/constants.ts

@@ -0,0 +1,25 @@
+import { LayoutStyle, PANEL_BACKGROUND_COLOR } from "./entities";
+
+export const LAYOUT_STYLE_CONTRAST_LIGHT: LayoutStyle = {
+  content: PANEL_BACKGROUND_COLOR.DEFAULT,
+  navigation: PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
+  outline: PANEL_BACKGROUND_COLOR.DEFAULT,
+};
+
+export const LAYOUT_STYLE_CONTRAST_LIGHTEST: LayoutStyle = {
+  content: PANEL_BACKGROUND_COLOR.DEFAULT,
+  navigation: PANEL_BACKGROUND_COLOR.SMOKE_LIGHTEST,
+  outline: PANEL_BACKGROUND_COLOR.DEFAULT,
+};
+
+export const LAYOUT_STYLE_NO_CONTRAST_LIGHT: LayoutStyle = {
+  content: PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
+  navigation: PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
+  outline: PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
+};
+
+export const LAYOUT_STYLE_NO_CONTRAST_LIGHTEST: LayoutStyle = {
+  content: PANEL_BACKGROUND_COLOR.SMOKE_LIGHTEST,
+  navigation: PANEL_BACKGROUND_COLOR.SMOKE_LIGHTEST,
+  outline: PANEL_BACKGROUND_COLOR.SMOKE_LIGHTEST,
+};

package/src/components/Layout/components/ContentLayout/common/entities.ts

@@ -0,0 +1,13 @@
+export interface LayoutStyle {
+  content?: PanelBackgroundColor;
+  navigation?: PanelBackgroundColor;
+  outline?: PanelBackgroundColor;
+}
+
+export enum PANEL_BACKGROUND_COLOR {
+  DEFAULT = "DEFAULT",
+  SMOKE_LIGHT = "SMOKE_LIGHT",
+  SMOKE_LIGHTEST = "SMOKE_LIGHTEST",
+}
+
+export type PanelBackgroundColor = keyof typeof PANEL_BACKGROUND_COLOR;

package/src/components/Layout/components/ContentLayout/components/Main/main.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+import { Main as ContentMain } from "../../../Main/main.styles";
+
+export interface MainProps {
+  children: ReactNode | ReactNode[];
+  className?: string;
+}
+
+export const Main = ({ children, className }: MainProps): JSX.Element => {
+  return <ContentMain className={className}>{children}</ContentMain>;
+};

package/src/components/Layout/components/ContentLayout/contentLayout.styles.ts

@@ -0,0 +1,152 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import {
+  media1366Up,
+  mediaDesktopSmallUp,
+  mediaTabletDown,
+} from "../../../../styles/common/mixins/breakpoints";
+import {
+  smokeLight,
+  smokeLightest,
+  smokeMain,
+  white,
+} from "../../../../styles/common/mixins/colors";
+import { ThemeProps } from "../../../../theme/theme";
+import { PanelBackgroundColor } from "./common/entities";
+
+const CONTENT_MAX_WIDTH = 756;
+const NAV_GRID_WIDTH = 280;
+const NAV_MAX_WIDTH = 232;
+const PADDING = 24;
+const PADDING_Y = PADDING;
+
+const COLOR: Record<
+  PanelBackgroundColor,
+  ({ theme }: ThemeProps) => string | undefined
+> = {
+  DEFAULT: white,
+  SMOKE_LIGHT: smokeLight,
+  SMOKE_LIGHTEST: smokeLightest,
+};
+
+interface LayoutProps {
+  panelColor?: PanelBackgroundColor;
+}
+
+interface GridProps {
+  headerHeight: number;
+  panelColor?: PanelBackgroundColor;
+}
+
+export const ContentLayout = styled.div<LayoutProps>`
+  background-color: ${({ panelColor, theme }) =>
+    getPanelBackgroundColor(theme, panelColor)};
+  display: grid;
+  flex: 1;
+  grid-template-areas: "content";
+  grid-template-columns: 1fr;
+  height: 100%;
+  margin: 0 auto;
+
+  ${mediaDesktopSmallUp} {
+    grid-template-areas: "navigation content";
+    grid-template-columns:
+      ${NAV_GRID_WIDTH}px
+      1fr;
+  }
+
+  ${media1366Up} {
+    grid-template-areas: "navigation content outline";
+    grid-template-columns:
+      ${NAV_GRID_WIDTH}px
+      1fr
+      ${NAV_GRID_WIDTH}px;
+  }
+`;
+
+const content = ({
+  headerHeight,
+  panelColor,
+  theme,
+}: GridProps & ThemeProps) => css`
+  background-color: ${getPanelBackgroundColor(theme, panelColor)};
+  padding-top: ${headerHeight}px;
+`;
+
+const navigation = ({
+  headerHeight,
+  panelColor,
+  theme,
+}: GridProps & ThemeProps) => css`
+  background-color: ${getPanelBackgroundColor(theme, panelColor)};
+  max-height: calc(100vh - ${headerHeight}px);
+  overflow: auto;
+  padding-top: ${headerHeight}px;
+  position: sticky;
+  top: 0;
+`;
+
+export const NavigationGrid = styled.div<GridProps>`
+  ${navigation};
+  box-shadow: inset -1px 0 ${smokeMain};
+  display: none;
+  grid-area: navigation;
+
+  ${mediaDesktopSmallUp} {
+    display: block;
+  }
+`;
+
+export const ContentGrid = styled.div<GridProps>`
+  ${content};
+  grid-area: content;
+`;
+
+export const OutlineGrid = styled("div")<GridProps>`
+  ${navigation};
+  display: none;
+  grid-area: outline;
+
+  ${media1366Up} {
+    display: block;
+  }
+`;
+
+export const Navigation = styled.div`
+  box-sizing: content-box;
+  margin-left: auto;
+  max-width: ${NAV_MAX_WIDTH}px;
+  padding: ${PADDING}px;
+`;
+
+export const Content = styled.div`
+  align-self: center;
+  box-sizing: content-box;
+  margin: 0 auto;
+  max-width: ${CONTENT_MAX_WIDTH}px;
+  padding: ${PADDING_Y}px 40px;
+
+  ${mediaTabletDown} {
+    padding: ${PADDING_Y}px 16px;
+  }
+`;
+
+export const Outline = styled.div`
+  box-sizing: content-box;
+  margin-right: auto;
+  max-width: 242px;
+  padding: ${PADDING_Y}px 0;
+`;
+
+/**
+ * Returns the background color for the panel.
+ * @param theme - Theme.
+ * @param panelColor - Panel color.
+ * @returns background color for the panel.
+ */
+function getPanelBackgroundColor(
+  theme: ThemeProps["theme"],
+  panelColor?: PanelBackgroundColor
+): string | undefined {
+  return panelColor ? COLOR[panelColor]({ theme }) : undefined;
+}

package/src/components/Layout/components/ContentLayout/contentLayout.tsx

@@ -0,0 +1,71 @@
+import { useRouter } from "next/router";
+import React, { ReactNode } from "react";
+import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { LayoutStyle } from "./common/entities";
+import {
+  Content,
+  ContentGrid,
+  ContentLayout as Layout,
+  Navigation as NavigationPositioner,
+  NavigationGrid,
+  Outline as OutlinePositioner,
+  OutlineGrid,
+} from "./contentLayout.styles";
+
+export interface ContentLayoutProps {
+  className?: string;
+  content: ReactNode;
+  layoutStyle?: LayoutStyle;
+  navigation?: ReactNode;
+  outline?: ReactNode;
+}
+
+export const ContentLayout = ({
+  className,
+  content,
+  layoutStyle,
+  navigation,
+  outline,
+}: ContentLayoutProps): JSX.Element => {
+  const { asPath } = useRouter();
+  const {
+    layoutState: { headerHeight },
+  } = useLayoutState();
+  return (
+    <Layout className={className} panelColor={layoutStyle?.content}>
+      {navigation && (
+        <NavigationGrid
+          headerHeight={headerHeight}
+          panelColor={layoutStyle?.navigation}
+        >
+          <NavigationPositioner>{navigation}</NavigationPositioner>
+        </NavigationGrid>
+      )}
+      <ContentGrid
+        headerHeight={headerHeight}
+        panelColor={layoutStyle?.content}
+      >
+        <Content>{content}</Content>
+      </ContentGrid>
+      {outline && (
+        <OutlineGrid
+          key={getOutlineKey(asPath)}
+          headerHeight={headerHeight}
+          panelColor={layoutStyle?.outline}
+        >
+          <OutlinePositioner>{outline}</OutlinePositioner>
+        </OutlineGrid>
+      )}
+    </Layout>
+  );
+};
+
+/**
+ * Returns outline key.
+ * Facilitates re-rendering of outline when path changes, prevents stale active outline tab on navigation.
+ * @param asPath - Current path.
+ * @returns key for outline.
+ */
+function getOutlineKey(asPath: string): string {
+  return asPath.split("#")[0] || "";
+}

package/src/components/Layout/components/Floating/floating.tsx

@@ -0,0 +1,15 @@
+import React, { Fragment } from "react";
+import { ComponentsConfig } from "../../../../config/entities";
+import { ComponentCreator } from "../../../ComponentCreator/ComponentCreator";
+
+export interface FloatingProps {
+  components?: ComponentsConfig;
+}
+
+export const Floating = ({ components }: FloatingProps): JSX.Element => {
+  return (
+    <Fragment>
+      {components && <ComponentCreator components={components} response={{}} />}
+    </Fragment>
+  );
+};

package/src/components/Layout/components/Footer/footer.stories.tsx

@@ -0,0 +1,68 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import logo from "../../../../images/logo.svg";
+import { DiscourseIcon } from "../../../common/CustomIcon/components/DiscourseIcon/discourseIcon";
+import { FacebookIcon } from "../../../common/CustomIcon/components/FacebookIcon/facebookIcon";
+import { GitHubIcon } from "../../../common/CustomIcon/components/GitHubIcon/gitHubIcon";
+import { XIcon } from "../../../common/CustomIcon/components/XIcon/xIcon";
+import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
+import { Logo } from "../Header/components/Content/components/Logo/logo";
+import { Footer } from "./footer";
+
+export default {
+  argTypes: {
+    Branding: { control: { disabled: true } },
+    navLinks: { control: "array" },
+    socials: { control: { disabled: true } },
+  },
+  component: Footer,
+  parameters: {
+    layout: "fullscreen",
+  },
+  title: "Components/Layout/Footer",
+} as Meta<typeof Footer>;
+
+type Story = StoryObj<typeof Footer>;
+
+export const FooterStory: Story = {
+  args: {
+    Branding: <Logo alt="logo" height={24} link={"/"} src={logo} />,
+    navLinks: [
+      {
+        label: "Help",
+        url: "https://support.google.com/",
+      },
+      {
+        label: "Privacy",
+        url: "https://policies.google.com/privacy?hl=en-US",
+      },
+    ],
+    socials: [
+      {
+        Icon: DiscourseIcon,
+        label: null,
+        url: "https://www.discourse.org/",
+      },
+      {
+        Icon: XIcon,
+        label: null,
+        url: "https://twitter.com",
+      },
+      {
+        Icon: FacebookIcon,
+        label: null,
+        url: "https://facebook.com",
+      },
+      {
+        Icon: YouTubeIcon,
+        label: null,
+        url: "https://www.youtube.com",
+      },
+      {
+        Icon: GitHubIcon,
+        label: null,
+        url: "https://github.com",
+      },
+    ],
+  },
+};

package/src/components/Layout/components/Footer/footer.styles.ts

@@ -0,0 +1,53 @@
+import styled from "@emotion/styled";
+import { AppBar as MAppBar } from "@mui/material";
+import { mediaTabletUp } from "../../../../styles/common/mixins/breakpoints";
+import { inkMain } from "../../../../styles/common/mixins/colors";
+import { textBodySmall400 } from "../../../../styles/common/mixins/fonts";
+import { Socials as DXSocials } from "../../../common/Socials/socials";
+import { Link as DXLink } from "../../../Links/components/Link/link";
+
+export const AppBar = styled(MAppBar)`
+  padding: 16px 0;
+
+  .MuiToolbar-root {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 24px;
+    justify-content: space-between;
+    min-height: unset;
+    padding: 0 16px;
+  }
+
+  ${mediaTabletUp} {
+    padding: 0;
+
+    .MuiToolbar-root {
+      align-items: center;
+      flex-direction: row;
+      gap: unset;
+      min-height: 56px;
+    }
+  }
+` as typeof MAppBar;
+
+export const Links = styled.div`
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  ${mediaTabletUp} {
+    flex-direction: row;
+  }
+`;
+
+export const Link = styled(DXLink)`
+  ${textBodySmall400};
+  align-items: center;
+  color: ${inkMain};
+  display: flex;
+`;
+
+export const Socials = styled(DXSocials)`
+  gap: 8px;
+`;

package/src/components/Layout/components/Footer/footer.tsx

@@ -0,0 +1,54 @@
+import { Toolbar } from "@mui/material";
+import React, { ReactNode } from "react";
+import { IconButtonSocialsFooter } from "../../../common/IconButton/iconButton.styles";
+import { Social } from "../../../common/Socials/socials";
+import { ANCHOR_TARGET } from "../../../Links/common/entities";
+import { NavLinkItem } from "../Header/components/Content/components/Navigation/navigation";
+import { AppBar, Link, Links, Socials } from "./footer.styles";
+
+export interface FooterProps {
+  Branding: ReactNode;
+  className?: string;
+  navLinks?: NavLinkItem[];
+  socials?: Social[];
+}
+
+export const Footer = ({
+  Branding,
+  className,
+  navLinks,
+  socials,
+}: FooterProps): JSX.Element => {
+  return (
+    <AppBar
+      className={className}
+      color="inherit"
+      component="footer"
+      variant="footer"
+    >
+      <Toolbar variant="dense">
+        {Branding}
+        {(navLinks || socials) && (
+          <Links>
+            {navLinks &&
+              navLinks.map(({ label, target = ANCHOR_TARGET.SELF, url }, i) => (
+                <Link
+                  key={`${url}${i}`}
+                  label={label}
+                  target={target}
+                  url={url}
+                />
+              ))}
+            {socials && (
+              <Socials
+                buttonSize="small"
+                IconButtonElType={IconButtonSocialsFooter}
+                socials={socials}
+              />
+            )}
+          </Links>
+        )}
+      </Toolbar>
+    </AppBar>
+  );
+};

package/src/components/Layout/components/Header/common/constants.ts

@@ -0,0 +1,17 @@
+export const HEADER_HEIGHT = 56;
+export const HEADER_FADE_TIMEOUT = 0;
+
+export const FADE_TRANSITION_PROPS = {
+  timeout: HEADER_FADE_TIMEOUT,
+  unmountOnExit: true,
+};
+
+export const HEADER_NAVIGATION_LABEL = {
+  MORE: "More",
+  SOCIALS: "Follow Us",
+};
+
+export const SWITCH_TRANSITION_PROPS = {
+  timeout: 0,
+  unmountOnExit: true,
+};

package/src/components/Layout/components/Header/common/entities.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { Social } from "../../../../common/Socials/socials";
+
+export interface SocialMedia {
+  label: ReactNode;
+  socials: Social[];
+}