rename

Author: avivkeller

…nts/Common/CircularIcon/index.module.css …mponents/Common/DataTag/index.module.csspackages/ui-components/Common/CircularIcon/index.module.css renamed to packages/ui-components/Common/DataTag/index.module.css packages/ui-components/Common/CircularIcon/index.module.css renamed to packages/ui-components/Common/DataTag/index.module.css

@@ -1,6 +1,6 @@
 @reference "../../styles/index.css";
 
-.icon {
+.dataTag {
   @apply flex
     items-center
     justify-center

…ts/Common/CircularIcon/index.stories.tsx …ponents/Common/DataTag/index.stories.tsxpackages/ui-components/Common/CircularIcon/index.stories.tsx renamed to packages/ui-components/Common/DataTag/index.stories.tsx packages/ui-components/Common/CircularIcon/index.stories.tsx renamed to packages/ui-components/Common/DataTag/index.stories.tsx

@@ -1,20 +1,20 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import CircularIcon, { type CircularIconProps } from '#ui/Common/CircularIcon';
+import DataTag, { type DataTagProps } from '#ui/Common/DataTag';
 
-type Story = StoryObj<typeof CircularIcon>;
-type Meta = MetaObj<typeof CircularIcon>;
+type Story = StoryObj<typeof DataTag>;
+type Meta = MetaObj<typeof DataTag>;
 
-export const Icons: Story = {
+export const DataTags: Story = {
   render: () => (
     <div className="grid grid-cols-3 gap-6 p-6">
       {['event', 'method', 'property', 'class', 'module', 'classMethod', 'ctor']
         .map(kind =>
           ['sm', 'md', 'lg'].map(size => (
             <div key={`${kind}-${size}`} className="flex justify-center">
-              <CircularIcon
-                kind={kind as CircularIconProps['kind']}
-                size={size as CircularIconProps['size']}
+              <DataTag
+                kind={kind as DataTagProps['kind']}
+                size={size as DataTagProps['size']}
               />
             </div>
           ))
@@ -24,4 +24,4 @@ export const Icons: Story = {
   ),
 };
 
-export default { component: CircularIcon } as Meta;
+export default { component: DataTag } as Meta;

…components/Common/CircularIcon/index.tsx …s/ui-components/Common/DataTag/index.tsxpackages/ui-components/Common/CircularIcon/index.tsx renamed to packages/ui-components/Common/DataTag/index.tsx packages/ui-components/Common/CircularIcon/index.tsx renamed to packages/ui-components/Common/DataTag/index.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 
 import styles from './index.module.css';
 
-export type CircularIconProps = {
+export type DataTagProps = {
   kind:
     | 'event'
     | 'method'
@@ -14,6 +14,9 @@ export type CircularIconProps = {
   size?: 'lg' | 'md' | 'sm';
 };
 
+// These symbols match up with the types used in
+// node core, and the ones defined at
+// https://github.com/nodejs/api-docs-tooling/blob/main/src/types.d.ts#L22 (`HeadingMetadataEntry['type']`)
 const symbolMap = {
   event: 'E',
   method: 'M',
@@ -24,9 +27,9 @@ const symbolMap = {
   ctor: 'C',
 } as const;
 
-export default function CircularIcon({ kind, size = 'md' }: CircularIconProps) {
+export default function DataTag({ kind, size = 'md' }: DataTagProps) {
   return (
-    <div className={classNames(styles.icon, styles[size], styles[kind])}>
+    <div className={classNames(styles.dataTag, styles[size], styles[kind])}>
       <span>{symbolMap[kind]}</span>
     </div>
   );