remove mobile buttondropdown components from mdcomponents and create its own file

Author: pettinarip

src/components/MdComponents/MdComponents.stories.tsx

@@ -68,55 +68,3 @@ export const MdComponents: StoryObj = {
     </div>
   ),
 }
-
-// const roadmapDropdownLinks: ButtonDropdownList = {
-//   text: "nav-roadmap-options",
-//   ariaLabel: "nav-roadmap-options-alt",
-//   items: [
-//     {
-//       text: "nav-roadmap-home",
-//       href: "/roadmap/",
-//       matomo: {
-//         eventCategory: `Roadmap dropdown`,
-//         eventAction: `Clicked`,
-//         eventName: "clicked roadmap home",
-//       },
-//     },
-//     {
-//       text: "nav-roadmap-security",
-//       href: "/roadmap/security",
-//       matomo: {
-//         eventCategory: `Roadmap security dropdown`,
-//         eventAction: `Clicked`,
-//         eventName: "clicked roadmap security",
-//       },
-//     },
-//     {
-//       text: "nav-roadmap-scaling",
-//       href: "/roadmap/scaling",
-//       matomo: {
-//         eventCategory: `Roadmap scaling dropdown`,
-//         eventAction: `Clicked`,
-//         eventName: "clicked roadmap scaling home",
-//       },
-//     },
-//     {
-//       text: "nav-roadmap-user-experience",
-//       href: "/roadmap/user-experience/",
-//       matomo: {
-//         eventCategory: `Roadmap user experience dropdown`,
-//         eventAction: `Clicked`,
-//         eventName: "clicked roadmap user experience home",
-//       },
-//     },
-//     {
-//       text: "nav-roadmap-future-proofing",
-//       href: "/roadmap/future-proofing",
-//       matomo: {
-//         eventCategory: `Roadmap future-proofing dropdown`,
-//         eventAction: `Clicked`,
-//         eventName: "clicked roadmap future-proofing home",
-//       },
-//     },
-//   ],
-// }

src/components/MdComponents/index.tsx

@@ -152,15 +152,6 @@ export const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => {
   )
 }
 
-export const MobileButton = (props: ChildOnlyProp) => {
-  return (
-    <div
-      className="sticky bottom-0 z-sticky w-full bg-background p-8 shadow-md lg:hidden"
-      {...props}
-    />
-  )
-}
-
 // All custom React components
 export const reactComponents = {
   Badge,
@@ -176,7 +167,6 @@ export const reactComponents = {
   FeaturedText,
   GlossaryTooltip,
   InfoBanner,
-  MobileButton,
   Page,
   QuizWidget: StandaloneQuizWidget,
   IssuesList,

src/components/MobileButtonDropdown.tsx

@@ -0,0 +1,11 @@
+import ButtonDropdown, { type ButtonDropdownProps } from "./ButtonDropdown"
+
+const MobileButtonDropdown = (props: ButtonDropdownProps) => {
+  return (
+    <div className="sticky bottom-0 z-sticky w-full bg-background p-8 shadow-md lg:hidden">
+      <ButtonDropdown {...props} className="w-full lg:w-auto" />
+    </div>
+  )
+}
+
+export default MobileButtonDropdown

src/layouts/ContentLayout.tsx

@@ -1,9 +1,9 @@
 import type { HTMLAttributes } from "react"
 
-import ButtonDropdown from "@/components/ButtonDropdown"
 import FeedbackCard from "@/components/FeedbackCard"
 import LeftNavBar, { LeftNavBarProps } from "@/components/LeftNavBar"
-import { ContentContainer, MobileButton, Page } from "@/components/MdComponents"
+import { ContentContainer, Page } from "@/components/MdComponents"
+import MobileButtonDropdown from "@/components/MobileButtonDropdown"
 
 type ContentLayoutProps = HTMLAttributes<HTMLDivElement> &
   Pick<LeftNavBarProps, "dropdownLinks" | "tocItems" | "maxDepth"> & {
@@ -36,11 +36,7 @@ export const ContentLayout = ({
           <FeedbackCard />
         </ContentContainer>
 
-        {dropdownLinks && (
-          <MobileButton>
-            <ButtonDropdown list={dropdownLinks} className="w-full lg:w-auto" />
-          </MobileButton>
-        )}
+        {dropdownLinks && <MobileButtonDropdown list={dropdownLinks} />}
       </Page>
     </div>
   )

src/pages/staking/index.tsx

@@ -12,17 +12,16 @@ import type {
   StakingStatsData,
 } from "@/lib/types"
 
-import ButtonDropdown, {
-  List as ButtonDropdownList,
-} from "@/components/ButtonDropdown"
+import { List as ButtonDropdownList } from "@/components/ButtonDropdown"
 import ButtonLink, {
   type ButtonLinkProps,
 } from "@/components/Buttons/ButtonLink"
 import Card from "@/components/Card"
 import ExpandableCard from "@/components/ExpandableCard"
 import FeedbackCard from "@/components/FeedbackCard"
 import LeftNavBar from "@/components/LeftNavBar"
-import { ContentContainer, MobileButton, Page } from "@/components/MdComponents"
+import { ContentContainer, Page } from "@/components/MdComponents"
+import MobileButtonDropdown from "@/components/MobileButtonDropdown"
 import PageHero from "@/components/PageHero"
 import PageMetadata from "@/components/PageMetadata"
 import StakingCommunityCallout from "@/components/Staking/StakingCommunityCallout"
@@ -629,9 +628,7 @@ const StakingPage = ({
             </div>
           </Flex>
         </ContentContainer>
-        <MobileButton>
-          <ButtonDropdown list={dropdownLinks} className="w-full lg:w-auto" />
-        </MobileButton>
+        <MobileButtonDropdown list={dropdownLinks} />
       </Page>
     </PageContainer>
   )