3476530 add text section and style blockquote
Issue #3304572 by crawleyhost, fjgarlin: Adapt message template and/or CSS so messages styling is properly applied
Closes #3476530
Test steps:
Checkout drupalorg branch https://gitlab.com/drupal-infrastructure/sites/drupalorg/-/merge_requests/47
- run
ddev composer install
- run
composer recreate
- run
composer install-storybook
- run
ddev yarn storybook
- look at the gloabl text component in storybook and verify the blockquote example matches figma at https://www.figma.com/design/tKYim76bnDZAyWubUi3sVv/New-Drupal-Brand---Drupal.org-Design?node-id=4289-29893&t=rGa1C78Xha1JGA7D-1
- log in to the Drupalorg local instance and edit the mothernode and add a "text Section" paragraph
- add the following markup:
<h2>Heading H2</h2>
<p>Lorem ipsum odor amet, consectetuer <strong> adipiscing elit. Velit massa proin integer; </strong> senectus viverra. Posuere maecenas aliquam nulla ut, egestas ex turpis eleifend. Proin parturient elit iaculis eleifend diam mattis parturient dolor aliquam? Feugiat id vehicula maecenas augue habitant laoreet sodales. Tempor maecenas dignissim lacinia cras est volutpat dignissim. Aliquet convallis nisl faucibus integer facilisis augue tristique luctus nullam. Dictumst habitant viverra nibh, massa feugiat tellus.</p>
<h3>Heading H3</h3>
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. <em>Duis cubilia conubia tempor magnis quis conubia etiam magnis.</em> Nunc fringilla mauris a maximus magna imperdiet efficitur; arcu vel. Primis senectus tincidunt rhoncus ullamcorper purus. Rutrum morbi rutrum gravida nisl imperdiet finibus viverra congue. Sollicitudin etiam nascetur luctus placerat magnis augue nulla faucibus tempor. Tortor convallis mauris phasellus ultricies; eget imperdiet aptent maximus. Interdum finibus elit ante blandit suspendisse phasellus natoque. Mollis pellentesque magna tristique hendrerit ridiculus imperdiet auctor. Lorem pellentesque senectus ligula nisl pulvinar elementum habitant hac.</p>
<blockquote class="quote__blockquote ">
"Consectetur tincidunt egestas nisl scelerisque phasellus. Molestie feugiat natoque eget; nec cras magnis. Quam tempor sem tristique primis sollicitudin a. Maecenas a orci torquent maecenas dis sodales cursus. Praesent parturient tempus curae taciti pretium tincidunt justo. Ut eleifend penatibus praesent etiam leo."
</blockquote>
<p>Dictum mollis ex netus morbi malesuada tristique. <b>Natoque</b> tincidunt vulputate nec nisl viverra vulputate fusce elit? Commodo arcu fermentum nulla; blandit est feugiat. Sapien ridiculus mus vel ridiculus ac commodo. Id commodo metus justo sapien accumsan mattis leo mollis. Semper nascetur habitant vestibulum eget mi sed tincidunt.</p>
<h4>Heading H4</h4>
<p>Eget blandit porta sodales dis vivamus purus. Nibh himenaeos <i>fringilla pulvinar urna gravida</i> torquent fringilla. Facilisis nisi pulvinar et urna netus suscipit. Proin id lectus sed netus est. Ipsum ex accumsan volutpat augue nec vivamus malesuada. Est montes curabitur dignissim, fermentum urna elementum. Ligula magnis porttitor blandit blandit ridiculus auctor felis.</p>
<ol>
<li>This text is list item</li>
<li>This is a longer list item by just a little.</li>
<li>This list item is very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</li>
</ol>
<h5>Heading H5</h5>
<p>Leo dictumst libero ultricies mus dignissim pellentesque. Nostra montes purus malesuada tempus massa pretium dapibus mus. Augue a adipiscing potenti dictum hendrerit dolor eleifend consequat. Mollis est curabitur dui etiam sodales parturient hac duis. Felis convallis leo mi nisi maecenas. Curabitur nibh suscipit eu lacus porttitor viverra velit tristique. Mi augue porttitor mus eget turpis arcu sed ipsum? Fusce sapien viverra cubilia aliquet scelerisque mi in. Ad fermentum amet cubilia lobortis accumsan. Torquent penatibus pharetra ac praesent penatibus, mollis malesuada gravida.</p>
<ul>
<li>This text is list item</li>
<li>This is a longer list item by just a little.</li>
<li>This list item is very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</li>
</ul>
<h6>Heading H6</h6>
<p>Dapibus nisi dignissim etiam maecenas; euismod magna libero. Dignissim hendrerit quis hac parturient ridiculus finibus montes sem. Laoreet volutpat blandit commodo blandit morbi sagittis habitasse. Vehicula ultrices justo sit odio nunc faucibus suspendisse. Maecenas accumsan sociosqu orci et augue enim ridiculus etiam. Quam risus fames euismod, natoque semper bibendum nibh pellentesque!</p>
- Review it against figma at https://www.figma.com/design/tKYim76bnDZAyWubUi3sVv/New-Drupal-Brand---Drupal.org-Design?node-id=1984-20563&t=rGa1C78Xha1JGA7D-1
- test the option to display the dots or not and verify the component displays as expected.
Edited by Bill Sprowl