@databiosphere/findable-ui 50.6.1 → 50.7.1

package/src/components/Layout/components/Header/header.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import logo from "../../../../images/logo.svg";
-import { DiscourseIcon } from "../../../common/CustomIcon/components/DiscourseIcon/discourseIcon";
-import { GitHubIcon } from "../../../common/CustomIcon/components/GitHubIcon/gitHubIcon";
-import { XIcon } from "../../../common/CustomIcon/components/XIcon/xIcon";
-import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
-import { Logo } from "./components/Content/components/Logo/logo";
-import { Header } from "./header";
-
-export default {
-  argTypes: {
-    authenticationEnabled: { control: "boolean" },
-    logo: { control: { disable: true } },
-    navLinks: { control: "array" },
-    searchEnabled: { control: "boolean" },
-    slogan: { control: "text" },
-    socialMedia: { control: { disable: true } },
-  },
-  component: Header,
-  parameters: {
-    layout: "fullscreen",
-  },
-  title: "Components/Layout/Header",
-} as Meta<typeof Header>;
-
-type Story = StoryObj<typeof Header>;
-
-const url = "/";
-
-export const HeaderStory: Story = {
-  args: {
-    authenticationEnabled: false,
-    logo: <Logo alt="Logo" height={40} link="/" src={logo.src} />,
-    navigation: [
-      undefined,
-      [
-        {
-          label: "Overview",
-          url,
-        },
-        {
-          label: "Learn",
-          url,
-        },
-        {
-          label: "Datasets",
-          url,
-        },
-        {
-          label: "More",
-          menuItems: [
-            {
-              label: "Team",
-              url,
-            },
-            {
-              label: "FAQ",
-              url,
-            },
-            {
-              label: "Help",
-              url,
-            },
-          ],
-          url: "",
-        },
-      ],
-      undefined,
-    ],
-    searchEnabled: true,
-    slogan: "Header Slogan",
-    socialMedia: {
-      socials: [
-        {
-          Icon: XIcon,
-          label: "X",
-          url: "https://twitter.com",
-        },
-        {
-          Icon: YouTubeIcon,
-          label: "YouTube",
-          url: "https://www.youtube.com",
-        },
-        {
-          Icon: DiscourseIcon,
-          label: "Discourse",
-          url: "https://www.discourse.org/",
-        },
-        {
-          Icon: GitHubIcon,
-          label: "GitHub",
-          url: "https://github.com",
-        },
-      ],
-    },
-  },
-};

package/src/components/Layout/components/Header/header.styles.ts

@@ -1,59 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { AppBar as MAppBar } from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-import { HEADER_HEIGHT } from "./common/constants";
-
-// See https://github.com/emotion-js/emotion/issues/1105.
-// See https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Fcache%4011.10.2.
-const ignoreSsrWarning =
-  "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */";
-
-export const AppBar = styled(MAppBar)`
-  border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
-
-  &.MuiPaper-elevation0 {
-    border-bottom: 1px solid transparent;
-  }
-
-  .MuiToolbar-root {
-    display: grid;
-    gap: 16px;
-    grid-template-areas: "left center right";
-    grid-template-columns: 1fr auto 1fr;
-    height: ${HEADER_HEIGHT}px;
-    min-height: unset;
-  }
-` as typeof MAppBar;
-
-const group = css`
-  align-items: center;
-  display: flex;
-  flex: 1;
-`;
-
-export const Left = styled.div`
-  ${group};
-  gap: 16px;
-  grid-area: left;
-  justify-content: flex-start;
-
-  .MuiButton-navPrimary {
-    &:first-child:not(style)${ignoreSsrWarning} { {
-      margin-left: 24px;
-    }
-  }
-`;
-
-export const Center = styled.div`
-  ${group};
-  grid-area: center;
-  justify-content: center;
-`;
-
-export const Right = styled.div`
-  ${group};
-  gap: 8px;
-  grid-area: right;
-  justify-content: flex-end;
-`;

package/src/components/Layout/components/Header/header.tsx

