Init

Prefab.Web.Client/Components/Shared/Card.razor

@@ -0,0 +1,241 @@
+<div class="@RootClass" @attributes="AdditionalAttributes">
+	@if (Variant == CardVariant.Product)
+	{
+		if (ShowBadges && (Badges is not null || BadgesContent is not null))
+		{
+			<div class="product-card__badges-list">
+				@Badges
+				@BadgesContent
+			</div>
+		}
+
+		if (ShowActions && Actions is not null)
+		{
+			<div class="product-card__actions">
+				<div class="product-card__actions-list">
+					@Actions
+				</div>
+			</div>
+		}
+
+		<div class="product-card__image">
+			@if (Image is not null)
+			{
+				@Image
+			}
+			else if (!string.IsNullOrWhiteSpace(ImagePlaceholderText))
+			{
+				<span class="product-card__image-placeholder">@ImagePlaceholderText</span>
+			}
+		</div>
+
+		<div class="product-card__info">
+			@if (ShowMeta && Meta is not null)
+			{
+				<div class="product-card__category">
+					@Meta
+				</div>
+			}
+
+			@if (ShowHeading && Heading is not null)
+			{
+				<div class="product-card__name">
+					@Heading
+				</div>
+			}
+
+			@if (ShowRating && Rating is not null)
+			{
+				<div class="product-card__rating">
+					@Rating
+				</div>
+			}
+
+			@if (ShowDescription && Description is not null)
+			{
+				<div class="product-card__description">
+					@Description
+				</div>
+			}
+
+			@if (ShowPrices && Prices is not null)
+			{
+				<div class="product-card__prices-list">
+					@Prices
+				</div>
+			}
+
+			@if (ShowFooter && Footer is not null)
+			{
+				<div class="product-card__buttons">
+					<div class="product-card__buttons-list">
+						@Footer
+					</div>
+				</div>
+			}
+		</div>
+	}
+	else if (Variant == CardVariant.Category)
+	{
+		if (!string.IsNullOrWhiteSpace(LinkHref))
+		{
+			<a href="@LinkHref" target="@LinkTarget" rel="@LinkRel" @onclick="HandleLinkClickAsync">
+				@CategoryContent
+			</a>
+		}
+		else
+		{
+			@CategoryContent
+		}
+	}
+</div>
+
+@code {
+	private const string ProductRootClass = "product-card";
+	private const string ProductLayoutGridClass = "product-card--layout--grid";
+	private const string ProductLayoutListClass = "product-card--layout--list";
+	private const string CategoryRootClass = "card";
+	private const string CategoryCardClass = "category-card";
+
+	[Parameter]
+	public CardVariant Variant { get; set; } = CardVariant.Product;
+
+	[Parameter]
+	public string Layout { get; set; } = "grid";
+
+	[Parameter]
+	public string CssClass { get; set; } = string.Empty;
+
+	[Parameter]
+	public string ImagePlaceholderText { get; set; } = "Image coming soon";
+
+	[Parameter]
+	public string? LinkHref { get; set; }
+
+	[Parameter]
+	public string? LinkTarget { get; set; }
+
+	[Parameter]
+	public string? LinkRel { get; set; }
+
+	[Parameter]
+	public EventCallback<MouseEventArgs> OnLinkClick { get; set; }
+
+	[Parameter]
+	public RenderFragment? Badges { get; set; }
+
+	[Parameter]
+	public RenderFragment? BadgesContent { get; set; }
+
+	[Parameter]
+	public RenderFragment? Actions { get; set; }
+
+	[Parameter]
+	public RenderFragment? Image { get; set; }
+
+	[Parameter]
+	public RenderFragment? Meta { get; set; }
+
+	[Parameter]
+	public RenderFragment? Heading { get; set; }
+
+	[Parameter]
+	public RenderFragment? Rating { get; set; }
+
+	[Parameter]
+	public RenderFragment? Description { get; set; }
+
+	[Parameter]
+	public RenderFragment? Prices { get; set; }
+
+	[Parameter]
+	public RenderFragment? Footer { get; set; }
+
+	[Parameter(CaptureUnmatchedValues = true)]
+	public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
+
+	[Parameter]
+	public bool ShowBadges { get; set; } = true;
+
+	[Parameter]
+	public bool ShowActions { get; set; } = true;
+
+	[Parameter]
+	public bool ShowMeta { get; set; } = true;
+
+	[Parameter]
+	public bool ShowHeading { get; set; } = true;
+
+	[Parameter]
+	public bool ShowRating { get; set; } = true;
+
+	[Parameter]
+	public bool ShowDescription { get; set; } = true;
+
+	[Parameter]
+	public bool ShowPrices { get; set; } = true;
+
+	[Parameter]
+	public bool ShowFooter { get; set; } = true;
+
+	private string RootClass => Variant switch
+	{
+		CardVariant.Category => BuildClass(CategoryRootClass, CategoryCardClass, CssClass),
+		_ => BuildClass(ProductRootClass, ResolveLayoutClass(), CssClass)
+	};
+
+	private string ResolveLayoutClass() =>
+		string.Equals(Layout, "list", StringComparison.OrdinalIgnoreCase)
+			? ProductLayoutListClass
+			: ProductLayoutGridClass;
+
+	private static string BuildClass(params string?[] values)
+	{
+		var parts = new List<string>(values.Length);
+
+		foreach (var value in values)
+		{
+			if (!string.IsNullOrWhiteSpace(value))
+			{
+				parts.Add(value);
+			}
+		}
+
+		return string.Join(" ", parts);
+	}
+
+	private RenderFragment CategoryContent => @<text>
+		@if (Image is not null)
+		{
+			<div class="category-card__image">
+				@Image
+			</div>
+		}
+		else if (!string.IsNullOrWhiteSpace(ImagePlaceholderText))
+		{
+			<div class="category-card__image">@ImagePlaceholderText</div>
+		}
+
+		@if (Heading is not null)
+		{
+			<div class="category-card__name">
+				@Heading
+			</div>
+		}
+
+		@if (Description is not null)
+		{
+			<div class="category-card__products">
+				@Description
+			</div>
+		}
+
+		@if (Footer is not null)
+		{
+			@Footer
+		}
+	</text>;
+
+	private Task HandleLinkClickAsync(MouseEventArgs args) =>
+		OnLinkClick.HasDelegate ? OnLinkClick.InvokeAsync(args) : Task.CompletedTask;
+}

