project: Storybook audit

app/src/components/GoBreadcrumbs/index.tsx

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import { Breadcrumbs } from '@ifrc-go/ui';
+
+import Link, { type InternalLinkProps } from '../Link';
+
+interface RouteData {
+    to: InternalLinkProps['to'];
+    label: React.ReactNode;
+    urlParams?: Record<string, string | number | null | undefined>;
+}
+
+interface GoBreadcrumbsProps {
+    routeData: RouteData[]
+}
+
+function GoBreadcrumbs(props: GoBreadcrumbsProps) {
+    const { routeData } = props;
+
+    const rendererParams = useCallback((_: RouteData['to'], item: RouteData)
+    : InternalLinkProps => (
+        {
+            to: item.to,
+            urlParams: item.urlParams,
+        }
+    ), []);
+
+    return (
+        <Breadcrumbs
+            <
+                RouteData['to'],
+                RouteData,
+                (InternalLinkProps & { children: React.ReactNode })
+            >
+            data={routeData}
+            keySelector={(datum) => datum.to}
+            labelSelector={(datum) => datum.label}
+            renderer={Link}
+            rendererParams={rendererParams}
+        />
+    );
+}
+
+export default GoBreadcrumbs;

app/src/components/NavigationTab/index.tsx

@@ -188,6 +188,7 @@ function NavigationTab(props: Props) {
             )}
             <div className={styles.childrenWrapper}>
                 {children}
+                <div className={styles.activeChildrenBorder} />
             </div>
             {variant === 'primary' && (
                 <div className={styles.dummy} />

app/src/components/NavigationTab/styles.module.css

@@ -135,14 +135,42 @@
         }
     }
 
+
+    &.secondary {
+        border-right: var(--border-width) solid var(--border-color);
+        border-top-color: transparent;
+
+        .children-wrapper {
+            padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
+        }
+
+        &.active {
+            color: var(--go-ui-color-primary-red);
+        }
+
+        &:last-child {
+            border-color: transparent;
+        }
+    }
+
     &.primary {
         position: relative;
         font-size: var(--go-ui-font-size-lg);
 
         .children-wrapper {
+            display:flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-sm);
             border-bottom-color: var(--border-color);
             background-color: var(--go-ui-color-background);
-            padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
+            padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg) var(--go-ui-spacing-xs);
+
+        }
+
+        .active-children-border {
+            background-color: transparent;
+            width: 100%;
+            height: var(--go-ui-width-separator-small);
         }
 
         &.active {
@@ -152,6 +180,10 @@
                 border-color: var(--border-color);
                 border-bottom-color: transparent;
                 background-color: var(--go-ui-color-white);
+
+                .active-children-border {
+                    background-color: var(--go-ui-color-primary-red);
+                }
             }
         }
 
@@ -162,16 +194,6 @@
         }
     }
 
