done pending tooltip text and link

pwa-builder · Aug 21, 2023 · c984fe8 · c984fe8
1 parent ce1c307
commit c984fe8
Showing 1 changed file with 31 additions and 0 deletions.
diff --git a/apps/pwabuilder/src/script/components/windows-form.ts b/apps/pwabuilder/src/script/components/windows-form.ts
@@ -12,6 +12,8 @@ import { fetchOrCreateManifest } from '../services/manifest';
 import { AnalyticsBehavior, recordPWABuilderProcessStep } from '../utils/analytics';
 import { ManifestContext, PackageOptions } from '../utils/interfaces';
 
+import "../components/arrow-link";
+
 @customElement('windows-form')
 
 export class WindowsForm extends AppPackageFormBase {
@@ -161,6 +163,25 @@ export class WindowsForm extends AppPackageFormBase {
           background-color: var(--primary-color);
           border-color: var(--primary-color);
         }
+
+        #ai-hub-label {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+        }
+
+        #ai-hub-text {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          justify-content: flex-start;
+        }
+
+        #ai-hub-text p {
+          margin: 0;
+          color: #7f7f7f;
+          font-size: 14px;
+        }
        
     `
     ];
@@ -392,6 +413,16 @@ export class WindowsForm extends AppPackageFormBase {
                   (this.packageOptions.publisher.commonName = val),
               })}
             </div>
+            <div class="form-group" id="ai-hub">
+              <div id="ai-hub-label">
+                <label>Does your app use AI?</label>
+                <info-circle-tooltip text="AI Hub is a new curated section in the Microsoft Store where we will promote the best AI experiences built by the developer community and Microsoft."></info-circle-tooltip>
+              </div>
+              <div id="ai-hub-text">
+                <p>We will promote the best AI expereiences built by the developer community on our Microsoft Store's AI Hub.</p>
+                <arrow-link .text=${"Join Us"} .link=${"https://aka.ms/MicrosoftStoreAIHub"}></arrow-link>
+              </div>
+            </div>
           </div>
           <!-- "all settings" section of the modal -->
           <sl-details @sl-show=${() => this.rotateNinety()} @sl-hide=${() => this.rotateZero()}>