carbon-react 13.10.0 → 13.12.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+### [13.12.1](https://github.com/Sage/carbon/compare/v13.12.0...v13.12.1) (2022-07-18)
+
+
+### Bug Fixes
+
+* update react and react-dom to v17 ([b0a5ff2](https://github.com/Sage/carbon/commit/b0a5ff23b3cd62243baef20e4f6837f56bd7fd97))
+
+## [13.12.0](https://github.com/Sage/carbon/compare/v13.11.0...v13.12.0) (2020-03-11)
+
+
+### Features
+
+* **button:** add destructive prop ([cef3676](https://github.com/Sage/carbon/commit/cef3676d754722ba171eaa1dc1f79e447b61b6d2))
+
+## [13.11.0](https://github.com/Sage/carbon/compare/v13.10.0...v13.11.0) (2020-03-11)
+
+
+### Features
+
+* **popover-container:** add new component ([871b56d](https://github.com/Sage/carbon/commit/871b56d1c82890d39ae1c489316d1304708d41b4))
+
 ## [13.10.0](https://github.com/Sage/carbon/compare/v13.9.1...v13.10.0) (2020-03-11)
 
 

package/cypress/features/accessibility/accessibility.feature

@@ -113,4 +113,5 @@ Feature: Accessibility tests
       | Button Toggle Group      | button-toggle-group |
       | Draggable                | draggable           |
       | Flat Table               | flat-table          |
-      | Search                   | search              |
+      | Search                   | search              |
+      | Popover Container        | popover-container   |

package/cypress/features/build/build.feature

@@ -192,6 +192,7 @@ Feature: Build tests
       | Flat Table               | flat-table          |
       | Search                   | search              |
       | Button Toggle Group      | button-toggle-group |
+      | Popover Container        | popover-container   |
 
   @build
   Scenario: Component Draggable basic default page and verify data-element

package/cypress/features/regression/test/popoverContainer.feature

@@ -0,0 +1,65 @@
+Feature: Popover container component
+  I want to change Popover container component properties
+
+  Background: Open Popover container component page
+    Given I open basic Test "Popover container" component page
+      And I open popover container
+
+  @positive
+  Scenario: Popover container is opened
+    # commented because of BDD default scenario Given - When - Then
+    # When I open popover container
+    Then Popover container is visible
+
+  @positive
+  Scenario Outline: Change Popover container component title to <title>
+    When I set title to "<title>"
+    Then Popover title on preview is set to "<title>"
+    Examples:
+      | title                   |
+      | Sample text             |
+      | 1234567890              |
+      | áéíóú¿¡üñ               |
+      | !@#$%^*()_+-=~[];:.,?{} |
+      | ÄÖÜßäöüß                |
+      | <>                      |
+
+  @positive
+  Scenario: Popover container component iconType to add
+    When I select iconType to "add"
+    Then icon on preview is "add"
+
+  @positive
+  Scenario Outline: Popover container component position to <position>
+    When I select position to "<position>"
+    Then Popover component opened the "<position>" side
+    Examples:
+      | position |
+      | left     |
+      | right    |
+
+  @positive
+  Scenario: Popover container is closed
+    When I click popover close icon
+    Then Popover container is not visible
+
+  @positive
+  Scenario Outline: Open Popover container is opened using <key> key
+    Given I click popover close icon
+    When I click onto popover setting icon using "<key>" key
+    Then Popover container is visible
+    Examples:
+      | key   |
+      | Enter |
+      | Space |
+
+  @positive
+  Scenario Outline: Open Popover container is closed using <key> key
+    Given I click popover close icon
+      And I click onto popover setting icon using "<key>" key
+    When I press onto closeIcon using "<key>" key
+    Then Popover container is not visible
+    Examples:
+      | key   |
+      | Enter |
+      | Space |

package/cypress/locators/popover-container/index.js

@@ -0,0 +1,18 @@
+import {
+  POPOVER_CONTAINER_DATA_COMPONENT,
+  POPOVER_CONTAINER_CONTENT,
+  POPOVER_CONTAINER_TITLE,
+  POPOVER_SETTINGS_ICON,
+  POPOVER_CLOSE_ICON,
+} from './locators';
+
+// component preview locators
+export const popoverContainerDataComponent = () => cy.iFrame(POPOVER_CONTAINER_DATA_COMPONENT);
+export const popoverContainerContent = () => cy.iFrame(POPOVER_CONTAINER_CONTENT);
+export const popoverContainerTitle = () => cy.iFrame(POPOVER_CONTAINER_TITLE);
+export const popoverContainerContentFirstInnerElement = () => popoverContainerContent().children()
+  .find('div');
+export const popoverContainerContentSecondInnerElement = () => popoverContainerContent().children()
+  .find('button');
+export const popoverSettingsIcon = () => cy.iFrame(POPOVER_SETTINGS_ICON);
+export const popoverCloseIcon = () => cy.iFrame(POPOVER_CLOSE_ICON);

package/cypress/locators/popover-container/locators.js

@@ -0,0 +1,6 @@
+// component preview locators
+export const POPOVER_CONTAINER_DATA_COMPONENT = '[data-component="popover-container"]';
+export const POPOVER_CONTAINER_CONTENT = '[data-element="popover-container-content"]';
+export const POPOVER_CONTAINER_TITLE = '[data-element="popover-container-title"]';
+export const POPOVER_SETTINGS_ICON = '[data-element="settings"]';
+export const POPOVER_CLOSE_ICON = '[data-element="popover-container-close-icon"]';

package/cypress/support/step-definitions/popover-container-steps.js

@@ -0,0 +1,88 @@
+import {
+  popoverContainerDataComponent,
+  popoverContainerContent,
+  popoverContainerTitle,
+  popoverContainerContentFirstInnerElement,
+  popoverContainerContentSecondInnerElement,
+  popoverSettingsIcon,
+  popoverCloseIcon,
+} from '../../locators/popover-container';
+
+When('I open popover container', () => {
+  popoverContainerDataComponent().click();
+});
+
+Then('Popover container is visible', () => {
+  popoverContainerDataComponent().should('exist');
+  popoverSettingsIcon().should('exist');
+  popoverContainerContent().should('be.visible');
+  popoverContainerContent().children().children().should('have.length', 2);
+  popoverContainerContent().should('have.css', 'background', 'rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box')
+    .and('have.css', 'box-shadow', 'rgba(0, 20, 29, 0.2) 0px 5px 5px 0px, rgba(0, 20, 29, 0.1) 0px 10px 10px 0px')
+    .and('have.css', 'padding', '16px 24px')
+    .and('have.css', 'min-width', '300px')
+    .and('have.css', 'position', 'absolute')
+    .and('have.css', 'top', '0px')
+    .and('have.css', 'opacity', '1')
+    .and('have.css', 'transform', 'matrix(1, 0, 0, 1, 0, 0)')
+    .and('have.css', 'transition', 'all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5) 0s');
+  popoverContainerContentFirstInnerElement().should('have.attr', 'data-element', 'popover-container-title').and('be.visible')
+    .and('have.css', 'font-size', '16px')
+    .and('have.css', 'font-weight', '700');
+  popoverContainerContentSecondInnerElement().should('have.attr', 'data-element', 'popover-container-close-icon')
+    .and('be.visible')
+    .and('have.css', 'position', 'absolute')
+    .and('have.css', 'margin-right', '0px')
+    .and('have.css', 'background', 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box')
+    .and('have.css', 'border', '0px none rgba(0, 0, 0, 0.9)')
+    .and('have.css', 'padding', '0px');
+  popoverContainerContentSecondInnerElement().children().should('have.attr', 'data-element', 'close').and('be.visible')
+    .and('have.css', 'color', 'rgba(0, 0, 0, 0.9)')
+    .and('have.css', 'position', 'relative');
+});
+
+Then('Popover title on preview is set to {string}', (title) => {
+  popoverContainerTitle().should('have.text', title);
+});
+
+Then('Popover component opened the {string} side', (side) => {
+  if (side === 'left') {
+    popoverContainerDataComponent().parent().should('have.attr', 'style').should('contain', 'margin-left', '400px');
+    popoverContainerContent().should('have.css', 'right', '0px');
+  } else {
+    popoverContainerDataComponent().parent().should('not.have.attr', 'style');
+    popoverContainerContent().should('have.css', 'left', '0px');
+  }
+});
+
+Then('Popover container is not visible', () => {
+  popoverContainerContent().should('not.exist');
+});
+
+When('I click onto popover setting icon using {string} key', (key) => {
+  switch (key) {
+    case 'Enter':
+      popoverSettingsIcon().trigger('keydown', { keyCode: 13, which: 13 });
+      break;
+    case 'Space':
+      popoverSettingsIcon().trigger('keydown', { keyCode: 32, which: 32 });
+      break;
+    default: throw new Error('Use Space or Enter key');
+  }
+});
+
+Then('I press onto closeIcon using {string} key', (key) => {
+  switch (key) {
+    case 'Enter':
+      popoverCloseIcon().trigger('keydown', { keyCode: 13, which: 13 });
+      break;
+    case 'Space':
+      popoverCloseIcon().trigger('keydown', { keyCode: 32, which: 32 });
+      break;
+    default: throw new Error('Use Space or Enter key');
+  }
+});
+
+When('I click popover close icon', () => {
+  popoverCloseIcon().click();
+});

package/lib/__deprecated__/components/dropdown-filter-ajax/dropdown-filter-ajax.stories.js

@@ -24,8 +24,6 @@ var _Info = _interopRequireDefault(require("./documentation/Info"));
 
 var _dropdownFilterAjax = _interopRequireDefault(require("./dropdown-filter-ajax"));
 
-var _xhrMock = require("../../../../.storybook/utils/xhr/xhr-mock");
-
 var _docgenInfo = _interopRequireDefault(require("../../../utils/helpers/docgen-info"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,8 +34,7 @@ _dropdownFilterAjax.default.__docgenInfo = (0, _docgenInfo.default)(require('./d
 var store = new _storybookState.Store({
   value: '',
   visibleValue: ''
-});
-(0, _xhrMock.enableMock)(); // Shared Props
+}); // Shared Props
 
 var onChange = function onChange(evt) {
   store.set({

package/lib/__spec_helper__/index.js

@@ -2,7 +2,7 @@
 
 var _enzyme = _interopRequireDefault(require("enzyme"));
 
-var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
+var _enzymeAdapterReact = _interopRequireDefault(require("@wojtekmaj/enzyme-adapter-react-17"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/components/button/button-types.style.js

@@ -16,14 +16,13 @@ function makeColors(color) {
   return "\n  color: ".concat(color, ";\n  ").concat(_icon.default, " {\n    color: ").concat(color, ";\n  }\n  ");
 }
 
-var _default = function _default(_ref, isDisabled) {
+var _default = function _default(_ref, isDisabled, destructive) {
   var colors = _ref.colors,
       disabled = _ref.disabled;
   return {
-    primary: "\n    background: ".concat(colors.primary, ";\n    border-color: transparent;\n    color: ").concat(colors.white, ";\n    &:hover {\n      background: ").concat(colors.secondary, ";\n    }\n\n    ").concat(isDisabled ? "\n      background: ".concat(disabled.button, ";\n      color: ").concat(disabled.text, ";\n      &:hover {\n        background: ").concat(disabled.button, ";\n        border-color: ").concat(disabled.button, ";\n        color: ").concat(disabled.text, ";\n      }\n    ") : '', "\n  "),
+    primary: "\n    background: ".concat(colors.primary, ";\n    border-color: transparent;\n    color: ").concat(colors.white, ";\n    &:hover {\n      background: ").concat(colors.secondary, ";\n    }\n\n    ").concat(isDisabled ? "\n    background: ".concat(disabled.button, ";\n    color: ").concat(disabled.text, ";\n    &:hover {\n      background: ").concat(disabled.button, ";\n      border-color: ").concat(disabled.button, ";\n      color: ").concat(disabled.text, ";\n    }\n  ") : '', "\n\n    ").concat(destructive ? "background: ".concat(colors.error, ";\n    border-color: transparent;\n    color: ").concat(colors.white, ";\n    &:hover {\n      background: ").concat(colors.destructive.hover, ";\n    }\n\n    ").concat(isDisabled ? "\n      background: ".concat(disabled.button, ";\n      color: ").concat(disabled.text, ";\n      &:hover {\n        background: ").concat(disabled.button, ";\n        color: ").concat(disabled.text, ";\n      }\n    ") : '') : '', "\n  "),
     secondary: "\n      background: transparent;\n      border-color: ".concat(colors.primary, ";\n      color: ").concat(colors.primary, ";\n      &:hover {\n        background: ").concat(colors.secondary, ";\n        border-color: ").concat(colors.secondary, ";\n       ").concat(makeColors(colors.white), "\n      }\n\n      ").concat(isDisabled ? "\n        border-color: ".concat(disabled.button, ";\n        color: ").concat(disabled.text, ";\n        &:hover {\n          background: transparent\n          border-color: ").concat(disabled.button, ";\n          ").concat(makeColors(disabled.text), "\n        }\n    ") : '', "\n  "),
     tertiary: "\n    background: transparent;\n    border-color: transparent;\n    color: ".concat(colors.primary, ";\n    &:hover {\n      ").concat(makeColors(colors.secondary), "\n    }\n\n    ").concat(isDisabled ? "\n      color: ".concat(disabled.text, ";\n      &:hover {\n        ").concat(makeColors(disabled.text), "\n      }\n    ") : '', "\n  "),
-    destructive: "\n    background: ".concat(colors.error, ";\n    border-color: transparent;\n    color: ").concat(colors.white, ";\n    &:hover {\n      background: ").concat(colors.destructive.hover, ";\n    }\n\n    ").concat(isDisabled ? "\n      background: ".concat(disabled.button, ";\n      color: ").concat(disabled.text, ";\n      &:hover {\n        background: ").concat(disabled.button, ";\n        color: ").concat(disabled.text, ";\n      }\n    ") : '', "\n  "),
     darkBackground: "\n    background: ".concat(colors.white, ";\n    border-color: transparent;\n    color: ").concat(colors.primary, ";\n    &:hover {\n      background: ").concat(colors.secondary, ";\n      ").concat(makeColors(colors.white), "\n    }\n\n    ").concat(isDisabled ? "\n      background: ".concat(disabled.button, ";\n      color: ").concat(disabled.text, ";\n      &:hover {\n        background: ").concat(disabled.button, ";\n        ").concat(makeColors(disabled.text), "\n      }\n    ") : '', "\n  ")
   };
 };

package/lib/components/button/button.component.js

@@ -51,6 +51,8 @@ var _tags = _interopRequireDefault(require("../../utils/helpers/tags"));
 
 var _optionsHelper = _interopRequireDefault(require("../../utils/helpers/options-helper"));
 
+var _logger = _interopRequireDefault(require("../../utils/logger"));
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -86,8 +88,17 @@ var Button = function Button(props) {
       buttonType = props.buttonType,
       rest = _objectWithoutProperties(props, ["as", "buttonType"]);
 
+  var IS_USING_DEPRECATED_TYPE_DESTRUCTIVE = buttonType === 'destructive';
+
+  if (IS_USING_DEPRECATED_TYPE_DESTRUCTIVE) {
+    _logger.default.deprecate('buttonType="destructive" has been deprecated. See https://github.com/Sage/carbon/releases for details.');
+  }
+
   var propsWithoutAs = _objectSpread({}, rest, {
     buttonType: buttonType || as
+  }, IS_USING_DEPRECATED_TYPE_DESTRUCTIVE && {
+    buttonType: 'primary',
+    destructive: true
   });
 
   if (subtext.length > 0 && size !== 'large') {
@@ -166,7 +177,7 @@ function renderChildren(_ref) {
 }
 
 Button.propTypes = {
-  /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "destructive" | "darkBackground" */
+  /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
   buttonType: _propTypes.default.oneOf(_optionsHelper.default.buttonTypes),
 
   /** The text the button displays */
@@ -175,6 +186,9 @@ Button.propTypes = {
   /** Apply disabled state to the button */
   disabled: _propTypes.default.bool,
 
+  /** Apply destructive style to the button */
+  destructive: _propTypes.default.bool,
+
   /** Defines an Icon position within the button: "before" | "after" */
   iconPosition: _propTypes.default.oneOf(_toConsumableArray(_optionsHelper.default.buttonIconPositions)),
 
@@ -207,6 +221,7 @@ Button.defaultProps = {
   as: 'secondary',
   size: 'medium',
   disabled: false,
+  destructive: false,
   iconPosition: 'before',
   theme: 'blue',
   subtext: ''

package/lib/components/button/button.stories.js

@@ -80,7 +80,8 @@ var getIconKnobs = function getIconKnobs() {
 var getKnobs = function getKnobs(isClassic) {
   var size = (0, _addonKnobs.select)('size', _optionsHelper.default.sizesRestricted, _.default.defaultProps.size);
   var classicProps = {},
-      buttonType;
+      buttonType,
+      destructive;
 
   if (isClassic) {
     classicProps = {
@@ -91,11 +92,13 @@ var getKnobs = function getKnobs(isClassic) {
     };
   } else {
     buttonType = (0, _addonKnobs.select)('buttonType', _optionsHelper.default.buttonTypes, _.default.defaultProps.as);
+    destructive = (0, _addonKnobs.boolean)('destructive', false);
   }
 
   return _objectSpread({
     buttonType: buttonType,
     children: (0, _addonKnobs.text)('children', 'Example Button'),
+    destructive: destructive,
     disabled: (0, _addonKnobs.boolean)('disabled', _.default.defaultProps.disabled),
     onClick: function onClick(ev) {
       return (0, _addonActions.action)('click')(ev);

package/lib/components/button/button.stories.mdx

@@ -21,9 +21,9 @@ Primary buttons can be destructive.
 <Preview>
   <Story name="primary/destructive" parameters={{ info: { disable: true }}} >
     <>
-      <Button buttonType="destructive" size="small">Small</Button>
-      <Button buttonType="destructive">Medium</Button>
-      <Button buttonType="destructive" size="large">Large</Button>
+      <Button buttonType="primary" destructive size="small">Small</Button>
+      <Button buttonType="primary" destructive >Medium</Button>
+      <Button buttonType="primary" destructive size="large">Large</Button>
     </>
   </Story>
 </Preview>
@@ -44,7 +44,7 @@ Primary buttons can have an icon positioned before or after the text.
   <Story name="primary/icon" parameters={{ info: { disable: true }}} >
   <>
     <Button buttonType="primary" iconType="print">Medium</Button>
-    <Button buttonType="destructive" iconType="delete" iconPosition="after">Medium</Button>
+    <Button buttonType="primary" destructive iconType="delete" iconPosition="after">Medium</Button>
     <Button buttonType="primary" disabled iconType="print" iconPosition="after">Medium</Button>
     </>
   </Story>

package/lib/components/button/button.style.js

@@ -141,8 +141,9 @@ function stylingForType(_ref4) {
   var disabled = _ref4.disabled,
       buttonType = _ref4.buttonType,
       theme = _ref4.theme,
-      size = _ref4.size;
-  return (0, _styledComponents.css)(_templateObject4(), theme.colors.focus, (0, _buttonTypes.default)(theme, disabled)[buttonType], (0, _buttonSizes.default)(theme)[size]);
+      size = _ref4.size,
+      destructive = _ref4.destructive;
+  return (0, _styledComponents.css)(_templateObject4(), theme.colors.focus, (0, _buttonTypes.default)(theme, disabled, destructive)[buttonType], (0, _buttonSizes.default)(theme)[size]);
 }
 
 function isClassicButton(_ref5) {

package/lib/components/button/documentation/info.js

@@ -11,7 +11,7 @@ var _storybookInfo = require("../../../../.storybook/style/storybook-info.styles
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Info = _react.default.createElement("div", null, _react.default.createElement("p", null, "A Button component."), _react.default.createElement(_storybookInfo.StoryHeader, null, "How to use the Button component:"), _react.default.createElement("p", null, 'Button is rendered as one of "primary", "secondary", "tertiary", "destructive", "darkBacground"'), _react.default.createElement("p", null, "In your file"), _react.default.createElement(_storybookInfo.StoryCode, {
+var Info = _react.default.createElement("div", null, _react.default.createElement("p", null, "A Button component."), _react.default.createElement(_storybookInfo.StoryHeader, null, "How to use the Button component:"), _react.default.createElement("p", null, 'Button is rendered as one of "primary", "secondary", "tertiary", "darkBacground"'), _react.default.createElement("p", null, "In your file"), _react.default.createElement(_storybookInfo.StoryCode, {
   padded: true
 }, 'import Button from "carbon-react/lib/components/button";'), _react.default.createElement("p", null, "To render a Button:"), _react.default.createElement(_storybookInfo.StoryCode, {
   padded: true

package/lib/components/icon-button/icon-button.component.js

@@ -29,7 +29,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var IconButton = function IconButton(_ref) {
+var IconButton = _react.default.forwardRef(function (_ref, ref) {
   var onAction = _ref.onAction,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, ["onAction", "children"]);
@@ -49,9 +49,10 @@ var IconButton = function IconButton(_ref) {
 
   return _react.default.createElement(_iconButton.default, _extends({}, rest, {
     onKeyDown: onKeyDown,
-    onClick: handleOnAction
+    onClick: handleOnAction,
+    ref: ref
   }), children);
-};
+});
 
 IconButton.propTypes = {
   /** Children prop is restricted to one Icon Component */

package/lib/components/icon-button/icon-button.style.js

@@ -34,7 +34,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  padding: 0;\n\n  ", "\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", " {\n    position: relative;\n\n    &:focus {\n      border: none;\n    }\n  }\n\n\n  ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  padding: 0;\n\n  ", "\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", " {\n    position: relative;\n\n    &:focus {\n      border: none;\n    }\n  }\n\n  ", ";\n"]);
 
   _templateObject = function _templateObject() {
     return data;

package/lib/components/message/message.style.js

@@ -26,7 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n      border: none;\n      background: transparent;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    border: none;\n    background: transparent;\n  "]);
 
   _templateObject2 = function _templateObject2() {
     return data;

package/lib/components/popover-container/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _settingsPopover.default;
+  }
+});
+
+var _settingsPopover = _interopRequireDefault(require("./settings-popover.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/popover-container/popover-container.component.js

@@ -0,0 +1,120 @@
+"use strict";
+
+require("core-js/modules/es.symbol");
+
+require("core-js/modules/es.symbol.description");
+
+require("core-js/modules/es.symbol.iterator");
+
+require("core-js/modules/es.array.iterator");
+
+require("core-js/modules/es.object.get-own-property-descriptor");
+
+require("core-js/modules/es.object.to-string");
+
+require("core-js/modules/es.string.iterator");
+
+require("core-js/modules/web.dom-collections.iterator");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _popoverContainer = require("./popover-container.style");
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var PopoverContainer = function PopoverContainer(_ref) {
+  var children = _ref.children,
+      iconType = _ref.iconType,
+      title = _ref.title,
+      position = _ref.position;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setOpen = _useState2[1];
+
+  var iconRef = (0, _react.useRef)();
+  var closeIconRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (isOpen) closeIconRef.current.focus();
+  }, [isOpen]);
+
+  var handleOpen = function handleOpen() {
+    setOpen(true);
+  };
+
+  var handleClose = function handleClose() {
+    setOpen(false);
+    iconRef.current.focus();
+  };
+
+  return _react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
+    "data-component": "popover-container"
+  }, _react.default.createElement(_popoverContainer.PopoverContainerIcon, {
+    ref: iconRef,
+    "data-element": "popover-container-icon",
+    tabIndex: isOpen ? -1 : 0,
+    onAction: handleOpen
+  }, _react.default.createElement(_icon.default, {
+    type: iconType
+  })), _react.default.createElement(_reactTransitionGroup.Transition, {
+    in: isOpen,
+    timeout: {
+      exit: 300
+    },
+    appear: true,
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, function (state) {
+    return _react.default.createElement(_popoverContainer.PopoverContainerContentStyle, {
+      "data-element": "popover-container-content",
+      animationState: state,
+      position: position
+    }, _react.default.createElement(_popoverContainer.PopoverContainerHeaderStyle, null, _react.default.createElement(_popoverContainer.PopoverContainerTitle, {
+      "data-element": "popover-container-title"
+    }, title), _react.default.createElement(_popoverContainer.PopoverContainerCloseIcon, {
+      "data-element": "popover-container-close-icon",
+      type: "close",
+      tabIndex: "0",
+      onAction: handleClose,
+      ref: closeIconRef
+    }, _react.default.createElement(_icon.default, {
+      type: "close"
+    }))), children);
+  }));
+};
+
+PopoverContainer.propTypes = {
+  /** Sets the popover container dialog header name */
+  title: _propTypes.default.string.isRequired,
+
+  /** Sets the icon that opens dialog */
+  iconType: _propTypes.default.string.isRequired,
+
+  /** Sets rendering position of dialog */
+  position: _propTypes.default.oneOf(['left', 'right']),
+  children: _propTypes.default.node
+};
+var _default = PopoverContainer;
+exports.default = _default;

package/lib/components/popover-container/popover-container.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import { AlignBinaryType } from '../../utils/helpers/options-helper/options-helper';
+
+export interface PopoverContainerProps {
+  children?: React.ReactNode;
+  /** Sets rendering position of dialog */
+  position?: AlignBinaryType;
+  /** Sets the popover container dialog header name */
+  title: string;
+  /** Sets the icon that opens dialog */
+  iconType: string;
+}
+
+declare const PopoverContainer: React.FunctionComponent<PopoverContainerProps>;
+
+export default PopoverContainer;