Skip to content

Commit 9f7370b

Browse files
wesleycolewesleycole
committed
adding testimonial component
1 parent 8804b24 commit 9f7370b

File tree

10 files changed

+127
-2
lines changed

10 files changed

+127
-2
lines changed

‎_component/testimonial/component.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<figure class="Testimonial" itemscope itemtype="http://schema.org/Review">
2+
<blockqoute itemprop="reviewBody">This is the greatest compnoent library out there... 10up is even awesomer for inspiring it!</blockquote>
3+
<footer>
4+
<cite class="TestimonialAuthor" itemprop="author">- Wes Cole</cite>
5+
</footer>
6+
</figure>

‎_component/testimonial/component.php

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<figure class="Testimonial" itemscope itemtype="http://schema.org/Review">
2+
<blockqoute itemprop="reviewBody"><?php the_field( 'testimonial_quote' ); ?></blockquote>
3+
<footer>
4+
<cite class="TestimonialAuthor" itemprop="author">- <?php the_field( 'testimonial_author' ); ?></cite>
5+
</footer>
6+
</figure>

‎_component/testimonial/component.twig

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{% raw %}<figure class="Testimonial" itemscope itemtype="http://schema.org/Review">
2+
<blockqoute itemprop="reviewBody">{{testimonial.get_field('testimonial_quote')}}</blockquote>
3+
<footer>
4+
<cite class="TestimonialAuthor" itemprop="author">- {{testimonial.get_field('testimonial_author')}}</cite>
5+
</footer>
6+
</figure>{% endraw %}

‎_component/testimonial/example.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US" class="no-js">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Accordion</title>
6+
<link rel="stylesheet" href="css/component.css" />
7+
</head>
8+
<body>
9+
10+
<figure class="Testimonial">
11+
<blockqoute>This is the greatest compnoent library out there... 10up is even awesomer for inspiring it!</blockquote>
12+
<footer>
13+
<cite class="TestimonialAuthor">- Wes Cole</cite>
14+
</footer>
15+
</figure>
16+
17+
<script src="js/component.js"></script>
18+
<script src="js/component-usage.js"></script>
19+
</body>
20+
</html>

‎_component/testimonial/index.md

+12-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,17 @@ title: Testimonial
33
layout: component
44
path_slug: testimonial
55
category: content
6+
iframe_height: medium
67
---
78

8-
## Testimonial
9+
<iframe {% if page.iframe_height %}class="h-{{ page.iframe_height }}"{% endif %} src="{{ site.baseurl }}/component/{{ page.path_slug }}/example.html"></iframe>
10+
11+
## Advanced Custom Fields
12+
If working with ACF, you will want to utilize the following fields:
13+
14+
Fields:
15+
* Textarea: `testimonial_quote`
16+
* Text: `testimonial_author`
17+
18+
## Markup
19+
{% include partials/markup.md %}

‎_site/component/testimonial/component.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<figure class="Testimonial" itemscope itemtype="http://schema.org/Review">
2+
<blockqoute itemprop="reviewBody">This is the greatest compnoent library out there... 10up is even awesomer for inspiring it!</blockquote>
3+
<footer>
4+
<cite class="TestimonialAuthor" itemprop="author">- Wes Cole</cite>
5+
</footer>
6+
</figure>

‎_site/component/testimonial/component.php

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<figure class="Testimonial" itemscope itemtype="http://schema.org/Review">
2+
<blockqoute itemprop="reviewBody"><?php the_field( 'testimonial_quote' ); ?></blockquote>
3+
<footer>
4+
<cite class="TestimonialAuthor" itemprop="author">- <?php the_field( 'testimonial_author' ); ?></cite>
5+
</footer>
6+
</figure>

‎_site/component/testimonial/component.twig

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{% raw %}<figure class="Testimonial" itemscope itemtype="http://schema.org/Review">
2+
<blockqoute itemprop="reviewBody">{{testimonial.get_field('testimonial_quote')}}</blockquote>
3+
<footer>
4+
<cite class="TestimonialAuthor" itemprop="author">- {{testimonial.get_field('testimonial_author')}}</cite>
5+
</footer>
6+
</figure>{% endraw %}

‎_site/component/testimonial/example.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US" class="no-js">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Accordion</title>
6+
<link rel="stylesheet" href="css/component.css" />
7+
</head>
8+
<body>
9+
10+
<figure class="Testimonial">
11+
<blockqoute>This is the greatest compnoent library out there... 10up is even awesomer for inspiring it!</blockquote>
12+
<footer>
13+
<cite class="TestimonialAuthor">- Wes Cole</cite>
14+
</footer>
15+
</figure>
16+
17+
<script src="js/component.js"></script>
18+
<script src="js/component-usage.js"></script>
19+
</body>
20+
</html>

