feat(@clayui/card): add disabled state for high-level components

Author: matuzalemsteles

packages/clay-card/src/CardWithHorizontal.tsx

@@ -14,6 +14,12 @@ import ClayCard from './Card';
 
 interface IProps {
 	actions?: React.ComponentProps<typeof ClayDropDownWithItems>['items'];
+
+	/**
+	 * Flag to indicate that all interactions on the card will be disabled.
+	 */
+	disabled?: boolean;
+
 	/**
 	 * Path or URL to item
 	 */
@@ -47,6 +53,7 @@ interface IProps {
 
 export const ClayCardWithHorizontal: React.FunctionComponent<IProps> = ({
 	actions,
+	disabled,
 	href,
 	onSelectChange,
 	selected = false,
@@ -64,7 +71,11 @@ export const ClayCardWithHorizontal: React.FunctionComponent<IProps> = ({
 				</div>
 
 				<div className="autofit-col autofit-col-expand autofit-col-gutters">
-					<ClayCard.Description displayType="title" href={href}>
+					<ClayCard.Description
+						disabled={disabled}
+						displayType="title"
+						href={href}
+					>
 						{title}
 					</ClayCard.Description>
 				</div>
@@ -75,7 +86,10 @@ export const ClayCardWithHorizontal: React.FunctionComponent<IProps> = ({
 							items={actions}
 							spritemap={spritemap}
 							trigger={
-								<button className="component-action">
+								<button
+									className="component-action"
+									disabled={disabled}
+								>
 									<ClayIcon
 										spritemap={spritemap}
 										symbol="ellipsis-v"
@@ -94,8 +108,7 @@ export const ClayCardWithHorizontal: React.FunctionComponent<IProps> = ({
 			{onSelectChange && (
 				<ClayCheckbox
 					checked={selected}
-					disabled={false}
-					indeterminate={false}
+					disabled={disabled}
 					onChange={() => onSelectChange(!selected)}
 				>
 					{content}

packages/clay-card/src/CardWithInfo.tsx

@@ -25,6 +25,11 @@ interface IProps {
 	 */
 	description?: React.ReactText;
 
+	/**
+	 * Flag to indicate that all interactions on the card will be disabled.
+	 */
+	disabled?: boolean;
+
 	/**
 	 * Flag to indicate if `aspect-ratio-item-flush` class should be
 	 * applied to the image.
@@ -91,6 +96,7 @@ interface IProps {
 export const ClayCardWithInfo: React.FunctionComponent<IProps> = ({
 	actions,
 	description,
+	disabled,
 	flushHorizontal,
 	flushVertical,
 	href,
@@ -150,8 +156,7 @@ export const ClayCardWithInfo: React.FunctionComponent<IProps> = ({
 			{onSelectChange && (
 				<ClayCheckbox
 					checked={selected}
-					disabled={false}
-					indeterminate={false}
+					disabled={disabled}
 					onChange={() => onSelectChange(!selected)}
 				>
 					{headerContent}
@@ -163,7 +168,11 @@ export const ClayCardWithInfo: React.FunctionComponent<IProps> = ({
 			<ClayCard.Body>
 				<ClayCard.Row>
 					<div className="autofit-col autofit-col-expand">
-						<ClayCard.Description displayType="title" href={href}>
+						<ClayCard.Description
+							disabled={disabled}
+							displayType="title"
+							href={href}
+						>
 							{title}
 						</ClayCard.Description>
 
@@ -188,7 +197,10 @@ export const ClayCardWithInfo: React.FunctionComponent<IProps> = ({
 								items={actions}
 								spritemap={spritemap}
 								trigger={
-									<button className="component-action">
+									<button
+										className="component-action"
+										disabled={disabled}
+									>
 										<ClayIcon
 											spritemap={spritemap}
 											symbol="ellipsis-v"

packages/clay-card/src/CardWithUser.tsx

@@ -24,6 +24,11 @@ interface IProps {
 	 */
 	description: string;
 
+	/**
+	 * Flag to indicate that all interactions on the card will be disabled.
+	 */
+	disabled?: boolean;
+
 	/**
 	 * Path or URL to user
 	 */
@@ -70,6 +75,7 @@ interface IProps {
 export const ClayCardWithUser: React.FunctionComponent<IProps> = ({
 	actions,
 	description,
+	disabled,
 	href,
 	labels,
 	name,
@@ -106,8 +112,7 @@ export const ClayCardWithUser: React.FunctionComponent<IProps> = ({
 				{onSelectChange && (
 					<ClayCheckbox
 						checked={selected}
-						disabled={false}
-						indeterminate={false}
+						disabled={disabled}
 						onChange={() => onSelectChange(!selected)}
 					>
 						{content}
@@ -120,7 +125,11 @@ export const ClayCardWithUser: React.FunctionComponent<IProps> = ({
 			<ClayCard.Body>
 				<ClayCard.Row>
 					<div className="autofit-col autofit-col-expand">
-						<ClayCard.Description displayType="title" href={href}>
+						<ClayCard.Description
+							disabled={disabled}
+							displayType="title"
+							href={href}
+						>
 							{name}
 						</ClayCard.Description>
 						<ClayCard.Description displayType="subtitle">
@@ -143,7 +152,10 @@ export const ClayCardWithUser: React.FunctionComponent<IProps> = ({
 								items={actions}
 								spritemap={spritemap}
 								trigger={
-									<button className="component-action">
+									<button
+										className="component-action"
+										disabled={disabled}
+									>
 										<ClayIcon
 											spritemap={spritemap}
 											symbol="ellipsis-v"

packages/clay-card/src/Description.tsx

@@ -18,6 +18,11 @@ interface ICardDescriptionProps
 	 */
 	displayType: CardDescriptionDisplayType;
 
+	/**
+	 * Flag to indicate if href will be disabled.
+	 */
+	disabled?: boolean;
+
 	/**
 	 * Path or URL
 	 */
@@ -38,13 +43,14 @@ const CARD_TYPE_ELEMENTS = {
 const ClayCardDescription: React.FunctionComponent<ICardDescriptionProps> = ({
 	children,
 	className,
+	disabled,
 	displayType,
 	href,
 	truncate = true,
 	...otherProps
 }: ICardDescriptionProps) => {
 	const OuterTag = CARD_TYPE_ELEMENTS[displayType];
-	const InnerTag = href ? 'a' : 'span';
+	const InnerTag = href && !disabled ? 'a' : 'span';
 
 	return (
 		<OuterTag