Merge branch 'develop' into chore/DES-802-visualise-grid-in-docs

Amsterdam · Sep 11, 2024 · 4e6ec66 · 4e6ec66
2 parents c769c74 + 1f29f35
commit 4e6ec66
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 16 deletions.
diff --git a/packages/css/src/components/avatar/avatar.scss b/packages/css/src/components/avatar/avatar.scss
@@ -20,6 +20,15 @@
   }
 }
 
+.ams-avatar:not(.ams-avatar--has-image) {
+  @media (forced-colors: active) {
+    border-style: solid;
+    border-width: var(--ams-avatar-forced-colors-border-width);
+    padding-block: calc(var(--ams-avatar-padding-block) - var(--ams-avatar-forced-colors-border-width));
+    padding-inline: calc(var(--ams-avatar-padding-inline) - var(--ams-avatar-forced-colors-border-width));
+  }
+}
+
 .ams-avatar--has-image {
   inline-size: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size) + 2 * var(--ams-avatar-padding-inline));
   overflow: hidden;

diff --git a/packages/css/src/components/dialog/README.md b/packages/css/src/components/dialog/README.md
@@ -27,8 +27,7 @@ Also, this approach keeps the order of buttons consistent on both narrow and wid
 
 ## Closing Dialog without submit
 
-You can close a Dialog without submitting by using `<button type="button" onClick={closeDialog}>`.
-This uses the `closeDialog` function from the React package.
+You can close a Dialog without submitting by using `<button type="button" onClick={Dialog.close}>`.
 
 ## References
 

diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
@@ -18,11 +18,10 @@ export type DialogProps = {
   heading: string
 } & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>
 
-export const closeDialog = (event: MouseEvent<HTMLButtonElement>) => event.currentTarget.closest('dialog')?.close()
+const closeDialog = (event: MouseEvent<HTMLButtonElement>) => event.currentTarget.closest('dialog')?.close()
+const openDialog = (id: string) => (document.querySelector(id) as HTMLDialogElement)?.showModal()
 
-export const openDialog = (id: string) => (document.querySelector(id) as HTMLDialogElement)?.showModal()
-
-export const Dialog = forwardRef(
+const DialogRoot = forwardRef(
   (
     { actions, children, className, closeButtonLabel = 'Sluiten', heading, ...restProps }: DialogProps,
     ref: ForwardedRef<HTMLDialogElement>,
@@ -40,4 +39,9 @@ export const Dialog = forwardRef(
   ),
 )
 
-Dialog.displayName = 'Dialog'
+DialogRoot.displayName = 'Dialog'
+
+export const Dialog = Object.assign(DialogRoot, {
+  close: closeDialog,
+  open: openDialog,
+})
diff --git a/packages/react/src/Dialog/index.ts b/packages/react/src/Dialog/index.ts
@@ -1,2 +1,2 @@
-export { closeDialog, Dialog, openDialog } from './Dialog'
+export { Dialog } from './Dialog'
 export type { DialogProps } from './Dialog'
diff --git a/proprietary/tokens/src/components/ams/avatar.tokens.json b/proprietary/tokens/src/components/ams/avatar.tokens.json
@@ -20,6 +20,9 @@
         "background-color": { "value": "{ams.color.dark-green}" },
         "color": { "value": "{ams.color.primary-white}" }
       },
+      "forced-colors": {
+        "border-width": { "value": "{ams.border.width.md}" }
+      },
       "green": {
         "background-color": { "value": "{ams.color.green}" },
         "color": { "value": "{ams.color.primary-black}" }

diff --git a/storybook/src/components/Dialog/Dialog.docs.mdx b/storybook/src/components/Dialog/Dialog.docs.mdx
@@ -28,9 +28,9 @@ Click or tap this Button to open the Dialog.
 
 #### Utility functions
 
-To open the Dialog, use the `openDialog` function from the React package.
+To open the Dialog, use `Dialog.open(id)` from the React package.
 Pass the Dialog’s `id` to the function to select it.
-To close the Dialog, use the `closeDialog` function.
+To close the Dialog, use `Dialog.close`.
 
 ### Vertically stacked Buttons
 

diff --git a/storybook/src/components/Dialog/Dialog.stories.tsx b/storybook/src/components/Dialog/Dialog.stories.tsx
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { Button, closeDialog, Heading, Paragraph } from '@amsterdam/design-system-react'
-import { Dialog, openDialog } from '@amsterdam/design-system-react/src'
+import { Button, Heading, Paragraph } from '@amsterdam/design-system-react'
+import { Dialog } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
@@ -14,7 +14,7 @@ const meta = {
     actions: (
       <>
         <Button type="submit">Doorgaan</Button>
-        <Button onClick={closeDialog} variant="tertiary">
+        <Button onClick={Dialog.close} variant="tertiary">
           Stoppen
         </Button>
       </>
@@ -67,7 +67,7 @@ export const Default: Story = {
 
 export const WithScrollbar: Story = {
   args: {
-    actions: <Button onClick={closeDialog}>Sluiten</Button>,
+    actions: <Button onClick={Dialog.close}>Sluiten</Button>,
     children: [
       <Heading level={2} size="level-5" key={1}>
         Algemeen
@@ -125,7 +125,7 @@ export const TriggerButton: Story = {
   decorators: [
     (Story) => (
       <article>
-        <Button onClick={() => openDialog('#openDialog')}>Open Dialog</Button>
+        <Button onClick={() => Dialog.open('#openDialog')}>Open Dialog</Button>
         <Story />
       </article>
     ),
@@ -137,7 +137,7 @@ export const VerticalButtons: Story = {
     actions: (
       <>
         <Button type="submit">Lange teksten op deze knoppen</Button>
-        <Button onClick={closeDialog} variant="tertiary">
+        <Button onClick={Dialog.close} variant="tertiary">
           Om verticaal stapelen te demonstreren
         </Button>
       </>

diff --git a/storybook/src/styles/overrides.css b/storybook/src/styles/overrides.css
@@ -117,3 +117,10 @@
 :is(#storybook-root, .sbdocs-content) a[href="#"] {
   cursor: not-allowed;
 }
+
+/* Override to make sure the default transparent border isn't shown in forced colors mode. */
+.innerZoomElementWrapper.innerZoomElementWrapper > div {
+  @media (forced-colors: active) {
+    border-color: Canvas !important;
+  }
+}