[Groundwork] [OSS-Components] Create an OSS::FeatureCard component & OSS::FeatureCardsContainer#662
Conversation
Co-authored-by: Copilot <copilot@github.com>
| border: 1px solid; | ||
| border-radius: var(--border-radius-md); | ||
| font-family: var(--font-family-base); | ||
| line-height: 1.6; |
There was a problem hiding this comment.
Defined like this in figma?
There was a problem hiding this comment.
Figma uses 160% if memory serves. In the web, I've usually seen it as a dimensionless number (1, 1.5, etc.)
If you prefer I can set it like in Figma.
For reference, both are accepted.
There was a problem hiding this comment.
This is actually the default on the platform so i think you can skip it:
- /
There was a problem hiding this comment.
Apparently the h3 header is set to 1.1 in type.less
| get colorVariant(): OSSFeatureCardColorVariant { | ||
| return this.args.colorVariant ?? DEFAULT_COLOR_VARIANT; | ||
| } | ||
|
|
||
| get shadowVariant(): OSSFeatureCardShadowVariant { | ||
| return this.args.shadowVariant ?? DEFAULT_SHADOW_VARIANT; | ||
| } |
There was a problem hiding this comment.
What happened if the set a wrong color or shadow value?
There was a problem hiding this comment.
From my understanding, if that happens we fail one of the asserts above (L. 42, L. 48). It seems to be the way other components do it (see empty-state or dialog components).
| const CARDS_LAYOUT = { | ||
| 2: [ | ||
| { | ||
| colorVariant: 'blue', | ||
| shadowVariant: 'sm', | ||
| rotation: -ROTATION_ANGLE, | ||
| offsetX: `-${TWO_CARDS_OFFSET_X}`, | ||
| isCenter: false | ||
| }, | ||
| { | ||
| colorVariant: 'yellow', | ||
| shadowVariant: 'sm', | ||
| rotation: ROTATION_ANGLE, | ||
| offsetX: TWO_CARDS_OFFSET_X, | ||
| isCenter: false | ||
| } | ||
| ], | ||
| 3: [ | ||
| { | ||
| colorVariant: 'blue', | ||
| shadowVariant: 'sm', | ||
| rotation: -ROTATION_ANGLE, | ||
| offsetX: `-${THREE_CARD_OFFSET_X}`, | ||
| isCenter: false | ||
| }, | ||
| { colorVariant: 'violet', shadowVariant: 'lg', rotation: 0, offsetX: '0', isCenter: true }, | ||
| { | ||
| colorVariant: 'yellow', | ||
| shadowVariant: 'sm', | ||
| rotation: ROTATION_ANGLE, | ||
| offsetX: THREE_CARD_OFFSET_X, | ||
| isCenter: false | ||
| } | ||
| ] | ||
| } as const satisfies Record< |
There was a problem hiding this comment.
I don't think this component should be responsible of setting the card colors.
I feel like the cards array parameter should just take the exact same parameter set as the FeatureCard component.
Only Rotation should be handled by this container component and eventually have defaults for the shadows
There was a problem hiding this comment.
While we are now handling the single card use case (thank you 🙏), we still have this component dictate shadows etc
I know we often use config-based approaches in our WoW, but here it seems to me like the code would be better off with a couple of helpers for the rotation and the offset ?
There was a problem hiding this comment.
Disclaimer: you know my affinity w/ CSS 😅
But there is no way this is done w/ pure CSS ?
Co-authored-by: Copilot <copilot@github.com>
…w variants, refactor, update tests Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
upfluence-bot
added
reviewed/needs-review
reviewed/needs-work
and removed
reviewed/needs-review
labels
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
7 participants
What does this PR do?
Implements DRA-4999 by introducing:
Related to: #4999
What are the observable changes?
Frontend:
Figma design:
https://www.figma.com/design/xd32CWO1lHvIfbJ7ZTZJxq/%E2%9A%99%EF%B8%8F-Provide-OAuth-Client-Credentials-Authentication-for-API-Customers?node-id=6304-44946&t=bbpU8LxBAMqvodAV-4
Developers heads up
N/A
Good PR checklist