From 841d04a36174e9aff0285569104f4dffe3477ecf Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 30 Nov 2023 16:23:48 -0500
Subject: [PATCH 1/3] Tags + TopMenu

---
 .../src/components/Tags/Tags.stories.mdx      | 19 -----------
 .../src/components/Tags/Tags.stories.tsx      | 19 +++++++++++
 packages/manager/src/components/Tags/Tags.tsx |  7 ++--
 .../src/components/TopMenu.stories.mdx        | 33 -------------------
 .../src/features/TopMenu/TopMenu.stories.tsx  | 22 +++++++++++++
 .../manager/src/features/TopMenu/TopMenu.tsx  |  6 +++-
 6 files changed, 50 insertions(+), 56 deletions(-)
 delete mode 100644 packages/manager/src/components/Tags/Tags.stories.mdx
 create mode 100644 packages/manager/src/components/Tags/Tags.stories.tsx
 delete mode 100644 packages/manager/src/components/TopMenu.stories.mdx
 create mode 100644 packages/manager/src/features/TopMenu/TopMenu.stories.tsx

diff --git a/packages/manager/src/components/Tags/Tags.stories.mdx b/packages/manager/src/components/Tags/Tags.stories.mdx
deleted file mode 100644
index 5be03fea587..00000000000
--- a/packages/manager/src/components/Tags/Tags.stories.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Tags } from './Tags';
-
-<Meta title="Components/Tags/Tags List" component={Tags} />
-
-# Tags List
-
-export const Template = (args) => <Tags {...args} />;
-
-<Canvas>
-  <Story
-    name="Tags List"
-    args={{ tags: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'] }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Tags List" sort="requiredFirst" sort="requiredFirst"/>
diff --git a/packages/manager/src/components/Tags/Tags.stories.tsx b/packages/manager/src/components/Tags/Tags.stories.tsx
new file mode 100644
index 00000000000..27731490de1
--- /dev/null
+++ b/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;
diff --git a/packages/manager/src/components/Tags/Tags.tsx b/packages/manager/src/components/Tags/Tags.tsx
index 8368631426f..970e750d9e5 100644
--- a/packages/manager/src/components/Tags/Tags.tsx
+++ b/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 };
diff --git a/packages/manager/src/components/TopMenu.stories.mdx b/packages/manager/src/components/TopMenu.stories.mdx
deleted file mode 100644
index 87cbcc2fb28..00000000000
--- a/packages/manager/src/components/TopMenu.stories.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { profileFactory } from 'src/factories';
-import { TopMenu } from 'src/features/TopMenu/TopMenu';
-import { useProfile } from 'src/queries/profile';
-
-<Meta title="Features/Navigation/Top Menu" component={TopMenu} />
-
-# Top Menu
-
-### Overview
-
----
-
-- 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 Template = () => {
-  return (
-    <TopMenu
-      isSideMenuOpen={false}
-      openSideMenu={() => null}
-      desktopMenuToggle={() => null}
-      isLoggedInAsCustomer={false}
-      username=""
-    />
-  );
-};
-
-<Canvas style={{ background: '#f4f5f6' }}>
-  <Story name="Top Menu">
-    <Template />
-  </Story>
-</Canvas>
diff --git a/packages/manager/src/features/TopMenu/TopMenu.stories.tsx b/packages/manager/src/features/TopMenu/TopMenu.stories.tsx
new file mode 100644
index 00000000000..0eeed364aa4
--- /dev/null
+++ b/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;
diff --git a/packages/manager/src/features/TopMenu/TopMenu.tsx b/packages/manager/src/features/TopMenu/TopMenu.tsx
index 95229854388..ddccb62cd6c 100644
--- a/packages/manager/src/features/TopMenu/TopMenu.tsx
+++ b/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;
 

From b0e1c1c84c2f6216cda033d13f58fbc5b38f147e Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 30 Nov 2023 16:38:33 -0500
Subject: [PATCH 2/3] remove icons .mdx stories

---
 .../ColorPalette/ColorPalette.stories.mdx     |  2 +-
 .../ImageSelect/imageIcons.stories.mdx        | 45 ---------------
 .../src/components/UIIcons.stories.mdx        | 49 -----------------
 .../TopMenu/NavigationIcons.stories.mdx       | 55 -------------------
 4 files changed, 1 insertion(+), 150 deletions(-)
 delete mode 100644 packages/manager/src/components/ImageSelect/imageIcons.stories.mdx
 delete mode 100644 packages/manager/src/components/UIIcons.stories.mdx
 delete mode 100644 packages/manager/src/features/TopMenu/NavigationIcons.stories.mdx

diff --git a/packages/manager/src/components/ColorPalette/ColorPalette.stories.mdx b/packages/manager/src/components/ColorPalette/ColorPalette.stories.mdx
index f8adf3728df..4e741748053 100644
--- a/packages/manager/src/components/ColorPalette/ColorPalette.stories.mdx
+++ b/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
 
diff --git a/packages/manager/src/components/ImageSelect/imageIcons.stories.mdx b/packages/manager/src/components/ImageSelect/imageIcons.stories.mdx
deleted file mode 100644
index 9d1ccb701f3..00000000000
--- a/packages/manager/src/components/ImageSelect/imageIcons.stories.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { makeStyles } from '@mui/styles';
-import { distroIcons } from 'src/components/ImageSelect/icons';
-import Grid from '@mui/material/Unstable_Grid2';
-import 'font-logos/assets/font-logos.css';
-
-<Meta title="Core Styles/Icons/Distribution Icons" />
-
-export const useStyles = makeStyles(() => ({
-  item: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    width: 125,
-    '& span': {
-      fontSize: '40px',
-    },
-  },
-  label: {
-    fontSize: '0.875rem',
-    margin: 8,
-  },
-}));
-
-export const DistributionIcons = () => {
-  const classes = useStyles();
-  return (
-    <Grid container>
-      {Object.entries(distroIcons).map(([iconLabel, icon]) => {
-        return (
-          <Grid key={iconLabel} className={classes.item}>
-            <span className={`fl-${icon}`}></span>
-            <div className={classes.label}>{iconLabel}</div>
-          </Grid>
-        );
-      })}
-    </Grid>
-  );
-};
-
-# Distribution Icons
-
-<Canvas>
-  <DistributionIcons />
-</Canvas>
diff --git a/packages/manager/src/components/UIIcons.stories.mdx b/packages/manager/src/components/UIIcons.stories.mdx
deleted file mode 100644
index a79012f191b..00000000000
--- a/packages/manager/src/components/UIIcons.stories.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { makeStyles } from '@mui/styles';
-import FileCopy from 'src/assets/icons/copy.svg';
-import Docs from 'src/assets/icons/docs.svg';
-import Download from 'src/assets/icons/download.svg';
-import GroupByTag from 'src/assets/icons/group-by-tag.svg';
-import Guides from 'src/assets/icons/guides.svg';
-import Info from 'src/assets/icons/info.svg';
-import Invoice from 'src/assets/icons/invoice.svg';
-import Kebab from 'src/assets/icons/kebab.svg';
-import Reboot from 'src/assets/icons/reboot.svg';
-import Reload from 'src/assets/icons/reload.svg';
-import Reset from 'src/assets/icons/reset.svg';
-import SortUp from 'src/assets/icons/sort-up.svg';
-import Sort from 'src/assets/icons/sort.svg';
-import Trash from 'src/assets/icons/trash.svg';
-import Undo from 'src/assets/icons/undo.svg';
-import Unsorted from 'src/assets/icons/unsorted.svg';
-import UploadPending from 'src/assets/icons/uploadPending.svg';
-import {
-  useStyles,
-  renderIcons,
-} from 'src/features/TopMenu/NavigationIcons.stories.mdx';
-
-<Meta title="Core Styles/Icons/UI Icons" />
-
-export const icons = {
-  Copy: <FileCopy />,
-  Docs: <Docs />,
-  Download: <Download />,
-  GroupByTag: <GroupByTag />,
-  Guides: <Guides />,
-  Info: <Info />,
-  Invoice: <Invoice />,
-  Kebab: <Kebab />,
-  Reboot: <Reboot />,
-  Reload: <Reload />,
-  Reset: <Reset />,
-  SortUp: <SortUp />,
-  Sort: <Sort />,
-  Trash: <Trash />,
-  Undo: <Undo />,
-  Unsorted: <Unsorted />,
-  UploadPending: <UploadPending />,
-};
-
-# UI Icons
-
-<Canvas>{renderIcons(icons)}</Canvas>
diff --git a/packages/manager/src/features/TopMenu/NavigationIcons.stories.mdx b/packages/manager/src/features/TopMenu/NavigationIcons.stories.mdx
deleted file mode 100644
index 379f5653383..00000000000
--- a/packages/manager/src/features/TopMenu/NavigationIcons.stories.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { makeStyles } from '@mui/styles';
-import Grid from '@mui/material/Unstable_Grid2';
-import UserIcon from 'src/assets/icons/account.svg';
-import Community from 'src/assets/icons/community_nav.svg';
-import TooltipIcon from 'src/assets/icons/get_help.svg';
-import Bell from 'src/assets/icons/notification.svg';
-
-<Meta title="Core Styles/Icons/Navigation Icons" />
-
-export const useStyles = makeStyles(() => ({
-  item: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    width: 125,
-    '& svg': {
-      color: '#333',
-      width: 40,
-      height: 40,
-    },
-  },
-  label: {
-    fontSize: '0.875rem',
-    margin: 8,
-    textAlign: 'center',
-  },
-}));
-
-export const icons = {
-  'Help & Support': <TooltipIcon />,
-  'Linode Cloud Community': <Community />,
-  Notifications: <Bell />,
-  Account: <UserIcon />,
-};
-
-export const renderIcons = (icons) => {
-  const classes = useStyles();
-  return (
-    <Grid container spacing={2}>
-      {Object.entries(icons).map(([iconLabel, icon]) => {
-        return (
-          <Grid key={iconLabel} className={classes.item}>
-            {icon}
-            <div className={classes.label}>{iconLabel}</div>
-          </Grid>
-        );
-      })}
-    </Grid>
-  );
-};
-
-# Navigation Icons
-
-<Canvas>{renderIcons(icons)}</Canvas>

From bf677ea1644770989d52aa12b9fb2998f91bfc02 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 30 Nov 2023 16:56:51 -0500
Subject: [PATCH 3/3] Added changeset: TopMenu and TagsList Storybook v7
 Stories

---
 .../manager/.changeset/pr-9948-tech-stories-1701381411461.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-9948-tech-stories-1701381411461.md

diff --git a/packages/manager/.changeset/pr-9948-tech-stories-1701381411461.md b/packages/manager/.changeset/pr-9948-tech-stories-1701381411461.md
new file mode 100644
index 00000000000..f73eedeed3f
--- /dev/null
+++ b/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))