Merge branch 'develop' into feat/DES-834-aspect-ratio-comp-to-prop

Amsterdam · Nov 7, 2024 · e993691 · e993691
2 parents dd73879 + eca5fe4
commit e993691
Show file tree

Hide file tree

Showing 22 changed files with 623 additions and 1,276 deletions.
diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -1,6 +1,6 @@
 {
-  "packages/css": "0.13.0",
-  "packages/react": "0.13.0",
+  "packages/css": "0.13.1",
+  "packages/react": "0.13.1",
   "proprietary/assets": "0.2.2",
   "proprietary/react-icons": "0.1.13",
   "proprietary/tokens": "0.13.0"

diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "./storybook"
   ],
   "devDependencies": {
-    "@types/node": "22.8.2",
+    "@types/node": "22.8.7",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "conventional-changelog-conventionalcommits": "8.0.0",
@@ -42,7 +42,7 @@
     "husky": "9.1.6",
     "lint-staged": "15.2.10",
     "markdownlint-cli": "0.42.0",
-    "npm-check-updates": "17.1.9",
+    "npm-check-updates": "17.1.10",
     "npm-package-json-lint": "8.0.0",
     "npm-run-all": "4.1.5",
     "plop": "4.0.1",

diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md
@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.13.1](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.13.0...design-system-css-v0.13.1) (2024-11-04)
+
+
+### Bug Fixes
+
+* Broken link Dialog docs ([#1731](https://github.com/Amsterdam/design-system/issues/1731)) ([be0cf82](https://github.com/Amsterdam/design-system/commit/be0cf82a147ebdacc44903eb72a3840926f77886))
+
 ## [0.13.0](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.12.0...design-system-css-v0.13.0) (2024-10-28)
 
 

diff --git a/packages/css/package.json b/packages/css/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.13.0",
+  "version": "0.13.1",
   "author": "Design System Team, City of Amsterdam <[email protected]>",
   "description": "Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.",
   "homepage": "https://designsystem.amsterdam/",
@@ -24,7 +24,7 @@
     "clean": "rimraf dist/"
   },
   "devDependencies": {
-    "sass": "1.80.4"
+    "sass": "1.80.6"
   },
   "peerDependencies": {
     "@amsterdam/design-system-tokens": "workspace:*",

diff --git a/packages/css/src/components/error-message/error-message.scss b/packages/css/src/components/error-message/error-message.scss
@@ -12,9 +12,11 @@
 
 .ams-error-message {
   color: var(--ams-error-message-color);
+  display: inline-flex;
   font-family: var(--ams-error-message-font-family);
   font-size: var(--ams-error-message-font-size);
   font-weight: var(--ams-error-message-font-weight);
+  gap: var(--ams-error-message-gap);
   line-height: var(--ams-error-message-line-height);
 
   @include text-rendering;

diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss
@@ -68,29 +68,3 @@
   inline-size: var(--ams-search-field-input-cancel-button-inline-size);
   margin-inline-start: 0.5rem;
 }
-
-@mixin reset-button {
-  border: 0;
-  margin-block: 0; // [1]
-  margin-inline: 0; // [1]
-
-  // [1] Remove the margin in older Safari.
-}
-
-.ams-search-field__button {
-  background-color: var(--ams-search-field-button-background-color);
-  color: var(--ams-search-field-button-color);
-  cursor: pointer;
-  outline-offset: var(--ams-search-field-button-outline-offset);
-
-  // TODO Check if these paddings are necessary
-  padding-block: var(--ams-search-field-button-padding-block);
-  padding-inline: var(--ams-search-field-button-padding-inline);
-  touch-action: manipulation;
-
-  @include reset-button;
-
-  &:hover {
-    background-color: var(--ams-search-field-button-hover-background-color);
-  }
-}
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.13.1](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.13.0...design-system-react-v0.13.1) (2024-11-04)
+
+
+### Bug Fixes
+
+* Resolve warnings against missing array keys in Button ([#1736](https://github.com/Amsterdam/design-system/issues/1736)) ([c60c897](https://github.com/Amsterdam/design-system/commit/c60c897655870da33e4dc8ba290d6563604f7f69))
+
 ## [0.13.0](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.12.0...design-system-react-v0.13.0) (2024-10-28)
 
 

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.13.0",
+  "version": "0.13.1",
   "author": "Design System Team, City of Amsterdam <[email protected]>",
   "description": "All React components from the Amsterdam Design System. Use it to compose pages in your website or application.",
   "homepage": "https://designsystem.amsterdam/",
@@ -51,11 +51,11 @@
     "@rollup/plugin-node-resolve": "15.3.0",
     "@rollup/pluginutils": "5.1.3",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.2",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.14",
-    "@types/lodash": "4.17.12",
+    "@types/lodash": "4.17.13",
     "@types/react": "18.3.12",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
@@ -64,16 +64,16 @@
     "postcss": "8.4.47",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rollup": "4.24.2",
+    "rollup": "4.24.4",
     "rollup-plugin-delete": "2.1.0",
     "rollup-plugin-dts": "6.1.1",
     "rollup-plugin-filesize": "10.0.0",
     "rollup-plugin-node-externals": "7.1.3",
     "rollup-plugin-node-polyfills": "0.2.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.80.4",
-    "tslib": "2.8.0"
+    "sass": "1.80.6",
+    "tslib": "2.8.1"
   },
   "peerDependencies": {
     "@amsterdam/design-system-css": "workspace:*",

diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
@@ -5,7 +5,7 @@
 
 import clsx from 'clsx'
 import { forwardRef } from 'react'
-import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren, ReactNode } from 'react'
+import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 import { Icon } from '../Icon'
 import type { IconProps } from '../Icon'
 
@@ -42,42 +42,19 @@ export const Button = forwardRef(
   (
     { children, className, disabled, icon, iconBefore, iconOnly, type, variant = 'primary', ...restProps }: ButtonProps,
     ref: ForwardedRef<HTMLButtonElement>,
-  ) => {
-    const content = (): ReactNode => {
-      switch (true) {
-        case !icon:
-          return children
-        case iconBefore:
-          return [<Icon svg={icon} size="level-5" />, children]
-        case iconOnly:
-          return [
-            <Icon key={1} svg={icon} size="level-5" square={true} />,
-            <span className="ams-visually-hidden" key={2}>
-              {children}
-            </span>,
-          ]
-        default:
-          return [children, <Icon svg={icon} size="level-5" />]
-      }
-    }
-
-    return (
-      <button
-        {...restProps}
-        className={clsx(
-          'ams-button',
-          `ams-button--${variant}`,
-          icon && iconOnly && !iconBefore && `ams-button--icon-only`,
-          className,
-        )}
-        disabled={disabled}
-        ref={ref}
-        type={type || 'button'}
-      >
-        {content()}
-      </button>
-    )
-  },
+  ) => (
+    <button
+      {...restProps}
+      className={clsx('ams-button', `ams-button--${variant}`, icon && iconOnly && `ams-button--icon-only`, className)}
+      disabled={disabled}
+      ref={ref}
+      type={type || 'button'}
+    >
+      {icon && (iconBefore || iconOnly) && <Icon svg={icon} size="level-5" square={iconOnly} />}
+      {icon && iconOnly ? <span className="ams-visually-hidden">{children}</span> : children}
+      {icon && !iconBefore && !iconOnly && <Icon svg={icon} size="level-5" />}
+    </button>
+  ),
 )
 
 Button.displayName = 'Button'
diff --git a/packages/react/src/ErrorMessage/ErrorMessage.test.tsx b/packages/react/src/ErrorMessage/ErrorMessage.test.tsx
@@ -54,4 +54,18 @@ describe('Error message', () => {
 
     expect(ref.current).toBe(component)
   })
+
+  it('shows an icon', () => {
+    const { container } = render(<ErrorMessage />)
+
+    const iconWrapper = container.querySelector('.ams-icon')
+    const icon = container.querySelector('svg')
+
+    expect(iconWrapper).toBeInTheDocument()
+    expect(icon).toBeInTheDocument()
+  })
+
+  // TODO: we can't currently test this, because we can't pass a class or anything to the SVG
+  // We plan on changing this, so we can test this in the future
+  it.skip('shows a custom icon', () => {})
 })
