Merge branch 'feature/create-main-components-and-layout' into feature…

…/create-basic-table-component
EyeSeeTea · Jun 28, 2024 · b3e13d5 · b3e13d5
2 parents 2101a8c + c9e0fb8
commit b3e13d5
Show file tree

Hide file tree

Showing 26 changed files with 348 additions and 354 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-06-27T08:53:15.150Z\n"
-"PO-Revision-Date: 2024-06-27T08:53:15.150Z\n"
+"POT-Creation-Date: 2024-06-28T09:08:39.454Z\n"
+"PO-Revision-Date: 2024-06-28T09:08:39.454Z\n"
 
 msgid "Add new option"
 msgstr ""
@@ -35,24 +35,6 @@ msgstr ""
 msgid "Last updated: "
 msgstr ""
 
-msgid "Incident Management Team Builder"
-msgstr ""
-
-msgid "Cholera in NW Province, June 2023"
-msgstr ""
-
-msgid "Incident Action Plan"
-msgstr ""
-
-msgid "Team"
-msgstr ""
-
-msgid "Response Actions"
-msgstr ""
-
-msgid "Create Risk Assessment"
-msgstr ""
-
 msgid "Dashboard"
 msgstr ""
 
@@ -83,12 +65,21 @@ msgstr ""
 msgid "Risk Assessment"
 msgstr ""
 
+msgid "Create Risk Assessment"
+msgstr ""
+
 msgid "Risk assessment incomplete"
 msgstr ""
 
 msgid "Risks associated with this event have not yet been assessed."
 msgstr ""
 
+msgid "Incident Action Plan"
+msgstr ""
+
+msgid "Cholera in NW Province, June 2023"
+msgstr ""
+
 msgid "Response actions"
 msgstr ""
 
@@ -101,8 +92,14 @@ msgstr ""
 msgid "Edit Action Plan"
 msgstr ""
 
+msgid "Team"
+msgstr ""
+
 msgid "Edit Team"
 msgstr ""
 
+msgid "Incident Management Team Builder"
+msgstr ""
+
 msgid "Resources"
 msgstr ""
diff --git a/i18n/es.po b/i18n/es.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2024-06-27T08:53:15.150Z\n"
+"POT-Creation-Date: 2024-06-28T09:08:39.454Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -35,24 +35,6 @@ msgstr ""
 msgid "Last updated: "
 msgstr ""
 
-msgid "Incident Management Team Builder"
-msgstr ""
-
-msgid "Cholera in NW Province, June 2023"
-msgstr ""
-
-msgid "Incident Action Plan"
-msgstr ""
-
-msgid "Team"
-msgstr ""
-
-msgid "Response Actions"
-msgstr ""
-
-msgid "Create Risk Assessment"
-msgstr ""
-
 msgid "Dashboard"
 msgstr ""
 
@@ -83,12 +65,21 @@ msgstr ""
 msgid "Risk Assessment"
 msgstr ""
 
+msgid "Create Risk Assessment"
+msgstr ""
+
 msgid "Risk assessment incomplete"
 msgstr ""
 
 msgid "Risks associated with this event have not yet been assessed."
 msgstr ""
 
+msgid "Incident Action Plan"
+msgstr ""
+
+msgid "Cholera in NW Province, June 2023"
+msgstr ""
+
 msgid "Response actions"
 msgstr ""
 
@@ -101,9 +92,15 @@ msgstr ""
 msgid "Edit Action Plan"
 msgstr ""
 
+msgid "Team"
+msgstr ""
+
 msgid "Edit Team"
 msgstr ""
 
+msgid "Incident Management Team Builder"
+msgstr ""
+
 msgid "Resources"
 msgstr ""
 

diff --git a/package.json b/package.json
@@ -30,7 +30,6 @@
         "d2": "31.10.2",
         "d2-manifest": "1.0.0",
         "font-awesome": "4.7.0",
-        "lodash": "^4.17.21",
         "purify-ts": "1.2.0",
         "purify-ts-extra-codec": "0.6.0",
         "react": "^18.2.0",
@@ -50,7 +49,6 @@
         "@testing-library/react": "^14.0.0",
         "@types/classnames": "2.3.1",
         "@types/isomorphic-fetch": "^0.0.36",
