From 018ca1013ed61225aaaf90f7a14524b9ae2a0871 Mon Sep 17 00:00:00 2001 From: jbpenrath Date: Thu, 30 May 2024 18:26:44 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20animated=20WarningI?= =?UTF-8?q?con?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In the same way of SuccessIcon, we need to have an animated svg warning icon --- CHANGELOG.md | 4 + .../js/components/SuccessIcon/_styles.scss | 16 +--- .../js/components/WarningIcon/_styles.scss | 84 +++++++++++++++++++ .../js/components/WarningIcon/index.tsx | 18 ++++ src/frontend/scss/colors/_theme.scss | 2 + src/frontend/scss/components/_index.scss | 1 + src/frontend/scss/tools/_index.scss | 1 + src/frontend/scss/tools/_keyframes.scss | 40 +++++++++ 8 files changed, 151 insertions(+), 15 deletions(-) create mode 100644 src/frontend/js/components/WarningIcon/_styles.scss create mode 100644 src/frontend/js/components/WarningIcon/index.tsx create mode 100644 src/frontend/scss/tools/_keyframes.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 15aff658c0..3d057adce7 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/frontend/js/components/SuccessIcon/_styles.scss b/src/frontend/js/components/SuccessIcon/_styles.scss index 61e0946e78..1510500df1 100644 --- a/src/frontend/js/components/SuccessIcon/_styles.scss +++ b/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; diff --git a/src/frontend/js/components/WarningIcon/_styles.scss b/src/frontend/js/components/WarningIcon/_styles.scss new file mode 100644 index 0000000000..c14d5cd2dd --- /dev/null +++ b/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; + } + } +} diff --git a/src/frontend/js/components/WarningIcon/index.tsx b/src/frontend/js/components/WarningIcon/index.tsx new file mode 100644 index 0000000000..bbbf34346a --- /dev/null +++ b/src/frontend/js/components/WarningIcon/index.tsx @@ -0,0 +1,18 @@ +const WarningIcon = () => { + return ( + + + + + + + + + + + + + ); +}; + +export default WarningIcon; diff --git a/src/frontend/scss/colors/_theme.scss b/src/frontend/scss/colors/_theme.scss index 4609111cfd..e35154a297 100644 --- a/src/frontend/scss/colors/_theme.scss +++ b/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), diff --git a/src/frontend/scss/components/_index.scss b/src/frontend/scss/components/_index.scss index 6a48e52817..69af0165df 100644 --- a/src/frontend/scss/components/_index.scss +++ b/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'; diff --git a/src/frontend/scss/tools/_index.scss b/src/frontend/scss/tools/_index.scss index 5f42471560..3796f7fe16 100644 --- a/src/frontend/scss/tools/_index.scss +++ b/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'; diff --git a/src/frontend/scss/tools/_keyframes.scss b/src/frontend/scss/tools/_keyframes.scss new file mode 100644 index 0000000000..cea0176ef9 --- /dev/null +++ b/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); + } + } +}