feat(Presentation): display and animate credential status

blockchain-certificates · Nov 25, 2024 · 46c3ab7 · 46c3ab7
1 parent 0d7089c
commit 46c3ab7
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 14 deletions.
diff --git a/src/components/atoms/ErrorMessage/_components.error-message-css.js b/src/components/atoms/ErrorMessage/_components.error-message-css.js
diff --git a/src/components/atoms/FinalVerificationStep/FinalVerificationStep.ts b/src/components/atoms/FinalVerificationStep/FinalVerificationStep.ts
@@ -15,6 +15,7 @@ export interface FinalVerificationStepProps {
   transactionLink?: string[];
   isTestChain?: boolean;
   isVisible?: boolean;
+  isOverlay?: boolean;
   finalStep?: IFinalStep;
   hideLink?: boolean;
   status?: string;
@@ -29,7 +30,8 @@ export default function FinalVerificationStep ({
   finalStep = null,
   hideLink = false,
   status = '',
-  standalone = false
+  standalone = false,
+  isOverlay = false
 }: FinalVerificationStepProps = {}): TemplateResult {
   if (!finalStep) {
     return;
@@ -38,7 +40,8 @@ export default function FinalVerificationStep ({
   const wrapperClasses: string = [
     standalone ? 'buv-c-final-verification-step--standalone-wrapper' : '',
     `is-${status}`,
-    isTestChain ? 'is-test' : ''
+    isTestChain ? 'is-test' : '',
+    isOverlay ? 'buv-c-final-verification-step--overlay' : ''
   ].join(' ');
 
   // TODO: better handle this dynamic class (cf npm classnames)
@@ -49,6 +52,7 @@ export default function FinalVerificationStep ({
     'buv-qa-verification-step',
     isVisible ? 'is-visible' : '',
     isTestChain ? 'is-test' : '',
+    isOverlay ? 'is-overlay' : '',
     `is-${status}`,
     status && !standalone ? 'buv-c-badge  buv-c-badge--large' : ''
   ].join(' ');
@@ -59,7 +63,8 @@ export default function FinalVerificationStep ({
     'buv-u-full-width',
     'buv-o-text-12',
     'is-final',
-    isVisible ? 'is-visible' : ''
+    isVisible ? 'is-visible' : '',
+    isOverlay ? 'is-overlay' : ''
   ].join(' ');
 
   const title = finalStep.label;

diff --git a/src/components/atoms/FinalVerificationStep/FinalVerificationStepContainer.ts b/src/components/atoms/FinalVerificationStep/FinalVerificationStepContainer.ts
@@ -16,7 +16,8 @@ export const mapStateToProps = (state: BlockcertsVerifierState): FinalVerificati
 const ownProps: FinalVerificationStepProps = {
   isVisible: Boolean as any,
   hideLink: Boolean as any,
-  standalone: Boolean as any
+  standalone: Boolean as any,
+  isOverlay: Boolean as any
 };
 
 const FinalVerificationStepContainer = connector(FinalVerificationStep, { mapStateToProps, ownProps });

diff --git a/src/components/atoms/FinalVerificationStep/_components.final-verification-step-css.js b/src/components/atoms/FinalVerificationStep/_components.final-verification-step-css.js
diff --git a/src/components/atoms/FinalVerificationStep/_components.final-verification-step.scss b/src/components/atoms/FinalVerificationStep/_components.final-verification-step.scss
@@ -72,6 +72,7 @@
   padding: 10px;
   box-sizing: border-box;
   border-left: 3px solid;
+  text-align: left;
 }
 
 .buv-c-final-verification-step--standalone-wrapper.is-success {
@@ -102,6 +103,16 @@
   left: -30px;
 }
 
+.buv-c-final-verification-step--standalone.is-overlay {
+  min-width: 500px;
+  width: 100%;
+}
+
+.buv-c-verification-substep.is-overlay {
+  min-width: 500px;
+  width: 500px;
+}
+
 .buv-c-verification-substep.is-final {
   display: none;
   line-height: 1.35;
@@ -115,5 +126,22 @@
   display: none;
 }
 
+.buv-c-final-verification-step--overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 30px;
+  width: 35px;
+  padding: 4px;
+  transition: width .3s ease-in-out, height .3s ease-in-out, padding .3s ease-in-out;
+  overflow: hidden;
+}
+
+.buv-c-final-verification-step--overlay:hover {
+  padding: 10px;
+  width: 100%;
+  height: auto;
+}
+
 @import '../../../shared-styles/utils.flow';
 @import '../../../shared-styles/utils.width';