Merge branch 'master' into FE-4023_flat_table_multiple_sticky_headers

.eslintrc

@@ -49,6 +49,7 @@
         }
       }
     ],
+    "radix": "off",
     "react/jsx-one-expression-per-line": "off",
     "react/destructuring-assignment": 0,
     "react/no-this-in-sfc": 0,
@@ -110,7 +111,12 @@
     "jasmine": true,
     "cypress/globals": true
   },
-  "extends": ["plugin:no-unsanitized/DOM", "airbnb", "prettier", "prettier/react"],
+  "extends": [
+    "plugin:no-unsanitized/DOM",
+    "airbnb",
+    "prettier",
+    "prettier/react"
+  ],
   "plugins": ["cypress", "react", "react-hooks"],
   "globals": {
     "jest": false,

.storybook/utils/styled-system-props.js

@@ -585,6 +585,71 @@ const generateStyledSystemFlexBoxProps = (defaults) => {
   ];
 };
 
+const generateStyledSystemBackgroundProps = (defaults) => {
+  return [
+    {
+      name: "background",
+      type: { summary: "string" },
+      description: "Any valid CSS string.",
+      required: false,
+      defaultValue: {
+        summary: defaults.background || "-",
+      },
+      table: {
+        category: "Background",
+      },
+    },
+    {
+      name: "backgroundImage",
+      type: { summary: "string" },
+      description: "Any valid CSS string.",
+      required: false,
+      defaultValue: {
+        summary: defaults.backgroundImage || "-",
+      },
+      table: {
+        category: "Background",
+      },
+    },
+    {
+      name: "backgroundSize",
+      type: { summary: "string" },
+      description: "Any valid CSS string.",
+      required: false,
+      defaultValue: {
+        summary: defaults.backgroundSize || "-",
+      },
+      table: {
+        category: "Background",
+      },
+    },
+    {
+      name: "backgroundPosition",
+      type: { summary: "string" },
+      description: "Any valid CSS string.",
+      required: false,
+      defaultValue: {
+        summary: defaults.backgroundPosition || "-",
+      },
+      table: {
+        category: "Background",
+      },
+    },
+    {
+      name: "backgroundRepeat",
+      type: { summary: "string" },
+      description: "Any valid CSS string.",
+      required: false,
+      defaultValue: {
+        summary: defaults.backgroundRepeat || "-",
+      },
+      table: {
+        category: "Background",
+      },
+    },
+  ];
+};
+
 const StyledSystemProps = ({
   of,
   spacing,
@@ -596,6 +661,7 @@ const StyledSystemProps = ({
   noHeader,
   margin,
   padding,
+  background,
 }) => {
   let rows = [];
 
@@ -620,6 +686,9 @@ const StyledSystemProps = ({
   if (flexBox) {
     rows.push(...generateStyledSystemFlexBoxProps(defaults));
   }
+  if (background) {
+    rows.push(...generateStyledSystemBackgroundProps(defaults));
+  }
 
   return (
     <>
@@ -640,6 +709,7 @@ StyledSystemProps.propTypes = {
   defaults: PropTypes.object,
   margin: PropTypes.bool,
   padding: PropTypes.bool,
+  background: PropTypes.bool,
 };
 
 export default StyledSystemProps;

CHANGELOG.md

@@ -1,3 +1,84 @@
+## [71.4.0](https://github.com/Sage/carbon/compare/v71.3.0...v71.4.0) (2021-05-07)
+
+
+### Features
+
+* **switch:** add styled system margin ([ca01fee](https://github.com/Sage/carbon/commit/ca01fee166410f63d5e576fd2202f4c4f108c4d5))
+
+## [71.3.0](https://github.com/Sage/carbon/compare/v71.2.1...v71.3.0) (2021-05-06)
+
+
+### Features
+
+* **draggable:** add styled-system props support ([9a2ca2b](https://github.com/Sage/carbon/commit/9a2ca2baa006935e1c67b450a01dd7e5a064bd3c))
+
+### [71.2.1](https://github.com/Sage/carbon/compare/v71.2.0...v71.2.1) (2021-05-06)
+
+
+### Bug Fixes
+
+* **search:** fix outline appearing onClick around the X icon ([6f8fb38](https://github.com/Sage/carbon/commit/6f8fb38cc50091ab482e10e1ad63c9d822ddb905)), closes [#3857](https://github.com/Sage/carbon/issues/3857)
+
+## [71.2.0](https://github.com/Sage/carbon/compare/v71.1.0...v71.2.0) (2021-05-06)
+
+
+### Features
+
+* **image:** create new component to support rendering images ([c77e4b1](https://github.com/Sage/carbon/commit/c77e4b18d17fcfff03257c4179d0ffc60eaca425))
+
+## [71.1.0](https://github.com/Sage/carbon/compare/v71.0.0...v71.1.0) (2021-05-04)
+
+
+### Features
+
+* **detail:** add styled-system margin support ([5ccbf34](https://github.com/Sage/carbon/commit/5ccbf349855a065ea3ce845a457e3540a6651a14))
+
+## [71.0.0](https://github.com/Sage/carbon/compare/v70.9.0...v71.0.0) (2021-05-04)
+
+
+### ⚠ BREAKING CHANGES
+
+* **menu-item:** Removed keyboardOverride prop from MenuItem
+
+### Code Refactoring
+
+* **menu-item:** remove keyboard override option ([6531b2f](https://github.com/Sage/carbon/commit/6531b2fcf8bc57ea87679af6f652c0e6d860c51d))
+
+## [70.9.0](https://github.com/Sage/carbon/compare/v70.8.0...v70.9.0) (2021-04-30)
+
+
+### Features
+
+* **content:** add margin props ([d95b9c5](https://github.com/Sage/carbon/commit/d95b9c52f1357d16d294b6d8ef269b0e257cc8c3))
+
+## [70.8.0](https://github.com/Sage/carbon/compare/v70.7.0...v70.8.0) (2021-04-30)
+
+
+### Features
+
+* **heading:** add styled-system margin support ([86b54e1](https://github.com/Sage/carbon/commit/86b54e17054e5769444199f4b3b255704699deca))
+
+## [70.7.0](https://github.com/Sage/carbon/compare/v70.6.0...v70.7.0) (2021-04-29)
+
+
+### Features
+
+* **accordion-group:** add styled-system margin support ([782d2d6](https://github.com/Sage/carbon/commit/782d2d6e6bf93d6d68ee93e04de2644b32c67718))
+
+## [70.6.0](https://github.com/Sage/carbon/compare/v70.5.1...v70.6.0) (2021-04-29)
+
+
+### Features
+
+* **dialog-full-screen:** add auto focus functionality ([0c36bbb](https://github.com/Sage/carbon/commit/0c36bbb20a178ed11107e79dfe895e4a8123d788))
+
+### [70.5.1](https://github.com/Sage/carbon/compare/v70.5.0...v70.5.1) (2021-04-29)
+
+
+### Bug Fixes
+
+* **filterable-select:** call onChange when value is deleted or not matched ([6c18561](https://github.com/Sage/carbon/commit/6c18561d8e4881fc4c54c8445e81588a3696c1d0))
+
 ## [70.5.0](https://github.com/Sage/carbon/compare/v70.4.1...v70.5.0) (2021-04-29)
 
 

cypress/features/regression/accessibility/accessibilityDesignSystem.feature

@@ -198,9 +198,9 @@ Feature: Accessibility tests - Design System folder
     When I open "Design System Tile" component page "<story>" in no iframe
     Then "Tile <story>" component has no accessibility violations
     Examples:
-      | story                             |
-      | default story                     |
-      | with definition list default      |
+      | story                        |
+      | default story                |
+      | with definition list default |
 
   @accessibility
   Scenario: Component Toast
@@ -231,4 +231,9 @@ Feature: Accessibility tests - Design System folder
   @accessibility
   Scenario: Tooltip component default story
     When I open "Design System Tooltip Test" component page "default" in no iframe
-    Then "Design System Tooltip Test default" component has no accessibility violations
+    Then "Design System Tooltip Test default" component has no accessibility violations
+
+  @accessibility
+  Scenario: Image component default story
+    When I open "Design System Image" component page "default story" in no iframe
+    Then "Image default story" component has no accessibility violations

cypress/features/regression/designSystem/menu.feature

@@ -42,4 +42,29 @@ Feature: Design Systems Menu component
     When I hover over third expandable Menu component
     Then "fourth" submenu has alternate colour theme
       And "fifth" submenu has alternate colour theme
-      And "sixth" submenu has alternate colour theme
+      And "sixth" submenu has alternate colour theme
+
+  @negative
+  Scenario: Check the default menu clickToOpen element does not open on hover
+    Given I open "Design System Menu" component page "submenu options" in no iframe
+    When I hover over default menu "sixth" expandable Menu component
+    Then Menu "sixth" expandable component submenu is not visible
+
+  @positive
+  Scenario: Check the default menu clickToOpen element opens on mouse click
+    Given I open "Design System Menu" component page "submenu options" in no iframe
+    When I click default menu "sixth" expandable Menu component
+    Then Menu "sixth" expandable element has inner elements
+
+  @positive
+  Scenario Outline: Check the default menu clickToOpen element opens using the "<key>" key
+    Given I open "Design System Menu" component page "submenu options" in no iframe
+      And I press tab from default menu "fourth" expandable Menu component 2 times
+    When I press "<key>" onto focused element
+    Then Menu "sixth" expandable element has inner elements
+    Examples:
+      | key       |
+      | Enter     |
+      | Space     |
+      | downarrow |
+      | uparrow   |

cypress/locators/menu/index.js

@@ -1,4 +1,10 @@
-import { SUBMENU, SCROLL_BLOCK, MENU_DIVIDER, SEGMENT_TITLE } from "./locators";
+import {
+  SUBMENU,
+  SCROLL_BLOCK,
+  MENU_DIVIDER,
+  SEGMENT_TITLE,
+  MENU,
+} from "./locators";
 
 // component preview locators
 export const submenu = () => cy.get(SUBMENU);
@@ -9,3 +15,7 @@ export const scrollBlock = () => cy.get(SUBMENU).find(SCROLL_BLOCK);
 export const lastSubmenuElement = () => submenuBlock().find("li div").last();
 export const menuDivider = () => cy.get(MENU_DIVIDER);
 export const segmentTitle = () => cy.get(SEGMENT_TITLE);
+export const menuComponent = (index) =>
+  cy.get(MENU).first().find(`li:nth-child(${index})`);
+export const submenuItem = (index) =>
+  menuComponent(index).find(SUBMENU).find("ul > li");

cypress/locators/menu/locators.js

@@ -3,3 +3,4 @@ export const SUBMENU = '[data-component="submenu-wrapper"]';
 export const SCROLL_BLOCK = '[data-component="submenu-scrollable-block"]';
 export const MENU_DIVIDER = '[data-component="menu-divider"]';
 export const SEGMENT_TITLE = '[data-component="menu-segment-title"]';
+export const MENU = '[data-component="menu"]';

cypress/support/helper.js

@@ -196,5 +196,6 @@ export function keyCode(type) {
     Tab: { key: "Tab", keyCode: 9, which: 9 },
     Home: { keyCode: 36, which: 36 },
     End: { keyCode: 35, which: 35 },
+    Esc: { keyCode: 27, which: 27 },
   }[type];
 }

cypress/support/step-definitions/menu-steps.js

@@ -6,8 +6,10 @@ import {
   lastSubmenuElement,
   menuDivider,
   segmentTitle,
+  menuComponent,
+  submenuItem,
 } from "../../locators/menu";
-import { positionOfElement } from "../helper";
+import { positionOfElement, keyCode } from "../helper";
 
 When("I hover over third expandable Menu component", () => {
   submenu().trigger("mouseover");
@@ -78,3 +80,46 @@ Then("{string} submenu has alternate colour theme", (position) => {
     "rgb(230, 235, 237)"
   );
 });
+
+When(
+  "I hover over default menu {string} expandable Menu component",
+  (position) => {
+    menuComponent(positionOfElement(position)).trigger("mouseover", {
+      force: true,
+    });
+  }
+);
+
+Then(
+  "Menu {string} expandable component submenu is not visible",
+  (position) => {
+    submenuItem(positionOfElement(position))
+      .should("have.length", 0)
+      .and("not.exist");
+  }
+);
+
+When("I click default menu {string} expandable Menu component", (position) => {
+  menuComponent(positionOfElement(position)).click();
+});
+
+Given(
+  "I press tab from default menu {string} expandable Menu component {int} times",
+  (position, times) => {
+    menuComponent(positionOfElement(position)).click();
+    cy.focused().trigger("keydown", keyCode("Esc"));
+    for (let i = 0; i < times; i++) {
+      cy.focused().tab();
+    }
+  }
+);
+
+Then("Menu {string} expandable element has inner elements", (position) => {
+  submenuItem(positionOfElement(position)).should("have.length", 2);
+  innerMenu(positionOfElement("second"))
+    .should("have.attr", "data-component", "link")
+    .and("be.visible");
+  innerMenu(positionOfElement("third"))
+    .should("have.attr", "data-component", "link")
+    .and("be.visible");
+});