@dialpad/dialtone-css 8.80.0-next.2 → 8.80.0-next.4

package/lib/build/js/dialtone_migrate_link_rendering/button-nav-test-examples.vue

@@ -0,0 +1,92 @@
+<template>
+  <!--
+    TEST FILE FOR button-nav MIGRATION (DLT-3033)
+
+    Each example shows a legacy pattern the codemod recognizes and the expected
+    rewritten form. The fixture doubles as a `npx dialtone-migrate-link-rendering
+    --dry-run --cwd <this-folder>` demo target.
+  -->
+
+  <!-- ============================================ -->
+  <!-- 1. <a class="d-btn"> → <dt-button href> -->
+  <!-- ============================================ -->
+
+  <!-- Plain anchor -->
+  <a class="d-btn" href="/settings">Settings</a>
+
+  <!-- Anchor with size modifier -->
+  <a class="d-btn d-btn--lg" href="/settings">Large CTA</a>
+
+  <!-- Anchor with importance modifier -->
+  <a class="d-btn d-btn--outlined" href="/cancel">Cancel</a>
+
+  <!-- Anchor with kind modifier -->
+  <a class="d-btn d-btn--critical" href="/delete">Delete</a>
+
+  <!-- Anchor with renamed kind (danger → critical) -->
+  <a class="d-btn d-btn--danger" href="/delete">Delete</a>
+
+  <!-- Anchor with circle modifier (icon button) -->
+  <a class="d-btn d-btn--circle" href="/avatar">A</a>
+
+  <!-- Stacked modifiers -->
+  <a class="d-btn d-btn--lg d-btn--outlined d-btn--critical" href="/delete">Delete</a>
+
+  <!-- Anchor with target / rel (preserved via $attrs fallthrough) -->
+  <a
+    class="d-btn"
+    href="https://example.com"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    External link
+  </a>
+
+  <!-- ============================================ -->
+  <!-- 2. <router-link class="d-btn"> → <dt-button :to> -->
+  <!-- ============================================ -->
+
+  <!-- Static `to` -->
+  <router-link class="d-btn" to="/dashboard">Dashboard</router-link>
+
+  <!-- Bound `:to` -->
+  <router-link class="d-btn" :to="{ name: 'dashboard' }">Dashboard</router-link>
+
+  <!-- Bound `:to` with modifiers -->
+  <router-link
+    class="d-btn d-btn--lg d-btn--critical"
+    :to="route"
+  >
+    Delete
+  </router-link>
+
+  <!-- ============================================ -->
+  <!-- 3. Vendor & BEM modifiers preserved on class -->
+  <!-- ============================================ -->
+
+  <a class="d-btn d-btn--google" href="/auth/google">Sign in with Google</a>
+
+  <!-- Custom user class preserved -->
+  <a class="d-btn my-cta-class" href="/upgrade">Upgrade</a>
+
+  <!-- ============================================ -->
+  <!-- 4. Patterns that warn (not transformed) -->
+  <!-- ============================================ -->
+
+  <!-- Dynamic :href — warn, skip -->
+  <a class="d-btn" :href="dynamicUrl">Dynamic</a>
+
+  <!-- Dynamic :class alongside static class — warn, skip -->
+  <a class="d-btn" :class="extraClasses" href="/x">Mixed</a>
+
+  <!-- <router-link custom> wrapping <dt-button> — warn, manual review -->
+  <router-link
+    custom
+    v-slot="{ navigate, isActive }"
+    :to="{ name: 'profile' }"
+  >
+    <dt-button :class="{ 'is-active': isActive }" @click="navigate">
+      Profile
+    </dt-button>
+  </router-link>
+</template>

package/lib/build/js/dialtone_migrate_link_rendering/button-nav.test.mjs

