Add types to <Card /> and its subcomponents

WordPress · Jun 9, 2021 · 77445ff · 77445ff
1 parent a8f786a
commit 77445ff
Show file tree

Hide file tree

Showing 8 changed files with 114 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 & { className: string } } 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 & { className: string } } 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 { import('../types').MediaProps & 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,87 @@
+/**
+ * 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';
+
+export type Props = SurfaceProps & {
+	/**
+	 * Renders without a border.
+	 *
+	 * @default false
+	 */
+	isBorderless?: boolean;
+	/**
+	 * Renders with rounded corners.
+	 *
+	 * @default true
+	 */
+	isRounded?: boolean;
+	/**
+	 * Determines the amount of padding within the component.
+	 *
+	 * @default 'medium'
+	 */
+	size?: SizeOptions;
+	/**
+	 * Renders with elevation styles (box shadow).
+	 *
+	 * @default false
+	 */
+	isElevated?: boolean;
+};
+
+type BaseSubComponentProps = {
+	/**
+	 * The children elements.
+	 */
+	children: React.ReactNode;
+	/**
+	 * Renders with a light gray background color.
+	 *
+	 * @default false
+	 */
+	isShady?: boolean;
+	/**
+	 * Determines the amount of padding within the component.
+	 *
+	 * @default 'medium'
+	 */
+	size?: SizeOptions;
+};
+
+export type BodyProps = BaseSubComponentProps & {
+	/**
+	 * Determines if the component is scrollable.
+	 *
+	 * @default true
+	 */
+	isScrollable?: boolean;
+};
+
+export type HeaderProps = BaseSubComponentProps & {
+	/**
+	 * Renders without a border.
+	 *
+	 * @default false
+	 */
+	isBorderless?: boolean;
+};
+
+export type FooterProps = HeaderProps & {
+	justify: CSSProperties[ 'justifyContent' ];
+};
+
+export type MediaProps = {
+	/**
+	 * The children elements.
+	 */
+	children: React.ReactNode;
+};
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/**/*",