feat: update major

nl-design-system · Jan 6, 2025 · f54b5de · f54b5de
1 parent a81beb6
commit f54b5de
Show file tree

Hide file tree

Showing 74 changed files with 3,800 additions and 5,171 deletions.
diff --git a/.ncurc.major.js b/.ncurc.major.js
@@ -1,9 +1,7 @@
 const minorConfig = require('./.ncurc.minor');
 
-// Prettier v3 breaks storybook: https://github.com/whitespace-se/storybook-addon-html/issues/104
-
 module.exports = {
   ...minorConfig,
-  reject: [...minorConfig.reject],
+  reject: [...minorConfig.reject, '@utrecht/component-library-react'],
   target: 'latest',
 };
diff --git a/.ncurc.minor.js b/.ncurc.minor.js
@@ -2,6 +2,6 @@ const patchConfig = require('./.ncurc.patch');
 
 module.exports = {
   ...patchConfig,
-  reject: [...patchConfig.reject],
+  reject: [...patchConfig.reject, '@nl-design-system-unstable/theme-toolkit'],
   target: 'minor',
 };
diff --git a/components/Action/package.json b/components/Action/package.json
@@ -34,6 +34,6 @@
     "@gemeente-denhaag/icons": "workspace:*",
     "@gemeente-denhaag/link": "workspace:*",
     "@gemeente-denhaag/utils": "workspace:*",
-    "date-fns": "3.6.0"
+    "date-fns": "4.1.0"
   }
 }
diff --git a/components/Action/src/Time.tsx b/components/Action/src/Time.tsx
@@ -1,5 +1,5 @@
 import React, { TimeHTMLAttributes } from 'react';
 
-interface Props extends TimeHTMLAttributes<HTMLTimeElement> {}
+type Props = TimeHTMLAttributes<HTMLTimeElement>;
 
 export const Time = ({ children, ...rest }: Props) => <time {...rest}>{children}</time>;