@@ -0,0 +1,272 @@
+/**
+ * DLT-3033 — button-nav transform tests.
+ *
+ * One assertion per test; data-driven via for..of where multiple cases share a concept.
+ */
+
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { runTransform, runTransformVerbose } from './helpers.mjs';
+
+describe('button-nav: <a class="d-btn"> → <dt-button href>', () => {
+  const cases = [
+    [
+      'plain anchor',
+      '<a class="d-btn" href="/x">Go</a>',
+      '<dt-button href="/x">Go</dt-button>',
+    ],
+    [
+      'anchor with target and rel preserved as fallthrough',
+      '<a class="d-btn" href="/x" target="_blank" rel="noopener">Go</a>',
+      '<dt-button target="_blank" rel="noopener" href="/x">Go</dt-button>',
+    ],
+    [
+      'anchor with size modifier',
+      '<a class="d-btn d-btn--lg" href="/x">Go</a>',
+      '<dt-button href="/x" :size="400">Go</dt-button>',
+    ],
+    [
+      'anchor with importance modifier',
+      '<a class="d-btn d-btn--outlined" href="/x">Go</a>',
+      '<dt-button href="/x" importance="outlined">Go</dt-button>',
+    ],
+    [
+      'anchor with kind modifier',
+      '<a class="d-btn d-btn--critical" href="/x">Go</a>',
+      '<dt-button href="/x" kind="critical">Go</dt-button>',
+    ],
+    [
+      'anchor with d-btn--danger renames to kind=critical',
+      '<a class="d-btn d-btn--danger" href="/x">Go</a>',
+      '<dt-button href="/x" kind="critical">Go</dt-button>',
+    ],
+    [
+      'anchor with d-btn--success renames to kind=positive',
+      '<a class="d-btn d-btn--success" href="/x">Go</a>',
+      '<dt-button href="/x" kind="positive">Go</dt-button>',
+    ],
+    [
+      'anchor with circle modifier',
+      '<a class="d-btn d-btn--circle" href="/x">Go</a>',
+      '<dt-button href="/x" circle>Go</dt-button>',
+    ],
+    [
+      'anchor with active modifier',
+      '<a class="d-btn d-btn--active" href="/x">Go</a>',
+      '<dt-button href="/x" active>Go</dt-button>',
+    ],
+    [
+      'anchor with loading modifier',
+      '<a class="d-btn d-btn--loading" href="/x">Go</a>',
+      '<dt-button href="/x" loading>Go</dt-button>',
+    ],
+    [
+      'anchor with multiple modifiers (size + importance + kind)',
+      '<a class="d-btn d-btn--lg d-btn--outlined d-btn--critical" href="/x">Go</a>',
+      '<dt-button href="/x" :size="400" importance="outlined" kind="critical">Go</dt-button>',
+    ],
+    [
+      'd-btn--md is the default size — stripped silently',
+      '<a class="d-btn d-btn--md" href="/x">Go</a>',
+      '<dt-button href="/x">Go</dt-button>',
+    ],
+    [
+      'd-btn--primary is the default importance — stripped silently',
+      '<a class="d-btn d-btn--primary" href="/x">Go</a>',
+      '<dt-button href="/x">Go</dt-button>',
+    ],
+    [
+      'vendor class preserved on resulting class attr',
+      '<a class="d-btn d-btn--google" href="/x">Sign in</a>',
+      '<dt-button href="/x" class="d-btn--google">Sign in</dt-button>',
+    ],
+    [
+      'BEM internal preserved on class attr',
+      '<a class="d-btn d-btn__icon-only" href="/x">i</a>',
+      '<dt-button href="/x" class="d-btn__icon-only">i</dt-button>',
+    ],
+    [
+      'arbitrary user class preserved',
+      '<a class="d-btn my-cta-class" href="/x">Go</a>',
+      '<dt-button href="/x" class="my-cta-class">Go</dt-button>',
+    ],
+    [
+      'multiline tag content preserved',
+      '<a class="d-btn" href="/x">\n  <span>Go</span>\n</a>',
+      '<dt-button href="/x">\n  <span>Go</span>\n</dt-button>',
+    ],
+    [
+      'self-closing anchor (rare but legal in templates)',
+      '<a class="d-btn" href="/x" />',
+      '<dt-button href="/x" />',
+    ],
+  ];
+
+  for (const [label, input, expected] of cases) {
+    it(label, () => {
+      assert.equal(runTransform(input), expected);
+    });
+  }
+});
+
+describe('button-nav: <router-link class="d-btn"> → <dt-button :to>', () => {
+  const cases = [
+    [
+      'router-link with static to',
+      '<router-link class="d-btn" to="/x">Go</router-link>',
+      '<dt-button to="/x">Go</dt-button>',
+    ],
+    [
+      'router-link with bound :to',
+      '<router-link class="d-btn" :to="route">Go</router-link>',
+      '<dt-button :to="route">Go</dt-button>',
+    ],
+    [
+      'router-link with size and kind modifiers',
+      '<router-link class="d-btn d-btn--lg d-btn--critical" to="/x">Go</router-link>',
+      '<dt-button to="/x" :size="400" kind="critical">Go</dt-button>',
+    ],
+    [
+      'router-link with bound :to and circle',
+      '<router-link class="d-btn d-btn--circle" :to="route">x</router-link>',
+      '<dt-button :to="route" circle>x</dt-button>',
+    ],
+  ];
+
+  for (const [label, input, expected] of cases) {
+    it(label, () => {
+      assert.equal(runTransform(input), expected);
+    });
+  }
+});
+
+describe('button-nav: warning paths', () => {
+  it('dynamic :href on <a class="d-btn"> is lifted to :href on the output', () => {
+    assert.equal(
+      runTransform('<a class="d-btn" :href="url">Go</a>'),
+      '<dt-button :href="url">Go</dt-button>',
+    );
+  });
+
+  it('dynamic :class alongside static class warns and skips transform', () => {
+    const { transformed, warnings } = runTransformVerbose(
+      '<a class="d-btn" :class="extraClass" href="/x">Go</a>',
+      { filePath: 'fixture.vue' },
+    );
+    assert.equal(transformed, '<a class="d-btn" :class="extraClass" href="/x">Go</a>');
+    assert.equal(warnings.length, 1);
+    assert.match(warnings[0], /dynamic :class/);
+  });
+
+  it('<router-link custom> wrapping <dt-button> warns', () => {
+    const input = '<router-link custom v-slot="{ navigate }" to="/x"><dt-button @click="navigate">Go</dt-button></router-link>';
+    const { warnings } = runTransformVerbose(input, { filePath: 'fixture.vue' });
+    const customWarn = warnings.find(w => /router-link custom.*dt-button/.test(w));
+    assert.ok(customWarn, 'expected warning about <router-link custom> wrapper');
+  });
+
+  it('<router-link custom class="d-btn"> on the source tag itself warns and skips', () => {
+    const input = '<router-link custom v-slot="{ navigate }" to="/x" class="d-btn">Go</router-link>';
+    const { transformed, warnings } = runTransformVerbose(input, { filePath: 'fixture.vue' });
+    assert.equal(transformed, input);
+    assert.ok(warnings.some(w => /router-link custom.*don't transfer/.test(w)));
+  });
+
+  it('<router-link class="d-btn"> without `to` warns and skips', () => {
+    const { transformed, warnings } = runTransformVerbose(
+      '<router-link class="d-btn">Go</router-link>',
+      { filePath: 'fixture.vue' },
+    );
+    assert.equal(transformed, '<router-link class="d-btn">Go</router-link>');
+    assert.ok(warnings.some(w => /without a `to`/.test(w)));
+  });
+});
+
+describe('button-nav: PascalCase tags accepted, kebab-case emitted', () => {
+  it('<RouterLink class="d-btn" :to="..."> → <dt-button :to="...">', () => {
+    assert.equal(
+      runTransform('<RouterLink class="d-btn" :to="route">Go</RouterLink>'),
+      '<dt-button :to="route">Go</dt-button>',
+    );
+  });
+});
+
+describe('button-nav: quote-aware tag matching survives `>` inside Vue bindings', () => {
+  it('<router-link v-if="count > 0" class="d-btn" :to="route">', () => {
+    assert.equal(
+      runTransform('<router-link v-if="count > 0" class="d-btn" :to="route">Go</router-link>'),
+      '<dt-button v-if="count > 0" :to="route">Go</dt-button>',
+    );
+  });
+
+  it('<a class="d-btn" :data-x="`a > b`" href="/x"> — `>` inside binding preserved', () => {
+    assert.equal(
+      runTransform('<a class="d-btn" :data-x="`a > b`" href="/x">Go</a>'),
+      '<dt-button :data-x="`a > b`" href="/x">Go</dt-button>',
+    );
+  });
+});
+
+describe('button-nav: whitespace inside quoted attribute values is preserved', () => {
+  it('<a class="d-btn" title="Hello   world"> keeps multi-space title verbatim', () => {
+    assert.equal(
+      runTransform('<a class="d-btn" title="Hello   world" href="/x">Go</a>'),
+      '<dt-button title="Hello   world" href="/x">Go</dt-button>',
+    );
+  });
+});
+
+describe('button-nav: <router-link custom> wrapper warn is scoped to the wrapper body', () => {
+  it('<router-link custom> with a sibling <dt-button> later in the file does not warn', () => {
+    const input =
+      '<router-link custom v-slot="{ navigate }" to="/x"><span @click="navigate">Go</span></router-link>\n' +
+      '<dt-button href="/elsewhere">Unrelated</dt-button>';
+    const { warnings } = runTransformVerbose(input, { filePath: 'fixture.vue' });
+    assert.equal(warnings.filter(w => /router-link custom/.test(w)).length, 0);
+  });
+});
+
+describe('button-nav: requires base d-btn token, not just a modifier', () => {
+  it('<a class="d-btn--lg"> without base d-btn is not transformed', () => {
+    const input = '<a class="d-btn--lg" href="/x">Go</a>';
+    assert.equal(runTransform(input), input);
+  });
+});
+
+describe('button-nav: idempotency', () => {
+  it('already-migrated <dt-button href> is a no-op', () => {
+    const input = '<dt-button href="/x" :size="400">Go</dt-button>';
+    assert.equal(runTransform(input), input);
+  });
+
+  it('mixed: one already-migrated and one legacy in same content', () => {
+    const input =
+      '<dt-button href="/already">A</dt-button>\n' +
+      '<a class="d-btn" href="/legacy">B</a>';
+    const expected =
+      '<dt-button href="/already">A</dt-button>\n' +
+      '<dt-button href="/legacy">B</dt-button>';
+    assert.equal(runTransform(input), expected);
+  });
+
+  it('running the transform twice produces no further changes', () => {
+    const input = '<a class="d-btn d-btn--lg" href="/x">Go</a>';
+    const once = runTransform(input);
+    const twice = runTransform(once);
+    assert.equal(once, twice);
+  });
+});
+
+describe('button-nav: --only respects transform selection', () => {
+  it('--only=link-nav skips button-nav transform', () => {
+    const input = '<a class="d-btn" href="/x">Go</a>';
+    const { transformed } = runTransformVerbose(input, { only: ['link-nav'] });
+    assert.equal(transformed, input);
+  });
+
+  it('--only=button-nav runs only button-nav', () => {
+    const input = '<a class="d-btn" href="/x">Go</a>';
+    const { transformed } = runTransformVerbose(input, { only: ['button-nav'] });
+    assert.equal(transformed, '<dt-button href="/x">Go</dt-button>');
+  });
+});

package/lib/build/js/dialtone_migrate_link_rendering/helpers.mjs

@@ -0,0 +1,25 @@
+/**
+ * Shared test helpers for dialtone-migrate-link-rendering.
+ *
+ * Mirrors the pattern from dialtone_migration_helper/tests/helpers.mjs:
+ * a small surface that test files can rely on without re-importing the CLI internals.
+ */
+
+import { transformContent } from './index.mjs';
+
+/**
+ * Run the transform on a single string of content and return the rewritten output.
+ * Useful for one-input/one-expected-output assertion tests.
+ */
+export function runTransform (input, opts = {}) {
+  const { transformed } = transformContent(input, opts);
+  return transformed;
+}
+
+/**
+ * Run the transform and return the full result, including warnings and notes.
+ * Useful for tests that assert on warnings or notes.
+ */
+export function runTransformVerbose (input, opts = {}) {
+  return transformContent(input, opts);
+}