‎_site/component/testimonial/index.html

+39-1
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,45 @@ <h4>Twig</h4>
134134
<h1>Testimonial</h1>
135135

136136

137-
<h2 id="testimonial">Testimonial</h2>
137+
<iframe class="h-medium" src="/component-library/component/testimonial/example.html"></iframe>
138+
139+
<h2 id="advanced-custom-fields">Advanced Custom Fields</h2>
140+
<p>If working with ACF, you will want to utilize the following fields:</p>
141+
142+
<p>Fields:</p>
143+
<ul>
144+
<li>Textarea: <code class="highlighter-rouge">testimonial_quote</code></li>
145+
<li>Text: <code class="highlighter-rouge">testimonial_author</code></li>
146+
</ul>
147+
148+
<h2 id="markup">Markup</h2>
149+
<h3>HTML</h3>
150+
<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"Testimonial"</span> <span class="na">itemscope</span> <span class="na">itemtype=</span><span class="s">"http://schema.org/Review"</span><span class="nt">&gt;</span>
151+
<span class="nt">&lt;blockqoute</span> <span class="na">itemprop=</span><span class="s">"reviewBody"</span><span class="nt">&gt;</span>This is the greatest compnoent library out there... 10up is even awesomer for inspiring it!<span class="nt">&lt;/blockquote&gt;</span>
152+
<span class="nt">&lt;footer&gt;</span>
153+
<span class="nt">&lt;cite</span> <span class="na">class=</span><span class="s">"TestimonialAuthor"</span> <span class="na">itemprop=</span><span class="s">"author"</span><span class="nt">&gt;</span>- Wes Cole<span class="nt">&lt;/cite&gt;</span>
154+
<span class="nt">&lt;/footer&gt;</span>
155+
<span class="nt">&lt;/figure&gt;</span>
156+
</code></pre>
157+
</div>
158+
<h3>PHP</h3>
159+
<div class="language-php highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"Testimonial"</span> <span class="na">itemscope</span> <span class="na">itemtype=</span><span class="s">"http://schema.org/Review"</span><span class="nt">&gt;</span>
160+
<span class="nt">&lt;blockqoute</span> <span class="na">itemprop=</span><span class="s">"reviewBody"</span><span class="nt">&gt;</span><span class="cp">&lt;?php</span> <span class="nx">the_field</span><span class="p">(</span> <span class="s1">'testimonial_quote'</span> <span class="p">);</span> <span class="cp">?&gt;</span><span class="nt">&lt;/blockquote&gt;</span>
161+
<span class="nt">&lt;footer&gt;</span>
162+
<span class="nt">&lt;cite</span> <span class="na">class=</span><span class="s">"TestimonialAuthor"</span> <span class="na">itemprop=</span><span class="s">"author"</span><span class="nt">&gt;</span>- <span class="cp">&lt;?php</span> <span class="nx">the_field</span><span class="p">(</span> <span class="s1">'testimonial_author'</span> <span class="p">);</span> <span class="cp">?&gt;</span><span class="nt">&lt;/cite&gt;</span>
163+
<span class="nt">&lt;/footer&gt;</span>
164+
<span class="nt">&lt;/figure&gt;</span>
165+
</code></pre>
166+
</div>
167+
<h3>Twig</h3>
168+
<div class="language-twig highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"Testimonial"</span> <span class="na">itemscope</span> <span class="na">itemtype=</span><span class="s">"http://schema.org/Review"</span><span class="nt">&gt;</span>
169+
<span class="nt">&lt;blockqoute</span> <span class="na">itemprop=</span><span class="s">"reviewBody"</span><span class="nt">&gt;</span><span class="cp">{{</span><span class="nv">testimonial.get_field</span><span class="p">(</span><span class="s1">'testimonial_quote'</span><span class="p">)</span><span class="cp">}}</span><span class="nt">&lt;/blockquote&gt;</span>
170+
<span class="nt">&lt;footer&gt;</span>
171+
<span class="nt">&lt;cite</span> <span class="na">class=</span><span class="s">"TestimonialAuthor"</span> <span class="na">itemprop=</span><span class="s">"author"</span><span class="nt">&gt;</span>- <span class="cp">{{</span><span class="nv">testimonial.get_field</span><span class="p">(</span><span class="s1">'testimonial_author'</span><span class="p">)</span><span class="cp">}}</span><span class="nt">&lt;/cite&gt;</span>
172+
<span class="nt">&lt;/footer&gt;</span>
173+
<span class="nt">&lt;/figure&gt;</span>
174+
</code></pre>
175+
</div>
138176

139177
</div>
140178

0 commit comments

Comments
 (0)