carbon-react 102.19.1 → 102.22.0

package/README.md

@@ -51,4 +51,4 @@ Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testi
 
 Carbon is licensed under the [Apache-2.0 licence](LICENSE).
 
-Copyright (c) 2018-2021 Sage Group Plc. All rights reserved.
+Copyright (c) 2018-2022 Sage Group Plc. All rights reserved.

package/lib/components/action-popover/action-popover.style.d.ts

@@ -1,31 +1,13 @@
 export const Menu: import("styled-components").StyledComponent<"div", any, {}, never>;
 export function MenuItemFactory(button: any): import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
 export const MenuButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const ButtonIcon: React.ForwardRefExoticComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-}>;
+export const ButtonIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
 export const StyledButtonIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const MenuItemIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-}>, any, {}, never>;
+export const MenuItemIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
 export const MenuItemDivider: import("styled-components").StyledComponent<"div", any, {
     "data-element": string;
 }, "data-element">;
-export const SubMenuItemIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-}>, any, {}, never>;
+export const SubMenuItemIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
 export const MenuButtonOverrideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
-import React from "react";
+import Icon from "../icon";

package/lib/components/action-popover/action-popover.style.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledMenuItem = exports.MenuButtonOverrideWrapper = exports.SubMenuItemIcon = exports.MenuItemDivider = exports.MenuItemIcon = exports.StyledButtonIcon = exports.ButtonIcon = exports.MenuButton = exports.MenuItemFactory = exports.Menu = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
@@ -19,30 +17,24 @@ var _button = _interopRequireDefault(require("../button/button.style"));
 
 var _browserTypeCheck = require("../../__internal__/utils/helpers/browser-type-check");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const Menu = _styledComponents.default.div`
   ${({
   isOpen
 }) => isOpen ? "display: block;" : "visibility: hidden;"}
   margin: 0;
-  padding: ${({
-  theme
-}) => `${theme.spacing}px 0`};
-  box-shadow: ${({
-  theme
-}) => theme.shadows.depth1};
+  padding: var(--spacing100) 0;
+  box-shadow: var(--boxShadow100);
   position: absolute;
-  background-color: ${({
-  theme
-}) => theme.colors.white};
+  background-color: var(--colorsUtilityYang100);
   z-index: ${({
   theme
-}) => `${theme.zIndex.popover}`};
+}) => `${theme.zIndex.popover}`}; // TODO (tokens): implement elevation tokens - FE-4437
 `;
 exports.Menu = Menu;
 const StyledMenuItem = _styledComponents.default.div`
@@ -55,9 +47,7 @@ const MenuItemFactory = button => (0, _styledComponents.default)(button)`
   disabled
 }) => disabled ? "not-allowed" : "pointer"};
   box-sizing: border-box;
-  ${({
-  theme
-}) => `padding: 0 ${theme.spacing * 3}px;`}
+  padding: 0 var(--spacing150);
   position: relative;
   line-height: 40px;
   white-space: nowrap;
