Merge pull request #13900 from ethereum/ui-divider

refactor: extract ui/divider

Author: corwintines

src/@chakra-ui/components/components.utils.ts

@@ -9,7 +9,6 @@ const {
   Checkbox: checkboxDefaultTheme,
   CloseButton: closeButtonDefaultTheme,
   Code: codeDefaultTheme,
-  Divider: dividerDefaultTheme,
   Drawer: drawerDefaultTheme,
   Form: formDefaultTheme,
   FormLabel: formLabelDefaultTheme,
@@ -37,7 +36,6 @@ export {
   checkboxDefaultTheme,
   closeButtonDefaultTheme,
   codeDefaultTheme,
-  dividerDefaultTheme,
   drawerDefaultTheme,
   formDefaultTheme,
   formLabelDefaultTheme,

src/@chakra-ui/components/index.ts

@@ -8,7 +8,6 @@ import { Checkbox } from "./Checkbox"
 import {
   closeButtonDefaultTheme,
   codeDefaultTheme,
-  dividerDefaultTheme,
   drawerDefaultTheme,
   formDefaultTheme,
   formLabelDefaultTheme,
@@ -39,7 +38,6 @@ export default {
   Checkbox,
   CloseButton: closeButtonDefaultTheme,
   Code: codeDefaultTheme,
-  Divider: dividerDefaultTheme,
   Drawer: drawerDefaultTheme,
   Form: formDefaultTheme,
   FormLabel: formLabelDefaultTheme,

src/components/MdComponents/index.tsx

@@ -27,6 +27,7 @@ import LocaleDateTime from "../LocaleDateTime"
 import MainArticle from "../MainArticle"
 import { StandaloneQuizWidget } from "../Quiz/QuizWidget"
 import { ButtonLink } from "../ui/buttons/Button"
+import { Divider } from "../ui/divider"
 import { Flex } from "../ui/flex"
 import { ListItem, OrderedList, UnorderedList } from "../ui/list"
 import { mdxTableComponents } from "../ui/Table"
@@ -180,10 +181,6 @@ export const MobileButtonDropdown = ({
   <StyledButtonDropdown className={cn("mb-0", className)} {...props} />
 )
 
-export const Divider = () => (
-  <div className="my-16 h-1 w-[10%] bg-primary-high-contrast" />
-)
-
 // All custom React components
 export const reactComponents = {
   Badge,

src/components/ui/divider.tsx

@@ -0,0 +1,18 @@
+import { forwardRef } from "react"
+
+import { cn } from "@/lib/utils/cn"
+
+const Divider = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("my-16 h-1 w-[10%] bg-primary-high-contrast", className)}
+    {...props}
+  />
+))
+
+Divider.displayName = "Divider"
+
+export { Divider }

src/layouts/Docs.tsx

@@ -4,7 +4,6 @@ import {
   Badge,
   Box,
   type BoxProps,
-  Divider as ChakraDivider,
   Flex,
   type FlexProps,
   type ListProps,
@@ -42,6 +41,7 @@ import SideNav from "@/components/SideNav"
 import SideNavMobile from "@/components/SideNavMobile"
 import TableOfContents from "@/components/TableOfContents"
 import Translation from "@/components/Translation"
+import { Divider } from "@/components/ui/divider"
 import { mdxTableComponents } from "@/components/ui/Table"
 import YouTube from "@/components/YouTube"
 
@@ -58,15 +58,6 @@ const Page = (props: ChildOnlyProp & Pick<FlexProps, "dir">) => (
   />
 )
 
-const Divider = () => (
-  <ChakraDivider
-    my={16}
-    w="10%"
-    borderBottomWidth={1}
-    borderColor="homeDivider"
-  />
-)
-
 type ContentContainerProps = Pick<BoxProps, "children" | "dir">
 
 const ContentContainer = (props: ContentContainerProps) => (

src/layouts/Tutorial.tsx

@@ -4,7 +4,6 @@ import {
   Badge,
   Box,
   type BoxProps,
-  Divider,
   Flex,
   Kbd,
   Text,
@@ -35,6 +34,7 @@ import {
 import TableOfContents from "@/components/TableOfContents"
 import TooltipLink from "@/components/TooltipLink"
 import TutorialMetadata from "@/components/TutorialMetadata"
+import { Divider } from "@/components/ui/divider"
 import { mdxTableComponents } from "@/components/ui/Table"
 import YouTube from "@/components/YouTube"
 
@@ -93,16 +93,7 @@ const Heading4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   />
 )
 
-const StyledDivider = (props) => (
-  <Divider
-    my={16}
-    w="10%"
-    h="1"
-    opacity="1"
-    backgroundColor="homeDivider"
-    {...props}
-  />
-)
+const StyledDivider = (props) => <Divider {...props} />
 
 const Paragraph = (props: TextProps) => (
   <Text as="p" mt={8} mb={4} mx={0} color="text300" fontSize="md" {...props} />

src/pages/bug-bounty.tsx

@@ -28,6 +28,7 @@ import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
 import PageMetadata from "@/components/PageMetadata"
 import Translation from "@/components/Translation"
+import { Divider } from "@/components/ui/divider"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -168,10 +169,6 @@ const FullLeaderboardContainer = (props: ChildOnlyProp) => (
 
 const On = () => <Box w="8px" h="8px" bg="success400" borderRadius="64px" />
 
-const Divider = () => (
-  <Box my="16" mx="0" w="10%" h="1" backgroundColor="homeDivider" />
-)
-
 const Contact = (props: ChildOnlyProp) => (
   <Box
     borderRadius="2px"

src/pages/community.tsx

@@ -24,6 +24,7 @@ import { Image } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
 import OldHeading from "@/components/OldHeading"
 import PageMetadata from "@/components/PageMetadata"
+import { Divider } from "@/components/ui/divider"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -79,10 +80,6 @@ const Content = ({ children }: ChildOnlyProp) => {
   )
 }
 
-const Divider = () => {
-  return <Box my={16} w="10%" h={1} bgColor="homeDivider" />
-}
-
 const Page = ({ children }: ChildOnlyProp) => {
   return (
     <Flex

src/pages/dapps.tsx

@@ -14,8 +14,6 @@ import {
   Box,
   Button,
   type ButtonProps,
-  Divider as ChakraDivider,
-  type DividerProps,
   Flex,
   type FlexProps,
   Heading,
@@ -48,6 +46,7 @@ import ProductListComponent, {
   type ProductListProps,
 } from "@/components/ProductList"
 import Translation from "@/components/Translation"
+import { Divider } from "@/components/ui/divider"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -137,19 +136,6 @@ const Page = (props: ChildOnlyProp & FlexProps) => (
   />
 )
 
-const Divider = (props: DividerProps) => (
-  <ChakraDivider
-    opacity={1}
-    my={16}
-    w="10%"
-    borderBottomWidth="0.25rem"
-    borderColor="homeDivider"
-    {...props}
-  />
-)
-
-const CenterDivider = () => <Divider display="flex" justifyContent="center" />
-
 const Content = (props: ChildOnlyProp) => (
   <Box py={4} px={8} w="full" {...props} />
 )
@@ -1826,7 +1812,7 @@ const DappsPage = () => {
         )}
         {/* General content for all categories */}
         <Content>
-          <CenterDivider />
+          <Divider />
           {categories[selectedCategory].benefits && (
             <Box mt={12}>
               <H2>

src/pages/eth.tsx

@@ -32,6 +32,7 @@ import Text from "@/components/OldText"
 import PageMetadata from "@/components/PageMetadata"
 import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
 import Translation from "@/components/Translation"
+import { Divider } from "@/components/ui/divider"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -59,10 +60,6 @@ const Content = (props: ChildOnlyProp) => (
   <Box w="full" px={8} py={4} {...props} />
 )
 
-const Divider = () => (
-  <Box my={16} mx={0} w="10%" h={1} backgroundColor="homeDivider" />
-)
-
 const GrayContainer = (props: ChildOnlyProp) => (
   <Box
     width="full"