Add a new feature for 3d basemaps pop up display

packages/landing/package.json

@@ -62,6 +62,14 @@
       "entry": "../../node_modules/@linzjs/lui/dist/assets/images/linz-motif.svg",
       "outfile": "dist/assets/logo-linz.svg"
     },
+    {
+      "entry": "../../node_modules/@linzjs/lui/dist/assets/icons/whats_new_updates.svg",
+      "outfile": "dist/assets/whats_new_updates.svg"
+    },
+    {
+      "entry": "../../node_modules/@linzjs/lui/dist/assets/icons/clear.svg",
+      "outfile": "dist/assets/clear.svg"
+    },
     {
       "entry": "../../node_modules/@linzjs/lui/dist/assets/fonts",
       "outfile": "dist/assets/fonts"

packages/landing/src/components/feature.updates.tsx

@@ -44,10 +44,10 @@ export class FeatureUpdates extends Component<FeatureUpdatesProps, FeatureUpdate
   renderFeatureMedia(): ReactNode {
     const { bigImage, smallImage, iframe } = this.props;
     if (iframe) {
-      return <FeatureIFrame iframeConfig={iframe} />;
+      return this.FeatureIFrame(iframe);
     }
     if (bigImage && smallImage) {
-      return <FeatureImages bigImage={bigImage} smallImage={smallImage} />;
+      return this.FeatureImages(bigImage, smallImage);
     }
     return null; // Return null if no media is available
   }
@@ -71,11 +71,11 @@ export class FeatureUpdates extends Component<FeatureUpdatesProps, FeatureUpdate
         <div className={clsx('lui-large-feature-notification', wrapperClass)}>
           <div className="lui-feature-header">
             <div className="lui-feature-title-wrapper">
-              {/* <Icon alt="whats_new_icon" name="ic_whats_new_updates" size="lg" className="lui-feature-title-icon" /> */}
+              {this.WhatsNewIcon()}
               <h1>{header}</h1>
             </div>
             <button aria-label="Close dialog" onClick={this.handleClose}>
-              {/* <Icon alt="cross_icon" name="ic_clear" status="interactive" size="md" /> */}
+              {this.ClearIcon()}
             </button>
           </div>
           {this.renderFeatureMedia()}
@@ -84,27 +84,48 @@ export class FeatureUpdates extends Component<FeatureUpdatesProps, FeatureUpdate
       </ReactModal>
     );
   }
-}
 
-const FeatureImages = ({ bigImage, smallImage }: { bigImage: string; smallImage: string }): ReactNode => (
-  <div className="lui-feature-img">
-    <img className="lui-hide-xs lui-hide-sm" alt={"What's new"} src={bigImage} />
-    <img className="lui-hide-md lui-hide-lg lui-hide-xl" alt={"What's new"} src={smallImage} />
-  </div>
-);
+  WhatsNewIcon(): ReactNode {
+    return (
+      <span
+        className={'LuiIcon LuiIcon--md lui-feature-title-icon '}
+        data-icon={'ic_whats_new_updates'}
+        aria-label={'whats_new_icon'}
+      >
+        <img src="assets/whats_new_updates.svg" alt="whats_new_icon" className="LuiIcon__image" />
+      </span>
+    );
+  }
+  ClearIcon(): ReactNode {
+    return (
+      <span className="LuiIcon LuiIcon--md LuiIcon--interactive" data-icon="ic_clear" aria-label="cross_icon">
+        <img src="/assets/clear.svg" alt="cross_icon" />
+      </span>
+    );
+  }
 
-const FeatureIFrame = ({ iframeConfig }: { iframeConfig: IFrameConfig }): ReactNode => {
-  const wrapperClass = iframeConfig.iframeWrapperClass || 'iframe-wrapper';
-  const iFrameProps = iframeConfig.iFrameProps || {};
-  return (
-    <div className={wrapperClass}>
-      <iframe
-        width={iframeConfig.width}
-        height={iframeConfig.height}
-        src={iframeConfig.url}
-        title={iframeConfig.title}
-        {...iFrameProps}
-      ></iframe>
-    </div>
-  );
-};
+  FeatureImages(bigImage: string, smallImage: string): ReactNode {
+    return (
+      <div className="lui-feature-img">
+        <img className="lui-hide-xs lui-hide-sm" alt={"What's new"} src={bigImage} />
+        <img className="lui-hide-md lui-hide-lg lui-hide-xl" alt={"What's new"} src={smallImage} />
+      </div>
+    );
+  }
+
+  FeatureIFrame(iframeConfig: IFrameConfig): ReactNode {
+    const wrapperClass = iframeConfig.iframeWrapperClass || 'iframe-wrapper';
+    const iFrameProps = iframeConfig.iFrameProps || {};
+    return (
+      <div className={wrapperClass}>
+        <iframe
+          width={iframeConfig.width}
+          height={iframeConfig.height}
+          src={iframeConfig.url}
+          title={iframeConfig.title}
+          {...iFrameProps}
+        ></iframe>
+      </div>
+    );
+  }
+}

packages/landing/src/components/new.feature.tsx

@@ -0,0 +1,48 @@
+import { Component, ReactNode } from 'react';
+
+import { Config } from '../config.js';
+import { WindowUrl } from '../url.js';
+import { FeatureUpdates } from './feature.updates.js';
+
+const baseUrl = WindowUrl.baseUrl();
+
+/**
+ * Please updated the following settings and descriptions for new features pop up
+ */
+const bigImage = new URL('assets/Lg+3D+Maps+splash.gif', baseUrl).href; // Large gif file location
+const smallImage = new URL('assets/Sml+3D+map+splash.gif', baseUrl).href; // Small gif file location
+const closingDate = new Date('2024-10-30'); // End date for pop up screen
+const dismissedKey = `DISMISSED_MODALS_LINZ_Basemaps_3D_Map`; // Optional to set as Config.Version to disable Modal as default
+const recentUpdates = {
+  children: (
+    <>
+      <h5 className="RecentUpdatesHeading">Basemaps are now viewable in 3D!</h5>
+      <p>
+        To activate this function, click the mountains icon on the left-hand side then hold right-click to change your
+        viewpoint.
+      </p>
+      <p>The new Labels button can also be toggled to show places names.</p>
+    </>
+  ),
+  bigImage,
+  smallImage,
+};
+
+export class NewFeature extends Component {
+  enabled = new Date() <= closingDate;
+
+  override render(): ReactNode {
+    return (
+      <FeatureUpdates
+        id={dismissedKey}
+        header="What's new"
+        releaseVersion={Config.Version}
+        bigImage={recentUpdates.bigImage}
+        smallImage={recentUpdates.smallImage}
+        enabled={this.enabled}
+      >
+        {recentUpdates.children}
+      </FeatureUpdates>
+    );
+  }
+}

packages/landing/src/index.tsx

@@ -1,10 +1,10 @@
 import { Component, Fragment, ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { NewFeature } from './components/features/new.feature.js';
 import { Footer } from './components/layout.footer.js';
 import { Header } from './components/layout.header.js';
 import { Basemaps } from './components/map.js';
+import { NewFeature } from './components/new.feature.js';
 import { Config } from './config.js';
 import { WindowUrl } from './url.js';
 import { isWebpSupported } from './webp.js';

packages/landing/static/index.css

@@ -257,4 +257,8 @@ have higher specifity than the default styles of the react-select component
 
 .display-none {
   display: none!important;
+}
+
+.lui-feature-img img {
+  padding: 20px;
 }