chore: tup-636 c-card--image - less templates (#257)

* adding image cards to demo

* adds in all section colors. adds in styles for demo

* Remove duplicate code from c-card--from-tup-cms.css pertaining to card--images. Removed _c-card--one-image.hbs file.

* resolved conflicts

* consistent 5-line space between different contexts

https://confluence.tacc.utexas.edu/x/SQALBg#UICSSStyleGuideWhitespace&Organization-MeaningfulWhitespace

* added in build dist files - just in case

* fix: remove import of deleted file

* style: restore final NL in file (to reduce diff)

* style: remvoe excess whitespace

* creating more files to make card--images dynamic

* chore: tup-636 c-card--image w/ less templates

* feat: tup-636 c-card--image demo warning

---------

Co-authored-by: Tomas Gonzalez <[email protected]>
Co-authored-by: Tomas Gonzalez <[email protected]>

src/lib/_imports/components/c-card/_c-card--image.hbs

@@ -0,0 +1,22 @@
+<article class="c-card c-card--{{variant}} c-card--image-{{position}}">
+{{#if is-staff}}
+
+  <h4><a href="#">Bender Rodríguez</a></h4>
+  <p>Planet Express Worker</p>
+  <p>Anti-hero in Futurama</p>
+  <img class="img-fluid" width="234px" height="293px"
+    src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png"
+    title="University of Texas at Austin" class="img-fluid"
+  />
+
+{{else}}
+
+  <h3>Card - Image {{position}}</h3>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+  {{#if tall}}
+  {{> @message tag="p" type="warning" scope="inline" content="Narrow images might not fill space available. Just use a wider image." }}
+  {{/if}}
+  <img src="{{> @img-url wide=wide tall=tall medium=true }}" />
+
+{{/if}}
+</article>

src/lib/_imports/components/c-card/c-card--images.hbs

@@ -2,106 +2,106 @@
 <section class="o-section">
     <h3>Transparent Card Image</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-transparent }}
-        {{> @c-card--image-bottom-transparent }}
-        {{> @c-card--image-right-transparent }}
-        {{> @c-card--image-left-transparent }}
+        {{> @c-card--image position="top" wide=true variant="transparent" }}
+        {{> @c-card--image position="bottom" wide=true variant="transparent" }}
+        {{> @c-card--image position="right" tall=true variant="transparent" }}
+        {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
     <h3>Contact Card with Image - Transparent</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-staff-transparent }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
     </section>
 
     <h3>Plain Card Image</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-plain }}
-        {{> @c-card--image-bottom-plain }}
-        {{> @c-card--image-right-plain }}
-        {{> @c-card--image-left-plain }}
+        {{> @c-card--image position="top" wide=true variant="plain" }}
+        {{> @c-card--image position="bottom" wide=true variant="plain" }}
+        {{> @c-card--image position="right" tall=true variant="plain" }}
+        {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
     <h3>Contact Card with Image - Plain</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-staff-plain }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
     </section>
 </section>
 <hr>
 <h2 id="section--null">Section - Light</h2>
 <section class="o-section o-section--style-light">
     <h3>Transparent Card Image</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-transparent }}
-        {{> @c-card--image-bottom-transparent }}
-        {{> @c-card--image-right-transparent }}
-        {{> @c-card--image-left-transparent }}
+        {{> @c-card--image position="top" wide=true variant="transparent" }}
+        {{> @c-card--image position="bottom" wide=true variant="transparent" }}
+        {{> @c-card--image position="right" tall=true variant="transparent" }}
+        {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
     <h3>Contact Card with Image - Transparent</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-staff-transparent }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
     </section>
 
     <h3>Plain Card Image</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-plain }}
-        {{> @c-card--image-bottom-plain }}
-        {{> @c-card--image-right-plain }}
-        {{> @c-card--image-left-plain }}
+        {{> @c-card--image position="top" wide=true variant="plain" }}
+        {{> @c-card--image position="bottom" wide=true variant="plain" }}
+        {{> @c-card--image position="right" tall=true variant="plain" }}
+        {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
     <h3>Contact Card with Image - Plain</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-staff-plain }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
     </section>
 </section>
 <hr>
 <h2 id="section--null">Section - Muted</h2>
 <section class="o-section o-section--style-muted">
     <h3>Transparent Card Image</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-transparent }}
-        {{> @c-card--image-bottom-transparent }}
-        {{> @c-card--image-right-transparent }}
-        {{> @c-card--image-left-transparent }}
+        {{> @c-card--image position="top" wide=true variant="transparent" }}
+        {{> @c-card--image position="bottom" wide=true variant="transparent" }}
+        {{> @c-card--image position="right" tall=true variant="transparent" }}
+        {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
     <h3>Contact Card with Image - Transparent</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-staff-transparent }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
     </section>
 
     <h3>Plain Card Image</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-plain }}
-        {{> @c-card--image-bottom-plain }}
-        {{> @c-card--image-right-plain }}
-        {{> @c-card--image-left-plain }}
+        {{> @c-card--image position="top" wide=true variant="plain" }}
+        {{> @c-card--image position="bottom" wide=true variant="plain" }}
+        {{> @c-card--image position="right" tall=true variant="plain" }}
+        {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
     <h3>Contact Card with Image - Plain</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-staff-plain }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
     </section>
 </section>
 <hr>
 <h2 id="section--null">Section - Dark</h2>
 <section class="o-section o-section--style-dark">
     <h3>Transparent Card Image</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-transparent }}
-        {{> @c-card--image-bottom-transparent }}
-        {{> @c-card--image-right-transparent }}
-        {{> @c-card--image-left-transparent }}
+        {{> @c-card--image position="top" wide=true variant="transparent" }}
+        {{> @c-card--image position="bottom" wide=true variant="transparent" }}
+        {{> @c-card--image position="right" tall=true variant="transparent" }}
+        {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
     <h3>Contact Card with Image - Transparent</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-staff-transparent }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
     </section>
 
     <h3>Plain Card Image</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-plain }}
-        {{> @c-card--image-bottom-plain }}
-        {{> @c-card--image-right-plain }}
-        {{> @c-card--image-left-plain }}
+        {{> @c-card--image position="top" wide=true variant="plain" }}
+        {{> @c-card--image position="bottom" wide=true variant="plain" }}
+        {{> @c-card--image position="right" tall=true variant="plain" }}
+        {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
     <h3>Contact Card with Image - Plain</h3>
     <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
-        {{> @c-card--image-top-staff-plain }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
     </section>
-</section>
+</section>

src/lib/_imports/components/c-card/config.yml

@@ -12,8 +12,8 @@ variants:
     status: backup
   - name: standard-3
     status: backup
-  # - name: image
-  #   status: prototype
+  - name: images
+    status: wip
   - name: docs
     status: ready
     context: