refactor(anchor-navigation): remove style override props

BREAKING CHANGE:
Fixes FE-2758

src/components/anchor-navigation/anchor-navigation-item.component.js

@@ -5,11 +5,8 @@ import PropTypes from "prop-types";
 import { StyledNavigationItem } from "./anchor-navigation.style";
 
 const AnchorNavigationItem = React.forwardRef(
-  (
-    { children, onKeyDown, onClick, href, tabIndex, isSelected, styleOverride },
-    ref
-  ) => (
-    <StyledNavigationItem isSelected={isSelected} styleOverride={styleOverride}>
+  ({ children, onKeyDown, onClick, href, tabIndex, isSelected }, ref) => (
+    <StyledNavigationItem isSelected={isSelected}>
       <a
         onKeyDown={onKeyDown}
         onClick={onClick}
@@ -36,8 +33,6 @@ AnchorNavigationItem.propTypes = {
   tabIndex: PropTypes.number,
   /** Indicates if component is selected */
   isSelected: PropTypes.bool,
-  /** Allows to override existing component styles */
-  styleOverride: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /** Reference to the section html element meant to be shown   */
   target: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
 };

src/components/anchor-navigation/anchor-navigation-item.d.ts

@@ -10,8 +10,6 @@ export interface AnchorNavigationItemProps {
   onClick?: (ev: React.MouseEvent<HTMLAnchorElement>) => void;
   /** OnKeyDown handler */
   onKeyDown?: (ev: React.KeyboardEvent<HTMLAnchorElement>) => void;
-  /** Allows to override existing component styles */
-  styleOverride?: () => object | object;
   /** tabIndex passed to the anchor element */
   tabIndex?: number;
   /** Reference to the section html element meant to be shown   */

src/components/anchor-navigation/anchor-navigation.component.js

@@ -9,21 +9,11 @@ import {
   StyledContent,
 } from "./anchor-navigation.style";
 import AnchorNavigationItem from "./anchor-navigation-item.component";
-import Logger from "../../utils/logger/logger";
 
 const SECTION_VISIBILITY_OFFSET = 200;
 const SCROLL_THROTTLE = 100;
 
-let deprecatedWarnTriggered = false;
-
-const AnchorNavigation = ({ children, stickyNavigation, styleOverride }) => {
-  if (!deprecatedWarnTriggered) {
-    deprecatedWarnTriggered = true;
-    // eslint-disable-next-line max-len
-    Logger.deprecate(
-      "`styleOverride` that is used in the `AnchorNavigation` component is deprecated and will soon be removed."
-    );
-  }
+const AnchorNavigation = ({ children, stickyNavigation }) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const sectionRefs = useRef(
@@ -145,15 +135,10 @@ const AnchorNavigation = ({ children, stickyNavigation, styleOverride }) => {
   };
 
   return (
-    <StyledAnchorNavigation
-      ref={contentRef}
-      data-component="anchor-navigation"
-      styleOverride={styleOverride.root}
-    >
+    <StyledAnchorNavigation ref={contentRef} data-component="anchor-navigation">
       <StyledNavigation
         ref={navigationRef}
         data-element="anchor-sticky-navigation"
-        styleOverride={styleOverride.navigation}
       >
         {React.Children.map(stickyNavigation.props.children, (child, index) =>
           React.cloneElement(child, {
@@ -165,9 +150,7 @@ const AnchorNavigation = ({ children, stickyNavigation, styleOverride }) => {
           })
         )}
       </StyledNavigation>
-      <StyledContent styleOverride={styleOverride.content}>
-        {children}
-      </StyledContent>
+      <StyledContent>{children}</StyledContent>
     </StyledAnchorNavigation>
   );
 };
@@ -189,16 +172,6 @@ AnchorNavigation.propTypes = {
 
     return error;
   },
-  /** Allows to override existing component styles */
-  styleOverride: PropTypes.shape({
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    navigation: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
-};
-
-AnchorNavigation.defaultProps = {
-  styleOverride: {},
 };
 
 export default AnchorNavigation;

src/components/anchor-navigation/anchor-navigation.d.ts

@@ -4,12 +4,6 @@ export interface AnchorNavigationProps {
   children?: React.ReactNode;
   /** The AnchorNavigationItems components to be rendered in the sticky navigation */
   stickyNavigation?: React.ReactNode;
-  /** Allows to override existing component styles */
-  styleOverride?: {
-    root?: () => object | object;
-    navigation?: () => object | object;
-    content?: () => object | object;
-  };
 }
 
 declare function AnchorNavigation(props: AnchorNavigationProps): JSX.Element;

src/components/anchor-navigation/anchor-navigation.spec.js

@@ -14,7 +14,6 @@ import {
 import {
   StyledAnchorNavigation,
   StyledNavigation,
-  StyledContent,
   StyledNavigationItem,
 } from "./anchor-navigation.style";
 
@@ -49,48 +48,6 @@ describe("AnchorNavigation", () => {
   let ref4;
   let ref5;
 
-  const render = (props) => {
-    ref1 = React.createRef();
-    ref2 = React.createRef();
-    ref3 = React.createRef();
-    ref4 = React.createRef();
-    ref5 = React.createRef();
-
-    function mockFunction(options) {
-      return { options, element: this };
-    }
-    scrollIntoViewMock = jest.fn().mockImplementation(mockFunction);
-
-    Element.prototype.scrollIntoView = scrollIntoViewMock;
-
-    wrapper = mount(
-      <AnchorNavigation
-        stickyNavigation={
-          <>
-            <AnchorNavigationItem target={ref1}>First</AnchorNavigationItem>
-            <AnchorNavigationItem target={ref2}>Second</AnchorNavigationItem>
-            <AnchorNavigationItem target={ref3}>Third</AnchorNavigationItem>
-            <AnchorNavigationItem target={ref4}>
-              The slighly longer than expected fourth navigation item
-            </AnchorNavigationItem>
-            <AnchorNavigationItem target={ref5}>Fifth</AnchorNavigationItem>
-          </>
-        }
-        {...props}
-      >
-        <Content ref={ref1} title="First section" />
-        <AnchorSectionDivider />
-        <Content ref={ref2} title="Second section" />
-        <AnchorSectionDivider />
-        <Content ref={ref3} title="Third section" noTextbox />
-        <AnchorSectionDivider />
-        <Content ref={ref4} title="Fourth section" />
-        <AnchorSectionDivider />
-        <Content ref={ref5} title="Fifth section" />
-      </AnchorNavigation>
-    );
-  };
-
   const renderAttached = (props) => {
     ref1 = React.createRef();
     ref2 = React.createRef();
@@ -356,50 +313,4 @@ describe("AnchorNavigation", () => {
       wrapper.find(StyledNavigationItem).at(0)
     ).not.toHaveStyleRule("background-color", { modifier: "a:hover" });
   });
-
-  describe("style overrides", () => {
-    const randomStyleObject = {
-      backgroundColor: "red",
-      display: "flex",
-      fontSize: "200px",
-    };
-    beforeEach(() => {
-      render({
-        styleOverride: {
-          root: randomStyleObject,
-          navigation: randomStyleObject,
-          content: randomStyleObject,
-        },
-      });
-    });
-
-    it("renders root element with properly assigned styles", () => {
-      assertStyleMatch(randomStyleObject, wrapper.find(StyledAnchorNavigation));
-    });
-
-    it("renders navigation container with properly assigned styles", () => {
-      assertStyleMatch(randomStyleObject, wrapper.find(StyledNavigation));
-    });
-
-    it("renders content container with properly assigned styles", () => {
-      assertStyleMatch(randomStyleObject, wrapper.find(StyledContent));
-    });
-
-    it("renders navigation item with properly assigned styles", () => {
-      const navItemWrapper = mount(
-        <AnchorNavigationItem styleOverride={randomStyleObject} />
-      );
-      assertStyleMatch(
-        randomStyleObject,
-        navItemWrapper.find(StyledNavigationItem)
-      );
-    });
-
-    it("renders section divider with properly assigned styles", () => {
-      const dividerWrapper = mount(
-        <AnchorSectionDivider styleOverride={randomStyleObject} />
-      );
-      assertStyleMatch(randomStyleObject, dividerWrapper);
-    });
-  });
 });

src/components/anchor-navigation/anchor-navigation.stories.js

@@ -139,60 +139,6 @@ export const InFullScreenDialog = () => {
   );
 };
 
-export const WithOverridenStyles = () => {
-  const ref1 = useRef();
-  const ref2 = useRef();
-  const ref3 = useRef();
-  const ref4 = useRef();
-  const ref5 = useRef();
-
-  return (
-    <AnchorNavigation
-      styleOverride={{
-        root: { backgroundColor: "#F2F5F6" },
-        content: { marginLeft: 96, marginRight: 96 },
-        navigation: { maxWidth: 450, top: 100, marginTop: 24 },
-      }}
-      stickyNavigation={
-        <>
-          <AnchorNavigationItem target={ref1}>First</AnchorNavigationItem>
-          <AnchorNavigationItem target={ref2}>Second</AnchorNavigationItem>
-          <AnchorNavigationItem target={ref3}>Third</AnchorNavigationItem>
-          <AnchorNavigationItem target={ref4}>
-            Navigation item with very long label
-          </AnchorNavigationItem>
-          <AnchorNavigationItem
-            target={ref5}
-            styleOverride={{ textDecoration: "underline" }}
-          >
-            Fifth
-          </AnchorNavigationItem>
-        </>
-      }
-    >
-      <div ref={ref1}>
-        <Content title="First section" />
-      </div>
-      <AnchorSectionDivider styleOverride={{ backgroundColor: "white" }} />
-      <div ref={ref2}>
-        <Content title="Second section" />
-      </div>
-      <AnchorSectionDivider />
-      <div ref={ref3}>
-        <Content noTextbox title="Third section" />
-      </div>
-      <AnchorSectionDivider />
-      <div ref={ref4}>
-        <Content title="Fourth section" />
-      </div>
-      <AnchorSectionDivider />
-      <div ref={ref5}>
-        <Content title="Fifth section" />
-      </div>
-    </AnchorNavigation>
-  );
-};
-
 Default.story = {
   name: "default",
   parameters: {
@@ -210,12 +156,3 @@ InFullScreenDialog.story = {
     },
   },
 };
-
-WithOverridenStyles.story = {
-  name: "with overriden styles",
-  parameters: {
-    chromatic: {
-      disable: false,
-    },
-  },
-};

src/components/anchor-navigation/anchor-navigation.stories.mdx

@@ -84,12 +84,7 @@ const MyComponent = () => (
   <Story id="test-anchornavigation--in-full-screen-dialog" name="InFullScreenDialog" />
 </Preview>
 
-### With overriden styles
-`AnchorNavigation`, `AnchorNavigationItem` and `AnchorSectionDivider` styles can be easily overriden by providing `styleOverride` prop with proper structure as defined in propTypes.
-
-<Story id="test-anchornavigation--with-overriden-styles" name="WithOverridenStyles" />
-
-## Props
+## Props:
 
 ### AnchorNavigation
 

src/components/anchor-navigation/anchor-navigation.style.js

@@ -6,8 +6,6 @@ const StyledAnchorNavigation = styled.div`
   display: flex;
   align-items: flex-start;
   width: 100%;
-
-  ${({ styleOverride }) => styleOverride}
 `;
 
 const StyledNavigation = styled.ul`
@@ -18,15 +16,11 @@ const StyledNavigation = styled.ul`
   margin: 0;
   padding: 0;
   max-width: 240px;
-
-  ${({ styleOverride }) => styleOverride}
 `;
 
 const StyledContent = styled.div`
   flex: 1;
   margin-left: 32px;
-
-  ${({ styleOverride }) => styleOverride}
 `;
 
 const StyledNavigationItem = styled.li`
@@ -70,17 +64,13 @@ const StyledNavigationItem = styled.li`
         border-left-color: ${theme.colors.primary};
       `}
   }
-
-  ${({ styleOverride }) => styleOverride}
 `;
 
 const StyledAnchorDivider = styled.div.attrs({
   "data-element": "anchor-navigation-divider",
 })`
   background-color: ${({ theme }) => theme.anchorNavigation.divider};
   height: 1px;
-
-  ${({ styleOverride }) => styleOverride}
 `;
 
 StyledAnchorNavigation.defaultProps = {

src/components/anchor-navigation/index.d.ts

@@ -1,3 +1,2 @@
-export { default as AnchorNavigation } from "./anchor-navigation";
-export { default as AnchorNavigationItem } from "./anchor-navigation-item";
-export { default as AnchorSectionDivider } from "./anchor-section-divider";
+export { default as AnchorNavigation } from './anchor-navigation';
+export { default as AnchorNavigationItem } from './anchor-navigation-item';

src/components/anchor-navigation/index.js

@@ -1,3 +1,3 @@
 export { default as AnchorNavigation } from "./anchor-navigation.component";
 export { default as AnchorNavigationItem } from "./anchor-navigation-item.component";
-export { default as AnchorSectionDivider } from "./anchor-section-divider.component";
+export { StyledAnchorDivider as AnchorSectionDivider } from "./anchor-navigation.style";