Merge pull request #21 from savindi7/chore-fix-component-name

chore(react): update snapshots and refactor code
wso2 · Feb 14, 2023 · 8e5d523 · 8e5d523
2 parents 650c992 + 59365a5
commit 8e5d523
Show file tree

Hide file tree

Showing 19 changed files with 312 additions and 201 deletions.
diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts
@@ -33,7 +33,7 @@ enum StorybookCategories {
 export type Stories =
   | 'AppBar'
   | 'Avatar'
-  | 'ButtonDropdownMenu'
+  | 'UserDropdownMenu'
   | 'Header'
   | 'Box'
   | 'Button'
@@ -103,8 +103,8 @@ const StoryConfig: StorybookConfig = {
   Button: {
     hierarchy: `${StorybookCategories.Inputs}/Button`,
   },
-  ButtonDropdownMenu: {
-    hierarchy: `${StorybookCategories.Navigation}/Button Dropdown Menu`,
+  UserDropdownMenu: {
+    hierarchy: `${StorybookCategories.Navigation}/User Dropdown Menu`,
   },
   ColorModeToggle: {
     hierarchy: `${StorybookCategories.Theme}/Color Mode Toggle`,

diff --git a/packages/react/src/components/AppBar/AppBar.stories.mdx b/packages/react/src/components/AppBar/AppBar.stories.mdx
@@ -17,6 +17,7 @@ export const Template = args => <AppBar {...args} />;
 
 - [Overview](#overview)
 - [Props](#props)
+- [Usage](#usage)
 
 ## Overview
 
@@ -33,3 +34,14 @@ The top App bar provides content and actions related to the current screen. It's
 ## Props
 
 <ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `AppBar` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`import AppBar from '@oxygen-ui/react/AppBar';\n`}
+/>
diff --git a/packages/react/src/components/Avatar/Avatar.stories.mdx b/packages/react/src/components/Avatar/Avatar.stories.mdx
@@ -17,7 +17,6 @@ export const Template = args => <Avatar {...args} />;
 - [Overview](#overview)
 - [Props](#props)
 - [Usage](#usage)
-- [Variants](#variants)
 
 ## Overview
 
@@ -35,3 +34,14 @@ The Avatar can be used to mainly display profile pictures of users and can be us
 ## Props
 
 <ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Avatar` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`import Avatar from '@oxygen-ui/react/Avatar';\n`}
+/>
diff --git a/packages/react/src/components/Avatar/__tests__/Avatar.test.tsx b/packages/react/src/components/Avatar/__tests__/Avatar.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import Avatar from '../Avatar';
+
+describe('Avatar', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<Avatar />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Avatar />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/react/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/packages/react/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault oxygen-ui-avatar css-woe6xp-MuiAvatar-root"
+    >
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
+        data-testid="PersonIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+        />
+      </svg>
+    </div>
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.stories.mdx b/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.stories.mdx
diff --git a/.../src/components/ButtonDropdownMenu/__tests__/__snapshots__/UserDropdownMenu.test.tsx.snap b/.../src/components/ButtonDropdownMenu/__tests__/__snapshots__/UserDropdownMenu.test.tsx.snap
diff --git a/packages/react/src/components/Header/Header.stories.mdx b/packages/react/src/components/Header/Header.stories.mdx
@@ -19,7 +19,6 @@ export const Template = args => <Header {...args} />;
 - [Overview](#overview)
 - [Props](#props)
 - [Usage](#usage)
-- [Variants](#variants)
 
 ## Overview
 
@@ -75,3 +74,14 @@ The Header provides content and actions related to the current screen. It's used
 ## Props
 
 <ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Header` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`import Header from '@oxygen-ui/react/Header';\n`}
+/>
diff --git a/packages/react/src/components/Header/Header.tsx b/packages/react/src/components/Header/Header.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {Box, IconButton, Toolbar, Typography, useMediaQuery} from '@mui/material';
+import {useMediaQuery} from '@mui/material';
 import {useColorScheme, useTheme, Theme} from '@mui/material/styles';
 import {Mode} from '@mui/system/cssVars/useCurrentColorScheme';
 import {ChevronDownIcon, HamburgerIcon, PowerIcon} from '@oxygen-ui/react-icons';
@@ -27,13 +27,14 @@ import {composeComponentDisplayName} from '../../utils';
 import './header.scss';
 import AppBar, {AppBarProps} from '../AppBar';
 import Avatar from '../Avatar';
+import Box from '../Box';
 import Button, {ButtonProps} from '../Button';
-import ButtonDropdownMenu, {ModeListInterface} from '../ButtonDropdownMenu';
+import IconButton from '../IconButton';
 import Link from '../Link';
+import Toolbar from '../Toolbar';
+import Typography from '../Typography';
+import UserDropdownMenu, {ModeList, UserTemplate} from '../UserDropdownMenu';
 
-/**
- * Interface for the Header component props.
- */
 export interface HeaderProps extends AppBarProps {
   /**
    * Brand information.
@@ -50,7 +51,7 @@ export interface HeaderProps extends AppBarProps {
   /**
    * List of modes.
    */
-  modes?: ModeListInterface[];
+  modes?: ModeList[];
   /**
    * Function to handle left navigation bar button toggle.
    */
@@ -61,32 +62,32 @@ export interface HeaderProps extends AppBarProps {
   user?: UserTemplate;
 }
 
-/**
- * Interface for the brand template.
- */
 export interface BrandTemplate {
+  /**
+   * Logo for the brand template.
+   */
   logo?: {
+    /**
+     * Desktop logo for the brand template.
+     */
     desktop?: ReactNode;
+    /**
+     * Mobile logo for the brand template.
+     */
     mobile?: ReactNode;
   };
+  /**
+   * Function on clicking on the brand logo and name.
+   */
   onClick?: () => void;
+  /**
+   * Title of the brand, portal name or company.
+   */
   title?: ReactNode;
 }
 
-/**
- * Interface for the logged user template.
- */
-export interface UserTemplate {
-  email?: string;
-  image?: string;
-  name?: string;
-}
-
 const COMPONENT_NAME: string = 'Header';
 
-/**
- * Header component.
- */
 const Header: FC<HeaderProps> & WithWrapperProps = (props: HeaderProps): ReactElement => {
   const {className, children, isLeftNavigationActive, brand, user, links, modes, onLeftNavigationTrigger, ...rest} =
     props;
@@ -114,7 +115,7 @@ const Header: FC<HeaderProps> & WithWrapperProps = (props: HeaderProps): ReactEl
       variant="outlined"
       elevation={0}
       className={classes}
-      role="navigation"
+      role="banner"
       {...rest}
     >
       <Toolbar>
@@ -126,16 +127,15 @@ const Header: FC<HeaderProps> & WithWrapperProps = (props: HeaderProps): ReactEl
         {brand && (
           <Box
             tabIndex={0}
-            component={brand.onClick ? Link : Box}
+            component={Boolean(brand.onClick) && Link}
             className={clsx('logo-box', {
               'with-link': Boolean(brand.onClick),
             })}
             onClick={brand.onClick}
-            underline="none"
             color="inherit"
           >
             <Box className="logo">{isMobile ? brand.logo.mobile ?? brand.logo.desktop : brand.logo.desktop}</Box>
-            <Typography variant="h6" component="h1" className="portal-name">
+            <Typography variant="h1" className="portal-name">
               {brand.title}
             </Typography>
           </Box>
@@ -165,9 +165,9 @@ const Header: FC<HeaderProps> & WithWrapperProps = (props: HeaderProps): ReactEl
           </>
         </Box>
         <Box className="dropdown-menu">
-          <ButtonDropdownMenu
+          <UserDropdownMenu
             user={user}
-            buttonProps={{
+            triggerOptions={{
               children: user?.name,
               color: 'inherit',
               endIcon: <ChevronDownIcon />,