ethereum-org-website icon indicating copy to clipboard operation
ethereum-org-website copied to clipboard

Published 20 hours ago • verified publisher icon ethereum

DS Implementation - SkipNav

Open TylerAPfledderer opened this issue 9 months ago • 22 comments

🚨As of the initial posting of this issue, a new design needs to be created in Figma by @nloureiro before executing this update. The issue can still be assigned by a contributor in the meantime.

Update the existing SkipNav component to use a new design.

Currently, this component is fully custom in it's styles and handling of the link redirect to content in the given page. Recommend investigating the use of the SkipNavLink and SkipNavContent provided by Chakra to handle in consideration of accessibility.

Be aware that SkipNavLink under the hood renders a primitive a tag with needed logic passed to it. We should retain this render, as its only job is to send the user to the specified section of content.

It also has it's own theme config SkipLink. See source code.

In summary of initial recommendations:

  • Remove the custom SkipLink file in favor of keeping styling in the component theme configuration
  • Any translated content and href can be supplied at the parent level RootLayout.
  • Import SkipNavLink / SkipNavContent directly from Chakra

cc @pettinarip Do NOT assign me! 😅

TylerAPfledderer avatar May 08 '24 16:05 TylerAPfledderer

Could you assign me, please?

murluki avatar May 09 '24 13:05 murluki

@wackerow I want to work on this issue, once the Figma design is updated.

Dharmik79 avatar May 13 '24 08:05 Dharmik79

@murluki are you able to do the Figma design proposal?

nloureiro avatar May 13 '24 09:05 nloureiro

@nloureiro yes, I can help you with this.

murluki avatar May 13 '24 12:05 murluki

@nloureiro yes, I can help you with this.

great! will you create a Figma file? or do you want me to create one.

nloureiro avatar May 13 '24 13:05 nloureiro

@murluki just to clarify, are you doing the design and the implementation in the code? or just the design part? assigning to you in the meantime.

pettinarip avatar May 13 '24 13:05 pettinarip

@nloureiro could you please create the Figma file? @pettinarip I’ll be doing the front end coding part for this task.

murluki avatar May 13 '24 14:05 murluki

@nloureiro could you please create the Figma file? @pettinarip I’ll be doing the front end coding part for this task.

go for it!!! https://www.figma.com/design/EecunGD6oTh62h7rdukaFL/Skip-Nav-component?node-id=1%3A49&t=lHyaiG0J1dR9xp0Q-1

Thank you for your collaboration

nloureiro avatar May 13 '24 15:05 nloureiro

@pettinarip @murluki I updated this issue's description to give better clarity in describing what Chakra's SkipNavLink renders.

TylerAPfledderer avatar May 14 '24 15:05 TylerAPfledderer

Hi I would like to help out on this, is it possible to assign me also to this?

surajpsuresh avatar May 19 '24 10:05 surajpsuresh

@surajpsuresh Hi, I am actually done with it and will be pushing it tonight

murluki avatar May 19 '24 10:05 murluki

Okay cool

surajpsuresh avatar May 19 '24 10:05 surajpsuresh

@murluki Is it possible to talk to you regarding contributing, best practices and how to actually share design work on GitHub. I have been looking at tutorials online, but would rally appreciate talking to an actual person on how to navigate in GitHub.

Any time that is convenient for you would work!

Cheers!

surajpsuresh avatar May 19 '24 10:05 surajpsuresh

@surajpsuresh of course, if you have telegram, hit me up at murluki_prg. I can share some tips with you :)

murluki avatar May 19 '24 10:05 murluki

Done

surajpsuresh avatar May 19 '24 10:05 surajpsuresh

@murluki and @surajpsuresh you may reach out to me if you need any clarification of the requirements! 😁

TylerAPfledderer avatar May 19 '24 22:05 TylerAPfledderer