Merge pull request #2580 from boltdesignsystem/feature/ds-868-listing…

…-teaser-line-clamp-prop

DS-868: Add description_clamp prop to Listing Teaser

docs-site/src/pages/pattern-lab/_patterns/40-components/listing-teaser/45-listing-teaser-layout.twig

@@ -89,5 +89,6 @@
   title: 'Listing Teaser Layout and Gutter',
   description: 'By default, a listing teaser has a horizontal layout, but it can be changed to vertical or responsive (content will wrap under the signifier at the small breakpoint).',
   demo: demo,
+  notes: notes,
   twig_markup: twig_markup,
 } only %}

docs-site/src/pages/pattern-lab/_patterns/40-components/listing-teaser/45-listing-teaser-line-clamp.twig

@@ -0,0 +1,68 @@
+{% set demo %}
+  {% set icon_questions %}
+    {% include '@bolt-elements-icon/icon.twig' with {
+      name: 'pega-chat-question',
+      size: 'large',
+      color: 'teal',
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
+    signifier: icon_questions,
+    variant: 'card',
+    headline: {
+      text: 'Listing Teaser with Default Line Clamp',
+      tag: 'h3',
+      size: 'large',
+      link_attributes: {
+        href: 'https://google.com'
+      },
+    },
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut tellus elementum sagittis vitae. Leo vel fringilla est ullamcorper eget nulla facilisi. Quis blandit turpis cursus in. Praesent semper feugiat nibh sed pulvinar proin. Fermentum posuere urna nec tincidunt praesent semper. Donec pretium vulputate sapien nec. Euismod nisi porta lorem mollis aliquam ut porttitor. Eget lorem dolor sed viverra. Donec enim diam vulputate ut pharetra sit amet aliquam. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Purus non enim praesent elementum facilisis leo vel fringilla est. Eget duis at tellus at urna condimentum mattis. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Dolor purus non enim praesent elementum facilisis leo vel.',
+    meta_items: [
+      'Posted 8 hours 15 minutes ago',
+      'Last activity: 2 minutes ago',
+    ],
+    attributes: {
+      class: 'u-bolt-margin-bottom-medium'
+    }
+  } only %}
+
+  {% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
+    signifier: icon_questions,
+    variant: 'card',
+    headline: {
+      text: 'Listing Teaser with <code>description_clamp</code> set to <code>false</code>',
+      tag: 'h3',
+      size: 'large',
+      link_attributes: {
+        href: 'https://google.com'
+      },
+    },
+    description_clamp: false,
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut tellus elementum sagittis vitae. Leo vel fringilla est ullamcorper eget nulla facilisi. Quis blandit turpis cursus in. Praesent semper feugiat nibh sed pulvinar proin. Fermentum posuere urna nec tincidunt praesent semper. Donec pretium vulputate sapien nec. Euismod nisi porta lorem mollis aliquam ut porttitor. Eget lorem dolor sed viverra. Donec enim diam vulputate ut pharetra sit amet aliquam. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Purus non enim praesent elementum facilisis leo vel fringilla est. Eget duis at tellus at urna condimentum mattis. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Dolor purus non enim praesent elementum facilisis leo vel.',
+    meta_items: [
+      'Posted 8 hours 15 minutes ago',
+      'Last activity: 2 minutes ago',
+    ],
+    attributes: {
+      class: 'u-bolt-margin-bottom-medium'
+    }
+  } only %}
+{% endset %}
+
+{% set twig_markup %}
+{% verbatim %}
+  {% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
+    description_clamp: false,
+    ...
+  } only %}
+{% endverbatim %}
+{% endset %}
+
+{% include '@utils/pattern-doc-page.twig' with {
+  title: 'Listing Teaser Line Clamp',
+  description: 'By defualt, a listing teaser will shorten the description after a number of lines determind by a breakpoint. Setting this prop to false will allow the entire description to be previewed.',
+  demo: demo,
+  twig_markup: twig_markup,
+} only %}

packages/components/bolt-listing-teaser/listing-teaser.schema.js

@@ -126,6 +126,12 @@ module.exports = {
       description:
         'Render a short description for the listing. Listing summary usually goes here. Do not pass links here unless absolutely necessary.',
     },
+    description_clamp: {
+      type: 'boolean',
+      description:
+        'Set prop to false to remove the default line clamping on the description.',
+      default: true,
+    },
     warning: {
       type: 'any',
       description:

packages/components/bolt-listing-teaser/src/listing-teaser.scss

@@ -184,7 +184,7 @@
   }
 }
 
-.c-bolt-listing-teaser__flag-content__item:not(.c-bolt-listing-teaser__flag-content__item--reply):not(.c-bolt-listing-teaser__flag-content__item--warning) {
+.c-bolt-listing-teaser__flag-content__item:not(.c-bolt-listing-teaser__flag-content__item--reply):not(.c-bolt-listing-teaser__flag-content__item--warning):not(.c-bolt-listing-teaser__flag-content__item--no-clamp) {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

packages/components/bolt-listing-teaser/src/listing-teaser.twig

@@ -59,7 +59,7 @@
           {% spaceless %}<ul class="c-bolt-listing-teaser__meta">{% for item in meta_items %}<li class="c-bolt-listing-teaser__meta__item">{{ item }}</li>{% endfor %}</ul>{% endspaceless %}
         {% endif %}
         {% if description %}
-          <div class="c-bolt-listing-teaser__flag-content__item">
+          <div class="c-bolt-listing-teaser__flag-content__item{{ this.data.description_clamp.value ? '' : ' c-bolt-listing-teaser__flag-content__item--no-clamp' }}">
             {{ description }}
           </div>
         {% endif %}