Merge pull request #6379 from Sage/FE-5519-caroursel-deprication

docs(carousel): deprecation message for docs

src/components/carousel/carousel.component.tsx

@@ -5,6 +5,7 @@ import React, {
   useState,
   useMemo,
 } from "react";
+import Logger from "../../__internal__/utils/logger";
 import tagComponent, {
   TagProps,
 } from "../../__internal__/utils/helpers/tags/tags";
@@ -42,6 +43,8 @@ export interface CarouselProps extends TagProps {
   slideIndex?: number | string;
 }
 
+let deprecateWarnTriggered = false;
+
 const NEXT = "next";
 const PREVIOUS = "previous";
 
@@ -56,6 +59,13 @@ export const Carousel = ({
   slideIndex,
   ...props
 }: CarouselProps) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+    Logger.deprecate(
+      "The Carousel component is deprecated and will soon be removed."
+    );
+  }
+
   const [selectedSlideIndex, setSelectedSlideIndex] = useState(
     Number(slideIndex) || Number(initialSlideIndex)
   );

src/components/carousel/carousel.spec.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { shallow, mount, ReactWrapper } from "enzyme";
+import Logger from "__internal__/utils/logger";
 import { Carousel, CarouselProps } from "./carousel.component";
 import { rootTagTest } from "../../__internal__/utils/helpers/tags/tags-specs";
 import {
@@ -15,6 +16,8 @@ import { assertStyleMatch } from "../../__spec_helper__/test-utils";
 import { SlideStyle } from "./slide/slide.style";
 import Slide from "./slide";
 
+jest.mock("__internal__/utils/logger");
+
 function renderCarousel(props: CarouselProps, renderer = mount) {
   const children = props.children || [
     <Slide key="slide1" />,
@@ -26,6 +29,25 @@ function renderCarousel(props: CarouselProps, renderer = mount) {
 }
 
 describe("Carousel", () => {
+  describe("Deprecation warning", () => {
+    it("when user uses the component, a deprecation warning is raised only once in the console", () => {
+      const loggerSpy = jest.spyOn(Logger, "deprecate");
+      mount(
+        <>
+          <Carousel />
+          <Carousel />
+        </>
+      );
+
+      expect(loggerSpy).toHaveBeenCalledTimes(1);
+      expect(loggerSpy).toHaveBeenCalledWith(
+        "The Carousel component is deprecated and will soon be removed."
+      );
+
+      loggerSpy.mockRestore();
+    });
+  });
+
   describe("when the Previous button has been clicked", () => {
     let wrapper: ReactWrapper;
     const onSlideChangeSpy = jest.fn();

src/components/carousel/carousel.stories.mdx

@@ -1,14 +1,17 @@
 import { useState } from "react";
 import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+import DeprecationWarning from "../../../.storybook/docs-helpers/components/deprecation-warning"
 
 import { Carousel, Slide } from ".";
-
 import * as stories from "./carousel.stories";
 
 <Meta title="Carousel" parameters={{ info: { disable: true } }} />
 
 # Carousel
 
+<DeprecationWarning>
+We've deprecated Carousel. It's no longer available in the Design System and we recommend that you do not use it in new products.
+</DeprecationWarning>
 <a
   target="_blank"
   href="https://zeroheight.com/2ccf2b601/p/0701e2-carousel-whats-new/b/248536"