fix(SW-190): reverted changes in MaxWidth

components/ContentType/LoyaltyPage/index.tsx

@@ -27,7 +27,7 @@ export default async function LoyaltyPage() {
           <Sidebar blocks={loyaltyPage.sidebar} />
         ) : null}
 
-        <MaxWidth className={styles.blocks} variant="content" tag="main">
+        <MaxWidth className={styles.blocks}>
           <header className={styles.header}>
             <Intro>
               <Title as="h2">{loyaltyPage.heading}</Title>

components/Intro/index.tsx

@@ -1,20 +1,11 @@
 import { PropsWithChildren } from "react"
 
-import MaxWidth from "@/components/MaxWidth"
-
 import styles from "./intro.module.css"
 
 export default async function Intro({ children }: PropsWithChildren) {
   return (
-    <MaxWidth variant="content" tag="div">
+    <div className={styles.intro}>
-      <MaxWidth
+      <div className={styles.content}>{children}</div>
-        className={styles.content}
+    </div>
-        variant="text"
-        align="left"
-        tag="div"
-      >
-        {children}
-      </MaxWidth>
-    </MaxWidth>
   )
 }

components/Intro/intro.module.css

@@ -1,3 +1,8 @@
+.intro {
+  max-width: 74.75rem;
+  margin: 0 auto;
+}
+
 .content {
   display: grid;
   gap: var(--Spacing-x2);

components/MaxWidth/index.tsx

@@ -1,21 +1,17 @@
 "use client"
+import { cva } from "class-variance-authority"
 
-import { maxWidthVariants } from "./variants"
+import styles from "./maxWidth.module.css"
 
 import type { MaxWidthProps } from "@/types/components/max-width"
 
+const maxWidthVariants = cva(styles.container)
+
 export default function MaxWidth({
   className,
   tag = "section",
-  variant,
-  align,
   ...props
 }: MaxWidthProps) {
   const Cmp = tag
-  return (
+  return <Cmp className={maxWidthVariants({ className })} {...props} />
-    <Cmp
-      className={maxWidthVariants({ className, variant, align })}
-      {...props}
-    />
-  )
 }

components/MaxWidth/maxWidth.module.css

@@ -1,21 +1,4 @@
 .container {
-  position: relative;
-  max-width: 100%;
-  width: 100%;
-}
-
-.container.default {
   max-width: var(--max-width, 1140px);
-}
+  position: relative;
-
-.container.text {
-  max-width: 49.5rem;
-}
-
-.container.content {
-  max-width: 74.75rem;
-}
-
-.container.center {
-  margin: 0 auto;
 }

components/MaxWidth/variants.ts

@@ -1,21 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./maxWidth.module.css"
-
-export const maxWidthVariants = cva(styles.container, {
-  variants: {
-    variant: {
-      text: styles.text,
-      content: styles.content,
-      default: styles.default,
-    },
-    align: {
-      center: styles.center,
-      left: styles.left,
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    align: "center",
-  },
-})

types/components/max-width.ts

@@ -1,9 +1,3 @@
-import { VariantProps } from "class-variance-authority"
+export interface MaxWidthProps extends React.HTMLAttributes<HTMLElement> {
-
-import { maxWidthVariants } from "@/components/MaxWidth/variants"
-
-export interface MaxWidthProps
-  extends React.HTMLAttributes<HTMLElement>,
-    VariantProps<typeof maxWidthVariants> {
   tag?: "article" | "div" | "main" | "section"
 }