@react-magma/charts 13.1.1 → 13.2.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/charts.js +2 -1
  2. package/dist/charts.js.map +1 -1
  3. package/dist/charts.modern.module.js +2 -1
  4. package/dist/charts.modern.module.js.map +1 -1
  5. package/dist/charts.umd.js +2 -1
  6. package/dist/charts.umd.js.map +1 -1
  7. package/dist/components/CarbonChart/CarbonChart.d.ts +5 -0
  8. package/dist/components/CarbonChart/CarbonChartBar.stories.d.ts +27 -9
  9. package/package.json +1 -1
  10. package/src/components/CarbonChart/CarbonChart.test.js +21 -0
  11. package/src/components/CarbonChart/CarbonChart.tsx +10 -1
  12. package/src/components/CarbonChart/CarbonChartBar.stories.tsx +9 -2
package/dist/components/CarbonChart/CarbonChart.d.ts CHANGED
@@ -56,6 +56,11 @@ export interface ChartToolbarConfig {
56
56
  * @default 2
57
57
  */
58
58
  tableHeaderLevel?: 1 | 2 | 3 | 4 | 5 | 6;
59
+ /**
60
+ * Heading level for the chart title.
61
+ * @default 2
62
+ */
63
+ titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
59
64
  }
60
65
  export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
61
66
  dataSet: Array<Object>;
package/dist/components/CarbonChart/CarbonChartBar.stories.d.ts CHANGED
@@ -2,7 +2,9 @@ import { CarbonChartProps, CarbonChartType } from '.';
2
2
  declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
3
3
  export default _default;
4
4
  export declare const VerticalSimpleBarDiscrete: {
5
- render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
5
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
6
+ titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
7
+ }>;
6
8
  args: {
7
9
  isInverse: boolean;
8
10
  type: CarbonChartType;
@@ -30,7 +32,9 @@ export declare const VerticalSimpleBarDiscrete: {
30
32
  };
31
33
  };
32
34
  export declare const VerticalSimpleBarTimeSeries: {
33
- render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
35
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
36
+ titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
37
+ }>;
34
38
  args: {
35
39
  isInverse: boolean;
36
40
  type: CarbonChartType;
@@ -55,7 +59,9 @@ export declare const VerticalSimpleBarTimeSeries: {
55
59
  };
56
60
  };
57
61
  export declare const VerticalSimpleBarTimeSeriesDenseDataTurkish: {
58
- render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
62
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
63
+ titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
64
+ }>;
59
65
  args: {
60
66
  isInverse: boolean;
61
67
  type: CarbonChartType;
@@ -86,7 +92,9 @@ export declare const VerticalSimpleBarTimeSeriesDenseDataTurkish: {
86
92
  };
87
93
  };
88
94
  export declare const VerticalSimpleBarEmptyState: {
89
- render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
95
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
96
+ titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
97
+ }>;
90
98
  args: {
91
99
  isInverse: boolean;
92
100
  type: CarbonChartType;
@@ -104,7 +112,9 @@ export declare const VerticalSimpleBarEmptyState: {
104
112
  };
105
113
  };
106
114
  export declare const VerticalSimpleBarSkeleton: {
107
- render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
115
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
116
+ titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
117
+ }>;
108
118
  args: {
109
119
  isInverse: boolean;
110
120
  type: CarbonChartType;
@@ -125,7 +135,9 @@ export declare const VerticalSimpleBarSkeleton: {
125
135
  };
126
136
  };
127
137
  export declare const HorizontalSimpleBarTimeSeries: {
128
- render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
138
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
139
+ titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
140
+ }>;
129
141
  args: {
130
142
  isInverse: boolean;
131
143
  type: CarbonChartType;
@@ -150,7 +162,9 @@ export declare const HorizontalSimpleBarTimeSeries: {
150
162
  };
151
163
  };
152
164
  export declare const HorizontalSimpleBarDiscrete: {
153
- render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
165
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
166
+ titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
167
+ }>;
154
168
  args: {
155
169
  isInverse: boolean;
156
170
  type: CarbonChartType;
@@ -174,7 +188,9 @@ export declare const HorizontalSimpleBarDiscrete: {
174
188
  };
175
189
  };
