Fix: Implement Custom Style Hook for Card component

[terynk]

Old Behavior

Users were unable to apply Custom Style Hooks to Card, CardHeader, CardFooter, and CardPreview.

New Behavior

Users can now apply Custom Style Hooks to Card, CardHeader, CardFooter, and CardPreview. The screen shots below show test cases for each component that demonstrate the ability to apply Custom Hooks. In each Custom Hook, the backgroundColor of the component was updated to tokens.colorNeutralBackground3. The test code will be removed but can be found in commits 03817b9 and 65d20ca. The test code applies Custom Style Hooks to the Default styling of each component.

Test Screenshots

Default styling can be found under each subpage on the Fluent V9 Website The test code making the background red will be REMOVED. THIS IS FOR TESTING PURPOSES ONLY.

Card

CardFooter

CardHeader

CardPreview

Note: Changed padding in addition to backgroundColor because preview image covered the entire background so users were unable to see the red.

[github-actions]

Pull request demo site: URL

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-card Card - All	101.73 kB 28.745 kB	102.031 kB 28.833 kB	301 B 88 B
react-card Card	94.504 kB 26.924 kB	94.677 kB 26.996 kB	173 B 72 B
react-card CardFooter	14.381 kB 5.799 kB	14.56 kB 5.874 kB	179 B 75 B
react-card CardHeader	16.914 kB 6.677 kB	17.093 kB 6.745 kB	179 B 68 B
react-card CardPreview	14.446 kB 5.929 kB	14.626 kB 6 kB	180 B 71 B
react-components react-components: entire library	1.174 MB 293.991 kB	1.174 MB 294.003 kB	147 B 12 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	69.638 kB 20.24 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	225.271 kB 65.211 kB
react-components react-components: FluentProvider & webLightTheme	44.473 kB 14.597 kB
react-portal-compat PortalCompatProvider	8.39 kB 2.64 kB
react-timepicker-compat TimePicker	108.551 kB 36.094 kB

_{🤖 This report was generated against a035b641fa215b674f0c6368d7e4414179701939}

[paulgildea]

@tudorpopams, @gouttierre if we could prioritize this PR that would be helpful.

[mltejera]

Looks solid to me assuming we remove the stories 🤜🤛