@@ -1,165 +0,0 @@
-import { Fade, Toolbar } from "@mui/material";
-import { usePathname } from "next/navigation";
-import { JSX, ReactNode } from "react";
-import { SELECTOR } from "../../../../common/selectors";
-import { ComponentsConfig } from "../../../../config/entities";
-import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
-import {
-  APP_BAR_PROPS,
-  FADE_TRANSITION_PROPS,
-  TOOLBAR_PROPS,
-} from "./common/constants";
-import { Navigation, SocialMedia } from "./common/entities";
-import { Announcements } from "./components/Announcements/announcements";
-import { Actions } from "./components/Content/components/Actions/actions";
-import {
-  Authentication,
-  renderButton as renderAuthenticationButton,
-  renderIconButton as renderAuthenticationIconButton,
-} from "./components/Content/components/Actions/components/Authentication/authentication";
-import { Menu } from "./components/Content/components/Actions/components/Menu/menu";
-import {
-  renderButton as renderSearchButton,
-  renderIconButton as renderSearchIconButton,
-  Search,
-} from "./components/Content/components/Actions/components/Search/search";
-import { NAVIGATION_TEST_ID } from "./components/Content/components/Navigation/constants";
-import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
-import { Slogan } from "./components/Content/components/Slogan/slogan";
-import { Divider } from "./components/Content/components/Slogan/slogan.styles";
-import { Socials } from "./components/Content/components/Socials/socials.styles";
-import { AppBar, Center, Left, Right } from "./header.styles";
-import { useHeaderNavigation } from "./hooks/useHeaderNavigation";
-import { useHeaderVisibility } from "./hooks/useHeaderVisibility";
-import { useMenu } from "./hooks/useMenu";
-
-export interface HeaderProps {
-  actions?: ReactNode;
-  announcements?: ComponentsConfig;
-  authenticationEnabled?: boolean;
-  className?: string;
-  logo: ReactNode;
-  navigation?: Navigation;
-  searchEnabled?: boolean;
-  searchURL?: string;
-  slogan?: ReactNode;
-  socialMedia?: SocialMedia;
-}
-
-export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
-  const { navigation } = useHeaderNavigation(headerProps);
-  const { isIn } = useHeaderVisibility({ ...headerProps, navigation });
-  const { headerRef } = useLayoutDimensions();
-  const { onClose, onOpen, open } = useMenu();
-  const pathname = usePathname() ?? "";
-  const {
-    actions,
-    announcements,
-    authenticationEnabled,
-    className,
-    logo,
-    searchEnabled,
-    searchURL,
-    slogan,
-    socialMedia,
-  } = headerProps;
-  const [navItemsL, navItemsC, navItemsR] = navigation;
-  const navigationProps = {
-    headerProps: { ...headerProps, navigation },
-    pathname,
-  };
-  return (
-    <AppBar
-      {...APP_BAR_PROPS}
-      className={className}
-      id={SELECTOR.HEADER}
-      ref={headerRef}
-    >
-      {/* Announcements */}
-      <Announcements announcements={announcements} />
-      {/* Toolbar */}
-      <Toolbar {...TOOLBAR_PROPS}>
-        {/* Left group */}
-        <Fade {...FADE_TRANSITION_PROPS} in={isIn.isLeftGroupIn}>
-          <Left>
-            {/* Logo */}
-            {logo}
-            {/* Divider */}
-            {isIn.isSloganIn && <Divider flexItem orientation="vertical" />}
-            {/* Slogan */}
-            {isIn.isSloganIn && <Slogan slogan={slogan} />}
-            {/* Left navigation */}
-            {isIn.isLeftNavigationIn && (
-              <DXNavigation {...navigationProps} links={navItemsL} />
-            )}
-          </Left>
-        </Fade>
-        {/* Center group */}
-        <Fade {...FADE_TRANSITION_PROPS} in={isIn.isCenterGroupIn}>
-          <Center>
-            {/* Center navigation */}
-            {isIn.isCenterNavigationIn && (
-              <DXNavigation
-                {...navigationProps}
-                testId={NAVIGATION_TEST_ID}
-                links={navItemsC}
-              />
-            )}
-          </Center>
-        </Fade>
-        {/* Right group */}
-        <Fade {...FADE_TRANSITION_PROPS} in={isIn.isRightGroupIn}>
-          <Right>
-            {/* Navigation */}
-            {isIn.isRightNavigationIn && (
-              <DXNavigation {...navigationProps} links={navItemsR} />
-            )}
-            {/* Socials */}
-            {isIn.isSocialsIn && (
-              <Socials
-                buttonSize="small"
-                socials={socialMedia?.socials || []}
-              />
-            )}
-            {/* Actions */}
-            {isIn.isActionsIn && (
-              <Actions>
-                {/* Search */}
-                <Search
-                  Button={({ ...props }): JSX.Element =>
-                    isIn.isMenuIn
-                      ? renderSearchIconButton(props)
-                      : renderSearchButton(props)
-                  }
-                  closeMenu={onClose}
-                  searchEnabled={searchEnabled}
-                  searchURL={searchURL}
-                />
-                {/* Authentication */}
-                <Authentication
-                  Button={({ ...props }): JSX.Element =>
-                    isIn.isMenuIn
-                      ? renderAuthenticationIconButton(props)
-                      : renderAuthenticationButton(props, pathname)
-                  }
-                  authenticationEnabled={authenticationEnabled}
-                  closeMenu={onClose}
-                />
-                {/* Additional actions i.e. call-to-action button */}
-                {actions}
-                {/* Menu */}
-                <Menu
-                  {...navigationProps}
-                  closeMenu={onClose}
-                  isMenuIn={isIn.isMenuIn}
-                  open={open}
-                  openMenu={onOpen}
-                />
-              </Actions>
-            )}
-          </Right>
-        </Fade>
-      </Toolbar>
-    </AppBar>
-  );
-};

