Unity Phase 1: Acrobat Fill & Sign w/ Unity v2 (#137)

Releasing Acrobat Fill & Sign development with Unity v2 updates.

**NOTE: Please closely review the following files as they are
PROD-impacting changes.**
- `progress-circle.css`
- `styles.css`
- `workflow.js`
- `utils.js`

Resolves: [MWPW-155679](https://jira.corp.adobe.com/browse/MWPW-155679)

Test URLs:

Before:
https://stage--dc--adobecom.hlx.page/acrobat/online/test/sign-pdf?unitylibs=stage
After: https://main--dc--adobecom.hlx.page/acrobat/online/test/sign-pdf

unitylibs/blocks/unity/unity.css

@@ -0,0 +1,3 @@
+.unity {
+  display: none !important;
+}

unitylibs/blocks/unity/unity.js

@@ -24,5 +24,5 @@ export default async function init(el) {
   });
   await stylePromise;
   const { default: wfinit } = await import(`${unitylibs}/core/workflow/workflow.js`);
-  await wfinit(el, projectName, unitylibs);
+  await wfinit(el, projectName, unitylibs, 'v2');
 }

unitylibs/core/features/progress-circle/progress-circle.css

@@ -1,4 +1,5 @@
-.unity-enabled .interactive-area .progress-holder {
+.unity-enabled .interactive-area .progress-holder,
+.unity-enabled .interactive-area .progress-circle {
   display: none;
   justify-content: center;
   align-items: center;
@@ -11,7 +12,8 @@
   z-index: 2;
 }
 
-.unity-enabled .interactive-area.loading .progress-holder {
+.unity-enabled .interactive-area.loading .progress-holder,
+.unity-enabled .interactive-area .progress-circle.show {
   display: flex;
 }
 

unitylibs/core/styles/splash-screen.css

@@ -0,0 +1,150 @@
+body > .splash-loader {
+  z-index: 10000000;
+}
+
+.splash-loader {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  color: #000;
+  z-index: 3;
+}
+
+.splash-loader .section {
+  height: 100%;
+  width: 100%;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.splash-loader.show {
+  display: flex !important;
+}
+
+.splash-loader .text {
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.splash-loader .text .con-button {
+  display: none;
+}
+
+.progress-holder {
+  width: 100%;
+}
+
+.hide-splash-overflow {
+  overflow: hidden;
+}
+
+.progress-holder .spectrum-ProgressBar {
+	position: relative;
+	display: inline-flex;
+	flex-flow: row wrap;
+	justify-content: space-between;
+	align-items: center;
+	font-size: 15px;
+	vertical-align: top;
+	inline-size: 192px;
+  width: 100%;
+}
+
+.progress-holder .spectrum-ProgressBar .spectrum-ProgressBar-label,
+.progress-holder .spectrum-ProgressBar .spectrum-ProgressBar-percentage {
+		text-align: start;
+		color: rgba(34,34,34);
+	}
+
+.progress-holder .spectrum-ProgressBar .spectrum-ProgressBar-label {
+  display: none;
+}
+
+.progress-holder .spectrum-ProgressBar .spectrum-ProgressBar-percentage {
+		align-self: flex-start;
+		margin-inline-start: 5px;
+}
+
+.progress-holder .spectrum-ProgressBar .spectrum-ProgressBar-track {
+		overflow: hidden;
+		inline-size: 100%;
+		block-size: 8px;
+		border-radius: 5px;
+		background: rgba(213,213,213);
+}
+
+.progress-holder .spectrum-ProgressBar .spectrum-ProgressBar-fill {
+		border: none;
+		block-size: 8px;
+		transition: width 1s;
+		background: #FA0F00;
+}
+
+.progress-holder .spectrum-ProgressBar--sideLabel {
+	display: inline-flex;
+	flex-flow: row;
+	justify-content: space-between;
+}
+
+.progress-holder .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track {
+  flex: 1 1 10px;
+}
+
+.progress-holder .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label {
+  flex-grow: 0;
+  margin-inline-end: 12px;
+  margin-block-end: 0;
+}
+
+.progress-holder .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage {
+  order: 3;
+  text-align: end;
+  margin-inline-start: 12px;
+  font-size: var(--type-body-l-size);
+  line-height: var(--type-body-l-lh);
+  font-weight: 700;
+}
+
+.splash-loader .text .icon-area img,
+.splash-loader .text video {
+  width: 104px;
+  height: auto;
+}
+
+@media screen and (min-width: 600px) {
+  .splash-loader .text .icon-area img,
+  .splash-loader .text video {
+    width: 286px;
+    height: auto;
+  }
+
+  .splash-loader h1,
+  .splash-loader h2,
+  .splash-loader h3,
+  .splash-loader h4,
+  .splash-loader h5 {
+    font-size: var(--type-heading-xl-size);
+    line-height: var(--type-heading-xl-lh);
+    font-weight: 700;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .splash-loader .text .con-button {
+    display: flex;
+  }
+
+  .progress-holder {
+    min-width: 400px;
+  }
+}
+

unitylibs/core/styles/styles.css

@@ -8,7 +8,10 @@
   --animation-blue: #1273E6;
 }
 
-.unity,
+.unity {
+  display: none !important;
+}
+
 .unity-enabled .interactive-area .unity-widget.decorating {
   display: none;
 }
@@ -140,12 +143,12 @@
 }
 
 .unity-enabled .interactive-area .widget-refresh-button svg path,
-.unity-enabled .interactive-area .unity-action-btn .btn-icon svg path {
+.unity-enabled .interactive-area .unity-action-btn:not(.continue-in-app-button) .btn-icon svg path {
   fill: var(--color-white);
 }
 
 .unity-enabled .interactive-area.light .widget-refresh-button svg path,
-.unity-enabled .interactive-area.light .unity-action-btn .btn-icon svg path {
+.unity-enabled .interactive-area.light .unity-action-btn:not(.continue-in-app-button) .btn-icon svg path {
   fill: var(--color-black);
 }