search

ethereum / ethereum-org-website

Ethereum.org is a primary online resource for the Ethereum community.
https://ethereum.org/
MIT License
5.04k stars 4.78k forks source link

Implementation of visual testing epic #13043

Open corwintines opened 4 months ago

corwintines commented 4 months ago

This is part of our Testing epic from our Q2 roadmap.

Description

We have implemented support for storybook to do testing on ethereum.org. We would like to be able to catch visual regressions before they reach production, helping us build confidence so that we can improve stability of ethereum.org through a testing suite. The first phase of this will be implementing visual storybook tests on our suite of components.

Below is the list of components in the ethereum.org repo, broken down by Atomic design.

How to contribute

If you’d like to help with adding stories for components, please follow these steps:

  1. Read the storybook documentation for the project
  2. Leave a comment here asking which component you would ke to work out. We will be going from the top of the list to bottom (Atoms to Pages).
  3. We assign you to the file (by adding your handle next to the file name in the list).
    • Read and follow our storybook implementation guide for some tips & guidance.
    • If you were assigned to multiple files then create a separate PR for each component. It will make the testing and review process much simpler and more organized.
  4. Once you finish it (PR merged), we’ll mark it as done.
  5. Repeat!

Components

Atoms

In Atomic Design, as in chemistry, atoms are the basic elements that help inform everything. In the world of web applications, atoms are the foundational elements, such as HTML tags, fonts, animations, and color palettes. Web design “atoms” can also be less concrete. Examples include buttons or forms.

### Typeography
- [x] Headings
- [x] @chakra-ui/components/Link
- [x] Text 
### Media & icons - All visual references used in ethereum.org
- [x] Avatars
- [x] Icons
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13067
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13242
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13734
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13250
### Forms - Base html components used in forms
- [x] Buttons
- [x] Checkbox
- [x] Input variations and state
- [x] Radio
- [x] Select
- [x] Slider
- [x] Switch

Molecules

Molecules are the next-largest building block. Created by the joining of different atomic elements, molecules are complex by nature. Because they’re the product of various atoms, though, it’s possible to break them down, conceptually, into UI elements that are easier to digest. Examples of web design molecules include the things that become the backbone of the larger design system, such as form labels or input field.

### Navigation - components used to navigate to other pages. Inner or external to ethereum.org.
- [ ] BannerNotification
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13044
- [x] Breadcrumbs
- [ ]  https://github.com/ethereum/ethereum-org-website/issues/13733
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13878
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13879
- [ ] DocLink
- [ ] DocsNav
- [ ] LeftNavBar
- [x] Links
- [ ] MergeArticleList
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13210
- [ ] Sidenav #13063 @pettinarip
### Display content - components used to show data/information primary
- [ ] ActionCard
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13045
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13046
- [ ] BeaconChainActions
- [ ] BoxGrid
- [ ] BugBountyCards
- [ ] Callout
- [ ] Card
- [ ] CardList
- [ ] Codeblock
- [ ] CommunityEvents
- [ ] ContributorsQuizBanner
- [ ] CopyToClipboard
- [ ] DataProductCard
- [ ] EnergyConsumptionChart
- [ ] EnvWarningBanner
- [ ] EventCard
- [ ] FeedbackCard
- [ ] FileContributors
- [ ] GitStars
- [ ] HorizontalCard
- [ ] InfoBanner
- [ ] IssuesList
- [ ] Layer2ProductCard
- [ ] Leaderboard
- [ ] LearningToolsCardGrid
- [x] GlossaryDefinition
- [ ] NetworkUpgradeSummary
- [ ] Layer2Onboard
- [ ] MarkdownImage
- [ ] MatomoOptOut
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13047
- [ ] OrderedList
- [ ] ProductCard
- [ ] ProductDisclaimer
- [ ] ProductList
- [ ] RandomAppList
- [ ] Progress
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13048
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13211
- [ ] RoadmapImageContent
- [ ] SocialListItem
- [ ] StablecoinBoxGrid
- [ ] StablecoinsTable
- [x] Stat
- [ ] StateErrorMessage
- [x] Tables
- [x] Tags
- [ ] TitleCardList
- [ ] TranslationBanner
- [ ] TranslationBannerLegal
- [ ] TranslationLeaderboard
- [ ] TutorialMetadata
- [ ] TutorialTags
- [ ] UpgradeStatus
- [ ] UpgradeTableOfContents
- [ ] Youtube
### Disclosure content - components used to hide and show content useing interactive functions
- [x] Accordion
- [ ] ButtonDropdown
- [ ] StablecoinAccordion
- [x] Switch
- [ ] Tabs
### Overlay content - components used on top from the main page
- [ ] CodeModal
- [ ] ExpandableCard
- [ ] ExpandableInfo
- [x] FeedbackWidget
- [x] GlossaryTooltip
- [x] Modal
- [ ] Popover
- [x] Tooltip
- [ ] TooltipLink
### Action feedback - components used to show feedback of a user action
- [x] Alerts

Organisms

Atoms combine to form molecules, and groups of molecules form organisms. In the world of Atomic Design, organisms are the UI elements that shape both the appearance and functionality of a website. They’re also the elements that start to impact user interface. The way a developer arranges molecules informs the site experience and the complexity of the finished product. Examples of organisms include logos, search fields, and main navigation which together may form a header organism.

