Update format for NSW version in footer to include the DDS version (#185

)

src/components/DesignSystemVersionInformation.jsx

@@ -0,0 +1,34 @@
+import { FormattedMessage } from 'react-intl';
+
+import nswPackageJson from 'nsw-design-system/package.json';
+
+export function DesignSystemVersionInformation() {
+  let designSystemVersion = nswPackageJson?.version;
+  try {
+    designSystemVersion = designSystemVersion.split('.').slice(0, 2).join('.');
+  } catch {
+    console.warn(
+      'Failed to fetch valid design system version: ',
+      designSystemVersion,
+    );
+  }
+
+  if (!designSystemVersion) {
+    return (
+      <FormattedMessage
+        id="NSW Built with - plone only"
+        defaultMessage="NSW DDS Plone"
+      />
+    );
+  }
+
+  return (
+    <FormattedMessage
+      id="NSW Built with - DDS and Plone"
+      defaultMessage="NSW DDS Plone {ddsVersion}"
+      values={{
+        ddsVersion: designSystemVersion,
+      }}
+    />
+  );
+}

src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -7,9 +7,11 @@ import { getTextColourUtilityForPaletteName } from 'nsw-design-system-plone6/hel
 import { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
 import { getSubFooter } from 'volto-subfooter';
 
+import { DesignSystemVersionInformation } from 'nsw-design-system-plone6/components/DesignSystemVersionInformation';
+import { Link } from 'react-router-dom';
+
 // TODO: Would dynamically importing these reduce bundle size?
 import FacebookSVG from '@mdi/svg/svg/facebook.svg';
 import LinkedInSVG from '@mdi/svg/svg/linkedin.svg';
@@ -246,7 +248,7 @@ function Footer() {
               <div className="nsw-footer__built">
                 {intl.formatMessage(messages.builtWith)}
                 <a href="https://digitalnsw.pretagov.com.au" rel="external">
-                  Plone 6 NSW DS
+                  <DesignSystemVersionInformation />
                 </a>
               </div>
             </div>