Bug/vf card grid (#1379)

* updates minmax in card grid so it works * vf-card updates to fix things and add a customisable aspect rario
visual-framework · Feb 24, 2021 · e3a42bf · e3a42bf
1 parent 4f7dc4b
commit e3a42bf
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 19 deletions.
diff --git a/components/vf-card/CHANGELOG.md b/components/vf-card/CHANGELOG.md
@@ -1,10 +1,9 @@
-### 2.4.2
+### 2.5.0
 
 * changes any `set-` style functions to cleaner version
-
-### 2.4.1
-
-* fixes issue with `vf-card__image` height in Safari
+* fixes issue with `vf-card__image` height in Safari.
+* removes `grid-template-rows` as it's difficult to define now cards do not have to have images.
+* adds a `--vf-card__image--aspect-ratio` CSS custom property to help with the initial image height.
 * updates documentation to replace 'title' with 'heading' so it matches CSS classname.
 
 ### 2.4.0

diff --git a/components/vf-card/README.md b/components/vf-card/README.md
@@ -25,14 +25,23 @@ The `vf-card` should look like it's around the same size as card from an average
 
 The `vf-card` can take a variety optional of content:
 
-| Content type | `.njk` / `.yml` variable | CSS class             | Description |
-| ------------ | ------------------------ | --------------------- | ----------- |
-| image        | `card_image`             | `vf-card__image`      |             |
-| alt text     | `card_image__alt`        |                       |             |
-| heading      | `card_heading`           | `vf-card__heading`    |             |
-| link         | `card_href`              | `vf-card__link`       |             |
-| subheading   | `card_subheading`        | `vf-card__subheading` |             |
-| text         | `card_text`              | `vf-card__text`       |             |
+| Content type | `.njk` / `.yml` variable   | CSS class             | Description |
+| ------------ | -------------------------- | --------------------- | ----------- |
+| image        | `card_image`               | `vf-card__image`      |             |
+| alt text     | `card_image__alt`          |                       |             |
+| apect ratio  | `card_custom_aspect_ratio` |                       |             |
+| heading      | `card_heading`             | `vf-card__heading`    |             |
+| link         | `card_href`                | `vf-card__link`       |             |
+| subheading   | `card_subheading`          | `vf-card__subheading` |             |
+| text         | `card_text`                | `vf-card__text`       |             |
+
+### CSS Custom Properties
+
+For browsers that support the CSS [`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) property we provide the option to stipulate the images aspect ratio in a card using a CSS custom property. By default, if no CSS custom property is set, the aspect ratio is `8 / 4`. This can be set on the individual cards using the nunjucks 'key' in the `.yml` or with the `{% render %}` api using the variable `card_custom_aspect_ratio`.
+
+```
+--vf-card__image--aspect-ratio: 16 / 9;
+```
 
 ## Install
 

diff --git a/components/vf-card/vf-card.njk b/components/vf-card/vf-card.njk
@@ -8,6 +8,7 @@
   {% set card_text = context.card_text %}
   {% set card_image = context.card_image %}
   {% set card_image__alt = context.card_image__alt %}
+  {% set card_custom_aspect_ratio = context.card_custom_aspect_ratio %}
 
   {% set theme = context.theme %}
   {% set newTheme = context.newTheme %}
@@ -31,8 +32,11 @@
   {%- if variant %} vf-card--{{variant}}{% endif %}
 
   {%- if modifier %} | {{modifier}}{% endif -%}
-  {%- if override_class %} | {{override_class}}{% endif -%}
-">
+  {%- if override_class %} | {{override_class}}{% endif -%}"
+  {% if card_custom_aspect_ratio %}
+  style="--vf-card__image--aspect-ratio: {{card_custom_aspect_ratio}};"
+  {% endif %}
+  >
 
   {% if card_image -%}
   <img src="{{ card_image }}" alt="{{ card_image__alt }}" class="vf-card__image" loading="lazy">

diff --git a/components/vf-card/vf-card.scss b/components/vf-card/vf-card.scss
@@ -19,17 +19,20 @@
   /* border: 1px solid var(--vf-card-theme-color--border, var(--card-border-color, #{set-color(vf-grey--lightest)})); */
   box-shadow: 0 .125rem .25rem rgba(color(grey--dark), .5);
   display: grid;
-  grid-template-rows: minmax(1fr, 288px) 1fr;
   position: relative;
 }
 
 .vf-card__image {
-  aspect-ratio: 6 / 4;
-  grid-column: 1 / -1;
-  grid-row: 1;
+  height: auto;
+  min-height: 16rem; // This provides a fallback for when aspec-ratio is not supported
   object-fit: cover;
   object-position: center;
   width: 100%;
+
+  @supports(aspect-ratio: 1 / 1) {
+    aspect-ratio: var(--vf-card__image--aspect-ratio, 8 / 4);
+    min-height: unset;
+  }
 }
 
 .vf-card__content {