Change widths of components inside card to be their contents width (#…

…2827) * Change widths of components inside card to be their contents width * Remove redundant code * Remove unnecessary URL checks * Remove reordering classes
ONSdigital · Oct 12, 2023 · f776232 · f776232
1 parent 614d426
commit f776232
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 35 deletions.
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -5,15 +5,13 @@
   &__link {
     display: flex;
     flex-direction: column;
-  }
-
-  &__image--reorder {
-    order: 1;
-  }
+    margin-bottom: 1rem;
+    width: fit-content;
 
-  &__title--reorder {
-    order: 2;
-  }
+    & > .ons-card__title {
+      margin-bottom: 0;
+    }
+  } 
 
   &__link:hover {
     text-decoration-thickness: 3px;

diff --git a/src/components/card/_macro.njk b/src/components/card/_macro.njk
@@ -5,36 +5,18 @@
   {% set titleSize = params.titleSize | default('2') %}
 
   <div class="ons-card">
-
-    {%- if params.image -%}
-      {%- if params.url -%}
-        <a href="{{ params.url }}" class="ons-card__link">
-      {%- endif -%}
-          <h{{ titleSize }} class="ons-card__title ons-card__title--reorder {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
-              {{ params.title }}
-          </h{{ titleSize }}>
-          {% if params.image.smallSrc %}
-            <img class="ons-card__image ons-u-mb-s ons-card__image--reorder" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
-          {% elif params.image == true or params.image.placeholderURL %}
-            <img class="ons-card__image ons-u-mb-s ons-card__image--reorder" height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
-          {% endif %}
-      {%- if params.url -%}
-        </a>
+    <a href="{{ params.url }}" class="ons-card__link">
+      {%- if params.image -%}
+        {% if params.image.smallSrc %}
+          <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+        {% elif params.image == true or params.image.placeholderURL %}
+          <img class="ons-card__image ons-u-mb-s " height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
+        {% endif %}
       {%- endif -%}
-
-    {%- else -%}
-
-      <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m') }}" id="{{ params.id }}">
-        {%- if params.url -%}
-          <a class="ons-card__link" href="{{ params.url }}">
-        {%- endif -%}
+      <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
           {{ params.title }}
-        {%- if params.url -%}
-          </a>
-        {%- endif -%}
       </h{{ titleSize }}>
-
-    {%- endif -%}
+    </a>
 
     <p id="{{ params.textId }}">{{ params.text }}</p>