carbon-react 119.11.0 → 119.12.1

package/README.md

@@ -1,4 +1,4 @@
-# Carbon [![npm](https://img.shields.io/npm/v/carbon-react.svg)](https://www.npmjs.com/package/carbon-react) [![Cypress](https://github.com/Sage/carbon/actions/workflows/cypress.yml/badge.svg)](https://github.com/Sage/carbon/actions/workflows/cypress.yml)
+# Carbon [![npm](https://img.shields.io/npm/v/carbon-react.svg)](https://www.npmjs.com/package/carbon-react) [![Cypress](https://github.com/Sage/carbon/actions/workflows/cypress.yml/badge.svg)](https://github.com/Sage/carbon/actions/workflows/cypress.yml) [![Playwright](https://github.com/Sage/carbon/actions/workflows/playwright.yml/badge.svg)](https://github.com/Sage/carbon/actions/workflows/playwright.yml)
 
 Carbon is a [React](https://facebook.github.io/react/) component library developed by Sage.
 

package/esm/components/menu/menu-item/menu-item.style.js

@@ -37,8 +37,9 @@ const StyledMenuItemWrapper = styled.a.attrs({
   asDiv,
   hasInput
 }) => css`
-    ${padding}
-
+    ${!inFullscreenView && css`
+        ${padding}
+      `}
     display: inline-block;
     font-size: 14px;
     font-weight: 700;

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

@@ -1,10 +1,10 @@
-import { FlexboxProps, LayoutProps } from "styled-system";
+import { FlexboxProps, LayoutProps, PaddingProps } from "styled-system";
 import { MenuProps } from "./menu.component";
 interface StyledMenuProps extends Pick<MenuProps, "menuType">, FlexboxProps, LayoutProps {
     inFullscreenView?: boolean;
 }
 declare const StyledMenuWrapper: import("styled-components").StyledComponent<"ul", any, StyledMenuProps, never>;
-interface StyledMenuItemProps extends Pick<MenuProps, "menuType" | "maxWidth"> {
+interface StyledMenuItemProps extends Pick<MenuProps, "menuType" | "maxWidth">, PaddingProps {
     inFullscreenView?: boolean;
     inSubmenu?: boolean;
 }

package/esm/components/menu/menu.style.js

@@ -1,8 +1,9 @@
 import styled, { css } from "styled-components";
-import { layout, flexbox } from "styled-system";
+import { layout, flexbox, padding } from "styled-system";
 import menuConfigVariants from "./menu.config";
 import { StyledVerticalWrapper, StyledDivider } from "../vertical-divider/vertical-divider.style";
 import { StyledLink } from "../link/link.style";
+import { baseTheme } from "../../style/themes";
 const StyledMenuWrapper = styled.ul`
   line-height: 40px;
   list-style: none;
@@ -54,8 +55,9 @@ const StyledMenuItem = styled.li`
   ${({
   inFullscreenView
 }) => inFullscreenView && css`
-      padding-top: 16px;
-      padding-bottom: 16px;
+      padding-top: var(--spacing200);
+      padding-bottom: var(--spacing200);
+      ${padding}
 
       > a,
       ${StyledLink} > a,
@@ -69,4 +71,7 @@ const StyledMenuItem = styled.li`
       }
     `}
 `;
+StyledMenuItem.defaultProps = {
+  theme: baseTheme
+};
 export { StyledMenuWrapper, StyledMenuItem };

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

@@ -18,10 +18,10 @@ export interface PodProps extends MarginProps {
     size?: PodSize;
     /** Prop to apply a theme to the Pod */
     variant?: PodVariant;
-    /** Title for the pod h4 element always shown */
-    title?: string | React.ReactNode;
+    /** Title for the pod */
+    title?: React.ReactNode;
     /** Optional subtitle for the pod */
-    subtitle?: string;
+    subtitle?: React.ReactNode;
     /** A component to render as a Pod footer */
     footer?: string | React.ReactNode;
     /** Supplies an edit action to the pod */

package/esm/components/pod/pod.component.js

@@ -93,11 +93,11 @@ const Pod = /*#__PURE__*/React.forwardRef(({
     alignTitle: alignTitle,
     internalEditButton: internalEditButton,
     size: size
-  }, /*#__PURE__*/React.createElement(StyledTitle, {
+  }, typeof title === "string" ? /*#__PURE__*/React.createElement(StyledTitle, {
     "data-element": "title"
-  }, title), subtitle && /*#__PURE__*/React.createElement(StyledSubtitle, {
+  }, title) : title, typeof subtitle === "string" ? /*#__PURE__*/React.createElement(StyledSubtitle, {
     "data-element": "subtitle"
-  }, subtitle)), children), footer && /*#__PURE__*/React.createElement(StyledFooter, {
+  }, subtitle) : subtitle), children), footer && /*#__PURE__*/React.createElement(StyledFooter, {
     "data-element": "footer",
     size: size,
     variant: variant,
@@ -324,7 +324,7 @@ Pod.propTypes = {
   "onUndo": PropTypes.func,
   "size": PropTypes.oneOf(["extra-large", "extra-small", "large", "medium", "small"]),
   "softDelete": PropTypes.bool,
-  "subtitle": PropTypes.string,
+  "subtitle": PropTypes.node,
   "title": PropTypes.node,
   "triggerEditOnContent": PropTypes.bool,
   "variant": PropTypes.oneOf(["primary", "secondary", "tertiary", "tile", "transparent"])

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ColorProps, SpaceProps } from "styled-system";
 declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
-declare type VariantTypes = typeof VARIANT_TYPES[number];
+export declare type VariantTypes = typeof VARIANT_TYPES[number];
 export interface TypographyProps extends SpaceProps, ColorProps {
     /** Override the variant component */
     as?: React.ElementType;

package/lib/components/menu/menu-item/menu-item.style.js

@@ -46,8 +46,9 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
   asDiv,
   hasInput
 }) => (0, _styledComponents.css)`
