@atlaskit/page-layout 1.1.0 → 1.2.2

package/dist/es2019/components/slots/right-sidebar.js

@@ -2,12 +2,49 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { jsx } from '@emotion/core';
-import { DEFAULT_RIGHT_SIDEBAR_WIDTH, VAR_RIGHT_SIDEBAR_WIDTH } from '../../common/constants';
+import { css, jsx } from '@emotion/core';
+import { BANNER_HEIGHT, DEFAULT_RIGHT_SIDEBAR_WIDTH, RIGHT_PANEL_WIDTH, RIGHT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, VAR_RIGHT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';
+import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
-import { fixedRightSidebarInnerStyles, rightSidebarStyles } from './styles';
+/**
+ * This inner wrapper is required to allow the sidebar to be `position: fixed`.
+ *
+ * If we were to apply `position: fixed` to the outer wrapper, it will be popped
+ * out of its flex container and Main would stretch to occupy all the space.
+ */
+
+const fixedInnerStyles = css({
+  /**
+   * This width on the inner wrapper is required when it is using fixed
+   * positioning. Otherwise its width is slightly off.
+   */
+  width: RIGHT_SIDEBAR_WIDTH,
+  position: 'fixed',
+  top: `calc(${BANNER_HEIGHT} + ${TOP_NAVIGATION_HEIGHT})`,
+  right: `calc(${RIGHT_PANEL_WIDTH})`,
+  bottom: 0
+});
+const staticInnerStyles = css({
+  height: '100%'
+});
+const outerStyles = css({
+  width: RIGHT_SIDEBAR_WIDTH
+});
+/**
+ * In fixed mode this element's child is taken out of the document flow.
+ * It doesn't take up the width as expected,
+ * so the pseudo element forces it to take up the necessary width.
+ */
+
+const fixedOuterStyles = css({
+  '&::after': {
+    display: 'inline-block',
+    width: RIGHT_SIDEBAR_WIDTH,
+    content: "''"
+  }
+});
 
 const RightSidebar = props => {
   const {
@@ -28,19 +65,24 @@ const RightSidebar = props => {
       publishGridState({
         [VAR_RIGHT_SIDEBAR_WIDTH]: 0
       });
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [rightSidebarWidth, id]);
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
+  return jsx(SlotFocusRing, {
+    isSidebar: true
+  }, ({
+    className
+  }) => jsx("div", _extends({
     "data-testid": testId,
-    css: rightSidebarStyles(isFixed),
+    css: [outerStyles, isFixed && fixedOuterStyles],
+    className: className,
     id: id
   }, getPageLayoutSlotSelector('right-sidebar')), jsx(SlotDimensions, {
     variableName: VAR_RIGHT_SIDEBAR_WIDTH,
     value: rightSidebarWidth
   }), jsx("div", {
-    css: fixedRightSidebarInnerStyles(isFixed)
-  }, children));
+    css: [isFixed && fixedInnerStyles, !isFixed && staticInnerStyles]
+  }, children)));
 };
 
 export default RightSidebar;

package/dist/es2019/components/slots/top-navigation.js

@@ -2,12 +2,23 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { jsx } from '@emotion/core';
-import { DEFAULT_TOP_NAVIGATION_HEIGHT, VAR_TOP_NAVIGATION_HEIGHT } from '../../common/constants';
+import { css, jsx } from '@emotion/core';
+import { BANNER_HEIGHT, DEFAULT_TOP_NAVIGATION_HEIGHT, LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, TOP_NAVIGATION, TOP_NAVIGATION_HEIGHT, VAR_TOP_NAVIGATION_HEIGHT } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';
+import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
-import { topNavigationStyles } from './styles';
+const topNavigationStyles = css({
+  height: TOP_NAVIGATION_HEIGHT,
+  gridArea: TOP_NAVIGATION
+});
+const fixedStyles = css({
+  position: 'fixed',
+  zIndex: 2,
+  top: BANNER_HEIGHT,
+  right: RIGHT_PANEL_WIDTH,
+  left: LEFT_PANEL_WIDTH
+});
 
 const TopNavigation = props => {
   const {
@@ -28,17 +39,20 @@ const TopNavigation = props => {
       publishGridState({
         [VAR_TOP_NAVIGATION_HEIGHT]: 0
       });
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [topNavigationHeight]);
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
-    css: topNavigationStyles(isFixed),
+  return jsx(SlotFocusRing, null, ({
+    className
+  }) => jsx("div", _extends({
+    css: [topNavigationStyles, isFixed && fixedStyles],
+    className: className,
     "data-testid": testId,
     id: id
   }, getPageLayoutSlotSelector('top-navigation')), jsx(SlotDimensions, {
     variableName: VAR_TOP_NAVIGATION_HEIGHT,
     value: topNavigationHeight
-  }), children);
+  }), children));
 };
 
 export default TopNavigation;

