wip: chore update hds

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", // "jest-environment-jsdom",
 };
 
 const jestConfig = async () => {

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",

apps/admin-ui/src/common/ScrollToTop.tsx

@@ -5,11 +5,8 @@ import { Button, IconAngleUp } from "hds-react";
 import { useDebounce, useWindowSize } from "react-use";
 import { breakpoints } from "common/src/common/style";
 
-const Btn = styled(Button).attrs({
-  style: {
-    "--color-bus": "var(--color-black)",
-  } as React.CSSProperties,
-})`
+// "--color-bus": "var(--color-black)",
+const Btn = styled(Button)`
   width: 40px;
   height: 40px;
   background-color: var(--color-black);
@@ -54,9 +51,13 @@ function ScrollToTop(): JSX.Element | null {
     300
   );
 
+  const handleClick = () => {
+    window.scroll({ top: 0, left: 0, behavior: "smooth" });
+  }
+
   return isEnabled && isVisible ? (
-    <Btn onClick={() => window.scroll({ top: 0, left: 0, behavior: "smooth" })}>
-      <IconAngleUp />
+    <Btn onClick={handleClick} iconStart={<IconAngleUp />}>
+      ""
     </Btn>
   ) : null;
 }

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")}

apps/admin-ui/src/component/EditTimeModal.tsx

@@ -1,7 +1,7 @@
 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,12 +61,6 @@ const StyledDialog = styled(Dialog)`
   max-width: 944px;
 `;
 
-const btnCommon = {
-  theme: "black",
-  size: "small",
-  variant: "secondary",
-  disabled: false,
-} as const;
 
 function recurringReservationInfoText({
   weekdays,
@@ -280,7 +274,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 +283,10 @@ 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">

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;
 };
 

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>
   );

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 } 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,10 @@ export function More({
             })}
           </Counts>
           <Button
-            isLoading={isFetching}
-            variant="secondary"
+            // FIXME
+            // isLoading={isFetching}
+            variant={ButtonVariant.Secondary}
+            disabled={isFetching}
             onClick={handleClick}
           >
             {t("common.showMore")}

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}
       >

apps/admin-ui/src/component/QueryParamFilters/DayNavigation.tsx

@@ -2,7 +2,7 @@ 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 +80,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 +99,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>