Merge pull request #5797 from veroglez/LPD-1261

feat(@clayui/card): Radio Card component variant
liferay · Apr 11, 2024 · 74c1599 · 74c1599
2 parents 052158a + cbf1887
commit 74c1599
Show file tree

Hide file tree

Showing 8 changed files with 914 additions and 161 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -39,7 +39,7 @@ module.exports = {
 		},
 		'./packages/clay-card/src/': {
 			branches: 82,
-			functions: 90,
+			functions: 82,
 			lines: 95,
 			statements: 95,
 		},

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
 	"size-limit": [
 		{
 			"path": "all.js",
-			"limit": "156 kb",
+			"limit": "157 kb",
 			"ignore": [
 				"react",
 				"react-dom"

diff --git a/packages/clay-card/src/CardWithHorizontal.tsx b/packages/clay-card/src/CardWithHorizontal.tsx
@@ -5,7 +5,7 @@
 
 import {ClayButtonWithIcon} from '@clayui/button';
 import {ClayDropDownWithItems} from '@clayui/drop-down';
-import {ClayCheckbox} from '@clayui/form';
+import {ClayCheckbox, ClayRadio} from '@clayui/form';
 import ClayIcon from '@clayui/icon';
 import ClayLayout from '@clayui/layout';
 import ClaySticker from '@clayui/sticker';
@@ -43,9 +43,10 @@ export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	href?: string;
 
 	/**
-	 * Callback for when item is selected
+	 * Props to add to the radio element
 	 */
-	onSelectChange?: (val: boolean) => void;
+
+	radioProps?: React.HTMLAttributes<HTMLInputElement> & {value: string};
 
 	/**
 	 * Flag to indicate if card is selected
@@ -66,8 +67,30 @@ export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	 * Name of the item
 	 */
 	title: string;
+
+	/**
+	 * Flag to indicate if the card text is truncated
+	 */
+	truncate?: boolean;
 }
 
+/**
+ * Different types of props depending on selectableType.
+ *
+ * onSelectChange: callback for when item is selected
+ * selectableType: determines what type of selectable it is
+ */
+
+type CheckboxProps = {
+	onSelectChange?: (value: boolean) => void;
+	selectableType?: 'checkbox';
+};
+
+type RadioProps = {
+	onSelectChange?: (value: string) => void;
+	selectableType: 'radio';
+};
+
 export const ClayCardWithHorizontal = ({
 	'aria-label': ariaLabel,
 	actions,
@@ -78,12 +101,15 @@ export const ClayCardWithHorizontal = ({
 	},
 	href,
 	onSelectChange,
+	radioProps = {value: ''},
+	selectableType,
 	selected = false,
 	spritemap,
 	symbol = 'folder',
 	title,
+	truncate = true,
 	...otherProps
-}: IProps) => {
+}: IProps & (RadioProps | CheckboxProps)) => {
 	const content = (
 		<ClayCard.Body>
 			<ClayCard.Row>
@@ -99,6 +125,7 @@ export const ClayCardWithHorizontal = ({
 						disabled={disabled}
 						displayType="title"
 						href={href}
+						truncate={truncate}
 					>
 						{title}
 					</ClayCard.Description>
@@ -132,16 +159,30 @@ export const ClayCardWithHorizontal = ({
 			active={selected}
 			selectable={!!onSelectChange}
 		>
-			{onSelectChange && (
-				<ClayCheckbox
-					{...checkboxProps}
-					checked={selected}
-					disabled={disabled}
-					onChange={() => onSelectChange(!selected)}
-				>
-					<ClayCardHorizontal.Body>{content}</ClayCardHorizontal.Body>
-				</ClayCheckbox>
-			)}
+			{onSelectChange &&
+				(selectableType === 'radio' ? (
+					<ClayRadio
+						{...radioProps}
+						checked={selected}
+						disabled={disabled}
+						onChange={({target: {value}}) => onSelectChange(value)}
+					>
+						<ClayCardHorizontal.Body>
+							{content}
+						</ClayCardHorizontal.Body>
+					</ClayRadio>
+				) : (
+					<ClayCheckbox
+						{...checkboxProps}
+						checked={selected}
+						disabled={disabled}
+						onChange={() => onSelectChange(!selected)}
+					>
+						<ClayCardHorizontal.Body>
+							{content}
+						</ClayCardHorizontal.Body>
+					</ClayCheckbox>
+				))}
 
 			{!onSelectChange && content}
 		</ClayCardHorizontal>

diff --git a/packages/clay-card/src/CardWithInfo.tsx b/packages/clay-card/src/CardWithInfo.tsx
@@ -5,7 +5,7 @@
 
 import {ClayButtonWithIcon} from '@clayui/button';
 import {ClayDropDownWithItems} from '@clayui/drop-down';
-import {ClayCheckbox} from '@clayui/form';
+import {ClayCheckbox, ClayRadio} from '@clayui/form';
 import ClayIcon from '@clayui/icon';
 import ClayLabel from '@clayui/label';
 import ClayLayout from '@clayui/layout';
@@ -28,6 +28,12 @@ export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	 */
 	checkboxProps?: React.HTMLAttributes<HTMLInputElement>;
 
+	/**
+	 * Props to add to the radio element
+	 */
+
+	radioProps?: React.HTMLAttributes<HTMLInputElement> & {value: string};
+
 	/**
 	 * Description of the file
 	 */
@@ -80,11 +86,6 @@ export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 		React.ComponentProps<typeof ClayLabel> & {value: React.ReactText}
 	>;
 
-	/**
-	 * Callback for when item is selected
-	 */
-	onSelectChange?: (val: boolean) => void;
-
 	/**
 	 * Flag to indicate if card is selected
 	 */
@@ -113,8 +114,30 @@ export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	 * Name of the file
 	 */
 	title: string;
+
+	/**
+	 * Flag to indicate if the card text is truncated
+	 */
+	truncate?: boolean;
 }
 
+/**
+ * Different types of props depending on selectableType.
+ *
+ * onSelectChange: callback for when item is selected
+ * selectableType: determines what type of selectable it is
+ */
+
+type CheckboxProps = {
+	onSelectChange?: (value: boolean) => void;
+	selectableType?: 'checkbox';
+};
+
+type RadioProps = {
+	onSelectChange?: (value: string) => void;
+	selectableType: 'radio';
+};
+
 export const ClayCardWithInfo = ({
 	'aria-label': ariaLabel,
 	actions,
@@ -131,13 +154,16 @@ export const ClayCardWithInfo = ({
 	imgProps,
 	labels,
 	onSelectChange,
+	radioProps = {value: ''},
+	selectableType,
 	selected = false,
 	spritemap,
 	stickerProps = {},
 	symbol,
 	title,
+	truncate = true,
 	...otherProps
-}: IProps) => {
+}: IProps & (RadioProps | CheckboxProps)) => {
 	const isCardType = {
 		file: displayType === 'file' && !imgProps,
 		image: displayType === 'image' || imgProps,
@@ -212,16 +238,26 @@ export const ClayCardWithInfo = ({
 			displayType={isCardType.image ? 'image' : 'file'}
 			selectable={!!onSelectChange}
 		>
-			{onSelectChange && (
-				<ClayCheckbox
-					{...checkboxProps}
-					checked={selected}
-					disabled={disabled}
-					onChange={() => onSelectChange(!selected)}
-				>
-					{headerContent}
-				</ClayCheckbox>
-			)}
+			{onSelectChange &&
+				(selectableType === 'radio' ? (
+					<ClayRadio
+						{...radioProps}
+						checked={selected}
+						disabled={disabled}
+						onChange={({target: {value}}) => onSelectChange(value)}
+					>
+						{headerContent}
+					</ClayRadio>
+				) : (
+					<ClayCheckbox
+						{...checkboxProps}
+						checked={selected}
+						disabled={disabled}
+						onChange={() => onSelectChange(!selected)}
+					>
+						{headerContent}
+					</ClayCheckbox>
+				))}
 
 			{!onSelectChange && headerContent}
 
@@ -233,12 +269,16 @@ export const ClayCardWithInfo = ({
 							disabled={disabled}
 							displayType="title"
 							href={href}
+							truncate={truncate}
 						>
 							{title}
 						</ClayCard.Description>
 
 						{description && (
-							<ClayCard.Description displayType="subtitle">
+							<ClayCard.Description
+								displayType="subtitle"
+								truncate={truncate}
+							>
 								{description}
 							</ClayCard.Description>
 						)}