mp-design-system 1.2.28 → 1.2.34

package/src/static/svg/icon-recorded-webinars--white.svg

@@ -0,0 +1,4 @@
+<svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.3667 93.3653H23C17.4771 93.3653 13 88.8882 13 83.3653V31.8654C13 26.3425 17.4772 21.8654 23 21.8654H113C118.523 21.8654 123 26.3425 123 31.8654V83.3653C123 88.8882 118.523 93.3653 113 93.3653H78.6333M57.3667 93.3653H78.6333M57.3667 93.3653V103.135C57.3667 108.658 52.8895 113.135 47.3667 113.135H46.3667M78.6333 93.3653V103.135C78.6333 108.658 83.1105 113.135 88.6333 113.135H89.6333" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M55.7759 45.2015V70.1403C55.7759 72.4714 58.3183 73.9118 60.3179 72.7136L80.6246 60.5458C82.5443 59.3955 82.5742 56.6242 80.6798 55.4329L60.373 42.662C58.3752 41.4056 55.7759 42.8414 55.7759 45.2015Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
+</svg>

package/src/static/svg/icon-recorded-webinars.svg

@@ -0,0 +1,4 @@
+<svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.3667 93.3653H23C17.4771 93.3653 13 88.8882 13 83.3653V31.8654C13 26.3425 17.4772 21.8654 23 21.8654H113C118.523 21.8654 123 26.3425 123 31.8654V83.3653C123 88.8882 118.523 93.3653 113 93.3653H78.6333M57.3667 93.3653H78.6333M57.3667 93.3653V103.135C57.3667 108.658 52.8895 113.135 47.3667 113.135H46.3667M78.6333 93.3653V103.135C78.6333 108.658 83.1105 113.135 88.6333 113.135H89.6333" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M55.7759 45.2015V70.1403C55.7759 72.4714 58.3183 73.9118 60.3179 72.7136L80.6246 60.5458C82.5443 59.3955 82.5742 56.6242 80.6798 55.4329L60.373 42.662C58.3752 41.4056 55.7759 42.8414 55.7759 45.2015Z" fill="#00a2c2" stroke="#00a2c2" stroke-width="4"/>
+</svg>

package/src/static/svg/icon-user-training--white.svg

@@ -0,0 +1,5 @@
+<svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0029 36.6926V39.4762C21.0029 45.2704 24.8279 50.0353 29.4234 50.0353C34.019 50.0353 37.844 45.2704 37.844 39.4762V36.6926C37.844 34.5645 35.5902 29.5521 29.4234 29.5521C23.2567 29.5521 21.0029 33.9921 21.0029 36.6926Z" stroke="#ffffff" stroke-width="5" stroke-linejoin="round"/>
+<path d="M17.3803 89.2418L15.6821 103.658C15.3572 106.441 12.5901 108.616 9.9273 108.137C6.66157 107.551 5.2466 104.675 5.537 102.048L9.01124 72.9348C9.85435 66.3845 11.9733 63.438 14.7185 62.0392C17.7112 60.5142 23.1538 59.6442 26.1869 59.1496C28.1619 58.8275 30.1711 58.8347 32.1518 59.1196C35.9515 59.6661 41.4506 60.8331 44.6134 62.755C44.8465 62.8967 45.0565 63.0709 45.2504 63.2628L57.7999 75.6753C58.7481 76.5538 60.1363 76.7648 61.3027 76.2079L72.5893 70.8188C75.1964 69.574 78.3224 70.5363 79.7782 73.0318C81.4173 75.8417 80.3008 79.4524 77.3616 80.8466L59.6635 89.2418C58.5131 89.7875 57.1475 89.588 56.2012 88.7361L44.5587 78.255V100.852C44.5587 104.166 41.8724 106.852 38.5587 106.852H22.6478" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M49.2756 53.9583V34.7963C49.2756 30.378 52.8574 26.7963 57.2756 26.7963H122.5C126.918 26.7963 130.5 30.378 130.5 34.7963V75.5442C130.5 79.9624 126.918 83.5442 122.5 83.5442H88.4409" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/static/svg/icon-user-training.svg

@@ -0,0 +1,5 @@
+<svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0029 36.6926V39.4762C21.0029 45.2704 24.8279 50.0353 29.4234 50.0353C34.019 50.0353 37.844 45.2704 37.844 39.4762V36.6926C37.844 34.5645 35.5902 29.5521 29.4234 29.5521C23.2567 29.5521 21.0029 33.9921 21.0029 36.6926Z" stroke="#00a2c2" stroke-width="5" stroke-linejoin="round"/>
+<path d="M17.3803 89.2418L15.6821 103.658C15.3572 106.441 12.5901 108.616 9.9273 108.137C6.66157 107.551 5.2466 104.675 5.537 102.048L9.01124 72.9348C9.85435 66.3845 11.9733 63.438 14.7185 62.0392C17.7112 60.5142 23.1538 59.6442 26.1869 59.1496C28.1619 58.8275 30.1711 58.8347 32.1518 59.1196C35.9515 59.6661 41.4506 60.8331 44.6134 62.755C44.8465 62.8967 45.0565 63.0709 45.2504 63.2628L57.7999 75.6753C58.7481 76.5538 60.1363 76.7648 61.3027 76.2079L72.5893 70.8188C75.1964 69.574 78.3224 70.5363 79.7782 73.0318C81.4173 75.8417 80.3008 79.4524 77.3616 80.8466L59.6635 89.2418C58.5131 89.7875 57.1475 89.588 56.2012 88.7361L44.5587 78.255V100.852C44.5587 104.166 41.8724 106.852 38.5587 106.852H22.6478" stroke="#00a2c2" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M49.2756 53.9583V34.7963C49.2756 30.378 52.8574 26.7963 57.2756 26.7963H122.5C126.918 26.7963 130.5 30.378 130.5 34.7963V75.5442C130.5 79.9624 126.918 83.5442 122.5 83.5442H88.4409" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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;
-    }
-  }
-}