Merge pull request #74 from delta10/feat/70-buttons-nlds-comp

Feat/70 Buttons nlds comp
delta10 · Nov 8, 2024 · 42d1573 · 42d1573
2 parents 9988172 + 312e23e
commit 42d1573
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 73 deletions.
diff --git a/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx b/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx
@@ -59,6 +59,7 @@ export const LocationSelect = ({ field }: LocationSelectProps) => {
               formStoreState.coordinates[0] === 0 &&
               formStoreState.coordinates[1] === 0 ? (
                 <Button
+                  appearance="primary-action-button"
                   id="location-button"
                   className="absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 border-none"
                   type="button"

diff --git a/src/app/[locale]/incident/components/IncidentFormFooter.tsx b/src/app/[locale]/incident/components/IncidentFormFooter.tsx
@@ -1,9 +1,8 @@
 'use client'
 
 import React from 'react'
-import { cn } from '@/lib/utils/style'
 import { useTranslations } from 'next-intl'
-import { Button } from '@/components/ui/Button'
+import { Button, ButtonGroup } from '@/components/index'
 import { useStepperStore } from '@/store/stepper_store'
 import { steps, usePathname as usePath, useRouter } from '@/routing/navigation'
 import { ImSpinner8 } from 'react-icons/im'
@@ -37,45 +36,35 @@ const IncidentFormFooter = ({
 
   return (
     <>
-      <div
-        className={cn(
-          `bg-gray-200 w-full p-4 flex justify-end ${
-            step != 1 && pathname != '/incident' ? 'justify-between' : ''
-          }`,
-          className
-        )}
-      >
+      <ButtonGroup>
         {step != 1 && pathname != '/incident' && (
           <Button
-            variant="transparent"
+            appearance="secondary-action-button"
             type="button"
-            className="justify-self-start self-start"
             onClick={() => goBack()}
           >
             {t('back_button')}
           </Button>
         )}
         {step < 4 && (
-          <Button variant="primary" type="submit" className="justify-self-end">
+          <Button appearance="primary-action-button" type="submit">
             {t('next_button')}
           </Button>
         )}
         {step === 4 && (
-          // Note: current button has no visual indicator when disabled.
           <Button
-            variant="primary"
+            appearance="primary-action-button"
             type="submit"
             disabled={loading}
             tabIndex={loading ? 0 : undefined}
             aria-describedby={ariaDescribedById}
-            className="flex items-center gap-2 justify-self-end"
             onClick={() => (handleSignalSubmit ? handleSignalSubmit() : null)}
           >
             {loading && <ImSpinner8 className="animate-spin" />}
             {t('submit_button')}
           </Button>
         )}
-      </div>
+      </ButtonGroup>
     </>
   )
 }

diff --git a/src/app/[locale]/incident/components/Stepper.tsx b/src/app/[locale]/incident/components/Stepper.tsx
@@ -5,9 +5,7 @@ import { Paths, usePathname } from '@/routing/navigation'
 import { useStepperStore } from '@/store/stepper_store'
 import { useEffect, useRef } from 'react'
 import { useFormStore } from '@/store/form_store'
-import { Button, Link } from '@utrecht/component-library-react/dist/css-module'
-
-import { Paragraph } from '@/components/index'
+import { Button, Link, Paragraph } from '@/components/index'
 
 type StepperProps = {}
 

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -5,10 +5,12 @@ export { Select, Container }
 
 export {
   Alert,
-  Heading,
   Button,
+  ButtonGroup,
+  Heading,
   HeadingGroup,
   Link,
+  Image,
   Paragraph,
   PreHeading,
   Icon,

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx