@dialpad/dialtone-css 8.80.0-next.1 → 8.80.0-next.3

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

@@ -0,0 +1,97 @@
+<template>
+  <!--
+    TEST FILE FOR link-nav MIGRATION (DLT-3034)
+
+    Each example shows a legacy DtLink 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-link"> → <dt-link href> -->
+  <!-- ============================================ -->
+
+  <a class="d-link" href="/profile">Profile</a>
+
+  <a class="d-link" href="https://example.com" target="_blank" rel="noopener">
+    External link
+  </a>
+
+  <!-- ============================================ -->
+  <!-- 2. <router-link class="d-link"> → <dt-link :to> -->
+  <!-- ============================================ -->
+
+  <router-link class="d-link" to="/dashboard">Dashboard</router-link>
+
+  <router-link class="d-link" :to="{ name: 'profile' }">Profile</router-link>
+
+  <!-- ============================================ -->
+  <!-- 3. Tone modifier extraction (with renames) -->
+  <!-- ============================================ -->
+
+  <a class="d-link d-link--critical" href="/danger">Critical action</a>
+
+  <!-- d-link--danger renames to tone="critical" -->
+  <a class="d-link d-link--danger" href="/danger">Danger (legacy name)</a>
+
+  <a class="d-link d-link--positive" href="/win">Positive</a>
+
+  <!-- d-link--success renames to tone="positive" -->
+  <a class="d-link d-link--success" href="/win">Success (legacy name)</a>
+
+  <a class="d-link d-link--warning" href="/careful">Warning</a>
+
+  <a class="d-link d-link--info" href="/info">Info</a>
+
+  <a class="d-link d-link--muted" href="/secondary">Muted</a>
+
+  <a class="d-link d-link--mention" href="/user/brad">@brad</a>
+
+  <!-- ============================================ -->
+  <!-- 4. d-link--no-underline → :underline="false" -->
+  <!-- ============================================ -->
+
+  <a class="d-link d-link--no-underline" href="/x">No underline at rest</a>
+
+  <!-- ============================================ -->
+  <!-- 5. Inverted modifiers — extracted + per-file note nudges to v-dt-mode -->
+  <!-- ============================================ -->
+
+  <a class="d-link d-link--inverted" href="/x">Inverted (note)</a>
+
+  <a class="d-link d-link--inverted-critical" href="/x">Inverted critical (note + tone)</a>
+
+  <!-- ============================================ -->
+  <!-- 6. CSS-only modifiers preserved on class -->
+  <!-- ============================================ -->
+
+  <!-- d-link--disabled has no prop equivalent — preserve on class -->
+  <a class="d-link d-link--disabled" href="/x">Disabled link</a>
+
+  <!-- d-link--inverted-disabled — preserve on class -->
+  <a class="d-link d-link--inverted-disabled" href="/x">Inverted + disabled</a>
+
+  <!-- Custom user class preserved -->
+  <a class="d-link my-typography-class" href="/x">Custom class</a>
+
+  <!-- ============================================ -->
+  <!-- 7. Patterns that warn (not transformed) -->
+  <!-- ============================================ -->
+
+  <!-- Dynamic :href — warn, skip -->
+  <a class="d-link" :href="dynamicUrl">Dynamic</a>
+
+  <!-- Dynamic :class alongside static — warn, skip -->
+  <a class="d-link" :class="extraClasses" href="/x">Mixed</a>
+
+  <!-- <router-link custom> wrapping <dt-link> — warn, manual review -->
+  <router-link
+    custom
+    v-slot="{ navigate, isActive }"
+    :to="{ name: 'profile' }"
+  >
+    <dt-link :class="{ 'is-active': isActive }" @click="navigate">
+      Profile (custom)
+    </dt-link>
+  </router-link>
+</template>

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

