Merge pull request #31 from uswds/cm-mc-part-3

Extending: Exercise 3
uswds · Mar 19, 2024 · 7d11931 · 7d11931
2 parents 4f86ef0 + 5c284e7
commit 7d11931
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 0 deletions.
diff --git a/_includes/sxs/02-extending/testimonial.html b/_includes/sxs/02-extending/testimonial.html
@@ -0,0 +1,19 @@
+<div class="usa-card ut-testimonial">
+  <div class="usa-card__container">
+    <svg class="usa-icon ut-testimonial__icon" aria-hidden="true" focusable="false" role="img" height="50px" width="50px">
+      <use xlink:href="/assets/uswds/img/sprite.svg#format_quote"></use>
+    </svg>
+    <div class="usa-card__body ut-testimonial__quote">
+      <p>
+        "Wow, this component sure is great"
+      </p>
+    </div>
+    <div class="usa-card__footer ut-testimonial__footer">
+      <img src="https://doodleipsum.com/100x100/avatar-5?bg=a5a8eb&shape=circle&n=1" alt="Profile pic">
+      <div class="ut-testimonial__profile">
+        <p class="ut-testimonial__profile-name">Person McGuy</p>
+        <p class="ut-testimonial__profile-title">USWDS User</p>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/_theme/_uswds-theme-custom-styles.scss b/_theme/_uswds-theme-custom-styles.scss
@@ -23,6 +23,7 @@ i.e.
 @use "uswds-core" as *;
 @forward "../assets/css/styles.scss";
 @forward "../assets/css/components/ut-card.scss";
+@forward "../assets/css/components/ut-testimonial.scss";
 
 :root {
    --blue-2: #{color("blue-warm-20v")};

diff --git a/assets/css/components/ut-testimonial.scss b/assets/css/components/ut-testimonial.scss
@@ -0,0 +1,40 @@
+@use "uswds-core" as *;
+
+$ut-testimonial-icon-color: color("indigo-30");
+
+.ut-testimonial .usa-card__container {
+  @include set-text-and-bg("indigo-70v", "indigo-20");
+}
+
+.ut-testimonial__icon {
+  @include u-square(7);
+  fill: $ut-testimonial-icon-color;
+  stroke: $ut-testimonial-icon-color;
+}
+
+.ut-testimonial__quote p {
+  @include u-font-size("heading", "xl");
+  font-weight: font-weight("bold");
+}
+
+.ut-testimonial__footer {
+  @include u-display("flex");
+  @include u-flex("row");
+}
+
+.ut-testimonial img {
+  @include u-circle(10);
+}
+
+.ut-testimonial__profile {
+  @include u-margin-left(2);
+}
+
+.ut-testimonial__profile-name {
+  @include u-text("indigo-10v");
+}
+
+.ut-testimonial__profile-title {
+  @include u-margin-top(0);
+  font-size: font-size("body", 5);
+}
diff --git a/pages/02-extending/index.html b/pages/02-extending/index.html
@@ -29,6 +29,7 @@
       <div class="demo-display grid-col-5">
         <div class="position-sticky top-1">
           {% include "sxs/02-extending/card.html" %}
+          {% include "sxs/02-extending/testimonial.html" %}
         </div>
       </div>
     </div>