Skip to content

Commit

Permalink
chore: tup-636 c-card--image w/ less templates
Browse files Browse the repository at this point in the history
  • Loading branch information
wesleyboar committed Nov 8, 2023
1 parent f78eed2 commit 0ee90fc
Show file tree
Hide file tree
Showing 13 changed files with 61 additions and 106 deletions.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

19 changes: 19 additions & 0 deletions src/lib/_imports/components/c-card/_c-card--image.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<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>
<img src="{{> @img-url wide=wide tall=tall medium=true }}" />

{{/if}}
</article>
80 changes: 40 additions & 40 deletions src/lib/_imports/components/c-card/c-card--images.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
4 changes: 2 additions & 2 deletions src/lib/_imports/components/c-card/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down

0 comments on commit 0ee90fc

Please sign in to comment.