feat(tags): assign link color to tag if href present -refs #263347 (#435

)

* fix: assign link color to tag -refs #263347

* fix: assign link color to tag variable -refs #263347

* fix: modify css for tags with links -refs #263347

* fix(tests): upgrade to cypress 13 and fix integration test -refs #263347

cypress/support/e2e.js

@@ -35,10 +35,6 @@ export const slateBeforeEach = (contentType = 'Document') => {
     path: 'cypress',
   });
   cy.visit('/cypress/my-page');
-  cy.waitForResourceToLoad('@navigation');
-  cy.waitForResourceToLoad('@breadcrumbs');
-  cy.waitForResourceToLoad('@actions');
-  cy.waitForResourceToLoad('@types');
   cy.waitForResourceToLoad('my-page');
   cy.navigate('/cypress/my-page/edit');
 };

package.json

@@ -29,6 +29,7 @@
     "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
+    "cypress": "13.1.0",
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",

theme/themes/eea/extras/tag.less

@@ -8,7 +8,6 @@
 *******************************/
 
 .tag {
-  cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -21,6 +20,18 @@
   font-weight: @tagNameFontWeight;
   line-height: @tagNameLineHeight;
 
+  &.link {
+    .icon,
+    .name {
+      color: @tagLinkFontColor;
+      cursor: pointer;
+
+      &:visited {
+        color: @tagLinkFontColor;
+      }
+    }
+  }
+
   .icon {
     width: unset;
     height: unset;

theme/themes/eea/extras/tag.variables

@@ -6,6 +6,7 @@
 @tagPadding            : @mediumGap 0;
 @tagHeight             : 1.25rem;
 @tagMargin             : 0 0 0 0;
+@tagLinkFontColor      : var(--text-color, @linkColor);
 
 /* Tag Icon */
 @tagHashtagFontSize    : 0.75rem;