From 33ccf180b8d1c7fb9326c5753c4a6bcff50c3e62 Mon Sep 17 00:00:00 2001
From: Jessie Wei <jeswei@amazon.com>
Date: Tue, 21 Sep 2021 10:41:56 +1000
Subject: [PATCH] feat(Tabs): Allows disable of padding in the content area

---
 src/components/Tabs/index.stories.tsx | 26 +++++++++++++++++++++++++
 src/components/Tabs/index.test.tsx    |  5 +++++
 src/components/Tabs/index.tsx         | 28 ++++++++++++++++++---------
 3 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/components/Tabs/index.stories.tsx b/src/components/Tabs/index.stories.tsx
index 3d4f4311..9c90b1f2 100644
--- a/src/components/Tabs/index.stories.tsx
+++ b/src/components/Tabs/index.stories.tsx
@@ -15,6 +15,7 @@
  ******************************************************************************************************************** */
 import React from 'react';
 import Tabs from '.';
+import Box from '../../layouts/Box';
 import { action } from '@storybook/addon-actions';
 
 export default {
@@ -44,3 +45,28 @@ const tabs = [
 export const Default = () => <Tabs tabs={tabs} onChange={action('onChange')} />;
 
 export const Container = () => <Tabs tabs={tabs} onChange={action('onChange')} activeId="second" variant="container" />;
+
+export const NoPaddingContainer = () => {
+    const tabs = [
+        {
+            label: 'First tab label',
+            id: 'first',
+            content: <Box width="100%" height="300px" bgcolor="primary.main" />,
+        },
+        {
+            label: 'Second tab label',
+            id: 'second',
+            content: <Box width="100%" height="300px" bgcolor="secondary.main" />,
+        },
+    ];
+
+    return (
+        <Tabs
+            tabs={tabs}
+            onChange={action('onChange')}
+            paddingContentArea={false}
+            activeId="second"
+            variant="container"
+        />
+    );
+};
diff --git a/src/components/Tabs/index.test.tsx b/src/components/Tabs/index.test.tsx
index 60a18915..7cf399e5 100644
--- a/src/components/Tabs/index.test.tsx
+++ b/src/components/Tabs/index.test.tsx
@@ -59,6 +59,11 @@ describe('Tabs', () => {
         expect(getByText(tabs[0].content)).toBeVisible();
     });
 
+    it('renders with container variant and without padding in the content area', () => {
+        const { getByText } = render(<Tabs tabs={tabs} variant="container" paddingContentArea={false} />);
+        expect(getByText(tabs[0].content)).toBeVisible();
+    });
+
     it('disables a tab', () => {
         const props = {
             tabs: [
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index c1c032ab..a2663e35 100755
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -63,7 +63,12 @@ export interface TabsProps {
      * - container: version with borders, designed to be used along with other containers
      */
     variant?: 'default' | 'container';
-    /** Fired whenever the user selects a different tab. The event detail contains the current activeTabId. */
+    /**
+     * Whether to render padding within the content area
+     * */
+    paddingContentArea?: boolean;
+    /**
+     * Fired whenever the user selects a different tab. The event detail contains the current activeTabId. */
     onChange?: (activeTabId: string) => void;
 }
 
@@ -71,14 +76,13 @@ interface TabPanelProps {
     children?: React.ReactNode;
     index: number;
     value: number;
+    paddingContentArea: boolean;
 }
 
-function TabPanel(props: TabPanelProps) {
-    const { children, value, index } = props;
-
+function TabPanel({ children, value, index, paddingContentArea }: TabPanelProps) {
     return (
         <Typography component="div" role="tabpanel" hidden={value !== index} id={`tabpanel-${index}`}>
-            <Box py={3}>{children}</Box>
+            <Box py={paddingContentArea ? 3 : undefined}>{children}</Box>
         </Typography>
     );
 }
@@ -86,11 +90,17 @@ function TabPanel(props: TabPanelProps) {
 /**
  * Use tabs for organizing discrete blocks of information.
  */
-const Tabs = ({ tabs, activeId = '', variant = 'default', onChange }: TabsProps): ReactElement => {
+const Tabs = ({
+    tabs,
+    activeId = '',
+    variant = 'default',
+    paddingContentArea = true,
+    onChange,
+}: TabsProps): ReactElement => {
     const classes = useStyles({});
     const tabIndex = tabs.findIndex((tab) => tab.id === activeId);
     const [value, setValue] = React.useState(tabIndex === -1 ? 0 : tabIndex);
-    const handleChange = (event: React.ChangeEvent<{}>, index: number) => {
+    const handleChange = (_event: React.ChangeEvent<{}>, index: number) => {
         onChange?.(tabs[index].id);
         setValue(index);
     };
@@ -111,13 +121,13 @@ const Tabs = ({ tabs, activeId = '', variant = 'default', onChange }: TabsProps)
     );
 
     const tabContent = tabs.map((tab, idx) => (
-        <TabPanel key={tab.id} value={value} index={idx}>
+        <TabPanel key={tab.id} value={value} index={idx} paddingContentArea={paddingContentArea}>
             {tab.content}
         </TabPanel>
     ));
 
     return variant === 'container' ? (
-        <Container headerContent={headerContent} headerGutters={false}>
+        <Container headerContent={headerContent} headerGutters={false} gutters={paddingContentArea}>
             {tabContent}
         </Container>
     ) : (