@databiosphere/findable-ui 50.4.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 (10) hide show
  1. package/.release-please-manifest.json +1 -1
  2. package/CHANGELOG.md +12 -0
  3. package/lib/components/Export/components/ExportMethod/exportMethod.d.ts +2 -1
  4. package/lib/components/Export/components/ExportMethod/exportMethod.js +4 -3
  5. package/lib/components/Export/components/ExportMethod/exportMethod.styles.js +21 -10
  6. package/lib/components/Export/components/ExportMethod/stories/exportMethod.stories.js +4 -3
  7. package/package.json +1 -1
  8. package/src/components/Export/components/ExportMethod/exportMethod.styles.ts +21 -10
  9. package/src/components/Export/components/ExportMethod/exportMethod.tsx +30 -18
  10. package/src/components/Export/components/ExportMethod/stories/exportMethod.stories.tsx +10 -3
package/.release-please-manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- ".": "50.4.0"
2
+ ".": "50.5.0"
3
3
  }
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Changelog
2
2
 
3
+ ## [50.5.0](https://github.com/DataBiosphere/findable-ui/compare/v50.4.0...v50.5.0) (2026-04-02)
4
+
5
+
6
+ ### Features
7
+
8
+ * 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))
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * 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))
14
+
3
15
  ## [50.4.0](https://github.com/DataBiosphere/findable-ui/compare/v50.3.0...v50.4.0) (2026-03-30)
4
16
 
5
17
 
package/lib/components/Export/components/ExportMethod/exportMethod.d.ts CHANGED
@@ -3,8 +3,9 @@ import { TrackingProps } from "../../../types";
3
3
  export interface ExportMethodProps extends TrackingProps {
4
4
  description: ReactNode;
5
5
  footnote?: ReactNode;
6
+ icon?: ReactNode;
6
7
  isAccessible?: boolean;
7
8
  route: string;
8
9
  title: string;
9
10
  }
10
- export declare const ExportMethod: ({ description, footnote, isAccessible, route, title, trackingId, }: ExportMethodProps) => JSX.Element;
11
+ export declare const ExportMethod: ({ description, footnote, icon, isAccessible, route, title, trackingId, }: ExportMethodProps) => JSX.Element;
package/lib/components/Export/components/ExportMethod/exportMethod.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { ChevronRightRounded } from "@mui/icons-material";
3
- import { CardActionArea, CardActions, CardContent, Tooltip, Typography, } from "@mui/material";
3
+ import { CardActionArea, CardActions, CardContent, Stack, Tooltip, Typography, } from "@mui/material";
4
4
  import Link from "next/link";
5
5
  import { useDownloadStatus } from "../../../../hooks/useDownloadStatus";
6
+ import { STACK_PROPS } from "../../../../styles/common/mui/stack";
6
7
  import { SVG_ICON_PROPS } from "../../../../styles/common/mui/svgIcon";
7
8
  import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
8
9
  import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
9
10
  import { StyledCard } from "./exportMethod.styles";
10
- export const ExportMethod = ({ description, footnote, isAccessible = true, route, title, trackingId, }) => {
11
+ export const ExportMethod = ({ description, footnote, icon, isAccessible = true, route, title, trackingId, }) => {
11
12
  const { disabled, message } = useDownloadStatus();
12
- 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 }) })] }) }) }));
13
+ 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 }) })] }) }));
13
14
  };
package/lib/components/Export/components/ExportMethod/exportMethod.styles.js CHANGED
@@ -1,28 +1,39 @@
1
1
  import styled from "@emotion/styled";
2
2
  import { Card } from "@mui/material";
3
+ import { PALETTE } from "../../../../styles/common/constants/palette";
3
4
  import { sectionPadding } from "../../../common/Section/section.styles";
