Unable to pass args to social media pattern with RPC

[justintemps]

This is currently blocking #1216 in the DS repo.

Using Cypress tests in the Design System, I'm unable to render a page with the pattern preview of the socialmedia component with the arguments I supplied to it.

I start with this object

{
  headline: "Follow us on social media",
  icons: [
    {
      icon: "twitter",
      label: "twitter",
      url: "https://x.com/ilo",
    },
    {
      icon: "facebook",
      label: "facebook",
      url: "https://facebook.com/ilo",
    },
  ],
  theme: "light",
  justify: "start",
  iconSize: "normal",
}

Then I url encode it like this:

const url = `/pattern-preview?id=socialmedia&fields=${encodeURI(
  JSON.stringify(socialmedia)
)}`;

And I get this url:

/pattern-preview?id=socialmedia&fields=%7B%22headline%22:%22Follow%20us%20on%20social%20media%22,%22icons%22:%5B%7B%22icon%22:%22twitter%22,%22label%22:%22twitter%22,%22url%22:%22https://x.com/ilo%22%7D%5D,%22theme%22:%22light%22,%22justify%22:%22start%22,%22iconSize%22:%22normal%22%7D

But all I get is this:

[ademarco]

hello @justintemps, settings would need to be wrapped in "settings": {}, try the value below (as per README):

{
  headline: "Follow us on social media",
  icons: [
    {
      icon: "twitter",
      label: "twitter",
      url: "https://x.com/ilo",
    },
    {
      icon: "facebook",
      label: "facebook",
      url: "https://facebook.com/ilo",
    },
  ],
  settings: {
    theme: "light",
    justify: "start",
    iconSize: "normal",
  }
}