carbon-design-system · jeevakp · Aug 11, 2024
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -16,12 +16,14 @@
     "format:diff": "prettier --list-different \"**/*.{js,md,scss}\""
   },
   "dependencies": {
-    "@carbon/react": "^1.35.0",
+    "@carbon/icons-react": "^11.46.0",
+    "@carbon/react": "1.33.0",
     "eslint": "8.44.0",
     "eslint-config-next": "13.4.9",
     "next": "13.4.9",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "sass": "1.63.6"
   },
   "devDependencies": {
     "@commitlint/cli": "7.5.2",

diff --git a/src/app/globals.css b/src/app/globals.css
diff --git a/src/app/globals.scss b/src/app/globals.scss
@@ -0,0 +1,21 @@
+@use '@carbon/react';
+@use '@/components/TutorialHeader/tutorial-header';
+@use '@/app/home/landing-page';
+@use '@/app/repos/repo-page';
+
+/// Remove overrides once Carbon bugs are fixed upstream.
+/// Need grid option to not add page gutters at large viewports, to also use when nesting grids
+/// @link https://github.com/carbon-design-system/carbon/issues/2792
+@media (min-width: 42rem) {
+  .cds--grid--no-gutter {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+/// Padding was introduced in 10.3.0, needs an option to let grid set the viewport gutter
+/// @link https://github.com/carbon-design-system/carbon/issues/3010
+.cds--content {
+  margin-top: 3rem;
+  background: var(--cds-background);
+}
diff --git a/src/app/home/_landing-page.scss b/src/app/home/_landing-page.scss
diff --git a/src/app/home/page.js b/src/app/home/page.js
@@ -0,0 +1,5 @@
+`use client`;
+
+export default function LandingPage() {
+  return <div>LANDING PAGE</div>;
+}
diff --git a/src/app/layout.js b/src/app/layout.js
@@ -1,14 +1,17 @@
-import './globals.css'
+import './globals.scss';
+import { Providers } from './providers';
 
 export const metadata = {
   title: 'Carbon + Next13',
-  description: 'IBM Carbon Tutorial with NextJS 13',
-}
+  description: 'IBM Carbon Tutorial with Next.js 13',
+};
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
     </html>
-  )
+  );
 }
diff --git a/src/app/page.js b/src/app/page.js
@@ -1,9 +1,5 @@
+import LandingPage from './home/page';
 
-export default function Home() {
-  return (
-    <div>
-Hello Carbon! Well, not quite yet. This is the starting point for the Carbon NextJS tutorial.
-    </div>
-
-  )
+export default function Page() {
+  return <LandingPage />;
 }
diff --git a/src/app/providers.js b/src/app/providers.js
@@ -0,0 +1,15 @@
+'use client';
+
+import TutorialHeader from '@/components/TutorialHeader/TutorialHeader';
+import { Content, Theme } from '@carbon/react';
+
+export function Providers({ children }) {
+  return (
+    <div>
+      <Theme theme="g100">
+        <TutorialHeader />
+      </Theme>
+      <Content>{children}</Content>
+    </div>
+  );
+}
diff --git a/src/app/repos/_repo-page.scss b/src/app/repos/_repo-page.scss
diff --git a/src/app/repos/page.js b/src/app/repos/page.js
@@ -0,0 +1,5 @@
+`use client`;
+
+export default function RepoPage() {
+  return <div>REPOS PAGE</div>;
+}
diff --git a/src/components/TutorialHeader/TutorialHeader.js b/src/components/TutorialHeader/TutorialHeader.js
@@ -0,0 +1,74 @@
+import {
+  Header,
+  HeaderContainer,
+  HeaderName,
+  HeaderNavigation,
+  HeaderMenuButton,
+  HeaderMenuItem,
+  HeaderGlobalBar,
+  HeaderGlobalAction,
+  SkipToContent,
+  SideNav,
+  SideNavItems,
+  HeaderSideNavItems,
+} from '@carbon/react';
+import { Switcher, Notification, UserAvatar } from '@carbon/icons-react';
+import Link from 'next/link';
+
+const TutorialHeader = () => (
+  <HeaderContainer
+    render={({ isSideNavExpanded, onClickSideNavExpand }) => (
+      <Header aria-label="Carbon Tutorial">
+        <SkipToContent />
+        <HeaderMenuButton
+          aria-label="Open menu"
+          onClick={onClickSideNavExpand}
+          isActive={isSideNavExpanded}
+        />
+        <Link href="/" passHref legacyBehavior>
+          <HeaderName prefix="IBM">Carbon Tutorial</HeaderName>
+        </Link>
+        <HeaderNavigation aria-label="Carbon Tutorial">
+          <Link href="/repos" passHref legacyBehavior>
+            <HeaderMenuItem>Repositories</HeaderMenuItem>
+          </Link>
+        </HeaderNavigation>
+        <SideNav
+          aria-label="Side navigation"
+          expanded={isSideNavExpanded}
+          isPersistent={false}
+        >
+          <SideNavItems>
+            <HeaderSideNavItems>
+              <Link href="/repos" passHref legacyBehavior>
+                <HeaderMenuItem>Repositories</HeaderMenuItem>
+              </Link>
+            </HeaderSideNavItems>
+          </SideNavItems>
+        </SideNav>
+
+        <HeaderGlobalBar>
+          <HeaderGlobalAction
+            aria-label="Notifications"
+            tooltipAlignment="center"
+            className="action-icons"
+          >
+            <Notification size={20} />
+          </HeaderGlobalAction>
+          <HeaderGlobalAction
+            aria-label="User Avatar"
+            tooltipAlignment="center"
+            className="action-icons"
+          >
+            <UserAvatar size={20} />
+          </HeaderGlobalAction>
+          <HeaderGlobalAction aria-label="App Switcher" tooltipAlignment="end">
+            <Switcher size={20} />
+          </HeaderGlobalAction>
+        </HeaderGlobalBar>
+      </Header>
+    )}
+  />
+);
+
+export default TutorialHeader;
diff --git a/src/components/TutorialHeader/_tutorial-header.scss b/src/components/TutorialHeader/_tutorial-header.scss
@@ -0,0 +1,12 @@
+@use '@carbon/react/scss/colors';
+
+// overriding header tooltip bg color
+// because the navigation is dark themed while the content is white
+// which means the dark theme tooltip bg blends into the white content bg
+.cds--header__global .cds--popover-content {
+  background-color: colors.$gray-20;
+}
+
+.cds--header__global .cds--popover-caret {
+  background-color: colors.$gray-20;
+}