Merge branch 'navbar-styles'

* navbar-styles:
  Updated navbar styles again
  Updated navbar styles

packages/map-interface/src/context-panel/index.ts

@@ -1,8 +1,9 @@
 import { useMemo } from "react";
-import { Navbar, Button, InputGroup, Spinner, Card } from "@blueprintjs/core";
+import { Navbar, Button, Spinner, Card, Text } from "@blueprintjs/core";
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
 import { useMapStatus } from "@macrostrat/mapbox-react";
+import { Spacer } from "@macrostrat/ui-components";
 
 const h = hyper.styled(styles);
 
@@ -12,15 +13,18 @@ export function LoadingButton({
   isLoading = false,
   onClick,
   active = false,
+  large = false,
   icon = "menu",
+  style,
 }) {
   return h(Button, {
     className: "loading-button",
     icon: isLoading ? spinnerElement : icon,
-    large: false,
+    large,
     minimal: true,
     onClick,
     active: active && !isLoading,
+    style,
   });
 }
 
@@ -32,18 +36,57 @@ export function MapLoadingButton(props) {
 
 type AnyChildren = React.ReactNode | React.ReactFragment;
 
+export interface FloatingNavbarProps {
+  className?: string;
+  children: AnyChildren;
+  headerElement?: AnyChildren;
+  title?: AnyChildren;
+  statusElement?: AnyChildren;
+  rightElement?: AnyChildren;
+  height: number | string;
+  width: number | string;
+  style?: object;
+}
+
 export function FloatingNavbar({
   className,
   children,
+  headerElement = null,
+  title = null,
   statusElement = null,
-}: {
-  className?: string;
-  children?: AnyChildren;
-  statusElement?: AnyChildren;
-}) {
-  return h("div.searchbar-holder", { className }, [
+  rightElement = null,
+  height,
+  width,
+  style = {},
+}: FloatingNavbarProps) {
+  let _rightElement: React.ReactNode | null = null;
+  if (rightElement != null) {
+    _rightElement = h("div.right-element", rightElement);
+  }
+
+  let _headerElement: React.ReactNode | null = headerElement;
+  if (title != null && _headerElement == null) {
+    if (typeof title === "string") {
+      _headerElement = h(Text, { tagName: "h2", ellipsize: true }, title);
+    } else {
+      _headerElement = title;
+    }
+  }
+
+  if (_headerElement != null) {
+    _headerElement = h([_headerElement, h(Spacer)]);
+  }
+
+  return h("div.searchbar-holder", { className, style: { width } }, [
     h("div.navbar-holder", [
-      h(Navbar, { className: "searchbar panel" }, children),
+      h(
+        Navbar,
+        {
+          className: "searchbar navbar panel",
+          style: { height, ...style },
+        },
+        [_headerElement, children, _rightElement]
+      ),
     ]),
     h.if(statusElement != null)(
       Card,

packages/map-interface/src/context-panel/main.module.sass

@@ -10,7 +10,7 @@
     width: 100%
     background-color: var(--panel-background-color)
     border-radius: 5px
-    padding: 0 5px
+    padding: var(--navbar-padding, 10px)
     display: flex
     flex-direction: row
     align-items: center
@@ -19,6 +19,9 @@
       flex-grow: 1
       cursor: text
 
+.navbar
+  min-height: 50px
+
 :global(.bp5-navbar)>.loading-button
   width: 40px
   height: 40px
@@ -29,6 +32,7 @@
   margin-top: -12px
   padding: 0
   padding-top: 12px
+  overflow: hidden
 
 @media screen and (max-width: 768px)
   .status-tongue

packages/map-interface/src/dev/map-page.ts

@@ -33,7 +33,6 @@ export function MapInspector({
   focusedSource = null,
   focusedSourceTitle = null,
   fitViewport = true,
-  projection = null,
 }: {
   headerElement?: React.ReactElement;
   transformRequest?: mapboxgl.TransformRequestFunction;
@@ -127,14 +126,18 @@ export function MapInspector({
   return h(
     MapAreaContainer,
     {
-      navbar: h(FloatingNavbar, [
-        headerElement ?? h("h2", title),
-        h(Spacer),
-        h(MapLoadingButton, {
+      navbar: h(FloatingNavbar, {
+        rightElement: h(MapLoadingButton, {
+          large: true,
           active: isOpen,
           onClick: () => setOpen(!isOpen),
+          style: {
+            marginRight: "-5px",
+          },
         }),
-      ]),
+        headerElement,
+        title,
+      }),
       contextPanel: h(PanelCard, [
         h(Switch, {
           checked: xRay,

packages/map-interface/stories/navbar.stories.ts

@@ -0,0 +1,117 @@
+import h from "@macrostrat/hyper";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Breadcrumbs, Text } from "@blueprintjs/core";
+import { FloatingNavbar, MapLoadingButton, FloatingNavbarProps } from "../src";
+import { Box } from "@macrostrat/ui-components";
+
+function BasicNavbar(props: FloatingNavbarProps) {
+  return h(FloatingNavbar, {
+    rightElement: h(MapLoadingButton),
+    ...props,
+  });
+}
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<FloatingNavbarProps> = {
+  title: "Map interface/Components/Floating navbar",
+  component: BasicNavbar,
+};
+
+export default meta;
+
+type Story = StoryObj<FloatingNavbarProps>;
+
+export const Primary: Story = {
+  args: {
+    title: "Map inspector",
+    width: 250,
+  },
+  argTypes: {
+    title: {
+      type: {
+        name: "string",
+        required: true,
+      },
+      default: "Map inspector",
+    },
+  },
+};
+
+export const WithStatusBar: Story = {
+  args: {
+    title: "A map",
+    width: 250,
+    statusElement: h(
+      Box,
+      {
+        paddingX: 10,
+        paddingY: 2,
+        backgroundColor: "rgba(255 200 200)",
+        color: "red",
+      },
+      "Bad stuff is afoot"
+    ),
+  },
+};
+
+export const WithExpandedNavigation: Story = {
+  args: {
+    headerElement: h(
+      Box,
+      { display: "flex", flexDirection: "column", gap: 5, marginX: 5 },
+      [
+        h(Breadcrumbs, { items: [{ icon: "home" }, { text: "Map" }] }),
+        h(Text, { tagName: "h3", style: { margin: 0 } }, "Map inspector"),
+      ]
+    ),
+    width: 250,
+    height: "fit-content",
+  },
+};
+
+export const WithoutTitle: Story = {
+  args: {
+    title: null,
+    width: "fit-content",
+    style: { padding: 5 },
+    rightElement: h(MapLoadingButton, {
+      large: true,
+    }),
+  },
+};
+
+export const LongTitleWrapped: Story = {
+  args: {
+    title: h(
+      Text,
+      {
+        tagName: "h2",
+        style: { margin: 0 },
+      },
+      "This is a long title that should wrap"
+    ),
+    width: 250,
+    height: "fit-content",
+  },
+};
+
+export const LongTitleOverflow: Story = {
+  args: {
+    title: "This is a long title that should overflow",
+    width: 250,
+  },
+};
+
+export const UnlimitedWidth: Story = {
+  args: {
+    title: "Map inspector",
+  },
+};
+
+export const WidthFollowsContent: Story = {
+  args: {
+    title: "Map inspector (width follows content)",
+    width: "fit-content",
+  },
+};