mp-design-system 1.2.28 → 1.2.30

package/src/_includes/components/card/product-comparison-card.njk

@@ -1,37 +0,0 @@
-{%- from "components/button/macro.njk" import button -%}
-{%- from "components/twi/macro.njk" import twi -%}
-
-<article class="mp c-product-comparison-card" role="article" aria-label="Product card">
-  <div class="c-product-comparison-card__body">
-    <h3 class="c-product-comparison-card__heading">{{ params.title }}</h3>
-    <p>{{ params.description }}</p>
-    {% if params.features | length %}
-      <p class="c-product-comparison-card__features-list-heading">Features include</p>
-      <ul class="c-product-comparison-card__features-list">
-        {% for feature in params.features %}
-          <li class="c-product-comparison-card__feature--{{ feature.icon }}">
-            {{ twi({
-              label: feature.label,
-              icon: feature.icon
-            }) }}
-          </li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-    <footer class="c-product-comparison-card__footer">
-      {% if params.footer.buttons | length %}
-        {% for item in params.footer.buttons %}
-          {{ button({
-            link: item.link,
-            label: item.label,
-            colour: 'outline-green' if loop.index0 == 0 else 'green'
-          }) }}
-        {% endfor %}
-      {% endif %}
-    </footer>
-  </div>
-  <figure class="c-product-comparison-card__image">
-    <img src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
-  </figure>
-</article>
-

package/src/_includes/components/card/product-comparison-card.scss

@@ -1,79 +0,0 @@
-.c-product-comparison-card {
-  @extend .u-flow--2xs;
-  background: color('white');
-  display: flex;
-  flex-flow: column;
-  flex-grow: 1;
-  border: 1px solid color('petrol', 'step-2');
-    
-  & > * + * {
-    @include margin-top('2xs');
-  }
-
-  &__body {
-    @include padding('s-m');
-    display: flex;
-    flex-flow: column;
-    flex-grow: 1;
-    
-    & > * + * {
-      @include margin-top('xs');
-    }
-  }
-
-  &__heading {
-    @extend .c-h;
-    @extend .c-h--step-1;
-  }
-
-  &__features-list {
-    @include margin-top('2xs');
-    list-style: none;
-
-    &-heading {
-      @include margin-top('s');
-      font-weight: weight("bold");
-    }
-
-    & > * + * {
-      @include margin-top('3xs');
-    }
-  }
-
-  &__feature {
-    &--tick {
-      svg {
-        color: color('green');
-      }
-    }
-
-    &--cross {
-      color: color('grey', 'step-2');
-    }
-  }
-
-  &__footer {
-    @include margin-top('auto');
-    @include padding-top('s');
-    display: flex;
-    flex-flow: row;
-    flex-wrap: wrap;
-    gap: var(--space-2xs);
-    
-    & > * {
-      flex-grow: 1;
-    }
-  }
-
-  &__image {
-    height: 10em;
-    order: -1;
-    aspect-ratio: 16/9;
-
-    img {
-      height: 100%;
-      width: 100%;
-      object-fit: contain;
-    }
-  }
-}