WS-2187 - Create Storybook Component for New Navigation

src/app/components/Navigation/README.md

@@ -0,0 +1,18 @@
+## Description
+
+This component renders a the navigation bar which comprises of two tiers, the primary being three categories and the secondary being links to topics.
+
+## Props
+
+| Name                      | type                        | Description                                               |
+| ------------------------- | --------------------------- | --------------------------------------------------------- |
+| navItems                  | Navigation[]                | Array of Navigation items to display within the component |
+| propsForTopBarOJComponent | { blocks?: TopStoryItem[] } | Optional object with blocks to display TopStoryItem       |
+
+## How to use
+
+Import and use the component in your page or story:
+
+```tsx
+import Navigation from './Navigation';
+```

src/app/components/Navigation/index.stories.tsx

@@ -1,8 +1,68 @@
-const Component = () => <div>Navigation</div>;
+import Navigation from '.';
+import { ServiceContextProvider } from '#app/contexts/ServiceContext';
+import type {
+  Navigation as NavigationType,
+  Services,
+} from '#app/models/types/global';
+import readme from './README.md';
+import metadata from './metadata.json';
+
+interface Props {
+  navItems: NavigationType[];
+  service: Services;
+}
+
+const Component = ({ navItems, service }: Props) => {
+  return (
+    <ServiceContextProvider service={service}>
+      <Navigation navItems={navItems} />
+    </ServiceContextProvider>
+  );
+};
 
 export default {
-  title: 'Components/NewNavigation',
+  title: 'Components/Navigation',
   Component,
+  parameters: {
+    docs: { readme },
+    metadata,
+  },
 };
 
-export const Example = Component;
+export const Arabic = () => {
+  const navItems = [
+    {
+      title: 'رئيسية',
+      url: '/home',
+      subItems: [
+        { title: 'أخبار', url: '/home/section1' },
+        { title: 'شاهد', url: '/home/section2' },
+        { title: 'صحة وعلوم', url: '/home/section3' },
+      ],
+    },
+    {
+      title: 'شاهد',
+      url: '/news',
+    },
+  ];
+  return <Component navItems={navItems} service={'arabic'} />;
+};
+
+export const Pidgin = () => {
+  const navItems = [
+    {
+      title: 'News',
+      url: '/home',
+      subItems: [
+        { title: 'Nigeria', url: '/home/section1' },
+        { title: 'Africa', url: '/home/section2' },
+        { title: 'World', url: '/home/section3' },
+      ],
+    },
+    {
+      title: 'Video',
+      url: '/news',
+    },
+  ];
+  return <Component navItems={navItems} service={'pidgin'} />;
+};

src/app/components/Navigation/metadata.json

@@ -0,0 +1,29 @@
+{
+  "alpha": false,
+  "lastUpdated": {
+    "day": 24,
+    "month": "February",
+    "year": 2026
+  },
+  "uxAccessibilityDoc": {
+    "done": false,
+    "reference": {
+      "url": "",
+      "label": "Screen Reader UX"
+    }
+  },
+  "acceptanceCriteria": {
+    "done": false,
+    "reference": {
+      "url": "",
+      "label": "Accessibility Acceptance Criteria"
+    }
+  },
+  "swarm": {
+    "done": false,
+    "reference": {
+      "url": "",
+      "label": "Accessibility Swarm Notes"
+    }
+  }
+}