Merge branch '1137-implement-new-ds-page-header' into bundle-custom-u…

…swds-styles
NASA-IMPACT · Dec 6, 2024 · 2f7c96c · 2f7c96c
2 parents 58d6351 + 3dc5c54
commit 2f7c96c
Show file tree

Hide file tree

Showing 45 changed files with 1,603 additions and 288 deletions.
diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
@@ -187,15 +187,17 @@ const CardLabel = styled.span`
 
 const CardFigure = styled(Figure)`
   order: -1;
-  background: ${themeVal('color.primary-100')};
-  min-height: ${variableGlsp(12)};
+  width: 100%;
+  ${(props) => !props.isCoverOrFeatured && `aspect-ratio: 2/1;`}
+  background: ${(props) =>
+    props.src ? 'none' : props.theme.color['primary-100']};
 
   img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     mix-blend-mode: multiply;
-    display: ${(props) => (props.src ? 'inline-block' : 'none')};
+    display: ${(props) => (props.src ? 'block' : 'none')};
   }
 `;
 
@@ -288,7 +290,7 @@ function CardComponent(props: CardComponentPropsType) {
     footerContent,
     hideExternalLinkBadge,
     onCardClickCapture,
-    onClick,
+    onClick
   } = props;
   // @TODO: This process is not necessary once all the instances adapt the linkProperties syntax
   // Consolidate them to use LinkProperties only
@@ -300,18 +302,29 @@ function CardComponent(props: CardComponentPropsType) {
     linkProperties = linkPropertiesProps;
   } else {
     const { linkTo } = props;
-    linkProperties = linkTo ? {
-      linkTo,
-      pathAttributeKeyName: 'to',
-      LinkElement: SmartLink
-    } : undefined;
+    linkProperties = linkTo
+      ? {
+          linkTo,
+          pathAttributeKeyName: 'to',
+          LinkElement: SmartLink
+        }
+      : undefined;
   }
 
-  const isExternalLink = linkProperties ? /^https?:\/\//.test(linkProperties.linkTo) : false;
+  const isExternalLink = linkProperties
+    ? /^https?:\/\//.test(linkProperties.linkTo)
+    : false;
 
   return (
     <ElementInteractive
-      {...(linkProperties ? {linkProps: {as: linkProperties.LinkElement, [linkProperties.pathAttributeKeyName]: linkProperties.linkTo}} : {})}
+      {...(linkProperties
+        ? {
+            linkProps: {
+              as: linkProperties.LinkElement,
+              [linkProperties.pathAttributeKeyName]: linkProperties.linkTo
+            }
+          }
+        : {})}
       as={CardItem}
       cardType={cardType}
       className={className}
@@ -359,7 +372,10 @@ function CardComponent(props: CardComponentPropsType) {
             </CardBody>
           )}
           {footerContent && <CardFooter>{footerContent}</CardFooter>}
-          <CardFigure src={imgSrc}>
+          <CardFigure
+            src={imgSrc}
+            isCoverOrFeatured={cardType === 'cover' || cardType === 'featured'}
+          >
             <img src={imgSrc} alt={imgAlt} loading='lazy' />
           </CardFigure>
         </>

diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx
@@ -13,6 +13,7 @@ import { DatasetData, DatasetLayer } from "$types/veda";
 import { getDatasetPath } from "$utils/routes";
 import { TAXONOMY_SOURCE, TAXONOMY_TOPICS, getAllTaxonomyValues, getTaxonomy } from "$utils/veda-data/taxonomies";
 import { Pill } from "$styles/pill";
+import { usePathname } from "$utils/use-pathname";
 
 interface CatalogCardProps {
   dataset: DatasetData;
@@ -21,7 +22,6 @@ interface CatalogCardProps {
   selectable?: boolean;
   selected?: boolean;
   onDatasetClick?: () => void;
-  pathname?: string;
   linkProperties?: LinkProperties;
 }
 
@@ -102,10 +102,11 @@ export const CatalogCard = (props: CatalogCardProps) => {
     selectable,
     selected,
     onDatasetClick,
-    linkProperties,
-    pathname
+    linkProperties
   } = props;
 
+  const pathname = usePathname();
+
   const topics = getTaxonomy(dataset, TAXONOMY_TOPICS)?.values;
   const sources = getTaxonomy(dataset, TAXONOMY_SOURCE)?.values;
   const allTaxonomyValues = getAllTaxonomyValues(dataset).map((v) => v.name);

diff --git a/app/scripts/components/common/catalog/catalog-content.tsx b/app/scripts/components/common/catalog/catalog-content.tsx
@@ -35,7 +35,6 @@ export interface CatalogContentProps {
   taxonomies: Record<string, string[]>;
   onAction: (action: FilterActions, value?: any) => void;
   linkProperties: LinkProperties;
-  pathname?: string;
 }
 
 const DEFAULT_SORT_OPTION = 'asc';
@@ -72,7 +71,6 @@ function CatalogContent({
   search,
   taxonomies,
   onAction,
-  pathname,
   linkProperties
 }: CatalogContentProps) {
   const [exclusiveSourceSelected, setExclusiveSourceSelected] = useState<string | null>(null);
@@ -215,7 +213,6 @@ function CatalogContent({
         exclusiveSourceSelected={exclusiveSourceSelected}
         customTopOffset={isSelectable ? 50 : 0}
         openByDefault={false}
-        pathname={pathname}
       />
       <Catalog>
         <CatalogTagsContainer
@@ -264,7 +261,6 @@ function CatalogContent({
                           selectable={true}
                           selected={selectedIds.includes(datasetLayer.id)}
                           onDatasetClick={() => onCardSelect(datasetLayer.id, currentDataset)}
-                          pathname={pathname}
                         />
                       </li>
                     ))}
@@ -280,7 +276,6 @@ function CatalogContent({
                     dataset={d}
                     searchTerm={search}
                     linkProperties={linkProperties}
-                    pathname={pathname}
                   />
                 </li>
               ))}

diff --git a/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts b/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts
@@ -8,7 +8,7 @@ import { FilterActions, FilterAction, onFilterAction } from '../../utils';
 export interface UseFiltersWithQueryResult {
   search: string;
   taxonomies: Record<string, string[]> | Record<string, never>;
-  onAction: FilterAction
+  onAction: FilterAction;
 }
 
 // @TECH-DEBT: We have diverged ways of dealing with query parameters and need to consolidate them.
@@ -28,19 +28,26 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult {
   return {
     search,
     taxonomies,
-    onAction,
+    onAction
   };
 }
 
-  export function useFiltersWithQS({
-    navigate
-  }: {
-    navigate: any
-  }): UseFiltersWithQueryResult {
-
-    const useQsState = useQsStateCreator({
-      commit: navigate
-    });
+export function useFiltersWithQS(): UseFiltersWithQueryResult {
+  const useQsState = useQsStateCreator({
+    commit: ({ search }) => {
+      if (typeof window !== 'undefined') {
+        const currentUrl = new URL(window.location.href);
+        const searchParams = search.startsWith('?') ? search.slice(1) : search;
+        currentUrl.search = searchParams;
+        window.history.pushState({}, '', currentUrl.toString());
+      } else {
+        // eslint-disable-next-line no-console
+        console.log(
+          'useFiltersWithQS: window is undefined, query string will update.'
+        );
+      }
+    }
+  });
 
   const [search, setSearch] = useQsState.memo(
     {
@@ -60,16 +67,16 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult {
     []
   );
 
-
   const onAction = useCallback<FilterAction>(
     (action, value) => {
-      onFilterAction(action, value, taxonomies, setSearch, setTaxonomies);},
+      onFilterAction(action, value, taxonomies, setSearch, setTaxonomies);
+    },
     [setSearch, setTaxonomies, taxonomies]
   );
 
   return {
-    search: search?? '',
-    taxonomies: taxonomies?? {},
-    onAction,
+    search: search ?? '',
+    taxonomies: taxonomies ?? {},
+    onAction
   };
-}
+}
diff --git a/app/scripts/components/common/catalog/filters-control.tsx b/app/scripts/components/common/catalog/filters-control.tsx
@@ -5,6 +5,7 @@ import { Taxonomy } from '$types/veda';
 import SearchField from '$components/common/search-field';
 import CheckableFilters, { OptionItem } from '$components/common/form/checkable-filter';
 import { useSlidingStickyHeader, HEADER_TRANSITION_DURATION } from '$utils/use-sliding-sticky-header';
+import { usePathname } from '$utils/use-pathname';
 
 const ControlsWrapper = styled.div<{ widthValue?: string; heightValue?: string; topValue: string }>`
   min-width: 20rem;
