✨(frontend) add animated WarningIcon

In the same way of SuccessIcon, we need to have an animated svg warning icon

Author: jbpenrath

CHANGELOG.md

@@ -8,6 +8,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unrealeased]
 
+### Added
+
+- Add WarningIcon component
+
 ### Changed
 
 - Improve Lyra error management to abort payment properly

src/frontend/js/components/SuccessIcon/_styles.scss

@@ -12,21 +12,7 @@
   max-height: 100%;
   stroke: currentColor;
   width: 4.5rem;
-
-  @keyframes wave {
-    0% {
-      transform: scale(1);
-    }
-    33% {
-      transform: scale(1.2);
-    }
-    66% {
-      transform: scale(0.8);
-    }
-    100% {
-      transform: scale(1);
-    }
-  }
+  @extend %keyframe-wave;
 
   & > * {
     fill: none;

src/frontend/js/components/WarningIcon/_styles.scss

@@ -0,0 +1,84 @@
+.warning-icon {
+  $duration: 1.1s;
+  align-items: center;
+  animation: wave $duration * 0.95 backwards;
+  border-radius: 100vw;
+  color: r-theme-val(steps-content, icon-warning-color);
+  display: inline-flex;
+  fill: none;
+  height: 4.5rem;
+  justify-content: center;
+  margin-bottom: 1.25rem;
+  max-height: 100%;
+  stroke: currentColor;
+  width: 4.5rem;
+  @extend %keyframe-wave;
+
+  .circle,
+  .exclamation-mark {
+    color: r-theme-val(steps-content, icon-warning-background);
+    &.back {
+      color: lighten(r-theme-val(steps-content, icon-warning-background), 20%);
+    }
+  }
+
+  .circle,
+  .exclamation-mark path {
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-width: 2;
+  }
+
+  .exclamation-mark circle {
+    fill: currentColor;
+  }
+
+  .exclamation-mark path {
+    $length: 11px;
+    @include keyframe-strokedLineAppear(exclamationMarkLineAppear, $length, true);
+    animation: exclamationMarkLineAppear $duration * 0.5 $duration * 0.3 backwards $r-ease-out;
+    stroke-dasharray: $length;
+  }
+
+  .exclamation-mark circle {
+    @keyframes exclamationMarkCircleAppear {
+      0% {
+        transform: scale(0);
+      }
+      66% {
+        transform: scale(1.2);
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+    animation: exclamationMarkCircleAppear $duration * 0.5 $duration * 0.2 backwards $r-ease-out;
+    transform-origin: 16px 23px;
+  }
+
+  .exclamation-mark:nth-of-type(1) {
+    & > path {
+      animation-delay: 0;
+      animation-duration: $duration * 0.2;
+    }
+    & > circle {
+      animation-delay: 0;
+      animation-duration: $duration * 0.1;
+    }
+  }
+
+  .circle {
+    $PI: 3.14159265;
+    $radius: 16px;
+    @include keyframe-strokedLineAppear(circleAppear, 2 * $PI * $radius, true);
+    animation: circleAppear $duration $r-ease-out;
+    stroke-dasharray: 2 * $PI * $radius;
+    transform-origin: center center;
+    transform: rotateZ(-45deg);
+
+    &:nth-of-type(1) {
+      animation-duration: $duration * 0.9;
+    }
+  }
+}

src/frontend/js/components/WarningIcon/index.tsx

@@ -0,0 +1,18 @@
+const WarningIcon = () => {
+  return (
+    <svg className="warning-icon" role="img" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <circle className="circle back" cx="16" cy="16" r="14" />
+      <circle className="circle" cx="16" cy="16" r="14" />
+      <g className="exclamation-mark back">
+        <path d="M16 8V19" />
+        <circle cx="16" cy="23" r="1" />
+      </g>
+      <g className="exclamation-mark">
+        <path d="M16 8V19" />
+        <circle cx="16" cy="23" r="1" />
+      </g>
+    </svg>
+  );
+};
+
+export default WarningIcon;

src/frontend/scss/colors/_theme.scss

@@ -561,6 +561,8 @@ $r-theme: (
     icon-big-color: r-color('charcoal'),
     icon-success-background: r-color('mantis'),
     icon-success-color: r-color('white'),
+    icon-warning-background: r-color('warning-500'),
+    icon-warning-color: r-color('white'),
     title-color: r-color('charcoal'),
     summary-hover-color: r-color('grey59'),
     subtitle-color: r-color(purplish-grey),

src/frontend/scss/components/_index.scss

@@ -13,6 +13,7 @@
 @import '../../js/components/SaleTunnel/Sponsors/SaleTunnelSponsors';
 @import '../../js/components/SaleTunnel/SaleTunnelSuccess/styles';
 @import '../../js/components/SuccessIcon/styles';
+@import '../../js/components/WarningIcon/styles';
 @import '../../js/components/RegisteredAddress/styles';
 @import '../../js/components/SearchInput/styles';
 @import '../../js/components/Spinner/styles';

src/frontend/scss/tools/_index.scss

@@ -8,6 +8,7 @@
 @import './features';
 @import './flexbox';
 @import './hero';
+@import './keyframes';
 @import './list-group';
 @import './shapes';
 @import './spacing';

src/frontend/scss/tools/_keyframes.scss

@@ -0,0 +1,40 @@
+//
+// keyframe-strokedLineAppear
+//
+// Generate a keyframe to make svg stroked element appears slightly
+//
+// @param {string}  name     the keyframe's name to use from `animation`
+// @param {length}  length   the full length of the stroke line`
+// @param {reverse} reverse  animation direction`
+@mixin keyframe-strokedLineAppear($name, $length, $reverse: false) {
+  $direction: 1;
+  @if $reverse == true {
+    $direction: -1;
+  }
+
+  @keyframes #{$name} {
+    from {
+      stroke-dashoffset: $direction * $length;
+    }
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+}
+
+%keyframe-wave {
+  @keyframes wave {
+    0% {
+      transform: scale(1);
+    }
+    33% {
+      transform: scale(1.2);
+    }
+    66% {
+      transform: scale(0.8);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+}