diff --git a/components/BadgeCounter/package.json b/components/BadgeCounter/package.json
@@ -30,8 +30,8 @@
     "watch:components": "chokidar --silent --follow-symlinks \"src/**/*\" -c \"pnpm run build\""
   },
   "dependencies": {
-    "@utrecht/component-library-react": "7.0.0",
-    "@utrecht/components": "7.3.0"
+    "@utrecht/component-library-react": "4.2.0",
+    "@utrecht/components": "7.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"

diff --git a/components/Breadcrumb/src/BreadcrumbListItem.tsx b/components/Breadcrumb/src/BreadcrumbListItem.tsx
@@ -2,7 +2,7 @@ import React, { LiHTMLAttributes } from 'react';
 import clsx from 'clsx';
 import './index.scss';
 
-export interface BreadcrumbListItemProps extends LiHTMLAttributes<HTMLLIElement> {}
+export type BreadcrumbListItemProps = LiHTMLAttributes<HTMLLIElement>;
 
 export const BreadcrumbListItem: React.FC<BreadcrumbListItemProps> = ({
   hidden,

diff --git a/components/ButtonLink/package.json b/components/ButtonLink/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@utrecht/component-library-react": "4.2.0",
-    "@utrecht/components": "6.1.0"
+    "@utrecht/components": "7.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"

diff --git a/components/Card/src/Card/Card.tsx b/components/Card/src/Card/Card.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react';
 import '../index.scss';
 import clsx from 'clsx';
 
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {}
+export type CardProps = HTMLAttributes<HTMLDivElement>;
 
 export const Card = ({ className, ...props }: CardProps) => {
   const classNames = clsx('denhaag-card', className);

diff --git a/components/Card/src/Card/CardActions.tsx b/components/Card/src/Card/CardActions.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react';
 import '../index.scss';
 import clsx from 'clsx';
 
-export interface CardActionsProps extends HTMLAttributes<HTMLDivElement> {}
+export type CardActionsProps = HTMLAttributes<HTMLDivElement>;
 
 export const CardActions = ({ className, ...props }: CardActionsProps) => {
   const classNames = clsx('denhaag-card__actions', className);

diff --git a/components/Card/src/Card/CardBackground.tsx b/components/Card/src/Card/CardBackground.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react';
 import '../index.scss';
 import clsx from 'clsx';
 
-export interface CardBackgroundProps extends HTMLAttributes<HTMLDivElement> {}
+export type CardBackgroundProps = HTMLAttributes<HTMLDivElement>;
 
 export const CardBackground = ({ className, ...props }: CardBackgroundProps) => {
   const classNames = clsx('denhaag-card__background', className);

diff --git a/components/Card/src/Card/CardContent.tsx b/components/Card/src/Card/CardContent.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react';
 import '../index.scss';
 import clsx from 'clsx';
 
-export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {}
+export type CardContentProps = HTMLAttributes<HTMLDivElement>;
 
 export const CardContent = ({ className, ...props }: CardContentProps) => {
   const classNames = clsx('denhaag-card__content', className);

diff --git a/components/Card/src/Card/CardDate.tsx b/components/Card/src/Card/CardDate.tsx
@@ -1,7 +1,7 @@
 import React, { TimeHTMLAttributes } from 'react';
 import '../index.scss';
 
-export interface CardDateProps extends TimeHTMLAttributes<HTMLTimeElement> {}
+export type CardDateProps = TimeHTMLAttributes<HTMLTimeElement>;
 
 export const CardDate = ({ ...props }: CardDateProps) => {
   return <time {...props}></time>;

diff --git a/components/Card/src/Card/CardDateWrapper.tsx b/components/Card/src/Card/CardDateWrapper.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react';
 import '../index.scss';
 import clsx from 'clsx';
 
-export interface CardDateWrapperProps extends HTMLAttributes<HTMLDivElement> {}
+export type CardDateWrapperProps = HTMLAttributes<HTMLDivElement>;
 
 export const CardDateWrapper = ({ className, ...props }: CardDateWrapperProps) => {
   const classNames = clsx('denhaag-card__date-wrapper', className);

diff --git a/components/Card/src/Card/CardTextWrapper.tsx b/components/Card/src/Card/CardTextWrapper.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react';
 import '../index.scss';
 import clsx from 'clsx';
 
-export interface CardTextWrapperProps extends HTMLAttributes<HTMLDivElement> {}
+export type CardTextWrapperProps = HTMLAttributes<HTMLDivElement>;
 
 export const CardTextWrapper = ({ className, ...props }: CardTextWrapperProps) => {
   const classNames = clsx('denhaag-card__text-wrapper', className);

diff --git a/components/Card/src/Card/CardWrapper.tsx b/components/Card/src/Card/CardWrapper.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react';
 import '../index.scss';
 import clsx from 'clsx';
 
-export interface CardWrapperProps extends HTMLAttributes<HTMLDivElement> {}
+export type CardWrapperProps = HTMLAttributes<HTMLDivElement>;
 
 export const CardWrapper = ({ className, ...props }: CardWrapperProps) => {
   const classNames = clsx('denhaag-card__wrapper', className);

diff --git a/components/Checkbox/package.json b/components/Checkbox/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@utrecht/component-library-react": "4.2.0",
-    "@utrecht/components": "6.1.0"
+    "@utrecht/components": "7.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"

diff --git a/components/ContactTimeline/src/ContactTimelineHeaderChannel.tsx b/components/ContactTimeline/src/ContactTimelineHeaderChannel.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineHeaderChannelProps extends HTMLAttributes<HTMLDivElement> {}
+type ContactTimelineHeaderChannelProps = HTMLAttributes<HTMLDivElement>;
 
 export const ContactTimelineHeaderChannel: React.FC<ContactTimelineHeaderChannelProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__step-header__channel')}>{children}</div>;

diff --git a/components/ContactTimeline/src/ContactTimelineHeaderContent.tsx b/components/ContactTimeline/src/ContactTimelineHeaderContent.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineHeaderContentProps extends HTMLAttributes<HTMLDivElement> {}
+type ContactTimelineHeaderContentProps = HTMLAttributes<HTMLDivElement>;
 
 export const ContactTimelineHeaderContent: React.FC<ContactTimelineHeaderContentProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__step-header__content')}>{children}</div>;

diff --git a/components/ContactTimeline/src/ContactTimelineHeaderDate.tsx b/components/ContactTimeline/src/ContactTimelineHeaderDate.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineHeaderDateProps extends HTMLAttributes<HTMLDivElement> {}
+type ContactTimelineHeaderDateProps = HTMLAttributes<HTMLDivElement>;
 
 export const ContactTimelineHeaderDate: React.FC<ContactTimelineHeaderDateProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__step-header__date')}>{children}</div>;

diff --git a/components/ContactTimeline/src/ContactTimelineItemFile.tsx b/components/ContactTimeline/src/ContactTimelineItemFile.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineItemFileProps extends HTMLAttributes<HTMLDivElement> {}
+type ContactTimelineItemFileProps = HTMLAttributes<HTMLDivElement>;
 
 export const ContactTimelineItemFile: React.FC<ContactTimelineItemFileProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__step-item-file')}>{children}</div>;

diff --git a/components/ContactTimeline/src/ContactTimelineItemSender.tsx b/components/ContactTimeline/src/ContactTimelineItemSender.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineItemSenderProps extends HTMLAttributes<HTMLDivElement> {}
+type ContactTimelineItemSenderProps = HTMLAttributes<HTMLDivElement>;
 
 export const ContactTimelineItemSender: React.FC<ContactTimelineItemSenderProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__step-item-sender')}>{children}</div>;

diff --git a/components/ContactTimeline/src/ContactTimelineList.tsx b/components/ContactTimeline/src/ContactTimelineList.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { OlHTMLAttributes } from 'react';
 
-export interface ContactTimelineListProps extends OlHTMLAttributes<HTMLOListElement> {}
+export type ContactTimelineListProps = OlHTMLAttributes<HTMLOListElement>;
 
 export const ContactTimelineList: React.FC<ContactTimelineListProps> = ({
   className,

diff --git a/components/ContactTimeline/src/ContactTimelineMeta.tsx b/components/ContactTimeline/src/ContactTimelineMeta.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineMetaProps extends HTMLAttributes<HTMLDivElement> {}
+type ContactTimelineMetaProps = HTMLAttributes<HTMLDivElement>;
 
 export const ContactTimelineMeta: React.FC<ContactTimelineMetaProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__meta')}>{children}</div>;

diff --git a/components/ContactTimeline/src/ContactTimelineMetaItem.tsx b/components/ContactTimeline/src/ContactTimelineMetaItem.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineMetaItemProps extends HTMLAttributes<HTMLDivElement> {}
+type ContactTimelineMetaItemProps = HTMLAttributes<HTMLDivElement>;
 
 export const ContactTimelineMetaItem: React.FC<ContactTimelineMetaItemProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__meta-item')}>{children}</div>;

diff --git a/components/ContactTimeline/src/ContactTimelineMetaSeparator.tsx b/components/ContactTimeline/src/ContactTimelineMetaSeparator.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
-interface ContactTimelineMetaSeparatorProps extends HTMLAttributes<HTMLDivElement> {}
+type ContactTimelineMetaSeparatorProps = HTMLAttributes<HTMLDivElement>;
 
 export const ContactTimelineMetaSeparator: React.FC<ContactTimelineMetaSeparatorProps> = ({ children }) => {
   return <div className={clsx('denhaag-contact-timeline__meta-separator')}>{children}</div>;

diff --git a/components/ContactTimeline/src/ContactTimelineMetaTimeItem.tsx b/components/ContactTimeline/src/ContactTimelineMetaTimeItem.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { TimeHTMLAttributes } from 'react';
 
-interface ContactTimelineMetaTimeItemProps extends TimeHTMLAttributes<HTMLTimeElement> {}
+type ContactTimelineMetaTimeItemProps = TimeHTMLAttributes<HTMLTimeElement>;
 
 export const ContactTimelineMetaTimeItem: React.FC<ContactTimelineMetaTimeItemProps> = ({
   children,

diff --git a/components/DescriptionList/src/DescriptionListItem.tsx b/components/DescriptionList/src/DescriptionListItem.tsx
@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from 'react';
 import clsx from 'clsx';
 
-export interface DescriptionListItemProps extends HTMLAttributes<HTMLDivElement> {}
+export type DescriptionListItemProps = HTMLAttributes<HTMLDivElement>;
 
 export const DescriptionListItem = ({ className, children, ...props }: DescriptionListItemProps) => {
   const classNames = clsx('denhaag-description-list-item', className);

diff --git a/components/Footer/package.json b/components/Footer/package.json
@@ -36,7 +36,7 @@
     "@gemeente-denhaag/link-group": "workspace:*",
     "@gemeente-denhaag/list": "workspace:*",
     "@gemeente-denhaag/responsive-content": "workspace:*",
-    "@utrecht/component-library-css": "4.1.0",
+    "@utrecht/component-library-css": "7.0.0",
     "@utrecht/component-library-react": "4.2.0"
   }
 }
diff --git a/components/FormField/package.json b/components/FormField/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@utrecht/component-library-react": "4.2.0",
-    "@utrecht/components": "6.1.0"
+    "@utrecht/components": "7.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"

diff --git a/components/FormFieldDescription/package.json b/components/FormFieldDescription/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@utrecht/component-library-react": "4.2.0",
-    "@utrecht/components": "6.1.0"
+    "@utrecht/components": "7.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"

diff --git a/components/FormFieldErrorMessage/package.json b/components/FormFieldErrorMessage/package.json
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@utrecht/component-library-react": "4.2.0",
-    "@utrecht/components": "6.1.0"
+    "@utrecht/components": "7.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"

diff --git a/components/FormFieldSet/package.json b/components/FormFieldSet/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@utrecht/component-library-react": "4.2.0",
-    "@utrecht/components": "6.1.0"
+    "@utrecht/components": "7.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"

diff --git a/components/FormLabel/package.json b/components/FormLabel/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@utrecht/component-library-react": "4.2.0",
-    "@utrecht/components": "6.1.0"
+    "@utrecht/components": "7.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"

diff --git a/components/HeaderLogo/src/index.tsx b/components/HeaderLogo/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const HeaderLogo: React.VoidFunctionComponent = () => {
+export const HeaderLogo = () => {
   return (
     <svg
       className="denhaag-header__logo"

diff --git a/components/Hero/src/index.scss b/components/Hero/src/index.scss
@@ -8,7 +8,8 @@
             var(--denhaag-hero-columns, 12) -
               (var(--denhaag-hero-content-column-end, 12) + var(--denhaag-hero-content-column-offset, 0))
           )
-      ) + var(--denhaag-hero-image-path, 0)
+      ) +
+      var(--denhaag-hero-image-path, 0)
   );
 
   background-color: var(--denhaag-hero-background-color);
@@ -58,7 +59,8 @@
     (
         (var(--denhaag-hero-container-max-width) / var(--denhaag-hero-columns, 12)) *
           var(--denhaag-hero-theme-page-image-start)
-      ) + var(--denhaag-hero-image-path, 0)
+      ) +
+      var(--denhaag-hero-image-path, 0)
   );
   --denhaag-hero-theme-page-content-padding-inline: calc(
     (var(--denhaag-hero-container-max-width) / var(--denhaag-hero-columns, 12)) * 1
@@ -252,7 +254,8 @@
       (
           (var(--denhaag-hero-container-max-width) / var(--denhaag-hero-columns, 12)) *
             var(--denhaag-hero-routing-shape-start, 1)
-        ) + var(--denhaag-hero-container-gutter)
+        ) +
+        var(--denhaag-hero-container-gutter)
     );
     --denhaag-hero-theme-page-image-start: var(--denhaag-hero-theme-page-image-start-m);
 

diff --git a/components/Icons/src/@types/index.d.ts b/components/Icons/src/@types/index.d.ts
@@ -1,7 +1,7 @@
 declare module '*.svg' {
-  import React = require('react');
+  import React from 'react';
   export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
-  const src: string;
+  const src: React.ElementType;
   export default src;
 }
 

diff --git a/components/Icons/src/index.tsx b/components/Icons/src/index.tsx
@@ -79,9 +79,7 @@ import TwitterSvg from './svg/social/twitter.svg';
 import WhatsAppSvg from './svg/social/whatsapp.svg';
 import YouTubeSvg from './svg/social/youtube.svg';
 
-const buildIcon: React.ElementType = (svg: React.ElementType, props: SvgIconProps) => (
-  <SvgIcon component={svg} {...props} />
-);
+const buildIcon = (svg: React.ElementType, props: SvgIconProps) => <SvgIcon component={svg} {...props} />;
 type F = React.FunctionComponent<SvgIconProps>; // less typing
 
 // Arrows

diff --git a/components/LanguageSwitcher/src/LanguageSwitcherLink.tsx b/components/LanguageSwitcher/src/LanguageSwitcherLink.tsx
@@ -1,7 +1,7 @@
 import React, { AnchorHTMLAttributes } from 'react';
 import './index.scss';
 
-export type Link = (props: AnchorHTMLAttributes<HTMLAnchorElement>) => JSX.Element;
+export type Link = (props: AnchorHTMLAttributes<HTMLAnchorElement>) => React.ReactNode;
 
 export interface LanguageSwitcherLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   Link?: Link;

diff --git a/components/LinkButton/package.json b/components/LinkButton/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@utrecht/component-library-react": "4.2.0",
-    "@utrecht/components": "6.1.0"
+    "@utrecht/components": "7.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"

diff --git a/components/LinkList/package.json b/components/LinkList/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@utrecht/component-library-react": "4.2.0",
-    "@utrecht/components": "6.1.0"
+    "@utrecht/components": "7.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"

diff --git a/components/LinkList/src/LinkList.tsx b/components/LinkList/src/LinkList.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export interface LinkListProps extends React.HTMLAttributes<HTMLUListElement> {}
+export type LinkListProps = React.HTMLAttributes<HTMLUListElement>;
 
 export const LinkList = ({ className, ...props }: LinkListProps) => {
   const classNames = clsx('utrecht-link-list--html-ul', 'utrecht-link-list', className);