🚀 feat(PlanCard): Make ListItem clickable

[gabrielmaschke]

Description 📄

• Add prop onClick to PlanCard.ListItem component and transform the wrapper in a button to make it accessible
• Change proptype of the prop text, it should accept components such as Skeleton

<PlanCard discount="SAVE 40%">
  <PlanCard.Tag variant="informative">Active</PlanCard.Tag>
  <PlanCard.Content
    title="Gold"
    currency="$"
    price="99.90"
    period="/mo"
    badgeColor="energy"
  >
    <PlanCard.List>
      <PlanCard.ListItem icon={Checkin} text="2.900 gyms and studios" onClick={() => foo()} />
      <PlanCard.ListItem icon={Dumbbell} text="1x/day standard access" onClick={() => foo()} />
      <PlanCard.ListItem icon={User} text="4x/month 1-on-1 sessions" onClick={() => foo()} />
    </PlanCard.List>
  </PlanCard.Content>
</PlanCard>

Platforms 📲

• Web
• Mobile

Type of change 🔍

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested? 🧪

[Enter the tips to test this PR]

• Unit Test
• Snapshot Test

Checklist: 🔍

• My code follows the contribution guide of this project Contributing Guide
• Layout matches design prototype: FIGMA
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

Screenshots 📸

No visual changes.

[MicaelRodrigues]

Clicks can also be a link, Should we add that option? Example:
If the component receives a href prop, we can assume element should be a <a> tag..

WDYT?

[MicaelRodrigues]

Also, beware that button should have the "type" attribute. (Maybe we can assume always type="button").

A helpful article: https://www.builder.io/blog/buttons

[gabrielmaschke]

Clicks can also be a link, Should we add that option? Example: If the component receives a href prop, we can assume element should be a <a> tag..

WDYT?

I have discussed with the team, and for now, links are out of scope, at least within the context of Gympass.

[gabrielmaschke]

Also, beware that button should have the "type" attribute. (Maybe we can assume always type="button").

A helpful article: https://www.builder.io/blog/buttons

Nice article! I completely agree. I added the button type in this commit: 5845523.

@MicaelRodrigues could you review it again please?