Merge pull request #203 from etchteam/feature/wrap-776-right-side-of-…

…assignment-cannot-be-destructured

Fix use of useAppState outside preact context

src/components/canvas/MapSvg/MapSvg.css

@@ -4,27 +4,28 @@ locator-map-svg {
   height: 100%;
   width: 100%;
 
-  &::part(image),
-  &::part(content) {
+  img,
+  locator-map-svg-content {
     grid-column: 1;
     grid-row: 1;
   }
 
-  &::part(image) {
+  img {
     height: 100%;
     object-fit: cover;
     width: 100%;
   }
 
-  &::part(content) {
+  locator-map-svg-content {
     box-sizing: border-box;
+    display: block;
     margin: 0 auto;
     padding: var(--diamond-spacing);
     width: min(100%, calc(var(--wrap-max-width) - var(--diamond-spacing-lg)));
   }
 
   @container (width > 768px) {
-    &::part(content) {
+    locator-map-svg-content {
       place-self: end;
       width: calc(var(--wrap-max-width) - var(--diamond-spacing-xl));
     }

src/components/canvas/MapSvg/MapSvg.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/preact';
 
-import './MapSvg';
+import MapSvgComponent from './MapSvg';
 
 const meta: Meta = {
   title: 'Components/Canvas/MapSvg',
@@ -9,5 +9,5 @@ const meta: Meta = {
 export default meta;
 
 export const MapSvg: StoryObj = {
-  render: () => <locator-map-svg>Applies svg map background</locator-map-svg>,
+  render: () => <MapSvgComponent>Applies svg map background</MapSvgComponent>,
 };

src/components/canvas/MapSvg/MapSvg.tsx

@@ -1,28 +1,29 @@
 import { ComponentChildren } from 'preact';
-import register from 'preact-custom-element';
 
 import { useAppState } from '@/lib/AppState';
 import { CustomElement } from '@/types/customElement';
 
 export default function MapSvg({
   children,
-}: Readonly<{ children: ComponentChildren }>) {
+}: Readonly<{ children?: ComponentChildren }>) {
   const { publicPath } = useAppState();
+  const imgSrc = `${publicPath}images/map.svg`;
 
   return (
-    <>
-      <img part="image" src={`${publicPath}images/map.svg`} alt="" />
-      <div part="content">{children}</div>
-    </>
+    <locator-map-svg>
+      <img src={imgSrc} alt="" />
+      {children && (
+        <locator-map-svg-content>{children}</locator-map-svg-content>
+      )}
+    </locator-map-svg>
   );
 }
 
-register(MapSvg, 'locator-map-svg', [], { shadow: true });
-
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
       'locator-map-svg': CustomElement;
+      'locator-map-svg-content': CustomElement;
     }
   }
 }

src/pages/[postcode]/places/place/place.layout.tsx

@@ -21,7 +21,7 @@ import '@/components/composition/Wrap/Wrap';
 import '@/components/content/HeaderTitle/HeaderTitle';
 import '@/components/content/Icon/Icon';
 import '@/components/control/NavBar/NavBar';
-import '@/components/canvas/MapSvg/MapSvg';
+import MapSvg from '@/components/canvas/MapSvg/MapSvg';
 import PlacesMap from '@/components/control/PlacesMap/PlacesMap';
 import directions from '@/lib/directions';
 import useAnalytics from '@/lib/useAnalytics';
@@ -160,11 +160,7 @@ export default function PlaceLayout({
         <Suspense fallback={null}>
           <Await resolve={locationPromise}>
             {(location) =>
-              location?.latitude ? (
-                <PlaceMap location={location} />
-              ) : (
-                <locator-map-svg></locator-map-svg>
-              )
+              location?.latitude ? <PlaceMap location={location} /> : <MapSvg />
             }
           </Await>
         </Suspense>

src/pages/[postcode]/postcode.page.tsx

@@ -10,7 +10,7 @@ import '@etchteam/diamond-ui/composition/Enter/Enter';
 import '@etchteam/diamond-ui/control/Button/Button';
 
 import '@/components/canvas/ContextHeader/ContextHeader';
-import '@/components/canvas/MapSvg/MapSvg';
+import MapSvg from '@/components/canvas/MapSvg/MapSvg';
 import '@/components/canvas/IconCircle/IconCircle';
 import '@/components/canvas/Loading/Loading';
 import '@/components/canvas/Hero/Hero';
@@ -41,14 +41,14 @@ function MapErrorFallback({ postcode }: { readonly postcode: string }) {
   const { t } = useTranslation();
 
   return (
-    <locator-map-svg>
+    <MapSvg>
       <diamond-button width="full-width">
         <Link to={`/${postcode}/places/map`}>
           {t('postcode.exploreTheMap')}
           <locator-icon icon="map" color="primary"></locator-icon>
         </Link>
       </diamond-button>
-    </locator-map-svg>
+    </MapSvg>
   );
 }