Add a title slot to the Card component

packages/nimble-components/src/card/styles.ts

@@ -6,7 +6,8 @@ import {
     borderColor,
     borderWidth,
     sectionBackgroundColor,
-    standardPadding
+    standardPadding,
+    titleFont
 } from '../theme-provider/design-tokens';
 
 export const styles = css`
@@ -21,4 +22,12 @@ export const styles = css`
         color: ${bodyFontColor};
         background-color: ${sectionBackgroundColor};
     }
+
+    ::slotted([slot='title']) {
+        font: ${titleFont};
+    }
+
+    section {
+        display: contents;
+    }
 `;

packages/nimble-components/src/card/template.ts

@@ -1,4 +1,9 @@
 import { html } from '@microsoft/fast-element';
 import type { Card } from '.';
 
-export const template = html<Card>`<slot></slot>`;
+export const template = html<Card>`
+    <section aria-labelledby="titleSlot">
+        <slot name="title" id="titleSlot"></slot>
+        <slot></slot>
+    </section>
+`;

packages/nimble-components/src/card/tests/card-matrix.stories.ts

@@ -25,6 +25,7 @@ export default metadata;
 
 const component = (): ViewTemplate => html`
     <${cardTag}>
+        <span slot="title">Title</span>
         <${numberFieldTag}>Numeric field 1</${numberFieldTag}>
         <${numberFieldTag}>Numeric field 2</${numberFieldTag}>
         <${selectTag}>

packages/nimble-components/src/card/tests/card.stories.ts

@@ -9,10 +9,14 @@ import { numberFieldTag } from '../../number-field';
 import { selectTag } from '../../select';
 import { cardTag } from '..';
 
+interface CardArgs {
+    title: string;
+}
+
 const overviewText = `The \`nimble-card\` is a container that is designed to contain arbitrary content that is specified by a client
 application. The \`nimble-card\` is intended for grouping related content.`;
 
-const metadata: Meta = {
+const metadata: Meta<CardArgs> = {
     title: 'Incubating/Card',
     tags: ['autodocs'],
     parameters: {
@@ -29,6 +33,7 @@ const metadata: Meta = {
         statusLink: 'https://github.com/ni/nimble/issues/296'
     })}
         <${cardTag}>
+            <span slot="title">${x => x.title}</span>
             <${numberFieldTag}>Numeric field 1</${numberFieldTag}>
             <${numberFieldTag}>Numeric field 2</${numberFieldTag}>
             <${selectTag}>
@@ -37,9 +42,18 @@ const metadata: Meta = {
                 <${listOptionTag} value="3">Option 3</${listOptionTag}>
             </${selectTag}>
         </${cardTag}>
-    `)
+    `),
+    argTypes: {
+        title: {
+            description:
+                'Text displayed as a title inside the card. Cards should **always include a title**. The title is used to provide an accessible name to assistive technologies.<br><br>Provide the title in an `inline` element such as `<span>` that is targeted to the `title` slot.'
+        }
+    },
+    args: {
+        title: 'Title text'
+    }
 };
 
 export default metadata;
 
-export const card: StoryObj = {};
+export const card: StoryObj<CardArgs> = {};