@databiosphere/findable-ui 50.7.0 → 50.8.0

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

@@ -1,25 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { Button, ButtonProps } from "@mui/material";
-import { PALETTE } from "../../../../../styles/common/constants/palette";
-
-interface Props extends ButtonProps {
-  open?: boolean;
-}
-
-export const StyledButton = styled(Button, {
-  shouldForwardProp: (prop) => prop !== "open",
-})<Props>`
-  gap: 0;
-
-  .MuiButton-endIcon {
-    margin-left: -2px;
-    margin-right: -8px;
-  }
-
-  ${({ open }) =>
-    open &&
-    css`
-      background-color: ${PALETTE.SMOKE_LIGHTEST};
-    `}
-`;

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

@@ -1,22 +0,0 @@
-import { ArrowDropDownRounded } from "@mui/icons-material";
-import { JSX } from "react";
-import { BUTTON_PROPS } from "../../constants";
-import { StyledButton } from "./dropdownButton.styles";
-import { DropdownButtonProps } from "./types";
-
-export const DropdownButton = ({
-  children,
-  open = false,
-  ...props /* Mui ButtonProps */
-}: DropdownButtonProps): JSX.Element => {
-  return (
-    <StyledButton
-      {...BUTTON_PROPS.SECONDARY_CONTAINED}
-      endIcon={<ArrowDropDownRounded />}
-      open={open}
-      {...props}
-    >
-      {children}
-    </StyledButton>
-  );
-};

package/src/components/common/Button/components/DropdownButton/types.ts

@@ -1,5 +0,0 @@
-import { ButtonProps } from "@mui/material";
-
-export interface DropdownButtonProps extends ButtonProps {
-  open?: boolean;
-}

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

