feat(component-index): 1555-component-index-filter-ui-functionality (c…

…arbon-design-system#1584) * feat(component-index): 1555-component-index-filter-ui-functionality * all design updates done - except grid * responsive breakpoints updated - need to fix left grid alignment * feat(component-index): 1555-component-index-filter-ui-functionality - soft launch preview * things working * feat(component-index): all features should be working * updated filter refactor * feat(component-index): 1555-component-index-filter-ui-functionality - soft launch * Update src/components/ComponentIndexPage/index.js Co-authored-by: Josh Black <[email protected]> * feat(component-index): redirect, and css updates * feat(component-index): deleted components mdx file * Update src/data/nav-items.yaml Co-authored-by: jillianhowarth <[email protected]> Co-authored-by: andrea.cardonaibm.com <andrea.cardonaibm.com> Co-authored-by: Josh Black <[email protected]> Co-authored-by: Vince Picone <[email protected]> Co-authored-by: jillianhowarth <[email protected]>
natashadecoste · May 19, 2021 · fb44ef6 · fb44ef6
1 parent 4b65ac3
commit fb44ef6
Show file tree

Hide file tree

Showing 11 changed files with 274 additions and 165 deletions.
diff --git a/conf.d/rewrite.conf b/conf.d/rewrite.conf
@@ -27,4 +27,7 @@ rewrite /experimental/dashboard-widgets/(.*) https://pages.github.ibm.com/CDAI-d
 rewrite /experimental/order-summary-template/(.*) https://pages.github.ibm.com/CDAI-design/CDAI-design-website/patterns/order-summary/\$1 permanent;
 
 # Experimental -> community
-rewrite /experimental/(.*) /community/patterns/\$1 permanent;
+rewrite /experimental/(.*) /community/patterns/\$1 permanent;
+
+# Community index
+rewrite /community/components /community/component-index permanent;
diff --git a/src/components/ComponentIndexPage/ComponentIndexListItem.js b/src/components/ComponentIndexPage/ComponentIndexListItem.js
@@ -25,7 +25,6 @@ import figmaIcon from './images/Figma.svg';
 import sketchIcon from './images/Sketch.svg';
 import xdIcon from './images/XD.svg';
 
-const href = '/get-started/about-carbon';
 const frameworkIcons = {
   Angular: angularIcon,
   React: reactIcon,
@@ -51,7 +50,7 @@ const ComponentIndexListItem = React.memo(
     name,
     websiteUrl,
   }) => {
-    let img = undefined;
+    let img;
 
     if (image?.fluid) {
       img = (
@@ -71,69 +70,65 @@ const ComponentIndexListItem = React.memo(
     }
 
     return (
-      <Row>
-        <Column sm={4} md={8} lg={9}>
-          <article className="component-index-item">
-            <div className="component-index-item__image bx--aspect-ratio bx--aspect-ratio--4x3">
-              {img}
-            </div>
-            <div className="component-index-item__content">
-              <header className="component-index-item__name">{name}</header>
-              <p className="component-index-item__description">{description}</p>
-              <footer className="component-index-item__info">
-                <div className="component-index-item__links">
-                  <Link
-                    className="component-index-item__link"
-                    href={websiteUrl}
-                    rel="noopener noreferrer">
-                    Website
-                  </Link>
-                  {codeUrl && (
-                    <>
-                      <div className="component-index-item__divider" />
-                      <Link
-                        className="component-index-item__link"
-                        href={codeUrl}
-                        rel="noopener noreferrer">
-                        Code
-                      </Link>
-                    </>
-                  )}
-                </div>
-                <ul className="component-index-item__tags">
-                  {framework && (
-                    <li className="component-index-item__tag component-index-item__tag--framework">
-                      <TooltipIcon direction="top" tooltipText={framework}>
-                        <img
-                          src={frameworkIcons[framework] || null}
-                          alt={framework}
-                        />
-                      </TooltipIcon>
-                    </li>
-                  )}
-                  {designAsset && (
-                    <li className="component-index-item__tag component-index-item__tag--design-asset">
-                      <TooltipIcon direction="top" tooltipText={designAsset}>
-                        <img
-                          src={designAssetIcons[designAsset] || null}
-                          alt={designAsset}
-                        />
-                      </TooltipIcon>
-                    </li>
-                  )}
-                  {maintainer && (
-                    <li className="component-index-item__tag component-index-item__tag--maintainer">
-                      <TooltipIcon direction="top" tooltipText="Maintainer">
-                        <Tag>{maintainer}</Tag>
-                      </TooltipIcon>
-                    </li>
-                  )}
-                </ul>
-              </footer>
-            </div>
-          </article>
-        </Column>
-      </Row>
+      <>
+        <article className="component-index-item">
+          <div className="component-index-item__image">{img}</div>
+          <div className="component-index-item__content">
+            <header className="component-index-item__name">{name}</header>
+            <p className="component-index-item__description">{description}</p>
+            <footer className="component-index-item__info">
+              <div className="component-index-item__links">
+                <Link
+                  className="component-index-item__link"
+                  href={websiteUrl}
+                  rel="noopener noreferrer">
+                  Website
+                </Link>
+                {codeUrl && (
+                  <>
+                    <div className="component-index-item__divider" />
+                    <Link
+                      className="component-index-item__link"
+                      href={codeUrl}
+                      rel="noopener noreferrer">
+                      Code
+                    </Link>
+                  </>
+                )}
+              </div>
+              <ul className="component-index-item__tags">
+                {framework && (
+                  <li className="component-index-item__tag component-index-item__tag--framework">
+                    <TooltipIcon direction="top" tooltipText={framework}>
+                      <img
+                        src={frameworkIcons[framework] || null}
+                        alt={framework}
+                      />
+                    </TooltipIcon>
+                  </li>
+                )}
+                {designAsset && (
+                  <li className="component-index-item__tag component-index-item__tag--design-asset">
+                    <TooltipIcon direction="top" tooltipText={designAsset}>
+                      <img
+                        src={designAssetIcons[designAsset] || null}
+                        alt={designAsset}
+                      />
+                    </TooltipIcon>
+                  </li>
+                )}
+                {maintainer && (
+                  <li className="component-index-item__tag component-index-item__tag--maintainer">
+                    <TooltipIcon direction="top" tooltipText="Maintainer">
+                      <Tag>{maintainer}</Tag>
+                    </TooltipIcon>
+                  </li>
+                )}
+              </ul>
+            </footer>
+          </div>
+        </article>
+      </>
     );
   }
 );

diff --git a/src/components/ComponentIndexPage/ComponentIndexNotFound.js b/src/components/ComponentIndexPage/ComponentIndexNotFound.js
@@ -5,15 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Row, Column } from 'carbon-components-react';
+import { Row, Column, Link } from 'carbon-components-react';
 import React from 'react';
 
+const coreComponentsLink = '/components/overview';
+
 function ComponentIndexNotFound() {
   return (
     <div className="component-index-not-found">
-      <h2 className="component-index-not-found__title">No results found</h2>
       <Row>
         <Column sm={4} md={6} lg={6}>
+          <h2 className="component-index-not-found__title">No results found</h2>
           <p className="component-index-not-found__text">
             It appears we don’t have a communtiy component that matches your
             search. Try different search terms.
@@ -24,8 +26,14 @@ function ComponentIndexNotFound() {
         <Column sm={4} md={6} lg={6}>
           <p className="component-index-not-found__text">
             This community component index does not include the Carbon core
-            components and you may find what you’re looking for in the core
-            component list.
+            components and you may find what you're looking for in the
+            <Link
+              className="component-index-not-found__link"
+              href={coreComponentsLink}
+              rel="noopener noreferrer">
+              core component
+            </Link>
+            list.
           </p>
         </Column>
       </Row>

diff --git a/src/components/ComponentIndexPage/ComponentIndexSearch.js b/src/components/ComponentIndexPage/ComponentIndexSearch.js
@@ -1,4 +1,4 @@
-import { Search, Row, Column } from 'carbon-components-react';
+import { Search } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -9,18 +9,14 @@ function ComponentIndexSearch({ value, onChange }) {
 
   return (
     <div className="component-index-search">
-      <Row>
-        <Column sm={4} md={8} lg={9}>
-          <Search
-            light
-            id="component-index-search"
-            labelText="Search component index by name, keyword, or domain"
-            placeHolderText="Component name, keyword, domain"
-            value={value}
-            onChange={handleOnChange}
-          />
-        </Column>
-      </Row>
+      <Search
+        light
+        id="component-index-search"
+        labelText="Search component index by name, keyword, or domain"
+        placeHolderText="Component name, keyword, domain"
+        value={value}
+        onChange={handleOnChange}
+      />
     </div>
   );
 }

diff --git a/src/components/ComponentIndexPage/ComponentIndexSort.js b/src/components/ComponentIndexPage/ComponentIndexSort.js
@@ -5,29 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Dropdown, Row, Column } from 'carbon-components-react';
+import { Dropdown } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 function ComponentIndexSort({ initialSortOption, options, onChange }) {
   return (
-    <Row className="component-index-sort-container">
-      <Column sm={4} md={8} lg={9}>
-        <div className="component-index-sort">
-          <Dropdown
-            id="component-index-sort"
-            initialSelectedItem={initialSortOption}
-            items={options}
-            label="Sort"
-            light
-            onChange={({ selectedItem }) => {
-              onChange(selectedItem);
-            }}
-            type="inline"
-          />
-        </div>
-      </Column>
-    </Row>
+    <div className="component-index-sort-container">
+      <div className="component-index-sort">
+        <Dropdown
+          id="component-index-sort"
+          initialSelectedItem={initialSortOption}
+          items={options}
+          label="Sort"
+          light
+          onChange={({ selectedItem }) => {
+            onChange(selectedItem);
+          }}
+          type="inline"
+        />
+      </div>
+    </div>
   );
 }