@databiosphere/findable-ui 0.0.0

package/src/components/common/Button/components/CallToActionButton/callToActionButton.stories.tsx

@@ -0,0 +1,36 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { CallToAction, CallToActionButton } from "./callToActionButton";
+
+export default {
+  argTypes: {
+    children: { control: { disabled: true } },
+  },
+  component: CallToActionButton,
+  title: "Components/Common/CallToActionButton",
+} as ComponentMeta<typeof CallToActionButton>;
+
+const CallToActionButtonTemplate: ComponentStory<typeof CallToActionButton> = (
+  args
+) => <CallToActionButton {...args} />;
+
+const callToAction: CallToAction = {
+  label: "Click here",
+  target: ANCHOR_TARGET.BLANK,
+  url: "https://www.google.com",
+};
+
+export const CallToActionButtonStory = CallToActionButtonTemplate.bind({});
+CallToActionButtonStory.args = {
+  callToAction,
+  className: "call-to-action-button",
+  disabled: false,
+};
+
+export const CallToActionButtonWithCustomComponentStory =
+  CallToActionButtonTemplate.bind({});
+CallToActionButtonWithCustomComponentStory.args = {
+  ButtonElType: "a",
+  callToAction,
+};

package/src/components/common/Button/components/CallToActionButton/callToActionButton.tsx

