carbon-react 144.3.0 → 144.4.0

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

@@ -20,7 +20,7 @@ export interface NoteProps extends MarginProps {
         timeStamp: string;
     };
     /** Adds a Title to the Note */
-    title?: string;
+    title?: React.ReactNode;
     /** Set a percentage-based width for the whole Note component, relative to its parent. */
     width?: number;
 }

package/esm/components/note/note.component.js

@@ -3,12 +3,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Editor } from "draft-js";
 import invariant from "invariant";
-import { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent } from "./note.style";
+import { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitleWrapper, StyledFooter, StyledFooterContent } from "./note.style";
 import StatusIcon from "./__internal__/status-icon";
 import { ActionPopover } from "../action-popover";
 import { getDecoratedValue } from "../text-editor/__internal__/utils";
 import EditorContext from "../text-editor/__internal__/editor.context";
 import LinkPreview from "../link-preview";
+import Typography from "../typography";
 function hasExpectedDisplayName(child, displayName) {
   return child.type.displayName === displayName;
 }
@@ -50,7 +51,14 @@ export const Note = ({
     width: width
   }, rest, {
     "data-component": "note"
-  }), /*#__PURE__*/React.createElement(StyledNoteMain, null, /*#__PURE__*/React.createElement(StyledNoteContent, null, title && /*#__PURE__*/React.createElement(StyledTitle, null, title), /*#__PURE__*/React.createElement(Editor, {
+  }), /*#__PURE__*/React.createElement(StyledNoteMain, null, /*#__PURE__*/React.createElement(StyledNoteContent, null, title && (typeof title === "string" ? /*#__PURE__*/React.createElement(Typography, {
+    "data-role": "note-title",
+    fontWeight: "700",
+    fontSize: "16px",
+    lineHeight: "21px",
+    paddingBottom: "16px",
+    variant: "h2"
+  }, title) : /*#__PURE__*/React.createElement(StyledTitleWrapper, null, title)), /*#__PURE__*/React.createElement(Editor, {
     readOnly: true,
     editorState: getDecoratedValue(noteContent),
     onChange: /* istanbul ignore next */() => {}

package/esm/components/note/note.style.d.ts

@@ -3,7 +3,7 @@ declare const StyledNoteContent: import("styled-components").StyledComponent<"di
 }, never>;
 declare const StyledNoteMain: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledInlineControl: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledTitle: import("styled-components").StyledComponent<"header", any, {}, never>;
+declare const StyledTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledFooterContent: import("styled-components").StyledComponent<"div", any, {
     hasName: boolean;
 }, never>;
@@ -11,4 +11,4 @@ declare const StyledFooter: import("styled-components").StyledComponent<"div", a
 declare const StyledNote: import("styled-components").StyledComponent<"div", any, {
     width: number;
 }, never>;
-export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent, };
+export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitleWrapper, StyledFooter, StyledFooterContent, };

package/esm/components/note/note.style.js

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import { StyledLinkPreview } from "../link-preview/link-preview.style";
+import { VARIANT_TYPES } from "../typography/typography.component";
 const StyledNoteContent = styled.div`
   position: relative;
   width: 100%;
@@ -11,13 +12,11 @@ const StyledNoteContent = styled.div`
 }) => css`
     div.DraftEditor-root {
       min-height: inherit;
-      height: 100%;
     }
 
     div.DraftEditor-editorContainer,
     div.public-DraftEditor-content {
       min-height: inherit;
-      height: 100%;
       background-color: var(--colorsUtilityYang100);
       line-height: 21px;
     }
@@ -40,11 +39,15 @@ const StyledInlineControl = styled.div`
   display: inline-block;
   min-width: fit-content;
 `;
-const StyledTitle = styled.header`
+const StyledTitleWrapper = styled.div`
+  ${VARIANT_TYPES.map(variant => `
+${variant}{
   font-weight: 700;
   font-size: 16px;
   line-height: 21px;
   padding-bottom: 16px;
+}
+  `)}
 `;
 const StyledFooterContent = styled.div`
   line-height: 21px;
@@ -128,4 +131,4 @@ const StyledNote = styled.div`
 StyledNote.defaultProps = {
   theme: baseTheme
 };
-export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent };
+export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitleWrapper, StyledFooter, StyledFooterContent };

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