- [ ] https://github.com/ethereum/ethereum-org-website/issues/13050
- [ ] Footer
- [ ] MainArticle
- [x] Hero
- [ ] https://github.com/ethereum/ethereum-org-website/pull/13055
### Snippets - composed components has use cases or references to display the same type of data
-  [ ] https://github.com/ethereum/ethereum-org-website/issues/13052

Templates

At this phase of the Atomic Design process, we start to break with the chemistry analogy and shift back into the lexicon of front-end development, as a whole. Templates, then, are “organisms” strung together at the page-level or beyond. Templates, online atoms, organisms, and molecules, are highly concrete. They provide a fixed context for the more abstract pieces to fit and are responsible for pulling the site together into something resembling its final form. An HTML wireframe is an excellent example of a template.

### Templates - base pages to be used in creation of new content. They incorporate all of the components mandatory for the page
- [ ] Docs
- [ ] Roadmap [Blocked on refactor]
- [x] RootLayout (BaseLayout)
- [ ] Staking [Blocked on refactor]
- [ ] Static
- [ ] Tutorial
- [ ] Upgrade [Blocked on refactor]
- [ ] Usecases [Blocked on refactor]

Pages

Pages, finally, are the final element of Atomic Design. According to Frost himself, pages are the specific instances of templates. Pages are the most tangible element of all and are the places users spend most of their time. They’re also one of the most essential phases of the Atomic Design process since the final iteration of pages is where developers get to see whether the entire design system is effective or not. In short, the final appearance of the pages dictates whether the product design is ready to launch, or whether the developer needs to loop back and make changes to earlier UI design elements.

### Special cases - Pages that are unique and require custom made components
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13053
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13054
### Pages - List of pages with final content to showcase and inspire
- [ ] / (homepage)
- [ ] /404
- [ ] /assets
- [ ] /bug-bounty
- [ ] /community
- [ ] /contributing/translation-program
- [ ] /contributing/translation-program/acknowledgements
- [ ] /contributing/translation-program/contributors
- [ ] /dapps
- [ ] /developers
- [ ] /developers/learning-tools
- [ ] /developers/local-environment
- [ ] /developers/tutorials
- [ ] /eth
- [ ] /gas
- [ ] /get-eth
- [ ] /layer-2
- [ ] /learn
- [ ] /quizzes
- [ ] /roadmap
- [ ] /roadmap/vision
- [ ] /run-a-node
- [ ] /stablecoins
- [ ] /staking
- [ ] /staking/deposit-contract
- [ ] /wallets
- [ ] /wallets/find-wallet
- [ ] /what-is-ethereum

How to contribute

If you’d like to help with adding stories for components, please follow these steps:

  1. Read the storybook documentation for the project
  2. Leave a comment here asking which component you would ke to work out. We will be going from the top of the list to bottom (Atoms to Pages).
  3. We assign you to the file (by adding your handle next to the file name in the list).
    • Read and follow our storybook implementation guide for some tips & guidance.
    • If you were assigned to multiple files then create a separate PR for each component. It will make the testing and review process much simpler and more organized.
  4. Once you finish it (PR merged), we’ll mark it as done.
  5. Repeat!
TommWolf commented 4 months ago

For me it does not matter on which component I will work. I simply want to help.

corwintines commented 4 months ago

Awesome, thanks @TommWolf!

I created an issue for the Logo component: https://github.com/ethereum/ethereum-org-website/issues/13067

If you comment in this issue, ill assign you :)

TylerAPfledderer commented 4 months ago

@corwintines noting here that I have #12960 up for RootLayout (now becoming BaseLayout), and looking at building a consolidated layout as discussed previously with Pablo and Nuno.

wackerow commented 3 months ago

Started attaching the sub-task Issues as "milestones" for this epic (13043) to help track

pettinarip commented 3 months ago

Hey @corwintines could you assign me the TableOfContents? wip #13156

corwintines commented 3 months ago

@pettinarip created an issue and assigned. Will update description over there.

Baystef commented 3 months ago

Hi @corwintines , I'll like to be assigned the MergeInfoGraphic story. Thanks

tomasgrusz commented 3 months ago

Hey, would love to help out with this, happy to start working on Form components (e.g. Buttons, Inputs, Checkbox,..) one by one.

TylerAPfledderer commented 3 months ago

Hey, would love to help out with this, happy to start working on Form components (e.g. Buttons, Inputs, Checkbox,..) one by one.

Hey @tomasgrusz ! Those components already have stories. They are shown as checked and only here for the organization of the list :)

tomasgrusz commented 3 months ago

Hey, would love to help out with this, happy to start working on Form components (e.g. Buttons, Inputs, Checkbox,..) one by one.

Hey @tomasgrusz ! Those components already have stories. They are shown as checked and only here for the organization of the list :)

My mistake @TylerAPfledderer. In that case, I'm happy to pick up any of the remaining Atom components so that we can have all of them done.

corwintines commented 3 months ago

@tomasgrusz I pinged you in #13067 just now. If you are open for it, will assign :)

Baystef commented 3 months ago

@wackerow I'll like to be assigned the TranslationChartImage story. Please help create an issue for it and assign it to me

Baystef commented 1 month ago

@wackerow @corwintines I'll like to work on the CallToContribute component under Molecules.

corwintines commented 1 month ago

Creating those issues now for you @Baystef. Thank you for your patience and taking those on!

Baystef commented 3 weeks ago

@corwintines Please assign Contributors and DeveloperDocsLinks to me. Thanks

prxjwal commented 2 days ago

@corwintines I would like to work on BannerNotification pls assign