[715] Correct links should be added to Learn more

website/modules/asset/ui/src/scss/_table-widget.scss

@@ -37,8 +37,7 @@
   padding: 24px;
   position: relative;
   overflow: hidden;
-  cursor: pointer;
-  background-color:$white;
+  background-color: $white;
   @include transition(all, 0.5s);
   transform: scale3d(1, 1, 1);
 
@@ -48,7 +47,14 @@
 
   .background-circle {
     display: none;
-    @include decorative-background-circle($gray-500, 25%, 130%, 100%, -100% -60% auto auto, -10);
+    @include decorative-background-circle(
+      $gray-500,
+      25%,
+      130%,
+      100%,
+      -100% -60% auto auto,
+      -10
+    );
   }
 
   &:hover,
@@ -63,7 +69,7 @@
     }
 
     .sf-table-cell-description,
-    .sf-table-link a {
+    .sf-table-link {
       color: $gray-200;
     }
 
@@ -85,10 +91,18 @@
     }
 
     .background-circle {
-      @include decorative-background-circle($gray-500, 25%, 130%, 100%, -100% -60% auto auto, -10);
+      @include decorative-background-circle(
+        $gray-500,
+        25%,
+        130%,
+        100%,
+        -100% -60% auto auto,
+        -10
+      );
     }
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
       transform: scale3d(1.03, 1.03, 1);
       z-index: 10;
       border-color: black;
@@ -99,7 +113,7 @@
       }
 
       .sf-table-cell-description,
-      .sf-table-link a {
+      .sf-table-link {
         color: $gray-200;
       }
 
@@ -112,24 +126,9 @@
 
     &:focus-visible {
       transform: scale3d(1.02, 1.02, 1);
-      z-index: 10;
-      border-color: black;
-
-      .sf-table-title,
-      .sf-table-cell-title {
-        color: $gray-100;
-      }
-
-      .sf-table-cell-description,
-      .sf-table-link a {
-        color: $gray-200;
-      }
 
       .background-circle {
         display: block;
-        width: 150em;
-        height: 70em;
-        transform: translate3d(-5%, -10%, 0);
       }
     }
 
@@ -161,49 +160,52 @@
 }
 
 .sf-table-title {
-  font-weight: 700;
-  font-size: 18px;
+  font-weight: $font-weight-extra-bold;
   color: $gray-500;
   margin: 0;
   @include transition(color);
-
-  @include breakpoint-medium {
-    font-size: 22px;
-  }
+  @include responsive-font(16px, 22px);
+  @include responsive-line-height(140%, 110%);
 }
 
 .sf-table-cell-description {
   border-bottom: none;
-  font-weight: 500;
-  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   color: $gray-300;
+  margin: 24px 0 0;
   @include transition(color);
+  @include font-settings(14px, 150%, $font-weight-normal);
+
+  &:has(.sf-table-link) {
+    justify-content: space-between;
+  }
+
+  &:not(:has(.sf-table-link)) {
+    justify-content: flex-start;
+  }
 
   p {
-    margin: 24px 0 0;
+    margin: 0;
   }
+
   @include breakpoint-medium {
-    p {
-      margin: 32px 0 0;
-      min-height: 80px;
-    }
+    margin: 32px 0 0;
   }
 }
 
 .sf-table-link {
   margin-top: 24px;
+  color: $gray-300;
+  text-decoration: underline;
+  @include transition(color);
+  @include font-settings(11px, 120%, $font-weight-300);
 
-  a {
-    color: $gray-300;
-    text-decoration: underline;
-    font-weight: 300;
-    font-size: 11px;
-    @include transition(color);
-
-    &:hover {
-      text-decoration: none;
-    }
+  &:hover {
+    text-decoration: none;
   }
+
   @include breakpoint-medium {
     margin-top: 32px;
   }

website/modules/table-widget/index.js

@@ -1,4 +1,3 @@
-const extendedToolbar = require('../../lib/extendedToolbar');
 const headingToolbar = require('../../lib/headingToolbar');
 const linkSchema = require('../../lib/linkSchema');
 
@@ -37,14 +36,8 @@ module.exports = {
             },
             description: {
               label: 'Description',
-              type: 'area',
-              options: {
-                widgets: {
-                  '@apostrophecms/rich-text': {
-                    ...extendedToolbar,
-                  },
-                },
-              },
+              type: 'string',
+              textarea: true,
               required: true,
             },
             ...linkSchema.fields.add,

website/modules/table-widget/views/widget.html

@@ -13,10 +13,10 @@ <h3 class="sf-table-title">{{ row.title }}</h3>
           </div>
 
           <div class="sf-table-cell sf-table-cell-description">
-            {% area row, 'description' %}
+            <p>{{ row.description }}</p>
 
             {% if row.linkTitle %}
-              <div class="sf-table-link">
+
                 {% set linkUrl = '' %}
                 {% if row.linkType == 'page' and row._page[0] %}
                   {% set linkUrl = row._page[0]._url %}
@@ -29,14 +29,14 @@ <h3 class="sf-table-title">{{ row.title }}</h3>
                 {% if linkUrl %}
                   <a
                     href="{{ linkUrl }}"
-                    class="sf-link"
+                    class="sf-table-link"
                     {% if '_blank' in (row.target or []) %}
                       target="_blank"
                       rel="noopener noreferrer"
                     {% endif %}
                   >{{ row.linkTitle }}</a>
                 {% endif %}
-              </div>
+
             {% endif %}
           </div>
           <div class="background-circle" aria-hidden="true"></div>