@@ -20,7 +20,7 @@ export interface NoteProps extends MarginProps {
         timeStamp: string;
     };
     /** Adds a Title to the Note */
-    title?: string;
+    title?: React.ReactNode;
     /** Set a percentage-based width for the whole Note component, relative to its parent. */
     width?: number;
 }

package/lib/components/note/note.component.js

@@ -14,6 +14,7 @@ var _actionPopover = require("../action-popover");
 var _utils = require("../text-editor/__internal__/utils");
 var _editor = _interopRequireDefault(require("../text-editor/__internal__/editor.context"));
 var _linkPreview = _interopRequireDefault(require("../link-preview"));
+var _typography = _interopRequireDefault(require("../typography"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function hasExpectedDisplayName(child, displayName) {
@@ -57,7 +58,14 @@ const Note = ({
     width: width
   }, rest, {
     "data-component": "note"
-  }), /*#__PURE__*/_react.default.createElement(_note.StyledNoteMain, null, /*#__PURE__*/_react.default.createElement(_note.StyledNoteContent, null, title && /*#__PURE__*/_react.default.createElement(_note.StyledTitle, null, title), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+  }), /*#__PURE__*/_react.default.createElement(_note.StyledNoteMain, null, /*#__PURE__*/_react.default.createElement(_note.StyledNoteContent, null, title && (typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_typography.default, {
+    "data-role": "note-title",
+    fontWeight: "700",
+    fontSize: "16px",
+    lineHeight: "21px",
+    paddingBottom: "16px",
+    variant: "h2"
+  }, title) : /*#__PURE__*/_react.default.createElement(_note.StyledTitleWrapper, null, title)), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
     readOnly: true,
     editorState: (0, _utils.getDecoratedValue)(noteContent),
     onChange: /* istanbul ignore next */() => {}

package/lib/components/note/note.style.d.ts

@@ -3,7 +3,7 @@ declare const StyledNoteContent: import("styled-components").StyledComponent<"di
 }, never>;
 declare const StyledNoteMain: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledInlineControl: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledTitle: import("styled-components").StyledComponent<"header", any, {}, never>;
+declare const StyledTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledFooterContent: import("styled-components").StyledComponent<"div", any, {
     hasName: boolean;
 }, never>;
@@ -11,4 +11,4 @@ declare const StyledFooter: import("styled-components").StyledComponent<"div", a
 declare const StyledNote: import("styled-components").StyledComponent<"div", any, {
     width: number;
 }, never>;
-export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent, };
+export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitleWrapper, StyledFooter, StyledFooterContent, };

package/lib/components/note/note.style.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTitle = exports.StyledNoteMain = exports.StyledNoteContent = exports.StyledNote = exports.StyledInlineControl = exports.StyledFooterContent = exports.StyledFooter = void 0;
+exports.StyledTitleWrapper = exports.StyledNoteMain = exports.StyledNoteContent = exports.StyledNote = exports.StyledInlineControl = exports.StyledFooterContent = exports.StyledFooter = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _linkPreview = require("../link-preview/link-preview.style");
+var _typography = require("../typography/typography.component");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -20,13 +21,11 @@ const StyledNoteContent = exports.StyledNoteContent = _styledComponents.default.
 }) => (0, _styledComponents.css)`
     div.DraftEditor-root {
       min-height: inherit;
-      height: 100%;
     }
 
     div.DraftEditor-editorContainer,
     div.public-DraftEditor-content {
       min-height: inherit;
-      height: 100%;
       background-color: var(--colorsUtilityYang100);
       line-height: 21px;
     }
@@ -49,11 +48,15 @@ const StyledInlineControl = exports.StyledInlineControl = _styledComponents.defa
   display: inline-block;
   min-width: fit-content;
 `;
-const StyledTitle = exports.StyledTitle = _styledComponents.default.header`
+const StyledTitleWrapper = exports.StyledTitleWrapper = _styledComponents.default.div`
+  ${_typography.VARIANT_TYPES.map(variant => `
+${variant}{
   font-weight: 700;
   font-size: 16px;
   line-height: 21px;
   padding-bottom: 16px;
+}
+  `)}
 `;
 const StyledFooterContent = exports.StyledFooterContent = _styledComponents.default.div`
   line-height: 21px;

package/package.json

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