@plusscommunities/pluss-feature-builder-web-a 1.0.2-beta.0

package/src/components/listing/GalleryDisplay.jsx

@@ -0,0 +1,331 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Text } from "../../components";
+import { iconImports } from "../../components/iconImports.js";
+import styles from "./GalleryDisplay.module.css";
+
+
+export const GalleryDisplay = (props) => {
+	const {
+		images = [],
+		layout = "grid",
+		columns = 3,
+		allowReordering = false,
+		allowLightbox = false,
+		style = {},
+		onImageClick,
+		onImageRemove,
+		onImageReorder,
+	} = props;
+
+	const [lightboxImage, setLightboxImage] = useState(null);
+	const [draggedIndex, setDraggedIndex] = useState(null);
+
+	// Filter out empty/invalid images
+	const validImages = images.filter((img) => img && img !== "");
+
+	if (validImages.length === 0) {
+		return (
+			<div className={styles.emptyGallery} style={style}>
+				<Text type="body" className={styles.emptyGalleryText}>
+					No images in gallery
+				</Text>
+			</div>
+		);
+	}
+
+	const handleImageClick = (image, index) => {
+		if (allowLightbox) {
+			setLightboxImage({ image, index });
+		}
+		if (onImageClick) {
+			onImageClick(image, index);
+		}
+	};
+
+	const handleDragStart = (index) => {
+		if (allowReordering) {
+			setDraggedIndex(index);
+		}
+	};
+
+	const handleDragOver = (e) => {
+		if (allowReordering) {
+			e.preventDefault();
+		}
+	};
+
+	const handleDrop = (e, dropIndex) => {
+		if (allowReordering && draggedIndex !== null) {
+			e.preventDefault();
+			onImageReorder?.(draggedIndex, dropIndex);
+			setDraggedIndex(null);
+		}
+	};
+
+	const removeImage = (index, e) => {
+		e.stopPropagation();
+		onImageRemove?.(index);
+	};
+
+	// Grid Layout
+	if (layout === "grid") {
+		return (
+			<>
+				<div
+					className={styles.gridContainer}
+					style={{
+						"--columns": columns,
+						...style,
+					}}
+				>
+					{validImages.map((image, index) => (
+						<div
+							key={index}
+							className={styles.galleryItem}
+							onClick={() => handleImageClick(image, index)}
+							draggable={allowReordering}
+							onDragStart={() => handleDragStart(index)}
+							onDragOver={handleDragOver}
+							onDrop={(e) => handleDrop(e, index)}
+							style={{
+								cursor: allowLightbox || onImageClick ? "pointer" : "default",
+							}}
+						>
+							<img
+								src={image}
+								alt={`Gallery image ${index + 1}`}
+								className={styles.galleryItemImage}
+							/>
+
+							{/* Remove button */}
+							{onImageRemove && (
+								<button
+									onClick={(e) => removeImage(index, e)}
+									className={styles.removeButton}
+								>
+									<FontAwesomeIcon icon={iconImports.minusCircle} />
+								</button>
+							)}
+
+							{/* Drag indicator */}
+							{allowReordering && (
+								<div className={styles.dragHandle}>
+									<FontAwesomeIcon icon={iconImports.repeat} />
+								</div>
+							)}
+						</div>
+					))}
+				</div>
+
+				{/* Lightbox */}
+				{lightboxImage && (
+					<div
+						className={styles.lightbox}
+						onClick={() => setLightboxImage(null)}
+					>
+						<img
+							src={lightboxImage.image}
+							alt={`Gallery image ${lightboxImage.index + 1}`}
+							className={styles.lightboxImage}
+							onClick={(e) => e.stopPropagation()}
+						/>
+
+						{/* Lightbox close button */}
+						<button
+							onClick={() => setLightboxImage(null)}
+							className={styles.lightboxClose}
+						>
+							×
+						</button>
+
+						{/* Lightbox navigation */}
+						{validImages.length > 1 && (
+							<>
+								{lightboxImage.index > 0 && (
+									<button
+										onClick={(e) => {
+											e.stopPropagation();
+											setLightboxImage({
+												image: validImages[lightboxImage.index - 1],
+												index: lightboxImage.index - 1,
+											});
+										}}
+										className={`${styles.carouselNav} ${styles.carouselNavPrev}`}
+									>
+										‹
+									</button>
+								)}
+								{lightboxImage.index < validImages.length - 1 && (
+									<button
+										onClick={(e) => {
+											e.stopPropagation();
+											setLightboxImage({
+												image: validImages[lightboxImage.index + 1],
+												index: lightboxImage.index + 1,
+											});
+										}}
+										className={`${styles.carouselNav} ${styles.carouselNavNext}`}
+									>
+										›
+									</button>
+								)}
+							</>
+						)}
+					</div>
+				)}
+			</>
+		);
+	}
+
+	// List Layout
+	if (layout === "list") {
+		return (
+			<div className={styles.listContainer} style={style}>
+				{validImages.map((image, index) => (
+					<div key={index} className={styles.listItemContent}>
+						<img
+							src={image}
+							alt={`Gallery image ${index + 1}`}
+							className={styles.listItemImage}
+							onClick={() => handleImageClick(image, index)}
+							style={{
+								cursor: allowLightbox || onImageClick ? "pointer" : "default",
+							}}
+						/>
+
+						<div className={styles.listItemText}>
+							<Text type="bodyLarge" className={styles.listItemTitle}>
+								Image {index + 1}
+							</Text>
+						</div>
+
+						{/* Actions */}
+						<div
+							className={`${styles.listItemActions} ${styles.flex} ${styles.gap8}`}
+						>
+							{onImageRemove && (
+								<button
+									onClick={() => onImageRemove(index)}
+									className={styles.removeButton}
+								>
+									<FontAwesomeIcon icon={iconImports.minusCircle} />
+								</button>
+							)}
+						</div>
+					</div>
+				))}
+			</div>
+		);
+	}
+
+	// Carousel Layout (simplified version)
+	if (layout === "carousel") {
+		const [currentIndex, setCurrentIndex] = useState(0);
+
+		return (
+			<div className={styles.carouselContainer} style={style}>
+				<div className={styles.carouselItem}>
+					{/* Current image */}
+					<img
+						src={validImages[currentIndex]}
+						alt={`Gallery image ${currentIndex + 1}`}
+						className={styles.galleryItemImage}
+						onClick={() =>
+							handleImageClick(validImages[currentIndex], currentIndex)
+						}
+						style={{
+							cursor: allowLightbox || onImageClick ? "pointer" : "default",
+							height: "400px",
+						}}
+					/>
+
+					{/* Navigation */}
+					{validImages.length > 1 && (
+						<>
+							{currentIndex > 0 && (
+								<button
+									onClick={() => setCurrentIndex(currentIndex - 1)}
+									className={`${styles.carouselNav} ${styles.carouselNavPrev}`}
+								>
+									‹
+								</button>
+							)}
+							{currentIndex < validImages.length - 1 && (
+								<button
+									onClick={() => setCurrentIndex(currentIndex + 1)}
+									className={`${styles.carouselNav} ${styles.carouselNavNext}`}
+								>
+									›
+								</button>
+							)}
+						</>
+					)}
+				</div>
+
+				{/* Thumbnail strip */}
+				{validImages.length > 1 && (
+					<div
+						style={{
+							display: "flex",
+							gap: "8px",
+							marginTop: "12px",
+							overflowX: "auto",
+							padding: "8px 0",
+						}}
+					>
+						{validImages.map((image, index) => (
+							<img
+								key={index}
+								src={image}
+								alt={`Thumbnail ${index + 1}`}
+								style={{
+									width: "60px",
+									height: "60px",
+									objectFit: "cover",
+									borderRadius: "4px",
+									border:
+										index === currentIndex
+											? "2px solid var(--colour-branding-primary)"
+											: "1px solid var(--border-line-grey)",
+									cursor: "pointer",
+									opacity: index === currentIndex ? 1 : 0.6,
+								}}
+								onClick={() => setCurrentIndex(index)}
+							/>
+						))}
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	// Fallback to grid
+	return (
+		<div
+			style={{
+				display: "grid",
+				gridTemplateColumns: `repeat(${columns}, 1fr)`,
+				gap: "12px",
+				...style,
+			}}
+		>
+			{validImages.map((image, index) => (
+				<img
+					key={index}
+					src={image}
+					alt={`Gallery image ${index + 1}`}
+					style={{
+						width: "100%",
+						aspectRatio: "1",
+						objectFit: "cover",
+						borderRadius: "8px",
+						border: "1px solid var(--border-line-grey)",
+					}}
+				/>
+			))}
+		</div>
+	);
+};
+
+export default GalleryDisplay;

package/src/components/listing/GalleryDisplay.module.css

@@ -0,0 +1,309 @@
+/* Empty gallery container */
+.emptyGallery {
+	border: 2px dashed var(--border-line-grey);
+	border-radius: var(--border-radius-lg);
+	padding: 2.5rem 1.25rem;
+	text-align: center;
+}
+
+/* Empty gallery text */
+.emptyGalleryText {
+	color: var(--text-bluegrey);
+}
+
+/* Grid layout container */
+.gridContainer {
+	display: grid;
+	grid-template-columns: repeat(var(--columns, 3), 1fr);
+	gap: 1rem;
+}
+
+/* List layout container */
+.listContainer {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+/* Carousel container */
+.carouselContainer {
+	position: relative;
+	overflow: hidden;
+	border-radius: var(--border-radius-lg);
+}
+
+/* Carousel track */
+.carouselTrack {
+	display: flex;
+	transition: transform var(--transition-base) ease;
+}
+
+/* Carousel item */
+.carouselItem {
+	flex: 0 0 100%;
+	width: 100%;
+}
+
+/* Carousel navigation */
+.carouselNav {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	background: rgba(0, 0, 0, 0.5);
+	color: white;
+	border: none;
+	border-radius: var(--border-radius-full);
+	width: 2.5rem;
+	height: 2.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	transition: background var(--transition-base) ease;
+}
+
+.carouselNav:hover {
+	background: rgba(0, 0, 0, 0.7);
+}
+
+.carouselNavPrev {
+	left: 0.75rem;
+}
+
+.carouselNavNext {
+	right: 0.75rem;
+}
+
+/* Gallery item */
+.galleryItem {
+	position: relative;
+	border-radius: var(--border-radius-lg);
+	overflow: hidden;
+	background-color: var(--bg-bluegrey);
+	cursor: pointer;
+	transition:
+		transform var(--transition-base) ease,
+		box-shadow var(--transition-base) ease;
+}
+
+.galleryItem:hover {
+	transform: translateY(-2px);
+	box-shadow: var(--shadow-lg);
+}
+
+/* Gallery item image */
+.galleryItemImage {
+	width: 100%;
+	height: 12.5rem;
+	object-fit: cover;
+	display: block;
+}
+
+/* List item image */
+.listItemImage {
+	width: 120px;
+	height: 120px;
+	object-fit: cover;
+	border-radius: var(--border-radius-lg);
+	flex-shrink: 0;
+}
+
+/* Remove button */
+.removeButton {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	background: transparent;
+	color: var(--colour-branding-primary);
+	border: none;
+	border-radius: var(--border-radius-full);
+	width: 1.75rem;
+	height: 1.75rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	opacity: 0;
+	transition: opacity var(--transition-base) ease;
+}
+
+.galleryItem:hover .removeButton {
+	opacity: 1;
+}
+
+/* Dragging state */
+.dragging {
+	opacity: 0.5;
+}
+
+.dragOver {
+	border: 2px dashed var(--colour-branding-action);
+}
+
+/* Lightbox */
+.lightbox {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.9);
+	z-index: 1000;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.lightboxImage {
+	max-width: 90%;
+	max-height: 90%;
+	object-fit: contain;
+	border-radius: var(--border-radius-lg);
+}
+
+.lightboxClose {
+	position: absolute;
+	top: 1.25rem;
+	right: 1.25rem;
+	background: rgba(255, 255, 255, 0.2);
+	color: white;
+	border: none;
+	border-radius: var(--border-radius-full);
+	width: 2.5rem;
+	height: 2.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	transition: background var(--transition-base) ease;
+}
+
+.lightboxClose:hover {
+	background: rgba(255, 255, 255, 0.3);
+}
+
+/* List item content */
+.listItemContent {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+	padding: 1rem;
+	background-color: var(--bg-white);
+	border-radius: var(--border-radius-lg);
+	border: 1px solid var(--border-line-grey);
+}
+
+.listItemText {
+	flex: 1;
+}
+
+.listItemTitle {
+	margin-bottom: 0.1rem;
+}
+
+.listItemActions {
+	display: flex;
+	gap: 8px;
+}
+
+/* List layout remove button (always visible) */
+.listItemContent .removeButton {
+	opacity: 1;
+	position: static;
+	background: transparent;
+	color: var(--colour-branding-primary);
+}
+
+/* Drag handle */
+.dragHandle {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background: rgba(0, 0, 0, 0.5);
+	color: white;
+	border: none;
+	border-radius: var(--border-radius-base);
+	padding: 0.1rem 0.2rem;
+	font-size: var(--font-size-xs);
+	cursor: move;
+	opacity: 0;
+	transition: opacity var(--transition-base) ease;
+}
+
+.galleryItem:hover .dragHandle {
+	opacity: 1;
+}
+
+/* Carousel dots */
+.carouselDots {
+	display: flex;
+	justify-content: center;
+	gap: 8px;
+	margin-top: 12px;
+}
+
+.carouselDot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: var(--border-line-grey);
+	cursor: pointer;
+	transition: background var(--transition-base) ease;
+}
+
+.carouselDot.active {
+	background: var(--colour-branding-action);
+}
+
+/* Reorder button */
+.reorderButton {
+	background: var(--colour-branding-action);
+	color: white;
+	border: none;
+	border-radius: var(--border-radius-base);
+	padding: 0.1rem 0.2rem;
+	font-size: var(--font-size-xs);
+	cursor: pointer;
+	transition: background var(--transition-base) ease;
+}
+
+.reorderButton:hover {
+	background: var(--colour-branding-action-hover);
+}
+
+/* Text styling */
+.textBlueGrey {
+	color: var(--text-bluegrey);
+}
+
+/* Flex utilities */
+.flex1 {
+	flex: 1;
+}
+
+.flex {
+	display: flex;
+}
+
+.gap8 {
+	gap: 0.2rem;
+}
+
+.listItemActions {
+	display: flex;
+	gap: 0.2rem;
+}
+
+/* Carousel navigation specific styling for carousel layout */
+.carouselNav:not(.carouselNavPrev):not(.carouselNavNext) {
+	left: 0.3rem;
+}
+
+.carouselNav.carouselNavPrev {
+	left: 0.3rem;
+}
+
+.carouselNav.carouselNavNext {
+	right: 12px;
+}

package/src/components/listing/ListingCTAInput.jsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { GenericInput, Text } from "../index.js";
+import { iconImports } from "../iconImports.js";
+import styles from "./ListingField.module.css";
+
+const ListingCTAInput = ({
+	field,
+	value,
+	onChange,
+	showError,
+	errorMessage,
+}) => {
+	const { label, placeholder, isRequired } = field.values;
+
+	// CTA field value should contain both label and url
+	const fieldValue = value || {};
+	const buttonLabel = fieldValue.label || "";
+	const buttonUrl = fieldValue.url || "";
+
+	const handleLabelChange = (e) => {
+		const newValue = { ...fieldValue, label: e.target.value };
+		onChange(field.id, newValue);
+	};
+
+	const handleUrlChange = (e) => {
+		const newValue = { ...fieldValue, url: e.target.value };
+		onChange(field.id, newValue);
+	};
+
+	const createLabel = (text, required) => (
+		<>
+			{text}
+			{required && <span className={styles.requiredAsterisk}>*</span>}
+		</>
+	);
+
+	return (
+		<>
+			{/* Field header with icon and description */}
+			<div className={styles.listingField__header}>
+				<div className={styles.listingField__icon}>
+					<FontAwesomeIcon icon={iconImports.link} />
+				</div>
+				<div className={styles.listingField__content}>
+					<h3 className={styles.listingField__title}>Action Button</h3>
+					<p className={styles.listingField__description}>
+						Create clickable buttons with custom text and links
+					</p>
+				</div>
+			</div>
+
+			<GenericInput
+				type="text"
+				label={createLabel(`${label} - Button Text`, isRequired)}
+				placeholder="Enter button text"
+				value={buttonLabel}
+				onChange={handleLabelChange}
+				isRequired={isRequired}
+				isValid={!isRequired || buttonLabel.trim().length > 0}
+				showError={showError && isRequired && buttonLabel.trim().length === 0}
+				errorMessage="Button text is required"
+				alwaysShowLabel
+			/>
+			<GenericInput
+				type="text"
+				label={createLabel(`${label} - Button URL`, isRequired)}
+				placeholder="Enter button URL (e.g., https://example.com)"
+				value={buttonUrl}
+				onChange={handleUrlChange}
+				isRequired={isRequired}
+				isValid={!isRequired || buttonUrl.trim().length > 0}
+				showError={showError && isRequired && buttonUrl.trim().length === 0}
+				errorMessage="Button URL is required"
+				help="Enter the full URL including https:// or http://"
+				alwaysShowLabel
+			/>
+		</>
+	);
+};
+
+export default ListingCTAInput;