mp-design-system 1.2.64 → 1.2.66

package/src/_includes/components/card/card.njk

@@ -1,206 +0,0 @@
-{%- from "components/prose/macro.njk" import prose -%}
-{%- from "components/button/macro.njk" import button -%}
-{%- from "components/twi/macro.njk" import twi -%}
-{%- from "components/icon/macro.njk" import icon -%}
-{%- from "components/series/macro.njk" import series -%}
-
-{% set tag = params.tag %}
-{% set header = params.header %}
-{% set body = params.body %}
-{% set footer = params.footer %}
-{% set theme = params.theme %}
-{% set link = params.link or params.footer.buttons[0].link or params.footer.cta.link or '' %}
-
-{% set hasImage = params.image.src %}
-{% set isInPast = header.date.duration %}
-{% set hasDate = header.date.date %}
-{% set hasFormat = header.date.formatted %}
-{% set hasTime = header.date.time %}
-{% set hasTimezone = header.date.timezone %}
-{% set hasMeta = header.meta | length %}
-{% set hasFullLink = not theme.noFullLink and link %}
-{% set hasCorner = theme.corner %}
-
-{%- set classes = 'mp c-card' -%}
-
-{% set classes = classes + ' c-card--layout-' + theme.layout %}
-{% set classes = classes + ' c-card--size-' + (theme.size or 'large') %}
-
-{%- if theme.border -%}{% set classes = classes + ' c-card--bordered' %}{%- endif -%}
-{%- if theme.name -%}{% set classes = classes + ' c-card--' + theme.name %}{%- endif -%}
-{%- if theme.inlineSpecs -%}{% set classes = classes + ' c-card--inline-specs' %}{%- endif -%}
-{%- if theme.noHeightMatch -%}{% set classes = classes + ' c-card--no-height-match' %}{%- endif -%}
-{%- if theme.switch -%}{% set classes = classes + ' c-card--switch' %}{%- endif -%}
-{%- if tag -%}{% set classes = classes + ' c-card--has-tag' %}{%- endif -%}
-{%- if hasImage -%}{% set classes = classes + ' c-card--has-image' %}{%- endif -%}
-
-{% macro meta() %}
-  {% if hasTime or hasTimezone or isInPast or hasMeta %}
-    <p class="c-card__meta">
-      {% if isInPast %}
-        {{ twi({ icon: 'play', label: header.date.duration }) }}
-        {% if hasDate %}<span>{{ header.date.date.getMonth() | months }} {{ header.date.date.getFullYear() }}</span>{% endif %}
-      {% else %}
-        {% if hasTime %}
-          <span>{{ header.date.time }} {{ header.date.timezone }}</span>
-        {% endif %}
-      {% endif %}
-      {% for item in header.meta %}
-        <span>{{ item }}</span>
-      {% endfor %}
-    </p>
-  {% endif %}
-{% endmacro %}
-
-<article class="{{ classes }}">
-  {% if tag %}
-    <span class="c-card__tag">{{ tag }}</span>
-  {% elseif hasCorner %}
-    <span class="c-card__corner">
-      {{ icon({ id: 'arrow-right' }) }}
-    </span>
-  {% endif %}
-
-  <div class="c-card__wrapper">
-    {% if hasImage %}
-      <figure class="c-card__image">
-        <a href="{{ link }}">
-          <img class="{{ params.image.classes }}" src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
-        </a>
-      </figure>
-    {% endif %}
-    <div class="c-card__primary">
-      {% if header %}
-        <header class="c-card__header u-flow--2xs">
-          {% if hasDate and not isInPast and not hasFormat %}
-            <time class="c-card__datetime">
-              <span class="c-card__day">{{ header.date.date.getDate() }} </span>
-              <span class="c-card__month">{{ header.date.date.getMonth() | months }}</span>
-            </time>
-          {% endif %}
-
-          {% if hasDate and hasFormat %}
-            <time class="c-card__datetime">
-              <span>{{ header.date.date }}</span>
-            </time>
-          {% endif %}
-          
-          {% if not params.theme.metaLast and (hasTime or hasTimezone or isInPast or hasMeta) %}
-            {{ meta() }}
-          {% endif %}
-
-          {% if header.title %}<h2 class="c-h c-card__title"><a href="{{ link }}">{{ header.title }}</a></h2>{% endif %}
-          {% if header.subtitle %}<h3 class="c-h c-h--tagline">{{ header.subtitle }}</h2>{% endif %}
-
-          {% if params.theme.metaLast and (hasTime or hasTimezone or isInPast or hasMeta) %}
-            {{ meta() }}
-          {% endif %}
-
-        </header>
-      {% endif %}
-
-      {% if body %}
-        <div class="c-card__content u-flow">
-          {% if body.content %}
-            {{ prose({
-              wrap: '',
-              classes: 'u-step--1',
-              content: body.content
-            }) }}
-          {% endif %}
-
-          {% if body.keySpecs | length %}
-            <div class="c-card__specs">
-              {% for specs in body.keySpecs %}
-                <dl>
-                  <dt>{{ specs.title }}:</dt>
-                  {% if specs.term %}
-                    <dd>{{ specs.term | safe }}</dd>
-                  {% else %}
-                    {% for term in specs.terms %}
-                      <dd>{{ term | safe }}</dd>
-                    {% endfor %}
-                  {% endif %}
-                </dl>
-              {% endfor %}
-            </div>
-          {% endif %}
-        </div>
-      {% endif %}
-
-      {% if footer %}
-        <footer class="c-card__footer u-flow--2xs">
-          {% if footer.buttons | length %}
-            <div>
-              {% for item in footer.buttons %}
-                {{ button({
-                  link: item.link,
-                  inline: true,
-                  label: item.label,
-                  colour: item.colour or ('green' if loop.index0 == 0 else 'outline-green')
-                }) }}
-              {% endfor %}
-            </div>
-          {% endif %}
-
-          {% if footer.cta %}
-            <div>
-              {{ twi({
-                link: footer.cta.link,
-                label: footer.cta.label,
-                classes: 'u-link',
-                icon: footer.cta.icon
-              }) }}
-            </div>
-          {% endif %}
-        </footer>
-      {% endif %}
-    </div>
-
-    {% if hasFullLink %}
-      <a class="u-fill u-fill--link" href="{{ link }}">{{ header.title }}</a>
-    {% endif %}
-    </div>
-
-    {% if params.shop %}
-      <footer class="c-card__shop-footer">
-        <span></span>
-        <div class="u-split u-split--top">
-          <div class="u-flow">
-            <div class="c-card__flex">
-              {% for label in params.shop.labels %}  
-                <div class="c-card__shop-footer-space">
-                  <span>{{ label.key | safe }}</span>
-                  <strong>{{ label.value | safe }}</strong>
-                </div>
-              {% endfor %}
-            </div>
-            {% if params.shop.small %}  
-              <p class="c-card__small">{{ params.shop.small }}</p>
-            {% endif %}
-          </div>
-
-          <form class="c-card__shop-footer-form c-card__flex">
-            <div class="c-card__shop-footer-space">
-              <label for="product-{{ params.shop.productId }}">Quantity</label>
-              <input class="c-input" type="number" id="product-{{ params.shop.productId }}" />
-            </div>
-            <div>
-              {{ button({
-                type: 'submit',
-                label: 'Add to basket'
-              }) }}
-            </div>
-          </form>
-        </div>
-      </footer>
-    {% endif %}
-
-    {% if params.series | length %}
-      <nav class="c-card__series">
-        {{ series({
-          links: params.series
-        }) }}
-      </nav>
-    {% endif %}
-</article>

