Dropdown::ListItem::Interactive enhancements (#2347)

Co-authored-by: LilithJames-HDS <lilith.james@hashicorp.com>
Co-authored-by: Heather Larsen <hlarsen@hashicorp.com>
Co-authored-by: Jory Tindall <jory.tindall@hashicorp.com>

.changeset/nice-drinks-do.md

@@ -0,0 +1,13 @@
+---
+"@hashicorp/design-system-codemods": minor
+"@hashicorp/design-system-components": minor
+---
+
+`Dropdown::ListItem::Interactive`
+- Adds a yielded block.
+- Yields the `Hds::Badge` component.
+- Deprecates the `@text` argument.
+
+New codemod: `v4/dropdown-list-item-interactive`
+- Converts `Dropdown::ListItem::Interactive` `@text` arguments to content within a yielded block.
+

packages/codemods/transforms/v4/dropdown-list-item-interactive/README.md

@@ -0,0 +1,35 @@
+# v4/icon
+
+## Usage
+
+To run this codemod in your project using `npx`, you would run the following:
+
+```bash
+npx @hashicorp/design-system-codemods v4/dropdown-list-item-interactive path/to/some/glob/**/*.hbs
+```
+
+## Local usage
+
+To run this codemod in this repository (even before publishing it), you would run the following from the root directory of this repository:
+
+```bash
+node ./packages/codemods/bin/cli.js v4/dropdown-list-item-interactive path/to/some/glob/**/*.hbs
+```
+
+## Input
+
+```hbs
+<Hds::Dropdown as |dd|>
+ <dd.Title @text="Title text" />
+ <dd.Interactive @href="#" @text="Edit" />
+</Hds::Dropdown>
+```
+
+## Output
+
+```hbs
+<Hds::Dropdown as |dd|>
+ <dd.Title @text="Title text" />
+ <dd.Interactive @href="#">Edit</dd.Interactive>
+</Hds::Dropdown>
+```

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/complex-conditional-helper.input.hbs

@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text='Title text' />
+ <dd.Interactive @href='#' @text={{or @text (t "components.generate-service-principal-key-button.default-text")}} />
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/complex-conditional-helper.output.hbs

@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text='Title text' />
+ <dd.Interactive @href='#'>{{or @text (t "components.generate-service-principal-key-button.default-text")}}</dd.Interactive>
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/complex-conditional.input.hbs

@@ -0,0 +1,12 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text='Title text' />
+ <dd.Interactive @href='#' @text={{if
+ this.isRunningStatement
+ (t status.text date=(format-utc-date this.dateToBeCharged))
+ (t status.text)
+ }} />
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/complex-conditional.output.hbs

@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text='Title text' />
+ <dd.Interactive @href='#'>{{if this.isRunningStatement (t status.text date=(format-utc-date this.dateToBeCharged)) (t status.text)}}</dd.Interactive>
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/conditional.input.hbs

@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text="Title text" />
+ <dd.Interactive @href="#" @text={{if this.conditional this.testValue1 this.testValue2}} />
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/conditional.output.hbs

@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text="Title text" />
+ <dd.Interactive @href="#">{{if this.conditional this.testValue1 this.testValue2}}</dd.Interactive>
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/helper.input.hbs

@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text="Title text" />
+ <dd.Interactive @href="#" @text={{test-helper this.value this.value2}} />
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/helper.output.hbs

@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text="Title text" />
+ <dd.Interactive @href="#">{{test-helper this.value this.value2}}</dd.Interactive>
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/mustache-numerical.input.hbs

@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text="Title text" />
+ <dd.Interactive @href="#" @text={{123}} />
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/mustache-numerical.output.hbs

@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text="Title text" />
+ <dd.Interactive @href="#">{{123}}</dd.Interactive>
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/mustache-text.input.hbs

@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text="Title text" />
+ <dd.Interactive @href="#" @text={{"123"}} />
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/mustache-text.output.hbs

@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text="Title text" />
+ <dd.Interactive @href="#">{{"123"}}</dd.Interactive>
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/mustache-value.input.hbs

@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text="Title text" />
+ <dd.Interactive @href="#" @text={{this.testValue.val}} />
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/mustache-value.output.hbs

@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Title @text="Title text" />
+ <dd.Interactive @href="#">{{this.testValue.val}}</dd.Interactive>
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/text.input.hbs

@@ -0,0 +1,7 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Interactive @href="#" @text="Edit" />
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/__testfixtures__/text.output.hbs

@@ -0,0 +1,7 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown as |dd|>
+ <dd.Interactive @href="#">Edit</dd.Interactive>
+</Hds::Dropdown>

packages/codemods/transforms/v4/dropdown-list-item-interactive/index.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const CODEMOD_ANALYSIS = process.env.CODEMOD_ANALYSIS;
+
+module.exports = function ({ source /*, path*/ }, { parse, visit }) {
+ const ast = parse(source);
+
+ return visit(ast, (env) => {
+ let { builders: b } = env.syntax;
+
+ return {
+ ElementNode(node) {
+ if (node.type === 'ElementNode' && node.tag === 'Hds::Dropdown') {
+ let hasUpdatedChildren = false;
+ let processedChildren;
+
+ if (node.blockParams && node.blockParams.length > 0) {
+ const asPrefix = node.blockParams[0];
+
+ processedChildren = [];
+
+ if (node.children) {
+ node.children.forEach((child) => {
+ let updatedChild;
+ let isProcessed = false;
+
+ if (child.type === 'ElementNode' && child.tag === `${asPrefix}.Interactive`) {
+ const textAttr = child.attributes.find((a) => a.name === '@text');
+
+ if (textAttr) {
+ const childOutputAttributes = child.attributes.filter(
+ (a) => a.name !== '@text'
+ );
+
+ const isHandlebarsAttr = textAttr.value.type === 'MustacheStatement';
+
+ let children = [];
+
+ if (isHandlebarsAttr) {
+ if (textAttr.value.path.type === 'NumberLiteral') {
+ children = [b.mustache(b.number(textAttr.value.path.value))];
+ } else if (textAttr.value.path.type === 'StringLiteral') {
+ children = [b.mustache(b.string(textAttr.value.path.value))];
+ } else {
+ children = [
+ b.mustache(
+ textAttr.value.path.original,
+ [...textAttr.value.params],
+ textAttr.value.hash
+ ),
+ ];
+ }
+ } else {
+ children = [b.text(textAttr.value.chars)];
+ }
+
+ updatedChild = b.element(
+ { name: child.tag, selfClosing: false },
+ {
+ children,
+ attrs: childOutputAttributes,
+ modifiers: child.modifiers,
+ blockParams: child.blockParams,
+ }
+ );
+
+ isProcessed = true;
+ } else {
+ updatedChild = child;
+ }
+ }
+
+ processedChildren.push(updatedChild || child);
+ hasUpdatedChildren = hasUpdatedChildren || isProcessed;
+ });
+ }
+ }
+
+ if (hasUpdatedChildren && !CODEMOD_ANALYSIS) {
+ return [
+ b.element(
+ { name: node.tag, selfClosing: false },
+ {
+ attrs: node.attributes,
+ children: processedChildren || node.children,
+ modifiers: node.modifiers,
+ blockParams: node.blockParams,
+ }
+ ),
+ ];
+ }
+ }
+ },
+ };
+ });
+};
+
+module.exports.type = 'hbs';

packages/codemods/transforms/v4/dropdown-list-item-interactive/test.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+'use strict';
+
+const { runTransformTest } = require('codemod-cli');
+
+runTransformTest({
+ name: 'v4/dropdown-list-item-interactive',
+});

packages/components/src/components/hds/dropdown/list-item/interactive.hbs

@@ -9,7 +9,11 @@
  <Hds::Icon @name="loading" />
  </div>
  <Hds::Text::Body @tag="div" @size="100" @weight="regular" class="hds-dropdown-list-item__interactive-text">
- {{this.text}}
+ {{#if (has-block)}}
+ {{yield (hash Badge=(component "hds/badge" size="small"))}}
+ {{else}}
+ {{this.text}}
+ {{/if}}
  </Hds::Text::Body>
  </div>
  {{else}}
@@ -30,7 +34,11 @@
  </span>
  {{/if}}
  <Hds::Text::Body class="hds-dropdown-list-item__interactive-text" @tag="span" @size="200" @weight="medium">
- {{this.text}}
+ {{#if (has-block)}}
+ {{yield (hash Badge=(component "hds/badge" size="small"))}}
+ {{else}}
+ {{this.text}}
+ {{/if}}
  </Hds::Text::Body>
  {{#if @trailingIcon}}
  <span class="hds-dropdown-list-item__interactive-icon hds-dropdown-list-item__interactive-icon--trailing">