diff --git a/packages/react/src/ErrorMessage/ErrorMessage.tsx b/packages/react/src/ErrorMessage/ErrorMessage.tsx
@@ -3,21 +3,26 @@
  * Copyright Gemeente Amsterdam
  */
 
+import { AlertIcon } from '@amsterdam/design-system-react-icons'
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { Icon } from '../Icon'
 
 export type ErrorMessageProps = {
+  /** An icon to display instead of the default icon. */
+  icon?: Function
   /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
   prefix?: string
 } & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>
 
 export const ErrorMessage = forwardRef(
   (
-    { children, className, prefix = 'Invoerfout', ...restProps }: ErrorMessageProps,
+    { children, className, icon, prefix = 'Invoerfout', ...restProps }: ErrorMessageProps,
     ref: ForwardedRef<HTMLParagraphElement>,
   ) => (
     <p {...restProps} ref={ref} className={clsx('ams-error-message', className)}>
+      <Icon svg={icon ? icon : AlertIcon} size="level-6" />
       <span className="ams-visually-hidden">
         {prefix}
         {': '}

diff --git a/packages/react/src/SearchField/SearchField.test.tsx b/packages/react/src/SearchField/SearchField.test.tsx
@@ -32,7 +32,7 @@ describe('Search field', () => {
   })
 
   it('renders the button with a label', () => {
-    render(<SearchField.Button label="Search" />)
+    render(<SearchField.Button>Search</SearchField.Button>)
 
     const component = screen.getByRole('button', { name: 'Search' })
 

diff --git a/packages/react/src/SearchField/SearchFieldButton.tsx b/packages/react/src/SearchField/SearchFieldButton.tsx
@@ -4,24 +4,18 @@
  */
 
 import { SearchIcon } from '@amsterdam/design-system-react-icons'
-import clsx from 'clsx'
 import { forwardRef } from 'react'
-import type { ForwardedRef, HTMLAttributes } from 'react'
-import { Icon } from '../Icon'
+import type { ForwardedRef } from 'react'
+import { Button } from '../Button'
+import type { ButtonProps } from '../Button'
 
-type SearchFieldButtonProps = {
-  /** Describes the field for screen readers. */
-  label?: string
-} & HTMLAttributes<HTMLButtonElement>
+type SearchFieldButtonProps = Omit<ButtonProps, 'icon' | 'iconBefore' | 'iconOnly' | 'variant'>
 
-// TODO: replace this with IconButton when that's done
-// TODO: discuss if IconButton is the right component to replace this
 export const SearchFieldButton = forwardRef(
-  ({ label = 'Zoeken', className, ...restProps }: SearchFieldButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
-    <button {...restProps} ref={ref} className={clsx('ams-search-field__button', className)}>
-      <span className="ams-visually-hidden">{label}</span>
-      <Icon svg={SearchIcon} size="level-5" square />
-    </button>
+  ({ children = 'Zoeken', ...restProps }: SearchFieldButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
+    <Button {...restProps} icon={SearchIcon} iconOnly ref={ref}>
+      {children}
+    </Button>
   ),
 )