link is replaced with an icon

src/components/cta-link/readme.md

@@ -16,7 +16,6 @@
 ### Used by
 
 - [hy-adjacent-image-text](../adjacent-image-text)
-- [hy-link-box](../link-box)
 
 ### Depends on
 
@@ -28,7 +27,6 @@
 graph TD;
   hy-cta-link --> hy-icon
   hy-adjacent-image-text --> hy-cta-link
-  hy-link-box --> hy-cta-link
   style hy-cta-link fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/icon/readme.md

@@ -18,6 +18,7 @@
 - [hy-button](../button)
 - [hy-cta-button](../cta-button)
 - [hy-cta-link](../cta-link)
+- [hy-link-box](../link-box)
 - [hy-menu-item](../navigation/menu-item)
 - [hy-menu-language](../navigation/menu-language)
 - [hy-menu-mobile-breadcrumb](../navigation/menu-mobile-breadcrumb)
@@ -33,6 +34,7 @@ graph TD;
   hy-button --> hy-icon
   hy-cta-button --> hy-icon
   hy-cta-link --> hy-icon
+  hy-link-box --> hy-icon
   hy-menu-item --> hy-icon
   hy-menu-language --> hy-icon
   hy-menu-mobile-breadcrumb --> hy-icon

src/components/link-box-list/readme.md

@@ -20,8 +20,7 @@
 ```mermaid
 graph TD;
   hy-link-box-list --> hy-link-box
-  hy-link-box --> hy-cta-link
-  hy-cta-link --> hy-icon
+  hy-link-box --> hy-icon
   style hy-link-box-list fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/link-box/link-box.scss

@@ -21,6 +21,13 @@
     bottom: 12px;
     position: absolute;
     right: -6px;
+
+    svg {
+      background-color: var(--brand-main-light);
+      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+      fill: var(--grayscale-white);
+      padding: 10.29px;
+    }
   }
   article {
     position: relative;
@@ -173,11 +180,4 @@
       letter-spacing: -0.2px;
     }
   }
-
-  .hy-link-box__link {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 12px;
-    margin-right: -18px;
-  }
 }

src/components/link-box/link-box.tsx

@@ -42,8 +42,8 @@ export class LinkBox implements ComponentInterface {
           </div>
         </a>
       </article>,
-      <div class="hy-link-box__link">
-        <hy-cta-link url={this.url} />
+      <div class="hy-link-box__link" aria-hidden="true">
+        <hy-icon icon={'hy-icon-arrow-right'} size={48} />
       </div>
     ];
   }

src/components/link-box/readme.md

@@ -22,14 +22,13 @@
 
 ### Depends on
 
-- [hy-cta-link](../cta-link)
+- [hy-icon](../icon)
 
 ### Graph
 
 ```mermaid
 graph TD;
-  hy-link-box --> hy-cta-link
-  hy-cta-link --> hy-icon
+  hy-link-box --> hy-icon
   hy-link-box-list --> hy-link-box
   style hy-link-box fill:#f9f,stroke:#333,stroke-width:4px
 ```