@databiosphere/findable-ui 37.0.0 → 38.0.0

package/src/components/Index/components/EntityView/components/layout/Summary/summary.tsx

@@ -0,0 +1,34 @@
+import { Typography } from "@mui/material";
+import React, { Fragment } from "react";
+import { useSummary } from "../../../../../../../hooks/useSummary";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+import { BaseComponentProps } from "../../../../../../types";
+import { GRID_PROPS } from "./constants";
+import { StyledDot, StyledGrid } from "./summary.styles";
+
+export const Summary = ({
+  className,
+}: BaseComponentProps): JSX.Element | null => {
+  const { summaries } = useSummary() || {};
+
+  if (!summaries) return null;
+
+  return (
+    <StyledGrid {...GRID_PROPS} className={className}>
+      {summaries.map(([count, label], i) => (
+        <Fragment key={i}>
+          {i !== 0 && <StyledDot />}
+          <Typography variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_500}>
+            {count}
+          </Typography>
+          <Typography
+            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+            variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
+          >
+            {label}
+          </Typography>
+        </Fragment>
+      ))}
+    </StyledGrid>
+  );
+};

package/src/components/Index/components/EntityView/components/layout/Title/title.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { Title as CommonTitle } from "../../../../../../common/Title/title";
+import { BaseComponentProps } from "../../../../../../types";
+
+export const Title = ({
+  className,
+}: BaseComponentProps): JSX.Element | null => {
+  const { entityConfig } = useConfig();
+  const { ui } = entityConfig;
+  const { title } = ui || {};
+
+  if (!title) return null;
+
+  return <CommonTitle className={className}>{title}</CommonTitle>;
+};

package/src/components/Index/components/EntityView/components/navigation/Tabs/common/utils.ts

@@ -0,0 +1,25 @@
+import { EntityConfig } from "../../../../../../../../config/entities";
+import { Tab } from "../../../../../../../common/Tabs/tabs";
+
+/**
+ * Returns entity list tabs list for the tabs component.
+ * @param entities - Entities config.
+ * @returns tabs list.
+ */
+export function getEntityListTabs(entities: EntityConfig[]): Tab[] {
+  return entities.map(
+    ({
+      annotation,
+      label,
+      route,
+      tabIcon: icon,
+      tabIconPosition: iconPosition,
+    }) => ({
+      annotation,
+      icon,
+      iconPosition,
+      label,
+      value: route,
+    })
+  );
+}

package/src/components/Index/components/EntityView/components/navigation/Tabs/tabs.styles.ts

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import { Tabs } from "../../../../../../common/Tabs/tabs";
+
+export const StyledTabs = styled(Tabs)`
+  box-shadow: none;
+  flex: 1;
+
+  .MuiTabs-scroller {
+    padding: 0;
+  }
+
+  .MuiTabs-indicator {
+    z-index: 4; /* required; positions indicator above list view hero box-shadow */
+  }
+
+  .MuiTab-root {
+    line-height: 32px;
+    margin: 0;
+  }
+`;

package/src/components/Index/components/EntityView/components/navigation/Tabs/tabs.tsx

@@ -0,0 +1,28 @@
+import Router from "next/router";
+import React, { useCallback, useMemo } from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { useExploreState } from "../../../../../../../hooks/useExploreState";
+import { TabValue } from "../../../../../../common/Tabs/tabs";
+import { getEntityListTabs } from "./common/utils";
+import { StyledTabs } from "./tabs.styles";
+
+export const Tabs = (): JSX.Element | null => {
+  const { config, entityConfig } = useConfig();
+  const { exploreState } = useExploreState();
+  const { entities } = config;
+  const { tabValue } = exploreState;
+  const { ui } = entityConfig;
+  const { enableTabs } = ui || {};
+
+  // Builds the tabs.
+  const tabs = useMemo(() => getEntityListTabs(entities), [entities]);
+
+  const onTabChange = useCallback(async (tabValue: TabValue): Promise<void> => {
+    await Router.push(`/${tabValue}`);
+  }, []);
+
+  // Returns null if tabs are disabled.
+  if (!enableTabs) return null;
+
+  return <StyledTabs onTabChange={onTabChange} tabs={tabs} value={tabValue} />;
+};

