Merge pull request #301 from torchbox/feature/showcase-block-animations

Showcase block animations

Author: chris-lawton

tbx/project_styleguide/templates/patterns/atoms/icons/animated/lightbulb.html

@@ -0,0 +1,5 @@
+{# Animated lightbulb icon - use as a child of a <a> tag #}
+<div class="animated-icon animated-icon--lightbulb">
+    {% include "patterns/atoms/icons/icon.html" with name="lightbulb-outer" classname="animated-icon__lightbulb-outer" %}
+    {% include "patterns/atoms/icons/icon.html" with name="lightbulb-inner" classname="animated-icon__lightbulb-inner" %}
+</div>

tbx/project_styleguide/templates/patterns/atoms/icons/animated/megaphone.html

@@ -0,0 +1,5 @@
+{# Animated megaphone icon - use as a child of a <a> tag #}
+<div class="animated-icon animated-icon--megaphone">
+    {% include "patterns/atoms/icons/icon.html" with name="megaphone-two" classname="animated-icon__noise" %}
+    {% include "patterns/atoms/icons/icon.html" with name="megaphone-one" classname="animated-icon__megaphone" %}
+</div>

tbx/project_styleguide/templates/patterns/atoms/icons/animated/target.html

@@ -0,0 +1,6 @@
+{# Animated target icon - use as a child of a <a> tag #}
+<div class="animated-icon animated-icon--target">
+    {% include "patterns/atoms/icons/icon.html" with name="target-center" classname="animated-icon__center" %}
+    {% include "patterns/atoms/icons/icon.html" with name="target-inner" classname="animated-icon__inner" %}
+    {% include "patterns/atoms/icons/icon.html" with name="target-outer" classname="animated-icon__outer" %}
+</div>

tbx/project_styleguide/templates/patterns/atoms/icons/animated/wagtail-head.html

@@ -0,0 +1,7 @@
+{# Animated wagtail head icon - use as a child of a <a> tag #}
+<div class="animated-icon animated-icon--wagtail-head">
+    {% include "patterns/atoms/icons/icon.html" with name="wagtail-head-outline" classname="animated-icon__head" %}
+    {% include "patterns/atoms/icons/icon.html" with name="wagtail-circle" classname="animated-icon__circle" %}
+    {% include "patterns/atoms/icons/icon.html" with name="wagtail-top-beak" classname="animated-icon__top-beak" %}
+    {% include "patterns/atoms/icons/icon.html" with name="wagtail-bottom-beak" classname="animated-icon__bottom-beak" %}
+</div>

tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html

@@ -100,4 +100,63 @@
     <symbol id="target" viewBox="0 0 80 80" fill="none">
         <circle cx="40" cy="39.999" r="5.345" fill="var(--color--accent-four)" style="mix-blend-mode:screen"/><circle cx="40" cy="40" r="29.931" stroke="var(--color--accent-two)" stroke-width="2.138" style="mix-blend-mode:screen"/><circle cx="40" cy="39.999" r="18.172" stroke="var(--color--accent-three)" stroke-width="2.138" style="mix-blend-mode:screen"/>
     </symbol>
+
+    {# for animated megaphone icon - megaphone #}
+    <symbol id="megaphone-one" viewBox="0 0 55 46">
+        <path d="M51.814 13.518L4.831.211a3.147 3.147 0 00-2.792.575 3.206 3.206 0 00-.912 1.158c-.211.452-.314.948-.302 1.448l.953 38.56c.021.853.377 1.662.988 2.25a3.163 3.163 0 003.182.729l23.278-7.859.104 4.2c.021.851.376 1.66.987 2.248a3.163 3.163 0 002.272.886l8.477-.21a3.163 3.163 0 002.224-.997 3.232 3.232 0 00.875-2.295l-.217-8.8L52.2 29.32a3.196 3.196 0 001.615-1.2 3.252 3.252 0 00.59-1.938l-.239-9.64a3.237 3.237 0 00-.68-1.906 3.18 3.18 0 00-1.672-1.118zM5.28 42.895a1.05 1.05 0 01-1.259-.519 1.081 1.081 0 01-.123-.476L2.944 3.34a1.081 1.081 0 01.403-.868 1.053 1.053 0 01.915-.197L28.535 9.15l.636 25.694-23.891 8.05zm36.766-1.938c.007.284-.098.559-.292.765-.193.206-.46.325-.741.332l-8.477.21c-.282.007-.554-.1-.758-.296a1.077 1.077 0 01-.329-.75l-.12-4.854 10.516-3.548.201 8.14zm10.24-14.723a1.08 1.08 0 01-.197.648 1.06 1.06 0 01-.541.4h-.014l-20.26 6.84-.603-24.368 20.587 5.83c.222.06.419.19.56.373.143.181.223.405.229.637l.238 9.64z" fill="var(--color--accent-two)"/>
+    </symbol>
+
+    {# for animated megaphone icon - noise icons #}
+    <symbol id="megaphone-two" viewBox="0 0 16.118 39.839">
+        <path d="M2.529 3.947l.752-2.519A2 2 0 015.933.141l8.4 3.323a2 2 0 011.181 2.432l-.294.983a2 2 0 01-2.312 1.389L4.05 6.48a2 2 0 01-1.52-2.533zM.071 21.107l-.07-2.627a2 2 0 012.118-2.05l9.018.54a2 2 0 011.88 1.942l.027 1.026a2 2 0 01-1.764 2.04L2.305 23.04a2 2 0 01-2.234-1.933zM4.852 38.796l-1.257-2.308a2 2 0 01.954-2.79l8.276-3.621a2 2 0 012.558.875l.491.901a2 2 0 01-.643 2.62L7.72 39.5a2 2 0 01-2.869-.704z" fill="var(--color--accent-three)"/>
+    </symbol>
+
+    {# for animated wagtail icon - head outline #}
+    <symbol id="wagtail-head-outline" viewBox="0 0 80 80">
+        <g style="mix-blend-mode:screen">
+            <path d="M49.637 15.035l2.584-4.586C36.2 1.539 25.304 11.977 21.858 18.31L7 43.86v28.826h49.743c7.106-16.378 5.168-26.86-3.23-34.067-6.719-5.765-16.581-5.022-20.673-3.93-1.938-1.529-3.386-8.69 0-14.413 4.652-7.862 13.136-6.77 16.797-5.241z" stroke="var(--color--accent-three)" stroke-width="2" stroke-linejoin="round" fill="none"/>
+            <ellipse cx="53.513" cy="24.035" rx="2.584" ry="2.621" fill="var(--color--white)"/>
+        </g>
+    </symbol>
+
+    {# for animated wagtail icon - coloured circle #}
+    <symbol id="wagtail-circle" viewBox="0 0 43 44">
+        <ellipse cx="21.5" cy="22" rx="21.5" ry="22" fill="var(--color--accent-two)"/>
+    </symbol>
+
+    {# for animated wagtail icon - top beak #}
+    <symbol id="wagtail-top-beak" viewBox="0 0 14 9">
+        <path d="M6.76 1.09l6.849 6.02c.693.608.262 1.75-.66 1.75H1.99a1 1 0 01-.826-1.563l4.11-6.02A1 1 0 016.76 1.09z" fill="var(--color--accent-three)"/>
+    </symbol>
+
+    {# for animated wagtail icon - bottom beak #}
+    <symbol id="wagtail-bottom-beak" viewBox="0 0 9 6">
+        <path d="M4.555.724l3.313 2.853c.702.605.274 1.758-.653 1.758h-5.3a1 1 0 01-.82-1.572L3.081.91A1 1 0 014.555.724z" fill="var(--color--accent-three)"/>
+    </symbol>
+
+    {# for animated target icon - target center #}
+    <symbol id="target-center" viewBox="0 0 12 12" fill="none">
+        <circle cx="6" cy="6.001" r="5.345" fill="var(--color--accent-four)"/>
+    </symbol>
+
+    {# for animated target icon - target inner #}
+    <symbol id="target-inner" viewBox="0 0 40 40" fill="none">
+        <circle cx="20" cy="19.999" r="18.172" stroke="var(--color--accent-two)" stroke-width="2.138"/>
+    </symbol>
+
+    {# for animated target icon - target outer #}
+    <symbol id="target-outer" viewBox="0 0 62 62" fill="none">
+        <circle cx="31" cy="31" r="29.931" stroke="var(--color--accent-three)" stroke-width="2.138"/>
+    </symbol>
+
+    {# for animated lightbulb icon - lightbulb inner #}
+    <symbol id="lightbulb-outer" viewBox="0 0 49.613 64.802" fill="none">
+        <path d="M49.613 24.89c.009 3.77-.84 7.494-2.484 10.885a24.747 24.747 0 01-6.999 8.683 5.98 5.98 0 00-2.33 4.722v1.778a3.56 3.56 0 01-1.038 2.513 3.538 3.538 0 01-2.505 1.041h-18.9c-.94 0-1.842-.374-2.506-1.04a3.56 3.56 0 01-1.038-2.514V49.18a5.938 5.938 0 00-2.292-4.683 24.743 24.743 0 01-6.998-8.633A24.82 24.82 0 010 25.03C-.074 11.56 10.785.33 24.216.007a24.738 24.738 0 019.674 1.721 24.797 24.797 0 018.25 5.354 24.886 24.886 0 015.53 8.147 24.95 24.95 0 011.943 9.66zm-2.363 0c.001-3.003-.597-5.975-1.758-8.743a22.519 22.519 0 00-5.005-7.371 22.437 22.437 0 00-7.466-4.844 22.382 22.382 0 00-8.755-1.555c-12.158.296-21.971 10.448-21.903 22.64.01 3.398.792 6.748 2.284 9.798a22.386 22.386 0 006.33 7.807 8.315 8.315 0 013.198 6.558v1.778a1.186 1.186 0 001.182 1.185h18.9a1.18 1.18 0 001.18-1.185V49.18a8.357 8.357 0 01.857-3.663 8.33 8.33 0 012.375-2.913 22.387 22.387 0 006.335-7.86 22.457 22.457 0 002.246-9.854z" fill="var(--color--accent-two)" />
+        <path d="M16.99 60.38c-.46-.92-.69-1.38-.636-1.754a1.2 1.2 0 01.5-.808c.31-.216.824-.216 1.853-.216h11.786c1.029 0 1.543 0 1.853.216.27.19.451.482.5.808.055.374-.175.834-.635 1.754l-1.68 3.36c-.193.386-.29.578-.433.719a1.2 1.2 0 01-.448.277c-.19.066-.406.066-.837.066h-8.426c-.431 0-.647 0-.837-.066a1.2 1.2 0 01-.448-.277c-.144-.14-.24-.333-.433-.719z" fill="var(--color--accent-three)" />
+    </symbol>
+
+    {# for animated lightbulb icon - lightbulb inner #}
+    <symbol id="lightbulb-inner" viewBox="0 0 19.2 19.2" fill="none">
+        <circle cx="9.6" cy="9.6" r="9.6" fill="var(--color--accent-three)"/>
+    </symbol>
 </svg>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/showcase_block.html

@@ -23,8 +23,17 @@
 
                 {# Showcase block uses the rings icons, homepage block uses an icon selected by the editor #}
                 {% if is_homepage_showcase %}
-                    {# Note that a future enhancement will be to animated these icons, in which case they will need to be split out into separate svgs and a custom css animation applied to each one - similar to the 'employee owned trust' icon on the home page #}
-                    {% include "patterns/atoms/icons/icon.html" with name=item.icon classname="showcase__icon" %}
+                    {% if item.icon == 'megaphone' %}
+                        {% include "patterns/atoms/icons/animated/megaphone.html" %}
+                    {% elif item.icon == 'wagtail' %}
+                        {% include "patterns/atoms/icons/animated/wagtail-head.html" %}
+                    {% elif item.icon == 'target' %}
+                        {% include "patterns/atoms/icons/animated/target.html" %}
+                    {% elif item.icon == 'lightbulb' %}
+                        {% include "patterns/atoms/icons/animated/lightbulb.html" %}
+                    {% else %}
+                        {% include "patterns/atoms/icons/icon.html" with name=item.icon classname="showcase__icon" %}
+                    {% endif %}
                 {% else %}
                     <div class="showcase__rings">
                         {% include "patterns/atoms/icons/icon.html" with name="ring-one" classname="icon--stroke showcase__ring showcase__ring--one" %}