Merge pull request #2208 from bryceosterhaus/2196

feat(card): create CardWithFile high-level component
liferay · Jul 24, 2019 · dc3798a · dc3798a
2 parents 0ca8b8d + 55d2080
commit dc3798a
Show file tree

Hide file tree

Showing 11 changed files with 2,242 additions and 1,111 deletions.
diff --git a/packages/clay-card/package.json b/packages/clay-card/package.json
@@ -26,6 +26,11 @@
 		"react"
 	],
 	"dependencies": {
+		"@clayui/drop-down": "^3.0.0-milestone.1",
+		"@clayui/form": "^3.0.0-milestone.1",
+		"@clayui/icon": "^3.0.0-milestone.1",
+		"@clayui/label": "^3.0.0-milestone.1",
+		"@clayui/sticker": "^3.0.0-milestone.1",
 		"classnames": "^2.2.6"
 	},
 	"devDependencies": {

diff --git a/packages/clay-card/src/CardWithHorizontal.tsx b/packages/clay-card/src/CardWithHorizontal.tsx
@@ -0,0 +1,105 @@
+/**
+ * © 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 item
+	 */
+	href?: 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;
+
+	/**
+	 * Name of icon symbol
+	 */
+	symbol?: string;
+
+	/**
+	 * Name of the item
+	 */
+	title: string;
+}
+
+export const ClayCardWithHorizontal: React.FunctionComponent<IProps> = ({
+	actions,
+	href,
+	onSelectChange,
+	selected = false,
+	spritemap,
+	symbol = 'folder',
+	title,
+}) => {
+	const content = (
+		<ClayCard.Body>
+			<div className="autofit-col">
+				<ClaySticker inline>
+					<ClayIcon spritemap={spritemap} symbol={symbol} />
+				</ClaySticker>
+			</div>
+
+			<div className="autofit-col autofit-col-expand autofit-col-gutters">
+				<ClayCard.Description displayType="title" href={href}>
+					{title}
+				</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>
+	);
+};
diff --git a/packages/clay-card/src/CardWithInfo.tsx b/packages/clay-card/src/CardWithInfo.tsx
@@ -0,0 +1,202 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import classNames from 'classnames';
+import ClayCard from './Card';
+import ClayForm from '@clayui/form';
+import ClayIcon from '@clayui/icon';
+import ClayLabel from '@clayui/label';
+import ClaySticker from '@clayui/sticker';
+import React, {ImgHTMLAttributes} from 'react';
+import {ClayDropDownWithBasicItems} from '@clayui/drop-down';
+
+interface IProps {
+	/**
+	 * List of actions in the dropdown menu
+	 */
+	actions?: React.ComponentProps<typeof ClayDropDownWithBasicItems>['items'];
+
+	/**
+	 * Description of the file
+	 */
+	description?: React.ReactText;
+
+	/**
+	 * Flag to indicate if `aspect-ratio-item-flush` class should be
+	 * applied to the image.
+	 */
+	flushHorizontal?: boolean;
+
+	/**
+	 * Flag to indicate if `aspect-ratio-item-vertical-flush` class should be
+	 * applied to the image.
+	 */
+	flushVertical?: boolean;
+
+	/**
+	 * Path or URL to file
+	 */
+	href?: string;
+
+	/**
+	 * Object of props for `<img />` or string path to image
+	 */
+	imgProps?: React.ImgHTMLAttributes<HTMLImageElement> | string;
+
+	/**
+	 * List of labels that are applied to the file
+	 */
+	labels?: Array<
+		React.ComponentProps<typeof ClayLabel> & {value: React.ReactText}
+	>;
+
+	/**
+	 * 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;
+
+	/**
+	 * Values used in displaying bottom-left icon
+	 */
+	stickerProps?: {
+		content: React.ReactNode;
+		displayType: React.ComponentProps<typeof ClaySticker>['displayType'];
+	};
+
+	/**
+	 * Name of icon
+	 */
+	symbol?: string;
+
+	/**
+	 * Name of the file
+	 */
+	title: string;
+}
+
+export const ClayCardWithInfo: React.FunctionComponent<IProps> = ({
+	actions,
+	description,
+	flushHorizontal,
+	flushVertical,
+	href,
+	imgProps,
+	labels,
+	onSelectChange,
+	selected = false,
+	spritemap,
+	stickerProps,
+	symbol = 'documents-and-media',
+	title,
+}) => {
+	const headerContent = (
+		<ClayCard.AspectRatio className="card-item-first">
+			{!imgProps && (
+				<div className="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
+					<ClayIcon spritemap={spritemap} symbol={symbol} />
+				</div>
+			)}
+
+			{imgProps && (
+				<img
+					className={classNames(
+						'aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-fluid',
+						typeof imgProps !== 'string' && imgProps.className,
+						{
+							['aspect-ratio-item-flush']: flushHorizontal,
+							['aspect-ratio-item-vertical-flush']: flushVertical,
+						}
+					)}
+					{...(typeof imgProps === 'string'
+						? {src: imgProps}
+						: imgProps)}
+				/>
+			)}
+
+			<ClaySticker
+				displayType={
+					stickerProps ? stickerProps.displayType : 'primary'
+				}
+				position="bottom-left"
+			>
+				{stickerProps ? (
+					stickerProps.content
+				) : (
+					<ClayIcon spritemap={spritemap} symbol="document-text" />
+				)}
+			</ClaySticker>
+		</ClayCard.AspectRatio>
+	);
+
+	return (
+		<ClayCard
+			displayType={imgProps ? 'image' : 'file'}
+			selectable={!!onSelectChange}
+		>
+			{onSelectChange && (
+				<ClayForm.Checkbox
+					checked={selected}
+					disabled={false}
+					indeterminate={false}
+					onChange={() => onSelectChange(!selected)}
+				>
+					{headerContent}
+				</ClayForm.Checkbox>
+			)}
+
+			{!onSelectChange && headerContent}
+
+			<ClayCard.Body>
+				<div className="autofit-col autofit-col-expand">
+					<ClayCard.Description displayType="title" href={href}>
+						{title}
+					</ClayCard.Description>
+
+					<ClayCard.Description displayType="subtitle">
+						{description}
+					</ClayCard.Description>
+
+					{labels && (
+						<ClayCard.Caption>
+							{labels.map(({value, ...others}, i: number) => (
+								<ClayLabel {...others} key={i}>
+									{value}
+								</ClayLabel>
+							))}
+						</ClayCard.Caption>
+					)}
+				</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>
+		</ClayCard>
+	);
+};
diff --git a/packages/clay-card/src/CardWithNavigation.tsx b/packages/clay-card/src/CardWithNavigation.tsx
@@ -15,6 +15,11 @@ interface IProps {
 	 */
 	description?: React.ReactText;
 
+	/**
+	 * Path or url for click through
+	 */
+	href?: string;
+
 	/**
 	 * Flag to indicate if card should be the `horizontal` variant
 	 */
@@ -25,11 +30,6 @@ interface IProps {
 	 */
 	horizontalSymbol?: string;
 
-	/**
-	 * Path or url for click through
-	 */
-	href?: string;
-
 	/**
 	 * Callback for when card is clicked on
 	 */