Merge pull request #12960 from TylerAPfledderer/refactor/base-layout-to-DS

refactor(layouts): create story and update style for base layout

Author: corwintines

.storybook/main.ts

@@ -15,7 +15,10 @@ import type { StorybookConfig } from "@storybook/nextjs"
  */
 
 const config: StorybookConfig = {
-  stories: ["../src/components/**/*.stories.{ts,tsx}"],
+  stories: [
+    "../src/components/**/*.stories.tsx",
+    "../src/layouts/stories/*.stories.tsx",
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

src/@chakra-ui/foundations/sizes.ts

@@ -1,5 +1,5 @@
 const container = {
-  "2xl": "1440px",
+  "2xl": "1536px",
 }
 
 const sizes = {

src/layouts/RootLayout.tsx renamed to src/layouts/BaseLayout.tsx

@@ -14,13 +14,12 @@ import { SkipLink } from "@/components/SkipLink"
 // import TranslationBannerLegal from "@/components/TranslationBannerLegal"
 // import { toPosixPath } from "@/lib/utils/relativePath"
 // import { DEFAULT_LOCALE } from "@/lib/constants"
-import { lightTheme as oldTheme } from "../theme"
 
 const FeedbackWidget = dynamic(() => import("@/components/FeedbackWidget"), {
   ssr: false,
 })
 
-export const RootLayout = ({
+export const BaseLayout = ({
   children,
   // contentIsOutdated,
   // contentNotTranslated,
@@ -49,27 +48,37 @@ export const RootLayout = ({
   // const originalPagePath = toPosixPath(join(DEFAULT_LOCALE, asPath))
 
   return (
-    <Container mx="auto" maxW={oldTheme.variables.maxPageWidth}>
+    <>
+      {/**
+       * The Skip Link is positioned above the container to ensure it is not affecting the
+       * layout on initial load.
+       */}
       <SkipLink />
+      <Container maxW="container.2xl" marginInline="auto">
+        <Nav />
+
+        {/* TODO: FIX TRANSLATION BANNER LOGIC FOR https://github.com/ethereum/ethereum-org-website/issues/11305 */}
+        {/* <TranslationBanner
+            shouldShow={shouldShowTranslationBanner}
+            isPageContentEnglish={contentNotTranslated}
+            originalPagePath={originalPagePath}
+          />
+
+          <TranslationBannerLegal
+            shouldShow={shouldShowLegalTranslationBanner}
+            originalPagePath={originalPagePath}
+          /> */}
+
+        {children}
+
+        <Footer lastDeployLocaleTimestamp={lastDeployLocaleTimestamp} />
+      </Container>
+      {/**
+       * The Feedback Widget is positioned below the container to ensure it is not affecting the
+       * layout on initial load.
+       */}
 
-      <Nav />
-
-      {/* TODO: FIX TRANSLATION BANNER LOGIC FOR https://github.com/ethereum/ethereum-org-website/issues/11305 */}
-      {/* <TranslationBanner
-        shouldShow={shouldShowTranslationBanner}
-        isPageContentEnglish={contentNotTranslated}
-        originalPagePath={originalPagePath}
-      />
-
-      <TranslationBannerLegal
-        shouldShow={shouldShowLegalTranslationBanner}
-        originalPagePath={originalPagePath}
-      /> */}
-
-      {children}
-
-      <Footer lastDeployLocaleTimestamp={lastDeployLocaleTimestamp} />
       <FeedbackWidget />
-    </Container>
+    </>
   )
 }

src/layouts/index.ts

@@ -1,6 +1,6 @@
+export * from "./BaseLayout"
 export * from "./Docs"
 export * from "./Roadmap"
-export * from "./RootLayout"
 export * from "./Staking"
 export * from "./Static"
 export * from "./Tutorial"

src/layouts/stories/BaseLayout.stories.tsx

@@ -0,0 +1,45 @@
+import { Center } from "@chakra-ui/react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { langViewportModes } from "../../../.storybook/modes"
+import { BaseLayout as BaseLayoutComponent } from "../BaseLayout"
+
+const meta = {
+  title: "Templates/BaseLayout",
+  component: BaseLayoutComponent,
+  parameters: {
+    layout: "fullscreen",
+    chromatic: {
+      modes: {
+        ...langViewportModes,
+      },
+    },
+  },
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+    lastDeployLocaleTimestamp: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} satisfies Meta<typeof BaseLayoutComponent>
+
+export default meta
+
+export const BaseLayout: StoryObj<typeof meta> = {
+  args: {
+    children: (
+      <Center h="497px" border="2px dashed" borderColor="primary.base">
+        Content Here
+      </Center>
+    ),
+    contentIsOutdated: false,
+    contentNotTranslated: false,
+    lastDeployLocaleTimestamp: "May 14, 2021",
+  },
+}

src/pages/_app.tsx

@@ -13,7 +13,7 @@ import { AppPropsWithLayout } from "@/lib/types"
 import "../styles/global.css"
 
 import { useLocaleDirection } from "@/hooks/useLocaleDirection"
-import { RootLayout } from "@/layouts/RootLayout"
+import { BaseLayout } from "@/layouts/BaseLayout"
 import { mono } from "@/lib/fonts"
 
 const App = ({ Component, pageProps }: AppPropsWithLayout) => {
@@ -45,13 +45,13 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
         `}
       </style>
       <ChakraProvider theme={theme}>
-        <RootLayout
+        <BaseLayout
           contentIsOutdated={!!pageProps.frontmatter?.isOutdated}
           contentNotTranslated={pageProps.contentNotTranslated}
           lastDeployLocaleTimestamp={pageProps.lastDeployLocaleTimestamp}
         >
           {getLayout(<Component {...pageProps} />)}
-        </RootLayout>
+        </BaseLayout>
       </ChakraProvider>
     </>
   )