js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated card slot from image to media (#975)

Browse Source 
* updated card slot from  to

* missed a wildcard

* updated changelog
This commit is contained in:
Kelsey Jackson
2025-05-21 13:03:11 -05:00
committed by GitHub
parent 39d1b82634
commit 37e82b70fa
17 changed files with 94 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
docs/docs/components/card.md
View File

@@ -8,7 +8,7 @@ icon: card
```html {.example}
<wa-card class="card-overview">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
/>
@@ -38,7 +38,7 @@ Basic cards aren't very exciting, but they can display any content you want them
```html {.example}
<wa-card class="card-basic">
This is just a basic card. No image, no header, and no footer. Just your content.
This is just a basic card. No media, no header, and no footer. Just your content.
</wa-card>
<style>
@@ -96,23 +96,32 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
</style>
```
### Images
### Media
Card images are displayed atop the card and will stretch to fit.
If using SSR, you need to also use the `with-image` attribute to add an image to the card (if not, it is added automatically).
Card media is displayed atop the card and will stretch to fit.
If using SSR, you need to also use the `with-media` attribute to add a media section to the card (if not, it is added automatically).
```html {.example}
<wa-card class="card-image">
<img
slot="image"
src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
alt="A kitten walks towards camera on top of pallet."
/>
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
</wa-card>
<div class="wa-grid">
<wa-card class="card-media">
<img
slot="media"
src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
alt="A kitten walks towards camera on top of pallet."
/>
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
</wa-card>
<wa-card class="card-media">
<video slot="media" controls>
<source src="https://uploads.webawesome.com/dog-with-glasses.mp4">
<p>Your browser doesn't support HTML video</p>
</video>
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
</wa-card>
</div>
<style>
.card-image {
.card-media {
max-width: 300px;
}
</style>
@@ -161,7 +170,7 @@ Use the `appearance` attribute to change the card's visual appearance.
<div class="wa-grid">
<wa-card>
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
/>
@@ -171,7 +180,7 @@ Use the `appearance` attribute to change the card's visual appearance.
{% for appearance in ['outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
<wa-card appearance="{{ appearance }}">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
/>

6
docs/docs/components/page-samples/documentation.md
View File

@@ -177,7 +177,7 @@ eleventyExcludeFromCollections: true
<aside slot="aside">
<h2 class="wa-heading-m">Discover More Birds</h2>
<wa-card>
<div slot="image" class="wa-frame">
<div slot="media" class="wa-frame">
<img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
</div>
<div class="wa-stack wa-gap-3xs">
@@ -186,7 +186,7 @@ eleventyExcludeFromCollections: true
</div>
</wa-card>
<wa-card>
<div slot="image" class="wa-frame">
<div slot="media" class="wa-frame">
<img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
</div>
<div class="wa-stack wa-gap-3xs">
@@ -195,7 +195,7 @@ eleventyExcludeFromCollections: true
</div>
</wa-card>
<wa-card>
<div slot="image" class="wa-frame">
<div slot="media" class="wa-frame">
<img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
</div>
<div class="wa-stack wa-gap-3xs">

6
docs/docs/components/page.md
View File

@@ -169,7 +169,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
<aside slot="aside" class="wa-desktop-only">
<h2 class="wa-heading-m">Discover More Birds</h2>
<wa-card>
<div slot="image" class="wa-frame">
<div slot="media" class="wa-frame">
<img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
</div>
<div class="wa-stack wa-gap-3xs">
@@ -178,7 +178,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
</div>
</wa-card>
<wa-card>
<div slot="image" class="wa-frame">
<div slot="media" class="wa-frame">
<img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
</div>
<div class="wa-stack wa-gap-3xs">
@@ -187,7 +187,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
</div>
</wa-card>
<wa-card>
<div slot="image" class="wa-frame">
<div slot="media" class="wa-frame">
<img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
</div>
<div class="wa-stack wa-gap-3xs">

6
docs/docs/experimental/themer.md
View File

@@ -2019,7 +2019,7 @@ hasOutline: false
<section class="strata products grid-12-col">
<wa-card class="card-image product-card">
<wa-badge variant="brand" class="badge-stock">New</wa-badge>
<div slot="image" class="landscape-frame">
<div slot="media" class="landscape-frame">
<img id="product-1" src="/assets/images/themer/default/morpheus.jpg" alt="" />
</div>
<div class="title-rating">
@@ -2042,7 +2042,7 @@ hasOutline: false
</wa-card>
<wa-card class="card-image product-card">
<wa-badge variant="warning" class="badge-stock">Low Stock</wa-badge>
<div slot="image" class="landscape-frame">
<div slot="media" class="landscape-frame">
<img id="product-2" src="/assets/images/themer/default/seraph.jpg" alt="" />
</div>
<div class="title-rating">
@@ -2064,7 +2064,7 @@ hasOutline: false
</div>
</wa-card>
<wa-card class="card-image product-card">
<div slot="image" class="landscape-frame">
<div slot="media" class="landscape-frame">
<img id="product-3" src="/assets/images/themer/default/keymaker.jpg" alt="" />
</div>
<div class="title-rating">

12
docs/docs/patterns/blog-news/category-list.md
View File

@@ -21,7 +21,7 @@ tags: blog-news
<a href="#">
<wa-card with-image style="height: 100%">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1560264357-8d9202250f21?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Group of customer service reps working on computers in a shared office space"
/>
@@ -34,7 +34,7 @@ tags: blog-news
<a href="#">
<wa-card with-image style="height: 100%">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?q=80&w=5070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="A hand pinching a pin on string, making connections between data on a corkboard"
/>
@@ -47,7 +47,7 @@ tags: blog-news
<a href="#">
<wa-card with-image style="height: 100%">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1561323587-7464f7689886?q=80&w=5070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="A chess board with all pieces in starting position"
/>
@@ -69,7 +69,7 @@ tags: blog-news
<a href="#">
<wa-card with-image style="height: 100%">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1493599124325-e628361046af?q=80&w=4470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Viewpoint from the middle of a forest, looking upwards towards the canopy of towering evergreen"
/>
@@ -82,7 +82,7 @@ tags: blog-news
<a href="#">
<wa-card with-image style="height: 100%">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1466629437334-b4f6603563c5?q=80&w=4478&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Sunset over a vast grassy field with many prominent wind turbines"
/>
@@ -95,7 +95,7 @@ tags: blog-news
<a href="#">
<wa-card with-image style="height: 100%">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1455849318743-b2233052fcff?q=80&w=4469&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Viewpoint of two people side-by-side looking down towards their shoes, PASSION LED US HERE written on the sidewalk"
/>

2
docs/docs/patterns/blog-news/newsletter.md
View File

@@ -78,7 +78,7 @@ tags: blog-news
```html {.example}
<wa-card with-image style="max-width: 45ch; margin: 0 auto">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1595087012935-124877078142?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="mailbox"
/>

12
docs/docs/patterns/blog-news/post-footer.md
View File

@@ -163,7 +163,7 @@ tags:
<wa-carousel-item>
<a href="#" class="wa-link-plain">
<wa-card with-image>
<div class="wa-frame:landscape" slot="image">
<div class="wa-frame:landscape" slot="media">
<img
src="https://images.unsplash.com/photo-1490410006060-e1dc82ab0a70?q=80&w=5340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Customer service reps"
@@ -184,7 +184,7 @@ tags:
<wa-carousel-item>
<a href="#" class="wa-link-plain">
<wa-card with-image>
<div class="wa-frame:landscape" slot="image">
<div class="wa-frame:landscape" slot="media">
<img
src="https://images.unsplash.com/photo-1559757175-0eb30cd8c063?q=80&w=5231&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Customer service reps"
@@ -205,7 +205,7 @@ tags:
<wa-carousel-item>
<a href="#" class="wa-link-plain">
<wa-card with-image>
<div class="wa-frame:landscape" slot="image">
<div class="wa-frame:landscape" slot="media">
<img
src="https://images.unsplash.com/photo-1581464668854-0da56c32393c?q=80&w=5340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Customer service reps"
@@ -226,7 +226,7 @@ tags:
<wa-carousel-item>
<a href="#" class="wa-link-plain">
<wa-card with-image>
<div class="wa-frame:landscape" slot="image">
<div class="wa-frame:landscape" slot="media">
<img
src="https://images.unsplash.com/photo-1628595351029-c2bf17511435?q=80&w=5232&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Customer service reps"
@@ -247,7 +247,7 @@ tags:
<wa-carousel-item>
<a href="#" class="wa-link-plain">
<wa-card with-image>
<div class="wa-frame:landscape" slot="image">
<div class="wa-frame:landscape" slot="media">
<img
src="https://images.unsplash.com/photo-1576595580361-90a855b84b20?q=80&w=4032&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Customer service reps"
@@ -268,7 +268,7 @@ tags:
<wa-carousel-item>
<a href="#" class="wa-link-plain">
<wa-card with-image>
<div class="wa-frame:landscape" slot="image">
<div class="wa-frame:landscape" slot="media">
<img
src="https://images.unsplash.com/photo-1539541417736-3d44c90da315?q=80&w=5338&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Customer service reps"

8
docs/docs/patterns/blog-news/post-list.md
View File

@@ -158,7 +158,7 @@ tags: blog-news
<a href="#" class="wa-link-plain">
<wa-card with-image style="height: 100%">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1720170060678-7c30a36937cd?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
/>
@@ -183,7 +183,7 @@ tags: blog-news
<a href="#" class="wa-link-plain">
<wa-card with-image style="height: 100%">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1507099985932-87a4520ed1d5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
/>
@@ -206,7 +206,7 @@ tags: blog-news
<a href="#" class="wa-link-plain">
<wa-card with-image style="height: 100%">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1631775512414-160ae648c209?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
/>
@@ -231,7 +231,7 @@ tags: blog-news
<a href="#" class="wa-link-plain">
<wa-card with-image style="height: 100%">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1591228127791-8e2eaef098d3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
/>

2
docs/docs/patterns/blog-news/social-share.md
View File

@@ -75,7 +75,7 @@ tags: blog-news
```html {.example}
<wa-card with-image style="max-width: 45ch; margin: 0 auto;">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1578269174936-2709b6aeb913?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Super special awesome trophy"
/>

6
docs/docs/patterns/ecommerce/category-preview.md
View File

@@ -94,7 +94,7 @@ isPro: true
<a href="" class="wa-link-plain">
<wa-card style="height: 100%">
<img
slot="image"
slot="media"
src="https://img.fortawesome.com/cfa83f3c/outdoor-3x.jpg"
alt="Two hikers wearing long canvas pants, weatherproof jackets, and backpacks"
/>
@@ -107,7 +107,7 @@ isPro: true
<a href="" class="wa-link-plain">
<wa-card style="height: 100%">
<img
slot="image"
slot="media"
src="https://img.fortawesome.com/cfa83f3c/home.jpg"
alt="Woman sitting on a couch in a bright home, wearing a thick knit sweater"
/>
@@ -120,7 +120,7 @@ isPro: true
<a href="" class="wa-link-plain">
<wa-card style="height: 100%">
<img
slot="image"
slot="media"
src="https://img.fortawesome.com/cfa83f3c/fitness.jpg"
alt="Athlete training in fitted active wear tee and shorts"
/>

16
docs/docs/patterns/ecommerce/product-list.md
View File

@@ -113,9 +113,9 @@ isPro: true
<div class="wa-grid" style="--min-column-size: 50ch">
<div class="wa-grid">
<a href="" class="wa-link-plain">
<wa-card>
<wa-card style="height: 100%;">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1622445272461-c6580cab8755?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Man in a relaxed fit, white, crew neck t-shirt (Photography by Mediamodifier)"
/>
@@ -132,9 +132,9 @@ isPro: true
</wa-card>
</a>
<a href="" class="wa-link-plain">
<wa-card>
<wa-card style="height: 100%;">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1554568218-0f1715e72254?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Woman in a light heather t-shirt printed with sharp black ink (Photograph by Christian Bolt)"
/>
@@ -153,9 +153,9 @@ isPro: true
</div>
<div class="wa-grid">
<a href="" class="wa-link-plain">
<wa-card>
<wa-card style="height: 100%;">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1567098260939-5d9cee055592?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Man in a black t-shirt printed with many-colored gradients (Photograph by Marcel)"
/>
@@ -172,9 +172,9 @@ isPro: true
</wa-card>
</a>
<a href="" class="wa-link-plain">
<wa-card>
<wa-card style="height: 100%;">
<img
slot="image"
slot="media"
src="https://images.unsplash.com/photo-1709185727063-c3caae752a64?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Woman in a black t-shirt with a bright white logo printed on the pocket (Photograph by SASI)"
/>

3
docs/docs/resources/changelog.md
View File

@@ -22,7 +22,8 @@ During the alpha period, things might break! We take breaking changes very serio
## 3.0.0-alpha.13
- 🚨 BREAKING: Renamed `<image-comparer>` to `<wa-comparison>` and improved compatibility for non-image content
- 🚨 BREAKING: Added slot detection to `<wa-dialog>` and `<wa-drawer>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
- 🚨 BREAKING: Added slot detection to `<wa-dialog>` and `<wa-drawer>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
- 🚨 BREAKING: Renamed the `image` slot to `media` for a more appropriate naming convention
- Added [a theme builder](/docs/themes/edit/) to create your own themes
- Added a new Blog & News pattern category
- Added a new free component: `<wa-scroller>` (#1 of 14 per stretch goals)

6
docs/docs/themes/preview/content.njk vendored
View File

@@ -38,7 +38,7 @@ noTheme: true
<section class="strata products grid-12-col">
<wa-card class="card-image product-card">
<wa-badge variant="brand" class="badge-stock">New</wa-badge>
<div slot="image" class="landscape-frame">
<div slot="media" class="landscape-frame">
<img id="product-1" src="/assets/images/themer/default/morpheus.jpg" alt="" />
</div>
<div class="title-rating">
@@ -61,7 +61,7 @@ noTheme: true
</wa-card>
<wa-card class="card-image product-card">
<wa-badge variant="warning" class="badge-stock">Low Stock</wa-badge>
<div slot="image" class="landscape-frame">
<div slot="media" class="landscape-frame">
<img id="product-2" src="/assets/images/themer/default/seraph.jpg" alt="" />
</div>
<div class="title-rating">
@@ -83,7 +83,7 @@ noTheme: true
</div>
</wa-card>
<wa-card class="card-image product-card">
<div slot="image" class="landscape-frame">
<div slot="media" class="landscape-frame">
<img id="product-3" src="/assets/images/themer/default/keymaker.jpg" alt="" />
</div>
<div class="title-rating">

6
docs/docs/utilities/frame.md
View File

@@ -49,7 +49,7 @@ Frames are well-suited for images and image placeholders.
```html {.example}
<div class="wa-grid" style="--min-column-size: 25ch;">
<wa-card>
<div class="wa-frame:landscape" slot="image">
<div class="wa-frame:landscape" slot="media">
<img src="https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?q=20" alt="Grey and white tabby kitten" />
</div>
<div class="wa-stack wa-gap-xs">
@@ -80,7 +80,7 @@ Frames are well-suited for images and image placeholders.
</div>
</wa-card>
<wa-card>
<div class="wa-frame:landscape" slot="image">
<div class="wa-frame:landscape" slot="media">
<img src="https://images.unsplash.com/photo-1445499348736-29b6cdfc03b9?q=20" alt="Diluted calico kitten" />
</div>
<div class="wa-stack wa-gap-xs">
@@ -94,7 +94,7 @@ Frames are well-suited for images and image placeholders.
</div>
</wa-card>
<wa-card>
<div class="wa-frame:landscape" slot="image">
<div class="wa-frame:landscape" slot="media">
<img src="https://images.unsplash.com/photo-1517451330947-7809dead78d5?q=20" alt="Short-haired tabby cat" />
</div>
<div class="wa-stack wa-gap-xs">

16
src/components/card/card.css
View File

@@ -37,9 +37,9 @@
}
/* Take care of top and bottom radii */
.image,
:host(:not([with-image])) .header,
:host(:not([with-image], [with-header])) .body {
.media,
:host(:not([with-media])) .header,
:host(:not([with-media], [with-header])) .body {
border-start-start-radius: var(--inner-border-radius);
border-start-end-radius: var(--inner-border-radius);
}
@@ -50,10 +50,10 @@
border-end-end-radius: var(--inner-border-radius);
}
.image {
.media {
display: flex;
&::slotted(img) {
&::slotted(*) {
display: block;
width: 100%;
border-start-start-radius: inherit !important;
@@ -62,10 +62,10 @@
}
/* Round all corners for plain appearance */
:host([appearance='plain']) .image {
:host([appearance='plain']) .media {
border-radius: var(--inner-border-radius);
&::slotted(img) {
&::slotted(*) {
border-radius: inherit !important;
}
}
@@ -93,6 +93,6 @@
:host(:not([with-header])) .header,
:host(:not([with-footer])) .footer,
:host(:not([with-image])) .image {
:host(:not([with-media])) .media {
display: none;
}

18
src/components/card/card.test.ts
View File

@@ -9,16 +9,16 @@ describe('<wa-card>', () => {
describe('when provided no parameters', () => {
it('should render the child content provided.', async () => {
const el = await fixture<WaCard>(html`
<wa-card>This is just a basic card. No image, no header, and no footer. Just your content.</wa-card>
<wa-card>This is just a basic card. No media, no header, and no footer. Just your content.</wa-card>
`);
expect(el.innerText).to.eq(
'This is just a basic card. No image, no header, and no footer. Just your content.',
'This is just a basic card. No media, no header, and no footer. Just your content.',
);
});
it('should pass accessibility tests', async () => {
const el = await fixture<WaCard>(html`
<wa-card>This is just a basic card. No image, no header, and no footer. Just your content.</wa-card>
<wa-card>This is just a basic card. No media, no header, and no footer. Just your content.</wa-card>
`);
await expect(el).to.be.accessible();
});
@@ -120,12 +120,12 @@ describe('<wa-card>', () => {
});
});
describe('when provided an element in the slot "image" to render a image', () => {
describe('when provided an element in the slot "media" to render a media element', () => {
it('should pass accessibility tests', async () => {
const el = await fixture<WaCard>(
html`<wa-card>
<img
slot="image"
slot="media"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
alt="A kitten walks towards camera on top of pallet."
/>
@@ -140,7 +140,7 @@ describe('<wa-card>', () => {
const el = await fixture<WaCard>(
html`<wa-card>
<img
slot="image"
slot="media"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
alt="A kitten walks towards camera on top of pallet."
/>
@@ -153,18 +153,18 @@ describe('<wa-card>', () => {
);
});
it('accept "image" as an assigned child in the shadow root.', async () => {
it('accept "media" as an assigned child in the shadow root.', async () => {
const el = await fixture<WaCard>(
html`<wa-card>
<img
slot="image"
slot="media"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
alt="A kitten walks towards camera on top of pallet."
/>
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
</wa-card>`,
);
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=image]')!;
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=media]')!;
const childNodes = slot.assignedNodes({ flatten: true });
expect(childNodes.length).to.eq(1);

12
src/components/card/card.ts
View File

@@ -15,9 +15,9 @@ import styles from './card.css';
* @slot - The card's main content.
* @slot header - An optional header for the card.
* @slot footer - An optional footer for the card.
* @slot image - An optional image to render at the start of the card.
* @slot media - An optional media section to render at the start of the card.
*
* @csspart image - The container that wraps the card's image.
* @csspart media - The container that wraps the card's media.
* @csspart header - The container that wraps the card's header.
* @csspart body - The container that wraps the card's main content.
* @csspart footer - The container that wraps the card's footer.
@@ -32,7 +32,7 @@ import styles from './card.css';
export default class WaCard extends WebAwesomeElement {
static shadowStyle = [sizeStyles, appearanceStyles, styles];
private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'media');
/** The component's size. Will be inherited by any descendants with a `size` attribute. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@@ -45,7 +45,7 @@ export default class WaCard extends WebAwesomeElement {
@property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;
/** Renders the card with an image. Only needed for SSR, otherwise is automatically added. */
@property({ attribute: 'with-image', type: Boolean, reflect: true }) withImage = false;
@property({ attribute: 'with-media', type: Boolean, reflect: true }) withMedia = false;
/** Renders the card with a footer. Only needed for SSR, otherwise is automatically added. */
@property({ attribute: 'with-footer', type: Boolean, reflect: true }) withFooter = false;
@@ -53,13 +53,13 @@ export default class WaCard extends WebAwesomeElement {
updated() {
// Enable the respective slots when detected
if (!this.withHeader && this.hasSlotController.test('header')) this.withHeader = true;
if (!this.withImage && this.hasSlotController.test('image')) this.withImage = true;
if (!this.withMedia && this.hasSlotController.test('media')) this.withMedia = true;
if (!this.withFooter && this.hasSlotController.test('footer')) this.withFooter = true;
}
render() {
return html`
<slot name="image" part="image" class="image"></slot>
<slot name="media" part="media" class="media"></slot>
<slot name="header" part="header" class="header"></slot>
<slot part="body" class="body"></slot>
<slot name="footer" part="footer" class="footer"></slot>