feat(component-index): info links Website & Code (carbon-design-syste…

…m#1553) Co-authored-by: andrea.cardonaibm.com <andrea.cardonaibm.com>
natashadecoste · May 19, 2021 · 43b83df · 43b83df
1 parent 2d5f12a
commit 43b83df
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/src/components/ComponentIndexPage/ComponentIndexList.js b/src/components/ComponentIndexPage/ComponentIndexList.js
@@ -30,13 +30,19 @@ const designAssetIcons = {
   XD: xdIcon,
 };
 
-const href = '/get-started/about-carbon';
-
 function ComponentIndexList({ items }) {
   return (
     <section aria-label="Component index">
       {items.map(
-        ({ name, description, maintainer, framework, designAsset }) => {
+        ({
+          name,
+          description,
+          maintainer,
+          framework,
+          designAsset,
+          codeUrl,
+          websiteUrl,
+        }) => {
           const key = `${name}:${maintainer}`;
           return (
             <Row key={key}>
@@ -63,14 +69,14 @@ function ComponentIndexList({ items }) {
                       <div className="component-index-item__links">
                         <Link
                           className="component-index-item__link"
-                          href={href}
+                          href={websiteUrl}
                           rel="noopener noreferrer">
                           Website
                         </Link>
                         <div className="component-index-item__divider" />
                         <Link
                           className="component-index-item__link"
-                          href={href}
+                          href={codeUrl}
                           rel="noopener noreferrer">
                           Code
                         </Link>

diff --git a/src/components/ComponentIndexPage/index.js b/src/components/ComponentIndexPage/index.js
@@ -26,6 +26,8 @@ const ALL_COMPONENTS_QUERY = graphql`
           aliases
           framework
           design_asset
+          code_url
+          website_url
         }
       }
     }
@@ -42,6 +44,8 @@ const searchOptions = {
     'node.aliases',
     'node.framework',
     'node.design_asset',
+    'node.code_url',
+    'node.website_url',
   ],
 };
 
@@ -118,13 +122,17 @@ function ComponentIndexPage() {
                 maintainer,
                 framework,
                 design_asset: designAsset,
+                code_url: codeUrl,
+                website_url: websiteUrl,
               } = node;
               return {
                 name,
                 description,
                 maintainer,
                 framework,
                 designAsset,
+                codeUrl,
+                websiteUrl,
               };
             })}
         />