carbon-react 106.6.1 → 106.6.4

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMenuItem = exports.MenuButtonOverrideWrapper = exports.SubMenuItemIcon = exports.MenuItemDivider = exports.MenuItemIcon = exports.StyledButtonIcon = exports.ButtonIcon = exports.MenuButton = exports.MenuItemFactory = exports.Menu = void 0;
+exports.StyledMenuItem = exports.MenuButtonOverrideWrapper = exports.SubMenuItemIcon = exports.MenuItemDivider = exports.MenuItemIcon = exports.StyledButtonIcon = exports.ButtonIcon = exports.MenuButton = exports.Menu = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -40,13 +40,7 @@ exports.Menu = Menu;
 const StyledMenuItem = _styledComponents.default.button`
   text-decoration: none;
   background-color: var(--colorsActionMajorYang100);
-`;
-exports.StyledMenuItem = StyledMenuItem;
-
-const MenuItemFactory = button => (0, _styledComponents.default)(button)`
-  cursor: ${({
-  disabled
-}) => disabled ? "not-allowed" : "pointer"};
+  cursor: pointer;
   box-sizing: border-box;
   padding: 0 var(--spacing150);
   position: relative;
@@ -57,44 +51,43 @@ const MenuItemFactory = button => (0, _styledComponents.default)(button)`
   align-items: center;
   border: none;
   width: 100%;
-  color: ${({
-  disabled
-}) => disabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin090)"};
+  color: var(--colorsUtilityYin090);
   font-size: 14px;
   font-weight: 700;
   justify-content: ${({
   horizontalAlignment
 }) => horizontalAlignment === "left" ? "flex-start" : "flex-end"};
-  &:focus,
-  &:hover {
-    ${({
-  disabled
-}) => !disabled && (0, _styledComponents.css)`
-        background-color: var(--colorsUtilityMajor025);
-      `}
-  }
+
   &:focus {
     outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     z-index: 1;
   }
+
   ${({
-  disabled
-}) => !disabled && (0, _styledComponents.css)`
+  isDisabled
+}) => isDisabled && (0, _styledComponents.css)`
+      color: var(--colorsUtilityYin030);
+      cursor: not-allowed;
+
       && ${_icon2.default} {
-        cursor: pointer;
+        cursor: not-allowed;
+        color: var(--colorsUtilityYin030);
       }
     `}
+
   ${({
-  disabled
-}) => disabled && (0, _styledComponents.css)`
+  isDisabled
+}) => !isDisabled && (0, _styledComponents.css)`
+      &:focus,
+      &:hover {
+        background-color: var(--colorsUtilityMajor025);
+      }
       && ${_icon2.default} {
-        cursor: not-allowed;
-        color: var(--colorsUtilityYin030);
+        cursor: pointer;
       }
     `}
 `;
-
-exports.MenuItemFactory = MenuItemFactory;
+exports.StyledMenuItem = StyledMenuItem;
 const MenuItemDivider = _styledComponents.default.div.attrs({
   "data-element": "action-popover-divider"
 })`

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

@@ -1,5 +1,9 @@
-export { default as ActionPopover } from "./action-popover";
-export { default as ActionPopoverMenu } from "./action-popover-menu/action-popover-menu";
-export { default as ActionPopoverItem } from "./action-popover-item/action-popover-item";
-export { default as ActionPopoverMenuButton } from "./action-popover-menu-button";
-export { default as ActionPopoverDivider } from "./action-popover-divider/action-popover-divider";
+export { default as ActionPopover } from "./action-popover.component";
+export type { ActionPopoverProps } from "./action-popover.component";
+export { default as ActionPopoverMenu } from "./action-popover-menu/action-popover-menu.component";
+export type { ActionPopoverMenuProps } from "./action-popover-menu/action-popover-menu.component";
+export { default as ActionPopoverItem } from "./action-popover-item/action-popover-item.component";
+export type { ActionPopoverItemProps } from "./action-popover-item/action-popover-item.component";
+export { default as ActionPopoverMenuButton } from "./action-popover-menu-button/action-popover-menu-button.component";
+export type { ActionPopoverMenuButtonProps } from "./action-popover-menu-button/action-popover-menu-button.component";
+export { default as ActionPopoverDivider } from "./action-popover-divider/action-popover-divider.component";

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

@@ -1,2 +1,13 @@
+import React from "react";
+import { SpaceProps, LayoutProps, FlexboxProps, ColorProps } from "styled-system";
+export declare type OverflowWrap = "break-word" | "anywhere";
+export declare type ScrollVariant = "light" | "dark";
+export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps {
+    as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
+    overflowWrap?: OverflowWrap;
+    /** scroll styling attribute */
+    scrollVariant?: ScrollVariant;
+}
+declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;
-declare const Box: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/box/box.component.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("@styled-system/prop-types"));
-
-var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
@@ -19,17 +15,27 @@ var _color = _interopRequireDefault(require("../../style/utils/color"));
 
 var _box = _interopRequireDefault(require("./box.config"));
 
+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 Box = _styledComponents.default.div`
   ${_styledSystem.space}
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}
-  ${_color.default}
+  ${({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+}) => (0, _color.default)({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+})}
 
   ${({
   overflowWrap
@@ -54,25 +60,6 @@ const Box = _styledComponents.default.div`
       }
     `}
 `;
-Box.propTypes = {
-  /** Styled system box props */
-  ..._propTypes.default.space,
-
-  /** Styled system flex props */
-  ..._propTypes.default.flexbox,
-
-  /** Styled system layout props */
-  ..._propTypes.default.layout,
-
-  /** Styled system color props */
-  ..._propTypes.default.color,
-
-  /** String to set Box content break strategy. Note "anywhere" is not supported in Safari and IE11 */
-  overflowWrap: _propTypes2.default.oneOf(["break-word", "anywhere"]),
-
-  /** scroll styling attribute */
-  scrollVariant: _propTypes2.default.oneOf(["light", "dark"])
-};
 Box.defaultProps = {
   theme: _base.default
 };

