TS migrate CardList Component

[Mousticke]

Description

Migrate CardList component from js to tsx

• Rename file from JS to TSX
• Add typed props
• [N/A] Add typed styled components

Analysis

Components / pages using CardListcomponent
BeaconChainActions ⚠️

• datapoints → alt props needed
• reads → OK

EthExchanges ❌

• exchanges→ alt props needed
• walletProviders→ alt props needed

StableCoinAccordion ✔️

UpgradeArticles ✔️

bug-bounty ⚠️

• clients→ alt props needed
• specs→ OK

get-eth ⚠️

• tokenSwaps→ alt props needed
• decentralizedExchnages→ alt props needed
• safetyArticles→ OK

deposit-contrat ❌

• addressSources → alt props needed

eth ✔️

wallets/index ✔️

Test new type

const testCarListArray: Array<CardListItem> = [
  {
    title:"title 1",
    description: "description 1",
    caption: "caption 1",
    link: "link 1",
    id: 0,
    image: "test",
    alt: "test"
  }, // OK
  {
    title:"title 1",
    description: "description 1",
    caption: "caption 1",
    link: "link 1",
    id: 0,
    alt: "test"
  }, // NOK IMAGE IS MISSING
  {
    title:"title 1",
    description: "description 1",
    caption: "caption 1",
    link: "link 1",
    id: 0,
    image: "test",
  }, // NOK ALT IS MISSING
  {
    title:"title 1",
    description: "description 1",
    caption: "caption 1",
    link: "link 1",
    id: 0,
  } // OK
]

Extra

GatsbyImage requires the alt props provided for an image or at least an empty string. So in the CardList component, if the image prop has been provided, then the alt props has to be passed too. I put in this way. If you do not agree with that, I can always give you your preferred way.

Related Issue

Related to Epic: TypeScript rollout

[gatsby-cloud]

Gatsby Cloud Build Report

ethereum-org-website-dev

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 26m

[pettinarip]

I like this, will help with our a11y issues. Good job @Mousticke 💯

=====
Not a big fan of the implementation aspects since its a bit hard to understand from a dx point of view but I guess there is not much we can do about that 🤷🏼‍♂️ will try to keep this in mind for other image implementations in other components.

[pettinarip]

@Mousticke this is great, thanks for the deep analysis there. While we migrate those other files, those errors are going to pop up and we can fix those missing alts. Good job 💪🏼

[pettinarip]

@all-contributors please add @Mousticke for code

[allcontributors]

@pettinarip

@Mousticke already contributed before to code