@coopdigital/shared-component--hero
Version:
Co-op Shared Component: Hero
143 lines (115 loc) • 9.51 kB
HTML
{% macro render(content, cms) %}
{% set mediaClass = '' %}
{% set squircleClass = '' %}
{% set contentPullClass = '' %}
{% set squircleBgColour = '' %}
{% set fontColour = '' %}
{% set clockColour = '' %}
{% if content.image %}
{% set mediaClass = 'coop-c-hero--media' %}
{% endif %}
{% if content.contentPull %}
{% set contentPullClass = 'coop-c-hero--pull' %}
{% endif %}
{% if content.showSquircle == true %}
{% set squircleClass = 'coop-c-hero--squircle' %}
{% endif %}
{% if content.background and content.background.class %}
{% set squircleBgColour = content.background.class %}
{% endif %}
{% if content.background and content.background.fontColour %}
{% set fontColour = content.background.fontColour %}
{% endif %}
{% if content.background and content.background.clockColour %}
{% set clockColour = content.background.clockColour %}
{% endif %}
<div class="coop-c-hero {{ squircleClass }} {{ mediaClass }} {{ contentPullClass }} {{fontColour}}">
<div class="coop-c-hero__inner coop-u-clearfix">
{% if content.heading %}
{# Conditionally enable mega heading #}
<h1 class="{{ 'coop-c-hero__title coop-c-hero__title--mega' if content.headingMega else 'coop-c-hero__title' }}">{{ content.heading }}</h1>
{% endif %}
{% if content.image %}
{% with image = cms.get_asset(content.image.sys.id) %}
{% if image.data.fields.description %}
{% set altText = image.data.fields.description %}
{% else %}
{% set altText = image.data.fields.title %}
{% endif %}
<div class="coop-c-hero__media">
<picture class="coop-c-hero__image">
{%- set imageType = image.fields.file.contentType.split('/')[1] -%}
{%- if imageType == 'jpeg' -%}
{%- set imageType = 'jpg' -%}
{%- endif -%}
<source media="(min-width: 60em)"
srcset="{{ image.fields.file.url }}?fm=webp&q=60&w=600&h=338 1x,
{{ image.fields.file.url }}?fm=webp&q=60&w={{ 600 * 2 }}&h={{ 338 * 2 }} 2x" type="image/webp" />
<source
srcset="{{ image.fields.file.url }}?fm=webp&q=60&w=600&h=338 1x,
{{ image.fields.file.url }}?fm=webp&q=60&w={{ 600 * 2 }}&h={{ 338 * 2 }} 2x"
type="image/webp" />
<source media="(min-width: 60em)"
srcset="{{ image.fields.file.url }}?fm={{imageType}}&q=60&w=600&h=338 1x,
{{ image.fields.file.url }}?fm={{imageType}}&q=60&w={{ 600 * 2 }}&h={{ 338 * 2 }} 2x"
type="image/jpeg" />
<source
srcset="{{ image.fields.file.url }}?fm={{imageType}}&q=60&w=600&h=338 1x,
{{ image.fields.file.url }}?fm={{imageType}}&q=60&w={{ 600 * 2 }}&h={{ 338 * 2 }} 2x"
type="image/jpeg" />
<img src="{{ image.fields.file.url }}?fm={{imageType}}&q=60&w=600&h=338" width="600"
height="338" alt="{{ altText }}" />
</picture>
</div>
{% endwith %}
{% endif %}
<div class="coop-c-hero__body">
{% if content.bodyText %}
{{ content.bodyText | markdown }}
{% endif %}
{% if content.disclaimer %}
<div class="coop-c-hero__disclaimer">
{{ content.disclaimer | markdown }}
</div>
{% endif %}
{% if content.link or content.secondaryLink %}
<div class="coop-c-hero__link-container">
{# Load primary link if available #}
{% if content.link %}
{% with link = cms.get_entry(content.link.sys.id) %}
{% import '/shared-component--hero/src/heroLink.html' as heroLink %}
{{ heroLink.render(cms, link, content) }}
{% endwith %}
{% endif %}
{# Load secondary link if available #}
{% if content.secondaryLink %}
{% with link = cms.get_entry(content.secondaryLink.sys.id) %}
{% import '/shared-component--hero/src/heroLink.html' as heroLink %}
{{ heroLink.render(cms, link, content) }}
{% endwith %}
{% endif %}
</div>
{% endif %}
{%- if content.endDate -%}
<p class="coop-c-hero__end-date">
<svg width="20" height="21" xmlns="http://www.w3.org/2000/svg">
<mask id="a" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21">
<path d="M10 .25c1.3802 0 2.6758.26041 3.8867.78125 1.211.52084 2.2689 1.23372 3.1738 2.13867.905.90495 1.6211 1.96289 2.1485 3.17383C19.7363 7.55469 20 8.85676 20 10.25c0 1.3932-.2604 2.6953-.7812 3.9062-.5209 1.211-1.2338 2.2689-2.1387 3.1739-.905.9049-1.9629 1.6178-3.1739 2.1387-1.2109.5208-2.513.7812-3.9062.7812-1.39324 0-2.69856-.2604-3.91602-.7812-1.21745-.5209-2.27538-1.2338-3.17382-2.1387-.89845-.905-1.60807-1.9629-2.12891-3.1739C.26041 12.9453 0 11.6432 0 10.25c0-1.39324.26041-2.69856.78125-3.91602.52084-1.21745 1.23372-2.27538 2.13867-3.17382.90495-.89845 1.96289-1.60807 3.17383-2.12891C7.30469.51041 8.60676.25 10 .25zM10 19c1.1979 0 2.3307-.2311 3.3984-.6934 1.0678-.4622 1.9955-1.0904 2.7832-1.8847.7878-.7943 1.4128-1.722 1.875-2.7832.4623-1.0612.6934-2.1908.6934-3.3887 0-1.19792-.2311-2.33072-.6934-3.39844-.4622-1.06771-1.0904-1.99544-1.8847-2.7832-.7943-.78776-1.722-1.41276-2.7832-1.875S11.1979 1.5 10 1.5c-1.19792 0-2.33072.23112-3.39844.69336-1.06771.46224-1.99544 1.09049-2.7832 1.88476-.78776.79428-1.41276 1.72201-1.875 2.78321S1.25 9.05208 1.25 10.25c0 1.1979.23112 2.3275.69336 3.3887s1.09049 1.9889 1.88476 2.7832c.79428.7943 1.72201 1.4225 2.78321 1.8847C7.67253 18.7689 8.80208 19 10 19zm5.3125-6.0547c.1563.0912.2474.2181.2734.3809.0261.1627-.026.3222-.1562.4785-.0261.1042-.0912.1823-.1953.2344-.1042.052-.2018.0781-.293.0781-.0391 0-.0846-.013-.1367-.0391-.0521-.026-.1107-.0521-.1758-.0781l-4.0625-2.5586c-.0911.0651-.1888.1107-.293.1367-.1041.0261-.2148.0391-.33199.0391-.37761 0-.69011-.1237-.9375-.3711-.2474-.2474-.3711-.5599-.3711-.9375 0-.2474.0586-.4655.17578-.6543.11719-.18881.28646-.3418.50782-.45899v-5c0-.19531.05533-.3483.16601-.45898s.26367-.16602.45899-.16602c.18229 0 .33199.05534.44919.16602.1172.11068.1758.26367.1758.45898v5c.2214.09115.3906.23763.5078.43946.1172.20182.1758.42643.1758.67383v.0586l4.0625 2.5781z" fill="#fff"/></mask><g mask="url(#a)"><path d="M10 .25c1.3802 0 2.6758.26041 3.8867.78125 1.211.52084 2.2689 1.23372 3.1738 2.13867.905.90495 1.6211 1.96289 2.1485 3.17383C19.7363 7.55469 20 8.85676 20 10.25c0 1.3932-.2604 2.6953-.7812 3.9062-.5209 1.211-1.2338 2.2689-2.1387 3.1739-.905.9049-1.9629 1.6178-3.1739 2.1387-1.2109.5208-2.513.7812-3.9062.7812-1.39324 0-2.69856-.2604-3.91602-.7812-1.21745-.5209-2.27538-1.2338-3.17382-2.1387-.89845-.905-1.60807-1.9629-2.12891-3.1739C.26041 12.9453 0 11.6432 0 10.25c0-1.39324.26041-2.69856.78125-3.91602.52084-1.21745 1.23372-2.27538 2.13867-3.17382.90495-.89845 1.96289-1.60807 3.17383-2.12891C7.30469.51041 8.60676.25 10 .25zM10 19c1.1979 0 2.3307-.2311 3.3984-.6934 1.0678-.4622 1.9955-1.0904 2.7832-1.8847.7878-.7943 1.4128-1.722 1.875-2.7832.4623-1.0612.6934-2.1908.6934-3.3887 0-1.19792-.2311-2.33072-.6934-3.39844-.4622-1.06771-1.0904-1.99544-1.8847-2.7832-.7943-.78776-1.722-1.41276-2.7832-1.875S11.1979 1.5 10 1.5c-1.19792 0-2.33072.23112-3.39844.69336-1.06771.46224-1.99544 1.09049-2.7832 1.88476-.78776.79428-1.41276 1.72201-1.875 2.78321S1.25 9.05208 1.25 10.25c0 1.1979.23112 2.3275.69336 3.3887s1.09049 1.9889 1.88476 2.7832c.79428.7943 1.72201 1.4225 2.78321 1.8847C7.67253 18.7689 8.80208 19 10 19zm5.3125-6.0547c.1563.0912.2474.2181.2734.3809.0261.1627-.026.3222-.1562.4785-.0261.1042-.0912.1823-.1953.2344-.1042.052-.2018.0781-.293.0781-.0391 0-.0846-.013-.1367-.0391-.0521-.026-.1107-.0521-.1758-.0781l-4.0625-2.5586c-.0911.0651-.1888.1107-.293.1367-.1041.0261-.2148.0391-.33199.0391-.37761 0-.69011-.1237-.9375-.3711-.2474-.2474-.3711-.5599-.3711-.9375 0-.2474.0586-.4655.17578-.6543.11719-.18881.28646-.3418.50782-.45899v-5c0-.19531.05533-.3483.16601-.45898s.26367-.16602.45899-.16602c.18229 0 .33199.05534.44919.16602.1172.11068.1758.26367.1758.45898v5c.2214.09115.3906.23763.5078.43946.1172.20182.1758.42643.1758.67383v.0586l4.0625 2.5781z" class="{{clockColour}}"/>
<path d="M22 22H-2V-2h24v24z" class="{{clockColour}}" /></g></svg>
<span>Until {{globals.iso_to_design_manual_date(content.endDate)}}</span>
</p>
{%- endif -%}
</div>
{% if content.showSquircle == true %}
<div class="coop-c-hero__squircle" aria-hidden="true">
<div class="coop-c-hero__squircle__inner ">
<svg class="coop-c-hero__squircle__svg {{squircleBgColour}}" viewBox="0 0 1802 1726">
<path class="coop-c-hero__squircle__path"
d="M1743 446.3c-49.7-167.6-173.7-299.6-339.6-362C1079.6-28.2 724.1-28.2 397 84.9 232.6 146.7 109.2 278.6 58.5 446.8 19.7 581.6 0 721.4 0 862.8s19.7 281.2 58.5 416.5c50.8 167.6 174.2 299.6 339.6 362 162.2 56.2 331.5 84.7 502.9 84.7 172 0 341.3-28.4 504-85.2 164.9-62.4 288.3-193.8 338-362 39.4-135.8 59-275.6 59-416s-19.7-280.6-59-416.5z" />
</svg>
</div>
</div>
{% endif %}
</div>
</div>
{% endmacro %}