docs: correct Card and List.Item displayed names (#4680)

Author: lukewalczak

src/components/Card/Card.tsx

@@ -22,8 +22,13 @@ import { forwardRef } from '../../utils/forwardRef';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 import { splitStyles } from '../../utils/splitStyles';
 import Surface from '../Surface';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+type CardComposition = {
+  Content: typeof CardContent;
+  Actions: typeof CardActions;
+  Cover: typeof CardCover;
+  Title: typeof CardTitle;
+};
 
 type OutlinedCardProps = {
   mode: 'outlined';
@@ -131,7 +136,8 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
  * export default MyComponent;
  * ```
  */
-const CardComponent = (
+
+const Card = (
   {
     elevation: cardElevation = 1,
     delayLongPress,
@@ -330,24 +336,19 @@ const CardComponent = (
   );
 };
 
-const Component = forwardRef(CardComponent);
-Component.displayName = 'Card';
+Card.displayName = 'Card';
+const Component = forwardRef(Card);
 
-const Card = Component as typeof Component & {
-  Content: typeof CardContent;
-  Actions: typeof CardActions;
-  Cover: typeof CardCover;
-  Title: typeof CardTitle;
-};
+const CardComponent = Component as typeof Component & CardComposition;
 
 // @component ./CardContent.tsx
-Card.Content = CardContent;
+CardComponent.Content = CardContent;
 // @component ./CardActions.tsx
-Card.Actions = CardActions;
+CardComponent.Actions = CardActions;
 // @component ./CardCover.tsx
-Card.Cover = CardCover;
+CardComponent.Cover = CardCover;
 // @component ./CardTitle.tsx
-Card.Title = CardTitle;
+CardComponent.Title = CardTitle;
 
 const styles = StyleSheet.create({
   innerContainer: {
@@ -365,4 +366,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Card;
+export default CardComponent;

src/components/List/ListItem.tsx

@@ -270,8 +270,8 @@ const ListItem = (
   );
 };
 
+ListItem.displayName = 'List.Item';
 const Component = forwardRef(ListItem);
-Component.displayName = 'List.Item';
 
 const styles = StyleSheet.create({
   container: {