package/src/components/Index/components/EntityView/components/slots/EntityListSlot/entityListSlot.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { ComponentCreator } from "../../../../../../ComponentCreator/ComponentCreator";
+
+export const EntityListSlot = (): JSX.Element | null => {
+  const { entityConfig } = useConfig();
+  const { ui } = entityConfig;
+  const { slots } = ui || {};
+  const { entityListSlot } = slots || {};
+
+  if (!entityListSlot) return null;
+
+  return <ComponentCreator components={entityListSlot} response={undefined} />;
+};

package/src/components/Index/components/EntityView/components/slots/EntityViewSlot/entityViewSlot.styles.ts

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+import { mediaTabletDown } from "../../../../../../../styles/common/mixins/breakpoints";
+
+export const StyledGrid = styled(Grid)`
+  display: grid;
+  gap: 16px;
+  margin: 16px;
+
+  &:empty {
+    display: none;
+  }
+
+  ${mediaTabletDown} {
+    margin: 16px 0;
+  }
+`;

package/src/components/Index/components/EntityView/components/slots/EntityViewSlot/entityViewSlot.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { ComponentCreator } from "../../../../../../ComponentCreator/ComponentCreator";
+import { StyledGrid } from "./entityViewSlot.styles";
+
+export const EntityViewSlot = (): JSX.Element | null => {
+  const { entityConfig } = useConfig();
+  const { ui } = entityConfig;
+  const { slots } = ui || {};
+  const { entityViewSlot } = slots || {};
+
+  if (!entityViewSlot) return null;
+
+  return (
+    <StyledGrid>
+      <ComponentCreator components={entityViewSlot} response={undefined} />
+    </StyledGrid>
+  );
+};

package/src/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/chartView.styles.ts

@@ -1,10 +1,11 @@
 import styled from "@emotion/styled";
 import { Grid } from "@mui/material";
-import { GridPaperSection } from "../../../../../common/Section/section.styles";
+import { GridPaperSection } from "../../../../../../common/Section/section.styles";
 
 export const StyledGrid = styled(Grid)`
   display: grid;
   gap: inherit;
+  overflow-y: auto;
 `;
 
 export const StyledGridPaperSection = styled(GridPaperSection)`

package/src/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/chartView.tsx

@@ -1,7 +1,12 @@
 import { Typography } from "@mui/material";
 import React, { Fragment } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
-import { Loading, LOADING_PANEL_STYLE } from "../../../../../Loading/loading";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+import {
+  Loading,
+  LOADING_PANEL_STYLE,
+} from "../../../../../../Loading/loading";
+import { StyledToolbar } from "../../../../../../Table/components/TableToolbar/tableToolbar.styles";
+import { ViewToggle } from "../../controls/ViewToggle/viewToggle";
 import { StyledGrid, StyledGridPaperSection } from "./chartView.styles";
 import { Chart } from "./components/Chart/chart";
 import { useChartView } from "./hooks/UseChartView/useChartView";
@@ -18,6 +23,9 @@ export const ChartView = ({
   if (selectCategoryViews.length === 0) return null;
   return (
     <Fragment>
+      <StyledToolbar>
+        <ViewToggle />
+      </StyledToolbar>
       <Loading
         appear={false}
         autoPosition={false}

package/src/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/components/Chart/barX/plot.ts

@@ -1,8 +1,8 @@
 import * as Plot from "@observablehq/plot";
 import { PlotOptions } from "@observablehq/plot";
-import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
-import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
-import { formatCountSize } from "../../../../../../../../../utils/formatCountSize";
+import { SelectCategoryValueView } from "../../../../../../../../../../common/entities";
+import { PALETTE } from "../../../../../../../../../../styles/common/constants/palette";
+import { formatCountSize } from "../../../../../../../../../../utils/formatCountSize";
 import { DATA_FIELD, MARGIN_LEFT, TEXT_PADDING } from "./constants";
 import {
   getCategoryTotalCount,

package/src/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/components/Chart/barX/utils.ts

@@ -5,8 +5,8 @@ import {
   RenderFunction,
   ScaleFunctions,
 } from "@observablehq/plot";
-import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
-import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
+import { SelectCategoryValueView } from "../../../../../../../../../../common/entities";
+import { PALETTE } from "../../../../../../../../../../styles/common/constants/palette";
 import {
   BAR_GAP,
   BAR_HEIGHT,

package/src/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/components/Chart/chart.styles.ts

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
-import { mediaTabletDown } from "../../../../../../../../styles/common/mixins/breakpoints";
-import { textBodySmall400 } from "../../../../../../../../styles/common/mixins/fonts";
-import { BarX } from "../../../../../../../Plot/components/BarX/barX";
+import { mediaTabletDown } from "../../../../../../../../../styles/common/mixins/breakpoints";
+import { textBodySmall400 } from "../../../../../../../../../styles/common/mixins/fonts";
+import { BarX } from "../../../../../../../../Plot/components/BarX/barX";
 
 export const StyledBarX = styled(BarX)`
   ${textBodySmall400};