package/src/components/Layout/components/Header/hooks/useHeaderNavigation.ts

@@ -1,19 +0,0 @@
-import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
-import { getNavigationLinks } from "../common/utils";
-import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
-import { HeaderProps } from "../header";
-
-export interface UseHeaderNavigation {
-  navigation: [NavLinkItem[], NavLinkItem[], NavLinkItem[]];
-}
-
-export const useHeaderNavigation = (
-  headerProps: HeaderProps,
-): UseHeaderNavigation => {
-  const { breakpoint } = useBreakpoint();
-  const { navigation: [navL, navC, navR] = [] } = headerProps;
-  const navItemsL = getNavigationLinks(navL, breakpoint);
-  const navItemsC = getNavigationLinks(navC, breakpoint);
-  const navItemsR = getNavigationLinks(navR, breakpoint);
-  return { navigation: [navItemsL, navItemsC, navItemsR] };
-};

package/src/components/Layout/components/Header/hooks/useHeaderVisibility.ts

@@ -1,81 +0,0 @@
-import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
-import { isSocialsVisible } from "../common/utils";
-import { HeaderProps } from "../header";
-
-export interface UseHeaderVisibility {
-  isIn: {
-    isActionsIn: boolean;
-    isCenterGroupIn: boolean;
-    isCenterNavigationIn: boolean;
-    isLeftGroupIn: boolean;
-    isLeftNavigationIn: boolean;
-    isMenuIn: boolean;
-    isRightGroupIn: boolean;
-    isRightNavigationIn: boolean;
-    isSloganIn: boolean;
-    isSocialsIn: boolean;
-  };
-}
-
-/**
- * Returns header component visibility for header related rendering logic.
- * @param headerProps - Header component props.
- * @returns header component visibility.
- */
-export const useHeaderVisibility = (
-  headerProps: HeaderProps,
-): UseHeaderVisibility => {
-  const { breakpoint, lgUp, mdUp, smDown, smUp } = useBreakpoint();
-  // Header configuration.
-  const {
-    actions,
-    authenticationEnabled,
-    logo,
-    navigation: [navItemsL, navItemsC, navItemsR] = [],
-    searchEnabled,
-    slogan,
-    socialMedia,
-  } = headerProps;
-  // Breakpoint.
-  const hasBreakpoint = Boolean(breakpoint);
-  // Header content.
-  const hasActions = Boolean(actions);
-  const hasLogo = Boolean(logo);
-  const hasMenu = smDown;
-  const hasNavItemsC = Boolean(navItemsC && navItemsC.length > 0);
-  const hasNavItemsL = Boolean(navItemsL && navItemsL.length > 0);
-  const hasNavItemsR = Boolean(navItemsR && navItemsR.length > 0);
-  const hasSlogan = Boolean(slogan);
-  const hasSocials = Boolean(socialMedia);
-  // Determines header content visibility.
-  const isActionsIn =
-    (hasActions || searchEnabled || authenticationEnabled || hasMenu) &&
-    hasBreakpoint;
-  const isNavigationIn = smUp;
-  const isMenuIn = hasMenu;
-  const isSloganIn = hasSlogan && mdUp;
-  const isSocialsIn =
-    hasSocials && isSocialsVisible({ breakpoint, lgUp }, socialMedia);
-  // Determines navigation visibility.
-  const isCenterNavigationIn = isNavigationIn && hasNavItemsC;
-  const isLeftNavigationIn = isNavigationIn && hasNavItemsL;
-  const isRightNavigationIn = isNavigationIn && hasNavItemsR;
-  // Determines group visibility.
-  const isLeftGroupIn = hasLogo || isSloganIn || isLeftNavigationIn;
-  const isCenterGroupIn = isCenterNavigationIn;
-  const isRightGroupIn = isRightNavigationIn || isSocialsIn || isActionsIn;
-  return {
-    isIn: {
-      isActionsIn,
-      isCenterGroupIn,
-      isCenterNavigationIn,
-      isLeftGroupIn,
-      isLeftNavigationIn,
-      isMenuIn,
-      isRightGroupIn,
-      isRightNavigationIn,
-      isSloganIn,
-      isSocialsIn,
-    },
-  };
-};

