Merge pull request #13 from blockchain-certificates/feat/animation-ve…

…rification-step

Feat/animation verification step

src/components/atoms/DragAndDrop/_components.drag-and-drop-css.js

@@ -1,3 +1,3 @@
 import {html} from '@polymer/lit-element';
-export default html`<style>.buv-o-text-12{font-size:12px}.buv-o-text-15{font-size:15px;line-height:20px}.buv-c-drag-and-drop__droparea{z-index:100;background-color:rgba(0,0,0,0.1);display:none;position:absolute;top:0;left:0;width:100%;height:100%}.buv-c-drag-and-drop__droparea.is-active{display:block}
+export default html`<style>.buv-o-text-11{font-size:11px}.buv-o-text-12{font-size:12px}.buv-o-text-15{font-size:15px;line-height:20px}.buv-c-drag-and-drop__droparea{z-index:100;background-color:rgba(0,0,0,0.1);display:none;position:absolute;top:0;left:0;width:100%;height:100%}.buv-c-drag-and-drop__droparea.is-active{display:block}
 </style>`;

src/components/atoms/FinalVerificationStep/FinalVerificationStep.js

@@ -1,14 +1,24 @@
 import { html } from '@polymer/lit-element';
 import CSS from './_components.final-verification-step-css';
 
-export default function FinalVerificationStep ({ chain = '', transactionLink = '', isTestChain }) {
+export default function FinalVerificationStep ({ chain = '', transactionLink = '', isTestChain, isVisible = false }) {
   // TODO: better handle this dynamic class (cf npm classnames)
   const titleClasses = [
     'buv-c-verification-step',
     'is-final',
+    isVisible ? 'is-visible' : '',
     isTestChain ? 'is-test' : ''
   ].join(' ');
 
+  const detailsClasses = [
+    'buv-c-verification-substep',
+    'buv-u-excluded-from-flow',
+    'buv-u-full-width',
+    'buv-o-text-12',
+    'is-final',
+    isVisible ? 'is-visible' : ''
+  ].join(' ');
+
   const title = isTestChain ? 'This Mocknet credential passed all checks' : 'Verified';
   const details = isTestChain
     ? 'Mocknet credentials are used for test purposes only. They are not recorded on a blockchain, ' +
@@ -21,7 +31,7 @@ export default function FinalVerificationStep ({ chain = '', transactionLink = '
   return html`
     ${CSS}
     <dt class$='${titleClasses}'>${title}</dt>
-    <dd class='buv-c-verification-substep buv-u-excluded-from-flow buv-u-full-width buv-o-text-12'>
+    <dd class$='${detailsClasses}'>
       ${details}
     </dd>
   `;

src/components/atoms/FinalVerificationStep/_components.final-verification-step.scss

@@ -9,6 +9,11 @@
   font-weight: 600;
   line-height: 19px;
   white-space: nowrap;
+  opacity: 0;
+}
+
+.buv-c-verification-step.is-final.is-visible {
+  opacity: 1;
 }
 
 .buv-c-verification-step.is-final.is-test {
@@ -18,20 +23,44 @@
 
 .buv-c-verification-step.is-final::before {
   content: '';
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyM3B4IiB2aWV3Qm94PSIwIDAgMjAgMjMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0iVmVyaWZpY2F0aW9uIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1NC4wMDAwMDAsIC00NzQuMDAwMDAwKSIgZmlsbD0iIzJBQjI3QiI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQ4LjAwMDAwMCwgNDY5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2LDUgTDYsOS4xODE4MTgxOCBMNiwxNS40NTQ1NDU1IEM2LDIxLjI1NjgxODIgMTAuMjY2NjY2NywyNi42ODI3MjczIDE2LDI4IEMyMS43MzMzMzMzLDI2LjY4MjcyNzMgMjYsMjEuMjU2ODE4MiAyNiwxNS40NTQ1NDU1IEwyNiw5LjE4MTgxODE4IEwxNiw1IEwxNiw1IFogTTksMTcuNzUzNzE1NSBMMTAuNTI3NSwxNi4yNTY5MDAyIEwxMy4zMzMzMzMzLDE4Ljk5NTc1MzcgTDIwLjQ3MjUsMTIgTDIyLDEzLjUwNzQzMSBMMTMuMzMzMzMzMywyMiBMOSwxNy43NTM3MTU1IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
-  background-repeat: no-repeat;
-  background-position: center;
-  height: 38px;
   width: 38px;
+  height: 24px;
   top: -12px;
   left: -45px;
 }
 
-.buv-c-verification-step.is-final.is-test::before {
+.buv-c-verification-step.is-final.is-visible::before {
+  height: 38px;
+}
+
+.buv-c-verification-step.is-final::after {
+  content: '';
+  height: 26px;
+  width: 23px;
+  left: -37px;
+  top: -6px;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyM3B4IiB2aWV3Qm94PSIwIDAgMjAgMjMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0iVmVyaWZpY2F0aW9uIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1NC4wMDAwMDAsIC00NzQuMDAwMDAwKSIgZmlsbD0iIzJBQjI3QiI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQ4LjAwMDAwMCwgNDY5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2LDUgTDYsOS4xODE4MTgxOCBMNiwxNS40NTQ1NDU1IEM2LDIxLjI1NjgxODIgMTAuMjY2NjY2NywyNi42ODI3MjczIDE2LDI4IEMyMS43MzMzMzMzLDI2LjY4MjcyNzMgMjYsMjEuMjU2ODE4MiAyNiwxNS40NTQ1NDU1IEwyNiw5LjE4MTgxODE4IEwxNiw1IEwxNiw1IFogTTksMTcuNzUzNzE1NSBMMTAuNTI3NSwxNi4yNTY5MDAyIEwxMy4zMzMzMzMzLDE4Ljk5NTc1MzcgTDIwLjQ3MjUsMTIgTDIyLDEzLjUwNzQzMSBMMTMuMzMzMzMzMywyMiBMOSwxNy43NTM3MTU1IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.buv-c-verification-step.is-final.is-test::after {
   background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4IiBmaWxsPSIjRjVBNjIzIj48cGF0aCBkPSJNLjUgMTZoMTdMOSAxIC41IDE2em05LjUtMkg4di0yaDJ2MnptMC0zSDhWN2gydjR6Ii8+PC9zdmc+IA==');
 }
 
-.buv-c-verification-step.is-final::after,
+.buv-c-verification-step.is-final.is-visible::after {
+  opacity: 1;
+}
+
+.buv-c-verification-substep.is-final {
+  display: none;
+}
+
+.buv-c-verification-substep.is-final.is-visible {
+  display: block;
+}
+
 .buv-c-verification-substep::after {
   display: none;
 }