CSS Modules Migration for ButtonLink Component

[Satoshi-Sh]

Web Dev Path
238

This PR depends on #239

Have you updated the CHANGELOG.md file? If not, please do it.

Yes

What is this change?

CSS Modules Migration for ButtonLink Component

If necessary, please describe how to test the new feature or fix.

You could check the styling behavior of Contact Us button on /about page.

When should this be merged?

After review and once PR #239 is merged.

[netlify]

✅ Deploy Preview for webdevpathstage ready!

Name	Link
🔨 Latest commit	fb57873
🔍 Latest deploy log	https://app.netlify.com/projects/webdevpathstage/deploys/685e7f8e31c5bd00089d1eee
😎 Deploy Preview	https://deploy-preview-242--webdevpathstage.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[cherylli]

@Satoshi-Sh could you please pull the latest main and push to your branch?

[cherylli]

Buttons are not working now, there are a few things need to be done to fix it.

1. customClassName is always undefined because it was not passed into it (from TwoColumn)

<ButtonLink
  link={link}
  $colorScheme={$btnColorScheme}
  openNewTab={openNewTab}
>
  {linkText}
</ButtonLink>

We need to remove $colorScheme and change it to customClassName
(although I think "customButtonClass" or something like that is more descriptive as it's only used for the buttons)

2. inverted-grey is now invertedGrey, although maybe we should rename it back to inverted-grey which is more common css naming

$btnColorScheme='inverted-grey' needs to be changed to customBtnClass='invertedGrey' for it to work (but consider changing it back to inverted-grey as mentioned above. In this case, you would only need to change the CSS name in the scss file)

there are also some inverted-white which need to be changed.

3. this custom class needs to be passed down from about.js

4. check if other pages is using buttonlink

[cherylli]

Buttons are working now, thanks!

[Satoshi-Sh]

Thanks for reviewing this in detail. @cherylli

[briangesteban]

Fix Request

• Need to fix buttons on the Homepage as well. The background color and transition is not working properly.

Improvement Suggestion

  const buttonClass = customBtnClass
    ? `${styles.buttonLink} ${styles[customBtnClass]}`
    : styles.buttonLink;

This code snippet above seems to be re-usable, and might be use in the SubmitButton component. We could create a helper function under utils for this, something like getButtonStyle or something similar.

[Satoshi-Sh]

Thanks for the review, @briangesteban .
I also needed to update the prop name of TwoColumn component on the blog page.

const buttonClass = customBtnClass
? ${styles.buttonLink} ${styles[customBtnClass]}
: styles.buttonLink;

I keep this for now as submission button doesn't have the effect.

[briangesteban]

Looks good to me now. Everything's working back smoothly. Thanks @Satoshi-Sh !

[oluwatobiss]

ButtonLinks all looks good. Thanks @Satoshi-Sh!