UHF-11756: Changed tag styles to use hds tag styles

Author: annadruid

conf/cmi/views.view.article.yml

@@ -445,7 +445,7 @@ display:
             trim_whitespace: false
             alt: ''
             rel: ''
-            link_class: ''
+            link_class: 'hds-tag hds-tag--action'
             prefix: ''
             suffix: ''
             target: ''

conf/cmi/views.view.keyword_links.yml

@@ -77,7 +77,7 @@ display:
             link: false
           group_column: target_id
           group_columns: {  }
-          group_rows: true
+          group_rows: false
           delta_limit: 0
           delta_offset: 0
           delta_reversed: false

public/themes/custom/hdbt_subtheme/dist/css/styles.min.css

@@ -1,39 +1,43 @@
-.keywords__container a {
-  @include tag('base');
-  @include tag('interactive');
-  @include font('special.helper_text');
-
-  --line-height: 1.5;
-  background-color: $color-black;
-  border-radius: 24px;
-  color: $color-white;
-  line-height: var(--line-height);
-  margin: 4px;
-  padding: 8px 32px;
-  text-decoration: none;
+.keywords__container {
+  margin-bottom: $spacing-triple;
+
+  .hds-tag {
+    background-color: $color-black;
+    border-color: $color-black;
+
+    &:hover {
+      background-color: $color-white;
+      border-color: $color-black;
+
+      a {
+        color: $color-black;
+      }
+    }
+  }
+
+  .hds-tag a {
+    color: $color-white;
+  }
 }
 
 .views-field-field-keywords {
   ul {
-    list-style: none;
-    margin: $spacing 0 0 0;
-    padding: 0;
+    @include tag-container();
   }
 
   li {
-    background: $color-black;
-    border-radius: $spacing;
-    display: inline-block;
-    font-size: remify(14px);
-    line-height: 2.2;
-    margin-bottom: $spacing-half;
-    margin-right: $spacing-half;
-    margin-top: 0;
-    padding: 0 $spacing;
+    @include tag-parent();
   }
 
-  li a {
+  .hds-tag {
+    background-color: $color-black; 
+    border-color: $color-black;
     color: $color-white;
-    text-decoration: none;
+
+    &:hover {
+      background-color: $color-white;
+      border-color: $color-black;
+      color: $color-black;
+    }
   }
 }

public/themes/custom/hdbt_subtheme/src/scss/06_components/navigation/_keywords.scss

@@ -0,0 +1,32 @@
+{#
+/**
+ * @file
+ * Theme override to display a view of unformatted rows.
+ *
+ * Available variables:
+ * - title: The title of this group of rows. May be empty.
+ * - rows: A list of the view's row items.
+ *   - attributes: The row's HTML attributes.
+ *   - content: The row's content.
+ * - view: The view object.
+ * - default_row_class: A flag indicating whether default classes should be
+ *   used on rows.
+ *
+ * @see template_preprocess_views_view_unformatted()
+ */
+#}
+{% if title %}
+  <h3>{{ title }}</h3>
+{% endif %}
+{% for row in rows %}
+  {%
+    set row_classes = [
+      default_row_class ? 'views-row',
+      'hds-tag',
+      'hds-tag--action',
+    ]
+  %}
+  <div{{ row.attributes.addClass(row_classes) }}>
+    {{- row.content -}}
+  </div>
+{% endfor %}