npm - @databiosphere/findable-ui - Versions diffs - 50.3.0 → 50.5.0 - Mend

@databiosphere/findable-ui 50.3.0 → 50.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/.release-please-manifest.json CHANGED Viewed

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

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,25 @@
 # Changelog
+## [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)
+### Features
+* refactor exportmethod to card-based layout ([#848](https://github.com/DataBiosphere/findable-ui/issues/848)) ([bfc09d3](https://github.com/DataBiosphere/findable-ui/commit/bfc09d35c4e3d5fa55a7ab6f9e50eb88b23f31f0))
+* update export/download ui ([#848](https://github.com/DataBiosphere/findable-ui/issues/848)) ([#853](https://github.com/DataBiosphere/findable-ui/issues/853)) ([bfc09d3](https://github.com/DataBiosphere/findable-ui/commit/bfc09d35c4e3d5fa55a7ab6f9e50eb88b23f31f0))
 ## [50.3.0](https://github.com/DataBiosphere/findable-ui/compare/v50.2.1...v50.3.0) (2026-03-27)

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

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

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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tooltip, Typography } from "@mui/material";
+import { ChevronRightRounded } from "@mui/icons-material";
+import { CardActionArea, CardActions, CardContent, 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/paper.styles";
-import { SectionTitle } from "../../../common/Section/components/SectionTitle/sectionTitle";
-import { Section, SectionActions, SectionContent, } from "../../../common/Section/section.styles";
-import { ExportButton } from "./exportMethod.styles";
-export const ExportMethod = ({ buttonLabel, description, footnote, isAccessible = true, route, title, trackingId, }) => {
+import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
+import { StyledCard } from "./exportMethod.styles";
+export const ExportMethod = ({ description, footnote, icon, isAccessible = true, route, title, trackingId, }) => {
     const { disabled, message } = useDownloadStatus();
-    return (_jsx(FluidPaper, { children: _jsxs(Section, { children: [_jsxs(SectionContent, { children: [_jsx(SectionTitle, { title: title }), _jsx(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES, children: description })] }), _jsx(SectionActions, { children: _jsx(Tooltip, { arrow: true, title: message, children: _jsx("span", { children: _jsx(ExportButton, { component: Link, disabled: disabled || !isAccessible, href: route, id: trackingId, children: buttonLabel }) }) }) }), footnote && (_jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES, children: footnote }))] }) }));
+    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 }) })] }) }));
 };

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

