Update and fix missing CTA button hover/focus effects

src/components/cta-button/cta-button.scss

@@ -15,8 +15,13 @@
 
   &.transparent-background {
     background-color: var(--grayscale-white);
+    border: 3px solid var(--grayscale-black);
     color: var(--grayscale-black);
 
+    @include breakpoint($xlarge) {
+      border: 4px solid var(--grayscale-black);
+    }
+
     .link-icon svg {
       background-color: var(--grayscale-white);
       fill: var(--grayscale-black);
@@ -29,8 +34,13 @@
 
   &.black-background {
     background-color: var(--grayscale-black);
+    border: 3px solid var(--grayscale-white);
     color: var(--grayscale-white);
 
+    @include breakpoint($xlarge) {
+      border: 4px solid var(--grayscale-white);
+    }
+
     .link-icon svg {
       background-color: var(--grayscale-black);
       fill: var(--grayscale-white);
@@ -39,12 +49,33 @@
     .text {
       color: var(--grayscale-white);
     }
+
+    &:hover {
+      background-color: var(--brand-main-active);
+
+      .link-icon svg {
+        background-color: var(--brand-main-active);
+      }
+    }
+
+    &:focus {
+      background-color: var(--brand-main);
+
+      .link-icon svg {
+        background-color: var(--brand-main);
+      }
+    }
   }
 
   &.blue-background {
     background-color: var(--brand-main-light);
+    border: 3px solid var(--grayscale-white);
     color: var(--grayscale-white);
 
+    @include breakpoint($xlarge) {
+      border: 4px solid var(--grayscale-white);
+    }
+
     .link-icon svg {
       background-color: var(--brand-main-light);
       fill: var(--grayscale-white);
@@ -53,19 +84,64 @@
     .text {
       color: var(--grayscale-white);
     }
+
+    &:hover {
+      background-color: var(--brand-main);
+
+      .link-icon svg {
+        background-color: var(--brand-main);
+      }
+    }
+
+    &:focus {
+      background-color: var(--brand-main-active);
+
+      .link-icon svg {
+        background-color: var(--brand-main-active);
+      }
+    }
   }
 
   &.white-background {
-    background-color: var(--brand-main-light);
-    color: var(--grayscale-white);
+    background-color: var(--grayscale-white);
+    border: 3px solid var(--brand-main-light);
+    color: var(--brand-main-light);
+
+    @include breakpoint($xlarge) {
+      border: 4px solid var(--brand-main-light);
+    }
 
     .link-icon svg {
-      background-color: var(--brand-main-light);
-      fill: var(--grayscale-white);
+      background-color: var(--grayscale-white);
+      fill: var(--brand-main-light);
     }
 
     .text {
-      color: var(--grayscale-white);
+      color: var(--brand-main-light);
+    }
+
+    &:hover {
+      border-color: var(--brand-main);
+
+      .text {
+        color: var(--brand-main);
+      }
+
+      .link-icon svg {
+        fill: var(--brand-main);
+      }
+    }
+
+    &:focus {
+      border-color: var(--brand-main-active);
+
+      .text {
+        color: var(--brand-main-active);
+      }
+
+      .link-icon svg {
+        fill: var(--brand-main-active);
+      }
     }
   }
 
@@ -77,11 +153,11 @@
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     display: flex;
-    justify-content: center;
     height: 100%;
+    justify-content: center;
     max-width: 278px;
-
     padding: 14px 12px;
+
     @include breakpoint($narrow) {
       padding: 15px 16px;
     }
@@ -100,10 +176,12 @@
       @include breakpoint($narrow) {
         @include font-size(18px, 18px); //button medium
       }
+
       @include breakpoint($extrawide) {
         // with sidebar on page
         @include font-size(18px, 18px); //button medium
       }
+
       @include breakpoint($xlarge) {
         // with sidebar on page
         @include font-size(20px, 20px); //button large
@@ -116,9 +194,11 @@
       @include breakpoint($narrow) {
         margin-left: 10px; //button medium
       }
+
       @include breakpoint($extrawide) {
         margin-left: 10px; //button medium
       }
+
       @include breakpoint($xlarge) {
         margin-left: 12px; //button large
       }
@@ -132,11 +212,13 @@
           height: 18px;
           width: 18px;
         }
+
         @include breakpoint($extrawide) {
           //button medium
           height: 18px;
           width: 18px;
         }
+
         @include breakpoint($xlarge) {
           //button large
           height: 22px;
@@ -145,25 +227,6 @@
       }
     }
   }
-
-  &.blue-background,
-  &.black-background {
-    border: 3px solid var(--grayscale-white);
-    @include breakpoint($xlarge) {
-      border: 4px solid var(--grayscale-white);
-    }
-  }
-
-  &.transparent-background {
-    border: 3px solid var(--grayscale-black);
-    @include breakpoint($xlarge) {
-      border: 4px solid var(--grayscale-black);
-    }
-  }
-
-  &.white-background {
-    border: none;
-  }
 }
 
 .hy-cta-button.large {
@@ -194,13 +257,19 @@
   &.blue-background,
   &.black-background {
     @include breakpoint($extrawide) {
-      border: 4px solid var(--grayscale-white);
+      border-width: 4px;
     }
   }
 
   &.transparent-background {
     @include breakpoint($extrawide) {
-      border: 4px solid var(--grayscale-black);
+      border-width: 4px;
+    }
+  }
+
+  &.white-background {
+    @include breakpoint($extrawide) {
+      border-width: 4px;
     }
   }
 }

src/components/hy-hero/hy-hero.tsx

@@ -80,8 +80,8 @@ export class HyHero {
 
     if (this.colorVariant == HeroColorVariant.black) {
       variant = CtaLinkButtonVariants.onBlackBkgd;
-    } else if (this.colorVariant == HeroColorVariant.white) {
-      variant = CtaLinkButtonVariants.onTransparentBkgd;
+    } else if (this.colorVariant == HeroColorVariant.white || this.colorVariant == HeroColorVariant.fp_white) {
+      variant = CtaLinkButtonVariants.onWhiteBkgd;
     }
 
     return (

src/components/hy-hero/readme.md

@@ -4,17 +4,17 @@
 
 ## Properties
 
-| Property       | Attribute       | Description | Type                                                                        | Default                 |
-| -------------- | --------------- | ----------- | --------------------------------------------------------------------------- | ----------------------- |
-| `colorVariant` | `color-variant` |             | `HeroColorVariant.black \| HeroColorVariant.blue \| HeroColorVariant.white` | `HeroColorVariant.blue` |
-| `description`  | `description`   |             | `string`                                                                    | `undefined`             |
-| `headerstyle`  | `headerstyle`   |             | `string`                                                                    | `'common'`              |
-| `heading`      | `heading`       |             | `string`                                                                    | `undefined`             |
-| `image`        | `image`         |             | `string`                                                                    | `undefined`             |
-| `isExternal`   | `is-external`   |             | `boolean`                                                                   | `false`                 |
-| `scLabel`      | `sc-label`      |             | `string`                                                                    | `undefined`             |
-| `url`          | `url`           |             | `string`                                                                    | `undefined`             |
-| `urlTitle`     | `url-title`     |             | `string`                                                                    | `undefined`             |
+| Property       | Attribute       | Description | Type                                                                                                     | Default                 |
+| -------------- | --------------- | ----------- | -------------------------------------------------------------------------------------------------------- | ----------------------- |
+| `colorVariant` | `color-variant` |             | `HeroColorVariant.black \| HeroColorVariant.blue \| HeroColorVariant.fp_white \| HeroColorVariant.white` | `HeroColorVariant.blue` |
+| `description`  | `description`   |             | `string`                                                                                                 | `undefined`             |
+| `headerstyle`  | `headerstyle`   |             | `string`                                                                                                 | `'common'`              |
+| `heading`      | `heading`       |             | `string`                                                                                                 | `undefined`             |
+| `image`        | `image`         |             | `string`                                                                                                 | `undefined`             |
+| `isExternal`   | `is-external`   |             | `boolean`                                                                                                | `false`                 |
+| `scLabel`      | `sc-label`      |             | `string`                                                                                                 | `undefined`             |
+| `url`          | `url`           |             | `string`                                                                                                 | `undefined`             |
+| `urlTitle`     | `url-title`     |             | `string`                                                                                                 | `undefined`             |
 
 ## Dependencies
 

src/utils/utils.ts

@@ -182,6 +182,7 @@ export enum HeroColorVariant {
   blue = 'blue',
   black = 'black',
   white = 'white',
+  fp_white = 'fp_white',
 }
 
 export enum FooterLinkItemColor {