package/src/_includes/components/card/card.scss

@@ -1,508 +0,0 @@
-.c-card {
-  background: color("white");
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
-  &--alt,
-  &--event {
-    background: color("petrol", "step-3");
-
-    &__specs {
-      color: color("grey", "step-1")
-    }
-  }
-
-  &--featured {
-    background: color("petrol");
-    color: color("petrol", "step-2");
-
-    .c-card__meta,
-    .mp {
-      color: inherit;
-    }
-
-    .c-button,
-    .c-card__title {
-      color: color("white");
-    }
-  }
-
-  &--featured &__day {
-    @include step(5);
-    color: color("white");
-    font-weight: weight("bold");
-  }
-
-  &--featured &__month {
-    @include step(3);
-    color: color("petrol", "step-2");
-    font-weight: weight("bold");
-  }
-
-  &--featured &__wrapper,
-  &--featured &__primary {
-    flex-grow: 1;
-  }
-
-  &--featured {
-    .c-button {
-      width: 100%;
-      margin: 0;
-    }
-  }
-
-  &--featured &__footer {
-    @include margin-top("auto");
-    @include padding-top("s");
-  }
-
-  &__wrapper,
-  &__primary {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &--layout-multi .c-card__wrapper,
-  &__primary {
-    // Required for IE
-    flex-shrink: 0;
-    width: 100%;
-  }
-
-  &--layout-multi {
-    .c-card__wrapper {
-      @include gap("s-l");
-    }
-    
-    &.c-card--featured.c-card--size-large.c-card--has-image {
-      .c-card__wrapper {
-        padding: 0;
-      }
-
-      .c-card__primary {
-        @include padding('s-m');
-      }
-    }
-
-    @media (min-width: 55em) {
-      .c-card__wrapper {
-        flex-direction: row;
-      }
-
-      .c-card__image,
-      .c-card__primary:nth-child(2) {
-        width: calc(50% - 18px);
-      }
-
-      &.c-card--small,
-      &.c-card--size-medium {
-        .c-card__image {
-          max-width: 152px;
-          width: 30%;
-        }
-
-        .c-card__primary:nth-child(2) {
-          flex-grow: 1;
-        }
-      }
-
-      &.c-card--size-large.c-card--featured {
-        img {
-          aspect-ratio: 2;
-          height: 100%;
-          object-fit: cover;
-        }
-    
-        @media only screen and (min-width: 55em) {
-          &:not(.c-card--switch) .c-card__primary {
-            padding-left: 0 !important;
-          }
-          
-          &.c-card--switch .c-card__primary {
-            padding-right: 0 !important;
-          }
-        }
-      }
-
-      .c-card__shop-footer > :first-child {
-        width: 30%;
-        max-width: 152px;
-        display: block;
-        @include margin-right("l");
-      }
-    }
-  }
-  
-  &--layout-multi-30-70 {
-    .c-card__image {
-      width: calc(30% - 18px) !important;
-      width: calc(30% - var(--space-s-m)) !important;
-    }
-
-    @media (min-width: 55em) {
-      .c-card__primary:nth-child(2) {
-        width: calc(70% - 18px) !important;
-        width: calc(70% - var(--space-s-m)) !important;
-      }
-    }
-  }
-
-  &--layout-multi-40-60 {
-    @media (min-width: 55em) {
-      .c-card__image {
-        width: calc(60% - 18px) !important;
-        width: calc(60% - var(--space-s-m)) !important;
-      }
-
-      .c-card__primary {
-        width: calc(40% - 18px) !important;
-        width: calc(40% - var(--space-s-m)) !important;
-      }
-    }
-  }
-
-  &--switch {
-    @media (min-width: 55em) {
-      .c-card__wrapper {
-        flex-direction: row-reverse;
-      }
-    }
-  }
-
-  &__primary {
-    @include flow("s");
-  }
-
-  &--layout-single &__primary,
-  &--layout-multi &__wrapper {
-    @include padding("s-m");
-    width: 100%;
-    justify-content: space-between;
-  }
-
-  &--layout-single.c-card--has-tag:not(.c-card--has-image) &__primary {
-    @include padding-top("m-l");
-  }
-
-  &__datetime {
-    display: block;
-    font-weight: weight("bold");
-    @include step(1);
-    color: color("petrol", "step-1");
-  }
-
-  &__content {
-    @include step(-1);
-  }
-
-  &__title {
-    @include step(2);
-  }
-
-  img {
-    width: 100%;
-  }
-
-  &--size-small &__title,
-  &--size-medium &__title {
-    @include step(0);
-  }
-
-  &--size-medium .c-twi {
-    @include step(-1);
-  }
-
-  &--bordered {
-    border: 1px solid color("petrol", "step-2");
-  }
-
-  &--float-right {
-    @extend .u-float-right;
-    @include margin(0, 0, "xs-l", 0);
-    width: 100%;
-  }
-
-  @media (min-width: 38em) {
-    &--float-right {
-      @include margin-left('xs-l');
-      min-width: 9rem;
-      width: 50%;
-    }
-  }
-
-  &__tag {
-    @include padding("3xs", "2xs");
-    @include step(-1);
-    background: color("blue", "step-2");
-    color: color("petrol");
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 1;
-  }
-
-  &__tag + &__wrapper > &__primary {
-    @include margin-top("xs");
-  }
-
-  &__tag + &__wrapper > &__image + &__primary {
-    @include margin-top(0);
-  }
-
-  &--no-height-match {
-    align-self: flex-start;
-  }
-
-  &__specs {
-    @include flow("xs");
-
-    dt {
-      font-weight: weight("bold");
-    }
-
-    dt,
-    dd {
-      padding: 0;
-      margin: 0;
-      display: block;
-    }
-
-    dl {
-      @include flow("3xs");
-    }
-  }
-
-  &--inline-specs &__specs {
-    dt,
-    dd {
-      display: inline;
-    }
-
-    dd:not(:last-child):after {
-      content: ", ";
-    }
-  }
-
-  &--2-column-specs &__specs {
-    dl {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(min-content, max-content));
-      @include space('gap', '3xs', '2xs');
-    }
-    dt, dd {
-      margin: 0;
-    }
-    dt {
-      grid-column: 1;
-    }
-    dd {
-      grid-column: 2;
-    }
-  }
-
-  .o-prose li + li {
-    @include margin-top("3xs");
-  }
-
-  &__meta {
-    color: color("petrol", "step-1");
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    @include step(-1);
-
-    & > :not(:last-child) {
-      position: relative;
-      padding-right: 1.5em;
-
-      &:after {
-        content: "";
-        position: absolute;
-        height: 18px;
-        right: 9px;
-        width: 1px;
-        top: 50%;
-        background: color("petrol", "step-1");
-        transform: translateY(-50%);
-      }
-    }
-
-    .mp {
-      font-size: inherit;
-    }
-
-    .c-icon {
-      font-size: 0.875em;
-    }
-
-    & + .c-card__title {
-      @include margin-top("s");
-    }
-  }
-
-  &__corner {
-    position: absolute;
-    color: color("white");
-    right: 0;
-    top: 0;
-    @include space("border-width", "l");
-    border-color: color("green") color("green") transparent transparent;
-    border-style: solid;
-    width: 0;
-    height: 0;
-    text-align: right;
-    font-size: 1.5rem;
-    transition: 300ms color;
-    z-index: 1;
-
-    .c-icon {
-      position: relative;
-      top: -27px;
-    }
-  }
-
-  &:hover &__corner {
-    color: rgba(255, 255, 255, 0.75);
-  }
-
-  &__series {
-    border-top: 1px solid color("petrol", "step-2");
-    @include padding("s", "m");
-    position: relative;
-    z-index: 2;
-  }
-
-  &__shop-footer {
-    @include padding("s", "s-m");
-    background-color: color("petrol", "step-3");
-    display: flex;
-
-    &-space {
-      @include flow("3xs");
-
-      & > * {
-        display: block;
-      }
-    }
-
-    &-form {
-      align-items: flex-end;
-    }
-
-    input {
-      width: 72px;
-    }
-  }
-
-  &__small {
-    @include step(-1);
-    color: color("petrol", "step-1");
-  }
-
-  &__flex {
-    display: flex;
-    flex-wrap: wrap;
-    @include gap("s-l");
-  }
-
-  &--event.c-card--has-image {
-    @extend .c-card--switch;
-
-    &.c-card--has-tag .c-card__tag {
-      z-index: 1;
-    }
-
-    .c-card__wrapper {
-      @include padding(0);
-
-      .c-card__primary {
-        @include padding("s-m");
-      }
-
-      .c-card__image {
-        position: relative;
-        width: 100%;
-
-        img {
-          max-height: 200px;
-          height: 100%;
-          object-fit: cover;
-          aspect-ratio: 16 / 9;
-        }
-      }
-    }
-  
-    @media (min-width: 55em) {
-      .c-card__primary {
-        width: calc(70% - 18px);
-        width: calc(70% - var(--space-s-m));
-      }
-
-      .c-card__image {
-        width: calc(30% - 18px);
-        width: calc(30% - var(--space-s-m));
-
-        img {
-          max-height: none !important;
-        }
-      }
-    }
-  }
-
-  &--event-series {
-    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 20%);
-
-    .c-card__image img {
-      max-height: 252px;
-      aspect-ratio: 2/1;
-      object-fit: cover;
-    }
-
-    .c-card__wrapper,
-    .c-card__primary {
-      height: 100%;
-    }
-
-    .c-card__primary {
-      flex-shrink: 1;
-    }
-
-    .c-card__header > * + * {
-      @include margin('s', 0, 0, 0);
-    }
-
-    .c-card__datetime {
-      font-size: var(--step--1);
-      font-weight: normal;
-    }
-
-    .c-card__title {
-      font-size: var(--step-0);
-    }
-
-    .c-card__footer .u-link,
-    .c-card__footer .u-link svg {
-      color: color('utility-blue', 'step-1');
-      font-size: var(--step--1);
-    }
-  }
-}
-
-.grid-view > .c-card--event.c-card--has-image .c-card__wrapper {
-  @include gap("s");
-  flex-direction: column;
-
-  .c-card__primary {
-    width: 100%;
-  }
-
-  .c-card__image {
-    width: 100%;
-  }
-}
-
-// IE11 fix
-// This forces IE11 to use display:block instead of flex for single-column cards
-_:-ms-fullscreen, :root .c-card, :root .c-card--layout-single .c-card__wrapper { display:block; }