feat(contentcard): first implementation #935
Conversation
| @@ -22,3 +22,17 @@ export function filterProps<T extends Props, K extends keyof T>( | |||
|
|
|||
| return result; | |||
| } | |||
|
|
|||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | |||
| export const mergeRefs = (refs: any[]) => { | |||
There was a problem hiding this comment.
Really cool util function 💡 🔥 !!
| [SDSWarningTypes.ContentCardActionsOnlyButtons]: { | ||
| hasWarned: false, | ||
| message: | ||
| "Warning: Only SDS buttons could be used within ContentCard Actions component slot!", | ||
| }, | ||
| [SDSWarningTypes.ClickableContentCardNumberOfButtons]: { | ||
| hasWarned: false, | ||
| message: | ||
| "Warning: Clickable Content Cards can only have one or no buttons!", | ||
| }, |
There was a problem hiding this comment.
Great warnings! So user friendly ❤️
| image?: never; | ||
| imageSize?: never; | ||
| imagePosition?: never; | ||
| imagePadding?: never; |
There was a problem hiding this comment.
just curious, why the types are never here? Here and below
Thank you!
There was a problem hiding this comment.
It uses the visualElementType prop as the union type discriminator, so there can be three different types of ContentCard: an ImageContentCard, an IconContentCard, and a regular one without any media elements.
When we set image?: never; on the IconContentCard, for example, it forces TypeScript to throw an error if the user adds an image prop when visualElementType="icon", and so on.
Does that make sense? 🥸
There was a problem hiding this comment.
Oh!! Thanks so much for the explanation 💡 That totally makes sense now thank you!
| ): JSX.Element | null { | ||
| const { buttonsPosition, clickableCard, children } = props; | ||
|
|
||
| /** |
There was a problem hiding this comment.
fantastic comments throughout. Very easy to follow 🙏 Thanks so much for the great logics!
| * (masoudmanson): This function is used to add the clickableCard and | ||
| * buttonsPosition props to the ContentCardActions sub-component. | ||
| */ | ||
| const enhanceChildrenWithCardActionsProps = ( |
| useEffect(() => { | ||
| const element = cardRef.current; | ||
| if (!element) return; | ||
|
|
||
| const resizeObserver = new ResizeObserver((entries) => { | ||
| for (const entry of entries) { | ||
| handleResize(entry.contentRect.width); | ||
| } | ||
| }); | ||
|
|
||
| resizeObserver.observe(element); | ||
|
|
||
| return () => { | ||
| resizeObserver.disconnect(); | ||
| }; | ||
| }, [handleResize]); |
There was a problem hiding this comment.
non-blocking and low priority - just for fun later lol
I wonder if this useEffect can be part of the useResponsiveWidth hook?
There was a problem hiding this comment.
Hmmm, I like the idea. I'll make sure to update the hook 🥳🎉
…date test snapshots
There was a problem hiding this comment.
Just one small tweak on ContentCard and a small name change in the color variables, otherwise looks great!! Thanks for the quick turnaround on this one, @masoudmanson!
… overlapping with border
masoudmanson
deleted the
SCIDS-961-Content-Card-Implement-in-Codebase
branch
Summary
ContentCard
Jira Ticket
Checklist
defaultTheme.tsused wherever possible