feat: update to HDS v3.1.0, use Header in Navigation component

From HDS v3.0.0 release notes: > **Breaking** > - [Navigation] Removed, use new Header instead > - [Footer] Redesigned and rebuilt > - [StatusLabel, Tag] Rectangular versions removed > - [LinkBox] Property name withBorder changed to border > - [Koros] Renamed variants Wave to Vibration and Storm to Wave > ... > **Changed** > - [Koros] Rename koros flipHorizontal to flipVertical steps: - update hds-(core|design-tokens|react) from ^2.17.0 to ^3.1.0 - icons - export IconEuroSign - export IconAtSign - export IconCalendarEvent - export IconWhatsapp - export HDS v2 icon names as aliases for v3 icons for backward compatibility - sort icon exports alphabetically - replace RoundedTag with Tag because "[StatusLabel, Tag] Rectangular versions removed" - rename flipHorizontal to fipVertical because "[Koros] Rename koros flipHorizontal to flipVertical" - rename hero.module.scss's &.wave to &.vibration because "[Koros] Renamed variants Wave to Vibration and Storm to Wave" - rename hero.module.scss's &.storm to &.wave because "[Koros] Renamed variants Wave to Vibration and Storm to Wave" - switch react-helsinki-headless-cms's Navigation component to use HDS v3's Header because "[Navigation] Removed, use new Header instead" - deprecate variant property from NavigationProps as unused - language selection is a bit different in Header, needs to be checked sources: - HDS v3 migration guide: - https://hds.hel.fi/getting-started/tutorials/migrate-to-3.0.0/ - HDS releases v3.0.0 and v3.1.0: - https://github.com/City-of-Helsinki/helsinki-design-system/releases - /tag/v3.0.0 - /tag/v3.1.0 refs LIIKUNTA-584
City-of-Helsinki · Nov 6, 2023 · 59f9a43 · 59f9a43
1 parent ef0d6ac
commit 59f9a43
Show file tree

Hide file tree

Showing 10 changed files with 400 additions and 254 deletions.
diff --git a/package.json b/package.json
@@ -104,7 +104,7 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "git-rev-sync": "^3.0.2",
     "graphql": "^16.8.0",
-    "hds-react": "^2.17.0",
+    "hds-react": "^3.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.6.2",
     "jest-axe": "^8.0.0",
