feat: import denhaag button

nl-design-system · Jul 3, 2024 · 286e6c3 · 286e6c3
1 parent fdf1710
commit 286e6c3
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 25 deletions.
diff --git a/components/Modal/package.json b/components/Modal/package.json
@@ -28,5 +28,11 @@
     "build": "rollup -c ../../rollup.config.mjs",
     "clean": "rimraf dist tsconfig.tsbuildinfo",
     "watch:components": "chokidar --silent --follow-symlinks \"src/**/*\" -c \"pnpm run build\""
+  },
+  "dependencies": {
+    "@gemeente-denhaag/button": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
   }
 }
diff --git a/components/Modal/src/ModalFooter.tsx b/components/Modal/src/ModalFooter.tsx
@@ -1,11 +1,7 @@
 import React from 'react';
-import clsx from 'clsx';
+import Button, { ButtonProps } from '@gemeente-denhaag/button';
 
-export interface ModalAction {
-  label: string;
-  type?: 'secondary';
-  onClick?: () => void;
-}
+export interface ModalAction extends ButtonProps {}
 
 export interface ModalFooterProps {
   actions?: ModalAction[];
@@ -16,16 +12,8 @@ export const ModalFooter = ({ actions }: ModalFooterProps) => {
 
   return (
     <footer className="denhaag-modal__footer">
-      {actions.map((action) => (
-        <button
-          key={action.label}
-          className={clsx('denhaag-button', {
-            'denhaag-button--secondary-action': action.type === 'secondary',
-          })}
-          onClick={action.onClick}
-        >
-          {action.label}
-        </button>
+      {actions.map((action, index) => (
+        <Button key={`modal-footer-action-${index}`} {...action} />
       ))}
     </footer>
   );

diff --git a/packages/storybook/src/css/Modal.stories.tsx b/packages/storybook/src/css/Modal.stories.tsx
@@ -40,12 +40,12 @@ export const Actions: Story = {
   args: {
     actions: [
       {
-        label: 'Confirm',
+        children: 'Confirm',
         onClick: () => console.log('Confirm'),
       },
       {
-        label: 'Cancel',
-        type: 'secondary',
+        children: 'Cancel',
+        variant: 'secondary-action',
         onClick: () => console.log('Cancel'),
       },
     ],
@@ -105,7 +105,7 @@ export const Button = () => {
         title="Modal title"
         open={open}
         onToggle={setOpen}
-        actions={[{ label: 'Sluiten', onClick: () => setOpen(false) }]}
+        actions={[{ children: 'Sluiten', onClick: () => setOpen(false) }]}
       >
         <>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, quam eu ultrices lacinia, lorem

diff --git a/packages/storybook/src/react/Modal.stories.tsx b/packages/storybook/src/react/Modal.stories.tsx
@@ -40,12 +40,12 @@ export const Actions: Story = {
   args: {
     actions: [
       {
-        label: 'Confirm',
+        children: 'Confirm',
         onClick: () => console.log('Confirm'),
       },
       {
-        label: 'Cancel',
-        type: 'secondary',
+        children: 'Cancel',
+        variant: 'secondary-action',
         onClick: () => console.log('Cancel'),
       },
     ],
@@ -105,7 +105,7 @@ export const Button = () => {
         title="Modal title"
         open={open}
         onToggle={setOpen}
-        actions={[{ label: 'Sluiten', onClick: () => setOpen(false) }]}
+        actions={[{ children: 'Sluiten', onClick: () => setOpen(false) }]}
       >
         <>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, quam eu ultrices lacinia, lorem

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml