@react-magma/charts 15.0.0-rc.3 → 15.0.0-rc.4

package/dist/components/CarbonChart/CarbonChart.d.ts

@@ -56,6 +56,11 @@ export interface ChartToolbarConfig {
      * @default 2
      */
     tableHeaderLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Heading level for the chart title.
+     * @default 2
+     */
+    titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
     dataSet: Array<object>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-magma/charts",
-  "version": "15.0.0-rc.3",
+  "version": "15.0.0-rc.4",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/components/CarbonChart/CarbonChart.test.js

@@ -853,6 +853,27 @@ describe('CarbonChart', () => {
       ).not.toBeInTheDocument();
     });
 
+    it('should render the chart title as h2 by default', () => {
+      render(<CarbonChart {...toolbarProps} />);
+
+      expect(
+        screen.getByRole('heading', { level: 2, name: chartOptions.title })
+      ).toBeInTheDocument();
+    });
+
+    it('should render the chart title at the level set by titleLevel', () => {
+      render(
+        <CarbonChart {...toolbarProps} chartToolbar={{ titleLevel: 3 }} />
+      );
+
+      expect(
+        screen.getByRole('heading', { level: 3, name: chartOptions.title })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('heading', { level: 2, name: chartOptions.title })
+      ).not.toBeInTheDocument();
+    });
+
     it('should always render the more options dropdown with built-in download items', () => {
       render(<CarbonChart {...toolbarProps} />);
 

package/src/components/CarbonChart/CarbonChart.tsx

@@ -105,6 +105,11 @@ export interface ChartToolbarConfig {
    * @default 2
    */
   tableHeaderLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * Heading level for the chart title.
+   * @default 2
+   */
+  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 
 export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -1024,7 +1029,11 @@ function CarbonChartToolbar({
       isInverse={isInverse}
       theme={theme}
     >
-      <ChartTitle isInverse={isInverse} theme={theme}>
+      <ChartTitle
+        as={`h${config.titleLevel ?? 2}` as keyof JSX.IntrinsicElements}
+        isInverse={isInverse}
+        theme={theme}
+      >
         {resolvedTitle}
       </ChartTitle>
       <ToolbarActions theme={theme}>

package/src/components/CarbonChart/CarbonChartBar.stories.tsx

@@ -18,12 +18,19 @@ export default {
       control: { type: 'select' },
       options: Object.values(CarbonChartType),
     },
+    titleLevel: {
+      control: { type: 'select' },
+      options: [1, 2, 3, 4, 5, 6],
+      description: 'Heading level for the chart title (h1–h6).',
+    },
   },
 } as Meta;
 
-const Template: StoryFn<CarbonChartProps> = args => (
+const Template: StoryFn<
+  CarbonChartProps & { titleLevel?: 1 | 2 | 3 | 4 | 5 | 6 }
+> = ({ titleLevel, ...args }) => (
   <Card isInverse={args.isInverse} style={{ padding: '12px' }}>
-    <CarbonChart {...args} />
+    <CarbonChart {...args} chartToolbar={{ titleLevel }} />
   </Card>
 );