feat(@clayui/card): add active state for card when it is selected

Author: bryceosterhaus

packages/clay-card/src/Card.tsx

@@ -17,6 +17,11 @@ import Group from './Group';
 import Row from './Row';
 
 export interface ICardProps extends IContext {
+	/**
+	 * Flag that indicates if `active` class is applied
+	 */
+	active?: boolean;
+
 	/**
 	 * Determines the style of the card
 	 */
@@ -35,6 +40,7 @@ interface IProps
 		> {}
 
 const ClayCard: React.FunctionComponent<IProps> = ({
+	active,
 	children,
 	className,
 	displayType,
@@ -53,6 +59,7 @@ const ClayCard: React.FunctionComponent<IProps> = ({
 				className={classNames(
 					className,
 					{
+						active,
 						card: !selectable,
 						'file-card': isCardType.file,
 						'form-check-card form-check form-check-top-left': selectable,

packages/clay-card/src/CardHorizontal.tsx

@@ -9,6 +9,11 @@ import React from 'react';
 import Context from './Context';
 
 interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
+	/**
+	 * Flag that indicates if `active` class is applied
+	 */
+	active?: boolean;
+
 	/**
 	 * Flag that indicates if the card can be selectable.
 	 */
@@ -28,12 +33,13 @@ const ClayCardHorizontalBody: React.FunctionComponent<React.HTMLAttributes<
 
 export const ClayCardHorizontal: React.FunctionComponent<IProps> & {
 	Body: typeof ClayCardHorizontalBody;
-} = ({children, className, selectable, ...otherProps}) => (
+} = ({active, children, className, selectable, ...otherProps}) => (
 	<Context.Provider value={{horizontal: true, interactive: false}}>
 		<div
 			className={classNames(
 				className,
 				{
+					active,
 					'card card-horizontal': !selectable,
 					'form-check-card form-check form-check-middle-left': selectable,
 				},

packages/clay-card/src/CardWithHorizontal.tsx

@@ -118,7 +118,11 @@ export const ClayCardWithHorizontal: React.FunctionComponent<IProps> = ({
 	);
 
 	return (
-		<ClayCardHorizontal {...otherProps} selectable={!!onSelectChange}>
+		<ClayCardHorizontal
+			{...otherProps}
+			active={selected}
+			selectable={!!onSelectChange}
+		>
 			{onSelectChange && (
 				<ClayCheckbox
 					{...checkboxProps}

packages/clay-card/src/CardWithInfo.tsx

@@ -199,6 +199,7 @@ export const ClayCardWithInfo: React.FunctionComponent<IProps> = ({
 	return (
 		<ClayCard
 			{...otherProps}
+			active={selected}
 			displayType={isCardType.image ? 'image' : 'file'}
 			selectable={!!onSelectChange}
 		>

packages/clay-card/src/CardWithUser.tsx

@@ -122,6 +122,7 @@ export const ClayCardWithUser: React.FunctionComponent<IProps> = ({
 	return (
 		<ClayCard
 			{...otherProps}
+			active={selected}
 			displayType="user"
 			selectable={!!onSelectChange}
 		>

packages/clay-card/src/__tests__/__snapshots__/index.tsx.snap

@@ -918,6 +918,78 @@ exports[`ClayCard renders a ClayCard as user selectable card 1`] = `
 </div>
 `;
 
+exports[`ClayCard renders a ClayCard with an active selected state 1`] = `
+<div>
+  <div
+    class="active form-check-card form-check form-check-top-left card-type-asset"
+  >
+    <div
+      class="card"
+    >
+      <div
+        class="custom-control custom-checkbox"
+      >
+        <label>
+          <input
+            class="custom-control-input"
+            type="checkbox"
+          />
+          <span
+            class="custom-control-label"
+          />
+          <div
+            class="card-body"
+          >
+            <div
+              class="card-row"
+            >
+              <div
+                class="autofit-col"
+              >
+                <span
+                  class="sticker sticker-secondary"
+                >
+                  <span
+                    class="sticker-overlay inline-item"
+                  >
+                    <svg
+                      class="lexicon-icon lexicon-icon-folder"
+                      role="presentation"
+                    >
+                      <use
+                        xlink:href="/path/to/some/resource.svg#folder"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="autofit-col autofit-col-expand autofit-col-gutters"
+              >
+                <p
+                  class="card-title"
+                  title="Very Large Folder"
+                >
+                  <span
+                    class="text-truncate-inline"
+                  >
+                    <span
+                      class="text-truncate"
+                    >
+                      Very Large Folder
+                    </span>
+                  </span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ClayCard renders a group of ClayCards 1`] = `
 <div>
   <ul

packages/clay-card/src/__tests__/index.tsx

@@ -90,6 +90,34 @@ describe('ClayCard', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('renders a ClayCard with an active selected state', () => {
+		const {container} = render(
+			<ClayCard active selectable>
+				<ClayCheckboxWithState>
+					<ClayCard.Body>
+						<ClayCard.Row>
+							<div className="autofit-col">
+								<ClaySticker displayType="secondary" inline>
+									<ClayIcon
+										spritemap="/path/to/some/resource.svg"
+										symbol="folder"
+									/>
+								</ClaySticker>
+							</div>
+							<div className="autofit-col autofit-col-expand autofit-col-gutters">
+								<ClayCard.Description displayType="title">
+									{'Very Large Folder'}
+								</ClayCard.Description>
+							</div>
+						</ClayCard.Row>
+					</ClayCard.Body>
+				</ClayCheckboxWithState>
+			</ClayCard>
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+
 	it('renders a ClayCard as image card', () => {
 		const {container} = render(
 			<ClayCard displayType="image">