package/dist/es2019/controllers/sidebar-resize-context.js

@@ -8,7 +8,8 @@ const leftSidebarState = {
   isLeftSidebarCollapsed: false,
   leftSidebarWidth: 0,
   lastLeftSidebarWidth: 0,
-  flyoutLockCount: 0
+  flyoutLockCount: 0,
+  isFixed: true
 };
 export const SidebarResizeContext = /*#__PURE__*/createContext({
   isLeftSidebarCollapsed: false,

package/dist/es2019/controllers/sidebar-resize-controller.js

@@ -22,7 +22,8 @@ export const SidebarResizeController = ({
     isLeftSidebarCollapsed: false,
     leftSidebarWidth: 0,
     lastLeftSidebarWidth: 0,
-    flyoutLockCount: 0
+    flyoutLockCount: 0,
+    isFixed: true
   });
   const {
     isLeftSidebarCollapsed
@@ -49,7 +50,8 @@ export const SidebarResizeController = ({
     const {
       lastLeftSidebarWidth,
       isResizing,
-      flyoutLockCount
+      flyoutLockCount,
+      isFixed
     } = leftSidebarState;
 
     if (isResizing) {
@@ -63,7 +65,8 @@ export const SidebarResizeController = ({
       leftSidebarWidth: width,
       lastLeftSidebarWidth,
       isResizing,
-      flyoutLockCount
+      flyoutLockCount,
+      isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState); // onTransitionEnd isn't triggered when a user prefers reduced motion
 
@@ -75,7 +78,8 @@ export const SidebarResizeController = ({
     const {
       leftSidebarWidth,
       isResizing,
-      flyoutLockCount
+      flyoutLockCount,
+      isFixed
     } = leftSidebarState;
 
     if (isResizing) {
@@ -91,7 +95,8 @@ export const SidebarResizeController = ({
       leftSidebarWidth: COLLAPSED_LEFT_SIDEBAR_WIDTH,
       lastLeftSidebarWidth: leftSidebarWidth,
       isResizing,
-      flyoutLockCount
+      flyoutLockCount,
+      isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState); // onTransitionEnd isn't triggered when a user prefers reduced motion
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.1.0",
+	"version": "1.2.2",
 	"sideEffects": false
 }

package/dist/esm/common/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useIsSidebarCollapsing } from './use-is-sidebar-collapsing';
+export { default as useIsSidebarDragging } from './use-is-sidebar-dragging';

package/dist/esm/common/hooks/use-is-sidebar-collapsing.js

@@ -0,0 +1,34 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+import { IS_SIDEBAR_COLLAPSING } from '../constants';
+
+var getIsCollapsing = function getIsCollapsing() {
+  // SSR bail-out because document is undefined on the server
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  return document.documentElement.getAttribute(IS_SIDEBAR_COLLAPSING) === 'true';
+};
+
+var useIsSidebarCollapsing = function useIsSidebarCollapsing() {
+  var _useState = useState(getIsCollapsing),
+      _useState2 = _slicedToArray(_useState, 2),
+      isCollapsing = _useState2[0],
+      setIsCollapsing = _useState2[1];
+
+  useEffect(function () {
+    var observer = new MutationObserver(function () {
+      setIsCollapsing(getIsCollapsing);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [IS_SIDEBAR_COLLAPSING]
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, []);
+  return isCollapsing;
+};
+
+export default useIsSidebarCollapsing;

package/dist/esm/common/hooks/use-is-sidebar-dragging.js

@@ -0,0 +1,34 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+import { IS_SIDEBAR_DRAGGING } from '../constants';
+
+var getIsDragging = function getIsDragging() {
+  // SSR bail-out because document is undefined on the server
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  return document.documentElement.getAttribute(IS_SIDEBAR_DRAGGING) === 'true';
+};
+
+var useIsSidebarDragging = function useIsSidebarDragging() {
+  var _useState = useState(getIsDragging),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDragging = _useState2[0],
+      setIsDragging = _useState2[1];
+
+  useEffect(function () {
+    var observer = new MutationObserver(function () {
+      setIsDragging(getIsDragging);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [IS_SIDEBAR_DRAGGING]
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, []);
+  return isDragging;
+};
+
+export default useIsSidebarDragging;

package/dist/esm/components/resize-control/grab-area.js

@@ -4,9 +4,47 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["testId", "isLeftSidebarCollapsed"];
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { B100, B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
-import { grabAreaCSS, lineCSS } from './styles';
+
+/**
+ * Determines the color of the grab line.
+ *
+ * Used on internal leaf node, so naming collisions won't matter.
+ */
+var varLineColor = '--ds-line';
+var grabAreaStyles = css({
+  width: 24,
+  height: '100%',
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'ew-resize',
+  '&::-moz-focus-inner': {
+    border: 0
+  },
+  ':focus': {
+    outline: 0
+  },
+  ':enabled': {
+    ':hover': _defineProperty({}, varLineColor, "var(--ds-border-selected, ".concat(B100, ")")),
+    ':active, :focus': _defineProperty({}, varLineColor, "var(--ds-border-selected, ".concat(B200, ")"))
+  }
+});
+var grabAreaCollapsedStyles = css({
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'default'
+});
+var lineStyles = css({
+  display: 'block',
+  width: 2,
+  height: '100%',
+  backgroundColor: "var(".concat(varLineColor, ")"),
+  transition: 'background-color 200ms'
+});
 
 var grabAreaLineSelector = _defineProperty({}, GRAB_AREA_LINE_SELECTOR, true);
 
@@ -21,9 +59,9 @@ var GrabArea = function GrabArea(_ref) {
   return jsx("button", _extends({}, grabAreaSelector, {
     "data-testid": testId,
     type: "button",
-    css: grabAreaCSS(isLeftSidebarCollapsed)
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
   }, rest), jsx("span", _extends({
-    css: lineCSS(isLeftSidebarCollapsed)
+    css: lineStyles
   }, grabAreaLineSelector)));
 };
 

package/dist/esm/components/resize-control/index.js

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import rafSchd from 'raf-schd';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_BUTTON_SELECTOR, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getLeftPanelWidth, getLeftSidebarPercentage } from '../../common/utils';
@@ -17,27 +17,30 @@ import { SidebarResizeContext } from '../../controllers/sidebar-resize-context';
 
 import GrabArea from './grab-area';
 import ResizeButton from './resize-button';
-import { resizeControlCSS, shadowCSS } from './styles';
+import Shadow from './shadow';
 
 var cssSelector = _defineProperty({}, RESIZE_CONTROL_SELECTOR, true);
 
-var Shadow = function Shadow(_ref) {
-  var testId = _ref.testId;
-  return jsx("div", {
-    "data-testid": testId,
-    css: shadowCSS
-  });
-};
-
-var ResizeControl = function ResizeControl(_ref2) {
-  var testId = _ref2.testId,
-      overrides = _ref2.overrides,
-      _ref2$resizeButtonLab = _ref2.resizeButtonLabel,
-      resizeButtonLabel = _ref2$resizeButtonLab === void 0 ? '' : _ref2$resizeButtonLab,
-      _ref2$resizeGrabAreaL = _ref2.resizeGrabAreaLabel,
-      resizeGrabAreaLabel = _ref2$resizeGrabAreaL === void 0 ? 'Resize' : _ref2$resizeGrabAreaL,
-      onResizeStart = _ref2.onResizeStart,
-      onResizeEnd = _ref2.onResizeEnd;
+var resizeControlStyles = css({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: '100%',
+  outline: 'none'
+});
+var showResizeButtonStyles = css({
+  '--ds--resize-button--opacity': 1
+});
+
+var ResizeControl = function ResizeControl(_ref) {
+  var testId = _ref.testId,
+      overrides = _ref.overrides,
+      _ref$resizeButtonLabe = _ref.resizeButtonLabel,
+      resizeButtonLabel = _ref$resizeButtonLabe === void 0 ? '' : _ref$resizeButtonLabe,
+      _ref$resizeGrabAreaLa = _ref.resizeGrabAreaLabel,
+      resizeGrabAreaLabel = _ref$resizeGrabAreaLa === void 0 ? 'Resize' : _ref$resizeGrabAreaLa,
+      onResizeStart = _ref.onResizeStart,
+      onResizeEnd = _ref.onResizeEnd;
 
   var _useContext = useContext(SidebarResizeContext),
       expandLeftSidebar = _useContext.expandLeftSidebar,
@@ -247,7 +250,7 @@ var ResizeControl = function ResizeControl(_ref2) {
   /* eslint-disable jsx-a11y/role-supports-aria-props */
 
   return jsx("div", _extends({}, cssSelector, {
-    css: resizeControlCSS(isGrabAreaFocused, isLeftSidebarCollapsed)
+    css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), jsx(Shadow, {
     testId: testId && "".concat(testId, "-shadow")
   }), jsx(GrabArea, {

package/dist/esm/components/resize-control/resize-button.js

@@ -4,10 +4,63 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import ChevronRight from '@atlaskit/icon/glyph/chevron-right';
+import { easeOut } from '@atlaskit/motion/curves';
+import { mediumDurationMs, smallDurationMs } from '@atlaskit/motion/durations';
+import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
 import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
-import { increaseHitArea, resizeIconButtonCSS } from './styles';
+var increaseHitAreaStyles = css({
+  position: 'absolute',
+  top: -8,
+  right: -12,
+  bottom: -8,
+  left: -8
+});
+var resizeIconButtonStyles = css({
+  width: 24,
+  height: 24,
+  padding: 0,
+  position: 'absolute',
+  top: 32,
+  left: 0,
+  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
+  border: 0,
+  borderRadius: '50%',
+
+  /**
+   * TODO: https://product-fabric.atlassian.net/browse/DSP-3392
+   * This shadow needs further investigation,
+   * along with the hover and active background colors.
+   */
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  boxShadow: "0 0 0 1px ".concat(N30A, ", 0 2px 4px 1px ").concat(N30A),
+  color: "var(--ds-text-subtle, ".concat(N200, ")"),
+  cursor: 'pointer',
+
+  /**
+   * The fallback value of 0 ensures that the button is hidden by default,
+   * unless some parent (or the button itself) overrides it.
+   */
+  opacity: "var(--ds--resize-button--opacity,0)",
+  outline: 0,
+  transform: 'translateX(-50%)',
+  transition: "\n    background-color ".concat(smallDurationMs, "ms linear,\n    color ").concat(smallDurationMs, "ms linear,\n    opacity ").concat(mediumDurationMs, "ms ").concat(easeOut, "\n  "),
+  ':hover': {
+    backgroundColor: "var(--ds-background-selected-bold, ".concat(B100, ")"),
+    color: "var(--ds-text-inverse, ".concat(N0, ")"),
+    opacity: 1
+  },
+  ':active, :focus': {
+    backgroundColor: "var(--ds-background-selected-bold-hovered, ".concat(B200, ")"),
+    color: "var(--ds-text-inverse, ".concat(N0, ")"),
+    opacity: 1
+  }
+});
+var resizeIconButtonExpandedStyles = css({
+  transform: 'rotate(180deg)',
+  transformOrigin: 7
+});
 
 var preventDefault = function preventDefault(event) {
   return event.preventDefault();
@@ -26,7 +79,7 @@ var ResizeButton = function ResizeButton(_ref) {
     "aria-expanded": !isLeftSidebarCollapsed,
     "aria-label": label,
     type: "button",
-    css: resizeIconButtonCSS(isLeftSidebarCollapsed),
+    css: [resizeIconButtonStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
     "data-testid": testId // Prevents focus staying attached to the button
     // when pressed
     ,
@@ -34,7 +87,7 @@ var ResizeButton = function ResizeButton(_ref) {
   }, props), jsx(ChevronRight, {
     label: ""
   }), jsx("div", {
-    css: increaseHitArea
+    css: increaseHitAreaStyles
   }));
 };
 

package/dist/esm/components/resize-control/shadow.js

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { easeOut } from '@atlaskit/motion';
+import { useIsSidebarDragging } from '../../common/hooks';
+var colorStops = "\n    rgba(0, 0, 0, 0.2) 0px,\n    rgba(0, 0, 0, 0.2) 1px,\n    rgba(0, 0, 0, 0.1) 1px,\n    rgba(0, 0, 0, 0) 100%\n  ";
+var direction = 'to left';
+var transitionDuration = '0.22s';
+var shadowStyles = css({
+  width: 3,
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: -1,
+  background: "var(--ds-border, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
+  opacity: 0.5,
+  pointerEvents: 'none',
+  transitionDuration: transitionDuration,
+  transitionProperty: 'left, opacity, width',
+  transitionTimingFunction: easeOut
+});
+var draggingStyles = css({
+  width: 6,
+  left: -6,
+  background: "var(--ds-background-neutral-subtle, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
+  opacity: 0.8
+});
+
+var Shadow = function Shadow(_ref) {
+  var testId = _ref.testId;
+  var isDragging = useIsSidebarDragging();
+  return jsx("div", {
+    "data-testid": testId,
+    css: [shadowStyles, isDragging && draggingStyles]
+  });
+};
+
+export default Shadow;

package/dist/esm/components/skip-links/skip-link-components.js

@@ -6,10 +6,48 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
+import { N30A, N60A } from '@atlaskit/theme/colors';
 import { PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
 import { useSkipLinks } from '../../controllers';
-import { skipLinkStyles } from './styles';
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var prefersReducedMotionStyles = css(prefersReducedMotion());
+var skipLinkStyles = css({
+  margin: 10,
+  padding: '0.8rem 1rem',
+  position: 'fixed',
+  zIndex: -1,
+  left: -999999,
+  background: "var(--ds-surface-overlay, white)",
+  border: 'none',
+  borderRadius: 3,
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 10px ").concat(N30A, ", 0 0 20px -4px ").concat(N60A), ")"),
+  opacity: 0,
+
+  /* Do the transform when focused */
+  transform: 'translateY(-50%)',
+  transition: "transform 0.3s ".concat(easeOut),
+  ':focus-within': {
+    /**
+     * Max z-index is 2147483647. Skip links always be on top,
+     * but giving a few digits extra space just in case there's a future need.
+     */
+    zIndex: 2147483640,
+    left: 0,
+    opacity: 1,
+    transform: 'translateY(0%)'
+  }
+});
+var skipLinkListStyles = css({
+  marginTop: 4,
+  paddingLeft: 0,
+  listStylePosition: 'outside',
+  listStyleType: 'none'
+});
+var skipLinkListItemStyles = css({
+  marginTop: 0
+});
 
 var assignIndex = function assignIndex(num, arr) {
   if (!arr.includes(num)) {
@@ -76,9 +114,11 @@ export var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
   return jsx("div", {
     onFocus: attachEscHandler,
     onBlur: removeEscHandler,
-    css: skipLinkStyles,
+    css: [skipLinkStyles, prefersReducedMotionStyles],
     "data-skip-link-wrapper": true
-  }, jsx("h5", null, skipLinksLabel), jsx("ol", null, sortSkipLinks(skipLinksData).map(function (_ref2) {
+  }, jsx("h5", null, skipLinksLabel), jsx("ol", {
+    css: skipLinkListStyles
+  }, sortSkipLinks(skipLinksData).map(function (_ref2) {
     var id = _ref2.id,
         skipLinkTitle = _ref2.skipLinkTitle;
     return jsx(SkipLink, {
@@ -130,7 +170,9 @@ export var SkipLink = function SkipLink(_ref3) {
       children = _ref3.children,
       isFocusable = _ref3.isFocusable,
       title = _ref3.title;
-  return jsx("li", null, jsx("a", {
+  return jsx("li", {
+    css: skipLinkListItemStyles
+  }, jsx("a", {
     tabIndex: isFocusable ? 0 : -1,
     href: href,
     onClick: focusTargetRef(href),

package/dist/esm/components/slots/banner.js

@@ -3,12 +3,23 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { jsx } from '@emotion/core';
-import { DEFAULT_BANNER_HEIGHT, VAR_BANNER_HEIGHT } from '../../common/constants';
+import { css, jsx } from '@emotion/core';
+import { BANNER, BANNER_HEIGHT, DEFAULT_BANNER_HEIGHT, LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, VAR_BANNER_HEIGHT } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';
+import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
-import { bannerStyles } from './styles';
+var bannerStyles = css({
+  height: BANNER_HEIGHT,
+  gridArea: BANNER
+});
+var bannerFixedStyles = css({
+  position: 'fixed',
+  zIndex: 2,
+  top: 0,
+  right: RIGHT_PANEL_WIDTH,
+  left: LEFT_PANEL_WIDTH
+});
 
 var Banner = function Banner(props) {
   var children = props.children,
@@ -25,17 +36,21 @@ var Banner = function Banner(props) {
     publishGridState(_defineProperty({}, VAR_BANNER_HEIGHT, bannerHeight));
     return function () {
       publishGridState(_defineProperty({}, VAR_BANNER_HEIGHT, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [bannerHeight]);
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
-    css: bannerStyles(isFixed),
-    "data-testid": testId,
-    id: id
-  }, getPageLayoutSlotSelector('banner')), jsx(SlotDimensions, {
-    variableName: VAR_BANNER_HEIGHT,
-    value: bannerHeight
-  }), children);
+  return jsx(SlotFocusRing, null, function (_ref) {
+    var className = _ref.className;
+    return jsx("div", _extends({
+      css: [bannerStyles, isFixed && bannerFixedStyles],
+      className: className,
+      "data-testid": testId,
+      id: id
+    }, getPageLayoutSlotSelector('banner')), jsx(SlotDimensions, {
+      variableName: VAR_BANNER_HEIGHT,
+      value: bannerHeight
+    }), children);
+  });
 };
 
 export default Banner;