Merge pull request #16 from adobecom/new-swc-test

Adding new spectrum component to milo lib
adobecom · May 24, 2024 · 0691283 · 0691283
2 parents 10c0af0 + 536ac64
commit 0691283
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 82 deletions.
diff --git a/blocks/event-agenda-component/event-agenda-component.js b/blocks/event-agenda-component/event-agenda-component.js
@@ -87,14 +87,6 @@ function decorateCheckBox(row) {
 }
 
 export default async function init(el) {
-  const miloLibs = getLibs();
-
-  await Promise.all([
-    import(`${miloLibs}/deps/lit-all.min.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/textfield.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/checkbox.js`),
-  ]);
-
   el.classList.add('form-component');
   generateToolTip(el);
   const rows = [...el.querySelectorAll(':scope > div')];

diff --git a/blocks/event-community-link-component/event-community-link-component.js b/blocks/event-community-link-component/event-community-link-component.js
@@ -48,14 +48,6 @@ async function decorateFields(row) {
 }
 
 export default async function init(el) {
-  const miloLibs = getLibs();
-
-  await Promise.all([
-    import(`${miloLibs}/deps/lit-all.min.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/textfield.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/checkbox.js`),
-  ]);
-
   el.classList.add('form-component');
   generateToolTip(el);
   const rows = [...el.querySelectorAll(':scope > div')];

diff --git a/blocks/event-format-component/event-format-component.js b/blocks/event-format-component/event-format-component.js
@@ -1,18 +1,14 @@
 import { getLibs } from '../../scripts/utils.js';
 import { generateToolTip } from '../../utils/utils.js';
-import { getClouds, getSeries } from '../../utils/esp-controller.js';
 
 const { createTag } = await import(`${getLibs()}/utils/utils.js`);
 const { decorateButtons } = await import(`${getLibs()}/utils/decorate.js`);
 
-function buildSelectFromTags(id, wrapper, phText, options) {
-  const option = createTag('option', { value: '', disabled: true, selected: true }, phText);
-  const select = createTag('select', { id, class: 'select-input' });
-
-  select.append(option);
+async function buildPickerFromTags(id, wrapper, phText, options) {
+  const select = createTag('sp-picker', { id, class: 'select-input', size: 'm', label: phText });
 
   options.forEach(([, val]) => {
-    const opt = createTag('option', { value: val.name }, val.title);
+    const opt = createTag('sp-menu-item', { value: val.id }, val.name);
     select.append(opt);
   });
 
@@ -23,24 +19,11 @@ async function decorateCloudTagSelect(column) {
   const buSelectWrapper = createTag('div', { class: 'bu-picker-wrapper' });
   const phText = column.textContent.trim();
 
-  // const clouds = await getClouds();
-
-  // if (!clouds) return;
-
-  // buildSelectFromTags('bu-select-input', buSelectWrapper, phText, Object.entries(clouds));
-
-  const option = createTag('option', { value: '', disabled: true, selected: true }, phText);
-  const select = createTag('select', { id: 'bu-select-input', class: 'select-input' });
-
-  select.append(option);
-
   // FIXME: use correct data source rather than hardcoded values.
-  ['CreativeCloud', 'DX'].forEach((bu) => {
-    const opt = createTag('option', { value: bu }, bu);
-    select.append(opt);
-  });
+  const clouds = [{ id: 'CreativeCloud', name: 'Creative Cloud' }, { id: 'DX', name: 'Experience Cloud' }];
+
+  buildPickerFromTags('bu-select-input', buSelectWrapper, phText, Object.entries(clouds));
 
-  buSelectWrapper.append(select);
   column.innerHTML = '';
   column.append(buSelectWrapper);
 }
@@ -49,21 +32,10 @@ async function decorateSeriesSelect(column) {
   const seriesSelectWrapper = createTag('div', { class: 'series-picker-wrapper' });
   const phText = column.textContent.trim();
 
-  // TODO: Connect API.
-  const series = await getSeries();
-  if (!series) return;
-
-  const option = createTag('option', { value: '', disabled: true, selected: true }, phText);
-  const select = createTag('select', { id: 'series-select-input', class: 'select-input' });
-
-  select.append(option);
-
-  series.forEach((s) => {
-    const opt = createTag('option', { value: s.seriesId }, s.seriesName);
-    select.append(opt);
-  });
+  // FIXME: use correct data source rather than hardcoded values.
+  const series = [{ id: 'createNow', name: 'Create Now' }, { id: 'series2', name: 'Series 2' }];
 
-  seriesSelectWrapper.append(select);
+  buildPickerFromTags('series-select-input', seriesSelectWrapper, phText, Object.entries(series));
 
   column.innerHTML = '';
   column.append(seriesSelectWrapper);
@@ -113,7 +85,7 @@ async function decorateNewSeriesModal(column) {
 
       if (!resp.error) {
         const clouds = resp.namespaces.caas.tags['business-unit'].tags;
-        buildSelectFromTags('series-select-modal-input', buSelectWrapper, phText, Object.entries(clouds));
+        buildPickerFromTags(buSelectWrapper, phText, Object.entries(clouds));
       }
     }
 

diff --git a/blocks/event-materials-component/event-materials-component.js b/blocks/event-materials-component/event-materials-component.js
@@ -4,12 +4,6 @@ import { getIcon, generateToolTip } from '../../utils/utils.js';
 const { createTag } = await import(`${getLibs()}/utils/utils.js`);
 
 async function decorateSWCTextField(row, extraOptions) {
-  const miloLibs = getLibs();
-  await Promise.all([
-    import(`${miloLibs}/deps/lit-all.min.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/textfield.js`),
-  ]);
-
   row.classList.add('text-field-row');
 
   const cols = row.querySelectorAll(':scope > div');

diff --git a/blocks/form-handler/form-handler.js b/blocks/form-handler/form-handler.js
@@ -26,6 +26,14 @@ const INPUT_TYPES = [
   'sp-checkbox[required]',
 ];
 
+const SPECTRUM_COMPONENTS = [
+  'theme',
+  'textfield',
+  'picker',
+  'menu',
+  'checkbox',
+];
+
 async function initComponents(props) {
   const queryString = window.location.search;
   const urlParams = new URLSearchParams(queryString);
@@ -420,10 +428,12 @@ async function buildECCForm(el) {
 export default async function init(el) {
   el.style.display = 'none';
   const miloLibs = getLibs();
+  const promises = Array.from(SPECTRUM_COMPONENTS).map(async (component) => {
+    await import(`${miloLibs}/features/spectrum-web-components/dist/${component}.js`);
+  });
   await Promise.all([
     import(`${miloLibs}/deps/lit-all.min.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/theme.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/textfield.js`),
+    ...promises,
   ]);
 
   const profile = window.bm8tr.get('imsProfile');

diff --git a/blocks/registration-details-component/registration-details-component.js b/blocks/registration-details-component/registration-details-component.js
@@ -75,13 +75,6 @@ function decorateAllCheckboxes(el) {
 }
 
 export default async function init(el) {
-  const miloLibs = getLibs();
-  await Promise.all([
-    import(`${miloLibs}/deps/lit-all.min.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/textfield.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/checkbox.js`),
-  ]);
-
   el.classList.add('form-component');
   decorateAllCheckboxes(el);
 

diff --git a/blocks/registration-fields-component/registration-fields-component.js b/blocks/registration-fields-component/registration-fields-component.js
@@ -68,12 +68,6 @@ function decorateRSVPFields(row) {
 }
 
 export default async function init(el) {
-  const miloLibs = getLibs();
-  await Promise.all([
-    import(`${miloLibs}/deps/lit-all.min.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/checkbox.js`),
-  ]);
-
   el.classList.add('form-component');
   generateToolTip(el.querySelector(':scope > div:first-of-type'));
   decorateRSVPFields(el.querySelector(':scope > div:last-of-type'));

diff --git a/blocks/venue-info-component/venue-info-component.js b/blocks/venue-info-component/venue-info-component.js
@@ -120,12 +120,6 @@ function buildLocationInputGrid(row) {
 
 export default function init(el) {
   el.classList.add('form-component');
-  const miloLibs = getLibs();
-  Promise.all([
-    import(`${miloLibs}/deps/lit-all.min.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/textfield.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/checkbox.js`),
-  ]);
 
   const rows = el.querySelectorAll(':scope > div');
   rows.forEach((r, i) => {

diff --git a/scripts/utils.js b/scripts/utils.js
@@ -29,7 +29,7 @@ export const [setLibs, getLibs] = (() => {
       libs = (() => {
         const { hostname, search } = location || window.location;
         if (!(hostname.includes('.hlx.') || hostname.includes('local'))) return prodLibs;
-        const branch = new URLSearchParams(search).get('milolibs') || 'main';
+        const branch = new URLSearchParams(search).get('milolibs') || 'ecc';
         if (branch === 'local') return 'http://localhost:6456/libs';
         return branch.includes('--') ? `https://${branch}.hlx.live/libs` : `https://${branch}--milo--adobecom.hlx.live/libs`;
       })();