package/src/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/components/Chart/stories/chart.stories.tsx

@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
+import { PALETTE } from "../../../../../../../../../../styles/common/constants/palette";
 import { Chart } from "../chart";
 import { CHART_ARGS, SELECT_CHART_ARGS } from "./args";
 

package/src/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/components/Chart/types.ts

@@ -1,6 +1,6 @@
 import { PlotOptions } from "@observablehq/plot";
-import { SelectCategoryValueView } from "../../../../../../../../common/entities";
-import { TestIdProps } from "../../../../../../../types";
+import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
+import { TestIdProps } from "../../../../../../../../types";
 
 export interface ChartProps
   extends Required<Pick<PlotOptions, "width">>,

package/src/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/hooks/UseChartView/types.ts

@@ -1,5 +1,5 @@
 import { RefObject } from "react";
-import { SelectCategoryView } from "../../../../../../../../common/entities";
+import { SelectCategoryView } from "../../../../../../../../../common/entities";
 
 export interface UseChartView {
   chartViewRef: RefObject<HTMLDivElement> | null;

package/src/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/hooks/UseChartView/useChartView.ts

@@ -2,8 +2,8 @@ import { useMemo, useRef } from "react";
 import {
   getBorderBoxSize,
   useResizeObserver,
-} from "../../../../../../../../hooks/useResizeObserver";
-import { CategoryFilter } from "../../../../../../../Filter/components/Filters/filters";
+} from "../../../../../../../../../hooks/useResizeObserver";
+import { CategoryFilter } from "../../../../../../../../Filter/components/Filters/filters";
 import { getSelectCategoryViews, getSVGWidth } from "../../utils";
 import { UseChartView } from "./types";
 

package/src/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/stories/chartView.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { GridPaper } from "../../../../../../common/Paper/paper.styles";
+import { GridPaper } from "../../../../../../../common/Paper/paper.styles";
 import { ChartView } from "../chartView";
 import { CHART_VIEW_ARGS } from "./args";
 

package/src/components/Index/components/EntityView/components/views/ChartView/types.ts

@@ -0,0 +1,9 @@
+import { EntityConfig } from "../../../../../../../config/entities";
+import { CategoryFilter } from "../../../../../../Filter/components/Filters/filters";
+import { TestIdProps } from "../../../../../../types";
+
+export interface ChartViewProps extends TestIdProps {
+  categoryFilters: CategoryFilter[];
+  entityName: EntityConfig["label"];
+  loading: boolean;
+}

package/src/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/utils.ts

@@ -1,6 +1,6 @@
-import { isSelectCategoryView } from "../../../../../../common/categories/views/select/typeGuards";
-import { SelectCategoryView } from "../../../../../../common/entities";
-import { CategoryFilter } from "../../../../../Filter/components/Filters/filters";
+import { isSelectCategoryView } from "../../../../../../../common/categories/views/select/typeGuards";
+import { SelectCategoryView } from "../../../../../../../common/entities";
+import { CategoryFilter } from "../../../../../../Filter/components/Filters/filters";
 
 /**
  * Returns the set of select category views that have chart view enabled.

package/src/components/Index/components/{EntitiesView/components/EntityList/entityList.tsx → EntityView/components/views/TableView/tableView.tsx}

@@ -1,11 +1,11 @@
 import { RowData } from "@tanstack/react-table";
 import React from "react";
-import { useConfig } from "../../../../../../hooks/useConfig";
-import { useExploreState } from "../../../../../../hooks/useExploreState";
-import { TableCreator } from "../../../../../TableCreator/tableCreator";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { useExploreState } from "../../../../../../../hooks/useExploreState";
+import { TableCreator } from "../../../../../../TableCreator/tableCreator";
 import { EntityListProps } from "./types";
 
-export const EntityList = <T extends RowData>({
+export const TableView = <T extends RowData>({
   entityListType,
   loading,
   table,

package/src/components/Index/components/EntityView/context/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { VIEW_MODE } from "../components/controls/ViewToggle/hooks/UseViewToggle/types";
+import { EntityViewContextProps } from "./types";
+
+export const EntityViewContext = createContext<EntityViewContextProps>({
+  onChange: () => {},
+  viewMode: VIEW_MODE.TABLE,
+  viewStatus: { disabled: false },
+});

package/src/components/Index/components/EntityView/context/hook.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { EntityViewContext } from "./context";
+import { EntityViewContextProps } from "./types";
+
+/**
+ * Returns entity view context.
+ * @returns entity view context.
+ */
+export const useEntityView = (): EntityViewContextProps => {
+  return useContext(EntityViewContext);
+};