4
5
  export const StyledCard = styled(Card) `
6
+ ${sectionPadding};
7
+ display: grid;
8
+ gap: 16px;
9
+ grid-template-columns: 1fr auto;
10
+ position: relative; /* positions card action area */
11
+
5
12
  .MuiCardActionArea-root {
6
- display: grid;
7
- gap: 16px;
8
- grid-template-columns: 1fr auto;
9
- ${sectionPadding};
13
+ inset: 0;
14
+ position: absolute; /* covers entire card */
10
15
  text-decoration: none;
11
16
 
12
17
  &.Mui-disabled {
18
+ background-color: ${PALETTE.COMMON_WHITE};
13
19
  opacity: 0.6;
14
20
  }
21
+ }
15
22
 
16
23
  .MuiCardContent-root {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: 4px;
17
27
  padding: 0;
18
-
19
- h3 {
20
- margin-bottom: 4px;
21
- }
22
28
  }
23
29
 
24
- .MuiCardActions-root {
25
- padding: 0;
30
+ a {
31
+ position: relative;
32
+ z-index: 1; /* Elevates links above the absolutely positioned CardActionArea overlay. */
26
33
  }
27
34
  }
35
+
36
+ .MuiCardActions-root {
37
+ padding: 0;
38
+ }
28
39
  `;
package/lib/components/Export/components/ExportMethod/stories/exportMethod.stories.js CHANGED
@@ -1,7 +1,8 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
2
  import { ExportMethod } from "../exportMethod";
