DA Floodgate Copy UI (#3395)

* DA Floodgate Copy UI  * UI for the copy option Resolves: [MWPW-161908](https://jira.corp.adobe.com/browse/MWPW-161908) * fix for copy error list color * pr feedback * more pr feedback about fragments and assets
adobecom · Dec 19, 2024 · e272c1a · e272c1a
1 parent 28c529d
commit e272c1a
Show file tree

Hide file tree

Showing 4 changed files with 281 additions and 93 deletions.
diff --git a/tools/floodbox/floodbox.css b/tools/floodbox/floodbox.css
@@ -52,6 +52,14 @@ input[type='text'] {
   width: 100%;
 }
 
+input[type="checkbox"] {
+  display: block;
+  margin: 0;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+}
+
 textarea {
   width: 100%;
   min-height: 240px;
@@ -124,20 +132,25 @@ select {
   padding: var(--spacing-400);
 }
 
-.detail-card-remaining {
+.detail-card-remaining,
+.detail-card-fragments-assets {
   background: rgb(202 248 250);
 }
 
-.detail-card-total {
+.detail-card-total,
+.detail-card-pages {
   background: rgb(181 230 252);
 }
 
+.detail-card-errors,
 .detail-card-promote-errors,
 .detail-card-preview-errors,
 .detail-card-publish-errors,
+.detail-card-copy-errors,
 .url-list.url-list-promote-errors,
 .url-list.url-list-preview-errors,
-.url-list.url-list-publish-errors {
+.url-list.url-list-publish-errors,
+.url-list.url-list-copy-errors {
   background: rgb(255 214 209);
 }
 
@@ -150,6 +163,10 @@ select {
   background: rgb(255 236 209);
 }
 
+.detail-card-sheets {
+  background: #caffa4;
+}
+
 .detail-card .cancel-button {
   margin: 0;
   padding: 0;
@@ -185,6 +202,14 @@ select {
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 }
 
+.detail-cards.find-cards {
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+}
+
+.detail-cards.copy-preview-cards {
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
 .toggle-list-icon, .icon-button {
   display: block;
   border: 0;
@@ -229,6 +254,73 @@ select {
   display: block;
 }
 
+.tab-ui {
+  margin: var(--spacing-400) 0;
+}
+
+.tab-nav {
+  display: flex;
+  list-style-type: none;
+  padding: 5px;
+}
+
+.tab-nav li button{
+  opacity: 0.6;
+}
+
+.tab-nav li.active button{
+  opacity: 1;
+}
+
+.tab-nav li button[disabled]::before {
+  background: rgb(0 0 0 / 5%);
+  border: 1px solid rgb(0 0 0 / 50%);
+}
+
+.tabs {
+  background-color: var(--s2-gray-50);
+  padding: 20px;
+  border: 1px solid var(--s2-gray-200);
+}
+
+.tab-step {
+  display: none;
+}
+
+.tab-step.active {
+  display: block;
+}
+
+.ribbon {
+  --r: .8em;
+
+  padding-inline: calc(var(--r) + 1.5em);
+  line-height: 1.8;
+  clip-path: polygon(0 0,90% 0,100% 50%,90% 100%,0 100%, var(--r) 50%);
+  background: var(--s2-blue-800);
+  font-size: var(--s2-font-size-400);
+  font-weight: bold;
+  color: #fff;
+  border: none;
+  text-wrap: nowrap;
+}
+
+.ribbon:disabled {
+  color: var(--s2-gray-800);
+}
+
+.info-box {
+  background: var(--s2-gray-75);
+  border-radius: var(--s2-radius-100);
+  padding: var(--spacing-100) var(--spacing-400);
+  margin-top: var(--spacing-400);
+}
+
+.info-box p {
+  margin-top: var(--spacing-50);
+  margin-bottom: var(--spacing-50);
+}
+
 .url-list {
   display: none;
   background: rgb(215 247 225);
@@ -265,10 +357,6 @@ select {
   gap: 24px;
 }
 
-.urls-result li:last-child {
-  margin: 0;
-}
-
 .url-path {
   white-space: nowrap;
   overflow-x: hidden;
@@ -285,69 +373,70 @@ select {
   user-select: none;
 }
 
-.tab-ui {
-  margin: var(--spacing-400) 0;
+.url-checklist {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  border: 1px solid rgb(209 209 209);
+  border-radius: 18px;
+  overflow: hidden;
+  background: rgb(248 248 248);
 }
 
-.tab-nav {
+.url-checklist li {
+  margin-top: -1px;
+  margin-bottom: -1px;
+  padding: 24px;
   display: flex;
-  list-style-type: none;
-  padding: 5px;
-}
-
-.tab-nav li button{
-  opacity: 0.6;
-}
-
-.tab-nav li.active button{
-  opacity: 1;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+  border-top: 1px solid rgb(209 209 209);
+  border-bottom: 1px solid rgb(209 209 209);
 }
 
-.tab-nav li button[disabled]::before {
-  background: rgb(0 0 0 / 5%);
-  border: 1px solid rgb(0 0 0 / 50%);
+.url-checklist li:hover {
+  background: rgb(228 240 255);
+  border-top: 1px solid rgb(20 122 243);
+  border-bottom: 1px solid rgb(20 122 243);
 }
 
-.tabs {
-  background-color: var(--s2-gray-50);
-  padding: 20px;
-  border: 1px solid var(--s2-gray-200);
-}
-
-.tab-step {
-  display: none;
+.path {
+  color: var(--s2-gray-800);
+  text-decoration: none;
+  flex: 1 1 auto;
+  word-break: break-all;
 }
 
-.tab-step.active {
-  display: block;
+.status {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 700;
+  border-radius: var(--s2-radius-200);
+  text-align: center;
+  color: #FFF;
+  text-transform: uppercase;
+  width: 72px;
+  padding: 4px 0;
 }
 
-.ribbon {
-  --r: .8em;
-
-  padding-inline: calc(var(--r) + 1.5em);
-  line-height: 1.8;
-  clip-path: polygon(0 0,90% 0,100% 50%,90% 100%,0 100%, var(--r) 50%);
-  background: var(--s2-blue-800);
-  font-size: var(--s2-font-size-400);
-  font-weight: bold;
-  color: #fff;
-  border: none;
-  text-wrap: nowrap;
+.status-ready {
+  background: var(--s2-green);
 }
 
-.ribbon:disabled {
-  color: var(--s2-gray-800);
+.status-error {
+  background: var(--s2-red);
 }
 
-.info-box {
-  background: var(--s2-gray-75);
-  border-radius: var(--s2-radius-100);
-  padding: var(--spacing-100) var(--spacing-400);
-  margin-top: var(--spacing-400);
+.urls-result li:last-child {
+  margin: 0;
 }
 
-.info-box p {
-  margin-top: var(--spacing-50);
-  margin-bottom: var(--spacing-50);
+@media (width > 600px) {
+  .url-checklist li {
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
 }
diff --git a/tools/floodbox/floodbox.js b/tools/floodbox/floodbox.js
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-unresolved, no-underscore-dangle, class-methods-use-this */
 import { html, nothing } from 'https://da.live/deps/lit/dist/index.js';
 
-export function handleToggleList(e) {
+function handleToggleList(e) {
   const card = e.target.closest('.detail-card');
   const { name } = e.target.closest('button').dataset;
   const list = this.shadowRoot.querySelector(`.url-list-${name}`);
@@ -16,16 +16,22 @@ export function handleToggleList(e) {
   list.classList.add('is-expanded');
 }
 
-export function handleClear(event) {
+function handleClear(event) {
   event.preventDefault();
   const field = event.target.closest('button').previousElementSibling;
   field.value = '';
   this._canPromote = false;
+  this._repoReady = false;
   this._gbExpPath = '';
   this.requestUpdate();
 }
 
-export function updateTabUi(app, target, delay = 0) {
+function handleCheck(app, url) {
+  url.checked = !url.checked;
+  app.urls = [...app.urls];
+}
+
+function updateTabUi(app, target, delay = 0) {
   setTimeout(() => {
     const tabNav = app.shadowRoot.querySelectorAll('.tab-nav li');
     const tabs = app.shadowRoot.querySelectorAll('.tab-step');
@@ -38,8 +44,8 @@ export function updateTabUi(app, target, delay = 0) {
   }, delay);
 }
 
-export function renderBadge(name, length, hasList = false, hasCancel = false) {
-  const lowerName = name.toLowerCase().replace(/ /g, '-');
+function renderBadge(name, length, hasList = false, hasCancel = false) {
+  const lowerName = name.toLowerCase().replace(/\W+/g, '-');
   const hasExpand = length > 0 && hasList;
 
   return html`
@@ -59,7 +65,7 @@ export function renderBadge(name, length, hasList = false, hasCancel = false) {
     </div>`;
 }
 
-export function renderList(name, urls) {
+function renderList(name, urls) {
   const lowerName = name.toLowerCase().replace(/ /g, '-');
 
   return html`
@@ -79,11 +85,23 @@ export function renderList(name, urls) {
   `;
 }
 
-export function renderClearButton() {
+function renderChecklist(app, urls) {
+  return html`
+    <ul class="url-checklist">
+      ${urls ? urls.map((url) => html`
+        <li>
+          <div class="path">${url}</div>
+        </li>
+      `) : nothing}
+    </ul>
+  `;
+}
+
+function renderClearButton() {
   return html`<button class="icon-button clear-button" @click=${this.handleClear}><svg class="icon"><use href="#spectrum-close"/></svg></button>`;
 }
 
-export function renderTabNav(app, config) {
+function renderTabNav(app, config) {
   return html`
     <ul class="tab-nav">
       ${config.map((step, index) => html`
@@ -94,3 +112,15 @@ export function renderTabNav(app, config) {
     </ul>
   `;
 }
+
+export {
+  handleToggleList,
+  handleClear,
+  handleCheck,
+  updateTabUi,
+  renderBadge,
+  renderList,
+  renderChecklist,
+  renderClearButton,
+  renderTabNav,
+};
diff --git a/tools/floodbox/floodgate/floodgate.css b/tools/floodbox/floodgate/floodgate.css
@@ -3,7 +3,16 @@ body {
   margin: 0 var(--spacing-1000);
 }
 
-/* CHANGE ME TO SOMETHING ELSE WHEN WE FIGURE OUT WHERE TO PUT THIS INFORMATION */
-/* .button-row span {
+.repo-row {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 var(--spacing-200) var(--spacing-400);
+}
+
+.repo-row p {
+  margin: 0;
+}
+
+.repo-row span {
   text-transform: uppercase;
-} */
+}