Merge branch 'master' into FE-5285_add-position-props-to-box

.storybook/manager-head.html

@@ -0,0 +1,85 @@
+<style>
+  .sidebar-header [class*="ButtonLink"]:focus {
+    box-shadow: none !important;
+    background: white !important;
+    border: 3px solid #007E45 !important;
+    color:  rgba(0,0,0,0.9) !important;
+    font-weight: 500 !important;
+    text-decoration: underline !important;
+  }
+
+  #storybook-preview-wrapper [class*="ButtonLink"]:focus {
+    box-shadow: none !important;
+    background: white !important;
+    border: 3px solid #007E45 !important;
+    color:  rgba(0,0,0,0.9) !important;
+    font-weight: 500 !important;
+    text-decoration: underline !important;
+  }
+
+  #storybook-explorer-searchfield:focus {
+    box-shadow: 0px 0px 0px 3px #ffb500;
+  }
+
+  .os-host .os-viewport button:focus {
+    box-shadow: 0px 0px 0px 3px #ffb500;
+    outline: none;
+  }
+
+  .os-host .os-viewport button[title="Shortcuts"]:focus {
+    color: white;
+  }
+
+  .os-host .os-viewport button[data-action="collapse-root"] {
+    color: rgba(0, 0, 0, 0.9);
+  }
+
+  .sidebar-item.sidebar-item {
+    padding-bottom: 6px;
+    padding-top: 6px;
+  }
+
+  .sidebar-item.sidebar-item + [class*="ButtonLink"]:focus {
+    background: white;
+    color: rgba(0,0,0,0.9);
+    border: 2px solid #007E45;
+    font-size: 12px;
+    font-weight: 500;
+    height: auto;
+    padding: 4px 8px 4px 8px;
+    text-decoration: underline;
+  }
+
+  .sidebar-item.sidebar-item:focus {
+    background: white !important;
+    outline:  3px solid #ffb500;
+  }
+
+  .sidebar-item.sidebar-item svg {
+    color: rgba(0,0,0,0.9);
+  }
+
+  .sidebar-item.sidebar-item[data-selected="true"] {
+    color: rgba(0,0,0,0.9) !important;
+    font-weight: 500;
+  }
+
+  .sidebar-item.sidebar-item[data-selected="true"] svg {
+    color: rgba(0,0,0,0.9);
+  }
+
+  .sidebar-item.sidebar-item[data-selected="false"]:hover,
+  .sidebar-item.sidebar-item[data-nodetype="group"]:hover,
+  .sidebar-item.sidebar-item[data-nodetype="component"]:hover {
+    background: #007E45 !important;
+    color:  white;
+  }
+
+  .search-result-item .search-result-item--label mark {
+    color:  #0060a7;
+  }
+
+  .search-result-item svg  {
+    color: rgba(0,0,0,0.9);
+  }
+</style>

.storybook/preview-head.html

@@ -28,4 +28,15 @@
   as="font"
   type="font/woff2"
   crossorigin="anonymous"
-/>
+/>
+
+<style>
+  .sbdocs.sbdocs-wrapper {
+    background: transparent !important;
+  }
+
+  #docs-root .sbdocs.sbdocs-wrapper .sbdocs-ul a {
+    color: #007e45;
+    font-weight: 700;
+  }
+</style>

.storybook/sageTheme.js