package/src/components/Index/components/EntityView/context/types.ts

@@ -0,0 +1,11 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import {
+  VIEW_MODE,
+  ViewStatus,
+} from "../components/controls/ViewToggle/hooks/UseViewToggle/types";
+
+export interface EntityViewContextProps {
+  onChange: ToggleButtonGroupProps["onChange"];
+  viewMode: VIEW_MODE;
+  viewStatus: ViewStatus;
+}

package/src/components/Index/index.styles.ts

@@ -1,19 +1,67 @@
 import styled from "@emotion/styled";
-import { mediaTabletUp } from "../../styles/common/mixins/breakpoints";
+import { Grid } from "@mui/material";
+import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
+import { PALETTE } from "../../styles/common/constants/palette";
+import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
+import { FluidPaper } from "../common/Paper/components/FluidPaper/fluidPaper";
 
-interface Props {
-  marginTop: number;
-}
-
-export const Index = styled("div")<Props>`
+export const StyledGridEntityView = styled(Grid)<LayoutSpacing>`
+  align-content: flex-start;
   display: grid;
   flex: 1;
+  gap: 0;
+  height: 100%;
+  max-height: 100vh;
+  overflow: hidden;
+  padding-top: ${({ top }) => top}px;
+`;
+
+export const StyledGridEntityLayout = styled(Grid)`
+  align-items: center;
+  gap: 16px;
+  min-height: 56px;
+  padding: 0 16px;
+  position: relative; /* required; positions box-shadow */
+
+  &:after {
+    content: "";
+    bottom: 0;
+    box-shadow: inset 0 -1px 0 0 ${PALETTE.SMOKE_MAIN};
+    height: 1px;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 2;
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  .MuiGrid-root {
+    align-items: center;
+
+    &:empty {
+      display: none;
+    }
+  }
+`;
+
+export const StyledFluidPaper = styled(FluidPaper)`
+  background-color: ${PALETTE.SMOKE_MAIN};
+  display: grid;
+  gap: 1px;
+  overflow: hidden;
+  position: relative; /* required; positions table loading indicator */
+`;
+
+export const StyledGridEntityList = styled(Grid)`
+  display: grid;
   gap: 16px;
-  margin-top: ${({ marginTop }) => marginTop}px;
-  padding: 24px 0;
-  place-content: flex-start stretch;
+  margin: 16px;
+  overflow: hidden;
 
-  ${mediaTabletUp} {
-    padding: 24px;
+  ${mediaTabletDown} {
+    margin: 16px 0;
   }
 `;

package/src/components/Index/index.tsx

@@ -1,12 +1,25 @@
+import { Grid } from "@mui/material";
 import React from "react";
-import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
-import { ChartView } from "./components/EntitiesView/components/ChartView/chartView";
-import { EntityList } from "./components/EntitiesView/components/EntityList/entityList";
-import { EntitiesView } from "./components/EntitiesView/entitiesView";
-import { useEntitiesView } from "./components/EntitiesView/hooks/UseEntitiesView/hook";
-import { VIEW_MODE } from "./components/EntitiesView/hooks/UseEntitiesView/types";
-import { Hero } from "./components/Hero/hero";
-import { Index as IndexLayout } from "./index.styles";
+import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
+import { ActionButton } from "./components/EntityView/components/controls/ActionButton/actionButton";
+import { ExportButton } from "./components/EntityView/components/controls/ExportButton/exportButton";
+import { FilterButton } from "./components/EntityView/components/controls/FilterButton/filterButton";
+import { useViewToggle } from "./components/EntityView/components/controls/ViewToggle/hooks/UseViewToggle/hook";
+import { VIEW_MODE } from "./components/EntityView/components/controls/ViewToggle/hooks/UseViewToggle/types";
+import { Summary } from "./components/EntityView/components/layout/Summary/summary";
+import { Title } from "./components/EntityView/components/layout/Title/title";
+import { Tabs } from "./components/EntityView/components/navigation/Tabs/tabs";
+import { EntityListSlot } from "./components/EntityView/components/slots/EntityListSlot/entityListSlot";
+import { EntityViewSlot } from "./components/EntityView/components/slots/EntityViewSlot/entityViewSlot";
+import { ChartView } from "./components/EntityView/components/views/ChartView/chartView";
+import { TableView } from "./components/EntityView/components/views/TableView/tableView";
+import { EntityViewContext } from "./components/EntityView/context/context";
+import {
+  StyledFluidPaper,
+  StyledGridEntityLayout,
+  StyledGridEntityList,
+  StyledGridEntityView,
+} from "./index.styles";
 import { useTable } from "./table/hook";
 import { IndexProps } from "./types";
 
@@ -15,42 +28,51 @@ export const Index = ({
   className,
   entityListType,
   entityName,
-  ListHero,
   loading,
-  SideBarButton,
-  SubTitleHero,
-  Summaries,
-  Tabs,
-  title,
 }: IndexProps): JSX.Element => {
-  const { onChange, viewMode, viewStatus } = useEntitiesView();
-  const { dimensions } = useLayoutDimensions();
+  const { onChange, viewMode, viewStatus } = useViewToggle();
+  const { spacing } = useLayoutSpacing();
   const { table } = useTable({ entityListType });
   return (
-    <IndexLayout className={className} marginTop={dimensions.header.height}>
-      <Hero SideBarButton={SideBarButton} Summaries={Summaries} title={title} />
-      {SubTitleHero}
-      {Tabs}
-      {ListHero}
-      <EntitiesView
-        onChange={onChange}
-        viewMode={viewMode}
-        viewStatus={viewStatus}
-      >
-        {viewMode === VIEW_MODE.TABLE ? (
-          <EntityList
-            entityListType={entityListType}
-            loading={loading}
-            table={table}
-          />
-        ) : (
-          <ChartView
-            categoryFilters={categoryFilters}
-            entityName={entityName}
-            loading={loading}
-          />
-        )}
-      </EntitiesView>
-    </IndexLayout>
+    <StyledGridEntityView className={className} {...spacing}>
+      {/* Entity view alerts or other */}
+      <EntityViewSlot />
+      {/* Entity layout */}
+      <StyledGridEntityLayout container>
+        <Title />
+        <Tabs />
+        <Grid container offset="auto">
+          <Summary />
+          <Grid container gap={2}>
+            <ActionButton />
+            <ExportButton />
+            <FilterButton />
+          </Grid>
+        </Grid>
+      </StyledGridEntityLayout>
+      {/* Entity */}
+      <EntityViewContext.Provider value={{ onChange, viewMode, viewStatus }}>
+        <StyledGridEntityList container>
+          {/* Entity alerts or other */}
+          <EntityListSlot />
+          {/* Entity table or graph */}
+          <StyledFluidPaper elevation={0}>
+            {viewMode === VIEW_MODE.TABLE ? (
+              <TableView
+                entityListType={entityListType}
+                loading={loading}
+                table={table}
+              />
+            ) : (
+              <ChartView
+                categoryFilters={categoryFilters}
+                entityName={entityName}
+                loading={loading}
+              />
+            )}
+          </StyledFluidPaper>
+        </StyledGridEntityList>
+      </EntityViewContext.Provider>
+    </StyledGridEntityView>
   );
 };

package/src/components/Index/types.ts

@@ -1,17 +1,10 @@
 import { BaseComponentProps } from "components/types";
 import { EntityConfig } from "config/entities";
-import { ReactNode } from "react";
 import { CategoryFilter } from "../../components/Filter/components/Filters/filters";
 
 export interface IndexProps extends BaseComponentProps {
   categoryFilters: CategoryFilter[];
   entityListType: string;
   entityName: EntityConfig["label"];
-  ListHero?: ReactNode | ReactNode[];
   loading: boolean;
-  SideBarButton?: ReactNode;
-  SubTitleHero?: ReactNode | ReactNode[];
-  Summaries?: ReactNode;
-  Tabs?: ReactNode;
-  title: ReactNode;
 }

package/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.tsx

@@ -47,7 +47,7 @@ export const BackPageHero = ({
               breadcrumbs
             )
           ) : null}
-          {title && <Title title={title} />}
+          <Title>{title}</Title>
           <SubTitle subTitle={subTitle} />
         </HeroHeader>
         {actions}