@databiosphere/findable-ui 50.5.0 → 50.6.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "50.5.0"
+  ".": "50.6.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [50.6.0](https://github.com/DataBiosphere/findable-ui/compare/v50.5.0...v50.6.0) (2026-04-02)
+
+
+### Features
+
+* add disabled prop with coming soon chip to exportmethod ([#861](https://github.com/DataBiosphere/findable-ui/issues/861)) ([#862](https://github.com/DataBiosphere/findable-ui/issues/862)) ([3fa93b2](https://github.com/DataBiosphere/findable-ui/commit/3fa93b26afbf4c7c4f86c2527d1d05af495fb343))
+
 ## [50.5.0](https://github.com/DataBiosphere/findable-ui/compare/v50.4.0...v50.5.0) (2026-04-02)
 
 

package/lib/components/Export/components/ExportMethod/constants.d.ts

@@ -0,0 +1,2 @@
+import { ChipProps } from "@mui/material";
+export declare const CHIP_PROPS: Partial<ChipProps>;

package/lib/components/Export/components/ExportMethod/constants.js

@@ -0,0 +1,6 @@
+import { CHIP_PROPS as MUI_CHIP_PROPS } from "../../../../styles/common/mui/chip";
+export const CHIP_PROPS = {
+    color: MUI_CHIP_PROPS.COLOR.DEFAULT,
+    label: "Coming Soon",
+    variant: MUI_CHIP_PROPS.VARIANT.STATUS,
+};

package/lib/components/Export/components/ExportMethod/exportMethod.d.ts

@@ -1,6 +1,7 @@
 import { JSX, ReactNode } from "react";
 import { TrackingProps } from "../../../types";
 export interface ExportMethodProps extends TrackingProps {
+    comingSoon?: boolean;
     description: ReactNode;
     footnote?: ReactNode;
     icon?: ReactNode;
@@ -8,4 +9,4 @@ export interface ExportMethodProps extends TrackingProps {
     route: string;
     title: string;
 }
-export declare const ExportMethod: ({ description, footnote, icon, isAccessible, route, title, trackingId, }: ExportMethodProps) => JSX.Element;
+export declare const ExportMethod: ({ comingSoon, description, footnote, icon, isAccessible, route, title, trackingId, }: ExportMethodProps) => JSX.Element;

package/lib/components/Export/components/ExportMethod/exportMethod.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRightRounded } from "@mui/icons-material";
-import { CardActionArea, CardActions, CardContent, Stack, Tooltip, Typography, } from "@mui/material";
+import { CardActionArea, CardActions, CardContent, Chip, Stack, Tooltip, Typography, } from "@mui/material";
 import Link from "next/link";
 import { useDownloadStatus } from "../../../../hooks/useDownloadStatus";
 import { STACK_PROPS } from "../../../../styles/common/mui/stack";
 import { SVG_ICON_PROPS } from "../../../../styles/common/mui/svgIcon";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
+import { CHIP_PROPS } from "./constants";
 import { StyledCard } from "./exportMethod.styles";
-export const ExportMethod = ({ description, footnote, icon, isAccessible = true, route, title, trackingId, }) => {
-    const { disabled, message } = useDownloadStatus();
-    return (_jsx(Tooltip, { arrow: true, title: message, children: _jsxs(StyledCard, { component: FluidPaper, elevation: 1, children: [_jsx(CardActionArea, { "aria-label": title, component: Link, disabled: disabled || !isAccessible, href: route, id: trackingId }), _jsxs(CardContent, { children: [_jsxs(Stack, { alignItems: STACK_PROPS.ALIGN_ITEMS.FLEX_START, direction: STACK_PROPS.DIRECTION.ROW, gap: 2, useFlexGap: true, children: [icon, _jsx(Typography, { component: "h3", variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_XSMALL, children: title })] }), _jsx(Typography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES, children: description }), footnote && (_jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES, children: footnote }))] }), _jsx(CardActions, { children: _jsx(ChevronRightRounded, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT }) })] }) }));
+export const ExportMethod = ({ comingSoon, description, footnote, icon, isAccessible = true, route, title, trackingId, }) => {
+    const { disabled: downloadStatusDisabled, message } = useDownloadStatus();
+    const disabled = comingSoon || downloadStatusDisabled || !isAccessible;
+    return (_jsx(Tooltip, { arrow: true, title: message, children: _jsxs(StyledCard, { component: FluidPaper, disabled: disabled, elevation: 1, children: [_jsx(CardActionArea, { "aria-label": title, component: Link, disabled: disabled, href: route, id: trackingId }), _jsxs(CardContent, { children: [_jsxs(Stack, { alignItems: STACK_PROPS.ALIGN_ITEMS.FLEX_START, direction: STACK_PROPS.DIRECTION.ROW, gap: 2, useFlexGap: true, children: [icon, _jsx(Typography, { component: "h3", variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_XSMALL, children: title })] }), _jsx(Typography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES, children: description }), footnote && (_jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES, children: footnote }))] }), _jsx(CardActions, { children: comingSoon ? (_jsx(Chip, { ...CHIP_PROPS })) : (_jsx(ChevronRightRounded, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT })) })] }) }));
 };

package/lib/components/Export/components/ExportMethod/exportMethod.styles.d.ts

