Card: add types (#32561)

* Add types to `<Card />` and its subcomponents * Extract `SizeableProps` type * Extract `MarginalSubComponentProps` type for Header and Footer * Remove unnecessary `MediaProps` type * Moved the `className` prop to the `MarginalSubComponentProps` type
WordPress · Jun 10, 2021 · a7ff42c · a7ff42c
1 parent 5dbddf9
commit a7ff42c
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 0 deletions.
diff --git a/packages/components/src/card/card-body/index.js b/packages/components/src/card/card-body/index.js
@@ -14,7 +14,12 @@ export const defaultProps = {
 	size: 'medium',
 };
 
+/* eslint-disable jsdoc/valid-types */
+/**
+ * @param { import('../types').BodyProps & JSX.IntrinsicElements['div'] } props
+ */
 export function CardBody( props ) {
+	/* eslint-enable jsdoc/valid-types */
 	const { className, isShady, ...additionalProps } = props;
 	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
 	const { size } = mergedProps;

diff --git a/packages/components/src/card/card-divider/index.js b/packages/components/src/card/card-divider/index.js
@@ -8,7 +8,12 @@ import classnames from 'classnames';
  */
 import { DividerUI } from '../styles';
 
+/* eslint-disable jsdoc/valid-types */
+/**
+ * @param { JSX.IntrinsicElements['hr'] } props
+ */
 export function CardDivider( props ) {
+	/* eslint-enable jsdoc/valid-types */
 	const { className, ...additionalProps } = props;
 
 	const classes = classnames( 'components-card__divider', className );

diff --git a/packages/components/src/card/card-footer/index.js b/packages/components/src/card/card-footer/index.js
@@ -15,6 +15,9 @@ export const defaultProps = {
 	size: 'medium',
 };
 
+/**
+ * @param { import('../types').FooterProps } props
+ */
 export function CardFooter( props ) {
 	const { className, isShady, ...additionalProps } = props;
 	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };

diff --git a/packages/components/src/card/card-header/index.js b/packages/components/src/card/card-header/index.js
@@ -15,6 +15,9 @@ export const defaultProps = {
 	size: 'medium',
 };
 
+/**
+ * @param { import('../types').HeaderProps } props
+ */
 export function CardHeader( props ) {
 	const { className, isShady, ...additionalProps } = props;
 	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };

diff --git a/packages/components/src/card/card-media/index.js b/packages/components/src/card/card-media/index.js
@@ -8,7 +8,12 @@ import classnames from 'classnames';
  */
 import { MediaUI } from '../styles';
 
+/* eslint-disable jsdoc/valid-types */
+/**
+ * @param { JSX.IntrinsicElements['div'] } props
+ */
 export function CardMedia( props ) {
+	/* eslint-enable jsdoc/valid-types */
 	const { className, ...additionalProps } = props;
 
 	const classes = classnames( 'components-card__media', className );

diff --git a/packages/components/src/card/card/index.js b/packages/components/src/card/card/index.js
@@ -15,7 +15,12 @@ export const defaultProps = {
 	size: 'medium',
 };
 
+/* eslint-disable jsdoc/valid-types */
+/**
+ * @param { import('../types').Props & JSX.IntrinsicElements['div'] } props
+ */
 export function Card( props ) {
+	/* eslint-enable jsdoc/valid-types */
 	const {
 		className,
 		isBorderless,

diff --git a/packages/components/src/card/types.ts b/packages/components/src/card/types.ts
@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { CSSProperties } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { Props as SurfaceProps } from '../surface/types';
+
+export type SizeOptions = 'xSmall' | 'small' | 'medium' | 'large';
+
+type SizeableProps = {
+	/**
+	 * Determines the amount of padding within the component.
+	 *
+	 * @default 'medium'
+	 */
+	size?: SizeOptions;
+};
+
+export type Props = SurfaceProps &
+	SizeableProps & {
+		/**
+		 * Renders without a border.
+		 *
+		 * @default false
+		 */
+		isBorderless?: boolean;
+		/**
+		 * Renders with rounded corners.
+		 *
+		 * @default true
+		 */
+		isRounded?: boolean;
+		/**
+		 * Renders with elevation styles (box shadow).
+		 *
+		 * @default false
+		 */
+		isElevated?: boolean;
+	};
+
+type BaseSubComponentProps = SizeableProps & {
+	/**
+	 * The children elements.
+	 */
+	children: React.ReactNode;
+	/**
+	 * Renders with a light gray background color.
+	 *
+	 * @default false
+	 */
+	isShady?: boolean;
+};
+
+export type BodyProps = BaseSubComponentProps & {
+	/**
+	 * Determines if the component is scrollable.
+	 *
+	 * @default true
+	 */
+	isScrollable?: boolean;
+};
+
+type MarginalSubComponentProps = BaseSubComponentProps & {
+	/**
+	 * Renders without a border.
+	 *
+	 * @default false
+	 */
+	isBorderless?: boolean;
+	className?: string;
+};
+
+export type HeaderProps = MarginalSubComponentProps;
+
+export type FooterProps = MarginalSubComponentProps & {
+	justify: CSSProperties[ 'justifyContent' ];
+};
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
@@ -20,6 +20,7 @@
 		"src/animate/**/*",
 		"src/base-control/**/*",
 		"src/base-field/**/*",
+		"src/card/**/*",
 		"src/dashicon/**/*",
 		"src/disabled/**/*",
 		"src/divider/**/*",