@coopdigital/shared-component--membershipfeatured/src/membership-featured.html

Co-op Shared Component: Membership featured

{% import '/shared-component--editorialcard/src/editorialCard.html' as editorialCard %}

{% macro render(content, cms, config='') %}

{%- set backgroundColour = '' -%}
{%- if content.background and content.background.class -%}
    {%- set backgroundColour = content.background.class -%}
{%- endif -%}

{% if content.heading %}
  {% set contentParent = content.heading %}
{% else %}
  {% set contentParent = content.name %}
{% endif %}

{% set isHorizontal = false %}
{% if content.editorialCards %}
  {% if content.editorialCards|length == 1 %}
    {% set editorialCardClass = 'coop-l-grid__item--small-12 coop-l-grid__item--medium-12' %}
    {% set isHorizontal = true %}
  {% elif content.editorialCards|length == 2 %}
    {% set editorialCardClass = 'coop-l-grid__item--small-6 coop-l-grid__item--medium-6' %}
  {% else %}
    {% set editorialCardClass = 'coop-l-grid__item--small-4 coop-l-grid__item--medium-4' %}
  {% endif %}
{% endif %}

  <div class="coop-c-membership-featured {{backgroundColour}}">
    <div class="coop-c-membership-featured__inner">
      {% if content.heading %}
        <h3 class="coop-c-membership-featured__title">
          {{content.heading}}
        </h3>
      {% endif %}
      {% if content.editorialCards %}
        <div class="coop-c-membership-featured__cards">
          <div class="coop-c-membership-featured__grid coop-l-grid">
            {% for getEditorialCard in content.editorialCards %}
              {% with editorialCardEntry = cms.get_entry(getEditorialCard.sys.id) %}
                {% set editorialCardConfig = {
                  'contentParent' : contentParent,
                  'isHorizontal' : isHorizontal
                } %}
                <div class="coop-l-grid__item {{editorialCardClass}}">
                  {{ editorialCard.render(editorialCardEntry.data.fields, cms, editorialCardConfig) }}
                </div>
              {% endwith %}
            {% endfor %}
          </div>
          <svg class="coop-c-membership-featured__connector coop-c-membership-featured__connector--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 212" aria-hidden="true" focusable="false">
            <path class="{{backgroundColour}}" d="M496 0v152c0 30.93-25.1 56-56.05 56H0" stroke-width="8" vector-effect="non-scaling-stroke"/>
          </svg>

          <svg class="coop-c-membership-featured__connector coop-c-membership-featured__connector--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233 391" aria-hidden="true" focusable="false">
            <path class="{{backgroundColour}}" d="M229 0v50.74c0 30.93-25.07 56-56 56H60c-30.93 0-56 25.07-56 56V391" stroke-width="8" vector-effect="non-scaling-stroke"/>
          </svg>
        </div>
      {% endif %}
      {% if content.link %}
        {% with link = cms.get_entry(content.link.sys.id) %}
          {%- set href = {} -%}
          {% if link.type == 'internalLink' %}
            {% if link.data.fields.page %}
              {% with internalLink = cms.get_entry(link.data.fields.page.sys.id) %}
                {%- set _ = href.update({"url" : tenant_url_path + internalLink.full_url_path}) -%}
              {% endwith %}
          {% endif %}
          {% else %}
            {%- set _ = href.update({"url" : link.fields.url.data }) -%}
          {% endif %}
          <div class="coop-c-membership-featured__about">
            <p>
              <a class="coop-t-link coop-t-link--arrow" href="{{href.url}}"  data-contenttype="Membership featured" data-contentparent="{{contentParent}}" data-linktext="{{link.fields.title.data}}">
                {{link.fields.title.data|safe}}<svg class="coop-t-link__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" aria-hidden="true" focusable="false"><path class="coop-u-brand-membership-yellow-bright-fill" d="M13.89 0L11.4 2.46l5.87 5.8H0v3.48h17.28l-5.88 5.8L13.89 20 24 10z" stroke="none"/></svg></a>
            </p>
          </div>
        {% endwith %}
      {% endif %}
    </div>
  </div>
{% endmacro %}