refactor: [M3-7509, M3-7518] TopMenu and TagsList v7 Stories

packages/manager/.changeset/pr-9948-tech-stories-1701381411461.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+TopMenu and TagsList Storybook v7 Stories ([#9948](https://github.com/linode/manager/pull/9948))

packages/manager/src/components/ColorPalette/ColorPalette.stories.mdx

@@ -1,7 +1,7 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { ColorPalette } from './ColorPalette';
 
-<Meta title="Core Styles/Color Palette" component={ColorPalette} />
+<Meta title="Design System/Color Palette" component={ColorPalette} />
 
 # Color Palette
 

packages/manager/src/components/Tags/Tags.stories.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { Tags } from './Tags';
+
+import type { TagsProps } from './Tags';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export const Default: StoryObj<TagsProps> = {
+  render: (args) => <Tags {...args} />,
+};
+
+const meta: Meta<TagsProps> = {
+  args: {
+    tags: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'],
+  },
+  component: Tags,
+  title: 'Components/Tags/Tags List',
+};
+export default meta;

packages/manager/src/components/Tags/Tags.tsx

@@ -5,10 +5,13 @@ import { ShowMore } from 'src/components/ShowMore/ShowMore';
 import { Tag } from 'src/components/Tag/Tag';
 
 export interface TagsProps {
+  /**
+   * An array of tags to be displayed.
+   */
   tags: string[];
 }
 
-const Tags = (props: TagsProps) => {
+export const Tags = (props: TagsProps) => {
   const { tags } = props;
 
   const renderTags = (tags: string[]) => {
@@ -40,5 +43,3 @@ const Tags = (props: TagsProps) => {
     </>
   );
 };
-
-export { Tags };

packages/manager/src/features/TopMenu/TopMenu.stories.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { TopMenu } from './TopMenu';
+
+import type { TopMenuProps } from './TopMenu';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export const Default: StoryObj<TopMenuProps> = {
+  render: (args) => <TopMenu {...args} />,
+};
+
+const meta: Meta<TopMenuProps> = {
+  args: {
+    desktopMenuToggle: () => null,
+    isSideMenuOpen: false,
+    openSideMenu: () => null,
+    username: 'User 1',
+  },
+  component: TopMenu,
+  title: 'Features/Navigation/Top Menu',
+};
+export default meta;

packages/manager/src/features/TopMenu/TopMenu.tsx

@@ -17,13 +17,17 @@ import SearchBar from './SearchBar/SearchBar';
 import { TopMenuIcon } from './TopMenuIcon';
 import { UserMenu } from './UserMenu';
 
-interface TopMenuProps {
+export interface TopMenuProps {
   desktopMenuToggle: () => void;
   isSideMenuOpen: boolean;
   openSideMenu: () => void;
   username: string;
 }
 
+/**
+ * - Items presented in the top navigation are considered universally important and should be available regardless of any particular task.
+ * - The number of items should be limited. In the future, **Help & Support** could become a drop down with links to **Community**, **Guides**, and etc.
+ */
 export const TopMenu = React.memo((props: TopMenuProps) => {
   const { desktopMenuToggle, isSideMenuOpen, openSideMenu, username } = props;