@@ -1,3 +1,2 @@
-export declare const ExportButton: import("@emotion/styled").StyledComponent<Omit<import("../../../common/Button/button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;
+import { Card } from "@mui/material";
+export declare const StyledCard: typeof Card;

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

@@ -1,5 +1,39 @@
 import styled from "@emotion/styled";
-import { ButtonPrimary } from "../../../common/Button/components/ButtonPrimary/buttonPrimary";
-export const ExportButton = styled(ButtonPrimary) `
-  text-transform: none; // overrides MuiButton theme text-transform "capitalize".
+import { Card } from "@mui/material";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { sectionPadding } from "../../../common/Section/section.styles";
+export const StyledCard = styled(Card) `
+  ${sectionPadding};
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr auto;
+  position: relative; /* positions card action area */
+  .MuiCardActionArea-root {
+    inset: 0;
+    position: absolute; /* covers entire card */
+    text-decoration: none;
+    &.Mui-disabled {
+      background-color: ${PALETTE.COMMON_WHITE};
+      opacity: 0.6;
+    }
+  }
+    .MuiCardContent-root {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      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.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { ExportMethod } from "../exportMethod";
+declare const meta: Meta<typeof ExportMethod>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ExportMethodStory: Story;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExportMethod } from "../exportMethod";
+const meta = {
+    argTypes: {
+        description: { control: false },
+        route: { control: "text" },
+        title: { control: "text" },
+    },
+    component: ExportMethod,
+};
+export default meta;
+export const ExportMethodStory = {
+    args: {
+        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 CHANGED Viewed

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

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

@@ -1,6 +1,40 @@
 import styled from "@emotion/styled";
-import { ButtonPrimary } from "../../../common/Button/components/ButtonPrimary/buttonPrimary";
+import { Card } from "@mui/material";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { sectionPadding } from "../../../common/Section/section.styles";
-export const ExportButton = styled(ButtonPrimary)`
-  text-transform: none; // overrides MuiButton theme text-transform "capitalize".
-`;
+export const StyledCard = styled(Card)`
+  ${sectionPadding};
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr auto;
+  position: relative; /* positions card action area */
+  .MuiCardActionArea-root {
+    inset: 0;
+    position: absolute; /* covers entire card */
+    text-decoration: none;
+    &.Mui-disabled {
+      background-color: ${PALETTE.COMMON_WHITE};
+      opacity: 0.6;
+    }
+  }
+    .MuiCardContent-root {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 0;
+    }
+    a {
+      position: relative;
+      z-index: 1; /* Elevates links above the absolutely positioned CardActionArea overlay. */
+    }
+  }
+  .MuiCardActions-root {
+    padding: 0;
+  }
+` as typeof Card;

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

@@ -1,31 +1,35 @@
-import { Tooltip, Typography } from "@mui/material";
+import { ChevronRightRounded } from "@mui/icons-material";
+import {
+  CardActionArea,
+  CardActions,
+  CardContent,
+  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/paper.styles";
-import { SectionTitle } from "../../../common/Section/components/SectionTitle/sectionTitle";
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-} from "../../../common/Section/section.styles";
+import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
 import { TrackingProps } from "../../../types";
-import { ExportButton } from "./exportMethod.styles";
+import { StyledCard } from "./exportMethod.styles";
 export interface ExportMethodProps extends TrackingProps {
-  buttonLabel: string;
   description: ReactNode;
   footnote?: ReactNode;
+  icon?: ReactNode;
   isAccessible?: boolean;
   route: string;
   title: string;
 }
 export const ExportMethod = ({
-  buttonLabel,
   description,
   footnote,
+  icon,
   isAccessible = true,
   route,
   title,
@@ -33,38 +37,50 @@ export const ExportMethod = ({
 }: ExportMethodProps): JSX.Element => {
   const { disabled, message } = useDownloadStatus();
   return (
-    <FluidPaper>
-      <Section>
-        <SectionContent>
-          <SectionTitle title={title} />
-          <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}>
-            {description}
-          </Typography>
-        </SectionContent>
-        <SectionActions>
-          <Tooltip arrow title={message}>
-            <span>
-              <ExportButton
-                component={Link}
-                disabled={disabled || !isAccessible}
-                href={route}
-                id={trackingId}
-              >
-                {buttonLabel}
-              </ExportButton>
-            </span>
-          </Tooltip>
-        </SectionActions>
-        {footnote && (
+    <Tooltip arrow title={message}>
+      <StyledCard component={FluidPaper} elevation={1}>
+        <CardActionArea
+          aria-label={title}
+          component={Link}
+          disabled={disabled || !isAccessible}
+          href={route}
+          id={trackingId}
+        />
+        <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
-            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
             component="div"
-            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
           >
-            {footnote}
+            {description}
           </Typography>
-        )}
-      </Section>
-    </FluidPaper>
+          {footnote && (
+            <Typography
+              color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+              component="div"
+              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
+            >
+              {footnote}
+            </Typography>
+          )}
+        </CardContent>
+        <CardActions>
+          <ChevronRightRounded color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />
+        </CardActions>
+      </StyledCard>
+    </Tooltip>
   );
 };

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

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { ExportMethod } from "../exportMethod";
+const meta: Meta<typeof ExportMethod> = {
+  argTypes: {
+    description: { control: false },
+    route: { control: "text" },
+    title: { control: "text" },
+  },
+  component: ExportMethod,
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const ExportMethodStory: Story = {
+  args: {
+    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)",
+  },
+};

package/lib/components/Export/components/ExportMethod/exportMethod.stories.d.ts DELETED Viewed

@@ -1,22 +0,0 @@
-import type { StoryObj } from "@storybook/nextjs-vite";
-declare const meta: {
-    argTypes: {
-        buttonLabel: {
-            control: "text";
-        };
-        description: {
-            control: "text";
-        };
-        route: {
-            control: "text";
-        };
-        title: {
-            control: "text";
-        };
-    };
-    component: ({ buttonLabel, description, footnote, isAccessible, route, title, trackingId, }: import("./exportMethod").ExportMethodProps) => import("react").JSX.Element;
-    title: string;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const ExportMethodStory: Story;

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

@@ -1,20 +0,0 @@
-import { ExportMethod } from "./exportMethod";
-const meta = {
-    argTypes: {
-        buttonLabel: { control: "text" },
-        description: { control: "text" },
-        route: { control: "text" },
-        title: { control: "text" },
-    },
-    component: ExportMethod,
-    title: "Components/Section/Export/ExportMethod",
-};
-export default meta;
-export const ExportMethodStory = {
-    args: {
-        buttonLabel: "Request curl Command",
-        description: "Obtain a curl command for downloading the selected data.",
-        route: "/request-curl-command",
-        title: "Download Study Data and Metadata (Curl Command)",
-    },
-};

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

@@ -1,26 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { ExportMethod } from "./exportMethod";
-const meta = {
-  argTypes: {
-    buttonLabel: { control: "text" },
-    description: { control: "text" },
-    route: { control: "text" },
-    title: { control: "text" },
-  },
-  component: ExportMethod,
-  title: "Components/Section/Export/ExportMethod",
-} satisfies Meta<typeof ExportMethod>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const ExportMethodStory: Story = {
-  args: {
-    buttonLabel: "Request curl Command",
-    description: "Obtain a curl command for downloading the selected data.",
-    route: "/request-curl-command",
-    title: "Download Study Data and Metadata (Curl Command)",
-  },
-};