@@ -0,0 +1,194 @@
+/**
+ * DLT-3034 — link-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('link-nav: <a class="d-link"> → <dt-link href>', () => {
+  const cases = [
+    [
+      'plain anchor',
+      '<a class="d-link" href="/x">Home</a>',
+      '<dt-link href="/x">Home</dt-link>',
+    ],
+    [
+      'anchor with target/rel passes through as fallthrough attrs',
+      '<a class="d-link" href="https://example.com" target="_blank" rel="noopener">Ext</a>',
+      '<dt-link target="_blank" rel="noopener" href="https://example.com">Ext</dt-link>',
+    ],
+    [
+      'arbitrary user class preserved',
+      '<a class="d-link my-typography-class" href="/x">Go</a>',
+      '<dt-link href="/x" class="my-typography-class">Go</dt-link>',
+    ],
+  ];
+
+  for (const [label, input, expected] of cases) {
+    it(label, () => {
+      assert.equal(runTransform(input), expected);
+    });
+  }
+});
+
+describe('link-nav: <router-link class="d-link"> → <dt-link :to>', () => {
+  const cases = [
+    [
+      'router-link with static to',
+      '<router-link class="d-link" to="/x">Home</router-link>',
+      '<dt-link to="/x">Home</dt-link>',
+    ],
+    [
+      'router-link with bound :to',
+      '<router-link class="d-link" :to="route">Home</router-link>',
+      '<dt-link :to="route">Home</dt-link>',
+    ],
+  ];
+
+  for (const [label, input, expected] of cases) {
+    it(label, () => {
+      assert.equal(runTransform(input), expected);
+    });
+  }
+});
+
+describe('link-nav: tone modifier extraction', () => {
+  // Per Q7 mapping table — including the danger→critical and success→positive renames
+  const cases = [
+    ['d-link--critical', 'tone="critical"'],
+    ['d-link--danger', 'tone="critical"'],     // rename
+    ['d-link--warning', 'tone="warning"'],
+    ['d-link--positive', 'tone="positive"'],
+    ['d-link--success', 'tone="positive"'],    // rename
+    ['d-link--info', 'tone="info"'],
+    ['d-link--muted', 'tone="muted"'],
+    ['d-link--mention', 'tone="mention"'],
+  ];
+
+  for (const [modifier, expectedAttr] of cases) {
+    it(`${modifier} → ${expectedAttr}`, () => {
+      const input = `<a class="d-link ${modifier}" href="/x">Go</a>`;
+      const expected = `<dt-link href="/x" ${expectedAttr}>Go</dt-link>`;
+      assert.equal(runTransform(input), expected);
+    });
+  }
+});
+
+describe('link-nav: no-underline modifier', () => {
+  it('d-link--no-underline → :underline="false"', () => {
+    assert.equal(
+      runTransform('<a class="d-link d-link--no-underline" href="/x">Go</a>'),
+      '<dt-link href="/x" :underline="false">Go</dt-link>',
+    );
+  });
+});
+
+describe('link-nav: inverted modifier emits per-file note', () => {
+  it('d-link--inverted is stripped and emits a note', () => {
+    const { transformed, notes } = runTransformVerbose(
+      '<a class="d-link d-link--inverted" href="/x">Go</a>',
+      { filePath: 'fixture.vue' },
+    );
+    assert.equal(transformed, '<dt-link href="/x">Go</dt-link>');
+    assert.equal(notes.length, 1);
+  });
+
+  it('d-link--inverted-critical extracts the tone and emits a note', () => {
+    const { transformed, notes } = runTransformVerbose(
+      '<a class="d-link d-link--inverted-critical" href="/x">Go</a>',
+      { filePath: 'fixture.vue' },
+    );
+    assert.equal(transformed, '<dt-link href="/x" tone="critical">Go</dt-link>');
+    assert.equal(notes.length, 1);
+    assert.match(notes[0].message, /v-dt-mode/);
+  });
+});
+
+describe('link-nav: CSS-only modifiers preserved on class', () => {
+  it('d-link--disabled preserved (no prop equivalent)', () => {
+    assert.equal(
+      runTransform('<a class="d-link d-link--disabled" href="/x">Go</a>'),
+      '<dt-link href="/x" class="d-link--disabled">Go</dt-link>',
+    );
+  });
+
+  it('d-link--inverted-disabled preserved (no prop equivalent)', () => {
+    assert.equal(
+      runTransform('<a class="d-link d-link--inverted-disabled" href="/x">Go</a>'),
+      '<dt-link href="/x" class="d-link--inverted-disabled">Go</dt-link>',
+    );
+  });
+});
+
+describe('link-nav: warning paths', () => {
+  it('dynamic :href on <a class="d-link"> is lifted to :href on the output', () => {
+    assert.equal(
+      runTransform('<a class="d-link" :href="url">Go</a>'),
+      '<dt-link :href="url">Go</dt-link>',
+    );
+  });
+
+  it('dynamic :class alongside static class warns', () => {
+    const { transformed, warnings } = runTransformVerbose(
+      '<a class="d-link" :class="extraClass" href="/x">Go</a>',
+      { filePath: 'fixture.vue' },
+    );
+    assert.equal(transformed, '<a class="d-link" :class="extraClass" href="/x">Go</a>');
+    assert.equal(warnings.length, 1);
+    assert.match(warnings[0], /dynamic :class/);
+  });
+
+  it('<router-link custom> wrapping <dt-link> warns', () => {
+    const input = '<router-link custom v-slot="{ navigate }" to="/x"><dt-link @click="navigate">Go</dt-link></router-link>';
+    const { warnings } = runTransformVerbose(input, { filePath: 'fixture.vue' });
+    assert.ok(warnings.some(w => /router-link custom.*dt-link/.test(w)));
+  });
+
+  it('<router-link custom class="d-link"> on the source tag itself warns and skips', () => {
+    const input = '<router-link custom v-slot="{ navigate }" to="/x" class="d-link">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)));
+  });
+});
+
+describe('link-nav: PascalCase tags accepted, kebab-case emitted', () => {
+  it('<RouterLink class="d-link" :to="..."> → <dt-link :to="...">', () => {
+    assert.equal(
+      runTransform('<RouterLink class="d-link" :to="route">Home</RouterLink>'),
+      '<dt-link :to="route">Home</dt-link>',
+    );
+  });
+
+  it('<a class="d-link d-link--muted" v-show="x > 0"> — `>` inside binding preserved with tone extraction', () => {
+    assert.equal(
+      runTransform('<a class="d-link d-link--muted" v-show="x > 0" href="/x">Help</a>'),
+      '<dt-link v-show="x > 0" href="/x" tone="muted">Help</dt-link>',
+    );
+  });
+});
+
+describe('link-nav: idempotency', () => {
+  it('already-migrated <dt-link href> is a no-op', () => {
+    const input = '<dt-link href="/x" tone="muted">Go</dt-link>';
+    assert.equal(runTransform(input), input);
+  });
+
+  it('running the transform twice produces no further changes', () => {
+    const input = '<a class="d-link d-link--muted" href="/x">Go</a>';
+    const once = runTransform(input);
+    const twice = runTransform(once);
+    assert.equal(once, twice);
+  });
+});
+
+describe('link-nav: --only=link-nav runs only this transform', () => {
+  it('skips button-nav rewrites', () => {
+    const input = '<a class="d-btn" href="/x">Go</a>';
+    const { transformed } = runTransformVerbose(input, { only: ['link-nav'] });
+    assert.equal(transformed, input);
+  });
+});

package/lib/build/js/dialtone_migrate_link_rendering/underline-test-examples.vue

@@ -0,0 +1,57 @@
+<template>
+  <!--
+    TEST FILE FOR underline MIGRATION (DLT-3035)
+
+    Each block shows a `<dt-link>` with d-td-* utility classes and the expected
+    rewritten form. Most patterns map exactly; "alone" and "both-same" patterns
+    map to the closest prop value with a per-file informational note about
+    hover-state delta.
+  -->
+
+  <!-- ============================================ -->
+  <!-- 1. Clean mappings (no hover delta) -->
+  <!-- ============================================ -->
+
+  <!-- d-td-underline h:d-td-none → strip both (matches default) -->
+  <dt-link href="/x" class="d-td-underline h:d-td-none">Default</dt-link>
+
+  <!-- d-td-none h:d-td-underline → :underline="false" (the canonical example) -->
+  <dt-link href="/x" class="d-td-none h:d-td-underline">No-underline link</dt-link>
+
+  <!-- h:d-td-none alone — strip (matches default hover) -->
+  <dt-link href="/x" class="h:d-td-none">Default redundant</dt-link>
+
+  <!-- ============================================ -->
+  <!-- 2. "Alone" patterns — closest mapping + per-file hover-delta note -->
+  <!-- ============================================ -->
+
+  <!-- d-td-none alone — closest is :underline="false" (hover gains underline) -->
+  <dt-link href="/x" class="d-td-none">No underline ever (will hover-underline)</dt-link>
+
+  <!-- d-td-underline alone — closest is default (hover loses underline) -->
+  <dt-link href="/x" class="d-td-underline">Always underlined (will lose hover)</dt-link>
+
+  <!-- ============================================ -->
+  <!-- 3. Other classes preserved -->
+  <!-- ============================================ -->
+
+  <dt-link href="/x" class="d-td-none h:d-td-underline d-fc-secondary">
+    Mixed with font-color utility
+  </dt-link>
+
+  <!-- ============================================ -->
+  <!-- 4. Patterns that warn (not transformed) -->
+  <!-- ============================================ -->
+
+  <!-- Responsive variant — warn, skip -->
+  <dt-link href="/x" class="sm:d-td-none h:d-td-underline">Responsive</dt-link>
+
+  <!-- Dynamic :class containing d-td-* — warn -->
+  <dt-link href="/x" :class="{ 'd-td-none': isQuiet }">Dynamic underline</dt-link>
+
+  <!-- ============================================ -->
+  <!-- 5. Idempotent: already on the new API -->
+  <!-- ============================================ -->
+
+  <dt-link href="/x" :underline="false">Already migrated</dt-link>
+</template>

package/lib/build/js/dialtone_migrate_link_rendering/underline.test.mjs

@@ -0,0 +1,161 @@
+/**
+ * DLT-3035 — underline transform tests.
+ *
+ * One assertion per test; data-driven covering each row of the Q1 revised mapping table.
+ */
+
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { runTransform, runTransformVerbose } from './helpers.mjs';
+
+describe('underline: clean-mapping cases (no hover delta)', () => {
+  const cases = [
+    [
+      'd-td-underline h:d-td-none → strip both (matches default)',
+      '<dt-link href="/x" class="d-td-underline h:d-td-none">Go</dt-link>',
+      '<dt-link href="/x">Go</dt-link>',
+    ],
+    [
+      'd-td-none h:d-td-underline → strip + :underline="false"',
+      '<dt-link href="/x" class="d-td-none h:d-td-underline">Go</dt-link>',
+      '<dt-link href="/x" :underline="false">Go</dt-link>',
+    ],
+    [
+      'h:d-td-none alone → strip (matches default hover)',
+      '<dt-link href="/x" class="h:d-td-none">Go</dt-link>',
+      '<dt-link href="/x">Go</dt-link>',
+    ],
+  ];
+
+  for (const [label, input, expected] of cases) {
+    it(label, () => {
+      const { transformed, notes } = runTransformVerbose(input, { filePath: 'fixture.vue' });
+      assert.equal(transformed, expected);
+      assert.equal(notes.length, 0, 'expected no hover-delta note');
+    });
+  }
+});
+
+describe('underline: alone/same cases (closest-prop with hover delta note)', () => {
+  const cases = [
+    {
+      label: 'd-td-none alone → :underline="false" + note',
+      input: '<dt-link href="/x" class="d-td-none">Go</dt-link>',
+      expected: '<dt-link href="/x" :underline="false">Go</dt-link>',
+    },
+    {
+      label: 'd-td-none h:d-td-none → :underline="false" + note',
+      input: '<dt-link href="/x" class="d-td-none h:d-td-none">Go</dt-link>',
+      expected: '<dt-link href="/x" :underline="false">Go</dt-link>',
+    },
+    {
+      label: 'd-td-underline alone → strip (default true) + note',
+      input: '<dt-link href="/x" class="d-td-underline">Go</dt-link>',
+      expected: '<dt-link href="/x">Go</dt-link>',
+    },
+    {
+      label: 'd-td-underline h:d-td-underline → strip (default true) + note',
+      input: '<dt-link href="/x" class="d-td-underline h:d-td-underline">Go</dt-link>',
+      expected: '<dt-link href="/x">Go</dt-link>',
+    },
+    {
+      label: 'h:d-td-underline alone → strip (default true) + note',
+      input: '<dt-link href="/x" class="h:d-td-underline">Go</dt-link>',
+      expected: '<dt-link href="/x">Go</dt-link>',
+    },
+  ];
+
+  for (const { label, input, expected } of cases) {
+    it(label, () => {
+      const { transformed } = runTransformVerbose(input, { filePath: 'fixture.vue' });
+      assert.equal(transformed, expected);
+    });
+    it(`${label} — emits hover-delta note`, () => {
+      const { notes } = runTransformVerbose(input, { filePath: 'fixture.vue' });
+      assert.equal(notes.length, 1);
+      assert.match(notes[0].message, /hover behavior/);
+    });
+  }
+});
+
+describe('underline: warning paths', () => {
+  it('responsive variant sm:d-td-none warns and skips', () => {
+    const input = '<dt-link href="/x" class="sm:d-td-none">Go</dt-link>';
+    const { transformed, warnings } = runTransformVerbose(input, { filePath: 'fixture.vue' });
+    assert.equal(transformed, input);
+    assert.equal(warnings.length, 1);
+    assert.match(warnings[0], /responsive or unsupported/);
+  });
+
+  it('focus variant f:d-td-underline warns and skips', () => {
+    const input = '<dt-link href="/x" class="f:d-td-underline">Go</dt-link>';
+    const { transformed, warnings } = runTransformVerbose(input, { filePath: 'fixture.vue' });
+    assert.equal(transformed, input);
+    assert.equal(warnings.length, 1);
+  });
+
+  it('dynamic :class containing d-td-* warns', () => {
+    const input = '<dt-link href="/x" :class="{ \'d-td-none\': isHover }">Go</dt-link>';
+    const { warnings } = runTransformVerbose(input, { filePath: 'fixture.vue' });
+    assert.equal(warnings.length, 1);
+    assert.match(warnings[0], /dynamic binding/);
+  });
+});
+
+describe('underline: self-closing tags preserve the /', () => {
+  it('<dt-link class="d-td-none" /> → <dt-link :underline="false" />', () => {
+    assert.equal(
+      runTransform('<dt-link href="/x" class="d-td-none" />'),
+      '<dt-link href="/x" :underline="false" />',
+    );
+  });
+});
+
+describe('underline: dynamic :class with d-td-* warns even when a static class is also present', () => {
+  it('emits dynamic-binding warning and leaves the tag unchanged', () => {
+    const input = '<dt-link href="/x" class="foo" :class="{ \'d-td-none\': off }">Go</dt-link>';
+    const { transformed, warnings } = runTransformVerbose(input, { filePath: 'fixture.vue' });
+    assert.equal(transformed, input);
+    assert.ok(warnings.some(w => /dynamic binding/.test(w)));
+  });
+});
+
+describe('underline: PascalCase tag (DtLink) accepted; case preserved on output', () => {
+  it('<DtLink class="d-td-none h:d-td-underline"> → <DtLink :underline="false">', () => {
+    assert.equal(
+      runTransform('<DtLink href="/x" class="d-td-none h:d-td-underline">Go</DtLink>'),
+      '<DtLink href="/x" :underline="false">Go</DtLink>',
+    );
+  });
+});
+
+describe('underline: idempotency and other classes preserved', () => {
+  it('already-migrated <dt-link :underline="false"> is a no-op', () => {
+    const input = '<dt-link href="/x" :underline="false">Go</dt-link>';
+    assert.equal(runTransform(input), input);
+  });
+
+  it('non-d-td classes preserved when stripping d-td-*', () => {
+    const input = '<dt-link href="/x" class="d-td-none h:d-td-underline custom-class">Go</dt-link>';
+    const expected = '<dt-link href="/x" class="custom-class" :underline="false">Go</dt-link>';
+    assert.equal(runTransform(input), expected);
+  });
+
+  it('<dt-link> with no d-td-* classes is unchanged', () => {
+    const input = '<dt-link href="/x" class="custom-class">Go</dt-link>';
+    assert.equal(runTransform(input), input);
+  });
+
+  it('<dt-link> with no class attr is unchanged', () => {
+    const input = '<dt-link href="/x">Go</dt-link>';
+    assert.equal(runTransform(input), input);
+  });
+});
+
+describe('underline: --only=underline runs only this transform', () => {
+  it('skips button-nav and link-nav', () => {
+    const input = '<a class="d-btn" href="/x">Go</a>\n<a class="d-link" href="/y">Y</a>';
+    const { transformed } = runTransformVerbose(input, { only: ['underline'] });
+    assert.equal(transformed, input);
+  });
+});