1 files changed, 29 insertions, 3 deletions
diff --git a/toolkit/content/widgets/moz-card/moz-card.stories.mjs b/toolkit/content/widgets/moz-card/moz-card.stories.mjs
index da3279b2a4..0430956a52 100644
--- a/toolkit/content/widgets/moz-card/moz-card.stories.mjs
+++ b/toolkit/content/widgets/moz-card/moz-card.stories.mjs
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 // eslint-disable-next-line import/no-unresolved
-import { html, ifDefined } from "lit.all.mjs";
+import { classMap, html, ifDefined } from "lit.all.mjs";
 // eslint-disable-next-line import/no-unassigned-import
 import "./moz-card.mjs";
 
@@ -15,6 +15,8 @@ export default {
     fluent: `
 moz-card-heading =
   .heading = This is the label
+moz-card-heading-with-icon =
+  .heading = This is a card with a heading icon
     `,
   },
   argTypes: {
@@ -22,13 +24,27 @@ moz-card-heading =
       options: ["default", "accordion"],
       control: { type: "select" },
     },
+    hasHeadingIcon: {
+      options: [true, false],
+      control: { type: "select" },
+    },
   },
 };
 
-const Template = ({ l10nId, content, type }) => html`
-  <main style="max-width: 400px">
+const Template = ({ l10nId, content, type, hasHeadingIcon }) => html`
+  <style>
+    main {
+      max-width: 400px;
+    }
+    moz-card.headingWithIcon::part(icon) {
+      background-image: url("chrome://browser/skin/preferences/category-general.svg");
+    }
+  </style>
+  <main>
     <moz-card
       type=${ifDefined(type)}
+      ?icon=${hasHeadingIcon}
+      class=${classMap({ headingWithIcon: hasHeadingIcon })}
       data-l10n-id=${ifDefined(l10nId)}
       data-l10n-attrs="heading"
     >
@@ -86,3 +102,13 @@ CardTypeAccordion.parameters = {
     },
   },
 };
+
+export const CardWithHeadingIcon = Template.bind({});
+CardWithHeadingIcon.args = {
+  l10nId: "moz-card-heading-with-icon",
+  content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Nunc velit turpis, mollis a ultricies vitae, accumsan ut augue.
+  In a eros ac dolor hendrerit varius et at mauris.`,
+  type: "default",
+  hasHeadingIcon: true,
+};