Skip to content

Commit

Permalink
Merge branch 'develop' into injiweb-700-share-validity
Browse files Browse the repository at this point in the history
Signed-off-by: Vijay Kumar S <[email protected]>
  • Loading branch information
vijay151096 authored Oct 8, 2024
2 parents 7603375 + fe9246d commit 6df623d
Show file tree
Hide file tree
Showing 13 changed files with 756 additions and 444 deletions.
360 changes: 0 additions & 360 deletions inji-web/package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion inji-web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "PORT=3001 react-scripts start",
"start": "set PORT=3001 && react-scripts start",
"build": "CI=false react-scripts build",
"test": "react-scripts test --silent --testPathPattern=__tests__",
"eject": "react-scripts eject",
Expand Down
104 changes: 87 additions & 17 deletions inji-web/src/components/Help/HelpAccordion.tsx
Original file line number Diff line number Diff line change
@@ -1,53 +1,123 @@
import React, {useState} from "react";
import {HelpAccordionItem} from "./HelpAccordionItem";
import { HelpAccordionItemProps } from "../../types/components";
import {useTranslation} from "react-i18next";
import { title } from "process";
import { constructContent } from "../../utils/builder";

export const HelpAccordion: React.FC = () => {

export const HelpAccordion: React.FC = () =>{
const [open, setOpen] = useState(0);
const {t} = useTranslation("Help");

const accordionItems = [
{
title: t("item1.title"),
content: [t("item1.description1")],
content: constructContent([t("item1.description1")],false),
},
{
title: t("item2.title"),
content: [t("item2.description1")],
content: constructContent([t("item2.description1")],false),
},
{
title: t("item3.title"),
content: [t("item3.description1"), t("item3.description2"), t("item3.description3")],
content: constructContent([t("item3.description1"), t("item3.description2"), t("item3.description3")],false),
},
{
title: t("item4.title"),
content: [t("item4.description1")],
content: constructContent([t("item4.description1")],false),
},
{
title: t("item5.title"),
content: [t("item5.description1")],
content: constructContent([t("item5.description1")],false),
},
{
title: t("item6.title"),
content: [t("item6.descrip tion1")],
content: constructContent([t("item6.description1")],false),
},
{
title: t("item7.title"),
content: [t("item7.description1"), t("item7.description2"), t("item7.description3"), t("item7.description4")],
content: constructContent([t("item7.description1"), t("item7.description2"), t("item7.description3"), t("item7.description4")],false),
},
{
title: t("item8.title"),
content:constructContent([t("item8.description1"), t("item8.description2"), t("item8.description3"), t("item8.description4"), t("item8.description5"), t("item8.description6")],false),
},
{
title: t("item9.title"),
content:constructContent([t("item9.description1"), t("item9.description2"), t("item9.description3")],false),
},
{
title: t("item10.title"),
content:constructContent([t("item10.description1")],false),
},
{
title: t("item11.title"),
content:constructContent([t("item11.description1"), t("item11.description2"), t("item11.description3"), t("item11.description4"), t("item11.description5")],false),
},
{
title: t("item12.title"),
content:constructContent([t("item12.description1"), t("item12.description2"), t("item12.description3")],false),
},
{
title: t("item13.title"),
content:constructContent([t("item13.description1"), t("item13.description2"), t("item13.description3")],false),
},
{
title: t("item14.title"),
content:constructContent([t("item14.description1"), t("item14.description2"), t("item14.description3")],false),
},
{
title: t("item15.title"),
content:constructContent([t("item15.description1"), t("item15.description2"), t("item15.description3")],false),
},
{
title: t("item16.title"),
content:constructContent([t("item16.description1"), t("item16.description2"), t("item16.description3")],false),
},
{
title: t("item17.title"),
content:constructContent([t("item17.description1"), t("item17.description2"), t("item17.description3")],false),
},
{
title: t("item18.title"),
content:constructContent([t("item18.description1"), t("item18.description2"), t("item18.description3")],false),
},
{
title: t("item19.title"),
content:constructContent([t("item19.description1"), t("item19.description2"), t("item19.description3")],false),
},
{
title: t("item20.title"),
content:constructContent([t("item20.description1")],false),
},
{
title: t("item21.title"),
content:constructContent([t("item21.description1")],true),
},
{
title: t("item22.title"),
content:constructContent([t("item22.description1")],true),
},
{
title: t("item23.title"),
content:constructContent([t("item23.description1"),t("item23.description2"),t("item23.description3"),t("item23.description4")],false),
}
];

return (
<React.Fragment>
<div data-testid="Help-Accordion-Container">
{accordionItems.map((item, index) => (
<HelpAccordionItem id={index}
key={index}
title={item.title}
content={item.content}
open={open}
setOpen={setOpen}
/>
))}
<HelpAccordionItem
id={index}
key={index}
title={item.title}
content={item.content}
open={open}
setOpen={setOpen}
/>))
}
</div>
</React.Fragment>
);
Expand Down
68 changes: 36 additions & 32 deletions inji-web/src/components/Help/HelpAccordionItem.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,41 @@
import React from "react";
import {HelpAccordionItemProps} from "../../types/components";
import {IoIosArrowDown, IoIosArrowUp} from "react-icons/io";

import { HelpAccordionItemProps } from "../../types/components";
import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
import {renderContent} from "../../utils/builder";

export const HelpAccordionItem: React.FC<HelpAccordionItemProps> = (props) => {

return <React.Fragment>
<div className="rounded-md mb-2 shadow-sm shadow-iw-shadow"
data-testid="Help-Item-Container">
<button
data-testid="Help-Item-Title-Button"
className="w-full p-5 text-left font-bold hover:bg-iw-helpAccordionHover focus:outline-none"
onClick={() => props.setOpen(props.id === props.open ? -1 : props.id)}
>
<div className={"flex flex-row text-iw-title"}
data-testid="Help-Item-Title-Text">
{props.title}
<div className={"flex items-center ms-auto"}>
{
(props.id === props.open) ? <IoIosArrowUp size={20} data-testid="Help-Item-UpArrow"/> :
<IoIosArrowDown size={20} data-testid="Help-Item-DownArrow"/>
}
return (
<React.Fragment>
<div className="rounded-md mb-2 shadow-sm shadow-iw-shadow"
data-testid="Help-Item-Container">
<button
data-testid="Help-Item-Title-Button"
className="w-full p-5 text-left font-bold hover:bg-iw-helpAccordionHover focus:outline-none"
onClick={() => props.setOpen(props.id === props.open ? -1 : props.id)}
>
<div className={"flex flex-row text-iw-title"}
data-testid="Help-Item-Title-Text">
{props.title}
<div className={"flex items-center ms-auto"}>
{
(props.id === props.open) ? <IoIosArrowUp size={20} data-testid="Help-Item-UpArrow"/> :
<IoIosArrowDown size={20} data-testid="Help-Item-DownArrow"/>
}
</div>
</div>
</div>
</button>
{(props.id === props.open) && (
<div className="p-5 bg-iw-background border-t-2"
data-testid="Help-Item-Content-Text">
{props.content.map((content, index) => <p key={index} className={"text-iw-title"}>{content}</p>)}

</div>
)}
</div>
</React.Fragment>
}
</button>
{(props.id === props.open) && (
<div className="p-5 bg-iw-background border-t-2"
data-testid="Help-Item-Content-Text">
{props.content.map((content, index) => (
<p key={index} className={"text-iw-title"}>
{renderContent(content)}
</p>
))}
</div>
)}
</div>
</React.Fragment>
);
};

Loading

0 comments on commit 6df623d

Please sign in to comment.