@availity/mui-tabs 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.1](https://github.com/Availity/element/compare/@availity/mui-tabs@0.1.0...@availity/mui-tabs@0.1.1) (2023-08-16)
+
+
+### Bug Fixes
+
+* **mui-tabs:** fix invalid ARIA attributes in Tab stories ([483b1ad](https://github.com/Availity/element/commit/483b1ad0fd30025cbce96e03dec0e496467f75ef))
+
 ## 0.1.0 (2023-07-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-tabs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Availity MUI Tabs Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/Tab.stories.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { Box, Typography } from '@mui/material';
 import { Tabs } from './Tabs';
 import { Tab, TabProps } from './Tab';
 
@@ -22,17 +23,46 @@ function a11yProps(index: number) {
 
 export const _Tab: StoryObj<typeof Tab> = {
   render: (args: TabProps) => {
+    interface TabPanelProps {
+      children?: React.ReactNode;
+      index: number;
+      value: number;
+    }
     const [value, setValue] = useState(0);
 
     const handleChange = (event: React.SyntheticEvent, newValue: number) => {
       setValue(newValue);
     };
+    function CustomTabPanel(props: TabPanelProps) {
+      const { value, index, ...other } = props;
+
+      return (
+        <div
+          role="tabpanel"
+          hidden={value !== index}
+          id={`simple-tabpanel-${index}`}
+          aria-labelledby={`simple-tab-${index}`}
+          {...other}
+        >
+          {value === index && (
+            <Box sx={{ p: 3 }}>
+              <Typography>Hello from panel {index}</Typography>
+            </Box>
+          )}
+        </div>
+      );
+    }
     return (
-      <Tabs value={value} onChange={handleChange}>
-        <Tab label="Item One" {...args} {...a11yProps(0)} />
-        <Tab label="Item Two" {...args} {...a11yProps(1)} />
-        <Tab label="Item Three" {...args} {...a11yProps(2)} disabled />
-      </Tabs>
+      <>
+        <Tabs value={value} onChange={handleChange}>
+          <Tab label="Item One" {...args} {...a11yProps(0)} />
+          <Tab label="Item Two" {...args} {...a11yProps(1)} />
+          <Tab label="Item Three" {...args} {...a11yProps(2)} disabled />
+        </Tabs>
+        <CustomTabPanel value={value} index={0} />
+        <CustomTabPanel value={value} index={1} />
+        <CustomTabPanel value={value} index={2} />
+      </>
     );
   },
   args: {},

package/src/lib/TabList.stories.tsx

@@ -5,6 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { TabList, TabListProps } from './TabList';
 import { Tab } from './Tab';
 import { TabContext } from './TabContext';
+import { TabPanel } from './TabPanel';
 
 const meta: Meta<typeof TabList> = {
   title: 'Components/Tabs/TabList',
@@ -28,6 +29,9 @@ export const _TabList: StoryObj<typeof TabList> = {
           <Tab label="Item Two" value="2" />
           <Tab label="Item Three" value="3" />
         </TabList>
+        <TabPanel value="1" children={`Hello from Panel ${value}`} />
+        <TabPanel value="2" children={`Hello from Panel ${value}`} />
+        <TabPanel value="3" children={`Hello from Panel ${value}`} />
       </TabContext>
     );
   },

package/src/lib/Tabs.stories.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { Box, Typography } from '@mui/material';
 import { Tabs, TabsProps } from './Tabs';
 import { Tab } from './Tab';
 
@@ -22,17 +23,46 @@ function a11yProps(index: number) {
 
 export const _Tabs: StoryObj<typeof Tabs> = {
   render: (args: TabsProps) => {
+    interface TabPanelProps {
+      children?: React.ReactNode;
+      index: number;
+      value: number;
+    }
     const [value, setValue] = useState(0);
 
     const handleChange = (event: React.SyntheticEvent, newValue: number) => {
       setValue(newValue);
     };
+    function CustomTabPanel(props: TabPanelProps) {
+      const { value, index, ...other } = props;
+
+      return (
+        <div
+          role="tabpanel"
+          hidden={value !== index}
+          id={`simple-tabpanel-${index}`}
+          aria-labelledby={`simple-tab-${index}`}
+          {...other}
+        >
+          {value === index && (
+            <Box sx={{ p: 3 }}>
+              <Typography>Hello from panel {index}</Typography>
+            </Box>
+          )}
+        </div>
+      );
+    }
     return (
-      <Tabs {...args} value={value} onChange={handleChange}>
-        <Tab label="Item One" {...a11yProps(0)} />
-        <Tab label="Item Two" {...a11yProps(1)} />
-        <Tab label="Item Three" {...a11yProps(2)} />
-      </Tabs>
+      <>
+        <Tabs value={value} onChange={handleChange} {...args}>
+          <Tab label="Item One" {...a11yProps(0)} />
+          <Tab label="Item Two" {...a11yProps(1)} />
+          <Tab label="Item Three" {...a11yProps(2)} disabled />
+        </Tabs>
+        <CustomTabPanel value={value} index={0} />
+        <CustomTabPanel value={value} index={1} />
+        <CustomTabPanel value={value} index={2} />
+      </>
     );
   },
 };