-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make Components for the About Page (#17)
- Loading branch information
1 parent
5c5a786
commit 62b78d3
Showing
8 changed files
with
238 additions
and
191 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| const GeneralInfoSection = () => { | ||
| const generalInfoItems = [ | ||
| { | ||
| question: 'How do I request a new grouping?', | ||
| answer: ( | ||
| <a className="text-link-color hover:underline hover:text-link-hover-color" | ||
| href="https://uhawaii.atlassian.net/wiki/spaces/UHIAM/pages/13402308/UH+Groupings+Request+Form" | ||
| aria-label="A request form is available"> | ||
| A request form is available. | ||
| </a> | ||
| ) | ||
| }, | ||
| { | ||
| question: 'What is the Include members list?', | ||
| answer: 'A grouping\'s Include is the portion of the grouping membership that is manually updated. It may be empty.' | ||
| }, | ||
| { | ||
| question: 'Exactly what is a grouping?', | ||
| answer: ( | ||
| <> | ||
| <a className="text-link-color hover:underline hover:text-link-hover-color" | ||
| href="https://uhawaii.atlassian.net/wiki/spaces/UHIAM/pages/13403213/UH+Groupings" | ||
| aria-label="General information about groupings is available"> | ||
| General information about groupings is available. | ||
| </a> {' '} | ||
| A grouping's components include the Basis, Include, and Exclude lists. | ||
| </> | ||
| ) | ||
| }, | ||
| { | ||
| question: 'What is the Exclude members list?', | ||
| answer: 'A grouping\'s Exclude overrides automatic and manual membership by explicitly not including anyone listed here. It may be empty.' | ||
| }, | ||
| { | ||
| question: 'What is the Basis?', | ||
| answer: 'A grouping\'s Basis is the portion of the grouping membership that is automatically updated. It may be empty.' | ||
| } | ||
| ]; | ||
|
|
||
| return ( | ||
| <div className="container pt-10 pb-10"> | ||
| <h2 className="text-center text-xl font-bold text-text-color pb-7">GENERAL INFORMATION</h2> | ||
| <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> | ||
| {generalInfoItems.map((generalInfoItem, index) => ( | ||
| <div key={index}> | ||
| <h3 className="text-text-color text-lg pb-1">{generalInfoItem.question}</h3> | ||
| <p>{generalInfoItem.answer}</p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default GeneralInfoSection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| const TechnicalInfoSection = () => { | ||
| const technicalInfoItems = [ | ||
| { name: 'React.js', url: 'https://react.dev/learn', description: '(Quickstart)' }, | ||
| { name: 'shadcn/ui', url: 'https://ui.shadcn.com/docs', description: '(Guide)' }, | ||
| { name: 'Jest', url: 'https://jestjs.io/docs/getting-started', description: '(Introduction)' }, | ||
| { name: 'Next.js', url: 'https://nextjs.org/docs', description: '(Introduction)' }, | ||
| { name: 'Tanstack Table', url: 'https://tanstack.com/table/v8/docs/introduction', description: '(Introduction)' }, | ||
| { name: 'React Testing Library', url: 'https://testing-library.com/', description: '(Documentation)' }, | ||
| { name: 'Typescript', url: 'https://www.typescriptlang.org/docs/', description: '(Guide)' }, | ||
| { name: 'Tanstack Query', url: 'https://tanstack.com/query/latest/docs/framework/react/overview', description: '(Guide)' }, | ||
| { name: '', url: '', description: ''}, | ||
| { name: 'Tailwind CSS', url: 'https://v2.tailwindcss.com/docs', description: '(Guide)' }, | ||
| { name: 'Iron Session', url: 'https://github.com/vvo/iron-session', description: '(GitHub)' } | ||
| ]; | ||
|
|
||
| return ( | ||
| <div className="container pb-10 pt-6"> | ||
| <h2 className="text-center text-text-color text-xl font-bold pb-7">TECHNICAL INFORMATION</h2> | ||
| <div className="grid grid-cols-1 md:grid-cols-4 gap-6"> | ||
| <div className="col-span-1"> | ||
| <h3 className="text-text-color text-lg pb-2">Resources</h3> | ||
| <p className="pb-3">Source code is available on <a | ||
| className="text-link-color hover:underline hover:text-link-hover-color" | ||
| href="https://github.com/uhawaii-system-its-ti-iam/uh-groupings">GitHub</a> | ||
| </p> | ||
| </div> | ||
| <div className="col-span-3"> | ||
| <h3 className="text-text-color text-lg pb-2">Technologies</h3> | ||
| <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 gap-0"> | ||
| {technicalInfoItems.map((item, index) => ( | ||
| <div key={index} > | ||
| <p> | ||
| {item.name} | ||
| <a className="text-link-color hover:underline hover:text-link-hover-color" href={item.url} aria-label={`Link to ${item.name} ${item.description}`}> | ||
| {item.description} | ||
| </a> | ||
| </p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default TechnicalInfoSection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| const WhatHappensIfSection = () => { | ||
| const whatHappensIfItems = [ | ||
| { | ||
| question: 'I was an owner of just one grouping and someone (me or another owner) deleted my ownership while I was still logged in.', | ||
| answer: 'You will still see the Groupings menu option, but you will get an error message when you click on it. Next time you log in, the Groupings menu option will no longer appear, assuming that you don\'t reacquire the ownership of a grouping before then.' | ||
| }, | ||
| { | ||
| question: 'I was not an owner of any groupings and someone made me an owner while I was still logged in.', | ||
| answer: 'You will have to log out and then log back in again to see the Groupings menu option.' | ||
| }, | ||
| { | ||
| question: 'I was an admin and someone (me or another admin) deleted my admin role while I was still logged in.', | ||
| answer: 'You will still see the Admin menu option, but you will get an error message when you click on it. Next time you log in, the Admin menu option will no longer appear, assuming that you don\'t reacquire the Admin role before then.' | ||
| } | ||
| ]; | ||
|
|
||
| return ( | ||
| <div className="bg-seafoam pt-5"> | ||
| <div className="container pb-10"> | ||
| <h2 className="text-center text-xl text-text-color font-bold pb-7 pt-5">WHAT HAPPENS IF</h2> | ||
| <div className="grid gap-8"> | ||
| {whatHappensIfItems.map((item, index) => ( | ||
| <div key={index}> | ||
| <h3 className="text-text-color text-lg pb-2">Q: {item.question}</h3> | ||
| <p>A: {item.answer}</p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default WhatHappensIfSection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
24 changes: 24 additions & 0 deletions
24
ui/tests/app/about/_components/GeneralInfoSection.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
| import GeneralInfoSection from '@/app/about/_components/GeneralInfoSection'; | ||
|
|
||
| describe('GeneralInfoSection', () => { | ||
| it('should render with question and answer', () => { | ||
| render(<GeneralInfoSection />); | ||
|
|
||
| expect(screen.getByText('How do I request a new grouping?')).toBeInTheDocument(); | ||
| expect(screen.getByText('A request form is available.')).toBeInTheDocument(); | ||
|
|
||
| expect(screen.getByText('What is the Include members list?')).toBeInTheDocument(); | ||
| expect(screen.getByText('A grouping\'s Include is the portion of the grouping membership that is manually updated. It may be empty.')).toBeInTheDocument(); | ||
|
|
||
| expect(screen.getByText('Exactly what is a grouping?')).toBeInTheDocument(); | ||
| expect(screen.getByText('General information about groupings is available.')).toBeInTheDocument(); | ||
| expect(screen.getByText('A grouping\'s components include the Basis, Include, and Exclude lists.')).toBeInTheDocument(); | ||
|
|
||
| expect(screen.getByText('What is the Exclude members list?')).toBeInTheDocument(); | ||
| expect(screen.getByText('A grouping\'s Exclude overrides automatic and manual membership by explicitly not including anyone listed here. It may be empty.')).toBeInTheDocument(); | ||
|
|
||
| expect(screen.getByText('What is the Basis?')).toBeInTheDocument(); | ||
| expect(screen.getByText('A grouping\'s Basis is the portion of the grouping membership that is automatically updated. It may be empty.')).toBeInTheDocument(); | ||
| }); | ||
| }); |
Oops, something went wrong.