@wordpress/components: Add type defs for Card (#41448)

* @wordpress/components: Add type defs for Card

* Use StyledComponent

* Improve types

* Type all the Card*

* Fix expect errors

* Revert format changes

* Update packge version

* Group tests

* @default -> @defaultValue

Co-authored-by: Jon Surrell <jon.surrell@automattic.com>

types/wordpress__components/card/body/index.d.ts

@@ -0,0 +1,22 @@
+import Card from '..';
+import { StyledComponent } from '@emotion/styled';
+
+declare namespace CardFooter {
+    interface Props {
+        /**
+         * `className` of the container.
+         */
+        className?: string;
+
+        /**
+         * Add visual shading style.
+         */
+        isShady?: boolean;
+
+        size?: Card.CardSize;
+    }
+}
+
+declare const CardFooter: StyledComponent<JSX.IntrinsicElements['div'], CardFooter.Props, {}>;
+
+export default CardFooter;

types/wordpress__components/card/divider/index.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from '@wordpress/element';
+import { HorizontalRule } from '../../primitives';
+import { StyledComponent } from '@emotion/styled';
+
+declare namespace CardDivider {
+    interface Props {
+        /**
+         * `className` of the container.
+         */
+        className?: string;
+
+        children?: never;
+    }
+}
+
+declare const CardDivider: StyledComponent<ComponentProps<typeof HorizontalRule>, CardDivider.Props, {}>;
+
+export default CardDivider;

types/wordpress__components/card/footer/index.d.ts

@@ -0,0 +1,27 @@
+import Card from '..';
+import { StyledComponent } from '@emotion/styled';
+
+declare namespace CardFooter {
+    interface Props {
+        /**
+         * `className` of the container.
+         */
+        className?: string;
+
+        /**
+         * Renders a borderless card.
+         */
+        isBorderless?: boolean;
+
+        /**
+         * Add visual shading style.
+         */
+        isShady?: boolean;
+
+        size?: Card.CardSize;
+    }
+}
+
+declare const CardFooter: StyledComponent<JSX.IntrinsicElements['div'], CardFooter.Props, {}>;
+
+export default CardFooter;

types/wordpress__components/card/header/index.d.ts

@@ -0,0 +1,27 @@
+import Card from '..';
+import { StyledComponent } from '@emotion/styled';
+
+declare namespace CardHeader {
+    interface Props {
+        /**
+         * `className` of the container.
+         */
+        className?: string;
+
+        /**
+         * Renders a borderless card.
+         */
+        isBorderless?: boolean;
+
+        /**
+         * Add visual shading style.
+         */
+        isShady?: boolean;
+
+        size?: Card.CardSize;
+    }
+}
+
+declare const CardHeader: StyledComponent<JSX.IntrinsicElements['div'], CardHeader.Props, {}>;
+
+export default CardHeader;

types/wordpress__components/card/index.d.ts

@@ -0,0 +1,32 @@
+import { StyledComponent } from '@emotion/styled';
+
+declare namespace Card {
+    type CardSize = 'large' | 'medium' | 'small' | 'extraSmall';
+    interface Props {
+        /**
+         * `className` of the container.
+         */
+        className?: string;
+
+        /**
+         * Renders a borderless card.
+         */
+        isBorderless?: boolean;
+
+        /**
+         * Renders an elevated card.
+         */
+        isElevated?: boolean;
+
+        /**
+         * Determines the amount of padding within the card.
+         *
+         * @defaultValue "medium"
+         */
+        size?: CardSize;
+    }
+}
+
+declare const Card: StyledComponent<JSX.IntrinsicElements['div'], Card.Props, {}>;
+
+export default Card;

types/wordpress__components/card/media/index.d.ts

@@ -0,0 +1,14 @@
+import { StyledComponent } from '@emotion/styled';
+
+declare namespace CardMedia {
+    interface Props {
+        /**
+         * `className` of the container.
+         */
+        className?: string;
+    }
+}
+
+declare const CardMedia: StyledComponent<JSX.IntrinsicElements['div'], CardMedia.Props, {}>;
+
+export default CardMedia;

types/wordpress__components/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for @wordpress/components 8.2
+// Type definitions for @wordpress/components 8.5
 // Project: https://github.com/WordPress/gutenberg/tree/master/packages/components/README.md
 // Definitions by: Derek Sifford <https://github.com/dsifford>
 //                 Jon Surrell <https://github.com/sirreal>
@@ -15,6 +15,12 @@ export { default as Autocomplete } from './autocomplete';
 export { default as BaseControl } from './base-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
+export { default as Card } from './card';
+export { default as CardBody } from './card/body';
+export { default as CardDivider } from './card/divider';
+export { default as CardFooter } from './card/footer';
+export { default as CardHeader } from './card/header';
+export { default as CardMedia } from './card/media';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as ColorIndicator } from './color-indicator';

types/wordpress__components/package.json

@@ -1,6 +1,7 @@
 {
     "private": true,
     "dependencies": {
+        "@emotion/styled": "^10.0.0",
         "re-resizable": "^4.7.1"
     }
 }

types/wordpress__components/wordpress__components-tests.tsx

@@ -87,6 +87,41 @@ interface MyCompleteOption {
     <button>World</button>
 </C.ButtonGroup>;
 
+//
+// card
+//
+<C.Card>I'm a card!</C.Card>;
+<C.Card isElevated isBorderless className="card" size="large">
+    I'm a card with props!
+</C.Card>;
+
+// Card is <div /> by default, autoFocus prop is not allowed
+// $ExpectError
+<C.Card autoFocus>`div` can't have autoFocus :(</C.Card>;
+
+// `withComponent` renders a `button`
+const ButtonCard = C.Card.withComponent('button');
+<ButtonCard autoFocus>`button` _can_ have autoFocus :D</ButtonCard>;
+
+<C.CardBody isShady size="extraSmall">
+    Hello world!
+</C.CardBody>;
+
+<C.CardHeader isShady size="extraSmall">
+    Hello world!
+</C.CardHeader>;
+
+<C.CardFooter isBorderless isShady size="extraSmall">
+    Hello world!
+</C.CardFooter>;
+
+// Divider has no children or props except className
+// $ExpectError
+<C.CardDivider>Hello world!</C.CardDivider>;
+// $ExpectError
+<C.CardDivider isShady />;
+<C.CardDivider />;
+
 //
 // checkbox-control
 //