Add compact and offset card style

This will be used in the consent cards matching the designs in the
prototype.

Jira-Issue: MAV-1474

Author: thomasleese

app/assets/stylesheets/_card.scss

@@ -49,6 +49,10 @@
     }
   }
 
+  &--offset {
+    background-color: rgba($color_nhsuk-grey-5, 0.5);
+  }
+
   &--data {
     display: flex;
 
@@ -132,3 +136,22 @@
     color: $nhsuk-link-active-color;
   }
 }
+
+.app-card--compact {
+  @include nhsuk-responsive-margin(3, "bottom");
+
+  .app-button-group {
+    gap: nhsuk-spacing(2);
+    margin-bottom: nhsuk-spacing(1);
+    margin-top: nhsuk-spacing(-4);
+  }
+
+  .nhsuk-card__heading {
+    @include nhsuk-responsive-margin(1, "bottom");
+  }
+
+  .nhsuk-card__content {
+    @include nhsuk-responsive-padding(4);
+    @include nhsuk-responsive-padding(3, "bottom");
+  }
+}

app/components/app_card_component.rb

@@ -34,6 +34,7 @@ def initialize(
     secondary: false,
     data: false,
     patient: false,
+    compact: false,
     filters: false,
     section: false
   )
@@ -44,10 +45,11 @@ def initialize(
     @secondary = secondary
     @data = data
     @patient = patient
+    @compact = compact
     @filters = filters
     @section = section
 
-    @feature = (colour.present? && !data) || filters
+    @feature = (colour.present? && !data && !compact) || filters
   end
 
   private
@@ -64,6 +66,7 @@ def card_classes
       ("nhsuk-card--secondary" if @secondary),
       ("app-card--data" if @data),
       ("app-card--patient" if @patient),
+      ("app-card--compact" if @compact),
       ("app-filters" if @filters)
     ].compact.join(" ")
   end
@@ -80,7 +83,7 @@ def content_classes
   def heading_size
     if @data
       "xs"
-    elsif @feature || @secondary || @patient
+    elsif @feature || @secondary || @patient || @compact
       "s"
     else
       "m"