Merge pull request #861 from City-of-Helsinki/UHF-9156-update-hds-to-v3

UHF-9156: Update HDS to v3

.nvmrc

@@ -1 +1 @@
-18.18.0
+18.19.0

package.json

@@ -22,28 +22,26 @@
   },
   "dependencies": {
     "@nuxt/friendly-errors-webpack-plugin": "^2.5.1",
+    "@react-aria/visually-hidden": "^3.8.0",
     "@sentry/react": "^7.66.0",
     "@sideway/address": "^5.0.0",
     "@sideway/formula": "^3.0.0",
     "@sideway/pinpoint": "^2.0.0",
     "breakpoint-sass": "^3.0.0",
     "chokidar": "^3.5.1",
     "classnames": "^2.3.1",
-    "es6-promise": "^4.1.1",
     "glob": "^10.0.0",
-    "hds-design-tokens": "^2.13.0",
-    "hds-react": "^2.13.0",
-    "html-react-parser": "^4.0.0",
+    "hds-design-tokens": "^3.3.0",
+    "hds-react": "^3.3.0",
+    "html-react-parser": "^5.0.11",
     "husky": "^8.0.0",
     "hyphenopoly": "^5.0.0",
-    "joi": "^17.4.0",
-    "jotai": "2.4.2",
-    "lint-staged": "^14.0.0",
+    "jotai": "^2.6.0",
     "luxon": "^3.3.0",
     "md5": "^2.3.0",
     "mustache": "^4.2.0",
     "normalize.css": "^8.0.1",
-    "postcss-cli": "^10.0.0",
+    "postcss-cli": "^11.0.0",
     "postcss-easy-import": "^4.0.0",
     "postcss-import": "^15.0.0",
     "postcss-import-ext-glob": "^2.0.1",
@@ -53,7 +51,10 @@
     "postcss-scss": "^4.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-popper": "^2.2.5",
+    "readable-stream": "^4.5.1",
     "sass": "^1.43.4",
+    "stream-browserify": "^3.0.0",
     "swr": "2.2.4"
   },
   "lint-staged": {
@@ -68,11 +69,6 @@
     "last 3 major versions",
     "not dead"
   ],
-  "peerDependencies": {
-    "@react-aria/visually-hidden": "3.8.4",
-    "react-popper": "2.3.0",
-    "react-virtual": "2.10.4"
-  },
   "devDependencies": {
     "@babel/core": "^7.23.2",
     "@babel/eslint-parser": "^7.22.15",
@@ -94,8 +90,8 @@
     "babel-loader": "^9.0.0",
     "babel-preset-react": "^6.5.0",
     "backstopjs": "^6.2.2",
-    "buffer": "^6.0.3",
     "copy-webpack-plugin": "^11.0.0",
+    "crypto-browserify": "^3.12.0",
     "css-declaration-sorter": "^7.0.3",
     "css-loader": "^6.5.0",
     "dotenv": "^16.3.1",
@@ -109,9 +105,8 @@
     "html-loader": "^4.0.0",
     "html-webpack-plugin": "^5.3.2",
     "husky": ">=4",
-    "lint-staged": ">=10",
+    "lint-staged": "^15.0.0",
     "mini-css-extract-plugin": "^2.0.0",
-    "path-browserify": "^1.0.1",
     "postcss": "^8.4.27",
     "postcss-preset-env": "^9.1.1",
     "pre-commit": "^1.2.2",

src/js/react/apps/ploughing-schedule/components/ResultCard.tsx

@@ -1,21 +1,21 @@
 import { ForwardedRef, forwardRef } from 'react';
 
 type CardProps = {
-  description: String;
-  lead?: String;
-  title: String;
+  title: string;
+  lead?: string;
+  description: string | JSX.Element | JSX.Element[];
 }
 
 const ResultCard = forwardRef(({description, lead, title}: CardProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div className='hdbt-search--ploughing-schedule__result-card' ref={ref}>
-      <h3 className='hdbt-search--ploughing-schedule__result-card--title hdbt-search--title'>{ title }</h3>
-      <div>
-        { lead && 
-          <p>{lead}</p>
-        }
-        <p>{ description }</p>
-      </div>
+  <div className='hdbt-search--ploughing-schedule__result-card' ref={ref}>
+    <h3 className='hdbt-search--ploughing-schedule__result-card--title hdbt-search--title'>{ title }</h3>
+    <div>
+      { lead &&
+        <p>{lead}</p>
+      }
+      <p>{ description }</p>
     </div>
-  ));
+  </div>
+));
 
 export default ResultCard;

