Quote tweaks (#105)

* Created quote element within elements directory based on design Kerri made for the Engineering project * tweak Quote template to make it easier to include directly into themes * don't hardcode path to quote's image
SU-SWS · Apr 23, 2018 · a29ae8b · a29ae8b
1 parent e2b7795
commit a29ae8b
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 24 deletions.
diff --git a/css/decanter.css b/css/decanter.css
diff --git a/img/headshot.jpg b/img/headshot.jpg
diff --git a/scss/utilities/mixins/quote/_quote.scss b/scss/utilities/mixins/quote/_quote.scss
@@ -29,7 +29,7 @@
       margin-bottom: .5em;
     }
 
-    .decanter-quote__detail {
+    .decanter-quote__bio {
       margin: 0;
     }
 

diff --git a/styleguide/item-elements-quote.html b/styleguide/item-elements-quote.html
@@ -136,11 +136,11 @@ <h2 class="kss-title kss-title--level-2">
 
           <div class="kss-modifier__example">
             <div class="decanter-quote">
-  <img class="decanter-quote__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <img class="decanter-quote__img " src="../../../img/headshot.jpg" alt="Jane Doe">
   <div class="decanter-quote__body ">
-    <p class="decanter-quote__heading">John Doe</p>
-    <p class="decanter-quote__detail">Detail 1<br>Detail 2</p>
-    <p class="decanter-quote__quote">"This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..."</p>
+    <p class="decanter-quote__heading">Jane Doe</p>
+    <p class="decanter-quote__bio">Jane Doe's title<br/>Jane Doe's company</p>
+    <p class="decanter-quote__quote">"This is the actual quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..."</p>
   </div>
 </div>
 
@@ -153,11 +153,11 @@ <h2 class="kss-title kss-title--level-2">
                               Markup: <code>../templates/elements/quote/quote.html.twig</code>
                           </summary>
             <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;decanter-quote&quot;&gt;
-  &lt;img class=&quot;decanter-quote__img &quot; src=&quot;../../../img/circle.png&quot; alt=&quot;Please provide alt text&quot;&gt;
+  &lt;img class=&quot;decanter-quote__img &quot; src=&quot;../../../img/headshot.jpg&quot; alt=&quot;Jane Doe&quot;&gt;
   &lt;div class=&quot;decanter-quote__body &quot;&gt;
-    &lt;p class=&quot;decanter-quote__heading&quot;&gt;John Doe&lt;/p&gt;
-    &lt;p class=&quot;decanter-quote__detail&quot;&gt;Detail 1&lt;br&gt;Detail 2&lt;/p&gt;
-    &lt;p class=&quot;decanter-quote__quote&quot;&gt;&quot;This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et...&quot;&lt;/p&gt;
+    &lt;p class=&quot;decanter-quote__heading&quot;&gt;Jane Doe&lt;/p&gt;
+    &lt;p class=&quot;decanter-quote__bio&quot;&gt;Jane Doe&#039;s title&lt;br/&gt;Jane Doe&#039;s company&lt;/p&gt;
+    &lt;p class=&quot;decanter-quote__quote&quot;&gt;&quot;This is the actual quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et...&quot;&lt;/p&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </code></pre>

diff --git a/styleguide/section-elements.html b/styleguide/section-elements.html
@@ -686,11 +686,11 @@ <h2 class="kss-title kss-title--level-2">
 
           <div class="kss-modifier__example">
             <div class="decanter-quote">
-  <img class="decanter-quote__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <img class="decanter-quote__img " src="../../../img/headshot.jpg" alt="Jane Doe">
   <div class="decanter-quote__body ">
-    <p class="decanter-quote__heading">John Doe</p>
-    <p class="decanter-quote__detail">Detail 1<br>Detail 2</p>
-    <p class="decanter-quote__quote">"This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..."</p>
+    <p class="decanter-quote__heading">Jane Doe</p>
+    <p class="decanter-quote__bio">Jane Doe's title<br/>Jane Doe's company</p>
+    <p class="decanter-quote__quote">"This is the actual quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..."</p>
   </div>
 </div>
 
@@ -703,11 +703,11 @@ <h2 class="kss-title kss-title--level-2">
                               Markup: <code>../templates/elements/quote/quote.html.twig</code>
                           </summary>
             <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;decanter-quote&quot;&gt;
-  &lt;img class=&quot;decanter-quote__img &quot; src=&quot;../../../img/circle.png&quot; alt=&quot;Please provide alt text&quot;&gt;
+  &lt;img class=&quot;decanter-quote__img &quot; src=&quot;../../../img/headshot.jpg&quot; alt=&quot;Jane Doe&quot;&gt;
   &lt;div class=&quot;decanter-quote__body &quot;&gt;
-    &lt;p class=&quot;decanter-quote__heading&quot;&gt;John Doe&lt;/p&gt;
-    &lt;p class=&quot;decanter-quote__detail&quot;&gt;Detail 1&lt;br&gt;Detail 2&lt;/p&gt;
-    &lt;p class=&quot;decanter-quote__quote&quot;&gt;&quot;This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et...&quot;&lt;/p&gt;
+    &lt;p class=&quot;decanter-quote__heading&quot;&gt;Jane Doe&lt;/p&gt;
+    &lt;p class=&quot;decanter-quote__bio&quot;&gt;Jane Doe&#039;s title&lt;br/&gt;Jane Doe&#039;s company&lt;/p&gt;
+    &lt;p class=&quot;decanter-quote__quote&quot;&gt;&quot;This is the actual quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et...&quot;&lt;/p&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </code></pre>

diff --git a/templates/elements/quote/quote.html.json b/templates/elements/quote/quote.html.json
@@ -1,6 +1,7 @@
 {
-  "name": "John Doe",
-  "detail1": "Detail 1",
-  "detail2": "Detail 2",
-  "text": "This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..."
+  "name": "Jane Doe",
+  "bio": "Jane Doe's title<br/>Jane Doe's company",
+  "text": "This is the actual quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et...",
+  "image": "../../../img/headshot.jpg",
+  "altText": "Jane Doe"
 }
diff --git a/templates/elements/quote/quote.html.twig b/templates/elements/quote/quote.html.twig
@@ -1,8 +1,8 @@
 <div class="decanter-quote">
-  <img class="decanter-quote__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <img class="decanter-quote__img " src="{{ image }}" alt="{{ altText }}">
   <div class="decanter-quote__body ">
     <p class="decanter-quote__heading">{{ name }}</p>
-    <p class="decanter-quote__detail">{{ detail1 }}<br>{{ detail2 }}</p>
+    <p class="decanter-quote__bio">{{ bio }}</p>
     <p class="decanter-quote__quote">"{{ text }}"</p>
   </div>
 </div>