@wordpress/components 36.1.0 → 37.0.0

package/src/calendar/style.scss

@@ -21,7 +21,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	color: $components-color-foreground;
 	background-color: $components-color-background;
 	font-size: $font-size-medium;
-	font-weight: $font-weight-regular;
+	font-weight: var(--wpds-typography-font-weight-default);
 	z-index: 0; // Create a stacking context and render on top of the background.
 
 	*,

package/src/card/card/hook.ts

@@ -57,9 +57,10 @@ export function useCard( props: CardProps ) {
 
 	const classes = useMemo( () => {
 		return cx(
-			styles.Card,
-			isBorderless && styles.boxShadowless,
-			isRounded && styles.rounded,
+			styles.getCardStyles( {
+				isBorderless,
+				isRounded,
+			} ),
 			className
 		);
 	}, [ className, cx, isBorderless, isRounded ] );

package/src/card/card-footer/hook.ts

@@ -11,7 +11,6 @@ import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { FooterProps } from '../types';
-import { getPaddingBySize } from '../get-padding-by-size';
 
 export function useCardFooter(
 	props: WordPressComponentProps< FooterProps, 'div' >
@@ -27,21 +26,18 @@ export function useCardFooter(
 
 	const cx = useCx();
 
-	const classes = useMemo(
-		() =>
-			cx(
-				styles.Footer,
-				styles.borderRadius,
-				styles.borderColor,
-				getPaddingBySize( size ),
-				isBorderless && styles.borderless,
-				isShady && styles.shady,
-				// This classname is added for legacy compatibility reasons.
-				'components-card__footer',
-				className
-			),
-		[ className, cx, isBorderless, isShady, size ]
-	);
+	const classes = useMemo( () => {
+		return cx(
+			styles.getCardFooterStyles( {
+				isBorderless,
+				isShady,
+				size,
+			} ),
+			// This classname is added for legacy compatibility reasons.
+			'components-card__footer',
+			className
+		);
+	}, [ className, cx, isBorderless, isShady, size ] );
 
 	return {
 		...otherProps,

package/src/card/card-header/hook.ts

@@ -11,7 +11,6 @@ import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { HeaderProps } from '../types';
-import { getPaddingBySize } from '../get-padding-by-size';
 
 export function useCardHeader(
 	props: WordPressComponentProps< HeaderProps, 'div' >
@@ -26,21 +25,18 @@ export function useCardHeader(
 
 	const cx = useCx();
 
-	const classes = useMemo(
-		() =>
-			cx(
-				styles.Header,
-				styles.borderRadius,
-				styles.borderColor,
-				getPaddingBySize( size ),
-				isBorderless && styles.borderless,
-				isShady && styles.shady,
-				// This classname is added for legacy compatibility reasons.
-				'components-card__header',
-				className
-			),
-		[ className, cx, isBorderless, isShady, size ]
-	);
+	const classes = useMemo( () => {
+		return cx(
+			styles.getCardHeaderStyles( {
+				isBorderless,
+				isShady,
+				size,
+			} ),
+			// This classname is added for legacy compatibility reasons.
+			'components-card__header',
+			className
+		);
+	}, [ className, cx, isBorderless, isShady, size ] );
 
 	return {
 		...otherProps,

package/src/card/stories/index.story.tsx

@@ -32,7 +32,7 @@ const meta: Meta< typeof Card > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Card` or `CollapsibleCard` from `@wordpress/ui` instead.',
+			notes: 'Use [`Card`](?path=/docs/design-system-components-card--docs) or [`CollapsibleCard`](?path=/docs/design-system-components-collapsiblecard--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/card/styles.ts

@@ -7,6 +7,8 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { COLORS, CONFIG } from '../utils';
+import { getPaddingBySize } from './get-padding-by-size';
+import type { FooterProps, HeaderProps, Props } from './types';
 
 // Since the border for `Card` is rendered via the `box-shadow` property
 // (as opposed to the `border` property), the value of the border radius needs
@@ -97,3 +99,50 @@ export const rounded = css`
 export const shady = css`
 	background-color: ${ COLORS.ui.backgroundDisabled };
 `;
+
+export function getCardStyles( {
+	isBorderless,
+	isRounded,
+}: Pick< Props, 'isBorderless' | 'isRounded' > ) {
+	const cardStyles = css(
+		Card,
+		isBorderless && boxShadowless,
+		isRounded && rounded
+	);
+
+	return cardStyles;
+}
+
+export function getCardHeaderStyles( {
+	isBorderless,
+	isShady,
+	size,
+}: Pick< HeaderProps, 'isBorderless' | 'isShady' | 'size' > ) {
+	const headerStyles = css(
+		Header,
+		borderRadius,
+		borderColor,
+		getPaddingBySize( size ),
+		isBorderless && borderless,
+		isShady && shady
+	);
+
+	return headerStyles;
+}
+
+export function getCardFooterStyles( {
+	isBorderless,
+	isShady,
+	size,
+}: Pick< FooterProps, 'isBorderless' | 'isShady' | 'size' > ) {
+	const footerStyles = css(
+		Footer,
+		borderRadius,
+		borderColor,
+		getPaddingBySize( size ),
+		isBorderless && borderless,
+		isShady && shady
+	);
+
+	return footerStyles;
+}