176
190
  export declare const HorizontalSimpleBarSkeleton: {
177
- render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
191
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
192
+ titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
193
+ }>;
178
194
  args: {
179
195
  isInverse: boolean;
180
196
  type: CarbonChartType;
@@ -195,7 +211,9 @@ export declare const HorizontalSimpleBarSkeleton: {
195
211
  };
196
212
  };
197
213
  export declare const HorizontalSimpleBarEmptyState: {
198
- render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
214
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
215
+ titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
216
+ }>;
199
217
  args: {
200
218
  isInverse: boolean;
201
219
  type: CarbonChartType;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-magma/charts",
3
- "version": "13.1.1",
3
+ "version": "13.2.0-next.0",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "type": "git",
package/src/components/CarbonChart/CarbonChart.test.js CHANGED
@@ -869,6 +869,27 @@ describe('CarbonChart', () => {
869
869
  ).not.toBeInTheDocument();
870
870
  });
871
871
 
872
+ it('should render the chart title as h2 by default', () => {
873
+ render(<CarbonChart {...toolbarProps} />);
874
+
875
+ expect(
876
+ screen.getByRole('heading', { level: 2, name: chartOptions.title })
877
+ ).toBeInTheDocument();
878
+ });
879
+
880
+ it('should render the chart title at the level set by titleLevel', () => {
881
+ render(
882
+ <CarbonChart {...toolbarProps} chartToolbar={{ titleLevel: 3 }} />
883
+ );
884
+
885
+ expect(
886
+ screen.getByRole('heading', { level: 3, name: chartOptions.title })
887
+ ).toBeInTheDocument();
888
+ expect(
889
+ screen.queryByRole('heading', { level: 2, name: chartOptions.title })
890
+ ).not.toBeInTheDocument();
891
+ });
892
+
872
893
  it('should always render the more options dropdown with built-in download items', () => {
873
894
  render(<CarbonChart {...toolbarProps} />);
874
895
 
package/src/components/CarbonChart/CarbonChart.tsx CHANGED
@@ -103,6 +103,11 @@ export interface ChartToolbarConfig {
103
103
  * @default 2
104
104
  */
105
105
  tableHeaderLevel?: 1 | 2 | 3 | 4 | 5 | 6;
106
+ /**
107
+ * Heading level for the chart title.
108
+ * @default 2
109
+ */
110
+ titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
106
111
  }
107
112
 
108
113
  export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -1043,7 +1048,11 @@ function CarbonChartToolbar({
1043
1048
  isInverse={isInverse}
1044
1049
  theme={theme}
1045
1050
  >
1046
- <ChartTitle isInverse={isInverse} theme={theme}>
1051
+ <ChartTitle
1052
+ as={`h${config.titleLevel ?? 2}` as keyof JSX.IntrinsicElements}
1053
+ isInverse={isInverse}
1054
+ theme={theme}
1055
+ >
1047
1056
  {resolvedTitle}
1048
1057
  </ChartTitle>
1049
1058
  <ToolbarActions theme={theme}>
package/src/components/CarbonChart/CarbonChartBar.stories.tsx CHANGED
@@ -20,12 +20,19 @@ export default {
20
20
  options: CarbonChartType,
21
21
  },
22
22
  },
23
+ titleLevel: {
24
+ control: { type: 'select' },
25
+ options: [1, 2, 3, 4, 5, 6],
26
+ description: 'Heading level for the chart title (h1–h6).',
27
+ },
23
28
  },
24
29
  } as Meta;
25
30
 
26
- const Template: StoryFn<CarbonChartProps> = args => (
31
+ const Template: StoryFn<
32
+ CarbonChartProps & { titleLevel?: 1 | 2 | 3 | 4 | 5 | 6 }
33
+ > = ({ titleLevel, ...args }) => (
27
34
  <Card isInverse={args.isInverse} style={{ padding: '12px' }}>
28
- <CarbonChart {...args} chartToolbar={{}} />
35
+ <CarbonChart {...args} chartToolbar={{ titleLevel }} />
29
36
  </Card>
30
37
  );
31
38