refactor!: Remove 1.x.x and 2.x.x deprecated properties

src/components/Accordion/Accordion.stories.tsx

@@ -112,7 +112,7 @@ export const multiselectable = (): React.ReactElement => (
   <Accordion items={testItems} multiselectable={true} />
 )
 
-const customTestItems = [
+const customTestItems: AccordionItemProps[] = [
   {
     title: (
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -130,6 +130,7 @@ const customTestItems = [
     expanded: false,
     id: '123',
     className: 'myCustomAccordionItem',
+    headingLevel: 'h4',
   },
   {
     title: 'Second Amendment',
@@ -148,6 +149,7 @@ const customTestItems = [
     ),
     expanded: false,
     id: 'abc',
+    headingLevel: 'h4',
   },
   {
     title: 'Third Amendment',
@@ -160,6 +162,7 @@ const customTestItems = [
     ),
     expanded: false,
     id: 'def',
+    headingLevel: 'h4',
   },
 ]
 

src/components/Accordion/Accordion.test.tsx

@@ -2,8 +2,6 @@ import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 
 import { Accordion, AccordionItemProps } from './Accordion'
-import { deprecationWarning } from '../../deprecation'
-jest.mock('../../deprecation')
 
 const firstAmendment = (
   <p>
@@ -102,9 +100,14 @@ describe('Accordion component', () => {
   })
 
   it('renders a header and content for each item', () => {
-    const { getByTestId } = render(<Accordion items={testItems} />)
+    const { getByTestId, getAllByRole } = render(
+      <Accordion items={testItems} />
+    )
     const accordionEl = getByTestId('accordion')
+    const headings = getAllByRole('heading', { level: 4 })
+
     expect(accordionEl.childElementCount).toBe(testItems.length * 2)
+    expect(headings.length).toEqual(testItems.length)
   })
 
   it('no items are open by default', () => {
@@ -257,6 +260,7 @@ describe('Accordion component', () => {
         content: thirdAmendment,
         expanded: false,
         id: 'def',
+        headingLevel: 'h4',
       },
       {
         title: 'Fourth Amendment',
@@ -327,77 +331,49 @@ describe('Accordion component', () => {
       )
     })
   })
-  describe('custom headingLevel for AccordionItems', () => {
-    it('passes on the headingLevel', () => {
-      const customTestItems: AccordionItemProps[] = [
-        {
-          title: 'First Amendment',
-          content: firstAmendment,
-          expanded: false,
-          headingLevel: 'h2',
-          id: '123',
-          className: 'myCustomAccordionItem',
-        },
-        {
-          title: 'Second Amendment',
-          content: secondAmendment,
-          expanded: false,
-          headingLevel: 'h2',
-
-          id: 'abc',
-        },
-        {
-          title: 'Third Amendment',
-          content: thirdAmendment,
-          expanded: false,
-          headingLevel: 'h2',
-          id: 'def',
-        },
-      ]
-
-      const { getAllByRole } = render(<Accordion items={customTestItems} />)
-
-      const headings = getAllByRole('heading', { level: 2 })
-      expect(headings.length).toEqual(customTestItems.length)
-    })
-
-    it('uses headingLevel h4 by default', () => {
-      const { getAllByRole } = render(<Accordion items={testItems} />)
-
-      const headings = getAllByRole('heading', { level: 4 })
-      expect(headings.length).toEqual(testItems.length)
-    })
-  })
 
-  describe('default headingLevel for AccordionItems', () => {
-    it('uses the default headingLevel and warns deprecation', () => {
-      const customTestItems: AccordionItemProps[] = [
-        {
-          title: 'First Amendment',
-          content: firstAmendment,
-          expanded: false,
-          id: '123',
-          className: 'myCustomAccordionItem',
-        },
-        {
-          title: 'Second Amendment',
-          content: secondAmendment,
-          expanded: false,
-          id: 'abc',
-        },
-        {
-          title: 'Third Amendment',
-          content: thirdAmendment,
-          expanded: false,
-          id: 'def',
-        },
-      ]
-
-      const { getAllByRole } = render(<Accordion items={customTestItems} />)
-
-      const headings = getAllByRole('heading', { level: 4 })
-      expect(headings.length).toEqual(customTestItems.length)
-      expect(deprecationWarning).toHaveBeenCalledTimes(customTestItems.length)
-    })
+  describe('custom headingLevel for AccordionItems', () => {
+    const scenarios: [HeadingLevel, number][] = [
+      ['h1', 1],
+      ['h2', 2],
+      ['h3', 3],
+      ['h4', 4],
+      ['h5', 5],
+      ['h6', 6],
+    ]
+    it.each(scenarios)(
+      'can render with headingLevel %s',
+      (headingLevel, expectedLevel) => {
+        const customTestItems: AccordionItemProps[] = [
+          {
+            title: 'First Amendment',
+            content: firstAmendment,
+            expanded: false,
+            headingLevel,
+            id: '123',
+            className: 'myCustomAccordionItem',
+          },
+          {
+            title: 'Second Amendment',
+            content: secondAmendment,
+            expanded: false,
+            headingLevel,
+
+            id: 'abc',
+          },
+          {
+            title: 'Third Amendment',
+            content: thirdAmendment,
+            expanded: false,
+            headingLevel,
+            id: 'def',
+          },
+        ]
+
+        const { getAllByRole } = render(<Accordion items={customTestItems} />)
+        const headings = getAllByRole('heading', { level: expectedLevel })
+        expect(headings.length).toEqual(customTestItems.length)
+      }
+    )
   })
 })

src/components/Accordion/Accordion.tsx

@@ -1,14 +1,13 @@
 import React, { useState } from 'react'
 import classnames from 'classnames'
-import { deprecationWarning } from '../../deprecation'
 
 export interface AccordionItemProps {
   title: React.ReactNode | string
   content: React.ReactNode
   expanded: boolean
   id: string
   className?: string
-  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  headingLevel: HeadingLevel
   handleToggle?: (event: React.MouseEvent<HTMLButtonElement>) => void
 }
 
@@ -35,12 +34,7 @@ export const AccordionItem = ({
     className
   )
 
-  if (!headingLevel) {
-    deprecationWarning(
-      'Default headingLevel h4 has been deprecated. Please specify a heading level.'
-    )
-  }
-  const Heading = headingLevel || 'h4'
+  const Heading = headingLevel
 
   return (
     <>

src/components/Alert/Alert.stories.tsx

@@ -52,50 +52,50 @@ export const info = (): React.ReactElement => (
 
 export const slim = (): React.ReactElement => (
   <>
-    <Alert type="success" slim>
+    <Alert type="success" headingLevel="h4" slim>
       {testText}
     </Alert>
-    <Alert type="warning" slim>
+    <Alert type="warning" headingLevel="h4" slim>
       {testText}
     </Alert>
-    <Alert type="error" slim>
+    <Alert type="error" headingLevel="h4" slim>
       {testText}
     </Alert>
-    <Alert type="info" slim>
+    <Alert type="info" headingLevel="h4" slim>
       {testText}
     </Alert>
   </>
 )
 
 export const noIcon = (): React.ReactElement => (
   <>
-    <Alert type="success" noIcon>
+    <Alert type="success" headingLevel="h4" noIcon>
       {testText}
     </Alert>
-    <Alert type="warning" noIcon>
+    <Alert type="warning" headingLevel="h4" noIcon>
       {testText}
     </Alert>
-    <Alert type="error" noIcon>
+    <Alert type="error" headingLevel="h4" noIcon>
       {testText}
     </Alert>
-    <Alert type="info" noIcon>
+    <Alert type="info" headingLevel="h4" noIcon>
       {testText}
     </Alert>
   </>
 )
 
 export const slimNoIcon = (): React.ReactElement => (
   <>
-    <Alert type="success" slim noIcon>
+    <Alert type="success" headingLevel="h4" slim noIcon>
       {testText}
     </Alert>
-    <Alert type="warning" slim noIcon>
+    <Alert type="warning" headingLevel="h4" slim noIcon>
       {testText}
     </Alert>
-    <Alert type="error" slim noIcon>
+    <Alert type="error" headingLevel="h4" slim noIcon>
       {testText}
     </Alert>
-    <Alert type="info" slim noIcon>
+    <Alert type="info" headingLevel="h4" slim noIcon>
       {testText}
     </Alert>
   </>
@@ -113,6 +113,7 @@ export const withCTA = (): React.ReactElement => (
   <Alert
     type="warning"
     heading="Warning status"
+    headingLevel="h4"
     cta={
       <Button type="button" outline>
         Click here

src/components/Alert/Alert.test.tsx

@@ -2,22 +2,20 @@ import React from 'react'
 import { render } from '@testing-library/react'
 
 import { Alert } from './Alert'
-import { deprecationWarning } from '../../deprecation'
-jest.mock('../../deprecation')
 
 describe('Alert component', () => {
   beforeEach(() => {
     jest.clearAllMocks()
   })
 
   it('renders without errors', () => {
-    const { queryByTestId } = render(<Alert type="success" />)
+    const { queryByTestId } = render(<Alert type="success" headingLevel="h4" />)
     expect(queryByTestId('alert')).toBeInTheDocument()
   })
 
   it('renders children in <p> tag by default', () => {
     const { queryByTestId } = render(
-      <Alert type="success" className="myClass">
+      <Alert type="success" headingLevel="h4" className="myClass">
         Test children
       </Alert>
     )
@@ -27,7 +25,7 @@ describe('Alert component', () => {
 
   it('renders validation style alert', () => {
     const { queryByTestId } = render(
-      <Alert type="success" validation className="myClass">
+      <Alert type="success" validation headingLevel="h4" className="myClass">
         Test children
       </Alert>
     )
@@ -38,28 +36,43 @@ describe('Alert component', () => {
 
   it('accepts className prop', () => {
     const { queryByTestId } = render(
-      <Alert type="success" className="myClass" />
+      <Alert type="success" headingLevel="h4" className="myClass" />
     )
     expect(queryByTestId('alert')).toHaveClass('myClass')
   })
 
-  it('accepts a headingLevel', () => {
-    const { getByRole } = render(
-      <Alert type="success" headingLevel="h2" heading="Working Alert" />
+  describe('with custom heading levels', () => {
+    const scenarios: [HeadingLevel, number][] = [
+      ['h1', 1],
+      ['h2', 2],
+      ['h3', 3],
+      ['h4', 4],
+      ['h5', 5],
+      ['h6', 6],
+    ]
+    it.each(scenarios)(
+      'can render with headingLevel %s',
+      (headingLevel, expectedLevel) => {
+        const { getByRole } = render(
+          <Alert
+            type="success"
+            headingLevel={headingLevel}
+            heading="Working Alert"
+          />
+        )
+        expect(
+          getByRole('heading', { level: expectedLevel })
+        ).toBeInTheDocument()
+      }
     )
-    expect(getByRole('heading', { level: 2 })).toBeInTheDocument()
-  })
-
-  it('uses heading level 4 by default and warns deprecation', () => {
-    const { getByRole } = render(<Alert type="info" heading="Working Alert" />)
-    expect(getByRole('heading', { level: 4 })).toBeInTheDocument()
-    expect(deprecationWarning).toHaveBeenCalledTimes(1)
   })
 
   describe('with a CTA', () => {
     it('renders the CTA', () => {
       const testCTA = <button type="button">Click Here</button>
-      const { queryByText } = render(<Alert type="success" cta={testCTA} />)
+      const { queryByText } = render(
+        <Alert type="success" headingLevel="h4" cta={testCTA} />
+      )
       expect(queryByText('Click Here')).toBeInTheDocument()
     })
   })