Footer style fix and change correct button

src/components/button/readme.md

@@ -139,10 +139,6 @@ Well, it's a button.
 
 ## Dependencies
 
-### Used by
-
-- [hy-footer-info](../footer/hy-footer-info)
-
 ### Depends on
 
 - [hy-icon](../icon)
@@ -152,7 +148,6 @@ Well, it's a button.
 ```mermaid
 graph TD;
   hy-button --> hy-icon
-  hy-footer-info --> hy-button
   style hy-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/cta-button/readme.md

@@ -18,6 +18,7 @@
 ### Used by
 
 - [hy-banner](../hy-banner)
+- [hy-footer-info](../footer/hy-footer-info)
 - [hy-hero](../hy-hero)
 
 ### Depends on
@@ -30,6 +31,7 @@
 graph TD;
   hy-cta-button --> hy-icon
   hy-banner --> hy-cta-button
+  hy-footer-info --> hy-cta-button
   hy-hero --> hy-cta-button
   style hy-cta-button fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/components/footer/hy-footer-info/hy-footer-info.scss

@@ -62,21 +62,26 @@
   }
 
   &__links {
+    align-content: space-around;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     max-height: auto;
+    overflow: hidden;
+
     width: 100%;
 
     @include breakpoint($narrow) {
-      max-height: 430px;
+      max-height: 555px;
       width: 100%;
     }
-
     @include breakpoint($wide) {
-      max-height: 430px;
+      max-height: 530px;
       width: 65.56%;
     }
+    @include breakpoint($overwide) {
+      max-height: 460px;
+    }
   }
 
   .hy-accordion__content--inner-wrapper {

src/components/footer/hy-footer-info/hy-footer-info.tsx

@@ -8,7 +8,7 @@ export interface FooterInfoLinks {
 
 import {Component, ComponentInterface, Element, Watch, Host, State, Prop, h} from '@stencil/core';
 import ResizeObserver from 'resize-observer-polyfill';
-import {HeadingVarians, FooterLinkItemColor, FooterLinkVariants} from '../../../utils/utils';
+import {HeadingVarians, FooterLinkItemColor, FooterLinkVariants, CtaLinkButtonVariants} from '../../../utils/utils';
 
 @Component({
   tag: 'hy-footer-info',
@@ -77,9 +77,13 @@ export class HyFooterInfo implements ComponentInterface {
           <hy-heading heading={HeadingVarians.h2}>{this.textTitle}</hy-heading>
           <div class="hy-footer-info__ingress">{this.textDescription}</div>
           {this.linkUrl && (
-            <hy-button variant="secondary" icon-right="hy-icon-arrow-right" url={this.linkUrl} size={'large'}>
-              {this.linkText}
-            </hy-button>
+            <hy-cta-button
+              link-content={this.linkText}
+              sc-label={this.linkText}
+              url={this.linkUrl}
+              is-external="false"
+              variant={CtaLinkButtonVariants.onWhiteBkgd}
+            />
           )}
         </div>
         {this.isMobile ? (

src/components/footer/hy-footer-info/readme.md

@@ -17,7 +17,7 @@
 ### Depends on
 
 - [hy-heading](../../heading)
-- [hy-button](../../button)
+- [hy-cta-button](../../cta-button)
 - [hy-accordion-container](../../accordion-container)
 - [hy-accordion-item](../../accordion-item)
 - [hy-footer-link-item](../hy-footer-link-item)
@@ -27,12 +27,12 @@
 ```mermaid
 graph TD;
   hy-footer-info --> hy-heading
-  hy-footer-info --> hy-button
+  hy-footer-info --> hy-cta-button
   hy-footer-info --> hy-accordion-container
   hy-footer-info --> hy-accordion-item
   hy-footer-info --> hy-footer-link-item
   hy-heading --> hy-box
-  hy-button --> hy-icon
+  hy-cta-button --> hy-icon
   hy-accordion-container --> hy-box
   hy-accordion-item --> hy-icon
   hy-footer-link-item --> hy-icon

src/components/footer/hy-footer-link-item/hy-footer-link-item.scss

@@ -11,10 +11,12 @@ hy-footer-link-item:not([main-link]) {
 }
 
 hy-footer-link-item[main-link] {
+  hyphens: auto;
+  min-width: 200px;
   width: 100%;
 
   @include breakpoint($narrow) {
-    max-width: 30%;
+    max-width: 50%;
   }
 }
 

src/components/hy-person-card/hy-person-card.tsx

@@ -24,7 +24,7 @@ export class HyPersonCard {
   private _fullName: string;
   private _initials: string;
 
-  componentWillLoad() {
+  componentWillRender() {
     this._fullName = this.firstName && this.lastName ? `${this.firstName} ${this.lastName}` : '';
     this._initials =
       this.imageUrl && this.firstName && this.lastName ? '' : `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`;