add animated light bulb

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/sprites/sprites.html

@@ -148,4 +148,15 @@
     <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

@@ -29,6 +29,8 @@
                         {% 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 %}

tbx/static_src/sass/components/_animated-icon.scss

@@ -184,4 +184,52 @@
             }
         }
     }
+
+    &--lightbulb {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+        height: 90px;
+
+        #{$root}__lightbulb-inner {
+            position: absolute;
+            width: 19px;
+            height: 19px;
+            transform: scale(1);
+            transition: transform $transition;
+            transform-origin: 5px 20px;
+            z-index: -1;
+
+            @include reduced-motion() {
+                transition: none;
+            }
+        }
+
+        #{$root}__lightbulb-outer {
+            position: absolute;
+            width: 50px;
+            height: 65px;
+            transform: rotate(0);
+            transition: transform $transition;
+            transform-origin: 30px 60px;
+            mix-blend-mode: screen;
+
+            @include reduced-motion() {
+                transition: none;
+            }
+        }
+
+        a:focus &,
+        a:hover & {
+            #{$root}__lightbulb-outer {
+                transform: rotate(-7deg);
+            }
+
+            #{$root}__lightbulb-inner {
+                transform: scale(2.4);
+            }
+        }
+    }
 }