Resolve "Preview card text overflows when there is an icon"

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+
+## [2.2.2] - 16-01-2019
+### Fixed
+- Overflowing text in Preview Cards when the card had icon
+
 ## [2.2.1] - 10-12-2018
 ### Fixed
 - Added styling for "+More" link in mega menu

cern_components.info.yml

@@ -2,7 +2,7 @@ name: "CERN Components"
 type: module
 description: "Provides all the necessary modules regarding CERN Web Components."
 core: 8.x
-version: 2.2.1
+version: 2.2.2
 package: CERN Components
 dependencies:
   - components:components (>=8.x-1.1-alpha1)

patterns/molecules/preview-card/css/component-preview-card.css

@@ -87,6 +87,11 @@
   .component-preview-cards .component-preview-cards__category-icon-vocabulary {
     margin: 0 auto;
     text-align: center; }
+    .component-preview-cards .component-preview-cards__category-icon-vocabulary ~ .preview-card__title h3 a span {
+      display: inline-block;
+      white-space: normal;
+      overflow: hidden;
+      text-overflow: ellipsis; }
     .component-preview-cards .component-preview-cards__category-icon-vocabulary:before {
       content: attr(data-icon);
       color: white;
@@ -97,10 +102,6 @@
       font-size: 60px;
       position: relative;
       top: -10px; }
-  .component-preview-cards .component-preview-cards__category-icon-vocabulary + .preview-card__title h3 a span {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis; }
   .component-preview-cards .preview-card {
     width: 100%; }
     .component-preview-cards .preview-card__title {
@@ -119,7 +120,6 @@
           position: relative;
           line-height: 26px !important; }
           .component-preview-cards .preview-card__title h3 a span {
-            display: block;
             width: 100%; }
         .component-preview-cards .preview-card__title h3 a:hover {
           text-decoration: none; }

patterns/molecules/preview-card/sass/component-preview-card.scss

@@ -95,6 +95,22 @@
   .component-preview-cards__category-icon-vocabulary {
     margin: 0 auto;
     text-align: center;
+
+    & ~ .preview-card{
+      &__title{
+        h3{
+          a{
+            span{
+              display: inline-block;
+              white-space: normal;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+
     &:before {
       content: attr(data-icon);
       color: white;
@@ -113,9 +129,9 @@
       h3{
         a{
           span{
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
+            //white-space: nowrap;
+            //overflow: hidden;
+            //text-overflow: ellipsis;
           }
         }
       }
@@ -140,7 +156,7 @@
           position: relative;
           line-height: 26px !important;
           span {
-            display: block;
+            //display: block;
             width: 100%;
             //white-space: normal;
             //overflow: hidden;