feat: make FeatureBanner subtitle optional

When subtitle is not provided, the subtitle element is not rendered
and the title and children are vertically centered. This supports
condensed banner views such as on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: appf-mike

src/components/FeatureBanner/FeatureBanner.spec.tsx

@@ -39,6 +39,25 @@ describe('<FeatureBanner />', () => {
     expect(queryByText('FeatureBannerChildElement')).not.toBeNull();
   });
 
+  describe('without subtitle', () => {
+    it('does not render subtitle', () => {
+      const { queryByText } = render(<FeatureBanner title="FeatureBannerTitle" />);
+
+      expect(queryByText('FeatureBannerTitle')).not.toBeNull();
+    });
+
+    it('renders title and children', () => {
+      const { queryByText } = render(
+        <FeatureBanner title="FeatureBannerTitle">
+          <span>FeatureBannerChildElement</span>
+        </FeatureBanner>
+      );
+
+      expect(queryByText('FeatureBannerTitle')).not.toBeNull();
+      expect(queryByText('FeatureBannerChildElement')).not.toBeNull();
+    });
+  });
+
   describe('when dismissable', () => {
     it('can be closed', async () => {
       const { getByRole, queryByRole } = render(<FeatureBanner {...commonProps} dismissable />);

src/components/FeatureBanner/FeatureBanner.stories.tsx

@@ -39,3 +39,19 @@ export const LiveExample: Story = {
     </FeatureBanner>
   ),
 };
+
+export const WithoutSubtitle: Story = {
+  args: {
+    alertText: 'New',
+    color: 'info',
+    title: 'Company-Wide View of Text Messages',
+  },
+  render: (args) => (
+    <FeatureBanner {...args}>
+      <Button color="primary" outline className="fw-bold text-uppercase">
+        <Icon name="envelope" className="me-2" />
+        Feedback
+      </Button>
+    </FeatureBanner>
+  ),
+};

src/components/FeatureBanner/FeatureBanner.tsx

@@ -6,7 +6,7 @@ interface FeatureBannerProps {
   children?: ReactNode;
   color?: string;
   dismissable?: boolean;
-  subtitle: ReactNode;
+  subtitle?: ReactNode;
   title: string;
 }
 
@@ -36,13 +36,17 @@ const FeatureBanner: FC<FeatureBannerProps> = ({
       isOpen={visible}
     >
       <h2 className={`${alertStyle} text-center m-0 px-3 d-none d-sm-block`}>{alertText}</h2>
-      <div className={`d-flex flex-row flex-wrap p-3 w-100 ${dismissable ? 'pe-5' : ''}`}>
+      <div
+        className={`d-flex flex-row flex-wrap p-3 w-100 ${!subtitle ? 'align-items-center' : ''} ${
+          dismissable ? 'pe-5' : ''
+        }`}
+      >
         <div className="flex-fill me-auto">
           <div className="d-inline-block m-0">
             <h2 className={`${alertStyle} d-inline d-sm-none me-2`}>{alertText}</h2>
             <h3 className="d-inline">{title}</h3>
           </div>
-          <p className="m-0">{subtitle}</p>
+          {subtitle && <p className="m-0">{subtitle}</p>}
         </div>
         <div className="d-inline-block my-auto">{children}</div>
       </div>