feat(card): create CardWithFolder high-level component

Author: bryceosterhaus

packages/clay-card/src/CardWithFolder.tsx

@@ -0,0 +1,99 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import ClayCard from './Card';
+import ClayForm from '@clayui/form';
+import ClayIcon from '@clayui/icon';
+import ClaySticker from '@clayui/sticker';
+import React from 'react';
+import {ClayDropDownWithBasicItems} from '@clayui/drop-down';
+
+interface IProps {
+	actions?: React.ComponentProps<typeof ClayDropDownWithBasicItems>['items'];
+	/**
+	 * Path or URL to folder
+	 */
+	href?: string;
+
+	/**
+	 * Name of the folder
+	 */
+	name: string;
+
+	/**
+	 * Callback for when item is selected
+	 */
+	onSelectChange?: (val: boolean) => void;
+
+	/**
+	 * Flag to indicate if card is selected
+	 */
+	selected?: boolean;
+
+	/**
+	 * Path to clay icon spritemap
+	 */
+	spritemap: string;
+}
+
+export const ClayCardWithFolder: React.FunctionComponent<IProps> = ({
+	actions,
+	href,
+	name,
+	onSelectChange,
+	selected = false,
+	spritemap,
+}) => {
+	const content = (
+		<ClayCard.Body>
+			<div className="autofit-col">
+				<ClaySticker inline>
+					<ClayIcon spritemap={spritemap} symbol="folder" />
+				</ClaySticker>
+			</div>
+
+			<div className="autofit-col autofit-col-expand autofit-col-gutters">
+				<ClayCard.Description displayType="title" href={href}>
+					{name}
+				</ClayCard.Description>
+			</div>
+
+			{actions && (
+				<div className="autofit-col">
+					<ClayDropDownWithBasicItems
+						items={actions}
+						spritemap={spritemap}
+						trigger={
+							<button className="component-action">
+								<ClayIcon
+									spritemap={spritemap}
+									symbol="ellipsis-v"
+								/>
+							</button>
+						}
+					/>
+				</div>
+			)}
+		</ClayCard.Body>
+	);
+
+	return (
+		<ClayCard horizontal selectable={!!onSelectChange}>
+			{onSelectChange && (
+				<ClayForm.Checkbox
+					checked={selected}
+					disabled={false}
+					indeterminate={false}
+					onChange={() => onSelectChange(!selected)}
+				>
+					{content}
+				</ClayForm.Checkbox>
+			)}
+
+			{!onSelectChange && content}
+		</ClayCard>
+	);
+};

packages/clay-card/src/Description.tsx

@@ -5,14 +5,13 @@
  */
 
 import classNames from 'classnames';
-import Context from './Context';
 import React from 'react';
 
 type CardDescriptionDisplayType = 'text' | 'title' | 'subtitle';
 
 interface ICardDescriptionProps
 	extends React.HTMLAttributes<
-		HTMLAnchorElement | HTMLDivElement | HTMLSpanElement
+		HTMLHeadingElement | HTMLDivElement | HTMLSpanElement
 	> {
 	/**
 	 * Type of description that can be applied for a text.
@@ -30,6 +29,12 @@ interface ICardDescriptionProps
 	truncate?: boolean;
 }
 
+const CARD_TYPE_ELEMENTS = {
+	subtitle: 'span',
+	text: 'div',
+	title: 'h3',
+};
+
 const ClayCardDescription: React.FunctionComponent<ICardDescriptionProps> = ({
 	children,
 	className,
@@ -38,22 +43,24 @@ const ClayCardDescription: React.FunctionComponent<ICardDescriptionProps> = ({
 	truncate = true,
 	...otherProps
 }: ICardDescriptionProps) => {
-	const {interactive} = React.useContext(Context);
-
-	const interactiveTag = interactive ? 'span' : 'div';
-
-	const TagName = href ? 'a' : interactiveTag;
+	const OuterTag = CARD_TYPE_ELEMENTS[displayType] as ('span' | 'div' | 'h3');
+	const InnerTag = href ? 'a' : 'span';
 
 	return (
-		<TagName
-			className={classNames(className, `card-${displayType}`, {
-				'text-truncate': truncate,
-			})}
-			href={href}
+		<OuterTag
+			className={classNames(className, `card-${displayType}`)}
+			title={children ? children.toString() : undefined}
 			{...otherProps}
 		>
-			{children}
-		</TagName>
+			<span className={truncate ? 'text-truncate-inline' : ''}>
+				<InnerTag
+					className={truncate ? 'text-truncate' : ''}
+					href={href}
+				>
+					{children}
+				</InnerTag>
+			</span>
+		</OuterTag>
 	);
 };