Decap Custom Widgets for USWDS Components

README.md

These below snippets go into admin/main.js

button-link.js

CMS.registerEditorComponent({
  // Internal id of the component
  id: "button-link",
  // Visible label
  label: "Button link",
  // Fields the user need to fill out when adding an instance of the component
  fields: [
    {
      name: "text",
      label: "Text",
      widget: "string",
    },
    {
      name: "href",
      label: "URL",
      widget: "string",
    },
  ],
  pattern: /<a class="usa-button" href="(.*?)">(.*?)<\/a>/ms,
  fromBlock: function (match) {
    return {
      href: match[1],
      text: match[2],
    };
  },
  toBlock: function (data) {
    return `<a class="usa-button" href="${data.href}">${data.text}</a>`;
  },
  toPreview: function (data) {
    return `<a class="usa-button" href="${data.href}">${data.text}</a>`;
  },
});

usa-accordion.js

// DRAFT
// This is for the USWDS Accordion component https://designsystem.digital.gov/components/accordion/
// This version is not accessible yet; I haven't set up the aria-controls and aria-expanded for this yet
// 
// There are two approaches I'm considering
// 1. having this in a web component, so it can create its own association
// 2. having Decap generate a uuid to connect aria-controls

function toBlock(data) {
  return `<div class="usa-accordion"><div class="usa-accordion__heading"><button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="a1">${data.summary}</button></div><div id="a1" class="usa-accordion__content usa-prose">\n\n${data.contents}\n\n</div></div>`;
}

const pattern = RegExp(
  `<div class="usa-accordion"><div class="usa-accordion__heading"><button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="a1">(.*?)</button></div><div id="a1" class="usa-accordion__content usa-prose">\n\n(.*?)\n\n</div></div>`,
  "ms",
);

CMS.registerEditorComponent({
  id: "uswds-accordion",
  label: "USWDS Accordion",
  fields: [
    {
      name: "summary",
      label: "Summary",
      widget: "string",
    },
    {
      name: "contents",
      label: "Contents",
      widget: "markdown",
    },
  ],
  pattern: pattern,
  fromBlock: function (match) {
    return {
      summary: match[1],
      contents: match[2],
    };
  },
  toBlock: (data) => {
    return toBlock(data);
  },
  toPreview: (data) => {
    return toBlock(data);
  },
});