-    &.secondary {
-        border-radius: var(--go-ui-border-radius-full);
-        padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-xl);
-
-        &.active {
-            background-color: var(--go-ui-color-primary-red);
-            color: var(--go-ui-color-white);
-        }
-    }
-
     &.tertiary {
         &:not(.disabled) {
             &:hover {

app/src/components/domain/ActiveOperationMap/index.tsx

@@ -425,7 +425,7 @@ function ActiveOperationMap(props: Props) {
                         value={rawFilter.displacement}
                         onChange={setFilterField}
                     />
-                    <div>
+                    <div className={styles.filterActions}>
                         <Button
                             name={undefined}
                             onClick={handleClearFiltersButtonclick}

app/src/components/domain/ActiveOperationMap/styles.module.css

@@ -1,4 +1,7 @@
 .active-operation-map {
+    .filter-actions {
+        align-self: end;
+    }
     .content {
         position: relative;
 

app/src/views/Country/index.tsx

@@ -10,7 +10,6 @@ import {
 } from 'react-router-dom';
 import { PencilFillIcon } from '@ifrc-go/icons';
 import {
-    Breadcrumbs,
     Message,
     NavigationTabList,
 } from '@ifrc-go/ui';
@@ -23,7 +22,8 @@ import {
     isTruthyString,
 } from '@togglecorp/fujs';
 
-import Link from '#components/Link';
+import GoBreadcrumbs from '#components/GoBreadcrumbs';
+import Link, { type InternalLinkProps } from '#components/Link';
 import NavigationTab from '#components/NavigationTab';
 import Page from '#components/Page';
 import { adminUrl } from '#config';
@@ -43,6 +43,12 @@ import { useRequest } from '#utils/restRequest';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
+type BreadcrumbsDataType = {
+        to: InternalLinkProps['to'];
+        label: string;
+        urlParams?: Record<string, string | number | null | undefined>;
+};
+
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const { countryId } = useParams<{ countryId: string }>();
@@ -94,6 +100,33 @@ export function Component() {
         { countryName: country?.name ?? strings.countryPageTitleFallbackCountry },
     );
 
+    const breadCrumbsData: BreadcrumbsDataType[] = useMemo(() => ([
+        {
+            to: 'home',
+            label: strings.home,
+        },
+        {
+            to: 'regionsLayout',
+            label: region?.region_name ?? '-',
+            urlParams: {
+                regionId: country?.region,
+            },
+        },
+        {
+            to: 'countriesLayout',
+            label: country?.name ?? '-',
+            urlParams: {
+                countryId,
+            },
+        },
+    ]), [
+        strings.home,
+        region?.region_name,
+        country?.region,
+        countryId,
+        country?.name,
+    ]);
+
     if (isDefined(numericCountryId) && isRegion) {
         const regionId = countryIdToRegionIdMap[numericCountryId];
 
@@ -143,29 +176,7 @@ export function Component() {
             title={pageTitle}
             heading={country?.name ?? '--'}
             breadCrumbs={(
-                <Breadcrumbs>
-                    <Link
-                        to="home"
-                    >
-                        {strings.home}
-                    </Link>
-                    <Link
-                        to="regionsLayout"
-                        urlParams={{
-                            regionId: country?.region,
-                        }}
-                    >
-                        {region?.region_name}
-                    </Link>
-                    <Link
-                        to="countriesLayout"
-                        urlParams={{
-                            countryId,
-                        }}
-                    >
-                        {country?.name}
-                    </Link>
-                </Breadcrumbs>
+                <GoBreadcrumbs routeData={breadCrumbsData} />
             )}
             description={
                 isDefined(countryResponse)

app/src/views/Emergency/index.tsx

@@ -13,7 +13,6 @@ import {
     TargetedPopulationIcon,
 } from '@ifrc-go/icons';
 import {
-    Breadcrumbs,
     Button,
     KeyFigure,
     NavigationTabList,
@@ -26,7 +25,8 @@ import {
     listToMap,
 } from '@togglecorp/fujs';
 
-import Link from '#components/Link';
+import GoBreadcrumbs from '#components/GoBreadcrumbs';
+import Link, { type InternalLinkProps } from '#components/Link';
 import NavigationTab from '#components/NavigationTab';
 import Page from '#components/Page';
 import { adminUrl } from '#config';
@@ -45,6 +45,12 @@ import {
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
+type BreadcrumbsDataType = {
+        to: InternalLinkProps['to'];
+        label: string;
+        urlParams?: Record<string, string | number | null | undefined>;
+};
+
 /*
 function getRouteIdFromName(text: string) {
     return text.toLowerCase().trim().split(' ').join('-');
@@ -209,6 +215,29 @@ export function Component() {
         ].filter((tabInfo) => tabInfo.snippets.length > 0);
     }, [emergencyResponse, emergencySnippetResponse]);
 
+    const breadCrumbsData: BreadcrumbsDataType[] = useMemo(() => ([
+        {
+            to: 'home',
+            label: strings.home,
+        },
+        {
+            to: 'emergencies',
+            label: strings.emergencies,
+        },
+        {
+            to: 'emergencyDetails',
+            label: emergencyResponse?.name ?? '-',
+            urlParams: {
+                emergencyId,
+            },
+        },
+    ]), [
+        strings.home,
+        strings.emergencies,
+        emergencyId,
+        emergencyResponse?.name,
+    ]);
+
     const outletContext = useMemo<EmergencyOutletContext>(
         () => ({
             emergencyResponse,
@@ -225,20 +254,9 @@ export function Component() {
             className={styles.emergency}
             title={strings.emergencyPageTitle}
             breadCrumbs={(
-                <Breadcrumbs>
-                    <Link to="home">
-                        {strings.home}
-                    </Link>
-                    <Link to="emergencies">
-                        {strings.emergencies}
-                    </Link>
-                    <Link
-                        to="emergencyDetails"
-                        urlParams={{ emergencyId }}
-                    >
-                        {emergencyResponse?.name}
-                    </Link>
-                </Breadcrumbs>
+                <GoBreadcrumbs
+                    routeData={breadCrumbsData}
+                />
             )}
             actions={isAuthenticated && (
                 <>