Componentsv2.189.0
Iconsv1.19.0
MCPv0.8.61
Tokensv0.34.3

Banner description prop codemod

Migrates existing Pluma Banner description content to the new explicit description APIs.

Before this change, React children and Ember yielded content were always wrapped in the Banner description paragraph. Banner now renders regular children/yielded content directly in the content area, so existing usages that intend description text should move to description.

Running it

Run it through the Pluma CLI from inside your consuming app:

pnx @customerio/pluma-cli@latest upgrade --codemod banner-description-prop react ./src
pnx @customerio/pluma-cli@latest upgrade --codemod banner-description-prop ember ./app ./addon

Both codemods support dry runs. The React codemod uses jscodeshift flags, so --dry/-d skips writes and -p prints the transformed output:

pnx @customerio/pluma-cli@latest upgrade --codemod banner-description-prop react --dry -p ./src

The Ember codemod has its own --dry flag:

pnx @customerio/pluma-cli@latest upgrade --codemod banner-description-prop ember --dry ./app

What changes

React

<Banner title="Heads up">Description text</Banner>

becomes:

<Banner title="Heads up" description={<>Description text</>} />

Only Banner imports from @customerio/pluma-components, @customerio/pluma-components/react, and @customerio/pluma-components/react/banner are migrated. Usages that already have a description prop are left alone.

Ember

<PlumaBanner @title='Heads up'>Description text</PlumaBanner>

becomes:

<PlumaBanner @title='Heads up'><:description>Description text</:description></PlumaBanner>

The Ember codemod processes .gts, .gjs, and .hbs files. Usages that already have @description or named blocks are left alone.