@@ -1,2 +1,8 @@
-import { Card } from "@mui/material";
-export declare const StyledCard: typeof Card;
+import { CardProps } from "@mui/material";
+interface Props extends CardProps {
+    disabled?: boolean;
+}
+export declare const StyledCard: import("@emotion/styled").StyledComponent<import("@mui/material").CardOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "sx" | "square" | "elevation" | "variant" | "raised"> & {
+    theme?: import("@emotion/react").Theme;
+} & Props, {}, {}>;
+export {};

package/lib/components/Export/components/ExportMethod/exportMethod.styles.js

@@ -2,7 +2,10 @@ import styled from "@emotion/styled";
 import { Card } from "@mui/material";
 import { PALETTE } from "../../../../styles/common/constants/palette";
 import { sectionPadding } from "../../../common/Section/section.styles";
-export const StyledCard = styled(Card) `
+export const StyledCard = styled(Card, {
+    shouldForwardProp: (prop) => prop !== "disabled",
+}) `
+  background-color: ${({ disabled }) => (disabled ? PALETTE.SMOKE_LIGHTEST : PALETTE.COMMON_WHITE)};
   ${sectionPadding};
   display: grid;
   gap: 16px;
@@ -13,11 +16,6 @@ export const StyledCard = styled(Card) `
     inset: 0;
     position: absolute; /* covers entire card */
     text-decoration: none;
-
-    &.Mui-disabled {
-      background-color: ${PALETTE.COMMON_WHITE};
-      opacity: 0.6;
-    }
   }
 
     .MuiCardContent-root {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "50.5.0",
+  "version": "50.6.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/Export/components/ExportMethod/constants.ts

@@ -0,0 +1,8 @@
+import { ChipProps } from "@mui/material";
+import { CHIP_PROPS as MUI_CHIP_PROPS } from "../../../../styles/common/mui/chip";
+
+export const CHIP_PROPS: Partial<ChipProps> = {
+  color: MUI_CHIP_PROPS.COLOR.DEFAULT,
+  label: "Coming Soon",
+  variant: MUI_CHIP_PROPS.VARIANT.STATUS,
+};

package/src/components/Export/components/ExportMethod/exportMethod.styles.ts

@@ -1,9 +1,16 @@
 import styled from "@emotion/styled";
-import { Card } from "@mui/material";
+import { Card, CardProps } from "@mui/material";
 import { PALETTE } from "../../../../styles/common/constants/palette";
 import { sectionPadding } from "../../../common/Section/section.styles";
 
-export const StyledCard = styled(Card)`
+interface Props extends CardProps {
+  disabled?: boolean;
+}
+
+export const StyledCard = styled(Card, {
+  shouldForwardProp: (prop) => prop !== "disabled",
+})<Props>`
+  background-color: ${({ disabled }) => (disabled ? PALETTE.SMOKE_LIGHTEST : PALETTE.COMMON_WHITE)};
   ${sectionPadding};
   display: grid;
   gap: 16px;
@@ -14,11 +21,6 @@ export const StyledCard = styled(Card)`
     inset: 0;
     position: absolute; /* covers entire card */
     text-decoration: none;
-
-    &.Mui-disabled {
-      background-color: ${PALETTE.COMMON_WHITE};
-      opacity: 0.6;
-    }
   }
 
     .MuiCardContent-root {
@@ -37,4 +39,4 @@ export const StyledCard = styled(Card)`
   .MuiCardActions-root {
     padding: 0;
   }
-` as typeof Card;
+`;

package/src/components/Export/components/ExportMethod/exportMethod.tsx

@@ -3,6 +3,7 @@ import {
   CardActionArea,
   CardActions,
   CardContent,
+  Chip,
   Stack,
   Tooltip,
   Typography,
@@ -15,9 +16,11 @@ import { SVG_ICON_PROPS } from "../../../../styles/common/mui/svgIcon";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
 import { TrackingProps } from "../../../types";
+import { CHIP_PROPS } from "./constants";
 import { StyledCard } from "./exportMethod.styles";
 
 export interface ExportMethodProps extends TrackingProps {
+  comingSoon?: boolean;
   description: ReactNode;
   footnote?: ReactNode;
   icon?: ReactNode;
@@ -27,6 +30,7 @@ export interface ExportMethodProps extends TrackingProps {
 }
 
 export const ExportMethod = ({
+  comingSoon,
   description,
   footnote,
   icon,
@@ -35,14 +39,15 @@ export const ExportMethod = ({
   title,
   trackingId,
 }: ExportMethodProps): JSX.Element => {
-  const { disabled, message } = useDownloadStatus();
+  const { disabled: downloadStatusDisabled, message } = useDownloadStatus();
+  const disabled = comingSoon || downloadStatusDisabled || !isAccessible;
   return (
     <Tooltip arrow title={message}>
-      <StyledCard component={FluidPaper} elevation={1}>
+      <StyledCard component={FluidPaper} disabled={disabled} elevation={1}>
         <CardActionArea
           aria-label={title}
           component={Link}
-          disabled={disabled || !isAccessible}
+          disabled={disabled}
           href={route}
           id={trackingId}
         />
@@ -78,7 +83,11 @@ export const ExportMethod = ({
           )}
         </CardContent>
         <CardActions>
-          <ChevronRightRounded color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />
+          {comingSoon ? (
+            <Chip {...CHIP_PROPS} />
+          ) : (
+            <ChevronRightRounded color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />
+          )}
         </CardActions>
       </StyledCard>
     </Tooltip>