basic team page structure

src/components/Header/DesktopHeader.tsx

@@ -32,7 +32,9 @@ const DesktopHeader: FC = () => {
                 <Typography variant="h1">WiSE Japan</Typography>
                 <Typography variant="caption">{t('header.subtitle')}</Typography>
             </StyledNavLink>
-
+            <StyledNavLink to="/team" style={{ textDecoration: 'none', color: 'white' }}>
+                <Typography variant="overline">{t('header.team')}</Typography>
+            </StyledNavLink>
             <StyledNavLink to="/codeofconduct" style={{ textDecoration: 'none', color: 'white' }}>
                 <Typography variant="overline">{t('header.codeOfConduct')}</Typography>
             </StyledNavLink>

src/components/Header/__test__/DesktopToolbar.test.tsx

@@ -10,5 +10,11 @@ describe('Header', () => {
         expect(title).toBeVisible()
     })
 
-    it.todo('should show navigation links')
+    it('should show navigation links', async () => {
+        render(<DesktopHeader />)
+        const team = await screen.findByText('TEAM')
+        expect(team).toBeVisible()
+        const codeOfConduct = await screen.findByText('CODE OF CONDUCT')
+        expect(codeOfConduct).toBeVisible()
+    })
 })

src/components/SideDrawer/DrawerContents.tsx

@@ -7,17 +7,22 @@ import { useTheme } from '@mui/material/styles'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import StyledNavLink from '../StyledNavLink/StyledNavLink'
 import LocaleToggle from '../LocaleToggle/LocaleToggle'
+import { useTranslation } from 'react-i18next'
 
 const DrawerContents: FC = () => {
     const theme = useTheme()
+    const { t } = useTranslation();
     let navList = <></>
     if (useMediaQuery(theme.breakpoints.down('sm'))) {
         navList = (<>
             <ListItem>
                 <StyledNavLink to='/'>Home</StyledNavLink>
             </ListItem>
             <ListItem>
-                <StyledNavLink to='/codeofconduct'>Code of Conduct</StyledNavLink>
+                <StyledNavLink to='/team'>{t('sidebar.team')}</StyledNavLink>
+            </ListItem>
+            <ListItem>
+                <StyledNavLink to='/codeofconduct'>{t('sidebar.codeOfConduct')}</StyledNavLink>
             </ListItem>
             <Divider />
         </>)

src/i18n/en/translation.json

@@ -1,13 +1,21 @@
 {
     "header": {
         "codeOfConduct": "Code of Conduct",
-        "subtitle": "Women in Software Engineering Japan"
+        "subtitle": "Women in Software Engineering Japan",
+        "team": "Team"
     },
     "home": {
         "helloWorld": "✨ Hello World ✨",
         "joinUs": "✨ Join us on Slack ✨",
         "paragraph1": "Many of us were saddened to hear of the sudden closure of Women Who Code. There is a need for an organization to empower diverse women in technology careers in Tokyo and across Japan.",
         "paragraph2": "We are not giving up on this mission. Please join us in rebuilding community so that we can empower women in Japan in Software Engineering careers.",
         "paragraph3": "Our events target professional women in software careers with 2+ years of experience. Beginners to seasoned professionals are welcome to participate. While this organization focuses on women, all genders are welcome at our events. Software-adjacent roles like Data Science, Product, UI/UX, Machine Learning, etc., are welcome, too."
+    },
+    "sidebar": {
+        "codeOfConduct": "Code of Conduct",
+        "team": "Team"
+    },
+    "team": {
+        "title": "✨ Leadership Team ✨"
     }
-}
+}

src/i18n/ja/translation.json

@@ -1,13 +1,21 @@
 {
     "header": {
         "codeOfConduct": "行動規範",
-        "subtitle": "ウーマン・イン・ソフトウェアエンジニアリング"
+        "subtitle": "ウーマン・イン・ソフトウェアエンジニアリング",
+        "team": "チーム"
     },
     "home": {
         "helloWorld": "✨ Hello 世界 ✨",
         "joinUs": "✨ スラックに参加する ✨",
         "paragraph1": "Women Who Code(WWCode)の活動中止のニュースに対し、多くの人々が悲しみました。東京や日本全体で、IT業界の多様な女性を支援する組織が必要とされています。",
         "paragraph2": "この使命を諦めるつもりはありません。WWCodeの志を引き継ぐために、日本の女性がソフトウェアエンジニアとしてキャリアを築けるよう、私たちと共にコミュニティを再構築していきます。",
         "paragraph3": "私たちのイベントは、2年以上の経験を持つITプロフェッショナルの女性を中心に、新卒からベテランまでどなたでも参加できるイベントをやっています。この組織は女性に焦点を当てていますが、イベントにはすべてのジェンダーの方が歓迎されています。また、データサイエンティスト、プロダクトマネジャー、UI/UXデザイナー、機械学習エンジニアなどのソフトウェアに関連した役割も歓迎いたします。"
+    },
+    "sidebar": {
+        "codeOfConduct": "Code of Conduct",
+        "team": "チーム"
+    },
+    "team": {
+        "title": "✨ リーダーシップ・チーム ✨"
     }
-}
+}

src/routes/Router.tsx

@@ -8,6 +8,7 @@ import Home from './Home/Home'
 import BaseLayout from './BaseLayout'
 import NotFound from './NotFound/NotFound'
 import CodeOfConduct from './CodeOfConduct/CodeOfConduct'
+import Team from './Team/Team'
 
 const browserRouter = createHashRouter([{
     element: <BaseLayout />,
@@ -20,6 +21,10 @@ const browserRouter = createHashRouter([{
             path: 'codeofconduct',
             element: <CodeOfConduct />
         },
+        {
+            path: 'team',
+            element: <Team />
+        },
         {
             path: 'theme',
             element: <ThemePreview />

src/routes/Team/Team.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react'
+import Container from '@mui/material/Container'
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+
+const Team: FC = () => {
+    const { t } = useTranslation();
+
+    return <Container style={{ padding: 32 }}>
+        <Typography variant="h1">{t('team.title')}</Typography>
+    </Container>
+}
+
+export default Team

src/routes/Team/__test__/Team.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@/tests/customRender'
+import { screen } from '@testing-library/react'
+import Team from '../Team';
+
+describe('Team', () => {
+    it('should render the Team page', async () => {
+        render(<Team />)
+        const title = await screen.findByText('✨ Leadership Team ✨')
+        expect(title).toBeVisible()
+    })
+});