From f1aa2b7a9314f2c2edae7f6edbbefa2d4028871b Mon Sep 17 00:00:00 2001 From: CJ White Date: Wed, 30 Nov 2022 13:59:06 -0500 Subject: [PATCH 1/2] DS-868 add description_clamp prop and fix not bug in another demo --- .../45-listing-teaser-layout.twig | 1 + .../45-listing-teaser-line-clamp.twig | 68 +++++++++++++++++++ .../listing-teaser.schema.js | 6 ++ .../src/listing-teaser.scss | 2 +- .../src/listing-teaser.twig | 5 +- 5 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 docs-site/src/pages/pattern-lab/_patterns/40-components/listing-teaser/45-listing-teaser-line-clamp.twig diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/listing-teaser/45-listing-teaser-layout.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/listing-teaser/45-listing-teaser-layout.twig index 1fdc1985e9..f6e4d480a2 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/40-components/listing-teaser/45-listing-teaser-layout.twig +++ b/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 %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/listing-teaser/45-listing-teaser-line-clamp.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/listing-teaser/45-listing-teaser-line-clamp.twig new file mode 100644 index 0000000000..20a0f7bebc --- /dev/null +++ b/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 description_clamp set to false', + 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 %} diff --git a/packages/components/bolt-listing-teaser/listing-teaser.schema.js b/packages/components/bolt-listing-teaser/listing-teaser.schema.js index 3431bbf8eb..73bc2455be 100644 --- a/packages/components/bolt-listing-teaser/listing-teaser.schema.js +++ b/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: diff --git a/packages/components/bolt-listing-teaser/src/listing-teaser.scss b/packages/components/bolt-listing-teaser/src/listing-teaser.scss index be045002ac..172b16deb7 100644 --- a/packages/components/bolt-listing-teaser/src/listing-teaser.scss +++ b/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; diff --git a/packages/components/bolt-listing-teaser/src/listing-teaser.twig b/packages/components/bolt-listing-teaser/src/listing-teaser.twig index 61869bd28d..ca59a2dc2c 100644 --- a/packages/components/bolt-listing-teaser/src/listing-teaser.twig +++ b/packages/components/bolt-listing-teaser/src/listing-teaser.twig @@ -59,7 +59,10 @@ {% spaceless %}{% endspaceless %} {% endif %} {% if description %} -
+
{{ description }}
{% endif %} From 6ca3a448010c6ef54732f8b8b7620cd194bbbcf8 Mon Sep 17 00:00:00 2001 From: CJ White Date: Thu, 1 Dec 2022 13:45:30 -0500 Subject: [PATCH 2/2] DS-868 clear whitespace around class names --- .../components/bolt-listing-teaser/src/listing-teaser.twig | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/components/bolt-listing-teaser/src/listing-teaser.twig b/packages/components/bolt-listing-teaser/src/listing-teaser.twig index ca59a2dc2c..1b3b957a21 100644 --- a/packages/components/bolt-listing-teaser/src/listing-teaser.twig +++ b/packages/components/bolt-listing-teaser/src/listing-teaser.twig @@ -59,10 +59,7 @@ {% spaceless %}
    {% for item in meta_items %}
  • {{ item }}
    • {% endfor %}
{% endspaceless %} {% endif %} {% if description %} -
+
{{ description }}
{% endif %}