Skip to content

Resolve #3476530 "Rich text component"

Closes #3476530

  1. run ddev composer install
  2. run composer recreate
  3. run composer install-storybook
  4. run ddev yarn storybook
  5. Open the storybook and navigated to https://drupalorg.ddev.site:6006/?path=/story/branding-typography-gobal-text-area-example--global-text-area
  6. The typography should match the Figma at https://www.figma.com/design/tKYim76bnDZAyWubUi3sVv/New-Drupal-Brand---Drupal.org-Design?node-id=4289-29893&t=lK48W80soe5LwN1e-1
  7. Compare at desktop and mobile
  8. View the Drupal site and edit the Mission & Vision node

Paste the following into the body

 <h2>Heading H2</h2>
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Velit massa proin integer; magnis 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. Duis cubilia conubia tempor magnis quis conubia etiam magnis. 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>

      <p>Dictum mollis ex netus morbi malesuada tristique. Natoque 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 fringilla pulvinar urna gravida 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>
  1. Save the page and compare it to the Figma at Desktop and mobile.
  2. Now review the Mother Node. You may need to fix the broken strong tag.
  3. The Mother Node should generally look the same but h1, h2, and h3 headers should have more in-between sizes at breakpoints between mobile and desktop and therefore look less large in those places.

Still to do:

  • the quotation element
  • a text paragraph component
  • table styles
Edited by Bill Sprowl

Merge request reports

Loading