Skip to content

Commit 4908116

Browse files
pettinarippettinarip
committed
fix codebase to use new buttondropdown
1 parent 29e59a1 commit 4908116

File tree

6 files changed

+65
-98
lines changed

6 files changed

+65
-98
lines changed

‎src/components/LeftNavBar/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,10 @@ const LeftNavBar = ({
3232
>
3333
{dropdownLinks && (
3434
<div className="relative mb-8 flex items-end justify-end">
35-
<ButtonDropdown list={dropdownLinks} w="full" minW="240px" />
35+
<ButtonDropdown
36+
list={dropdownLinks}
37+
className="w-full min-w-[240px]"
38+
/>
3639
</div>
3740
)}
3841
<h2 className="mb-8 text-3xl leading-xs">

‎src/components/MdComponents/MdComponents.stories.tsx

Lines changed: 51 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import pickBy from "lodash/pickBy"
22
import type { Meta, StoryObj } from "@storybook/react/*"
33

4-
import type { List as ButtonDropdownList } from "@/components/ButtonDropdown"
5-
64
import { viewportModes } from "../../../.storybook/modes"
75

86
import MdComponentSet from "."
@@ -34,8 +32,6 @@ const {
3432
hr: HR,
3533
pre: Pre,
3634
Page,
37-
MobileButton,
38-
MobileButtonDropdown,
3935
} = MdComponentSet
4036

4137
const Para = () => (
@@ -53,9 +49,6 @@ export const MdComponents: StoryObj = {
5349
<div className="mx-auto max-w-screen-lg">
5450
<Page>
5551
<ContentContainer>
56-
<MobileButton>
57-
<MobileButtonDropdown list={roadmapDropdownLinks} />
58-
</MobileButton>
5952
<Heading1>Heading1</Heading1>
6053
<Para />
6154
<Heading2>Heading2</Heading2>
@@ -76,54 +69,54 @@ export const MdComponents: StoryObj = {
7669
),
7770
}
7871

79-
const roadmapDropdownLinks: ButtonDropdownList = {
80-
text: "nav-roadmap-options",
81-
ariaLabel: "nav-roadmap-options-alt",
82-
items: [
83-
{
84-
text: "nav-roadmap-home",
85-
href: "/roadmap/",
86-
matomo: {
87-
eventCategory: `Roadmap dropdown`,
88-
eventAction: `Clicked`,
89-
eventName: "clicked roadmap home",
90-
},
91-
},
92-
{
93-
text: "nav-roadmap-security",
94-
href: "/roadmap/security",
95-
matomo: {
96-
eventCategory: `Roadmap security dropdown`,
97-
eventAction: `Clicked`,
98-
eventName: "clicked roadmap security",
99-
},
100-
},
101-
{
102-
text: "nav-roadmap-scaling",
103-
href: "/roadmap/scaling",
104-
matomo: {
105-
eventCategory: `Roadmap scaling dropdown`,
106-
eventAction: `Clicked`,
107-
eventName: "clicked roadmap scaling home",
108-
},
109-
},
110-
{
111-
text: "nav-roadmap-user-experience",
112-
href: "/roadmap/user-experience/",
113-
matomo: {
114-
eventCategory: `Roadmap user experience dropdown`,
115-
eventAction: `Clicked`,
116-
eventName: "clicked roadmap user experience home",
117-
},
118-
},
119-
{
120-
text: "nav-roadmap-future-proofing",
121-
href: "/roadmap/future-proofing",
122-
matomo: {
123-
eventCategory: `Roadmap future-proofing dropdown`,
124-
eventAction: `Clicked`,
125-
eventName: "clicked roadmap future-proofing home",
126-
},
127-
},
128-
],
129-
}
72+
// const roadmapDropdownLinks: ButtonDropdownList = {
73+
// text: "nav-roadmap-options",
74+
// ariaLabel: "nav-roadmap-options-alt",
75+
// items: [
76+
// {
77+
// text: "nav-roadmap-home",
78+
// href: "/roadmap/",
79+
// matomo: {
80+
// eventCategory: `Roadmap dropdown`,
81+
// eventAction: `Clicked`,
82+
// eventName: "clicked roadmap home",
83+
// },
84+
// },
85+
// {
86+
// text: "nav-roadmap-security",
87+
// href: "/roadmap/security",
88+
// matomo: {
89+
// eventCategory: `Roadmap security dropdown`,
90+
// eventAction: `Clicked`,
91+
// eventName: "clicked roadmap security",
92+
// },
93+
// },
94+
// {
95+
// text: "nav-roadmap-scaling",
96+
// href: "/roadmap/scaling",
97+
// matomo: {
98+
// eventCategory: `Roadmap scaling dropdown`,
99+
// eventAction: `Clicked`,
100+
// eventName: "clicked roadmap scaling home",
101+
// },
102+
// },
103+
// {
104+
// text: "nav-roadmap-user-experience",
105+
// href: "/roadmap/user-experience/",
106+
// matomo: {
107+
// eventCategory: `Roadmap user experience dropdown`,
108+
// eventAction: `Clicked`,
109+
// eventName: "clicked roadmap user experience home",
110+
// },
111+
// },
112+
// {
113+
// text: "nav-roadmap-future-proofing",
114+
// href: "/roadmap/future-proofing",
115+
// matomo: {
116+
// eventCategory: `Roadmap future-proofing dropdown`,
117+
// eventAction: `Clicked`,
118+
// eventName: "clicked roadmap future-proofing home",
119+
// },
120+
// },
121+
// ],
122+
// }

‎src/components/MdComponents/index.tsx

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
import { ComponentProps, type HTMLAttributes } from "react"
1+
import { type HTMLAttributes } from "react"
22
import { Badge, Box, type BoxProps } from "@chakra-ui/react"
33

44
import type { ChildOnlyProp } from "@/lib/types"
55

6-
import ButtonDropdown, {
7-
type ButtonDropdownProps,
8-
} from "@/components/ButtonDropdown"
96
import Contributors from "@/components/Contributors"
107
import MarkdownImage from "@/components/MarkdownImage"
118
import TooltipLink from "@/components/TooltipLink"
@@ -164,23 +161,6 @@ export const MobileButton = (props: ChildOnlyProp) => {
164161
)
165162
}
166163

167-
export const StyledButtonDropdown = ({
168-
list,
169-
className,
170-
...rest
171-
}: HTMLAttributes<HTMLDivElement> & Pick<ButtonDropdownProps, "list">) => (
172-
<Flex className={cn("mb-8 items-end justify-end", className)} {...rest}>
173-
<ButtonDropdown list={list} w={{ base: "full", lg: "auto" }} minW="240px" />
174-
</Flex>
175-
)
176-
177-
export const MobileButtonDropdown = ({
178-
className,
179-
...props
180-
}: ComponentProps<typeof StyledButtonDropdown>) => (
181-
<StyledButtonDropdown className={cn("mb-0", className)} {...props} />
182-
)
183-
184164
// All custom React components
185165
export const reactComponents = {
186166
Badge,
@@ -197,10 +177,8 @@ export const reactComponents = {
197177
GlossaryTooltip,
198178
InfoBanner,
199179
MobileButton,
200-
MobileButtonDropdown,
201180
Page,
202181
QuizWidget: StandaloneQuizWidget,
203-
StyledButtonDropdown,
204182
IssuesList,
205183
Title,
206184
YouTube,

‎src/components/Staking/StakingConsiderations/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const StakingConsiderations = ({ page }: StakingConsiderationsProps) => {
7676

7777
return (
7878
<Flex flexDir={{ base: "column", md: "row" }}>
79-
<ButtonDropdown list={dropdownLinks} hideFrom={mdBp} />
79+
<ButtonDropdown list={dropdownLinks} className="md:hidden" />
8080
{/* TODO: Improve a11y */}
8181
<Box flex={1} hideBelow={mdBp}>
8282
{!!pageData && (

‎src/layouts/ContentLayout.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import type { HTMLAttributes } from "react"
22

3+
import ButtonDropdown from "@/components/ButtonDropdown"
34
import FeedbackCard from "@/components/FeedbackCard"
45
import LeftNavBar, { LeftNavBarProps } from "@/components/LeftNavBar"
5-
import {
6-
ContentContainer,
7-
MobileButton,
8-
MobileButtonDropdown,
9-
Page,
10-
} from "@/components/MdComponents"
6+
import { ContentContainer, MobileButton, Page } from "@/components/MdComponents"
117

128
type ContentLayoutProps = HTMLAttributes<HTMLDivElement> &
139
Pick<LeftNavBarProps, "dropdownLinks" | "tocItems" | "maxDepth"> & {
@@ -42,7 +38,7 @@ export const ContentLayout = ({
4238

4339
{dropdownLinks && (
4440
<MobileButton>
45-
<MobileButtonDropdown list={dropdownLinks} />
41+
<ButtonDropdown list={dropdownLinks} />
4642
</MobileButton>
4743
)}
4844
</Page>

‎src/pages/staking/index.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,17 @@ import type {
1212
StakingStatsData,
1313
} from "@/lib/types"
1414

15-
import { List as ButtonDropdownList } from "@/components/ButtonDropdown"
15+
import ButtonDropdown, {
16+
List as ButtonDropdownList,
17+
} from "@/components/ButtonDropdown"
1618
import ButtonLink, {
1719
type ButtonLinkProps,
1820
} from "@/components/Buttons/ButtonLink"
1921
import Card from "@/components/Card"
2022
import ExpandableCard from "@/components/ExpandableCard"
2123
import FeedbackCard from "@/components/FeedbackCard"
2224
import LeftNavBar from "@/components/LeftNavBar"
23-
import {
24-
ContentContainer,
25-
MobileButton,
26-
MobileButtonDropdown,
27-
Page,
28-
} from "@/components/MdComponents"
25+
import { ContentContainer, MobileButton, Page } from "@/components/MdComponents"
2926
import PageHero from "@/components/PageHero"
3027
import PageMetadata from "@/components/PageMetadata"
3128
import StakingCommunityCallout from "@/components/Staking/StakingCommunityCallout"
@@ -633,7 +630,7 @@ const StakingPage = ({
633630
</Flex>
634631
</ContentContainer>
635632
<MobileButton>
636-
<MobileButtonDropdown list={dropdownLinks} />
633+
<ButtonDropdown list={dropdownLinks} />
637634
</MobileButton>
638635
</Page>
639636
</PageContainer>

0 commit comments

Comments
 (0)