@@ -27,7 +28,6 @@ interface FiltersMenuProps {
   exclusiveSourceSelected?: string | null;
   customTopOffset?: number;
   openByDefault?: boolean;
-  pathname?: string;
 }
 
 export default function FiltersControl(props: FiltersMenuProps) {
@@ -48,9 +48,10 @@ export default function FiltersControl(props: FiltersMenuProps) {
     // uses as a reference (the main page header). To avoid changing the reference IDs in the
     // main logic of the sliding sticky header hook, we provide this custom top offset for more control.
     customTopOffset = 0,
-    pathname,
   } = props;
 
+  const pathname = usePathname();
+
   const controlsRef = useRef<HTMLDivElement>(null);
   const [controlsHeight, setControlsHeight] =  useState<number>(0);
   const { isHeaderHidden, wrapperHeight } = useSlidingStickyHeader(pathname);

diff --git a/app/scripts/components/common/catalog/index.tsx b/app/scripts/components/common/catalog/index.tsx
@@ -42,13 +42,11 @@ export interface CatalogViewProps {
     onAction: () => void,
   } | any;
   linkProperties: LinkProperties;
-  pathname: string;
 }
 
 function CatalogView({
   datasets,
   onFilterChanges,
-  pathname,
   linkProperties,
 }: CatalogViewProps) {
 
@@ -72,7 +70,6 @@ function CatalogView({
         search={search}
         taxonomies={taxonomies}
         onAction={onAction}
-        pathname={pathname}
         linkProperties={linkProperties}
       />
     </CatalogWrapper>