feat: Add card with blue border (#153)

canonical · Feb 7, 2025 · 42387f8 · 42387f8
1 parent efab9b7
commit 42387f8
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@canonical/store-components",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Canonical",

diff --git a/src/components/DefaultCard/DefaultCard.stories.mdx b/src/components/DefaultCard/DefaultCard.stories.mdx
@@ -401,3 +401,71 @@ This is a [React](https://reactjs.org/) component for a default package card.
     {Template.bind({})}
   </Story>
 </Canvas>
+
+## Custom top border colour
+
+<Canvas>
+  <Story
+    name="Custom top border colour"
+    args={{
+      data: {
+        package: {
+          charms: [
+            {
+              display_name: "Traefik Ingress",
+              name: "traefik-k8s",
+            },
+            {
+              display_name: "MicroK8s",
+              name: "microk8s",
+            },
+            {
+              display_name: "Kafka",
+              name: "kafka",
+            },
+            {
+              display_name: "PostgreSQL",
+              name: "postgresql",
+            },
+            {
+              display_name: "Prometheus",
+              name: "prometheus-k8s",
+            },
+            {
+              display_name: "Landscape Server",
+              name: "landscape-server",
+            },
+            {
+              display_name: "Grafana",
+              name: "grafana-k8s",
+            },
+            {
+              display_name: "LXD",
+              name: "lxd",
+            },
+          ],
+          description:
+            "Privacy-oriented voice, video, chat, and conference platform and SIP phone",
+          display_name: "",
+          icon_url:
+            "https://dashboard.snapcraft.io/site_media/appmedia/2020/11/jami-512.png",
+          name: "",
+          platforms: ["vm", "kubernetes"],
+        },
+        publisher: {
+          display_name: "Savoir-faire Linux",
+          name: "sfljami",
+          validation: "star",
+        },
+        ratings: {
+          value: 4,
+          count: 50,
+        },
+      },
+      highlighted: true,
+      highlightColor: "#0f95a1"
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/components/DefaultCard/DefaultCard.tsx b/src/components/DefaultCard/DefaultCard.tsx
@@ -6,9 +6,11 @@ import type { Package } from "types/package";
 
 type Props = {
   data: Package;
+  highlighted?: boolean;
+  highlightColor?: string;
 };
 
-function DefaultCard({ data }: Props) {
+function DefaultCard({ data, highlighted, highlightColor }: Props) {
   let isFeatured = false;
 
   if (data.categories && data.categories.length > 0) {
@@ -25,7 +27,8 @@ function DefaultCard({ data }: Props) {
       data={data}
       showIcon
       showVerification
-      isHighlighted={isFeatured}
+      isHighlighted={isFeatured || highlighted}
+      highlightColor={highlightColor}
     />
   );
 }

diff --git a/src/components/PackageCard/PackageCard.tsx b/src/components/PackageCard/PackageCard.tsx
@@ -21,6 +21,7 @@ type PackageCardProps = {
   showRatings?: boolean;
   showVerification?: boolean;
   showChannel?: boolean;
+  highlightColor?: string;
 };
 
 function PackageCard({
@@ -34,6 +35,7 @@ function PackageCard({
   showRatings,
   showVerification,
   showChannel,
+  highlightColor,
 }: PackageCardProps) {
   const innerCardProps = {
     isBundle: isBundle,
@@ -50,7 +52,7 @@ function PackageCard({
   };
 
   if (isHighlighted) {
-    outerCardStyle["borderTop"] = "3px solid #f2a031";
+    outerCardStyle["borderTop"] = `3px solid ${highlightColor || "#f2a031"}`;
   }
 
   if (isBundle) {