package/lib/components/box/box.config.d.ts

@@ -1,13 +1,11 @@
-declare namespace _default {
-    namespace light {
-        const thumb: string;
-        const track: string;
-    }
-    namespace dark {
-        const thumb_1: string;
-        export { thumb_1 as thumb };
-        const track_1: string;
-        export { track_1 as track };
-    }
-}
+declare const _default: {
+    light: {
+        thumb: string;
+        track: string;
+    };
+    dark: {
+        thumb: string;
+        track: string;
+    };
+};
 export default _default;

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

@@ -1 +1,2 @@
-export { default } from "./box";
+export { default } from "./box.component";
+export type { BoxProps } from "./box.component";

package/lib/components/button-bar/button-bar-test.stories.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Preview = exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _iconButton = _interopRequireDefault(require("../icon-button"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _buttonBar = require("./button-bar.config");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _default = {
+  title: "Button Bar/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  }
+};
+exports.default = _default;
+const commonArgTypesButtonBar = {
+  size: {
+    options: _buttonBar.BUTTON_BAR_SIZES,
+    control: {
+      type: "select"
+    }
+  },
+  iconPosition: {
+    options: _buttonBar.BUTTON_BAR_ICON_POSITIONS,
+    control: {
+      type: "select"
+    }
+  }
+};
+const commonArgsButtonBar = {
+  size: "medium",
+  fullWidth: false,
+  iconPosition: "before"
+};
+
+const Default = ({ ...args
+}) => /*#__PURE__*/_react.default.createElement(_.default, _extends({
+  onClick: (0, _addonActions.action)("click")
+}, args), /*#__PURE__*/_react.default.createElement(_button.default, {
+  iconType: "search"
+}, "Example Button"), /*#__PURE__*/_react.default.createElement(_button.default, {
+  iconType: "pdf"
+}, "Example Button"), /*#__PURE__*/_react.default.createElement(_button.default, {
+  iconType: "csv"
+}, "Example Button"));
+
+exports.Default = Default;
+
+const Preview = () => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
+    ml: 2,
+    mt: 2
+  }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+    onAction: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "pdf"
+  })), /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+    onAction: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "csv"
+  })), /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+    onAction: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "search"
+  }))), _buttonBar.BUTTON_BAR_SIZES.map(size => /*#__PURE__*/_react.default.createElement(_.default, {
+    key: size,
+    size: size,
+    ml: 2,
+    mt: 2
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    iconType: "pdf"
+  }), /*#__PURE__*/_react.default.createElement(_button.default, {
+    iconType: "csv"
+  }), /*#__PURE__*/_react.default.createElement(_button.default, {
+    iconType: "search"
+  }))), _buttonBar.BUTTON_BAR_ICON_POSITIONS.map(iconPosition => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: iconPosition
+  }, _buttonBar.BUTTON_BAR_SIZES.map(size => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
+    key: size + iconPosition,
+    iconPosition: iconPosition,
+    size: size,
+    ml: 2,
+    mt: 2
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    iconType: "pdf"
+  }, iconPosition), /*#__PURE__*/_react.default.createElement(_button.default, {
+    iconType: "csv"
+  }, iconPosition), /*#__PURE__*/_react.default.createElement(_button.default, {
+    iconType: "search"
+  }, iconPosition)))))), _buttonBar.BUTTON_BAR_ICON_POSITIONS.map(iconPosition => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: iconPosition
+  }, _buttonBar.BUTTON_BAR_SIZES.map(size => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
+    fullWidth: true,
+    key: `${size}${iconPosition}fullWidth`,
+    iconPosition: iconPosition,
+    size: size,
+    ml: 2,
+    mt: 2
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    iconType: "pdf"
+  }, iconPosition), /*#__PURE__*/_react.default.createElement(_button.default, {
+    iconType: "csv"
+  }, iconPosition), /*#__PURE__*/_react.default.createElement(_button.default, {
+    iconType: "search"
+  }, iconPosition)))))));
+};
+
+exports.Preview = Preview;
+Default.story = {
+  name: "default",
+  args: { ...commonArgsButtonBar
+  },
+  argTypes: { ...commonArgTypesButtonBar
+  }
+};
+Preview.story = {
+  name: "visual",
+  parameters: {
+    chromatic: {
+      disable: false
+    }
+  }
+};

package/lib/components/button-bar/button-bar.component.d.ts

@@ -1,16 +1,13 @@
-export default ButtonBar;
-declare function ButtonBar({ children, size, iconPosition, buttonType, ...rest }: {
-    [x: string]: any;
-    children: any;
-    size: any;
-    iconPosition: any;
-    buttonType: any;
-}): JSX.Element;
-declare namespace ButtonBar {
-    const propTypes: any;
-    namespace defaultProps {
-        const size: string;
-        const iconPosition: string;
-        const fullWidth: boolean;
-    }
+import React from "react";
+import { SpaceProps } from "styled-system";
+export interface ButtonBarProps extends SpaceProps {
+    children: React.ReactNode;
+    /** Apply fullWidth style to the button bar */
+    fullWidth?: boolean;
+    /** Defines an Icon position for buttons: "before" | "after" */
+    iconPosition?: "before" | "after";
+    /** Assigns a size to the buttons: "small" | "medium" | "large" */
+    size?: "small" | "medium" | "large";
 }
+declare const ButtonBar: ({ children, size, iconPosition, fullWidth, ...rest }: ButtonBarProps) => JSX.Element;
+export default ButtonBar;