package/src/components/Layout/components/Header/hooks/useMenu.ts

@@ -1,27 +0,0 @@
-import { useCallback, useState } from "react";
-
-export interface UseMenu {
-  onClose: () => void;
-  onOpen: () => void;
-  open: boolean;
-}
-
-/**
- * Menu functionality for menu dropdown.
- * @returns menu functionality.
- */
-export const useMenu = (): UseMenu => {
-  const [open, setOpen] = useState<boolean>(false);
-
-  // Closes menu.
-  const onClose = useCallback((): void => {
-    setOpen(false);
-  }, []);
-
-  // Opens menu.
-  const onOpen = useCallback((): void => {
-    setOpen(true);
-  }, []);
-
-  return { onClose, onOpen, open };
-};

package/src/components/Layout/components/Main/main.styles.ts

@@ -1,20 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-
-interface Props {
-  offset: number;
-}
-
-const main = css`
-  align-items: flex-start;
-  display: flex;
-  flex: 1;
-`;
-
-export const Main = styled("main")`
-  ${main};
-`;
-
-export const MainWithOffset = styled(Main)<Props>`
-  margin-top: ${({ offset }) => offset}px;
-`;

package/src/components/Layout/components/Main/main.tsx

@@ -1,17 +0,0 @@
-import { JSX, ReactNode } from "react";
-import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
-import { MainWithOffset } from "./main.styles";
-
-export interface MainProps {
-  children: ReactNode | ReactNode[];
-  className?: string;
-}
-
-export const Main = ({ children, className }: MainProps): JSX.Element => {
-  const { dimensions } = useLayoutDimensions();
-  return (
-    <MainWithOffset className={className} offset={dimensions.header.height}>
-      {children}
-    </MainWithOffset>
-  );
-};

package/src/components/Layout/components/Nav/components/NavBarHero/navBarHero.styles.ts

@@ -1,26 +0,0 @@
-import styled from "@emotion/styled";
-import { PALETTE } from "../../../../../../styles/common/constants/palette";
-
-export const NavBarHero = styled.div`
-  display: grid;
-  gap: 8px 0;
-  grid-auto-flow: row;
-  justify-items: flex-start;
-`;
-
-export const HeroLogo = styled.span`
-  line-height: 0;
-
-  img {
-    display: inline-block;
-    margin: 0;
-    width: auto;
-  }
-`;
-
-export const HeroText = styled.span`
-  color: ${PALETTE.INK_LIGHT};
-  display: block;
-  font-size: 12px;
-  line-height: 18px;
-`;

