wip: chore update hds

City-of-Helsinki · Jan 13, 2025 · b535c40 · b535c40
1 parent 14d1f44
commit b535c40
Show file tree

Hide file tree

Showing 127 changed files with 1,665 additions and 1,614 deletions.
diff --git a/apps/admin-ui/jest.config.mjs b/apps/admin-ui/jest.config.mjs
@@ -11,7 +11,8 @@ const customJestConfig = {
   modulePathIgnorePatterns: ["<rootDir>/.next/"],
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
   moduleDirectories: ["node_modules", "<rootDir>/"],
-  testEnvironment: "jest-environment-jsdom",
+  // jsdom has broken stylesheet parsing
+  testEnvironment: "@happy-dom/jest-environment",
 };
 
 const jestConfig = async () => {

diff --git a/apps/admin-ui/package.json b/apps/admin-ui/package.json
@@ -40,8 +40,8 @@
     "eslint-config-custom": "workspace:*",
     "form-data": "^4.0.0",
     "graphql": "^16.9.0",
-    "hds-core": "^3.11.0",
-    "hds-react": "^3.11.0",
+    "hds-core": "^4.1.0",
+    "hds-react": "^4.1.0",
     "i18next": "^23.15.1",
     "lodash": "^4.17.21",
     "next": "15.0.3",
@@ -64,6 +64,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@happy-dom/jest-environment": "^16.5.3",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
@@ -78,9 +79,9 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.29",
     "@vercel/style-guide": "^6.0.0",
+    "happy-dom": "^16.5.3",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.10",
     "postcss-scss": "^4.0.9",
     "postcss-styled-syntax": "^0.6.4",

diff --git a/apps/admin-ui/src/common/ScrollToTop.tsx b/apps/admin-ui/src/common/ScrollToTop.tsx
@@ -4,12 +4,9 @@ import { useScrollPosition } from "@n8tb1t/use-scroll-position";
 import { Button, IconAngleUp } from "hds-react";
 import { useDebounce, useWindowSize } from "react-use";
 import { breakpoints } from "common/src/common/style";
+import { useTranslation } from "next-i18next";
 
-const Btn = styled(Button).attrs({
-  style: {
-    "--color-bus": "var(--color-black)",
-  } as React.CSSProperties,
-})`
+const Btn = styled(Button)`
   width: 40px;
   height: 40px;
   background-color: var(--color-black);
@@ -25,6 +22,7 @@ const Btn = styled(Button).attrs({
 const breakpoint = breakpoints.m;
 
 function ScrollToTop(): JSX.Element | null {
+  const { t } = useTranslation();
   const [isEnabled, setIsEnabled] = useState<boolean>(false);
   const [isVisible, setIsVisible] = useState<boolean>(false);
 
@@ -54,11 +52,24 @@ function ScrollToTop(): JSX.Element | null {
     300
   );
 
-  return isEnabled && isVisible ? (
-    <Btn onClick={() => window.scroll({ top: 0, left: 0, behavior: "smooth" })}>
-      <IconAngleUp />
+  const handleClick = () => {
+    window.scroll({ top: 0, left: 0, behavior: "smooth" });
+  };
+
+  if (!isEnabled || !isVisible) {
+    return null;
+  }
+  return (
+    /* eslint-disable -- don't remove empty string */
+    <Btn
+      aria-label={t("common:scrollToTop")}
+      onClick={handleClick}
+      iconStart={<IconAngleUp aria-hidden="true" />}
+    >
+      {""}
     </Btn>
-  ) : null;
+    /* eslint-enable */
+  );
 }
 
 export default ScrollToTop;
diff --git a/apps/admin-ui/src/component/DenyDialog.tsx b/apps/admin-ui/src/component/DenyDialog.tsx
@@ -3,8 +3,10 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import {
   Button,
+  ButtonVariant,
   Dialog,
   RadioButton,
+  Select,
   SelectionGroup,
   TextArea,
 } from "hds-react";
@@ -19,14 +21,13 @@ import {
   OrderStatus,
 } from "@gql/gql-types";
 import { useModal } from "@/context/ModalContext";
-import { Select } from "@/component/Select";
 import { CenterSpinner, Flex } from "common/styles/util";
 import { CustomDialogHeader } from "@/component/CustomDialogHeader";
 import { useDenyReasonOptions } from "@/hooks";
 import { successToast, errorToast } from "common/src/common/toast";
 import { gql } from "@apollo/client";
 import { getValidationErrors } from "common/src/apolloUtils";
-import { toNumber } from "common/src/helpers";
+import { convertOptionToHDS, toNumber } from "common/src/helpers";
 
 const ActionButtons = styled(Dialog.ActionButtons)`
   justify-content: end;
@@ -180,14 +181,19 @@ function DialogContent({ reservation, onClose, onReject }: Props): JSX.Element {
       <Dialog.Content>
         <Flex>
           <Select
-            required
             id="denyReason"
-            options={options}
-            placeholder={t("common.select")}
-            label={t("RequestedReservation.DenyDialog.denyReason")}
-            onChange={(v) => setDenyReason(Number(v))}
-            value={denyReasonPk}
-            helper={t("RequestedReservation.DenyDialog.denyReasonHelper")}
+            required
+            texts={{
+              placeholder: t("common.select"),
+              label: t("RequestedReservation.DenyDialog.denyReason"),
+              assistive: t("RequestedReservation.DenyDialog.denyReasonHelper"),
+            }}
+            options={options.map(convertOptionToHDS)}
+            value={denyReasonPk ? denyReasonPk.toString() : undefined}
+            onChange={(selected) => {
+              const v = selected.find(() => true)?.value;
+              setDenyReason(toNumber(v));
+            }}
           />
           <TextArea
             value={handlingDetails}
@@ -207,9 +213,8 @@ function DialogContent({ reservation, onClose, onReject }: Props): JSX.Element {
       </Dialog.Content>
       <ActionButtons>
         <Button
-          variant="secondary"
+          variant={ButtonVariant.Secondary}
           onClick={onClose}
-          theme="black"
           data-testid="deny-dialog__cancel-button"
         >
           {t("common.prev")}

diff --git a/apps/admin-ui/src/component/EditTimeModal.tsx b/apps/admin-ui/src/component/EditTimeModal.tsx
@@ -1,7 +1,14 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { Button, Dialog, Notification } from "hds-react";
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  Dialog,
+  Notification,
+  NotificationSize,
+} from "hds-react";
 import { z } from "zod";
 import { type TFunction } from "i18next";
 import {
@@ -61,13 +68,6 @@ const StyledDialog = styled(Dialog)`
   max-width: 944px;
 `;
 
-const btnCommon = {
-  theme: "black",
-  size: "small",
-  variant: "secondary",
-  disabled: false,
-} as const;
-
 function recurringReservationInfoText({
   weekdays,
   begin,
@@ -280,7 +280,7 @@ function DialogContent({
         </TimeInfoBox>
         {hasCollisions && (
           <Notification
-            size="small"
+            size={NotificationSize.Small}
             label={t(`${commonTrKey}.error.reservationCollides`)}
             type="error"
             style={{ marginTop: "var(--spacing-s)", gridColumn: "1 / -1" }}
@@ -289,7 +289,11 @@ function DialogContent({
           </Notification>
         )}
         <ActionButtons>
-          <Button {...btnCommon} onClick={onClose}>
+          <Button
+            size={ButtonSize.Small}
+            variant={ButtonVariant.Secondary}
+            onClick={onClose}
+          >
             {t("common.cancel")}
           </Button>
           <Button disabled={isDisabled} type="submit">

diff --git a/apps/admin-ui/src/component/ExternalLink.tsx b/apps/admin-ui/src/component/ExternalLink.tsx
@@ -1,13 +1,13 @@
 import React from "react";
-import { IconLinkExternal } from "hds-react";
+import { IconLinkExternal, IconSize } from "hds-react";
 import styled from "styled-components";
 import { fontMedium } from "common/src/common/typography";
 import { Link } from "react-router-dom";
 
 type Props = {
   to: string;
   children: string;
-  size?: "xs" | "s" | "m" | "l" | "xl";
+  size?: IconSize;
   isBold?: boolean;
 };
 

diff --git a/apps/admin-ui/src/component/LinkPrev.tsx b/apps/admin-ui/src/component/LinkPrev.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
-import { IconAngleLeft } from "hds-react";
+import { IconAngleLeft, IconSize } from "hds-react";
 import { Link } from "react-router-dom";
 
 const StyledLink = styled(Link)`
@@ -32,7 +32,7 @@ function LinkPrevInner({ route, style, className }: Props): JSX.Element {
       className={className}
       data-testid="link__previous"
     >
-      <IconAngleLeft size="s" aria-hidden />
+      <IconAngleLeft size={IconSize.Small} aria-hidden="true" />
       {t("common.prev")}
     </StyledLink>
   );

diff --git a/apps/admin-ui/src/component/More.tsx b/apps/admin-ui/src/component/More.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { Button } from "hds-react";
+import { Button, ButtonVariant, LoadingSpinner } from "hds-react";
 import { useTranslation } from "react-i18next";
 import type { ApolloQueryResult } from "@apollo/client";
 import type { PageInfo, Query } from "@gql/gql-types";
@@ -45,8 +45,9 @@ export function More({
             })}
           </Counts>
           <Button
-            isLoading={isFetching}
-            variant="secondary"
+            variant={isFetching ? ButtonVariant.Clear : ButtonVariant.Secondary}
+            iconStart={isFetching ? <LoadingSpinner small /> : undefined}
+            disabled={isFetching}
             onClick={handleClick}
           >
             {t("common.showMore")}

diff --git a/apps/admin-ui/src/component/Navigation.tsx b/apps/admin-ui/src/component/Navigation.tsx
@@ -6,6 +6,7 @@ import {
   IconSignout,
   IconStar,
   IconUser,
+  LogoSize,
   TitleStyleType,
 } from "hds-react";
 import React from "react";
@@ -281,7 +282,7 @@ const Navigation = ({ apiBaseUrl }: Props) => {
         titleStyle={TitleStyleType.Bold}
         titleHref={env.NEXT_PUBLIC_BASE_URL ?? "/"}
         openFrontPageLinksAriaLabel={t("common:applicationName")}
-        logo={<Logo size="large" style={{ filter: "invert(1)" }} />}
+        logo={<Logo size={LogoSize.Large} style={{ filter: "invert(1)" }} />}
         logoAriaLabel={`${t("common:applicationName")} logo`}
         logoHref={env.NEXT_PUBLIC_BASE_URL}
       >

diff --git a/apps/admin-ui/src/component/QueryParamFilters/ComboboxFilter.tsx b/apps/admin-ui/src/component/QueryParamFilters/ComboboxFilter.tsx
diff --git a/apps/admin-ui/src/component/QueryParamFilters/DayNavigation.tsx b/apps/admin-ui/src/component/QueryParamFilters/DayNavigation.tsx
@@ -2,7 +2,14 @@ import React from "react";
 import styled from "styled-components";
 import { addDays, subDays } from "date-fns";
 import { useTranslation } from "next-i18next";
-import { Button, IconAngleLeft, IconAngleRight, DateInput } from "hds-react";
+import {
+  Button,
+  IconAngleLeft,
+  IconAngleRight,
+  DateInput,
+  ButtonSize,
+  ButtonVariant,
+} from "hds-react";
 import { fromUIDate, toUIDate } from "common/src/common/util";
 import { breakpoints } from "common";
 import { toMondayFirstUnsafe } from "common/src/helpers";
@@ -80,11 +87,10 @@ export function DayNavigation({ name }: Props): JSX.Element {
     <Wrapper>
       <Button
         aria-label={t("common.prev")}
-        size="small"
-        variant="supplementary"
-        theme="black"
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Supplementary}
         onClick={onPreviousDay}
-        iconLeft={<IconAngleLeft />}
+        iconStart={<IconAngleLeft aria-hidden="true" />}
       >
         {" "}
       </Button>
@@ -100,11 +106,10 @@ export function DayNavigation({ name }: Props): JSX.Element {
       />
       <Button
         aria-label={t("common.next")}
-        size="small"
-        variant="supplementary"
-        theme="black"
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Supplementary}
         onClick={onNextDay}
-        iconLeft={<IconAngleRight />}
+        iconStart={<IconAngleRight aria-hidden="true" />}
       >
         {" "}
       </Button>