Placeholder and icon updates

adobecom · Sep 19, 2024 · 2b48609 · 2b48609
1 parent 1e18f8f
commit 2b48609
Show file tree

Hide file tree

Showing 12 changed files with 172 additions and 98 deletions.
diff --git a/acrobat/blocks/prompt-card/prompt-card.css b/acrobat/blocks/prompt-card/prompt-card.css
@@ -154,5 +154,5 @@
   position: relative;
   top: 5px;
   width: 18px;
-  margin-inline-start: 5px
+  margin-inline-start: 8px
 }
diff --git a/acrobat/blocks/prompt-card/prompt-card.js b/acrobat/blocks/prompt-card/prompt-card.js
@@ -4,11 +4,27 @@ const miloLibs = setLibs('/libs');
 const { createTag } = await import(`${miloLibs}/utils/utils.js`);
 
 const classToastShow = 'prompt-toast--show';
+const getPlaceHolder = (x) => (window.mph?.[x] || x);
 
 async function createBlock(element, cfg) {
-  const blade = createTag('div', { class: 'prompt-blade' });
+  cfg.icon = cfg.icon || '/acrobat/img/icons/aichat.svg';
+  cfg.button = cfg.button || getPlaceHolder('Copy');
+  cfg.toast = cfg.toast || getPlaceHolder('Copied to clipboard');
+  const blade = createTag('div', {
+    class: 'prompt-blade',
+    title: cfg.prompt,
+    'data-toast': 'Copied to clipboard',
+    'daa-im': true,
+    'daa-lh': 'Featured prompts | Executive summary',
+  });
   const prefix = createTag('div', { class: 'prompt-prefix' });
-  const icon = createTag('img', { class: 'prompt-icon', src: `/acrobat/img/icons/${cfg.icon}`, width: 18, height: 18 });
+  const icon = createTag('img', {
+    class: 'prompt-icon',
+    alt: 'AI Assistant Icon',
+    src: cfg.icon,
+    width: 18,
+    height: 18,
+  });
   const title = createTag('div', { class: 'prompt-title' }, cfg.title);
   const copy = createTag('div', { class: 'prompt-copy' }, cfg.prompt);
   const prompt = createTag('input', { id: 'prompt', value: cfg.prompt });

diff --git a/test/blocks/prompt-card/mocks/body-block-icon.html b/test/blocks/prompt-card/mocks/body-block-icon.html
@@ -0,0 +1,28 @@
+<main>
+  <div class="prompt-card">
+    <div>
+      <div>Icon</div>
+      <div><a href="/dc-shared/assets/images/frictionless/verb-footer-images/word-to-pdf.svg">https://main--dc--adobecom.hlx.live/dc-shared/assets/images/frictionless/verb-footer-images/word-to-pdf.svg</a></div>
+    </div>
+    <div>
+      <div>Prefix</div>
+      <div>Ask</div>
+    </div>
+    <div>
+      <div>Title</div>
+      <div>Sum it up</div>
+    </div>
+    <div>
+      <div>Prompt</div>
+      <div>Summarize this document in 3 sentences.</div>
+    </div>
+    <div>
+      <div>Button</div>
+      <div>Copy</div>
+    </div>
+    <div>
+      <div>Toast</div>
+      <div>Copied to clipboard</div>
+    </div>
+  </div>
+</main>
diff --git a/test/blocks/prompt-card/mocks/body-block.html b/test/blocks/prompt-card/mocks/body-block.html
@@ -1,9 +1,5 @@
 <main>
   <div class="prompt-card">
-    <div>
-      <div>Icon</div>
-      <div>aichat.svg</div>
-    </div>
     <div>
       <div>Prefix</div>
       <div>Ask</div>

diff --git a/test/blocks/prompt-card/mocks/body-group-placeholder.html b/test/blocks/prompt-card/mocks/body-group-placeholder.html
@@ -0,0 +1,52 @@
+<main>
+  <div>
+    <div class="prompt-card template">
+      <div>
+        <div>Prefix</div>
+        <div>{{Ask}}</div>
+      </div>    
+    </div>
+  </div>
+  <div>
+    <div class="prompt-card group">
+      <div>
+        <div>Title</div>
+        <div>Prompt</div>
+      </div>
+      <div>
+        <div>Sum it up</div>
+        <div>Summarize this document in 3 sentences.</div>
+      </div>
+      <div>
+        <div>Organize your thoughts</div>
+        <div>Suggest a few essay topics based on this reading that can help me get started.</div>
+      </div>
+      <div>
+        <div>Refresh your memory.</div>
+        <div>Provide 10 sample test questions that my professor could ask me.</div>
+      </div>
+      <div>
+        <div>Point out tech advantages</div>
+        <div>What are the key benefits for users of this proposed technology solution?</div>
+      </div>
+      <div>
+        <div>Point out tech advantages</div>
+        <div>What are the key benefits for users of this proposed technology solution?</div>
+      </div>
+      <div>
+        <div>Shorten up the intro</div>
+        <div>Rewrite the introduction so it has only 200 words and a Flesch reading score above 50.</div>
+      </div>
+    </div>
+    <div class="section-metadata">
+      <div>
+        <div>style</div>
+        <div>Four up, xl-spacing</div>
+      </div>
+      <div>
+        <div>background</div>
+        <div>#f8f8f8</div>
+      </div>
+    </div>
+  </div>
+</main>
diff --git a/test/blocks/prompt-card/mocks/body-group.html b/test/blocks/prompt-card/mocks/body-group.html
@@ -1,22 +1,10 @@
 <main>
   <div>
     <div class="prompt-card template">
-      <div>
-        <div>Icon</div>
-        <div>aichat.svg</div>
-      </div>
       <div>
         <div>Prefix</div>
         <div>Ask</div>
-      </div>
-      <div>
-        <div>Button</div>
-        <div>Copy</div>
-      </div>        
-      <div>
-        <div>Toast</div>
-        <div>Copied to Clipboard!</div>
-      </div>      
+      </div>    
     </div>
   </div>
   <div>

diff --git a/test/blocks/prompt-card/mocks/body-section.html b/test/blocks/prompt-card/mocks/body-section.html
@@ -1,18 +1,6 @@
 <main>
   <div>
     <div class="prompt-card">
-      <div>
-        <div>Icon</div>
-        <div>aichat.svg</div>
-      </div>
-      <div>
-        <div>Button</div>
-        <div>Copy</div>
-      </div>
-      <div>
-        <div>Toast</div>
-        <div>Copied to Clipboard</div>
-      </div>
       <div>
         <div>Prefix</div>
         <div>Ask</div>
@@ -27,17 +15,13 @@
       </div>
     </div>
     <div class="prompt-card">
-      <div>
-        <div>Icon</div>
-        <div>aichat.svg</div>
-      </div>
       <div>
         <div>Button</div>
-        <div>Copy</div>
+        <div>My Copy</div>
       </div>
       <div>
         <div>Toast</div>
-        <div>Copied to Clipboard</div>
+        <div>My Copied to Clipboard</div>
       </div>
       <div>
         <div>Prefix</div>
@@ -53,18 +37,6 @@
       </div>
     </div>
     <div class="prompt-card">
-      <div>
-        <div>Icon</div>
-        <div>aichat.svg</div>
-      </div>
-      <div>
-        <div>Button</div>
-        <div>Copy</div>
-      </div>
-      <div>
-        <div>Toast</div>
-        <div>Copied to Clipboard</div>
-      </div>
       <div>
         <div>Prefix</div>
         <div>Brainstorm</div>
@@ -79,18 +51,6 @@
       </div>
     </div>
     <div class="prompt-card">
-      <div>
-        <div>Icon</div>
-        <div>aichat.svg</div>
-      </div>
-      <div>
-        <div>Button</div>
-        <div>Copy</div>
-      </div>
-      <div>
-        <div>Toast</div>
-        <div>Copied to Clipboard</div>
-      </div>
       <div>
         <div>Prefix</div>
         <div>Analyze</div>
@@ -105,18 +65,6 @@
       </div>
     </div>
     <div class="prompt-card">
-      <div>
-        <div>Icon</div>
-        <div>aichat.svg</div>
-      </div>
-      <div>
-        <div>Button</div>
-        <div>Copy</div>
-      </div>
-      <div>
-        <div>Toast</div>
-        <div>Copied to Clipboard</div>
-      </div>
       <div>
         <div>Prefix</div>
         <div>Modify</div>

diff --git a/test/blocks/prompt-card/mocks/body-template-group.html b/test/blocks/prompt-card/mocks/body-template-group.html
@@ -1,22 +1,10 @@
 <main>
   <div>
     <div class="prompt-card template group">
-      <div>
-        <div>Icon</div>
-        <div>aichat.svg</div>
-      </div>
       <div>
         <div>Prefix</div>
         <div>Ask</div>
       </div>
-      <div>
-        <div>Button</div>
-        <div>Copy</div>
-      </div>
-      <div>
-        <div>Toast</div>
-        <div>Copied to Clipboard!</div>
-      </div>
       <div>
         <div></div>
       </div>

diff --git a/test/blocks/prompt-card/mocks/body-template.html b/test/blocks/prompt-card/mocks/body-template.html
@@ -1,22 +1,10 @@
 <main>
   <div>
     <div class="prompt-card template">
-      <div>
-        <div>Icon</div>
-        <div>aichat.svg</div>
-      </div>
       <div>
         <div>Prefix</div>
         <div>Ask</div>
       </div>
-      <div>
-        <div>Button</div>
-        <div>Copy</div>
-      </div>
-      <div>
-        <div>Toast</div>
-        <div>Copied to Clipboard!</div>
-      </div>
     </div>
   </div>
   <div>

diff --git a/test/blocks/prompt-card/mocks/placeholder.json b/test/blocks/prompt-card/mocks/placeholder.json
@@ -0,0 +1,11 @@
+{
+  "total": 2,
+  "offset": 0,
+  "limit": 2,
+  "data": [
+    { "key": "Ask", "value": "聞く"},
+    { "key": "Copy", "value": "コピー" },
+    { "key": "Copied to clipboard", "value": "クリップボードにコピーされました" }
+  ],
+  ":type": "sheet"
+}
diff --git a/test/blocks/prompt-card/prompt-card-group-placeholder.test.js b/test/blocks/prompt-card/prompt-card-group-placeholder.test.js
@@ -0,0 +1,25 @@
+/* eslint-disable compat/compat */
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+import { waitForElement } from '../../helpers/waitfor.js';
+
+describe('prompt-cards in a section using the group feature', () => {
+  before(async () => {
+    const placeholder = await readFile({ path: './mocks/placeholder.json' });
+    sinon.stub(window, 'fetch');
+    const res = new window.Response(placeholder, { status: 200 });
+    window.fetch.returns(Promise.resolve(res));
+    document.head.innerHTML = await readFile({ path: './mocks/head.html' });
+    document.body.innerHTML = await readFile({ path: './mocks/body-group-placeholder.html' });
+    await import('../../../acrobat/scripts/scripts.js');
+    await waitForElement('.prompt-blade');
+  });
+
+  it('shows replaced placeholder text', async () => {
+    const prefix = document.querySelector('.prompt-prefix');
+    expect(prefix.textContent).to.equal('聞く');
+    const button = document.querySelector('.prompt-copy-btn');
+    expect(button.textContent).to.equal('コピー');
+  });
+});
diff --git a/test/blocks/prompt-card/prompt-card-icon.test.js b/test/blocks/prompt-card/prompt-card-icon.test.js
@@ -0,0 +1,34 @@
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+
+const head = await readFile({ path: './mocks/head-block.html' });
+
+const { default: init } = await import(
+  '../../../acrobat/blocks/prompt-card/prompt-card.js'
+);
+
+describe('prompt-card block', () => {
+  let clock;
+
+  before(async () => {
+    document.head.innerHTML = head;
+    document.body.innerHTML = await readFile({ path: './mocks/body-block-icon.html' });
+    const block = document.querySelector('.prompt-card');
+    await init(block);
+  });
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers();
+  });
+
+  afterEach(() => {
+    clock.restore();
+  });
+
+  it('has a customized icon', async () => {
+    const icon = document.querySelector('.prompt-icon');
+    expect(icon).to.be.exist;
+    expect(icon.src).to.contains('word-to-pdf.svg');
+  });
+});