-
Notifications
You must be signed in to change notification settings - Fork 5.2k
Roadmap tracks page #15351
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Draft
corwintines
wants to merge
50
commits into
dev
Choose a base branch
from
roadmap-tracks-page
base: dev
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
Roadmap tracks page #15351
Changes from 46 commits
Commits
Show all changes
50 commits
Select commit
Hold shift + click to select a range
a6a3a58
setup future data
corwintines dec12b2
fix sticky bug
corwintines 2252c1e
Merge branch 'roadmap-page' into roadmap-tracks-page
corwintines 725a017
Merge branch 'roadmap-page' into roadmap-tracks-page
corwintines 29e9d08
setup hero section
corwintines cbe52f2
setup nav bar
corwintines 8b55655
setup tracks
corwintines 388136c
benefits content
corwintines 023d5cc
fix spacing
corwintines 02d920a
implement accordion
corwintines 5e34648
Merge branch 'roadmap-page' into roadmap-tracks-page
corwintines 5ffdde8
Merge branch 'roadmap-page' into roadmap-tracks-page
corwintines a5c4722
Merge branch 'dev' into roadmap-tracks-page
corwintines 09234a8
button, styling cleanup, default state
corwintines 2e0aee5
content setup
corwintines 5d3ca0f
setup ReactFlow nodes
corwintines 8b71de1
POC for shipped nodes
corwintines dcc6531
end goal node
corwintines 0afbfd9
style tweaking
corwintines 88c8851
refactor and task idea node
corwintines 0e82222
task research node
corwintines 8c35c87
cleanup
corwintines ed84629
sheduled and cleanup
corwintines f4a5bf9
Feature scheduled node
corwintines 3e8d1f3
feature shipped node
corwintines 3e743fc
group node tests
corwintines b768f9d
test
corwintines ef5796d
merge track
corwintines 9296509
Rollup node, track node, and surge chart
corwintines 4b5dc86
scourge nodes
corwintines 5a91422
purge track nodes
corwintines 9117463
verge track nodes
corwintines 91b8867
splurge track nodes
corwintines 251530e
fix some bugs
corwintines 1a1cf93
mock dialog
corwintines 7872c6c
Refactor to popover instead
corwintines 3a4a772
setup gradients and top section for popover
corwintines afd1726
popover body and todo list
corwintines c2cdf24
percentage bar
corwintines 4cd59ce
Merge branch 'dev' into roadmap-tracks-page
corwintines b3e114b
Explore ethereum roadmap section
corwintines 6806dd0
Add zoom in and out buttons, remove banner
corwintines 1a6f039
future releseases added
corwintines e18a44d
nav bar
corwintines e2e9b19
change requests
corwintines ede0fe3
change requests
corwintines 3386b7b
Draft Merge Copy
minimalsm 5bc40fc
refactor: use tailwind native bg gradient classes
wackerow 73b5916
Merge pull request #15524 from ethereum/tracks-gradients
corwintines cc13a9c
Merge pull request #15512 from ethereum/copyRoadmap
wackerow File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
app/[locale]/roadmap/tracks/_components/CustomNodes/EndGoalNode.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| "use client" | ||
|
|
||
| import { Handle, Position } from "@xyflow/react" | ||
|
|
||
| type EndGoalNodeProps = { | ||
| data: { | ||
| label: string | ||
| leftNode?: boolean | ||
| } | ||
| } | ||
|
|
||
| const EndGoalNode = ({ data }: EndGoalNodeProps) => { | ||
| return ( | ||
| <> | ||
| {data.leftNode && ( | ||
| <Handle | ||
| id="left" | ||
| type="target" | ||
| position={Position.Left} | ||
| style={{ | ||
| width: "14px", | ||
| height: "14px", | ||
| border: "2px solid hsla(var(--primary))", | ||
| backgroundColor: "hsla(var(--background))", | ||
| }} | ||
| isConnectable={true} | ||
| isConnectableEnd={true} | ||
| /> | ||
| )} | ||
| <div className="flex h-36 max-h-36 w-36 max-w-36 items-center justify-center rounded-full bg-primary p-4 text-center"> | ||
| <p className="font-inter text-[14px] font-bold leading-[160%] text-body-inverse"> | ||
| {data.label} | ||
| </p> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default EndGoalNode |
109 changes: 109 additions & 0 deletions
109
app/[locale]/roadmap/tracks/_components/CustomNodes/FeatureResearchNode.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| "use client" | ||
|
|
||
| import { Handle, Position } from "@xyflow/react" | ||
|
|
||
| type FeatureResearchNodeProps = { | ||
| data: { | ||
| label: string | ||
| topNode: boolean | ||
| leftNode: boolean | ||
| rightNode: boolean | ||
| bottomNode: boolean | ||
| } | ||
| } | ||
|
|
||
| const FeatureResearchNode = ({ data }: FeatureResearchNodeProps) => { | ||
| const { topNode, leftNode, rightNode, bottomNode } = data | ||
|
|
||
| return ( | ||
| <> | ||
| {topNode && ( | ||
| <Handle | ||
| id="top" | ||
| type="target" | ||
| position={Position.Top} | ||
| style={{ | ||
| width: "14px", | ||
| height: "14px", | ||
| border: "2px solid hsla(var(--primary))", | ||
| backgroundColor: "hsla(var(--background))", | ||
| }} | ||
| isConnectable={true} | ||
| isConnectableStart={true} | ||
| isConnectableEnd={true} | ||
| /> | ||
| )} | ||
| {topNode && ( | ||
| <Handle | ||
| id="top-source" | ||
| type="source" | ||
| position={Position.Top} | ||
| style={{ | ||
| width: "14px", | ||
| height: "14px", | ||
| border: "2px solid hsla(var(--primary))", | ||
| backgroundColor: "hsla(var(--background))", | ||
| }} | ||
| isConnectable={true} | ||
| isConnectableStart={true} | ||
| isConnectableEnd={true} | ||
| /> | ||
| )} | ||
| {leftNode && ( | ||
| <Handle | ||
| id="left" | ||
| type="target" | ||
| position={Position.Left} | ||
| style={{ | ||
| width: "14px", | ||
| height: "14px", | ||
| border: "2px solid hsla(var(--primary))", | ||
| backgroundColor: "hsla(var(--background))", | ||
| }} | ||
| isConnectable={true} | ||
| isConnectableEnd={true} | ||
| /> | ||
| )} | ||
| {rightNode && ( | ||
| <Handle | ||
| id="right" | ||
| type="source" | ||
| position={Position.Right} | ||
| style={{ | ||
| width: "14px", | ||
| height: "14px", | ||
| border: "2px solid hsla(var(--primary))", | ||
| backgroundColor: "hsla(var(--background))", | ||
| }} | ||
| isConnectable={true} | ||
| isConnectableStart={true} | ||
| /> | ||
| )} | ||
| {bottomNode && ( | ||
| <Handle | ||
| id="bottom" | ||
| type="target" | ||
| position={Position.Bottom} | ||
| style={{ | ||
| width: "14px", | ||
| height: "14px", | ||
| border: "2px solid hsla(var(--primary))", | ||
| backgroundColor: "hsla(var(--background))", | ||
| }} | ||
| isConnectable={true} | ||
| isConnectableStart={true} | ||
| /> | ||
| )} | ||
| <div className="z-0 flex w-44 max-w-44 flex-col items-center justify-center gap-2 rounded-lg border border-primary bg-primary-low-contrast p-8"> | ||
| <div className="text-center"> | ||
| <p className="text-md font-bold">{data.label}</p> | ||
| </div> | ||
| <div className="rounded-full bg-background-medium px-2 py-1"> | ||
| <p className="text-xs">RESEARCH</p> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default FeatureResearchNode |
88 changes: 88 additions & 0 deletions
88
app/[locale]/roadmap/tracks/_components/CustomNodes/FeatureScheduledNode.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| "use client" | ||
|
|
||
| import { Handle, Position } from "@xyflow/react" | ||
|
|
||
| type FeatureScheduledNodeProps = { | ||
| data: { | ||
| label: string | ||
| topNode: boolean | ||
| leftNode: boolean | ||
| rightNode: boolean | ||
| bottomNode: boolean | ||
| } | ||
| } | ||
|
|
||
| const FeatureScheduledNode = ({ data }: FeatureScheduledNodeProps) => { | ||
| const { topNode, leftNode, rightNode, bottomNode } = data | ||
|
|
||
| return ( | ||
| <> | ||
| {topNode && ( | ||
| <Handle | ||
| type="target" | ||
| position={Position.Top} | ||
| style={{ | ||
| width: "14px", | ||
| height: "14px", | ||
| border: "2px solid hsla(var(--primary))", | ||
| backgroundColor: "hsla(var(--background))", | ||
| }} | ||
| isConnectable={true} | ||
| isConnectableEnd={true} | ||
| /> | ||
| )} | ||
| {leftNode && ( | ||
| <Handle | ||
| type="target" | ||
| position={Position.Left} | ||
| style={{ | ||
| width: "14px", | ||
| height: "14px", | ||
| border: "2px solid hsla(var(--primary))", | ||
| backgroundColor: "hsla(var(--background))", | ||
| }} | ||
| isConnectable={true} | ||
| isConnectableEnd={true} | ||
| /> | ||
| )} | ||
| {rightNode && ( | ||
| <Handle | ||
| type="source" | ||
| position={Position.Right} | ||
| style={{ | ||
| width: "14px", | ||
| height: "14px", | ||
| border: "2px solid hsla(var(--primary))", | ||
| backgroundColor: "hsla(var(--background))", | ||
| }} | ||
| isConnectable={true} | ||
| isConnectableStart={true} | ||
| /> | ||
| )} | ||
| {bottomNode && ( | ||
| <Handle | ||
| type="source" | ||
| position={Position.Bottom} | ||
| style={{ | ||
| width: "14px", | ||
| height: "14px", | ||
| border: "2px solid hsla(var(--primary))", | ||
| backgroundColor: "hsla(var(--background))", | ||
| }} | ||
| isConnectable={true} | ||
| isConnectableStart={true} | ||
| /> | ||
| )} | ||
| <div className="z-0 flex w-44 max-w-44 flex-col items-center justify-center gap-2 rounded-lg border border-primary bg-primary-low-contrast p-8"> | ||
| <div className="text-center"> | ||
| <p className="text-md font-bold">{data.label}</p> | ||
| </div> | ||
| <div className="rounded-full bg-warning px-2 py-1"> | ||
| <p className="text-xs text-black">SCHEDULED</p> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default FeatureScheduledNode | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd like us to be able to build on top of existing DS components.
IMO we should use the Tag component in this case https://dev--63b7ea99632763723c7f4d6b.chromatic.com/?path=/story/molecules-display-content-tags--style-variants-basic