@@ -3,13 +3,13 @@ import { create } from "@storybook/theming/create";
 export default create({
   base: "light",
 
-  colorPrimary: "red",
-  colorSecondary: "#0073C2",
+  colorPrimary: "#007e45",
+  colorSecondary: "#8099A6",
 
   // UI
-  appBg: "#F2F5F6",
-  appContentBg: "white",
-  appBorderColor: "#ccd6db",
+  appBg: "#FFFFFF",
+  appContentBg: "#f2f5f6",
+  appBorderColor: "#000000",
 
   // Typography
   fontBase: '"Sage UI", sans-serif',
@@ -22,15 +22,15 @@ export default create({
   // Toolbar default and active colors
   barTextColor: "white",
   barSelectedColor: "#00DC00",
-  barBg: "#003349",
+  barBg: "#000000",
 
   // Form colors
   inputBg: "white",
   inputBorder: "#668592",
   inputTextColor: "rgba(0,0,0,0.9)",
   inputBorderRadius: 0,
 
-  brandTitle: "Sage DLS in Carbon",
+  brandTitle: "Sage DS in Carbon",
   brandUrl: "https://carbon.sage.com",
   brandImage: "carbon-by-sage-logo.png",
 });

.storybook/welcome-page/components-demo/demo/demo.style.js

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 export const ComponentShowcaseWrapper = styled.div`
   align-items: center;
-  background-image: linear-gradient(180deg,#f3f8fe,#fdf5f5);
+  background: #fafbfb;
   display: flex;
   flex-direction: column;
   padding: 120px 0 0;

.storybook/welcome-page/footer/footer.style.js

@@ -3,7 +3,7 @@ import LogoSvg from "./sage_logo.svg";
 
 export const Background = styled.div`
   margin-top: -1px;
-  background-color: #003349;
+  background-color: #000000;
   left: 0;
   right: 0;
 `;
@@ -40,8 +40,8 @@ export const SageIcon = styled.span`
   @media (min-width: 800px) {
     margin: 0 0 0 auto;
   }
-  height: 22px;
-  width: 57px;
+  height: 26px;
+  width: 47px;
 `;
 
 export const Legal = styled.span``;

.storybook/welcome-page/header/header.style.js

@@ -1,7 +1,7 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 export const HeadingBackgroundWrapper = styled.div`
-  background: linear-gradient(80deg,#2f355a,#343f80);
+  background: #000000;
   height: 100%;
   left: 0;
   position: relative;
@@ -41,6 +41,6 @@ export const CodeButtonWrapper = styled.div`
 
 export const GitHubLinkWrapper = styled.div`
   font-weight: 100;
-  letter-spacing: .3px;
+  letter-spacing: 0.3px;
   margin-top: 40px;
 `;

src/components/portal/__snapshots__/portal.spec.js.snap → src/components/portal/__snapshots__/portal.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Portal when id prop is given matches snapshot 1`] = `"<div class=\\"car
 
 exports[`Portal when using default node then the portal will mount on body 1`] = `"<div class=\\"carbon-portal\\" data-portal-exit=\\"guid-12345\\"><div class=\\"sc-bdVaJa bJdEkx\\"><span class=\\"sc-bxivhb lbAINf\\" data-element=\\"tick\\" font-size=\\"small\\" tabindex=\\"0\\" type=\\"tick\\" data-component=\\"icon\\"></span></div></div>"`;
 
-exports[`Portal when using default node to match snapshot  1`] = `
+exports[`Portal when using default node to match snapshot 1`] = `
 <span
   data-portal-entrance="guid-12345"
 >

src/components/portal/portal.spec.js → src/components/portal/portal.spec.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { mount, shallow } from "enzyme";
+import { mount, shallow, ReactWrapper } from "enzyme";
 import ReactDOM from "react-dom";
 import Portal, { PortalContext } from "./portal";
 import Icon from "../icon";
@@ -8,13 +8,13 @@ import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-
 jest.mock("../../__internal__/utils/helpers/guid", () => () => "guid-12345");
 
 describe("Portal", () => {
-  let wrapper;
+  let wrapper: ReactWrapper;
 
   describe("when an element with id 'root' exists, and renderInRoot is set to true in Portal Context", () => {
-    let rootWrapper;
-    const rootDiv = global.document.createElement("div");
+    let rootWrapper: ReactWrapper | null;
+    const rootDiv = document.createElement("div");
     rootDiv.setAttribute("id", "root");
-    const body = global.document.querySelector("body");
+    const body = document.querySelector("body") as HTMLBodyElement;
 
     beforeEach(() => {
       body.appendChild(rootDiv);
@@ -91,7 +91,7 @@ describe("Portal", () => {
       expect(document.body.innerHTML).toEqual("");
     });
 
-    it("to match snapshot ", () => {
+    it("to match snapshot", () => {
       const wrapper2 = shallow(
         <Portal>
           <Icon tooltipMessage="Test" tooltipPosition="top" type="tick" />
@@ -103,15 +103,15 @@ describe("Portal", () => {
 
   describe("will manage listeners", () => {
     describe("when NOT given reposition prop", () => {
-      let parentDiv;
+      let parentDiv: HTMLDivElement;
       beforeEach(() => {
-        spyOn(window, "addEventListener");
-        spyOn(window, "removeEventListener");
-        spyOn(ReactDOM, "findDOMNode").and.returnValue(parentDiv);
+        jest.spyOn(window, "addEventListener");
+        jest.spyOn(window, "removeEventListener");
+        jest.spyOn(ReactDOM, "findDOMNode").mockReturnValue(parentDiv);
 
         parentDiv = document.createElement("div");
-        spyOn(parentDiv, "addEventListener");
-        spyOn(parentDiv, "removeEventListener");
+        jest.spyOn(parentDiv, "addEventListener");
+        jest.spyOn(parentDiv, "removeEventListener");
 
         wrapper = mount(
           <Portal>
@@ -124,7 +124,7 @@ describe("Portal", () => {
         if (wrapper.length) wrapper.unmount();
       });
 
-      it('will NOT add window "resize" listener ', () => {
+      it('will NOT add window "resize" listener', () => {
         expect(window.addEventListener).not.toHaveBeenCalledWith("resize");
       });
 
@@ -133,7 +133,7 @@ describe("Portal", () => {
         expect(window.removeEventListener).not.toHaveBeenCalledWith("resize");
       });
 
-      it('will NOT window "scroll" listener ', () => {
+      it('will NOT window "scroll" listener', () => {
         expect(parentDiv.addEventListener).not.toHaveBeenCalled();
       });
 
@@ -144,19 +144,19 @@ describe("Portal", () => {
     });
 
     describe("when given reposition prop", () => {
-      let repositionCb;
-      let parentDiv;
+      let repositionCb: jest.Mock;
+      let parentDiv: HTMLDivElement;
 
       beforeEach(() => {
-        repositionCb = jasmine.createSpy("onReposition");
+        repositionCb = jest.fn();
         parentDiv = document.createElement("div");
         parentDiv.style.overflow = "auto";
 
-        spyOn(window, "addEventListener");
-        spyOn(window, "removeEventListener");
-        spyOn(ReactDOM, "findDOMNode").and.returnValue(parentDiv);
-        spyOn(parentDiv, "addEventListener");
-        spyOn(parentDiv, "removeEventListener");
+        jest.spyOn(window, "addEventListener");
+        jest.spyOn(window, "removeEventListener");
+        jest.spyOn(ReactDOM, "findDOMNode").mockReturnValue(parentDiv);
+        jest.spyOn(parentDiv, "addEventListener");
+        jest.spyOn(parentDiv, "removeEventListener");
         wrapper = mount(
           <Portal onReposition={repositionCb}>
             <Icon tooltipMessage="Test" tooltipPosition="top" type="tick" />
@@ -168,7 +168,7 @@ describe("Portal", () => {
         if (wrapper.length) wrapper.unmount();
       });
 
-      it('will add window "resize" listener ', () => {
+      it('will add window "resize" listener', () => {
         expect(window.addEventListener).toHaveBeenCalledWith(
           "resize",
           repositionCb
@@ -183,7 +183,7 @@ describe("Portal", () => {
         );
       });
 
-      it('will call window "reposition" callback ', () => {
+      it('will call window "reposition" callback', () => {
         expect(repositionCb).toHaveBeenCalled();
       });
     });
@@ -200,15 +200,15 @@ describe("Portal", () => {
   });
 
   describe("when reposition prop is updated", () => {
-    let repositionCb;
-    let repositionCbNew;
+    let repositionCb: jest.Mock;
+    let repositionCbNew: jest.Mock;
 
     beforeEach(() => {
-      repositionCb = jasmine.createSpy("onReposition");
-      repositionCbNew = jasmine.createSpy("onRepositionNew");
+      repositionCb = jest.fn();
+      repositionCbNew = jest.fn();
 
-      spyOn(window, "addEventListener");
-      spyOn(window, "removeEventListener");
+      jest.spyOn(window, "addEventListener");
+      jest.spyOn(window, "removeEventListener");
 
       wrapper = mount(
         <Portal onReposition={repositionCb}>