From 22d00cf01bdad9c0d4dd377ca4f0288627fa1dea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ann=20=E6=9D=8F=20Kilzer?= Date: Thu, 4 Jul 2024 22:48:44 +0900 Subject: [PATCH] basic team page structure --- src/components/Header/DesktopHeader.tsx | 4 +++- .../Header/__test__/DesktopToolbar.test.tsx | 8 +++++++- src/components/SideDrawer/DrawerContents.tsx | 7 ++++++- src/i18n/en/translation.json | 12 ++++++++++-- src/i18n/ja/translation.json | 12 ++++++++++-- src/routes/Router.tsx | 5 +++++ src/routes/Team/Team.tsx | 14 ++++++++++++++ src/routes/Team/__test__/Team.test.tsx | 12 ++++++++++++ 8 files changed, 67 insertions(+), 7 deletions(-) create mode 100644 src/routes/Team/Team.tsx create mode 100644 src/routes/Team/__test__/Team.test.tsx diff --git a/src/components/Header/DesktopHeader.tsx b/src/components/Header/DesktopHeader.tsx index 3e18361..531a9d4 100644 --- a/src/components/Header/DesktopHeader.tsx +++ b/src/components/Header/DesktopHeader.tsx @@ -32,7 +32,9 @@ const DesktopHeader: FC = () => { WiSE Japan {t('header.subtitle')} - + + {t('header.team')} + {t('header.codeOfConduct')} diff --git a/src/components/Header/__test__/DesktopToolbar.test.tsx b/src/components/Header/__test__/DesktopToolbar.test.tsx index 83743e8..fb5a8d4 100644 --- a/src/components/Header/__test__/DesktopToolbar.test.tsx +++ b/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() + const team = await screen.findByText('TEAM') + expect(team).toBeVisible() + const codeOfConduct = await screen.findByText('CODE OF CONDUCT') + expect(codeOfConduct).toBeVisible() + }) }) diff --git a/src/components/SideDrawer/DrawerContents.tsx b/src/components/SideDrawer/DrawerContents.tsx index 6095483..8b0ae6d 100644 --- a/src/components/SideDrawer/DrawerContents.tsx +++ b/src/components/SideDrawer/DrawerContents.tsx @@ -7,9 +7,11 @@ 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 = (<> @@ -17,7 +19,10 @@ const DrawerContents: FC = () => { Home - Code of Conduct + {t('sidebar.team')} + + + {t('sidebar.codeOfConduct')} ) diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json index be95bb6..fd0eaa1 100644 --- a/src/i18n/en/translation.json +++ b/src/i18n/en/translation.json @@ -1,7 +1,8 @@ { "header": { "codeOfConduct": "Code of Conduct", - "subtitle": "Women in Software Engineering Japan" + "subtitle": "Women in Software Engineering Japan", + "team": "Team" }, "home": { "helloWorld": "✨ Hello World ✨", @@ -9,5 +10,12 @@ "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 ✨" } -} \ No newline at end of file +} diff --git a/src/i18n/ja/translation.json b/src/i18n/ja/translation.json index 27022fc..f3cad98 100644 --- a/src/i18n/ja/translation.json +++ b/src/i18n/ja/translation.json @@ -1,7 +1,8 @@ { "header": { "codeOfConduct": "行動規範", - "subtitle": "ウーマン・イン・ソフトウェアエンジニアリング" + "subtitle": "ウーマン・イン・ソフトウェアエンジニアリング", + "team": "チーム" }, "home": { "helloWorld": "✨ Hello 世界 ✨", @@ -9,5 +10,12 @@ "paragraph1": "Women Who Code(WWCode)の活動中止のニュースに対し、多くの人々が悲しみました。東京や日本全体で、IT業界の多様な女性を支援する組織が必要とされています。", "paragraph2": "この使命を諦めるつもりはありません。WWCodeの志を引き継ぐために、日本の女性がソフトウェアエンジニアとしてキャリアを築けるよう、私たちと共にコミュニティを再構築していきます。", "paragraph3": "私たちのイベントは、2年以上の経験を持つITプロフェッショナルの女性を中心に、新卒からベテランまでどなたでも参加できるイベントをやっています。この組織は女性に焦点を当てていますが、イベントにはすべてのジェンダーの方が歓迎されています。また、データサイエンティスト、プロダクトマネジャー、UI/UXデザイナー、機械学習エンジニアなどのソフトウェアに関連した役割も歓迎いたします。" + }, + "sidebar": { + "codeOfConduct": "Code of Conduct", + "team": "チーム" + }, + "team": { + "title": "✨ リーダーシップ・チーム ✨" } -} \ No newline at end of file +} diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx index b1cb05f..fa13212 100644 --- a/src/routes/Router.tsx +++ b/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: , @@ -20,6 +21,10 @@ const browserRouter = createHashRouter([{ path: 'codeofconduct', element: }, + { + path: 'team', + element: + }, { path: 'theme', element: diff --git a/src/routes/Team/Team.tsx b/src/routes/Team/Team.tsx new file mode 100644 index 0000000..8a001d2 --- /dev/null +++ b/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 + {t('team.title')} + +} + +export default Team diff --git a/src/routes/Team/__test__/Team.test.tsx b/src/routes/Team/__test__/Team.test.tsx new file mode 100644 index 0000000..efd4205 --- /dev/null +++ b/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() + const title = await screen.findByText('✨ Leadership Team ✨') + expect(title).toBeVisible() + }) +});