Use design system components

Author: patch0

package-lock.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@googlemaps/js-api-loader": "^1.16.10",
+    "@raspberrypifoundation/design-system-react": "^2.9.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

package.json

@@ -1,20 +1,17 @@
 import type { ReactNode } from 'react'
-import { InfoIcon, ErrorIcon } from './icons'
+import { Alert as DSAlert } from '@raspberrypifoundation/design-system-react'
 
 interface AlertProps {
   variant: 'info' | 'error'
-  title: ReactNode
+  title: string
   children?: ReactNode
 }
 
+/** Thin wrapper over the design system Alert, keeping this app's variant names. */
 export function Alert({ variant, title, children }: AlertProps) {
   return (
-    <div className={`alert alert-${variant}`} role={variant === 'error' ? 'alert' : undefined}>
-      <div className="alert-header">
-        <span className="icon">{variant === 'info' ? <InfoIcon /> : <ErrorIcon size={24} />}</span>
-        <span>{title}</span>
-      </div>
-      {children && <div className="alert-body">{children}</div>}
-    </div>
+    <DSAlert type={variant === 'error' ? 'error' : 'information'} title={title}>
+      {children}
+    </DSAlert>
   )
 }

src/components/Alert.tsx

@@ -1,16 +1,24 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import type { MouseEvent, ReactNode } from 'react'
+import { Button as DSButton } from '@raspberrypifoundation/design-system-react'
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps {
   variant?: 'primary' | 'secondary'
   icon?: ReactNode
-  children: ReactNode
+  children: string
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void
+  disabled?: boolean
 }
 
-export function Button({ variant = 'primary', icon, children, ...rest }: ButtonProps) {
+/** Thin wrapper over the design system Button, keeping this app's call-site API. */
+export function Button({ variant = 'primary', icon, children, onClick, disabled }: ButtonProps) {
   return (
-    <button className={`btn btn-${variant}`} {...rest}>
-      {icon}
-      {children}
-    </button>
+    <DSButton
+      type={variant}
+      text={children}
+      icon={icon}
+      iconPosition="left"
+      onClick={onClick}
+      disabled={disabled}
+    />
   )
 }