2
3
  const meta = {
3
4
  argTypes: {
4
- description: { control: "text" },
5
+ description: { control: false },
5
6
  route: { control: "text" },
6
7
  title: { control: "text" },
7
8
  },
@@ -10,8 +11,8 @@ const meta = {
10
11
  export default meta;
11
12
  export const ExportMethodStory = {
12
13
  args: {
13
- description: "Obtain a curl command for downloading the selected data.",
14
- route: "/request-curl-command",
14
+ 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" })] })),
15
+ route: "/export",
15
16
  title: "Download Study Data and Metadata (Curl Command)",
16
17
  },
17
18
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@databiosphere/findable-ui",
3
- "version": "50.4.0",
3
+ "version": "50.5.0",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
package/src/components/Export/components/ExportMethod/exportMethod.styles.ts CHANGED
@@ -1,29 +1,40 @@
1
1
  import styled from "@emotion/styled";
2
2
  import { Card } from "@mui/material";
3
+ import { PALETTE } from "../../../../styles/common/constants/palette";
3
4
  import { sectionPadding } from "../../../common/Section/section.styles";
4
5
 
5
6
  export const StyledCard = styled(Card)`
7
+ ${sectionPadding};
8
+ display: grid;
9
+ gap: 16px;
10
+ grid-template-columns: 1fr auto;
11
+ position: relative; /* positions card action area */
12
+
6
13
  .MuiCardActionArea-root {
7
- display: grid;
8
- gap: 16px;
9
- grid-template-columns: 1fr auto;
10
- ${sectionPadding};
14
+ inset: 0;
15
+ position: absolute; /* covers entire card */
11
16
  text-decoration: none;
12
17
 
13
18
  &.Mui-disabled {
19
+ background-color: ${PALETTE.COMMON_WHITE};
14
20
  opacity: 0.6;
15
21
  }
22
+ }
16
23
 
17
24
  .MuiCardContent-root {
25
+ display: flex;
26
+ flex-direction: column;
27
+ gap: 4px;
18
28
  padding: 0;
19
-
20
- h3 {
21
- margin-bottom: 4px;
22
- }
23
29
  }
24
30
 
25
- .MuiCardActions-root {
26
- padding: 0;
31
+ a {
32
+ position: relative;
33
+ z-index: 1; /* Elevates links above the absolutely positioned CardActionArea overlay. */
27
34
  }
28
35
  }
36
+
37
+ .MuiCardActions-root {
38
+ padding: 0;
39
+ }
29
40
  ` as typeof Card;
package/src/components/Export/components/ExportMethod/exportMethod.tsx CHANGED
@@ -3,12 +3,14 @@ import {
3
3
  CardActionArea,
4
4
  CardActions,
5
5
  CardContent,
6
+ Stack,
6
7
  Tooltip,
7
8
  Typography,
8
9
  } from "@mui/material";
9
10
  import Link from "next/link";
10
11
  import { JSX, ReactNode } from "react";
11
12
  import { useDownloadStatus } from "../../../../hooks/useDownloadStatus";
13
+ import { STACK_PROPS } from "../../../../styles/common/mui/stack";
12
14
  import { SVG_ICON_PROPS } from "../../../../styles/common/mui/svgIcon";
13
15
  import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
14
16
  import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
@@ -18,6 +20,7 @@ import { StyledCard } from "./exportMethod.styles";
18
20
  export interface ExportMethodProps extends TrackingProps {
19
21
  description: ReactNode;
20
22
  footnote?: ReactNode;
23
+ icon?: ReactNode;
21
24
  isAccessible?: boolean;
22
25
  route: string;
23
26
  title: string;
@@ -26,6 +29,7 @@ export interface ExportMethodProps extends TrackingProps {
26
29
  export const ExportMethod = ({
27
30
  description,
28
31
  footnote,
32
+ icon,
29
33
  isAccessible = true,
30
34
  route,
31
35
  title,
@@ -36,38 +40,46 @@ export const ExportMethod = ({
36
40
  <Tooltip arrow title={message}>
37
41
  <StyledCard component={FluidPaper} elevation={1}>
38
42
  <CardActionArea
43
+ aria-label={title}
39
44
  component={Link}
40
45
  disabled={disabled || !isAccessible}
41
46
  href={route}
42
47
  id={trackingId}
43
- >
44
- <CardContent>
48
+ />
49
+ <CardContent>
50
+ <Stack
51
+ alignItems={STACK_PROPS.ALIGN_ITEMS.FLEX_START}
52
+ direction={STACK_PROPS.DIRECTION.ROW}
53
+ gap={2}
54
+ useFlexGap
55
+ >
56
+ {icon}
45
57
  <Typography
46
58
  component="h3"
47
59
  variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_XSMALL}
48
60
  >
49
61
  {title}
50
62
  </Typography>
63
+ </Stack>
64
+ <Typography
65
+ component="div"
66
+ variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
67
+ >
68
+ {description}
69
+ </Typography>
70
+ {footnote && (
51
71
  <Typography
72
+ color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
52
73
  component="div"
53
- variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
74
+ variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
54
75
  >
55
- {description}
76
+ {footnote}
56
77
  </Typography>
57
- {footnote && (
58
- <Typography
59
- color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
60
- component="div"
61
- variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
62
- >
63
- {footnote}
64
- </Typography>
65
- )}
66
- </CardContent>
67
- <CardActions>
68
- <ChevronRightRounded color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />
69
- </CardActions>
70
- </CardActionArea>
78
+ )}
79
+ </CardContent>
80
+ <CardActions>
81
+ <ChevronRightRounded color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />
82
+ </CardActions>
71
83
  </StyledCard>
72
84
  </Tooltip>
73
85
  );
package/src/components/Export/components/ExportMethod/stories/exportMethod.stories.tsx CHANGED
@@ -3,7 +3,7 @@ import { ExportMethod } from "../exportMethod";
3
3
 
4
4
  const meta: Meta<typeof ExportMethod> = {
5
5
  argTypes: {
6
- description: { control: "text" },
6
+ description: { control: false },
7
7
  route: { control: "text" },
8
8
  title: { control: "text" },
9
9
  },
@@ -16,8 +16,15 @@ type Story = StoryObj<typeof meta>;
16
16
 
17
17
  export const ExportMethodStory: Story = {
18
18
  args: {
19
- description: "Obtain a curl command for downloading the selected data.",
20
- route: "/request-curl-command",
19
+ description: (
20
+ <div>
21
+ Obtain a curl command for downloading the selected data.{" "}
22
+ <a href="/learn-more" rel="noopener noreferrer" target="_blank">
23
+ Learn more
24
+ </a>
25
+ </div>
26
+ ),
27
+ route: "/export",
21
28
  title: "Download Study Data and Metadata (Curl Command)",
22
29
  },
23
30
  };