Skip to content

Commit

Permalink
fix(feature-card): fix feature card broken styles and refactor (#12082)
Browse files Browse the repository at this point in the history
### Related Ticket(s)

[ADCMS-6497](https://jsw.ibm.com/browse/ADCMS-6497)

### Description

The `<c4d-feature-card>` has been broken for some time. This PR is a refactor of the styles to align with the [v2 Figma specs](https://www.figma.com/design/DmgpvpEV6m4eJNMgKOLPmy/Feature-card-v2?node-id=407-13733&node-type=frame&t=JIxBJ4kEUMJMj1lD-0).

### Testing instructions

This ended up being close to a ground-up rewrite of the styles for `<c4d-feature-card>`. The Storybook should be compared with the Figma specs for all spacing, type, colors, interaction states, inverse states, Carbon themes, etc.

Some things to note:

* We're testing two stories: Feature card > Medium and Feature card > Large. There are slight differences between them. There is a set of specs for each [in Figma](https://www.figma.com/design/DmgpvpEV6m4eJNMgKOLPmy/Feature-card-v2?node-id=827-3840&node-type=frame&t=Coj9u3GFqwgnqIjF-0).
* In Storybook there is a tab titled "Carbon Theme" to let you switch between themes.
* In Storybook you can change the "Color scheme" to inverse in the Knobs panel.

### Changelog

**Changed**

- Refactors `<c4d-feature-card>` per the v2 spec

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
  • Loading branch information
m4olivei authored Oct 25, 2024
1 parent cf153d0 commit 465a022
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 406 deletions.
1 change: 1 addition & 0 deletions packages/styles/scss/components/card/_card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
@use '@carbon/styles/scss/components/tag/index' as *;
@use '@carbon/styles/scss/components/tile/index' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '../../globals/vars' as *;
@use '../../globals/utils/content-width' as *;
@use '../../globals/utils/ratio-base' as *;
Expand Down
Loading

0 comments on commit 465a022

Please sign in to comment.