feat(home-button): introduce a button to go to a default extent

style(home-button): match esri style

packages/utah-design-system/src/components/HomeButton.stories.tsx

@@ -0,0 +1,57 @@
+import Map from '@arcgis/core/Map';
+import MapView from '@arcgis/core/views/MapView';
+import type { Meta } from '@storybook/react';
+import { useEffect, useRef, useState } from 'react';
+import { HomeButton as Component } from './HomeButton';
+
+import '@arcgis/core/assets/esri/themes/light/main.css';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+};
+
+export default meta;
+
+export const Example = {
+  render: () => {
+    const viewDivRef = useRef<HTMLDivElement | null>(null);
+    const view = useRef<__esri.MapView | null>(null);
+    const [ready, setReady] = useState<boolean>(false);
+
+    useEffect(() => {
+      if (view.current) {
+        return;
+      }
+
+      view.current = new MapView({
+        container: viewDivRef.current!,
+        map: new Map({
+          basemap: 'topo',
+        }),
+        zoom: 15,
+        center: [-111.5, 39.5],
+      });
+
+      view.current.when(() => {
+        setReady(true);
+      });
+    }, [view.current, viewDivRef.current]);
+
+    return (
+      <>
+        <div
+          ref={viewDivRef}
+          className="border rounded-lg size-96 overflow-hidden"
+        >
+          {ready && <Component view={view.current!} />}
+        </div>
+      </>
+    );
+  },
+};

packages/utah-design-system/src/components/HomeButton.tsx

@@ -0,0 +1,37 @@
+import '@arcgis/core/interfaces.d.ts';
+import { useDefaultExtent, useViewUiPosition } from '@ugrc/utilities/hooks';
+import { HomeIcon } from 'lucide-react';
+import { Button } from './Button';
+
+export const HomeButton = ({
+  view,
+  position,
+  initialExtent,
+}: {
+  view: __esri.MapView;
+  position: __esri.UIAddComponent['position'];
+  initialExtent?: __esri.Extent;
+}) => {
+  const goHome = useDefaultExtent(view, initialExtent);
+  const uiPosition = useViewUiPosition(view, position ?? 'top-left');
+
+  return (
+    <div
+      ref={uiPosition}
+      className="group flex items-center justify-center size-[32px] bg-white shadow-[0_1px_2px_#0000004d]"
+    >
+      <Button
+        variant="icon"
+        className="focus:min-h-0 focus:outline-offset-[-2px] will-change-transform transition-colors duration-150 ease-in-out p-0 size-full stroke-[4] group-hover:bg-[#f3f3f3]"
+        aria-label="Default extent"
+        onPress={() => goHome()}
+      >
+        <HomeIcon
+          className="will-change-transform transition-colors duration-150 ease-in-out size-5 text-[#6e6e6e] group-hover:text-[#151515] stroke-[1.5]"
+          aria-hidden
+        />
+        <span className="sr-only">Go Home</span>
+      </Button>
+    </div>
+  );
+};

packages/utah-design-system/src/index.ts

@@ -10,6 +10,7 @@ export * from './components/Footer';
 export * from './components/FormErrors';
 export * from './components/Geocode';
 export * from './components/Header';
+export * from './components/HomeButton';
 export * from './components/Link';
 export * from './components/ListBox';
 export * from './components/Menu';