Refactor Quote component to support citation

[AlexSkrypnyk]

Current implementation of the Quote component does not allow to have citation sitting inside of the <blockquote> tag.

<figure class="ct-quote ct-theme-light  ">
    <blockquote class="ct-quote__content">
      Quote content
    </blockquote>      
    <figcaption class="ct-quote__author">
        Quote author
    </figcaption>
</figure>

This is a problem for the cases when the tag needs to be native (used as a <blockquote> rather than a whole wrapping <div> with inner elements) within other HTML content.

Luckily, there is a <cite> tag that can be used within <blockquote>:

<blockquote class="ct-quote ct-theme-light">
  Quote content
  <cite>
  Quote author
  </cite>
</blockquote> 

Solution direction

1. Refactor the Quote component to use the new structure and update SCSS.

Note

This is a blocker for https://www.drupal.org/project/civictheme/issues/3415738

[fionamorrison23]

@AlexSkrypnyk @joshua-salsadigital as we are decommissioning the actual quote component https://www.drupal.org/project/civictheme/issues/3415738 this work needs to be done on the Quote style in the CK Editor.

[fionamorrison23]

@joshua-salsadigital this one is in 1.8, not 1.7. The only reason being we are decommissioning the qute component and instead using the CK Editor quote tool. The work you have done, where does it apply?

[joshua-salsadigital]

@fionamorrison23 This is a part of change required for https://www.drupal.org/project/civictheme/issues/3415738
which will handle the existing data.

Quote style in the CK Editor. (Is this a new requirement)

[AlexSkrypnyk]

@sonamchaturvedi28
Please test in https://civictheme-uikit.netlify.app/

[AlexSkrypnyk]

@fionamorrison23
this work has been done and can be shipped in 1.7
The decommissioning of the Quote component depends on this ticket, but this ticket does not depends on that one.

[sonamchaturvedi28]

Test link: https://civictheme-uikit.netlify.app
Test Status: PASS
Test Result:

• Quote component supports citation
• There is a <cite> tag used within <blockquote>