@@ -0,0 +1,51 @@
+import NLink from "next/link";
+import React, { ElementType } from "react";
+import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { isClientSideNavigation } from "../../../../Links/common/utils";
+import { ButtonPrimary } from "../ButtonPrimary/buttonPrimary";
+
+export interface CallToAction {
+  label: string;
+  target?: ANCHOR_TARGET;
+  url: string;
+}
+
+export interface CallToActionButtonProps {
+  ButtonElType?: ElementType;
+  callToAction: CallToAction;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const CallToActionButton = ({
+  ButtonElType: Button = ButtonPrimary,
+  callToAction,
+  className,
+  disabled = false,
+}: CallToActionButtonProps): JSX.Element => {
+  const { label, target, url } = callToAction;
+  const isInternal = isClientSideNavigation(url);
+  return isInternal ? (
+    <NLink href={url} legacyBehavior passHref>
+      <Button
+        className={className}
+        disabled={disabled}
+        href="passHref"
+        rel="noopener"
+        target={target || ANCHOR_TARGET.SELF}
+      >
+        {label}
+      </Button>
+    </NLink>
+  ) : (
+    <Button
+      className={className}
+      disabled={disabled}
+      href={url}
+      rel="noopener noreferrer"
+      target={target || ANCHOR_TARGET.BLANK}
+    >
+      {label}
+    </Button>
+  );
+};

package/src/components/common/Button/components/DropdownButton/dropdownButton.styles.ts

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+import { ButtonSecondary } from "../ButtonSecondary/buttonSecondary";
+
+// Dropdown button with "secondary" styles.
+export const DropdownButton = styled(ButtonSecondary)`
+  padding-right: 8px;
+
+  .MuiButton-endIcon {
+    margin-left: -6px;
+  }
+`;

package/src/components/common/Button/components/DropdownButton/dropdownButton.tsx

@@ -0,0 +1,18 @@
+import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import React from "react";
+import { ButtonProps } from "../../button";
+import { DropdownButton as Button } from "./dropdownButton.styles";
+
+export type DropdownButtonProps = Exclude<ButtonProps, "StartIcon">;
+
+export const DropdownButton = ({
+  children,
+  disabled = false,
+  ...props /* Spread props to allow for Mui ButtonProps specific prop overrides e.g. "onClick". */
+}: DropdownButtonProps): JSX.Element => {
+  return (
+    <Button disabled={disabled} EndIcon={ArrowDropDownRoundedIcon} {...props}>
+      {children}
+    </Button>
+  );
+};

package/src/components/common/Button/components/FileDownloadButton/fileDownloadButton.tsx

@@ -0,0 +1,27 @@
+import { Box } from "@mui/material";
+import React, { useEffect, useRef } from "react";
+
+export interface FileDownloadButtonProps {
+  fileName?: string;
+  fileUrl?: string;
+}
+
+export const FileDownloadButton = ({
+  fileName,
+  fileUrl,
+}: FileDownloadButtonProps): JSX.Element => {
+  const downloadRef = useRef<HTMLAnchorElement>(null);
+
+  // Initiates file download when file url request is successful.
+  useEffect(() => {
+    if (downloadRef.current && fileName && fileUrl) {
+      downloadRef.current.setAttribute("href", fileUrl);
+      downloadRef.current.setAttribute("download", fileName);
+      downloadRef.current.click();
+    }
+  }, [fileName, fileUrl]);
+
+  return (
+    <Box component="a" download ref={downloadRef} sx={{ display: "none" }} />
+  );
+};

package/src/components/common/Button/components/HelpIconButton/helpIconButton.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { HelpIconButton } from "./helpIconButton";
+
+const meta: Meta<typeof HelpIconButton> = {
+  argTypes: {
+    size: { control: "select" },
+    target: { control: "select" },
+    url: { control: "text" },
+  },
+  component: HelpIconButton,
+  title: "Components/Common/HelpIconButton",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HelpIconButton>;
+
+export const HelpIconButtonStory: Story = {
+  args: {
+    size: "small",
+    target: ANCHOR_TARGET.BLANK,
+    url: "https://www.google.com/",
+  },
+};

package/src/components/common/Button/components/HelpIconButton/helpIconButton.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { ButtonBase } from "@mui/material";
+
+export const HelpIconButton = styled(ButtonBase)`
+  align-self: flex-start;
+  color: ${({ theme }) => theme.palette.ink.light};
+  vertical-align: bottom; // Vertical alignment is required to align the icon with text styles "textBody400".
+` as typeof ButtonBase;

package/src/components/common/Button/components/HelpIconButton/helpIconButton.tsx

@@ -0,0 +1,40 @@
+import { SvgIconProps } from "@mui/material";
+import Link from "next/link";
+import React from "react";
+import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { isClientSideNavigation } from "../../../../Links/common/utils";
+import { HelpIcon } from "../../../CustomIcon/components/HelpIcon/helpIcon";
+import { HelpIconButton as Button } from "./helpIconButton.styles";
+
+export interface HelpIconButtonProps {
+  size?: SvgIconProps["fontSize"]; // Icon font size. Defaults to "small".
+  target?: ANCHOR_TARGET;
+  url: string;
+}
+
+export const HelpIconButton = ({
+  size = "small",
+  target,
+  url,
+}: HelpIconButtonProps): JSX.Element => {
+  const isInternal = isClientSideNavigation(url);
+  return isInternal ? (
+    <Link href={url} legacyBehavior passHref>
+      <Button
+        href="passHref"
+        rel="noopener"
+        target={target || ANCHOR_TARGET.SELF}
+      >
+        <HelpIcon fontSize={size} />
+      </Button>
+    </Link>
+  ) : (
+    <Button
+      href={url}
+      rel="noopener noreferrer"
+      target={target || ANCHOR_TARGET.BLANK}
+    >
+      <HelpIcon fontSize={size} />
+    </Button>
+  );
+};

package/src/components/common/Button/components/LoginButton/loginButton.styles.ts

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import { ButtonSecondary } from "../ButtonSecondary/buttonSecondary";
+
+export const LoginButton = styled(ButtonSecondary)`
+  .MuiButton-endIcon {
+    margin-right: -6px;
+  }
+`;
+
+export const LoginButtonText = styled.span`
+  flex: 1;
+  text-align: left;
+`;

package/src/components/common/Button/components/LoginButton/loginButton.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { ButtonProps } from "../../button";
+import { LoginButton as Button, LoginButtonText } from "./loginButton.styles";
+
+export type LoginButtonProps = Exclude<ButtonProps, "StartIcon">;
+
+export const LoginButton = ({
+  children,
+  ...props
+}: LoginButtonProps): JSX.Element => {
+  return (
+    <Button fullWidth={true} {...props}>
+      <LoginButtonText>{children}</LoginButtonText>
+    </Button>
+  );
+};

package/src/components/common/Button/components/NavigationButton/navigationButton.styles.ts

@@ -0,0 +1,31 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Button as DXButton } from "../../button";
+
+interface Props {
+  isActive: boolean;
+}
+
+export const Button = styled(DXButton, {
+  shouldForwardProp: (prop) => prop !== "isActive",
+})<Props>`
+  background-color: ${({ theme }) => theme.palette.common.white};
+  color: inherit;
+  padding: 6px 6px 6px 12px;
+
+  &:active,
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.smoke.light};
+  }
+
+  // Button is "active" i.e. menu is open.
+  ${({ isActive, theme }) =>
+    isActive &&
+    css`
+      background-color: ${theme.palette.smoke.light};
+    `};
+
+  .MuiButton-endIcon {
+    margin-left: -6px;
+  }
+`;

package/src/components/common/Button/components/NavigationButton/navigationButton.tsx

@@ -0,0 +1,26 @@
+import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import React from "react";
+import { ButtonProps } from "../../button";
+import { Button } from "./navigationButton.styles";
+
+export interface NavigationButtonProps
+  extends Exclude<ButtonProps, "StartIcon"> {
+  isActive: boolean;
+}
+
+export const NavigationButton = ({
+  children,
+  isActive,
+  ...props /* Spread props to allow for Button specific props ButtonProps e.g. "onClick". */
+}: NavigationButtonProps): JSX.Element => {
+  return (
+    <Button
+      EndIcon={ArrowDropDownRoundedIcon}
+      isActive={isActive}
+      variant="nav"
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+};

package/src/components/common/ButtonGroup/buttonGroup.tsx

@@ -0,0 +1,50 @@
+import {
+  ButtonGroup as MButtonGroup,
+  ButtonGroupProps as MButtonGroupProps,
+} from "@mui/material";
+import React, { Fragment, ReactElement } from "react";
+import { ButtonGroupButton } from "./components/ButtonGroupButton/buttonGroupButton";
+
+/**
+ * An extension of the basic Mui ButtonGroup component with available ButtonGroup props.
+ */
+
+export interface ButtonGroupProps {
+  Buttons: (ReactElement<typeof ButtonGroupButton> | null)[];
+  className?: string;
+  color?: MButtonGroupProps["color"];
+  disabled?: boolean;
+  fullWidth?: boolean;
+  orientation?: MButtonGroupProps["orientation"];
+  size?: MButtonGroupProps["size"];
+  variant?: MButtonGroupProps["variant"];
+}
+
+export const ButtonGroup = ({
+  Buttons,
+  className,
+  color = "primary",
+  disabled = false,
+  fullWidth = false,
+  orientation = "horizontal",
+  size = "small",
+  variant = "contained",
+  ...props
+}: ButtonGroupProps): JSX.Element => {
+  return (
+    <MButtonGroup
+      className={className}
+      color={color}
+      disabled={disabled}
+      fullWidth={fullWidth}
+      orientation={orientation}
+      size={size}
+      variant={variant}
+      {...props}
+    >
+      {Buttons.map((Button, i) => (
+        <Fragment key={`button-${i}`}>{Button}</Fragment>
+      ))}
+    </MButtonGroup>
+  );
+};

package/src/components/common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton.tsx

@@ -0,0 +1,32 @@
+import { Button as MButton } from "@mui/material";
+import React, { ReactNode } from "react";
+import { LoadingIcon } from "../../../CustomIcon/components/LoadingIcon/loadingIcon";
+
+export interface ButtonGroupButtonProps {
+  action: string; // Short description to describe button action.
+  className?: string;
+  disabled?: boolean;
+  label: ReactNode; // Button label may be a string or an element e.g. icon.
+  loading?: boolean;
+  loadingIcon?: ReactNode;
+  onClick: () => void; // Function invoked with button onClick handler.
+}
+
+export const ButtonGroupButton = ({
+  className,
+  disabled = false,
+  label,
+  loading,
+  loadingIcon = <LoadingIcon fontSize="small" />,
+  onClick,
+}: ButtonGroupButtonProps): JSX.Element => {
+  return (
+    <MButton
+      className={className}
+      disabled={disabled}
+      onClick={loading ? undefined : onClick}
+    >
+      {loading ? loadingIcon : label}
+    </MButton>
+  );
+};

package/src/components/common/Card/card.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from "@storybook/react";
+import logo from "../../../images/logo.svg";
+import { Card } from "./card";
+
+export default {
+  component: Card,
+  title: "Components/Common/Card",
+} as Meta<typeof Card>;
+
+type Story = StoryObj<typeof Card>;
+
+export const CardStory: Story = {
+  args: {
+    cardUrl: "https://anvilproject.org/",
+    secondaryText: "22 March 2022",
+    text: "Far into the research process, CSER has much to share at the ACMG 2022 meeting over Mar 22-26 2022!",
+    title: "Out Now! CSER & eMERGE Variant Bakeoff 2.0",
+  },
+};
+
+export const CardActionsStory: Story = {
+  args: {
+    cardActions: [
+      { label: "Learn More", url: "https://anvilproject.org/learn" },
+      { label: "View in Catalog", url: "https://anvilproject.org/data" },
+    ],
+    secondaryText: "Active August, 2020 to July, 2023",
+    text: "The Centers for Common Disease Genomics are a collaborative large-scale genome sequencing effort to comprehensively identify rare risk and protective variants contributing to multiple common disease phenotypes.",
+    title: "CCDG",
+  },
+};
+
+export const CardMediaStory: Story = {
+  args: {
+    cardUrl: "https://anvilproject.org/data",
+    media: { ...logo, height: 100, width: 89 },
+    secondaryTitle:
+      "Baylor College of Medicine, Houston: Sharon Plon, MD, PhD; Will Parsons, MD, PhD; and Amy McGuire, PhD",
+    text: "The Baylor College of Medicine Texas KidsCanSeq Study aims to assess the utility of genome-scale testing, compared with more targeted methods, in diverse pediatric cancer patient populations and diverse healthcare settings in Texas.",
+    title:
+      "Evaluating Utility And Improving Implementation Of Genomic Sequencing For Pediatric Cancer Patients In The Diverse Population And Healthcare Settings Of Texas: The KidsCanSeq Study",
+  },
+};

package/src/components/common/Card/card.styles.ts

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { TABLET } from "../../../theme/common/breakpoints";
+import { SectionContent } from "../Section/section.styles";
+
+export const CardSection = styled.div`
+  display: grid;
+  gap: 16px;
+  padding: 20px 16px;
+
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+    padding: 20px;
+  }
+`;
+
+export const CardContent = styled(SectionContent)``;

package/src/components/common/Card/card.tsx

@@ -0,0 +1,67 @@
+import { Card as MCard } from "@mui/material";
+import React, { Fragment, ReactNode } from "react";
+import { FlatPaper, FluidPaper, RoundedPaper } from "../Paper/paper.styles";
+import { StaticImageProps } from "../StaticImage/staticImage";
+import { CardContent, CardSection } from "./card.styles";
+import {
+  CardAction,
+  CardActionProps,
+} from "./components/CardAction/cardAction";
+import { CardActionArea as ActionArea } from "./components/CardActionArea/cardActionArea";
+import { CardActions } from "./components/CardActions/cardActions";
+import { CardMedia } from "./components/CardMedia/cardMedia";
+import { CardSecondaryText } from "./components/CardSecondaryText/cardSecondaryText";
+import { CardSecondaryTitle } from "./components/CardSecondaryTitle/cardSecondaryTitle";
+import { CardText } from "./components/CardText/cardText";
+import { CardTitle } from "./components/CardTitle/cardTitle";
+
+export interface CardProps {
+  cardActions?: CardActionProps[];
+  cardUrl?: string;
+  media?: StaticImageProps;
+  Paper?: typeof FlatPaper | typeof FluidPaper | typeof RoundedPaper;
+  secondaryText?: ReactNode; // e.g. Date.
+  secondaryTitle?: ReactNode;
+  text?: ReactNode;
+  title?: ReactNode;
+}
+
+export const Card = ({
+  cardActions,
+  cardUrl,
+  media,
+  Paper = RoundedPaper,
+  secondaryText,
+  secondaryTitle,
+  text,
+  title,
+}: CardProps): JSX.Element => {
+  const CardActionArea = cardUrl ? ActionArea : Fragment;
+  const cardActionAreaProps = cardUrl ? { cardUrl } : {};
+  return (
+    <MCard component={Paper}>
+      <CardActionArea {...cardActionAreaProps}>
+        <CardSection>
+          <CardContent>
+            {title && <CardTitle>{title}</CardTitle>}
+            {secondaryTitle && (
+              <CardSecondaryTitle>{secondaryTitle}</CardSecondaryTitle>
+            )}
+            {text && <CardText>{text}</CardText>}
+            {secondaryText && (
+              <CardSecondaryText>{secondaryText}</CardSecondaryText>
+            )}
+          </CardContent>
+          {media?.src && <CardMedia media={media} />}
+          {cardActions && cardActions.length > 0 && (
+            <CardActions>
+              {cardActions.map((cardAction, i) => (
+                <CardAction key={`${cardAction.label}${i}`} {...cardAction} />
+              ))}
+            </CardActions>
+          )}
+        </CardSection>
+      </CardActionArea>
+    </MCard>
+  );
+};

package/src/components/common/Card/components/CardAction/cardAction.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { Link } from "../../../../Links/components/Link/link";
+
+export interface CardActionProps {
+  label: string;
+  target?: ANCHOR_TARGET;
+  url: string;
+}
+
+export const CardAction = ({
+  label,
+  target,
+  url,
+}: CardActionProps): JSX.Element => {
+  return <Link label={label} target={target} url={url} />;
+};

package/src/components/common/Card/components/CardActionArea/cardActionArea.tsx

@@ -0,0 +1,35 @@
+import { CardActionArea as MCardActionArea } from "@mui/material";
+import { useRouter } from "next/router";
+import React, { ReactNode } from "react";
+import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { isClientSideNavigation } from "../../../../Links/common/utils";
+
+export interface CardActionAreaProps {
+  cardUrl?: string;
+  children: ReactNode;
+}
+
+export const CardActionArea = ({
+  cardUrl,
+  children,
+}: CardActionAreaProps): JSX.Element => {
+  const { push } = useRouter();
+
+  // Callback fired when the card action area is clicked.
+  // Determines url type (internal or external) and routes accordingly.
+  const handleClick = (url?: string): void => {
+    if (url) {
+      if (isClientSideNavigation(url)) {
+        push(url);
+      } else {
+        window.open(url, ANCHOR_TARGET.BLANK, "noopener noreferrer");
+      }
+    }
+  };
+
+  return (
+    <MCardActionArea onClick={(): void => handleClick(cardUrl)}>
+      {children}
+    </MCardActionArea>
+  );
+};

package/src/components/common/Card/components/CardActions/cardActions.styles.ts

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { textBody500 } from "../../../../../styles/common/mixins/fonts";
+
+export const CardActions = styled.div`
+  ${textBody500};
+  align-items: center;
+  display: flex;
+  gap: 16px;
+`;

package/src/components/common/Card/components/CardActions/cardActions.tsx

@@ -0,0 +1,16 @@
+import { Divider } from "@mui/material";
+import React, { ReactNode } from "react";
+import { CardActions as Actions } from "./cardActions.styles";
+
+export interface CardActionsProps {
+  children: ReactNode | ReactNode[];
+}
+
+export const CardActions = ({ children }: CardActionsProps): JSX.Element => {
+  return (
+    <>
+      <Divider />
+      <Actions>{children}</Actions>
+    </>
+  );
+};

package/src/components/common/Card/components/CardMedia/cardMedia.styles.ts

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+
+export const CardMedia = styled.div`
+  align-self: flex-start;
+  grid-column: 2; // Card media positioned into the second column.
+  justify-self: flex-end;
+
+  img {
+    margin: 0;
+  }
+`;

package/src/components/common/Card/components/CardMedia/cardMedia.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import {
+  StaticImage,
+  StaticImageProps,
+} from "../../../StaticImage/staticImage";
+import { CardMedia as Media } from "./cardMedia.styles";
+
+export interface CardMediaProps {
+  media: StaticImageProps;
+}
+
+export const CardMedia = ({ media }: CardMediaProps): JSX.Element => {
+  return (
+    <Media>
+      <StaticImage
+        alt={media.alt}
+        height={media.height}
+        src={media.src}
+        width={media.width}
+      />
+    </Media>
+  );
+};

package/src/components/common/Card/components/CardSecondaryText/cardSecondaryText.tsx

@@ -0,0 +1,22 @@
+import { Typography } from "@mui/material";
+import React, { ReactNode } from "react";
+import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../../theme/common/typography";
+
+export interface CardSecondaryTextProps {
+  children: ReactNode;
+}
+
+export const CardSecondaryText = ({
+  children,
+  ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */
+}: CardSecondaryTextProps): JSX.Element => {
+  return (
+    <Typography
+      color="ink.light"
+      variant={TEXT_BODY_SMALL_400_2_LINES}
+      {...props}
+    >
+      {children}
+    </Typography>
+  );
+};