@@ -1,27 +0,0 @@
-import { Box } from "@mui/material";
-import { JSX, 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

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { ANCHOR_TARGET } from "../../../../Links/common/entities";
-import { HelpIconButton } from "./helpIconButton";
-
-const meta = {
-  argTypes: {
-    size: { control: "select", options: ["small", "medium", "large"] },
-    target: { control: "select", options: Object.values(ANCHOR_TARGET) },
-    url: { control: "text" },
-  },
-  component: HelpIconButton,
-  title: "Components/Common/HelpIconButton",
-} satisfies Meta<typeof 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

@@ -1,9 +0,0 @@
-import styled from "@emotion/styled";
-import { ButtonBase } from "@mui/material";
-import { PALETTE } from "../../../../../styles/common/constants/palette";
-
-export const HelpIconButton = styled(ButtonBase)`
-  align-self: flex-start;
-  color: ${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

@@ -1,42 +0,0 @@
-import { SvgIconProps } from "@mui/material";
-import Link from "next/link";
-import { JSX } from "react";
-import {
-  ANCHOR_TARGET,
-  REL_ATTRIBUTE,
-} 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 ? (
-    <Button
-      component={Link}
-      href={url}
-      rel={REL_ATTRIBUTE.NO_OPENER}
-      target={target || ANCHOR_TARGET.SELF}
-    >
-      <HelpIcon fontSize={size} />
-    </Button>
-  ) : (
-    <Button
-      href={url}
-      rel={REL_ATTRIBUTE.NO_OPENER_NO_REFERRER}
-      target={target || ANCHOR_TARGET.BLANK}
-    >
-      <HelpIcon fontSize={size} />
-    </Button>
-  );
-};

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

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

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

@@ -1,28 +0,0 @@
-import { ArrowDropDownRounded } from "@mui/icons-material";
-import { JSX } 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={ArrowDropDownRounded}
-      isActive={isActive}
-      variant="nav"
-      {...props}
-    >
-      {children}
-    </Button>
-  );
-};

package/src/components/common/Button/constants.ts

@@ -1,37 +0,0 @@
-import { ButtonOwnProps } from "@mui/material";
-import { BUTTON_PROPS as MUI_BUTTON_PROPS } from "../../../styles/common/mui/button";
-
-export const BUTTON_PROPS: Record<string, Partial<ButtonOwnProps>> = {
-  PRIMARY_CONTAINED: {
-    color: MUI_BUTTON_PROPS.COLOR.PRIMARY,
-    variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,
-  },
-  PRIMARY_LARGE_CONTAINED: {
-    color: MUI_BUTTON_PROPS.COLOR.PRIMARY,
-    size: MUI_BUTTON_PROPS.SIZE.LARGE,
-    variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,
-  },
-  PRIMARY_MEDIUM_CONTAINED: {
-    color: MUI_BUTTON_PROPS.COLOR.PRIMARY,
-    size: MUI_BUTTON_PROPS.SIZE.MEDIUM,
-    variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,
-  },
-  PRIMARY_TEXT: {
-    color: MUI_BUTTON_PROPS.COLOR.PRIMARY,
-    variant: MUI_BUTTON_PROPS.VARIANT.TEXT,
-  },
-  SECONDARY_CONTAINED: {
-    color: MUI_BUTTON_PROPS.COLOR.SECONDARY,
-    variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,
-  },
-  SECONDARY_LARGE_CONTAINED: {
-    color: MUI_BUTTON_PROPS.COLOR.SECONDARY,
-    size: MUI_BUTTON_PROPS.SIZE.LARGE,
-    variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,
-  },
-  SECONDARY_MEDIUM_CONTAINED: {
-    color: MUI_BUTTON_PROPS.COLOR.SECONDARY,
-    size: MUI_BUTTON_PROPS.SIZE.MEDIUM,
-    variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,
-  },
-};

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

@@ -1,50 +0,0 @@
-import {
-  ButtonGroup as MButtonGroup,
-  ButtonGroupProps as MButtonGroupProps,
-} from "@mui/material";
-import { JSX, 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

@@ -1,32 +0,0 @@
-import { Button as MButton } from "@mui/material";
-import { JSX, 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/ButtonGroup/constants.ts

@@ -1,13 +0,0 @@
-import { ButtonGroupProps } from "@mui/material";
-import { BUTTON_GROUP_PROPS as MUI_BUTTON_GROUP_PROPS } from "../../../styles/common/mui/buttonGroup";
-
-export const BUTTON_GROUP_PROPS: Record<string, Partial<ButtonGroupProps>> = {
-  PRIMARY_CONTAINED: {
-    color: MUI_BUTTON_GROUP_PROPS.COLOR.PRIMARY,
-    variant: MUI_BUTTON_GROUP_PROPS.VARIANT.CONTAINED,
-  },
-  SECONDARY_OUTLINED: {
-    color: MUI_BUTTON_GROUP_PROPS.COLOR.SECONDARY,
-    variant: MUI_BUTTON_GROUP_PROPS.VARIANT.OUTLINED,
-  },
-};

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

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import logo from "../../../images/logo.svg";
-import { Card } from "./card";
-
-const meta = {
-  component: Card,
-  title: "Components/Common/Card",
-} satisfies Meta<typeof Card>;
-
-export default meta;
-
-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

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

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

@@ -1,67 +0,0 @@
-import { Card as MCard } from "@mui/material";
-import { JSX, 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

@@ -1,17 +0,0 @@
-import { JSX } 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

@@ -1,42 +0,0 @@
-import { CardActionArea as MCardActionArea } from "@mui/material";
-import { useRouter } from "next/router";
-import { JSX, ReactNode } from "react";
-import {
-  ANCHOR_TARGET,
-  REL_ATTRIBUTE,
-} 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,
-          REL_ATTRIBUTE.NO_OPENER_NO_REFERRER,
-        );
-      }
-    }
-  };
-
-  return (
-    <MCardActionArea onClick={(): void => handleClick(cardUrl)}>
-      {children}
-    </MCardActionArea>
-  );
-};

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

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

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

@@ -1,16 +0,0 @@
-import { Divider } from "@mui/material";
-import { JSX, 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

@@ -1,11 +0,0 @@
-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

@@ -1,23 +0,0 @@
-import { JSX } 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

@@ -1,13 +0,0 @@
-import { Typography, TypographyProps } from "@mui/material";
-import { JSX } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
-
-export const CardSecondaryText = (props: TypographyProps): JSX.Element => {
-  return (
-    <Typography
-      color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
-      {...props}
-    />
-  );
-};

package/src/components/common/Card/components/CardSecondaryTitle/cardSecondaryTitle.styles.ts

@@ -1,6 +0,0 @@
-import styled from "@emotion/styled";
-import { Typography } from "@mui/material";
-
-export const StyledTypography = styled(Typography)`
-  margin-top: -4px;
-`;

package/src/components/common/Card/components/CardSecondaryTitle/cardSecondaryTitle.tsx

@@ -1,14 +0,0 @@
-import { TypographyProps } from "@mui/material";
-import { JSX } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
-import { StyledTypography } from "./cardSecondaryTitle.styles";
-
-export const CardSecondaryTitle = (props: TypographyProps): JSX.Element => {
-  return (
-    <StyledTypography
-      color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
-      {...props}
-    />
-  );
-};

package/src/components/common/Card/components/CardText/cardText.tsx

@@ -1,12 +0,0 @@
-import { Typography, TypographyProps } from "@mui/material";
-import { JSX } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
-
-export const CardText = (props: TypographyProps): JSX.Element => {
-  return (
-    <Typography
-      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
-      {...props}
-    />
-  );
-};