@databiosphere/findable-ui 50.4.0 → 50.6.0

package/.release-please-manifest.json

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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # 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)
+
+
+### Features
+
+* add optional icon support to exportmethod component ([#857](https://github.com/DataBiosphere/findable-ui/issues/857)) ([#858](https://github.com/DataBiosphere/findable-ui/issues/858)) ([07b8a32](https://github.com/DataBiosphere/findable-ui/commit/07b8a32e4cae25085be9d178a0115fd9529a4c1a))
+
+
+### Bug Fixes
+
+* allow href clicks in export text to override (and cancel) row clicks ([#855](https://github.com/DataBiosphere/findable-ui/issues/855)) ([#859](https://github.com/DataBiosphere/findable-ui/issues/859)) ([9e721fa](https://github.com/DataBiosphere/findable-ui/commit/9e721fa50492414bd6154b837ccdace4966f5b94))
+
 ## [50.4.0](https://github.com/DataBiosphere/findable-ui/compare/v50.3.0...v50.4.0) (2026-03-30)
 
 

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,10 +1,12 @@
 import { JSX, ReactNode } from "react";
 import { TrackingProps } from "../../../types";
 export interface ExportMethodProps extends TrackingProps {
+    comingSoon?: boolean;
     description: ReactNode;
     footnote?: ReactNode;
+    icon?: ReactNode;
     isAccessible?: boolean;
     route: string;
     title: string;
 }
-export declare const ExportMethod: ({ description, footnote, 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,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRightRounded } from "@mui/icons-material";
-import { CardActionArea, CardActions, CardContent, 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, isAccessible = true, route, title, trackingId, }) => {
-    const { disabled, message } = useDownloadStatus();
-    return (_jsx(Tooltip, { arrow: true, title: message, children: _jsx(StyledCard, { component: FluidPaper, elevation: 1, children: _jsxs(CardActionArea, { component: Link, disabled: disabled || !isAccessible, href: route, id: trackingId, children: [_jsxs(CardContent, { children: [_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

@@ -1,28 +1,37 @@
 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;
+  grid-template-columns: 1fr auto;
+  position: relative; /* positions card action area */
+
   .MuiCardActionArea-root {
-    display: grid;
-    gap: 16px;
-    grid-template-columns: 1fr auto;
-    ${sectionPadding};
+    inset: 0;
+    position: absolute; /* covers entire card */
     text-decoration: none;
-
-    &.Mui-disabled {
-      opacity: 0.6;
-    }
+  }
 
     .MuiCardContent-root {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
       padding: 0;
-
-      h3 {
-        margin-bottom: 4px;
-      }
     }
 
-    .MuiCardActions-root {
-      padding: 0;
+    a {
+      position: relative;
+      z-index: 1; /* Elevates links above the absolutely positioned CardActionArea overlay. */
     }
   }
+
+  .MuiCardActions-root {
+    padding: 0;
+  }
 `;

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

@@ -1,7 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExportMethod } from "../exportMethod";
 const meta = {
     argTypes: {
-        description: { control: "text" },
+        description: { control: false },
         route: { control: "text" },
         title: { control: "text" },
     },
@@ -10,8 +11,8 @@ const meta = {
 export default meta;
 export const ExportMethodStory = {
     args: {
-        description: "Obtain a curl command for downloading the selected data.",
-        route: "/request-curl-command",
+        description: (_jsxs("div", { children: ["Obtain a curl command for downloading the selected data.", " ", _jsx("a", { href: "/learn-more", rel: "noopener noreferrer", target: "_blank", children: "Learn more" })] })),
+        route: "/export",
         title: "Download Study Data and Metadata (Curl Command)",
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "50.4.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,29 +1,42 @@
 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;
+  grid-template-columns: 1fr auto;
+  position: relative; /* positions card action area */
+
   .MuiCardActionArea-root {
-    display: grid;
-    gap: 16px;
-    grid-template-columns: 1fr auto;
-    ${sectionPadding};
+    inset: 0;
+    position: absolute; /* covers entire card */
     text-decoration: none;
-
-    &.Mui-disabled {
-      opacity: 0.6;
-    }
+  }
 
     .MuiCardContent-root {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
       padding: 0;
-
-      h3 {
-        margin-bottom: 4px;
-      }
     }
 
-    .MuiCardActions-root {
-      padding: 0;
+    a {
+      position: relative;
+      z-index: 1; /* Elevates links above the absolutely positioned CardActionArea overlay. */
     }
   }
-` as typeof Card;
+
+  .MuiCardActions-root {
+    padding: 0;
+  }
+`;

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

@@ -3,71 +3,92 @@ import {
   CardActionArea,
   CardActions,
   CardContent,
+  Chip,
+  Stack,
   Tooltip,
   Typography,
 } from "@mui/material";
 import Link from "next/link";
 import { JSX, ReactNode } from "react";
 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 { 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;
   isAccessible?: boolean;
   route: string;
   title: string;
 }
 
 export const ExportMethod = ({
+  comingSoon,
   description,
   footnote,
+  icon,
   isAccessible = true,
   route,
   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}
-        >
-          <CardContent>
+        />
+        <CardContent>
+          <Stack
+            alignItems={STACK_PROPS.ALIGN_ITEMS.FLEX_START}
+            direction={STACK_PROPS.DIRECTION.ROW}
+            gap={2}
+            useFlexGap
+          >
+            {icon}
             <Typography
               component="h3"
               variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_XSMALL}
             >
               {title}
             </Typography>
+          </Stack>
+          <Typography
+            component="div"
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
+          >
+            {description}
+          </Typography>
+          {footnote && (
             <Typography
+              color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
               component="div"
-              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
+              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
             >
-              {description}
+              {footnote}
             </Typography>
-            {footnote && (
-              <Typography
-                color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-                component="div"
-                variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
-              >
-                {footnote}
-              </Typography>
-            )}
-          </CardContent>
-          <CardActions>
+          )}
+        </CardContent>
+        <CardActions>
+          {comingSoon ? (
+            <Chip {...CHIP_PROPS} />
+          ) : (
             <ChevronRightRounded color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />
-          </CardActions>
-        </CardActionArea>
+          )}
+        </CardActions>
       </StyledCard>
     </Tooltip>
   );

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

@@ -3,7 +3,7 @@ import { ExportMethod } from "../exportMethod";
 
 const meta: Meta<typeof ExportMethod> = {
   argTypes: {
-    description: { control: "text" },
+    description: { control: false },
     route: { control: "text" },
     title: { control: "text" },
   },
@@ -16,8 +16,15 @@ type Story = StoryObj<typeof meta>;
 
 export const ExportMethodStory: Story = {
   args: {
-    description: "Obtain a curl command for downloading the selected data.",
-    route: "/request-curl-command",
+    description: (
+      <div>
+        Obtain a curl command for downloading the selected data.{" "}
+        <a href="/learn-more" rel="noopener noreferrer" target="_blank">
+          Learn more
+        </a>
+      </div>
+    ),
+    route: "/export",
     title: "Download Study Data and Metadata (Curl Command)",
   },
 };