package/src/components/Layout/components/Nav/components/NavBarHero/navBarHero.tsx

@@ -1,43 +0,0 @@
-import { Divider } from "@mui/material";
-import { JSX } from "react";
-import {
-  StaticImage,
-  StaticImageProps,
-} from "../../../../../common/StaticImage/staticImage";
-import {
-  NavBarHero as Hero,
-  HeroText,
-  HeroLogo as Logo,
-} from "./navBarHero.styles";
-
-export interface NavBarHeroProps {
-  byline?: string;
-  logo?: StaticImageProps;
-  slogan?: string;
-}
-
-export const NavBarHero = ({
-  byline,
-  logo,
-  slogan,
-}: NavBarHeroProps): JSX.Element => {
-  const showHero = byline || logo || slogan;
-  return (
-    <>
-      {showHero && (
-        <>
-          <Hero>
-            {logo && (
-              <Logo>
-                <StaticImage {...logo} />
-              </Logo>
-            )}
-            {slogan && <HeroText>{slogan}</HeroText>}
-            {byline && <HeroText>{byline}</HeroText>}
-          </Hero>
-          <Divider />
-        </>
-      )}
-    </>
-  );
-};

package/src/components/Layout/components/Nav/nav.stories.tsx

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { Nav } from "./nav";
-
-export default {
-  component: Nav,
-  parameters: {
-    layout: "fullscreen",
-  },
-  title: "Components/Layout/Nav",
-} as Meta<typeof Nav>;
-
-type Story = StoryObj<typeof Nav>;
-
-export const NavStory: Story = {
-  args: {
-    navigation: [
-      { label: "Learning AnVIL", url: "" },
-      { active: true, label: "Getting Started", url: "/" },
-      { label: "Guides and Tutorials", url: "/" },
-      { label: "Introduction to Terra", url: "/" },
-      { label: "Introduction to Gen3", url: "/" },
-      { label: "Introduction to Dockstore", url: "/" },
-      { label: "Understanding Cloud Costs", url: "/" },
-      { label: "Account Setup", url: "" },
-      { label: "Overview of Account Setup", url: "/" },
-      { label: "Obtaining a Google ID", url: "/" },
-      { label: "Creating a Terra Account", url: "/" },
-      { label: "Billing Setup", url: "" },
-      { label: "Overview of Billing Concepts", url: "/" },
-      { label: "Creating a Google Cloud Billing Account", url: "/" },
-      { label: "Accessing Data", url: "" },
-      { label: "Discovering Data", url: "/" },
-      { label: "Requesting Data Access", url: "/" },
-    ],
-  },
-};

package/src/components/Layout/components/Nav/nav.styles.ts

@@ -1,59 +0,0 @@
-import styled from "@emotion/styled";
-import { List as MList } from "@mui/material";
-import { FONT } from "../../../../styles/common/constants/font";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-
-export const NavBar = styled.div`
-  .MuiDivider-root {
-    margin: 20px 0;
-  }
-`;
-
-export const List = styled(MList)`
-  display: grid;
-  gap: 12px;
-  padding: 0;
-
-  .MuiListItem-root {
-    margin: 0;
-    padding: 0;
-
-    .MuiListItemButton-root {
-      flex: 1;
-      padding: 0;
-
-      &:hover {
-        background-color: transparent;
-      }
-
-      .MuiListItemText-root {
-        font: ${FONT.BODY_400};
-      }
-
-      &.Mui-disabled {
-        color: ${PALETTE.INK_LIGHT};
-        margin-top: 20px;
-        opacity: 1;
-
-        .MuiListItemText-root {
-          font: ${FONT.UPPERCASE_500};
-          text-transform: uppercase;
-        }
-      }
-
-      &.Mui-selected {
-        color: ${PALETTE.PRIMARY_MAIN};
-
-        .MuiListItemText-root {
-          font: ${FONT.BODY_500};
-        }
-      }
-    }
-
-    &:first-of-type {
-      .MuiListItemButton-root.Mui-disabled {
-        margin-top: 0;
-      }
-    }
-  }
-`;