WIP: GO UI Update

app/eslint.config.ts

@@ -1,12 +1,11 @@
-// @ts-expect-error: @eslint/eslintrc has no types
 import { FlatCompat } from '@eslint/eslintrc';
 import js from '@eslint/js';
 import json from "@eslint/json";
 import tseslint from "typescript-eslint";
 import process from 'process';
+import { Linter } from 'eslint';
 
 import i18nUsage from './scripts/eslint/i18n-usage';
-import { Linter } from 'eslint';
 
 const dirname = process.cwd();
 
@@ -166,7 +165,7 @@ const jsonConfig: Linter.Config = {
 //     },
 // };
 
-const config: Linter.Config[] = [
+const config = tseslint.config(
     {
         plugins: {
             json,
@@ -178,6 +177,6 @@ const config: Linter.Config[] = [
     jsonConfig,
     // i18nJsonConfig,
     ...tseslint.configs.recommended
-];
+);
 
 export default config;

app/src/App/PageError/index.tsx

@@ -58,7 +58,7 @@ function PageError() {
                     <Button
                         name={undefined}
                         onClick={toggleFullErrorVisibility}
-                        variant="tertiary"
+                        styleVariant="action"
                     >
                         {fullErrorVisible ? strings.errorPageHide : strings.errorPageShowError}
                     </Button>
@@ -79,7 +79,8 @@ function PageError() {
                     <Link
                         href="/"
                         external
-                        variant="secondary"
+                        colorVariant="primary"
+                        styleVariant="outline"
                     >
                         {strings.errorPageGoBack}
                     </Link>

app/src/App/index.tsx

@@ -239,11 +239,11 @@ function Application() {
     );
 
     return (
-        <RouteContext.Provider value={wrappedRoutes}>
-            <UserContext.Provider value={userContextValue}>
-                <AlertContext.Provider value={alertContextValue}>
-                    <RequestContext.Provider value={requestContextValue}>
-                        <LanguageContext.Provider value={languageContextValue}>
+        <LanguageContext.Provider value={languageContextValue}>
+            <RouteContext.Provider value={wrappedRoutes}>
+                <UserContext.Provider value={userContextValue}>
+                    <AlertContext.Provider value={alertContextValue}>
+                        <RequestContext.Provider value={requestContextValue}>
                             <RouterProvider
                                 router={router}
                                 fallbackElement={(
@@ -257,11 +257,11 @@ function Application() {
                                     </div>
                                 )}
                             />
-                        </LanguageContext.Provider>
-                    </RequestContext.Provider>
-                </AlertContext.Provider>
-            </UserContext.Provider>
-        </RouteContext.Provider>
+                        </RequestContext.Provider>
+                    </AlertContext.Provider>
+                </UserContext.Provider>
+            </RouteContext.Provider>
+        </LanguageContext.Provider>
     );
 }
 

app/src/App/routes/CountryRoutes.tsx

@@ -145,19 +145,6 @@ const countryOngoingActivitiesEmergencies = customWrapRoute({
     },
 });
 
-const countryOngoingActivitiesThreeWActivities = customWrapRoute({
-    parent: countryOngoingActivitiesLayout,
-    path: 'three-w/activities',
-    component: {
-        render: () => import('#views/CountryOngoingActivitiesThreeWActivities'),
-        props: {},
-    },
-    context: {
-        title: 'Country 3W Activities',
-        visibility: 'anything',
-    },
-});
-
 const countryOngoingActivitiesThreeWProjects = customWrapRoute({
     parent: countryOngoingActivitiesLayout,
     path: 'three-w/projects',
@@ -484,7 +471,6 @@ export default {
     countryOngoingActivitiesLayout,
     countryOngoingActivitiesIndex,
     countryOngoingActivitiesEmergencies,
-    countryOngoingActivitiesThreeWActivities,
     countryOngoingActivitiesThreeWProjects,
 
     countryNsOverviewLayout,

app/src/components/CatalogueInfoCard/index.tsx

@@ -1,14 +1,12 @@
 import { useCallback } from 'react';
 import {
     Container,
-    List,
+    ListView,
+    RawList,
 } from '@ifrc-go/ui';
-import { _cs } from '@togglecorp/fujs';
 
 import Link, { type Props as LinkProps } from '#components/Link';
 
-import styles from './styles.module.css';
-
 export type LinkData = LinkProps & {
     title: string;
 }
@@ -19,7 +17,6 @@ interface Props {
     title: string;
     data: LinkData[];
     description?: string;
-    descriptionClassName?: string;
 }
 
 function CatalogueInfoCard(props: Props) {
@@ -28,7 +25,6 @@ function CatalogueInfoCard(props: Props) {
         title,
         data,
         description,
-        descriptionClassName,
     } = props;
 
     const rendererParams = useCallback(
@@ -56,26 +52,27 @@ function CatalogueInfoCard(props: Props) {
 
     return (
         <Container
-            className={_cs(styles.catalogueInfoCard, className)}
+            className={className}
             heading={title}
             headingLevel={4}
             withHeaderBorder
-            withInternalPadding
-            headerDescriptionContainerClassName={descriptionClassName}
             headerDescription={description}
-            spacing="comfortable"
+            withPadding
+            withBackground
+            withShadow
         >
-            <List
-                className={styles.list}
-                data={data}
-                keySelector={catalogueInfoKeySelector}
-                renderer={Link}
-                errored={false}
-                pending={false}
-                filtered={false}
-                rendererParams={rendererParams}
-                compact
-            />
+            <ListView
+                layout="block"
+                spacing="sm"
+                withSpacingOpticalCorrection
+            >
+                <RawList
+                    data={data}
+                    keySelector={catalogueInfoKeySelector}
+                    renderer={Link}
+                    rendererParams={rendererParams}
+                />
+            </ListView>
         </Container>
     );
 }

app/src/components/DropdownMenuItem/index.tsx

@@ -15,6 +15,7 @@ import Link, { type Props as LinkProps } from '#components/Link';
 
 type CommonProp = {
     persist?: boolean;
+    withoutFullWidth?: boolean;
 }
 
 type ButtonTypeProps<NAME> = Omit<ButtonProps<NAME>, 'type'> & {
@@ -23,20 +24,25 @@ type ButtonTypeProps<NAME> = Omit<ButtonProps<NAME>, 'type'> & {
 
 type LinkTypeProps = LinkProps & {
     type: 'link';
+    onClick?: never;
 }
 
 type ConfirmButtonTypeProps<NAME> = Omit<ConfirmButtonProps<NAME>, 'type'> & {
     type: 'confirm-button',
 }
 
-type Props<N> = CommonProp & (ButtonTypeProps<N> | LinkTypeProps | ConfirmButtonTypeProps<N>);
+type Props<NAME> = CommonProp & (
+    ButtonTypeProps<NAME> | LinkTypeProps | ConfirmButtonTypeProps<NAME>
+);
 
 function DropdownMenuItem<NAME>(props: Props<NAME>) {
     const {
-        type,
-        onClick,
         persist = false,
+        onClick,
+        withoutFullWidth,
+        ...remainingProps
     } = props;
+
     const { setShowDropdown } = useContext(DropdownMenuContext);
 
     const handleLinkClick = useCallback(
@@ -51,72 +57,81 @@ function DropdownMenuItem<NAME>(props: Props<NAME>) {
 
     const handleButtonClick = useCallback(
         (name: NAME, e: React.MouseEvent<HTMLButtonElement>) => {
-            if (!persist) {
-                setShowDropdown(false);
-            }
-            if (isDefined(onClick) && type !== 'link') {
-                onClick(name, e);
+            if (remainingProps.type !== 'link') {
+                if (!persist) {
+                    setShowDropdown(false);
+                }
+
+                if (isDefined(onClick)) {
+                    onClick(name, e);
+                }
             }
         },
-        [setShowDropdown, type, onClick, persist],
+        [setShowDropdown, persist, onClick, remainingProps.type],
     );
 
-    if (type === 'link') {
+    if (remainingProps.type === 'link') {
         const {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             type: _,
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            persist: __,
-            variant = 'dropdown-item',
+            styleVariant = 'transparent',
+            colorVariant = 'text',
+            children,
             ...otherProps
-        } = props;
+        } = remainingProps;
 
         return (
             <Link
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...otherProps}
-                variant={variant}
+                styleVariant={styleVariant}
+                colorVariant={colorVariant}
                 onClick={handleLinkClick}
-            />
+                withFullWidth={!withoutFullWidth}
+            >
+                {children}
+            </Link>
         );
     }
 
-    if (type === 'button') {
+    if (remainingProps.type === 'button') {
         const {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             type: _,
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            persist: __,
-            variant = 'dropdown-item',
+            styleVariant = 'transparent',
+            colorVariant = 'text',
             ...otherProps
-        } = props;
+        } = remainingProps;
 
         return (
             <Button
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...otherProps}
-                variant={variant}
+                styleVariant={styleVariant}
+                colorVariant={colorVariant}
                 onClick={handleButtonClick}
+                withFullWidth={!withoutFullWidth}
             />
         );
     }
 
-    if (type === 'confirm-button') {
+    if (remainingProps.type === 'confirm-button') {
         const {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             type: _,
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            persist: __,
-            variant = 'dropdown-item',
+            styleVariant = 'transparent',
+            colorVariant = 'text',
             ...otherProps
-        } = props;
+        } = remainingProps;
 
         return (
             <ConfirmButton
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...otherProps}
-                variant={variant}
+                styleVariant={styleVariant}
+                colorVariant={colorVariant}
                 onClick={handleButtonClick}
+                withFullWidth={!withoutFullWidth}
             />
         );
     }

app/src/components/FourHundredThree/index.tsx

@@ -51,7 +51,8 @@ function FourHundredThree() {
                 </div>
                 <Link
                     to="home"
-                    variant="primary"
+                    colorVariant="primary"
+                    styleVariant="filled"
                 >
                     {strings.permissionDeniedExploreOurHomepage}
                 </Link>

app/src/components/GlobalFooter/i18n.json

@@ -8,7 +8,7 @@
         "footerOtherResources":"Other Resources",
         "footerGoWiki":"GO Wiki",
         "footerContactUs":"Contact Us",
-        "footerIFRC":"© IFRC {year} v{appVersion}",
+        "footerIFRC":"© IFRC {year} {appVersion}",
         "globalFindOut": "Find Out More",
         "policies": "Policies",
         "cookiePolicy": "Cookie Policy",