Replace Storybook icon docs with icon table (including metadata)

change/@ni-nimble-components-897a77b2-4280-475f-977b-21a0571b7acf.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Replace icon docs with generated icon table",
+  "packageName": "@ni/nimble-components",
+  "email": "1458528+fredvisser@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/nimble-components/build/generate-icons/source/index.js

@@ -2,10 +2,12 @@
  * Build script for generating Nimble components for icons.
  *
  * Iterates through icons provided by nimble-tokens, and generates a Nimble component for each in
- * src/icons. Also generates an all-icons barrel file.
+ * src/icons. Also generates an all-icons barrel file and the icons.mdx Storybook file.
  */
 import { pascalCase, spinalCase } from '@microsoft/fast-web-utilities';
 import * as icons from '@ni/nimble-tokens/dist/icons/js';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { iconMetadata } from '@ni/nimble-components/dist/esm/icon-base/icon-metadata';
 
 const fs = require('fs');
 const path = require('path');
@@ -18,6 +20,18 @@ const trimSizeFromName = text => {
 const generatedFilePrefix = `// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
 // See generation source in nimble-components/build/generate-icons\n`;
 
+const mdxFilePrefix = `import { Meta, Title, IconItem } from '@storybook/blocks';
+import * as iconStories from '../../icon-base/tests/icons.stories';
+
+<Meta of={iconStories} />
+<Title of={iconStories} />`;
+
+let mdxTable = `| Icon | Synonyms |
+| ---- | -------- |
+`;
+
+let mdxImportStatements = '';
+
 const iconsDirectory = path.resolve(__dirname, '../../../src/icons');
 
 if (fs.existsSync(iconsDirectory)) {
@@ -27,11 +41,13 @@ if (fs.existsSync(iconsDirectory)) {
 }
 console.log(`Creating icons directory "${iconsDirectory}"`);
 fs.mkdirSync(iconsDirectory);
+fs.mkdirSync(path.resolve(iconsDirectory, 'tests'));
 console.log('Finished creating icons directory');
 
 console.log('Writing icon component files');
 let allIconsFileContents = `${generatedFilePrefix}\n`;
 let fileCount = 0;
+
 for (const key of Object.keys(icons)) {
     const svgName = key; // e.g. "arrowExpanderLeft16X16"
     const iconName = trimSizeFromName(key); // e.g. "arrowExpanderLeft"
@@ -41,6 +57,8 @@ for (const key of Object.keys(icons)) {
     const className = `Icon${pascalCase(iconName)}`; // e.g. "IconArrowExpanderLeft"
     const tagName = `icon${pascalCase(iconName)}Tag`; // e.g. "iconArrowExpanderLeftTag"
 
+    const iconSynonyms = iconMetadata[className];
+
     const componentFileContents = `${generatedFilePrefix}
 import { ${svgName} } from '@ni/nimble-tokens/dist/icons/js';
 import { DesignSystem } from '@microsoft/fast-foundation';
@@ -69,11 +87,24 @@ export const ${tagName} = DesignSystem.tagFor(${className});
     fs.writeFileSync(filePath, componentFileContents, { encoding: 'utf-8' });
     fileCount += 1;
 
-    allIconsFileContents = allIconsFileContents.concat(`export { ${className} } from './${fileName}';\n`);
+    allIconsFileContents += `export { ${className} } from './${fileName}';\n`;
+
+    mdxImportStatements += `import { ${tagName} } from '../${fileName}';\n`;
+    mdxTable += `| <IconItem name="${fileName}"><${elementName} /></IconItem> | ${iconSynonyms?.tags.join(', ')} |\n`;
 }
 console.log(`Finshed writing ${fileCount} icon component files`);
 
 const allIconsFilePath = path.resolve(iconsDirectory, 'all-icons.ts');
 console.log('Writing all-icons file');
 fs.writeFileSync(allIconsFilePath, allIconsFileContents, { encoding: 'utf-8' });
 console.log('Finished writing all-icons file');
+
+const mdxFileContents = `
+${mdxFilePrefix}\n
+${mdxImportStatements}
+${mdxTable}`;
+
+const iconsMDXFilePath = path.resolve(iconsDirectory, 'tests/icons.mdx');
+console.log('Writing icons.mdx file');
+fs.writeFileSync(iconsMDXFilePath, mdxFileContents, { encoding: 'utf-8' });
+console.log('Finished writing icons.mdx file');

packages/nimble-components/src/icon-base/tests/icons.stories.ts

@@ -20,8 +20,7 @@ interface IconArgs {
 }
 
 const metadata: Meta<IconArgs> = {
-    title: 'Icons',
-    tags: ['autodocs']
+    title: 'Icons'
 };
 
 export default metadata;

packages/site/landing/index.ts

@@ -1,4 +1,5 @@
 import '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import '@ni/nimble-components/dist/esm/icon-base/icon-metadata';
 
 import { encircle } from './circle';