-    ${_styledSystem.padding}
-
+    ${!inFullscreenView && (0, _styledComponents.css)`
+        ${_styledSystem.padding}
+      `}
     display: inline-block;
     font-size: 14px;
     font-weight: 700;

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

@@ -1,10 +1,10 @@
-import { FlexboxProps, LayoutProps } from "styled-system";
+import { FlexboxProps, LayoutProps, PaddingProps } from "styled-system";
 import { MenuProps } from "./menu.component";
 interface StyledMenuProps extends Pick<MenuProps, "menuType">, FlexboxProps, LayoutProps {
     inFullscreenView?: boolean;
 }
 declare const StyledMenuWrapper: import("styled-components").StyledComponent<"ul", any, StyledMenuProps, never>;
-interface StyledMenuItemProps extends Pick<MenuProps, "menuType" | "maxWidth"> {
+interface StyledMenuItemProps extends Pick<MenuProps, "menuType" | "maxWidth">, PaddingProps {
     inFullscreenView?: boolean;
     inSubmenu?: boolean;
 }

package/lib/components/menu/menu.style.js

@@ -9,6 +9,7 @@ var _styledSystem = require("styled-system");
 var _menu = _interopRequireDefault(require("./menu.config"));
 var _verticalDivider = require("../vertical-divider/vertical-divider.style");
 var _link = require("../link/link.style");
+var _themes = require("../../style/themes");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -64,8 +65,9 @@ const StyledMenuItem = _styledComponents.default.li`
   ${({
   inFullscreenView
 }) => inFullscreenView && (0, _styledComponents.css)`
-      padding-top: 16px;
-      padding-bottom: 16px;
+      padding-top: var(--spacing200);
+      padding-bottom: var(--spacing200);
+      ${_styledSystem.padding}
 
       > a,
       ${_link.StyledLink} > a,
@@ -79,4 +81,7 @@ const StyledMenuItem = _styledComponents.default.li`
       }
     `}
 `;
-exports.StyledMenuItem = StyledMenuItem;
+exports.StyledMenuItem = StyledMenuItem;
+StyledMenuItem.defaultProps = {
+  theme: _themes.baseTheme
+};

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

@@ -18,10 +18,10 @@ export interface PodProps extends MarginProps {
     size?: PodSize;
     /** Prop to apply a theme to the Pod */
     variant?: PodVariant;
-    /** Title for the pod h4 element always shown */
-    title?: string | React.ReactNode;
+    /** Title for the pod */
+    title?: React.ReactNode;
     /** Optional subtitle for the pod */
-    subtitle?: string;
+    subtitle?: React.ReactNode;
     /** A component to render as a Pod footer */
     footer?: string | React.ReactNode;
     /** Supplies an edit action to the pod */

package/lib/components/pod/pod.component.js

@@ -102,11 +102,11 @@ const Pod = /*#__PURE__*/_react.default.forwardRef(({
     alignTitle: alignTitle,
     internalEditButton: internalEditButton,
     size: size
-  }, /*#__PURE__*/_react.default.createElement(_pod.StyledTitle, {
+  }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_pod.StyledTitle, {
     "data-element": "title"
-  }, title), subtitle && /*#__PURE__*/_react.default.createElement(_pod.StyledSubtitle, {
+  }, title) : title, typeof subtitle === "string" ? /*#__PURE__*/_react.default.createElement(_pod.StyledSubtitle, {
     "data-element": "subtitle"
-  }, subtitle)), children), footer && /*#__PURE__*/_react.default.createElement(_pod.StyledFooter, {
+  }, subtitle) : subtitle), children), footer && /*#__PURE__*/_react.default.createElement(_pod.StyledFooter, {
     "data-element": "footer",
     size: size,
     variant: variant,
@@ -333,7 +333,7 @@ Pod.propTypes = {
   "onUndo": _propTypes.default.func,
   "size": _propTypes.default.oneOf(["extra-large", "extra-small", "large", "medium", "small"]),
   "softDelete": _propTypes.default.bool,
-  "subtitle": _propTypes.default.string,
+  "subtitle": _propTypes.default.node,
   "title": _propTypes.default.node,
   "triggerEditOnContent": _propTypes.default.bool,
   "variant": _propTypes.default.oneOf(["primary", "secondary", "tertiary", "tile", "transparent"])

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ColorProps, SpaceProps } from "styled-system";
 declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
-declare type VariantTypes = typeof VARIANT_TYPES[number];
+export declare type VariantTypes = typeof VARIANT_TYPES[number];
 export interface TypographyProps extends SpaceProps, ColorProps {
     /** Override the variant component */
     as?: React.ElementType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "119.11.0",
+  "version": "119.12.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -93,8 +93,8 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/crypto-js": "^4.1.1",
-    "@types/enzyme": "3.10.8",
     "@types/draft-js": "^0.11.10",
+    "@types/enzyme": "3.10.8",
     "@types/invariant": "^2.2.35",
     "@types/jest": "^27.5.0",
     "@types/lodash": "^4.14.194",
@@ -124,8 +124,10 @@
     "cypress": "^12.12.0",
     "cypress-axe": "^1.4.0",
     "cypress-each": "^1.13.3",
+    "cypress-mochawesome-reporter": "^3.5.1",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.7.6",
+    "cypress-split": "^1.3.13",
     "cz-conventional-changelog": "^3.3.0",
     "date-fns-tz": "^1.3.8",
     "draft-js": "^0.11.7",