fix(storybook): preserve legacy data visualization story links

docs/storybook/stories/Color/Display/DataVisColors.stories.tsx

@@ -313,3 +313,14 @@ export const DataVisMutedColors = ({colorTokens}) => {
     </Table.Container>
   )
 }
+
+// Preserve published links without duplicating the current stories in the sidebar.
+export const HighchartsAccentColors = {
+  render: DataVisAccentColors,
+  tags: ['!dev', '!test'],
+}
+
+export const HighchartsMutedColors = {
+  render: DataVisMutedColors,
+  tags: ['!dev', '!test'],
+}

e2e/storybook.test.ts

@@ -130,6 +130,28 @@ test.describe('storybook', () => {
   }
 })
 
+test.describe('data visualization story links', () => {
+  for (const theme of ['light', 'dark']) {
+    for (const variant of ['accent', 'muted']) {
+      for (const prefix of ['highcharts', 'data-vis']) {
+        const id = `color-datavis--${prefix}-${variant}-colors`
+
+        test(`${id} (${theme})`, async ({page}) => {
+          await visit(page, {id, globals: {theme}})
+
+          const table = page.getByRole('table', {name: `Data visualization ${variant} colors`})
+          await expect(table).toBeVisible()
+          await expect(table.getByRole('row').nth(1)).toBeVisible()
+          await expect(table.locator('.ColorTokenSwatch-bg').first()).not.toHaveCSS(
+            'background-color',
+            'rgba(0, 0, 0, 0)',
+          )
+        })
+      }
+    }
+  }
+})
+
 interface Options {
   id: string
   args?: Record<string, string | boolean>