src/js/react/apps/ploughing-schedule/components/ResultsList.tsx

@@ -43,7 +43,7 @@ const ResultsList = ({ data, error, isLoading, isValidating }: ResultsListProps)
 
   return (
     <div className='hdbt-search--react__results'>
-      { results.length 
+      { results.length
         ? <ResultCard {...getScheduleCard(results[0]._source.maintenance_class, several)} ref={scrollTarget} />
         : <ResultCard {...getScheduleCard(0)} ref={scrollTarget} />
       }

src/js/react/apps/ploughing-schedule/helpers/GetScheduleCard.ts

@@ -1,26 +1,23 @@
-const htmlParser = require('html-react-parser');
+import parse from 'html-react-parser';
 
 const getScheduleCard = (maintenanceClass: number, several?: boolean) => {
   if (maintenanceClass > 0) {
     const schedules: any = [];
     schedules[1] = Drupal.t('<strong>We will plough the street by 7.00</strong>, if it has snowed in the evening or during the early hours of the night. If it snows between 4.00 and 18.00, we will plough the street within three hours of the end of the snowfall. Ploughing may be delayed if it snows a lot and for an extended period.', {}, {context: 'Ploughing schedule: Class 1'});
     schedules[2] = Drupal.t('<strong>We will plough the street by 7.00</strong>, if it has snowed in the evening or during the early hours of the night. If it snows between 4.00 and 17.00, we will plough the street within four hours of the end of the snowfall. Ploughing may be delayed if it snows a lot and for an extended period.', {}, {context: 'Ploughing schedule: Class 2'});
     schedules[3] = Drupal.t('<strong>We will plough the street within three business days</strong>. Ploughing may be delayed if it snows a lot and for an extended period.', {}, {context: 'Ploughing schedule: Class 3'});
-
     const leadText: string = Drupal.t('The estimated ploughing schedules for the different parts of the street differ from each other. Below is the ploughing schedule for the longest part of the street.', {}, {context: 'Ploughing schedule: Multiple streets'});
 
     return {
       'title': Drupal.t('Estimated ploughing schedule', {}, {context: 'Ploughing schedule: Result title'}),
-      'description': htmlParser(schedules[maintenanceClass]),
+      'description': parse(schedules[maintenanceClass]),
       'lead': several ? leadText : ''
     };
   }
 
   return {
-    'title': Drupal.t('No results', {}, {context: 'No search results'}),
-    'description': Drupal.t('No results were found for the criteria you entered. Try changing your search criteria.',
-      {},
-      { context: 'React search: no search results' })
+    'title': Drupal.t('No results', {}, { context: 'No search results' }),
+    'description': Drupal.t('No results were found for the criteria you entered. Try changing your search criteria.', {}, { context: 'React search: no search results' })
   };
 };
 

src/js/react/apps/school-search/containers/SearchContainer.tsx

@@ -1,4 +1,3 @@
-import { Tab, TabList, Tabs } from 'hds-react';
 import { Suspense, useState } from 'react';
 import { useSetAtom } from 'jotai';
 
@@ -31,24 +30,14 @@ const SearchContainer = () => {
 
   return (
     <>
-      <Tabs>
-        <TabList className='hdbt-search--react__tabs'>
-          <Tab
-            className='hdbt-search--react__tab'
-            index={0}
-            onClick={() => changeSearchMode(MODE_OPTIONS.proximity)}
-          >
-            {Drupal.t('Search for your local school', {}, {context: 'School search: local search title'})}
-          </Tab>
-          <Tab
-            className='hdbt-search--react__tab'
-            index={1}
-            onClick={() => changeSearchMode(MODE_OPTIONS.feature)}
-          >
-            {Drupal.t('Search with school information', {}, {context: 'School search: Feature form title'})}
-          </Tab>
-        </TabList>
-      </Tabs>
+      <div className='hdbt-search--react__results--tablist' role='tablist'>
+        <button type='button' className='tablist-tab' role='tab' aria-selected={searchMode === MODE_OPTIONS.proximity} aria-controls='hdbt-search--react__results--tabpanel' onClick={() => changeSearchMode(MODE_OPTIONS.proximity)}>
+          {Drupal.t('Search for your local school', {}, {context: 'School search: local search title'})}
+        </button>
+        <button type='button' className='tablist-tab' role='tab' aria-selected={searchMode === MODE_OPTIONS.feature} aria-controls='hdbt-search--react__results--tabpanel' onClick={() => changeSearchMode(MODE_OPTIONS.feature)}>
+          {Drupal.t('Search with school information', {}, {context: 'School search: Feature form title'})}
+        </button>
+      </div>
       <Suspense fallback={
         <div className='hdbt__loading-wrapper'>
           <LoadingOverlay />

src/scss/06_components/paragraphs/_react-search.scss

@@ -16,15 +16,6 @@
   margin-bottom: $spacing;
 }
 
-.hdbt-search--react__tabs {
-  margin-bottom: $spacing-triple;
-}
-
-.hdbt-search--react__tab {
-  --tab-active-border-color: var(--hdbt-color-black);
-  --tab-color: var(--hdbt-color-black);
-}
-
 .hdbt-search--react__form-description {
   margin-bottom: $spacing-and-half;
 }

src/scss/_hds.scss

@@ -15,3 +15,16 @@
 @import 'xx_external/hds-core/lib/components/text-input/text-input.min.css';
 @import 'xx_external/hds-core/lib/components/loading-spinner/loading-spinner.min.css';
 @import 'xx_external/hds-core/lib/components/selection-group/selection-group.min.css';
+
+// There are some styles that get orphaned when HDS is updated to version 3
+// The following styles are from diff between old and new stylesheets
+:root {
+    --color-focus-outline: #0072c6;
+    --box-shadow-s: 0px 2px 10px 0px rgba(0,0,0,0.07);
+    --box-shadow-m: 0px 2px 10px 0px rgba(0,0,0,0.1);
+    --box-shadow-l: 0px 2px 20px 0px rgba(0,0,0,0.2);
+    --fontsize-heading-xxl: 4rem;
+    --fontsize-heading-xl: 3rem;
+    --fontsize-heading-xl-mobile: 2.5rem;
+    --fontsize-heading-l: 2rem;
+}

webpack.config.js

@@ -137,7 +137,8 @@ module.exports = (env, argv) => {
     resolve: {
       fallback: {
         // Fix hds-react import bugs.
-        path: require.resolve('path-browserify')
+        crypto: require.resolve('crypto-browserify'),
+        stream: require.resolve('stream-browserify')
       },
       modules: [
         path.join(__dirname, 'node_modules'),
@@ -149,11 +150,6 @@ module.exports = (env, argv) => {
       },
     },
     plugins: [
-      // Fix hds-react import bugs.
-      new webpack.ProvidePlugin({
-        process: 'process/browser',
-        Buffer: ['buffer', 'Buffer'],
-      }),
       new SvgToSprite(
         path.resolve(__dirname, 'src/icons/**/*.svg'),
         'icons/sprite.svg',