Prefab.Web.Client/Components/Shared/CardGrid.razor

@@ -0,0 +1,33 @@
+<div class="@ContainerClass">
+	@ChildContent
+</div>
+
+@code {
+	[Parameter]
+	public string View { get; set; } = "grid";
+
+	[Parameter]
+	public string CssClass { get; set; } = string.Empty;
+
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
+	private string ContainerClass => string.Join(" ", BuildClasses());
+
+	private IEnumerable<string> BuildClasses()
+	{
+		yield return "products-view__list";
+		yield return "products-list";
+		yield return ResolveLayoutClass();
+
+		if (!string.IsNullOrWhiteSpace(CssClass))
+		{
+			yield return CssClass;
+		}
+	}
+
+	private string ResolveLayoutClass() =>
+		string.Equals(View, "list", StringComparison.OrdinalIgnoreCase)
+			? "products-list--layout--list"
+			: "products-list--layout--grid-3";
+}

Prefab.Web.Client/Components/Shared/CardGridItem.razor

@@ -0,0 +1,11 @@
+@if (ChildContent is not null)
+{
+	<div class="products-list__item">
+		@ChildContent
+	</div>
+}
+
+@code {
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+}

Prefab.Web.Client/Components/Shared/CardVariant.cs

@@ -0,0 +1,7 @@
+namespace Prefab.Web.Client.Components.Shared;
+
+public enum CardVariant
+{
+	Product,
+	Category
+}