@@ -133,8 +133,8 @@
     "webpack": "^5.70.0"
   },
   "dependencies": {
-    "hds-core": "^2.17.0",
-    "hds-design-tokens": "^2.17.0",
+    "hds-core": "^3.1.0",
+    "hds-design-tokens": "^3.1.0",
     "html-entities": "^2.4.0",
     "html-react-parser": "^4.2.1",
     "isomorphic-dompurify": "^1.8.0",

diff --git a/src/common/components/icons/index.tsx b/src/common/components/icons/index.tsx
@@ -1,160 +1,199 @@
 export {
-  IconZoomOut,
-  IconZoomIn,
-  IconYouth,
-  IconWifiCrossed,
-  IconWifi,
-  IconVolumePlus,
-  IconVolumeMute,
-  IconVolumeMinus,
-  IconVolumeLow,
-  IconVolumeHigh,
-  IconVirus,
-  IconVideocameraCrossed,
-  IconVideocamera,
-  IconVaccine,
-  IconUploadCloud,
-  IconTraveler,
-  IconTrash,
-  IconThumbsUp,
-  IconThumbsUpFill,
+  IconAlertCircle,
+  IconAlertCircleFill,
+  IconAngleDown,
+  IconAngleLeft,
+  IconAngleRight,
+  IconAngleUp,
+  IconArrowBottomLeft,
+  IconArrowBottomRight,
+  IconArrowDown,
+  IconArrowLeft,
+  IconArrowRedo,
+  IconArrowRight,
+  IconArrowRightDashed,
+  IconArrowTopLeft,
+  IconArrowTopRight,
+  IconArrowUndo,
+  IconArrowUp,
+  IconAtSign as IconGlyphAt, // @deprecated Use IconAtSign instead
+  IconAtSign,
+  IconBagCogwheel,
+  IconBell,
+  IconBellCrossed,
+  IconBinoculars,
+  IconCake,
+  IconCalendar,
+  IconCalendarClock,
+  IconCalendarCross,
+  IconCalendarEvent as IconEvent, // @deprecated Use IconCalendarEvent instead
+  IconCalendarEvent,
+  IconCalendarPlus,
+  IconCalendarRecurring,
+  IconCamera,
+  IconCheck,
+  IconCheckCircle,
+  IconCheckCircleFill,
+  IconChildren,
+  IconClock,
+  IconClockCross,
+  IconClockPlus,
+  IconCoffeeCupSaucer,
+  IconCogwheel,
+  IconCogwheels,
+  IconCollapse,
+  IconCompany,
+  IconCopy,
+  IconCross,
+  IconCrossCircle,
+  IconCrossCircleFill,
+  IconCustomerBotNegative,
+  IconCustomerBotNeutral,
+  IconCustomerBotPositive,
+  IconDiscord,
+  IconDisplay,
+  IconDocument,
+  IconDownload,
+  IconDownloadCloud,
+  IconDrag,
+  IconEntrepreneur,
+  IconEnvelope,
+  IconError,
+  IconErrorFill,
+  IconEuroSign as IconGlyphEuro, // @deprecated Use IconEuroSign instead
+  IconEuroSign,
+  IconEye,
+  IconEyeCrossed,
+  IconFacebook,
+  IconFaceNeutral,
+  IconFaceSad,
+  IconFaceSmile,
+  IconFamily,
+  IconGlobe,
+  IconGoogle,
+  IconGraphColumns,
+  IconGroup,
+  IconHammers,
+  IconHeadphones,
+  IconHeart,
+  IconHeartFill,
+  IconHistory,
+  IconHome,
+  IconHomeSmoke,
+  IconInfoCircle,
+  IconInfoCircleFill,
+  IconInstagram,
+  IconKey,
+  IconLayers,
+  IconLightbulb,
+  IconLink,
+  IconLinkedin,
+  IconLinkExternal,
+  IconLocate,
+  IconLocation,
+  IconLock,
+  IconLockOpen,
+  IconMap,
+  IconMenuDots,
+  IconMenuHamburger,
+  IconMicrophone,
+  IconMicrophoneCrossed,
+  IconMinus,
+  IconMinusCircle,
+  IconMinusCircleFill,
+  IconMobile,
+  IconMoneyBag,
+  IconMoneyBagFill,
+  IconMover,
+  IconOccupation,
+  IconPaperclip,
+  IconPen,
+  IconPenLine,
+  IconPersonFemale,
+  IconPersonGenderless,
+  IconPersonMale,
+  IconPersonWheelchair,
+  IconPhone,
+  IconPhoto,
+  IconPhotoPlus,
+  IconPlaybackFastforward,
+  IconPlaybackNext,
+  IconPlaybackPause,
+  IconPlaybackPlay,
+  IconPlaybackPrevious,
+  IconPlaybackRecord,
+  IconPlaybackRewind,
+  IconPlaybackStop,
+  IconPlus,
+  IconPlusCircle,
+  IconPlusCircleFill,
+  IconPodcast,
+  IconPrinter,
+  IconQuestionCircle,
+  IconQuestionCircleFill,
+  IconRefresh,
+  IconRestaurant,
+  IconRss,
+  IconSaveDiskette,
+  IconSaveDisketteFill,
+  IconScroll,
+  IconScrollCogwheel,
+  IconScrollContent,
+  IconScrollGroup,
+  IconSearch,
+  IconSenior,
+  IconShare,
+  IconShield,
+  IconShoppingCart,
+  IconSignin,
+  IconSignout,
+  IconSitemap,
+  IconSliders,
+  IconSnapchat,
+  IconSort,
+  IconSortAlphabeticalAscending,
+  IconSortAlphabeticalDescending,
+  IconSortAscending,
+  IconSortDescending,
+  IconSpeechbubble,
+  IconSpeechbubbleText,
+  IconStar,
+  IconStarFill,
+  IconSwapUser,
+  IconTextBold,
+  IconTextItalic,
+  IconTextTool,
   IconThumbsDown,
   IconThumbsDownFill,
+  IconThumbsUp,
+  IconThumbsUpFill,
   IconTicket,
-  IconTextTool,
-  IconTextItalic,
-  IconTextBold,
-  IconSwapUser,
-  IconStarFill,
-  IconStar,
-  IconSpeechbubbleText,
-  IconSpeechbubble,
-  IconSliders,
-  IconSitemap,
-  IconSignout,
-  IconShoppingCart,
-  IconShare,
-  IconSenior,
-  IconShield,
-  IconScroll,
-  IconScrollGroup,
-  IconScrollContent,
-  IconScrollCogwheel,
-  IconSaveDisketteFill,
-  IconSaveDiskette,
-  IconRestaurant,
-  IconRefresh,
-  IconQuestionCircleFill,
-  IconPrinter,
-  IconPodcast,
-  IconPlusCircleFill,
-  IconPlusCircle,
-  IconPlaybackStop,
-  IconPlaybackRewind,
-  IconPlaybackRecord,
-  IconPlaybackPrevious,
-  IconPlaybackPlay,
-  IconPlaybackNext,
-  IconPlaybackFastforward,
-  IconPhotoPlus,
-  IconPhone,
-  IconPersonWheelchair,
-  IconPersonMale,
-  IconPersonGenderless,
-  IconPersonFemale,
-  IconPenLine,
-  IconPen,
-  IconPaperclip,
-  IconOccupation,
-  IconMover,
-  IconMoneyBag,
-  IconMoneyBagFill,
-  IconMobile,
-  IconMinusCircleFill,
-  IconMinusCircle,
-  IconMicrophoneCrossed,
-  IconMicrophone,
-  IconMenuDots,
-  IconMap,
-  IconLockOpen,
-  IconLock,
-  IconLocation,
-  IconLocate,
-  IconLink,
-  IconLightbulb,
-  IconLayers,
-  IconKey,
-  IconInfoCircle,
-  IconHomeSmoke,
-  IconHome,
-  IconHistory,
-  IconHeartFill,
-  IconHeart,
-  IconHeadphones,
-  IconHammers,
-  IconGroup,
-  IconGraphColumns,
-  IconGlyphEuro,
-  IconGlyphAt,
-  IconGlobe,
-  IconFamily,
-  IconFaceSmile,
-  IconFaceSad,
-  IconFaceNeutral,
-  IconEvent,
-  IconEnvelope,
-  IconEntrepreneur,
-  IconDrag,
-  IconDownloadCloud,
-  IconDownload,
-  IconDisplay,
-  IconCustomerBotPositive,
-  IconCustomerBotNeutral,
-  IconCustomerBotNegative,
-  IconCopy,
-  IconCompany,
-  IconCollapse,
-  IconCogwheels,
-  IconCogwheel,
-  IconCoffeeCupSaucer,
-  IconClockPlus,
-  IconClockCross,
-  IconClock,
-  IconChildren,
-  IconCheckCircle,
-  IconCamera,
-  IconCalendarRecurring,
-  IconCalendarPlus,
-  IconCalendarCross,
-  IconCalendarClock,
-  IconCake,
-  IconBellCrossed,
-  IconBell,
-  IconBinoculars,
-  IconBagCogwheel,
-  IconArrowUndo,
-  IconArrowTopRight,
-  IconArrowTopLeft,
-  IconArrowRightDashed,
-  IconArrowRedo,
-  IconArrowLeft,
-  IconArrowDown,
-  IconArrowBottomRight,
-  IconArrowBottomLeft,
-  IconAlertCircle,
-  IconYoutube,
-  IconYle,
-  IconWhatsApp,
-  IconVimeo,
-  IconTwitter,
-  IconTwitch,
   IconTiktok,
-  IconSnapchat,
-  IconRss,
-  IconLinkedin,
-  IconInstagram,
-  IconGoogle,
-  IconFacebook,
-  IconDiscord,
+  IconTrash,
+  IconTraveler,
+  IconTwitch,
+  IconTwitter,
+  IconUpload,
+  IconUploadCloud,
+  IconUser,
+  IconVaccine,
+  IconVideocamera,
+  IconVideocameraCrossed,
+  IconVimeo,
+  IconVirus,
+  IconVolumeHigh,
+  IconVolumeLow,
+  IconVolumeMinus,
+  IconVolumeMute,
+  IconVolumePlus,
+  IconWhatsapp as IconWhatsApp, // @deprecated Use IconWhatsapp instead
+  IconWhatsapp,
+  IconWifi,
+  IconWifiCrossed,
+  IconYle,
+  IconYouth,
+  IconYoutube,
+  IconZoomIn,
+  IconZoomOut,
   IconZoomText,
 } from 'hds-react';
diff --git a/src/common/components/tag/Tag.tsx b/src/common/components/tag/Tag.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import classNames from 'classnames';
-import { RoundedTag as HDSTag } from 'hds-react';
+import { Tag as HDSTag } from 'hds-react';
 
 import styles from './tag.module.scss';
 import { theme1, theme2 } from './tagThemes';

diff --git a/src/core/hero/Hero.tsx b/src/core/hero/Hero.tsx
@@ -150,7 +150,7 @@ export default function Hero({
               korosType && styles[korosType],
             )}
             type={korosType}
-            flipHorizontal={!imageUrl}
+            flipVertical={!imageUrl}
             style={{
               fill: `var(--${
                 // eslint-disable-next-line no-nested-ternary