re-introduce horizontal overview diagram with category icons/links fo…

…r single frameworks
impactoss · Nov 30, 2023 · b34aab2 · b34aab2
1 parent b5a7453
commit b34aab2
Show file tree

Hide file tree

Showing 7 changed files with 1,533 additions and 479 deletions.
diff --git a/app/components/categoryList/TaxonomySidebar/index.js b/app/components/categoryList/TaxonomySidebar/index.js
@@ -111,6 +111,7 @@ class TaxonomySidebar extends React.PureComponent { // eslint-disable-line react
       taxonomies,
       active,
       onTaxonomyLink,
+      onTaxonomyOver,
       frameworkId,
       frameworks,
     } = this.props;
@@ -166,9 +167,25 @@ class TaxonomySidebar extends React.PureComponent { // eslint-disable-line react
                       <div>
                         {map(group.taxonomies, (taxonomy) => (
                           <div key={taxonomy.id}>
-                            <TaxonomySidebarItem taxonomy={taxonomy} onTaxonomyClick={this.onHideSidebar} />
+                            <TaxonomySidebarItem
+                              taxonomy={taxonomy}
+                              onTaxonomyClick={this.onHideSidebar}
+                              onTaxonomyOver={onTaxonomyOver}
+                            />
                             <div>
-                              { taxonomy.children && taxonomy.children.length > 0 && map(taxonomy.children, (child) => <TaxonomySidebarItem key={child.id} nested taxonomy={child} onTaxonomyClick={this.onHideSidebar} />)}
+                              {taxonomy.children
+                                && taxonomy.children.length > 0
+                                && taxonomy.children.map(
+                                  (child) => (
+                                    <TaxonomySidebarItem
+                                      key={child.id}
+                                      nested
+                                      taxonomy={child}
+                                      onTaxonomyClick={this.onHideSidebar}
+                                      onTaxonomyOver={onTaxonomyOver}
+                                    />
+                                  )
+                                )}
                             </div>
                           </div>
                         ))}
@@ -190,6 +207,7 @@ TaxonomySidebar.propTypes = {
   frameworks: PropTypes.object,
   frameworkId: PropTypes.string,
   onTaxonomyLink: PropTypes.func,
+  onTaxonomyOver: PropTypes.func,
   active: PropTypes.string,
   theme: PropTypes.object,
 };

diff --git a/app/components/categoryList/TaxonomySidebarItem/index.js b/app/components/categoryList/TaxonomySidebarItem/index.js
@@ -49,7 +49,12 @@ const TaxIcon = styled.div`
 
 class TaxonomySidebarItem extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   render() {
-    const { taxonomy, nested, onTaxonomyClick } = this.props;
+    const {
+      taxonomy,
+      nested,
+      onTaxonomyClick,
+      onTaxonomyOver,
+    } = this.props;
     return (
       <Styled
         small={nested}
@@ -59,10 +64,10 @@ class TaxonomySidebarItem extends React.PureComponent { // eslint-disable-line r
         }}
         active={taxonomy.active}
         paletteId={parseInt(taxonomy.id, 10)}
-        onMouseOver={() => taxonomy.onMouseOver && taxonomy.onMouseOver()}
-        onFocus={() => taxonomy.onMouseOver && taxonomy.onMouseOver()}
-        onMouseOut={() => taxonomy.onMouseOver && taxonomy.onMouseOver(false)}
-        onBlur={() => taxonomy.onMouseOver && taxonomy.onMouseOver(false)}
+        onMouseOver={() => onTaxonomyOver && onTaxonomyOver(taxonomy.id)}
+        onFocus={() => onTaxonomyOver && onTaxonomyOver(taxonomy.id)}
+        onMouseOut={() => onTaxonomyOver && onTaxonomyOver(null)}
+        onBlur={() => onTaxonomyOver && onTaxonomyOver(null)}
       >
         <TaxIcon>
           <Icon
@@ -82,6 +87,7 @@ TaxonomySidebarItem.propTypes = {
   taxonomy: PropTypes.object,
   nested: PropTypes.bool,
   onTaxonomyClick: PropTypes.func,
+  onTaxonomyOver: PropTypes.func,
 };
 
 TaxonomySidebarItem.contextTypes = {