-        "@types/lodash": "^4.17.5",
         "@types/material-ui": "^0.21.12",
         "@types/node": "18",
         "@types/node-localstorage": "^1.3.0",

diff --git a/src/webapp/components/add-new-option/AddNewOption.tsx b/src/webapp/components/add-new-option/AddNewOption.tsx
@@ -11,7 +11,7 @@ type AddNewOptionProps = {
 };
 
 export const AddNewOption: React.FC<AddNewOptionProps> = React.memo(
-    ({ id, label = "", onAddNewOption }) => {
+    ({ id, label, onAddNewOption }) => {
         return (
             <Container onClick={onAddNewOption}>
                 <StyledAddIcon id={id} aria-label="Add new option" />

diff --git a/src/webapp/components/button/Button.tsx b/src/webapp/components/button/Button.tsx
@@ -1,11 +1,10 @@
 import React from "react";
 import { Button as MUIButton } from "@material-ui/core";
-import styled from "styled-components";
 
 type ButtonProps = {
     children?: React.ReactNode;
     variant?: "contained" | "outlined";
-    color?: "primary" | "secondary" | "dark-secondary";
+    color?: "primary" | "secondary";
     disabled?: boolean;
     startIcon?: React.ReactNode;
     onClick: () => void;
@@ -21,22 +20,16 @@ export const Button: React.FC<ButtonProps> = React.memo(
         onClick,
     }) => {
         return (
-            <StyledButton
+            <MUIButton
                 variant={variant}
-                color={color === "dark-secondary" ? "secondary" : color}
+                color={color}
                 disabled={disabled}
                 startIcon={startIcon}
                 disableElevation
-                $darkBorder={color === "dark-secondary"}
                 onClick={onClick}
             >
                 {children}
-            </StyledButton>
+            </MUIButton>
         );
     }
 );
-
-const StyledButton = styled(MUIButton)<{ $darkBorder: boolean }>`
-    border-color: ${props =>
-        props.$darkBorder ? props.theme.palette.button.borderDarkSecondary : "initial"};
-`;
diff --git a/src/webapp/components/date-picker/DatePicker.tsx b/src/webapp/components/date-picker/DatePicker.tsx
@@ -15,22 +15,28 @@ type DatePickerProps = {
     errorText?: string;
     disabled?: boolean;
     error?: boolean;
+    required?: boolean;
 };
 
 export const DatePicker: React.FC<DatePickerProps> = React.memo(
     ({
-        id = "",
-        label = "",
+        id,
+        label,
         value,
         onChange,
         disabled = false,
         helperText = "",
         errorText = "",
         error = false,
+        required = false,
     }) => {
         return (
             <Container>
-                {label && <Label htmlFor={id}>{label}</Label>}
+                {label && (
+                    <Label className={required ? "required" : ""} htmlFor={id}>
+                        {label}
+                    </Label>
+                )}
                 <LocalizationProvider dateAdapter={AdapterDateFns}>
                     <StyledDatePicker
                         value={value}
@@ -61,10 +67,16 @@ const Container = styled.div`
 
 const Label = styled(InputLabel)`
     display: inline-block;
-    font-weight: 400;
+    font-weight: 700;
     font-size: 0.875rem;
     color: ${props => props.theme.palette.text.primary};
     margin-block-end: 8px;
+
+    &.required::after {
+        content: "*";
+        color: ${props => props.theme.palette.common.red};
+        margin-inline-start: 4px;
+    }
 `;
 
 const StyledDatePicker = styled(DatePickerMUI)<{ error?: boolean; disabled?: boolean }>`

diff --git a/src/webapp/components/form-page/FormPage.tsx → src/webapp/components/form/FormLayout.tsx b/src/webapp/components/form-page/FormPage.tsx → src/webapp/components/form/FormLayout.tsx
@@ -5,7 +5,7 @@ import i18n from "../../../utils/i18n";
 import { Button } from "../button/Button";
 import { Separator } from "../separator/Separator";
 
-type FormPageProps = {
+type FormLayoutProps = {
     title?: string;
     subtitle?: string;
     saveLabel?: string;
@@ -15,14 +15,14 @@ type FormPageProps = {
     onCancel?: () => void;
 };
 
-export const FormPage: React.FC<FormPageProps> = React.memo(
-    ({ title, subtitle = "", saveLabel = "", cancelLabel = "", children, onSave, onCancel }) => {
+export const FormLayout: React.FC<FormLayoutProps> = React.memo(
+    ({ title, subtitle, saveLabel, cancelLabel, children, onSave, onCancel }) => {
         return (
-            <StyledFormPage>
+            <StyledFormLayout>
                 <Header>
                     <TitleContainer>
-                        {title ? <Title>{title}</Title> : null}
-                        {subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
+                        {title && <Title>{title}</Title>}
+                        {subtitle && <Subtitle>{subtitle}</Subtitle>}
                     </TitleContainer>
                     <RequiredText>{i18n.t("Indicates required")}</RequiredText>
                 </Header>
@@ -38,12 +38,12 @@ export const FormPage: React.FC<FormPageProps> = React.memo(
                         )}
                     </ButtonsFooter>
                 </Footer>
-            </StyledFormPage>
+            </StyledFormLayout>
         );
     }
 );
 
-const StyledFormPage = styled.div`
+const StyledFormLayout = styled.div`
     width: 100%;
 `;
 

diff --git a/...p/components/form-section/FormSection.tsx → src/webapp/components/form/FormSection.tsx b/...p/components/form-section/FormSection.tsx → src/webapp/components/form/FormSection.tsx
@@ -6,24 +6,38 @@ import { Separator } from "../separator/Separator";
 import { IconButton } from "../icon-button/IconButton";
 
 type FormSectionProps = {
-    title: string;
+    title?: string;
+    required?: boolean;
     children: React.ReactNode;
     hasSeparator?: boolean;
     onClickInfo?: () => void;
     direction?: "row" | "column";
 };
 
 export const FormSection: React.FC<FormSectionProps> = React.memo(
-    ({ title, hasSeparator = false, children, onClickInfo, direction = "row" }) => {
+    ({
+        title,
+        hasSeparator = false,
+        children,
+        onClickInfo,
+        direction = "row",
+        required = false,
+    }) => {
         return (
             <FormSectionContainer>
                 {hasSeparator && <Separator margin="12px" />}
                 <Container direction={direction}>
-                    <TitleContainer>
-                        <RequiredText>{title}</RequiredText>
-                        {onClickInfo && <IconButton icon={<IconInfo24 />} onClick={onClickInfo} />}
-                    </TitleContainer>
-                    <FormContainer>{children}</FormContainer>
+                    {title && (
+                        <TitleContainer direction={direction}>
+                            <RequiredText className={required ? "required" : ""}>
+                                {title}
+                            </RequiredText>
+                            {onClickInfo && (
+                                <IconButton icon={<IconInfo24 />} onClick={onClickInfo} />
+                            )}
+                        </TitleContainer>
+                    )}
+                    <FormContainer fulWidth={!title}>{children}</FormContainer>
                 </Container>
             </FormSectionContainer>
         );
@@ -41,24 +55,30 @@ const Container = styled.div<{ direction: string }>`
     width: 100%;
     gap: ${props => (props.direction === "row" ? "48px" : "24px")};
     align-items: ${props => (props.direction === "row" ? "center" : "flex-start")};
+    @media (max-width: 600px) {
+        flex-direction: column;
+        align-items: flex-start;
+    }
 `;
 
-const TitleContainer = styled.div`
+const TitleContainer = styled.div<{ direction: string }>`
     display: flex;
     align-items: center;
     gap: 4px;
+    width: 30%;
 `;
 
-const FormContainer = styled.div`
-    width: 100%;
+const FormContainer = styled.div<{ fulWidth: boolean }>`
+    width: ${props => (props.fulWidth ? "100%" : "70%")};
 `;
 
 const RequiredText = styled.span`
     color: ${props => props.theme.palette.common.black};
     font-size: 0.875rem;
     font-weight: 700;
     white-space: nowrap;
-    &::after {
+
+    &.required::after {
         content: "*";
         color: ${props => props.theme.palette.common.red};
         margin-inline-start: 4px;