@@ -67,9 +57,8 @@ const MenuItemFactory = button => (0, _styledComponents.default)(button)`
   border: none;
   width: 100%;
   color: ${({
-  disabled,
-  theme
-}) => disabled ? theme.menu.itemColorDisabled : theme.menu.itemColor};
+  disabled
+}) => disabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin090)"};
   font-size: 14px;
   font-weight: 700;
   justify-content: ${({
@@ -80,16 +69,12 @@ const MenuItemFactory = button => (0, _styledComponents.default)(button)`
     ${({
   disabled
 }) => !disabled && (0, _styledComponents.css)`
-        background-color: ${({
-  theme
-}) => theme.menu.focus};
+        background-color: var(--colorsUtilityMajor025);
       `}
   }
   &:focus {
-    outline: none;
-    box-shadow: inset 0px 0px 0px 2px ${({
-  theme
-}) => theme.colors.focus};
+    outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+    z-index: 1;
   }
   ${({
   disabled
@@ -103,7 +88,7 @@ const MenuItemFactory = button => (0, _styledComponents.default)(button)`
 }) => disabled && (0, _styledComponents.css)`
       && ${_icon2.default} {
         cursor: not-allowed;
-        color: inherit;
+        color: var(--colorsUtilityYin030);
       }
     `}
 `;
@@ -112,11 +97,9 @@ exports.MenuItemFactory = MenuItemFactory;
 const MenuItemDivider = _styledComponents.default.div.attrs({
   "data-element": "action-popover-divider"
 })`
-  background-color: ${({
-  theme
-}) => theme.menu.divider};
-  height: 1px;
-  margin: 9px;
+  background-color: var(--colorsUtilityMajor050);
+  height: var(--borderWidth100);
+  margin: var(--spacing100) var(--spacing150);
 `;
 exports.MenuItemDivider = MenuItemDivider;
 const MenuButton = _styledComponents.default.div`
@@ -127,100 +110,59 @@ const MenuButton = _styledComponents.default.div`
   width: fit-content;
   margin: auto;
   ${_styledSystem.margin}
-  ${({
-  isOpen,
-  theme
-}) => isOpen && `background-color: ${theme.colors.white}`}
 `;
-/**
- * Creates a factory that returns a styled component with a custom
- * theme provider wrapped around it
- * @param {*} themeFn
- */
-
 exports.MenuButton = MenuButton;
+const ButtonIcon = (0, _styledComponents.default)(_icon.default)`
+  color: var(--colorsActionMinor500);
 
-const iconThemeProviderFactory = (Component, themeFn) => (0, _styledComponents.withTheme)(({
-  theme,
-  ...props
-}) => {
-  const color = themeFn(theme.palette);
-  const customTheme = { ...theme,
-    icon: {
-      default: color,
-      defaultHover: color
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: customTheme
-  }, /*#__PURE__*/_react.default.createElement(Component, props));
-});
-
-const ButtonIcon = iconThemeProviderFactory(_icon.default, palette => palette.slate);
+  :hover {
+    color: var(--colorsActionMinor600);
+  }
+`;
 exports.ButtonIcon = ButtonIcon;
 const StyledButtonIcon = _styledComponents.default.div`
-  &:hover,
-  &:focus {
-    background-color: ${({
-  theme
-}) => theme.colors.white};
-  }
-
   &:focus {
-    outline: 2px solid ${({
-  theme
-}) => theme.colors.focus};
+    outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
   }
 `;
 exports.StyledButtonIcon = StyledButtonIcon;
-const MenuItemIcon = (0, _styledComponents.default)(iconThemeProviderFactory(_icon.default, () => "inherit"))`
-  ${({
-  theme,
-  horizontalAlignment
-}) => (0, _styledComponents.css)`
-    ${horizontalAlignment === "right" ? "padding-left" : "padding-right"}: ${theme.spacing}px;
-  `}
+const MenuItemIcon = (0, _styledComponents.default)(_icon.default)`
+  padding: var(--spacing100);
+  color: var(--colorsUtilityYin065);
 `;
 exports.MenuItemIcon = MenuItemIcon;
 const SubMenuItemIcon = (0, _styledComponents.default)(ButtonIcon)`
   ${({
-  theme,
   type
 }) => (0, _styledComponents.css)`
     position: absolute;
-    &,
-    :hover {
-      color: ${theme.colors.border};
-    }
     ${type === "chevron_left" && (0, _styledComponents.css)`
-      left: 0px;
+      left: -2px;
     `}
 
     ${type === "chevron_right" && (0, _styledComponents.css)`
-      right: 0px;
+      right: -5px;
       ${(0, _browserTypeCheck.isSafari)(navigator) && (0, _styledComponents.css)`
-        top: ${theme.spacing}px;
+        top: var(--sizing100);
       `}
     `}
   `}
 `;
 exports.SubMenuItemIcon = SubMenuItemIcon;
 const MenuButtonOverrideWrapper = _styledComponents.default.div`
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
-    ${_button.default} {
-      padding: 0px ${theme.spacing}px;
-      width: 100%;
-      &:focus {
-        outline-width: 2px;
-      }
+  ${_button.default} {
+    padding: 0px var(--sizing100);
+    width: 100%;
+
+    &:hover,
+    &:focus {
+      background-color: var(--colorsActionMajorTransparent);
+      color: var(--colorsActionMajor600);
 
-      &:hover,
-      &:focus {
-        background-color: ${theme.colors.white};
+      span[color] {
+        color: var(--colorsActionMajor600);
       }
     }
-  `}
+  }
 `;
 exports.MenuButtonOverrideWrapper = MenuButtonOverrideWrapper;

package/lib/components/confirm/confirm.component.js

@@ -82,7 +82,7 @@ const Confirm = ({
     buttonType: confirmButtonType,
     destructive: destructive || confirmButtonDestructive,
     disabled: isLoadingConfirm || disableConfirm,
-    ml: cancelButtonType === "tertiary" ? "3px" : 2,
+    ml: 2,
     iconType: confirmButtonIconType,
     iconPosition: confirmButtonIconPosition
   }, isLoadingConfirm ? /*#__PURE__*/_react.default.createElement(_loader.default, {

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

@@ -5,12 +5,11 @@ export const StyledHeader: import("styled-components").StyledComponent<"div", an
 export const StyledSeparator: import("styled-components").StyledComponent<"hr", any, {}, never>;
 export const StyledHeaderHelp: import("styled-components").StyledComponent<typeof Help, any, {}, never>;
 export const StyledHeadingTitle: import("styled-components").StyledComponent<typeof Typography, any, {}, never>;
-export const StyledDivider: import("styled-components").StyledComponent<typeof Hr, any, {}, never>;
+export const StyledDivider: import("styled-components").StyledComponent<({ adaptiveMxBreakpoint, ml, mr, ...rest }: import("../hr/hr.component").HrProps) => JSX.Element, any, {}, never>;
 export const StyledHeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledHeadingBackButton: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
 export const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;
 import Icon from "../icon";
 import Help from "../help";
 import Typography from "../typography";
-import Hr from "../hr";
 import Link from "../link";

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

@@ -1,13 +1,9 @@
-export default Hr;
-declare function Hr({ adaptiveMxBreakpoint, ml, mr, ...props }: {
-    [x: string]: any;
-    adaptiveMxBreakpoint: any;
-    ml: any;
-    mr: any;
-}): JSX.Element;
-declare namespace Hr {
-    namespace propTypes {
-        const adaptiveMxBreakpoint: PropTypes.Requireable<number>;
-    }
+/// <reference types="react" />
+import { MarginProps } from "styled-system";
+export interface HrProps extends MarginProps {
+    /** Breakpoint for adaptive left and right margins (below the breakpoint they go to 0).
+     * Enables the adaptive behaviour when set */
+    adaptiveMxBreakpoint?: number;
 }
-import PropTypes from "prop-types";
+export declare const Hr: ({ adaptiveMxBreakpoint, ml, mr, ...rest }: HrProps) => JSX.Element;
+export default Hr;