chore: updated findable-ui to v14.0.0 (#3330) (#3331)

Co-authored-by: Fran McDade <[email protected]>

components/Consortia/CSER/components/DataIngestionChart/dataIngestionChart.tsx

@@ -247,7 +247,7 @@ const DataIngestionChart: FC = (): JSX.Element => {
 
     const zr = chart.current?.getEchartsInstance().getZr();
     zr?.on("mousemove", handleMouse);
-    return () => zr?.handler && zr.off("mousemove", handleMouse);
+    return (): void => zr?.handler && zr.off("mousemove", handleMouse);
   });
   return (
     <Card component={RoundedPaper}>

components/Events/components/Card/card.tsx

@@ -1,9 +1,9 @@
 import { CardText } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardText/cardText";
 import { CardTitle } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardTitle/cardTitle";
 import { FluidPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
-import { Card as MCard, CardActionArea } from "@mui/material";
+import { CardActionArea, Card as MCard } from "@mui/material";
 import Router from "next/router";
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { FrontmatterEvent } from "../../../../content/entities";
 import { CardContent, CardSection } from "./card.styles";
 import { getEventOverline, getEventTitle } from "./common/utils";

components/Events/components/Card/components/CardDate/cardDate.tsx

@@ -3,7 +3,6 @@ import {
   TEXT_HEADING_LARGE,
 } from "@databiosphere/findable-ui/lib/theme/common/typography";
 import { Typography } from "@mui/material";
-import React from "react";
 import { CardDate as Date } from "./cardDate.styles";
 
 interface CardDateProps {

components/Events/components/Card/components/CardOverline/cardOverline.tsx

@@ -1,7 +1,7 @@
 import { Dot } from "@databiosphere/findable-ui/lib/components/common/Dot/dot";
 import { TEXT_BODY_SMALL_400_2_LINES } from "@databiosphere/findable-ui/lib/theme/common/typography";
 import { Typography } from "@mui/material";
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import { CardOverline as Overline } from "./cardOverline.styles";
 
 interface CardOverlineProps {

components/Events/events.tsx

@@ -1,7 +1,6 @@
 import { Card as DXCard } from "@databiosphere/findable-ui/lib/components/common/Card/card";
 import { FluidPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
 import { Tabs } from "@databiosphere/findable-ui/lib/components/common/Tabs/tabs";
-import React from "react";
 import { FrontmatterEvent } from "../../content/entities";
 import { EVENTS_VIEW_TABS } from "./common/constants";
 import { Card } from "./components/Card/card";

components/Home/components/Section/components/SectionAnalysisPortals/components/AnalysisPortals/hooks/useIntersectionObserver.ts

@@ -28,7 +28,7 @@ export function useIntersectionObserver(
     if (ref.current?.lastElementChild) {
       observerRef.current.observe(ref.current.lastElementChild);
     }
-    return () => {
+    return (): void => {
       observerRef.current?.disconnect();
     };
   }, [onIntersection, ref]);

components/Home/components/Section/components/SectionAnalysisPortals/sectionAnalysisPortals.styles.ts

@@ -2,8 +2,8 @@ import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixi
 import { smokeLightest } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
 import styled from "@emotion/styled";
 import {
-  Section as DefaultSection,
   SectionLayout as DefaultLayout,
+  Section as DefaultSection,
 } from "../../section.styles";
 
 export const Section = styled(DefaultSection)`

components/Home/components/Section/components/SectionCloudEnvironment/components/CloudBenefits/cloudBenefits.styles.ts

@@ -4,8 +4,8 @@ import { textBody400 } from "@databiosphere/findable-ui/lib/styles/common/mixins
 import styled from "@emotion/styled";
 import {
   CardContent as DefaultContent,
-  CardSection as DefaultSection,
   Grid as DefaultGrid,
+  CardSection as DefaultSection,
   GridCard,
 } from "../../../../../Card/card.styles";
 

components/Home/components/Section/components/SectionCloudEnvironment/sectionCloudEnvironment.styles.ts

@@ -2,10 +2,10 @@ import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixi
 import { smokeLightest } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
 import styled from "@emotion/styled";
 import {
-  Section as DefaultSection,
-  sectionGrid,
   SectionHeadline as DefaultHeadline,
   SectionLayout as DefaultLayout,
+  Section as DefaultSection,
+  sectionGrid,
 } from "../../section.styles";
 
 export const Section = styled(DefaultSection)`

components/Home/components/Section/components/SectionDatasets/components/Datasets/components/Cards/cards.styles.ts

@@ -5,9 +5,9 @@ import {
 import styled from "@emotion/styled";
 import { Card as MCard } from "@mui/material";
 import {
+  GridCardContent as DefaultContent,
   CardSection as DefaultSection,
   GridCard,
-  GridCardContent as DefaultContent,
 } from "../../../../../../../Card/card.styles";
 
 export const Card = styled(GridCard)`

components/Home/components/Section/components/SectionDatasets/components/Metrics/metrics.tsx

@@ -1,9 +1,9 @@
 import { Divider } from "@mui/material";
 import {
   Count,
+  Metrics as DatasetMetrics,
   Label,
   Metric,
-  Metrics as DatasetMetrics,
 } from "./metrics.styles";
 
 export const Metrics = (): JSX.Element => {

components/Home/components/Section/components/SectionDatasets/sectionDatasets.styles.ts

@@ -2,9 +2,9 @@ import styled from "@emotion/styled";
 import { mediaTabletLargeUp } from "../../../../../../styles/common/mixins/breakpoints";
 import {
   SectionActions as DefaultActions,
-  sectionGrid,
   SectionHeadline as DefaultHeadline,
   SectionTitle as DefaultTitle,
+  sectionGrid,
 } from "../../section.styles";
 
 export const Headline = styled(DefaultHeadline)`

components/Home/components/Section/components/SectionHero/components/Carousel/components/Arrow/arrow.styles.ts

@@ -10,8 +10,8 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { IconButton as MIconButton } from "@mui/material";
 import {
-  SwipeAction,
   SWIPE_ACTION,
+  SwipeAction,
 } from "../../../../../../../../hooks/useSwipeInteraction/common/entities";
 import { MAX_DECK_SIZE } from "../../common/constants";
 import { getArrowTransform } from "../../common/utils";

components/Home/components/Section/components/SectionHero/sectionHero.styles.ts

@@ -7,9 +7,9 @@ import { textBodyLarge4002Lines } from "@databiosphere/findable-ui/lib/styles/co
 import styled from "@emotion/styled";
 import {
   SectionActions as DefaultActions,
-  sectionGrid,
   SectionHeadline as DefaultHeadline,
   SectionLayout as DefaultLayout,
+  sectionGrid,
 } from "../../section.styles";
 
 export const SectionLayout = styled(DefaultLayout)`

components/Home/components/Section/components/SectionPublications/components/Publications/components/Card/card.tsx

@@ -9,7 +9,7 @@ import { VISIBILITY_MODE_LABEL } from "../../../../../../../../common/constants"
 import { VISIBILITY_MODE } from "../../../../../../../../common/entities";
 import { updateVisibilityMode } from "../../../../../../../../common/utils";
 import { PublicationCard } from "../../../../common/entities";
-import { Card as GridCard, CardContent, CardSection } from "./card.styles";
+import { CardContent, CardSection, Card as GridCard } from "./card.styles";
 
 const MAX_AUTHORS = 5;
 

components/Home/components/Section/components/SectionUpdates/components/Updates/updates.styles.ts

@@ -3,8 +3,8 @@ import styled from "@emotion/styled";
 import { Card as MCard } from "@mui/material";
 import {
   CardContent as DefaultContent,
-  CardSection as DefaultSection,
   Grid as DefaultGrid,
+  CardSection as DefaultSection,
   GridCard,
 } from "../../../../../Card/card.styles";
 

components/Home/components/Section/components/SectionWorkspaces/sectionWorkspaces.styles.ts

@@ -1,9 +1,9 @@
 import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
 import styled from "@emotion/styled";
 import {
-  sectionGrid,
   SectionHeadline as DefaultHeadline,
   SectionLayout as DefaultLayout,
+  sectionGrid,
 } from "../../section.styles";
 
 export const SectionLayout = styled(DefaultLayout)`

components/Home/hooks/useSwipeInteraction/useSwipeInteraction.tsx

@@ -10,7 +10,7 @@ import {
   DEFAULT_ACTIVE_INDEX,
   DEFAULT_SWIPE_COORDINATES,
 } from "./common/constants";
-import { SwipeAction, SwipeCoordinates, SWIPE_ACTION } from "./common/entities";
+import { SWIPE_ACTION, SwipeAction, SwipeCoordinates } from "./common/entities";
 
 export interface InteractiveAction {
   onMouseDown: (mouseEvent: MouseEvent) => void;
@@ -127,7 +127,7 @@ export function useSwipeInteraction(
     const timeout = setTimeout(() => {
       onSwipeToIndex(1);
     }, swipeDelay);
-    return () => clearTimeout(timeout);
+    return (): void => clearTimeout(timeout);
   }, [activeIndex, swipeDelay, onSwipeToIndex]);
 
   if (!swipeEnabled) {

components/Layout/components/Content/content.styles.ts

@@ -48,17 +48,23 @@ const image = (props: ThemeProps) => css`
 const muiAlert = (props: ThemeProps) => css`
   .MuiAlert-root {
     margin: 24px 0;
-
-    &.MuiAlert-standardWarning {
-      margin: 16px 0;
-    }
+    padding: 24px;
 
     &:last-child {
       margin-bottom: 0;
     }
 
+    .MuiAlert-icon {
+      padding: 4px 0;
+    }
+
     .MuiAlert-message {
       ${textBodyLarge4002Lines(props)};
+      gap: 16px;
+
+      .MuiAlertTitle-root {
+        ${textHeadingSmall(props)};
+      }
 
       ol > li,
       ul > li {
@@ -73,14 +79,6 @@ const muiAlert = (props: ThemeProps) => css`
         }
       }
     }
-
-    .MuiAlert-message:first-of-type {
-      gap: 16px;
-
-      .MuiAlertTitle-root {
-        ${textHeadingSmall(props)};
-      }
-    }
   }
 `;
 

components/News/news.tsx

@@ -3,7 +3,7 @@ import { CardSecondaryText } from "@databiosphere/findable-ui/lib/components/com
 import { CardText } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardText/cardText";
 import { CardTitle } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardTitle/cardTitle";
 import { FluidPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
-import { Card as MCard, CardActionArea } from "@mui/material";
+import { CardActionArea, Card as MCard } from "@mui/material";
 import { useRouter } from "next/router";
 import { FrontmatterNews } from "../../content/entities";
 import { CardSection, NewsView } from "./news.styles";

components/Overview/components/Publications/publications.tsx

@@ -1,6 +1,6 @@
 import {
-  PublicationCard,
   PUBLICATION_CATEGORY,
+  PublicationCard,
 } from "../../../Home/components/Section/components/SectionPublications/common/entities";
 import { Card } from "../../../Home/components/Section/components/SectionPublications/components/Publications/components/Card/card";
 import { PublicationView } from "./publications.styles";

components/Search/components/Pagination/pagination.tsx

@@ -1,7 +1,6 @@
 import { IconButton } from "@databiosphere/findable-ui/lib/components/common/IconButton/iconButton";
 import EastRoundedIcon from "@mui/icons-material/EastRounded";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
-import React from "react";
 import { OnSearchFn, SearchPagination } from "../../hooks/common/entities";
 import { PaginationActions, PaginationView } from "./pagination.styles";
 

components/Search/components/Results/results.tsx

@@ -10,7 +10,6 @@ import { RoundedCard } from "@databiosphere/findable-ui/lib/components/common/Ca
 import { NoResults } from "@databiosphere/findable-ui/lib/components/NoResults/noResults";
 import { TEXT_BODY_SMALL_400 } from "@databiosphere/findable-ui/lib/theme/common/typography";
 import { Typography as MTypography } from "@mui/material";
-import React from "react";
 import { ResultsView } from "./results.styles";
 
 interface ResultsProps {

components/Search/search.tsx

@@ -1,7 +1,7 @@
 import { LoadingIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/LoadingIcon/loadingIcon";
 import { Tabs } from "@databiosphere/findable-ui/lib/components/common/Tabs/tabs";
 import { NoResults } from "@databiosphere/findable-ui/lib/components/NoResults/noResults";
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import { Heading } from "../common/Typography/components/Heading/heading";
 import { TABS } from "./common/constants";
 import { Pagination } from "./components/Pagination/pagination";

components/common/CustomIcon/components/CodePullRequestIcon/codePullRequestIcon.tsx

@@ -1,6 +1,5 @@
 import { CustomSVGIconProps } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/common/entities";
 import { SvgIcon } from "@mui/material";
-import React from "react";
 
 /**
  * Custom code pull request icon.

components/common/Typography/components/Heading/heading.tsx

@@ -1,7 +1,6 @@
 import { AnchorLink } from "@databiosphere/findable-ui/lib/components/common/AnchorLink/anchorLink";
 import { TEXT_HEADING_LARGE } from "@databiosphere/findable-ui/lib/theme/common/typography";
 import { Typography } from "@mui/material";
-import React from "react";
 import { slugifyHeading } from "../../../../../plugins/common/utils";
 
 export interface HeadingProps {

components/index.tsx

@@ -21,6 +21,7 @@ export { NavBarHero } from "@databiosphere/findable-ui/lib/components/Layout/com
 export { Nav } from "@databiosphere/findable-ui/lib/components/Layout/components/Nav/nav";
 export { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
 export { ContentView } from "@databiosphere/findable-ui/lib/views/ContentView/contentView";
+export { AlertTitle } from "@mui/material";
 export { Figure } from "./common/Figure/figure";
 export { NonBreakingSpace as NBS } from "./common/Typography/components/NonBreakingSpace/nonBreakingSpace";
 export { Subheader } from "./common/Typography/components/Subheader/subheader";

docs/common/constants.ts

@@ -12,6 +12,7 @@ export const DOC_SITE_FOLDER_NAME = "docs";
 
 export const MDX_COMPONENTS = {
   Alert: C.Alert,
+  AlertTitle: C.AlertTitle,
   AnVILPublications: C.AnVILPublications,
   AnalysisPortals: C.AnalysisPortals,
   AnchorLink: C.AnchorLink,

docs/guides.mdx

@@ -18,8 +18,11 @@ The guides below are meant to help you get started working on content. Please fe
 
 The content for the portal is located in the [/content](https://github.com/anvilproject/anvil-portal/tree/main/content) folder of the [anvil-portal](https://github.com/anvilproject/anvil-portal/tree/main) GitHub repository. Each page of the site, and some page components, are represented as [markdown](https://en.wikipedia.org/wiki/Markdown) files in this folder.
 
-<Alert severity="warning" title="Tip">
-We use the **main** branch of the repository as the base for modifying the content.
+<Alert severity="warning">
+  <AlertTitle>Tip</AlertTitle>
+
+  We use the **main** branch of the repository as the base for modifying the content.
+
 </Alert>
 
 ## Content Lifecycle

docs/guides/content/creating-a-new-page.mdx

@@ -26,8 +26,11 @@ Typically the folder structure mirrors the structure or the site. This is not st
   src="/consortia/guides/create-new-file.png"
 />
 
-<Alert severity="warning" title="Tip">
-Note that you can not create an empty directory using the GitHub interface. However you can create a directory while adding a file by adding the new directory name before the file name then hitting the "/" character.
+<Alert severity="warning">
+  <AlertTitle>Tip</AlertTitle>
+
+  Note that you can not create an empty directory using the GitHub interface. However you can create a directory while adding a file by adding the new directory name before the file name then hitting the "/" character.
+
 </Alert>
 
 <Figure
@@ -47,10 +50,14 @@ Metadata describing the page and indicating its publication date, and author are
    ---
 ```
 
-<Alert severity="warning" title="Tip">
-The front matter goes at the very top or each new page.
+<Alert severity="warning">
+  <AlertTitle>Tip</AlertTitle>
+
+  The front matter goes at the very top or each new page.
+
 </Alert>
 
+
 ## Add the Page Content
 
 With the front matter created, it is time to add the page content in markdown. See one of the many [markdown guides](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) on the internet.

docs/guides/content/creating-links.mdx

@@ -29,8 +29,11 @@ Putting this all together an internal link looks like:
 
 This renders as: [An Internal Link](/guides/content/editing-an-existing-page)
 
-<Alert severity="warning" title="Tip">
-Don't forget the leading slash "/" in the internal link paths.
+<Alert severity="warning">
+  <AlertTitle>Tip</AlertTitle>
+
+  Don't forget the leading slash "/" in the internal link paths.
+
 </Alert>
 
 ### Linking to an Internal Page Heading

docs/guides/content/using-images.mdx

@@ -44,8 +44,11 @@ This renders like:
   src="/consortia/guides/anvil-image.png"
 />
 
-<Alert severity="warning" title="Tip">
-You can check if the image link is correct by using the preview link in the markdown editor.
+<Alert severity="warning">
+  <AlertTitle>Tip</AlertTitle>
+
+  You can check if the image link is correct by using the preview link in the markdown editor.
+
 </Alert>
 
 ## Controlling Image Size

docs/learn/data-analysts/reproducible-research-with-anvilpublish.mdx

@@ -9,11 +9,12 @@ An exploration of elements of reproducible research with the AnVILPublish packag
 
 <Video url="https://youtu.be/19upPoqNpx0" />
 
-<Alert icon={false} severity="info" title="Notes">
+<Alert icon={false} severity="info">
+  <AlertTitle>Notes</AlertTitle>
 
-1. Visit the [course schedule](/events/bioconductor-popup-workshops-20210531#other-sessions) for links to the recorded session, and to other workshops in the series.
-1. The material below requires a billing account. We provide a billing account during the workshop, but if you're following along on your own see '[Next Steps](/learn/data-analysts/reproducible-research-with-anvilpublish#next-steps)' for how to create a billing account.
-1. Access to the workspaces we use may require registration; please [sign up](https://forms.gle/HCY2DM2QsuxAwdhv6) with your AnVIL email address.
+  1. Visit the [course schedule](/events/bioconductor-popup-workshops-20210531#other-sessions) for links to the recorded session, and to other workshops in the series.
+  1. The material below requires a billing account. We provide a billing account during the workshop, but if you're following along on your own see '[Next Steps](/learn/data-analysts/reproducible-research-with-anvilpublish#next-steps)' for how to create a billing account.
+  1. Access to the workspaces we use may require registration; please [sign up](https://forms.gle/HCY2DM2QsuxAwdhv6) with your AnVIL email address.
 
 </Alert>