@atlaskit/section-message 8.12.15 → 8.13.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/section-message
 
+## 8.13.0
+
+### Minor Changes
+
+- [`36317b7bc1752`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/36317b7bc1752) -
+  Add `headingLevel` prop to customize heading element and ensure makers can use proper and
+  accessible heading structures.
+
 ## 8.12.15
 
 ### Patch Changes

package/dist/cjs/section-message.js

@@ -51,6 +51,8 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     appearance = _ref$appearance === void 0 ? 'information' : _ref$appearance,
     actions = _ref.actions,
     title = _ref.title,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel,
     icon = _ref.icon,
     isDismissible = _ref.isDismissible,
     onDismiss = _ref.onDismiss,
@@ -91,7 +93,7 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     testId: testId && "".concat(testId, "--content"),
     xcss: sectionMessageStyles.contentContainer
   }, !!title && /*#__PURE__*/React.createElement(_heading.default, {
-    as: "h2",
+    as: headingLevel,
     size: "small"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)([sectionMessageStyles.content])

package/dist/es2019/section-message.js

@@ -40,6 +40,7 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
   appearance = 'information',
   actions,
   title,
+  headingLevel = 'h2',
   icon,
   isDismissible,
   onDismiss,
@@ -79,7 +80,7 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
     testId: testId && `${testId}--content`,
     xcss: sectionMessageStyles.contentContainer
   }, !!title && /*#__PURE__*/React.createElement(Heading, {
-    as: "h2",
+    as: headingLevel,
     size: "small"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: ax([sectionMessageStyles.content])

package/dist/esm/section-message.js

@@ -42,6 +42,8 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
     appearance = _ref$appearance === void 0 ? 'information' : _ref$appearance,
     actions = _ref.actions,
     title = _ref.title,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel,
     icon = _ref.icon,
     isDismissible = _ref.isDismissible,
     onDismiss = _ref.onDismiss,
@@ -82,7 +84,7 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
     testId: testId && "".concat(testId, "--content"),
     xcss: sectionMessageStyles.contentContainer
   }, !!title && /*#__PURE__*/React.createElement(Heading, {
-    as: "h2",
+    as: headingLevel,
     size: "small"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: ax([sectionMessageStyles.content])

package/dist/types/types.d.ts

@@ -4,7 +4,8 @@ import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
  * Appearance determines the icon and background color pairing indicating the message type
  */
 export type Appearance = 'information' | 'warning' | 'error' | 'success' | 'discovery';
-export interface SectionMessageProps {
+type HeadingElements = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface BaseSectionMessageProps {
     /**
      * The appearance styling to use for the section message.
      */
@@ -14,6 +15,11 @@ export interface SectionMessageProps {
      * we recommend that this should be a paragraph.
      */
     children: React.ReactNode;
+    /**
+     * Allows the section message's `title` to be rendered as the specified HTML
+     * heading element. The default heading element is `h2`.
+     */
+    headingLevel?: HeadingElements;
     /**
      * The heading of the section message.
      */
@@ -49,6 +55,14 @@ export interface SectionMessageProps {
      */
     testId?: string;
 }
+type ConditionalSectionMessageProps = {
+    headingLevel?: HeadingElements;
+    title: string;
+} | {
+    headingLevel?: never;
+    title?: never;
+};
+export type SectionMessageProps = BaseSectionMessageProps & ConditionalSectionMessageProps;
 export interface SectionMessageActionProps {
     /**
      * The text that needs to be displayed for section message action.
@@ -82,3 +96,4 @@ export interface SectionMessageActionProps {
      */
     testId?: string;
 }
+export {};

package/dist/types-ts4.5/types.d.ts

@@ -4,7 +4,8 @@ import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
  * Appearance determines the icon and background color pairing indicating the message type
  */
 export type Appearance = 'information' | 'warning' | 'error' | 'success' | 'discovery';
-export interface SectionMessageProps {
+type HeadingElements = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface BaseSectionMessageProps {
     /**
      * The appearance styling to use for the section message.
      */
@@ -14,6 +15,11 @@ export interface SectionMessageProps {
      * we recommend that this should be a paragraph.
      */
     children: React.ReactNode;
+    /**
+     * Allows the section message's `title` to be rendered as the specified HTML
+     * heading element. The default heading element is `h2`.
+     */
+    headingLevel?: HeadingElements;
     /**
      * The heading of the section message.
      */
@@ -49,6 +55,14 @@ export interface SectionMessageProps {
      */
     testId?: string;
 }
+type ConditionalSectionMessageProps = {
+    headingLevel?: HeadingElements;
+    title: string;
+} | {
+    headingLevel?: never;
+    title?: never;
+};
+export type SectionMessageProps = BaseSectionMessageProps & ConditionalSectionMessageProps;
 export interface SectionMessageActionProps {
     /**
      * The text that needs to be displayed for section message action.
@@ -82,3 +96,4 @@ export interface SectionMessageActionProps {
      */
     testId?: string;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "8.12.15",
+	"version": "8.13.0",
 	"description": "A section message is used to alert users to a particular section of the screen.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"