Move the see all data sources chip into the link chip group

static/js/apps/explore_landing/components/stat_var_queries.tsx

@@ -33,14 +33,14 @@ export function StatVarQueries({ queries }: StatVarQueriesProps): ReactElement {
     id: query.url,
     title: query.title,
     url: query.url,
+    variant: "flat",
   }));
 
   if (queries.length === 0) {
     return null;
   }
   return (
     <LinkChips
-      variant="flat"
       header={
         "Explore statistical variables around the world in the Timeline explorer tool"
       }

static/js/apps/homepage/app.tsx

@@ -63,6 +63,7 @@ export function App({
     id: topic.id,
     title: topic.title,
     url: topic.browseUrl,
+    variant: "elevated",
   }));
 
   return (

static/js/apps/homepage/components/home_hero.tsx

@@ -34,6 +34,14 @@ interface HomeHeroProps {
 
 export const HomeHero = ({ linkChips }: HomeHeroProps): ReactElement => {
   const theme = useTheme();
+
+  linkChips.push({
+    id: "data-sources",
+    title: "See all available data sources",
+    url: "https://docs.datacommons.org/datasets/",
+    variant: "flat",
+  });
+
   return (
     <HeroColumns>
       <HeroColumns.Left>
@@ -53,20 +61,6 @@ export const HomeHero = ({ linkChips }: HomeHeroProps): ReactElement => {
           section="topic"
           linkChips={linkChips}
         />
-        <div
-          css={css`
-            margin-top: ${theme.spacing.xxl}px;
-          `}
-        >
-          <LinkChip
-            variant="flat"
-            linkChip={{
-              id: "data-sources",
-              title: "See all available data sources",
-              url: "https://docs.datacommons.org/datasets/",
-            }}
-          />
-        </div>
       </HeroColumns.Right>
     </HeroColumns>
   );

static/js/components/content/link_chips.tsx

@@ -47,6 +47,14 @@ export const LinkChips = ({
   linkChips,
 }: LinkChipsProps): ReactElement => {
   const theme = useTheme();
+
+  linkChips.map((lc) => {
+    if (!lc.variant) {
+      lc.variant = variant;
+    }
+    return lc;
+  });
+
   return (
     <>
       {header && (
@@ -88,12 +96,7 @@ export const LinkChips = ({
         `}
       >
         {linkChips.map((linkChip) => (
-          <LinkChip
-            key={linkChip.id}
-            variant={variant}
-            section={section}
-            linkChip={linkChip}
-          />
+          <LinkChip key={linkChip.id} section={section} linkChip={linkChip} />
         ))}
       </div>
     </>

static/js/components/elements/link_chip.tsx

@@ -40,31 +40,32 @@ export interface Link {
   title: string;
   //the url of the chip link
   url: string;
+  //the variant of the link chip
+  variant?: "elevated" | "flat";
 }
 
 interface LinkChipProps {
-  //the variant of the link chip to display: elevated is a raised grey chip and flat is a flat blue chip
-  variant?: "elevated" | "flat";
   //the link chip to be displayed
   linkChip: Link;
   //the section gives location of the chip component in order to give context for the GA event
   section?: string;
 }
 
 export const LinkChip = ({
-  variant = "elevated",
   linkChip,
   section = "",
 }: LinkChipProps): ReactElement => {
   const theme = useTheme();
 
   const chipStyles = css`
-    ${variant === "elevated" ? theme.box.primary : theme.box.secondary};
-    ${variant === "elevated" ? theme.elevation.primary : ""};
+    ${linkChip.variant === "elevated"
+      ? theme.box.primary
+      : theme.box.secondary};
+    ${linkChip.variant === "elevated" ? theme.elevation.primary : ""};
     ${theme.typography.family.text};
     ${theme.typography.text.md};
     ${theme.radius.primary};
-    color: ${variant === "elevated"
+    color: ${linkChip.variant === "elevated"
       ? theme.colors.link.primary.base
       : theme.colors.text.primary.base};
     line-height: 1rem;
@@ -77,7 +78,7 @@ export const LinkChip = ({
 
     &:hover {
       text-decoration: none;
-      color: ${variant === "elevated"
+      color: ${linkChip.variant === "elevated"
         ? theme.colors.link.primary.base
         : theme.colors.text.primary.base};
       .icon {
@@ -88,7 +89,7 @@ export const LinkChip = ({
     .icon {
       transition: transform 0.1s ease-in-out;
       svg {
-        fill: ${variant === "elevated"
+        fill: ${linkChip.variant === "elevated"
           ? theme.colors.link.primary.base
           : theme.colors.text.primary.base};
       }