@luigisbox/luma 0.7.1 → 0.8.0-beta.0

package/src/widgets/convo/template-convo-preview.ts

@@ -0,0 +1,37 @@
+import { html, nothing, repeat } from '../../lit';
+import type { ConvoAction, ConvoPreviewScope } from '../../types';
+import { avatar, icon } from './icons';
+
+const NONE: ConvoAction[] = [];
+
+// The search page's box (`convo.assist`): the assistant's answer to the query
+// above the results, as it streams in: its first lines (fading out), three of
+// its products, its suggestions; "Continue with the assistant" opens the
+// panel with this conversation, a suggestion its next turn.
+export default (s: ConvoPreviewScope) => {
+  const text = s.blocks.find((b) => b.type === 'text');
+  const list = s.blocks.find((b) => Array.isArray(b.products));
+  const rs = list ? s.products(list).slice(0, 3) : [];
+  const chips = s.done ? (s.blocks.find((b) => b.type === 'suggestions')?.actions ?? NONE).filter((a: ConvoAction) => a.action_ref).slice(0, 3) : NONE;
+  return html`
+    <section class="lbx-cv__pv" aria-labelledby="lbx-cv-pv-title" aria-busy=${s.done ? 'false' : 'true'}>
+      <header class="lbx-cv__pv-head">
+        ${avatar}
+        <div class="lbx-cv__titles">
+          <h2 id="lbx-cv-pv-title">${s.t('title')}</h2>
+          <p>${s.t('disclaimer')}</p>
+        </div>
+      </header>
+      <div class="lbx-cv__pv-text lbx-cv__text">${text ? s.md(text.text) : html`<p class="lbx-cv__wait">${s.t('thinking')}</p>`}</div>
+      ${rs.length
+        ? html`<ul class="lbx-cv__list lbx-cv__pv-products" data-lbx-list>
+            ${repeat(rs, (r) => r.id, (r, i) => html`<li>${s.include('convo-result-default', { r, i, actions: NONE })}</li>`)}
+          </ul>`
+        : nothing}
+      <div class="lbx-cv__pv-foot">
+        ${chips.length ? html`<div class="lbx-cv__chips">${chips.map((a: ConvoAction) => html`<button type="button" class="lbx-cv__chip" @click=${(e: Event) => s.open(a, e.currentTarget as Element)}>${a.label}</button>`)}</div>` : nothing}
+        <button type="button" class="lbx-cv__continue" @click=${(e: Event) => s.open(undefined, e.currentTarget as Element)}>${icon('M5 12h14M13 6l6 6-6 6')}${s.t('continue')}</button>
+      </div>
+    </section>
+  `;
+};

package/src/widgets/convo/template-convo-result-default.ts

@@ -0,0 +1,13 @@
+import { html, nothing } from '../../lit';
+import type { ConvoResultScope } from '../../types';
+
+export default ({ r, i, img, plain, price, actions, act }: ConvoResultScope) => html`
+  <a class="lbx-cv__tile" href=${r.c.url}>
+    ${r.c.image ? img(r, i, { sizes: '64px' }) : html`<span class="lbx-img"></span>`}
+    <span class="lbx-cv__info">
+      <span class="lbx-cv__title">${plain(r.c.title)}</span>
+      ${r.c.price ? html`<span class="lbx-cv__price">${price(r.c.price) || plain(r.c.price)}</span>` : nothing}
+    </span>
+  </a>
+  ${actions.map((a) => (a.action_ref ? html`<button type="button" class="lbx-cv__more" aria-label=${`${a.label}: ${plain(r.c.title)}`} @click=${() => act(a)}>${a.label}</button>` : nothing))}
+`;

package/src/widgets/convo/trigger.ts

@@ -0,0 +1,44 @@
+// Luma's sparkle in the site's search field (`convo.trigger`): a button that
+// opens the panel with the phrase typed (main.ts's click listener, which
+// knows it by identity: `created`). In lbx-place with the reconciler that
+// places it (build/vite.mjs), loaded at boot on the pages with it: it waits
+// for the anchor's framework to hydrate, is put back when the host re-renders
+// the field, and stays out of Turbo's snapshots (data-turbo-temporary).
+
+import { addRule } from '../../core/reconciler';
+import { created } from '../../core/own';
+import { schedule } from '../../core/scheduler';
+import { layered, setCss } from '../../core/styles';
+import type { ConvoConfigType, GlobalConfigType } from '../../types';
+
+export const place = (tr: NonNullable<ConvoConfigType['trigger']>, g: GlobalConfigType) => {
+  const b = document.createElement('button');
+  b.type = 'button';
+  b.className = 'lbx-cv-trigger';
+  b.setAttribute('data-lbx', 'convo-trigger');
+  b.setAttribute('data-lbx-convo', '');
+  // Its name too (its only content is an aria-hidden icon), in the site's language where Luma has it.
+  b.title = tr.label ?? ({ cs: 'Zeptat se nákupního asistenta', de: 'Den Einkaufsassistenten fragen' } as Record<string, string>)[(g.locale ?? 'en').split('-')[0]] ?? 'Ask the shopping assistant';
+  created.add(b);
+  // A sparkle (elements, not markup: Trusted Types).
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('aria-hidden', 'true');
+  path.setAttribute('d', 'M10 3l1.6 4.4L16 9l-4.4 1.6L10 15l-1.6-4.4L4 9l4.4-1.6zM18 13l.9 2.1L21 16l-2.1.9L18 19l-.9-2.1L15 16l2.1-.9z');
+  path.setAttribute('fill', 'currentColor');
+  svg.append(path);
+  b.append(svg);
+  // In @layer lbx: the integration's style-host.css (applied by the entry at boot, before it is
+  // placed) lays it over the field; in flow by default, never over the site's own controls. Its
+  // focus ring !important (a site's reset of outlines loses to it).
+  setCss(
+    'convo:trigger',
+    layered(
+      '.lbx-cv-trigger{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:32px;height:32px;padding:0;border:1px solid;border-radius:50%;background:none;color:inherit;cursor:pointer}.lbx-cv-trigger svg{width:18px;height:18px}' +
+        '.lbx-cv-trigger:focus-visible{outline:2px solid!important;outline-offset:2px!important}@media (forced-colors:active){.lbx-cv-trigger:focus-visible{outline:3px solid Highlight!important}}',
+    ),
+  );
+  addRule({ id: 'convo-trigger', active: () => true, anchors: [tr.anchor], position: tr.position ?? 'append', create: () => b });
+  schedule();
+};