Merge pull request #123 from w3c/feature/#454-quote-component

Refactor quote component

Author: deniak

assets-src/styles/sass/30-base/_quotes.scss

@@ -22,6 +22,10 @@ blockquote {
 		margin-top: 1rem;
 	}
 
+    > *:first-child {
+        margin-top: 0;
+    }
+
 	cite {
 		color: $off-black;
 		font-size: 1rem;

assets-src/styles/sass/50-core-components/_quotes.scss

@@ -4,7 +4,6 @@
 
 .component--quote {
 	@include txt-saturn;
-	@include stack(1rem);
 	color: $w3c-blue;
 	font-weight: bold;
 	margin-inline-end: 0;
@@ -15,30 +14,13 @@
 	&::before {
 		background-color: $w3c-blue;
 		border-radius: rem(5);
-		content: '';
-		height: 100%;
 		left: rem(-10);
-		position: absolute;
-		top: 0;
 		width: rem(10);
 	}
 
 	> * {
 		max-width: rem(630);
 	}
-
-	blockquote {
-		margin-inline-start: 0;
-		padding: 0;
-
-		p:first-of-type {
-			margin-top: 0;
-		}
-
-		&::before {
-			display: none;
-		}
-	}
 }
 
 [dir="rtl"] {

design-system-templates/components/quote.html.twig

@@ -1,6 +1,4 @@
-<figure class="component component--quote">
-	<blockquote>
-		<p>The goal of the Web is to serve humanity. We build it now so that those who come to it later will be able to create things we cannot ourselves imagine.</p>
-	</blockquote>
-	<figcaption>Sir Tim Berners-Lee</figcaption>
-</figure>
+<blockquote class="component component--quote">
+    <p>The goal of the Web is to serve humanity. We build it now so that those who come to it later will be able to create things we cannot ourselves imagine.</p>
+    <footer>Sir Tim Berners-Lee</footer>
+</blockquote>

public/dist/assets/styles/core.css

@@ -501,6 +501,9 @@ blockquote::before {
 blockquote > * + * {
   margin-top: 1rem;
 }
+blockquote > *:first-child {
+  margin-top: 0;
+}
 blockquote cite {
   color: #111;
   font-size: 1rem;
@@ -3156,9 +3159,6 @@ main,
 .component--quote {
   font-size: 1.125rem;
   line-height: 1.5;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
   color: #005a9c;
   font-weight: bold;
   -webkit-margin-end: 0;
@@ -3168,33 +3168,15 @@ main,
   padding: 1.25rem;
   position: relative;
 }
-.component--quote > * + * {
-  margin-top: 1rem;
-}
 .component--quote::before {
   background-color: #005a9c;
   border-radius: 0.3125rem;
-  content: "";
-  height: 100%;
   left: -0.625rem;
-  position: absolute;
-  top: 0;
   width: 0.625rem;
 }
 .component--quote > * {
   max-width: 39.375rem;
 }
-.component--quote blockquote {
-  -webkit-margin-start: 0;
-          margin-inline-start: 0;
-  padding: 0;
-}
-.component--quote blockquote p:first-of-type {
-  margin-top: 0;
-}
-.component--quote blockquote::before {
-  display: none;
-}
 
 [dir=rtl] .component--quote::before {
   left: auto;

public/dist/assets/styles/core.min.css

@@ -1,10 +1,8 @@
-<figure class="component component--quote">
-    <blockquote>
-        <p>
-            {% block text %}{% endblock %}
-        </p>
-    </blockquote>
+<blockquote class="component component--quote">
+    <p>
+        {% block text %}{% endblock %}
+    </p>
     {% if author is defined and author is not empty %}
-        <figcaption>{{ author }}</figcaption>
+        <footer>{{ author }}</footer>
     {% endif %}
-</figure>
+</blockquote>