Update ConsentBanner, Copy, Footer and Consent Page to use Button component

Author: webstackdev

src/components/Consent/Banner/index.astro

@@ -1,6 +1,5 @@
 ---
 import { Image } from 'astro:assets'
-import Icon from '@components/Icon/index.astro'
 import Button from '@components/Button/index.astro'
 import CookieSvg from '@assets/images/site/cookie.svg'
 ---
@@ -18,13 +17,15 @@ import CookieSvg from '@assets/images/site/cookie.svg'
   >
     <h2 id="consent-modal__title" class="sr-only">Cookie consent</h2>
     <!-- Close button positioned at far right of viewport -->
-    <button
+    <Button
       type="button"
-      aria-label="Close cookie consent"
+      variant="icon"
+      ariaLabel="Close cookie consent"
+      icon="close"
+      iconPosition="only"
+      iconSize={8}
       class="consent-modal__close-btn bg-spotlight border-none flex p-1.5 absolute top-0 right-0 transition-all duration-150 ease-in-out hover:bg-spotlight-offset focus:bg-spotlight-offset focus:outline-none z-(--z-raised)"
-    >
-      <Icon icon="close" size={8} />
-    </button>
+    />
 
     <!-- Modal content container with page column constraints -->
     <div

src/components/Consent/Checkbox/client/__fixtures__/checkbox.fixture.astro

@@ -1,4 +1,5 @@
 ---
+import Button from '@components/Button/index.astro'
 import ConsentCheckbox from '@components/Consent/Checkbox/index.astro'
 import type { CheckboxFixtureProps } from '@components/Consent/Checkbox/client/types'
 
@@ -16,7 +17,7 @@ const { wrapInForm = true, ...props } = fixtureProps
   wrapInForm ? (
     <form id="gdpr-consent-form" data-testid="gdpr-consent-form">
       <ConsentCheckbox {...props} />
-      <button type="submit">Submit</button>
+      <Button type="submit" text="Submit" />
     </form>
   ) : (
     <ConsentCheckbox {...props} />

src/components/Copy/index.astro

@@ -60,6 +60,7 @@ const iconButtonColorClass = [
       <slot />
     </span>
 
+    {/** Not using Button component intentionally */}
     <button
       {...rest}
       class:list={[buttonClass, iconButtonColorClass, floatButtonClass]}

src/components/Footer/index.astro

@@ -235,7 +235,7 @@ const iconButtonClasses = [
               <Icon icon="feed" color="inherit" size={8} />
             </a>
 
-            {/* Page footer Bug Reporter trigger */}
+            {/* Page footer Bug Reporter trigger. Not using Button component intentionally. */}
             <button
               id="bugReporterTrigger"
               type="button"

src/components/Pages/Consent/index.astro

@@ -2,6 +2,7 @@
 import HeadingAnchor from '@components/Layout/HeadingAnchor/index.astro'
 import Icon from '@components/Icon/index.astro'
 import List from '@components/List/index.astro'
+import Button from '@components/Button/index.astro'
 import UnsavedConsentDialog from '@components/Pages/Consent/unsaved.astro'
 
 export type Props = {
@@ -231,26 +232,28 @@ const { content } = Astro.props
       </div>
 
       <div class="px-6 py-4 flex gap-3 justify-end flex-wrap">
-        <button
+        <Button
+          type="button"
           id="consent-allow-all"
-          class="px-6 py-2 bg-success-offset text-content-inverse rounded-lg hover:bg-success transition-colors duration-200 font-medium focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
-        >
-          {content.buttons.acceptAll}
-        </button>
-        <button
+          text={content.buttons.acceptAll}
+          variant="success"
+          class="px-6 py-2 rounded-lg transition-colors duration-200 font-medium! normal-case focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
+        />
+        <Button
+          type="button"
           id="consent-deny-all"
-          class="px-6 py-2 bg-warning-offset text-content-inverse rounded-lg hover:bg-warning transition-colors duration-200 font-medium focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
-        >
-          {content.buttons.rejectAll}
-        </button>
-        <button
+          text={content.buttons.rejectAll}
+          variant="warning"
+          class="px-6 py-2 rounded-lg transition-colors duration-200 font-medium! normal-case focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
+        />
+        <Button
+          type="button"
           id="consent-save-preferences"
-          class="px-6 py-2 text-content-inverse rounded-lg cursor-not-allowed transition-colors duration-200 font-medium focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
+          text={content.buttons.save}
+          variant="secondary"
+          class="px-6 py-2 bg-secondary text-content-inverse rounded-lg cursor-not-allowed hover:bg-secondary transition-colors duration-200 font-medium! normal-case focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
           disabled
-          aria-disabled="true"
-        >
-          {content.buttons.save}
-        </button>
+        />
       </div>
     </section>
   </consent-preferences>