carbon-react 114.15.0 → 114.16.0

package/esm/components/heading/heading.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export declare type HeadingType = "h1" | "h2" | "h3" | "h4" | "h5";
 export interface HeadingProps extends MarginProps, TagProps {
     /** Child elements */
     children?: React.ReactNode;
@@ -12,6 +13,8 @@ export interface HeadingProps extends MarginProps, TagProps {
     subheader?: React.ReactNode;
     /** Defines the subtitle id for the heading. */
     subtitleId?: string;
+    /** Defines the HTML heading element of the title. */
+    headingType?: HeadingType;
     /** Defines the help text for the heading. */
     help?: string;
     /** Defines the help link for the heading. */
@@ -27,5 +30,5 @@ export interface HeadingProps extends MarginProps, TagProps {
     /** Aria label for rendered help component */
     helpAriaLabel?: string;
 }
-export declare const Heading: ({ children, backLink, divider, help, helpAriaLabel, helpLink, pills, separator, subheader, subtitleId, title, titleId, ...rest }: HeadingProps) => JSX.Element | null;
+export declare const Heading: ({ children, backLink, divider, help, helpAriaLabel, helpLink, pills, separator, subheader, subtitleId, headingType, title, titleId, ...rest }: HeadingProps) => JSX.Element | null;
 export default Heading;

package/esm/components/heading/heading.component.js

@@ -18,6 +18,7 @@ const Heading = ({
   separator = false,
   subheader,
   subtitleId,
+  headingType = "h1",
   title,
   titleId,
   ...rest
@@ -76,7 +77,7 @@ const Heading = ({
     hasBackLink: !!backLink
   }, backLink && getBackButton(), /*#__PURE__*/React.createElement(StyledHeaderContent, null, /*#__PURE__*/React.createElement(StyledHeadingTitle, {
     withMargin: !!pills || !!help,
-    variant: "h1",
+    variant: headingType,
     "data-element": "title",
     id: titleId
   }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/React.createElement(StyledSeparator, null), subheader && getSubheader()), divider && /*#__PURE__*/React.createElement(StyledDivider, {
@@ -91,6 +92,7 @@ Heading.propTypes = {
   "data-element": PropTypes.string,
   "data-role": PropTypes.string,
   "divider": PropTypes.bool,
+  "headingType": PropTypes.oneOf(["h1", "h2", "h3", "h4", "h5"]),
   "help": PropTypes.string,
   "helpAriaLabel": PropTypes.string,
   "helpLink": PropTypes.string,

package/esm/components/heading/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./heading.component";
-export type { HeadingProps } from "./heading.component";
+export type { HeadingProps, HeadingType } from "./heading.component";

package/esm/components/settings-row/settings-row.component.js

@@ -11,6 +11,7 @@ const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.spac
 
 const SettingsRow = ({
   title,
+  headingType = "h3",
   description,
   children,
   className,
@@ -20,6 +21,7 @@ const SettingsRow = ({
   const heading = () => {
     if (!title) return null;
     return /*#__PURE__*/React.createElement(Heading, {
+      headingType: headingType,
       title: title,
       subheader: description,
       separator: description !== undefined,
@@ -46,6 +48,9 @@ SettingsRow.propTypes = { ...marginPropTypes,
   /**  A title for this group of settings. */
   title: PropTypes.string,
 
+  /** Defines the HTML heading element of the `title` within the component. */
+  headingType: PropTypes.oneOf(["h1", "h2", "h3", "h4", "h5"]),
+
   /**  A string or JSX object that provides a short description about the group of settings. */
   description: PropTypes.node,
 

package/esm/components/settings-row/settings-row.d.ts

@@ -1,10 +1,13 @@
 import * as React from "react";
+import { HeadingType } from "../heading";
 
 export interface SettingsRowProps {
   /**  The CSS classes to apply to the component. */
   className?: string;
   /**  A title for this group of settings. */
   title?: string;
+  /** Defines the HTML heading element of the `title` within the component. */
+  headingType?: HeadingType;
   /**  A string or JSX object that provides a short description about the group of settings. */
   description?: React.ReactNode;
   /** Shows a divider below the component. */

package/esm/components/settings-row/settings-row.style.js

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
-import { StyledHeader, StyledHeadingTitle, StyledSeparator } from "../heading/heading.style";
+import { StyledHeader, StyledSeparator } from "../heading/heading.style";
 export const StyledSettingsRow = styled.div`
   ${margin}
 
@@ -24,15 +24,6 @@ export const StyledSettingsRow = styled.div`
     margin-bottom: 0;
   }
 
-  ${StyledHeadingTitle} {
-    color: var(--colorsUtilityYin090);
-    font-size: 15px;
-    font-weight: bold;
-    line-height: 18px;
-    margin-bottom: 10px;
-    text-transform: uppercase;
-  }
-
   ${StyledSeparator} {
     margin-bottom: 17px;
   }

package/lib/components/heading/heading.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export declare type HeadingType = "h1" | "h2" | "h3" | "h4" | "h5";
 export interface HeadingProps extends MarginProps, TagProps {
     /** Child elements */
     children?: React.ReactNode;
@@ -12,6 +13,8 @@ export interface HeadingProps extends MarginProps, TagProps {
     subheader?: React.ReactNode;
     /** Defines the subtitle id for the heading. */
     subtitleId?: string;
+    /** Defines the HTML heading element of the title. */
+    headingType?: HeadingType;
     /** Defines the help text for the heading. */
     help?: string;
     /** Defines the help link for the heading. */
@@ -27,5 +30,5 @@ export interface HeadingProps extends MarginProps, TagProps {
     /** Aria label for rendered help component */
     helpAriaLabel?: string;
 }
-export declare const Heading: ({ children, backLink, divider, help, helpAriaLabel, helpLink, pills, separator, subheader, subtitleId, title, titleId, ...rest }: HeadingProps) => JSX.Element | null;
+export declare const Heading: ({ children, backLink, divider, help, helpAriaLabel, helpLink, pills, separator, subheader, subtitleId, headingType, title, titleId, ...rest }: HeadingProps) => JSX.Element | null;
 export default Heading;

package/lib/components/heading/heading.component.js

@@ -32,6 +32,7 @@ const Heading = ({
   separator = false,
   subheader,
   subtitleId,
+  headingType = "h1",
   title,
   titleId,
   ...rest
@@ -90,7 +91,7 @@ const Heading = ({
     hasBackLink: !!backLink
   }, backLink && getBackButton(), /*#__PURE__*/_react.default.createElement(_heading.StyledHeaderContent, null, /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingTitle, {
     withMargin: !!pills || !!help,
-    variant: "h1",
+    variant: headingType,
     "data-element": "title",
     id: titleId
   }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/_react.default.createElement(_heading.StyledSeparator, null), subheader && getSubheader()), divider && /*#__PURE__*/_react.default.createElement(_heading.StyledDivider, {
@@ -106,6 +107,7 @@ Heading.propTypes = {
   "data-element": _propTypes.default.string,
   "data-role": _propTypes.default.string,
   "divider": _propTypes.default.bool,
+  "headingType": _propTypes.default.oneOf(["h1", "h2", "h3", "h4", "h5"]),
   "help": _propTypes.default.string,
   "helpAriaLabel": _propTypes.default.string,
   "helpLink": _propTypes.default.string,

package/lib/components/heading/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./heading.component";
-export type { HeadingProps } from "./heading.component";
+export type { HeadingProps, HeadingType } from "./heading.component";

package/lib/components/settings-row/settings-row.component.js

@@ -27,6 +27,7 @@ const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.de
 
 const SettingsRow = ({
   title,
+  headingType = "h3",
   description,
   children,
   className,
@@ -36,6 +37,7 @@ const SettingsRow = ({
   const heading = () => {
     if (!title) return null;
     return /*#__PURE__*/_react.default.createElement(_heading.default, {
+      headingType: headingType,
       title: title,
       subheader: description,
       separator: description !== undefined,
@@ -62,6 +64,9 @@ SettingsRow.propTypes = { ...marginPropTypes,
   /**  A title for this group of settings. */
   title: _propTypes.default.string,
 
+  /** Defines the HTML heading element of the `title` within the component. */
+  headingType: _propTypes.default.oneOf(["h1", "h2", "h3", "h4", "h5"]),
+
   /**  A string or JSX object that provides a short description about the group of settings. */
   description: _propTypes.default.node,
 

package/lib/components/settings-row/settings-row.d.ts

@@ -1,10 +1,13 @@
 import * as React from "react";
+import { HeadingType } from "../heading";
 
 export interface SettingsRowProps {
   /**  The CSS classes to apply to the component. */
   className?: string;
   /**  A title for this group of settings. */
   title?: string;
+  /** Defines the HTML heading element of the `title` within the component. */
+  headingType?: HeadingType;
   /**  A string or JSX object that provides a short description about the group of settings. */
   description?: React.ReactNode;
   /** Shows a divider below the component. */

package/lib/components/settings-row/settings-row.style.js

@@ -41,15 +41,6 @@ const StyledSettingsRow = _styledComponents.default.div`
     margin-bottom: 0;
   }
 
-  ${_heading.StyledHeadingTitle} {
-    color: var(--colorsUtilityYin090);
-    font-size: 15px;
-    font-weight: bold;
-    line-height: 18px;
-    margin-bottom: 10px;
-    text-transform: uppercase;
-  }
-
   ${_heading.StyledSeparator} {
     margin-bottom: 17px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.15.0",
+  "version": "114.16.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",