@coopdigital/shared-component--featurecard/src/featureCard.html

Co-op Shared Component: Feature Card

{%- macro render(content, cms, config) -%}

{% import 'macros/elements/images.html' as images %}

{# Set default classes and configuration #}
{% set orientationClass = '' %}
{% set sizeClass = '' %}
{%
  set imageDimensions = {
    'width': 565,
    'height': 317,

    'small' : {
      'width': 565,
      'height': 317
    },
    'medium' : {
      'width': 484,
      'height': 272
    },
    'large' : {
      'width': 393,
      'height': 223
    }
  }
%}


{% if config %}
  {% if config.isHorizontal %}
    {% set orientationClass = 'coop-c-featureCard--horizontal' %}
  {% endif %}
  {% if config.oneColumn %}
    {% set sizeClass = 'coop-c-featureCard--large' %}
  {% endif %}
{% endif %}


{% if content.fields.squirclePicker %}
  {% set squirclePicker = content.fields.squirclePicker.replace(' ','_')|lower %}
  {% if squirclePicker == 'fresh_3' %}
    {% set squircleModifer = True %}
  {% endif %}
  {% if squirclePicker == 'super_saver_squircle' %}
    {% set squircleModifer = True %}
  {% endif %}
{% endif %}

<article class="coop-c-featureCard {{orientationClass}} {{sizeClass}}">
{% if content.fields.link and content.fields.link.sys.id %}
	{% with link = cms.get_entry(content.fields.link.sys.id) %}
		{%- set href = ({}) -%}
		{% if link.type == 'internalLink' %}
			{% with internalLink = cms.get_entry(link.fields.page.data.sys.id) %}
				{%- set _ =  href.update({'data' : tenant_url_path + internalLink.full_url_path})  -%}
			{% endwith %}
		{% else %}
				{%- set _ =  href.update({ 'data' : link.fields.url.data})  -%}
		{% endif %}
			<a class="coop-c-featureCard__link"
			href="{{href.data}}"
			data-contenttype="Card|FeatureCard"
			data-contentparent="{{ config.contentParent|safe }}"
			data-linktext="{{ content.fields.bodyText|safe }}">
	{% endwith %}
{% endif %}

{% if content.fields.squirclePicker and content.fields.squirclePicker != 'None' %}
  <div class="coop-c-featureCard__squircle coop-u-flex coop-u-flex-centered {% if squircleModifer %} coop-c-featureCard__squircle--{{squirclePicker}} {% endif %}">
    {% if content.fields.squirclePicker == 'New squircle' %}
    <span class="coop-c-featureCard__squircle__label">
        <span class="coop-c-featureCard__squircle__uppercase coop-c-featureCard__squircle__uppercase__uppercase--new">New</span>
    </span>
    <span class="coop-c-featureCard__squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
      <svg width="115" height="110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false">
        <defs>
          <path d="M111.237 28.442c-3.17-10.683-11.083-19.094-21.674-23.069-20.664-7.17-43.351-7.17-64.227.037C14.846 9.348 6.968 17.759 3.73 28.475A95.633 95.633 0 000 54.99a96.04 96.04 0 003.73 26.547c3.242 10.683 11.116 19.094 21.674 23.069A97.897 97.897 0 0057.5 110a97.366 97.366 0 0032.164-5.432c10.526-3.974 18.4-12.352 21.57-23.069A95.02 95.02 0 00115 54.989a95.424 95.424 0 00-3.763-26.547z" id="a"/>
        </defs>
        <g fill-rule="nonzero" fill="none">
          <use fill="#FFEC00" xlink:href="#a"/>
          <use fill="#0F947C" xlink:href="#a"/>
        </g>
      </svg>
    </span>
    {% endif %}
    {% if content.fields.squirclePicker == 'New recipe squircle' %}
    <span class="coop-c-featureCard__squircle__label">
        <span class="coop-c-featureCard__squircle__uppercase">New recipes</span>
    </span>
    <span class="coop-c-featureCard__squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
      <svg width="115" height="110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false">
        <defs>
          <path d="M111.237 28.442c-3.17-10.683-11.083-19.094-21.674-23.069-20.664-7.17-43.351-7.17-64.227.037C14.846 9.348 6.968 17.759 3.73 28.475A95.633 95.633 0 000 54.99a96.04 96.04 0 003.73 26.547c3.242 10.683 11.116 19.094 21.674 23.069A97.897 97.897 0 0057.5 110a97.366 97.366 0 0032.164-5.432c10.526-3.974 18.4-12.352 21.57-23.069A95.02 95.02 0 00115 54.989a95.424 95.424 0 00-3.763-26.547z" id="a"/>
        </defs>
        <g fill-rule="nonzero" fill="none">
          <use fill="#FFEC00" xlink:href="#a"/>
          <use fill="#0F947C" xlink:href="#a"/>
        </g>
      </svg>
    </span>
    {% endif %}
    {% if content.fields.squirclePicker == 'Super saver squircle' %}
    <span class="coop-c-featureCard__squircle__label">
        <span class="coop-c-featureCard__squircle__uppercase">Super saver</span>
    </span>
    <span class="coop-c-featureCard__squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
        <svg width="147" height="140" xmlns="http://www.w3.org/2000/svg" focusable="false">
          <g fill="none" fill-rule="evenodd">
            <path fill="#CF043C" fill-rule="nonzero" d="M129.043 98.685l14.729-2.594-12.147-8.73 14.342-4.244-13.047-7.31 13.78-5.817-13.78-5.813 13.047-7.306-14.342-4.236 12.147-8.726-14.717-2.546 9.735-12.074-15.5.935 4.684-14.81-14.112 6.496-1.024-15.532L101.5 17.121l-4.224-14.99-9.726 12.166L81.37 0l-8.02 13.353L65.333 0l-6.172 14.297-9.718-12.171-4.216 14.991L33.896 6.378 32.863 21.91l-14.108-6.511 4.672 14.813-15.504-.932 9.755 12.07-14.72 2.55 12.134 8.743-14.35 4.215 13.039 7.323L0 69.99l13.78 5.81L.743 83.124l14.35 4.224-12.139 8.742 14.721 2.558-9.755 12.067 15.504-.928-4.672 14.81 14.108-6.508 1.033 15.536 11.332-10.743 4.22 14.991 9.714-12.167L65.334 140l8.016-13.353L81.37 140l6.177-14.297 9.722 12.171 4.228-14.991 11.332 10.747 1.03-15.536 14.107 6.495-4.676-14.805 15.5.931-9.723-12.114"/><path d="M123.552 94.554a89.298 89.298 0 000-49.326 33.057 33.057 0 00-20.207-21.49 91.815 91.815 0 00-59.96 0 32.976 32.976 0 00-20.212 21.49 88.668 88.668 0 000 49.33 32.992 32.992 0 0020.211 21.495 91.597 91.597 0 0029.97 5.035 91.913 91.913 0 0029.987-5.031 33.08 33.08 0 0020.215-21.499" stroke="#FD0" stroke-width="3"/>
          </g>
        </svg>
    </span>
    {% endif %}
    {% if content.fields.squirclePicker == 'Fresh 3' %}
    <span class="coop-c-featureCard__squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
        <span class=" coop-c-featureCard__squircle__label">
            <span class="coop-c-featureCard__squircle__uppercase">Fresh</span>
            <span class="coop-c-featureCard__squircle__large-text coop-c-featureCard__squircle--text-pull">3</span>
        </span>
        <span class="coop-c-featureCard__squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
          <svg class="coop-c-featureCard__squircle__svg" viewBox="0 0 100 115" focusable="false">
            <g>
              <path
                d="M96.728125,43.0810931 C93.971875,33.6599519 87.090625,26.2431028 77.88125,22.7380123 C59.9125,16.4152936 40.184375,16.4152936 22.03125,22.7702875 C12.909375,26.2431028 6.059375,33.6599519 3.24375,43.1101408 C1.090625,50.6851385 0,58.5409308 0,66.4903213 C0,74.4397117 1.090625,82.295504 3.24375,89.8995495 C6.0625,99.3206907 12.909375,106.73754 22.090625,110.24263 C31.090625,113.402376 40.484375,115 50,115 C59.546875,115 68.940625,113.402376 77.96875,110.210355 C87.121875,106.705265 93.96875,99.3174631 96.725,89.8672742 C98.909375,82.2341811 100,74.3783888 100,66.4903213 C100,58.6022538 98.909375,50.7174138 96.728125,43.0810931 Z"
                id="sq" fill-rule="nonzero"></path>
              <path
                d="M44,0 L50.6425124,0 L51.3188081,5.4309082 C54.5488399,3.59736314 58.0393144,2.68059061 61.7902314,2.68059061 C67.416607,2.68059061 67.4925974,5.01475016 69.8579135,5.01475016 C71.4347908,5.01475016 73.1488197,4.7828573 75,4.31907156 C71.0684597,8.28295675 68.1046199,11.2426224 66.1084806,13.1980684 C63.1142717,16.1312375 59.9780309,15.9122434 57.7791214,15.9122434 C56.3131817,15.9122434 54.5821423,15.3669442 52.586003,14.2763459 L52.586003,19.357326 L44.9134605,20 L44,0 Z"
                id="Path"></path>
            </g>
          </svg>
        </span>
    </span>
    {% endif %}
    {% if content.fields.squirclePicker == 'Member deal' %}
      <span class="coop-c-featureCard__squircle__label">
        <span class="coop-c-featureCard__squircle__small-text">Member deal</span>
      </span>
      <span class="coop-c-featureCard__squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true" >
        <svg width="119" height="115" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false">
          <path d="M114.172 29.9742c-3.225-10.8835-11.276-19.4516-22.0509-23.50075-21.0235-7.30413-44.1054-7.30413-65.3445.03728C16.104 10.5226 8.08947 19.0907 4.79519 30.0077 2.27603 38.7585 1 47.8337 1 57.017s1.27603 18.2585 3.79519 27.0428C8.09312 94.9433 16.104 103.511 26.846 107.561c10.53 3.65 21.5207 5.495 32.654 5.495 11.1698 0 22.1605-1.845 32.7234-5.533 10.7096-4.049 18.7196-12.5834 21.9446-23.5005C116.724 75.2046 118 66.1294 118 57.017c0-9.1125-1.276-18.2212-3.828-27.0428z" fill="#D3212A" stroke="#F8DA6D" stroke-width="2"/></svg>
      </span>
    {% endif %}
    {% if content.fields.squirclePicker == 'Large text top squircle' %}
    <span class=" coop-c-featureCard__squircle__label">
      {% if content.fields.squircleTop %}
        <span class="coop-c-featureCard__squircle__large-text">{{ content.fields.squircleTop }}</span>
      {% endif %}
      {% if content.fields.squircleBottom %}
        <span class="coop-c-featureCard__squircle__small-text">{{ content.fields.squircleBottom }}</span>
      {% endif %}
    </span>
    <span class="coop-c-featureCard__squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
        <svg class="coop-c-featureCard__squircle__svg" viewBox="0 0 61 58">
          <path d="M59,15C57.3,9.4,53.1,4.9,47.5,2.8c-11-3.8-23-3.8-34.1,0C7.9,4.9,3.7,9.4,2,15c-1.3,4.5-2,9.2-2,14s0.7,9.4,2,14
                c1.7,5.6,5.9,10.1,11.5,12.2C19,57,24.7,58,30.5,58c5.8,0,11.6-1,17.1-2.9C53.1,53,57.3,48.6,59,43c1.3-4.6,2-9.3,2-14
                S60.3,19.6,59,15L59,15z" />
        </svg>
    </span>
    {% endif %}
    {% if content.fields.squirclePicker == 'Large text bottom squircle' %}
    <span class=" coop-c-featureCard__squircle__label">
      {% if content.fields.squircleTop %}
        <span class="coop-c-featureCard__squircle__small-text">{{ content.fields.squircleTop }}</span>
      {% endif %}
      {% if content.fields.squircleBottom %}
        <span class="coop-c-featureCard__squircle__large-text coop-c-featureCard__squircle--text-pull">{{ content.fields.squircleBottom }}</span>
      {% endif %}
    </span>
    <span class="coop-c-featureCard__squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
        <svg class="coop-c-featureCard__squircle__svg" viewBox="0 0 61 58" focusable="false">
          <path d="M59,15C57.3,9.4,53.1,4.9,47.5,2.8c-11-3.8-23-3.8-34.1,0C7.9,4.9,3.7,9.4,2,15c-1.3,4.5-2,9.2-2,14s0.7,9.4,2,14
                c1.7,5.6,5.9,10.1,11.5,12.2C19,57,24.7,58,30.5,58c5.8,0,11.6-1,17.1-2.9C53.1,53,57.3,48.6,59,43c1.3-4.6,2-9.3,2-14
                S60.3,19.6,59,15L59,15z" />
        </svg>
    </span>
    {% endif %}
    {% if content.fields.squirclePicker == 'Large text only squircle' %}
    <span class=" coop-c-featureCard__squircle__label">
      {% if content.fields.squircleBottom %}
        <span class="coop-c-featureCard__squircle__large-text">{{ content.fields.squircleBottom }}</span>
      {% endif %}
    </span>
    <span class="coop-c-featureCard__squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
        <svg class="coop-c-featureCard__squircle__svg" viewBox="0 0 61 58" focusable="false">
          <path d="M59,15C57.3,9.4,53.1,4.9,47.5,2.8c-11-3.8-23-3.8-34.1,0C7.9,4.9,3.7,9.4,2,15c-1.3,4.5-2,9.2-2,14s0.7,9.4,2,14
                c1.7,5.6,5.9,10.1,11.5,12.2C19,57,24.7,58,30.5,58c5.8,0,11.6-1,17.1-2.9C53.1,53,57.3,48.6,59,43c1.3-4.6,2-9.3,2-14
                S60.3,19.6,59,15L59,15z" />
        </svg>
    </span>
    {% endif %} 
  </div>
{% endif %}

  {% if content.fields.image and content.fields.image.sys.id %}
    {% with image = cms.get_asset(content.fields.image.sys.id) %}
    <figure class="coop-c-featureCard__media">
      <picture class="coop-c-featureCard__media-wrap coop-c-featureCard__media-wrap--16-9">
        {{ images.render(image, imageDimensions) }}
      </picture>
    </figure>
    {% endwith %}
  {% endif %}
    <div class="coop-c-featureCard__content">
        <h3 class="coop-c-featureCard__title">{{content.fields.bodyText}}</h3>
    </div>
{% if content.fields.link and content.fields.link.sys.id %}
  </a>
{% endif %}
</article>

{%- endmacro -%}