@blaze-cms/plugin-data-ui 0.139.0-alpha.4 → 0.139.0-alpha.6

package/src/components/ListingTable/ListingTable.js

@@ -3,27 +3,28 @@ import React, { useEffect, useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter, Link } from 'react-router-dom';
 import More from '@blaze-react/more';
-import { MainContext, useMainContext } from '@blaze-cms/admin-ui-utils';
-import { PageHeader, DeleteAction } from '@blaze-cms/admin';
+import { PageHeader, DeleteAction, CardPrompt } from '@blaze-cms/admin';
 import { useToasts } from '@blaze-react/toaster';
+import { RenderHook } from '@blaze-cms/plugin-render-hooks-ui';
 import ListingTableContent from './ListingTableContent';
 import availableActions from '../EntityManager/Entity/actions-handlers';
 import { fetchData } from './service';
-import { populateRows, formatRows } from './mappers/populate-rows';
+import { populateRows, formatRows, getParsedRowData } from './mappers/populate-rows';
 import { getDefaultQueryParams } from '../../utils/get-default-query-params';
 
 const OVER_SCAN_BUFFER = 10;
 
-const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
+const ListingTable = ({ match, entitySchema }) => {
   const [tableData, setTableData] = useState({});
   const [modalStatus, setModalStatus] = useState(false);
   const [itemToDelete, setItemToDelete] = useState({});
   const [previousSchema, setPreviousSchema] = useState({ id: null });
   const [scrollToIndex, setScrollToIndex] = useState(0);
   const [verifiedRanges, setVerifiedRanges] = useState([]);
-  const queryParamsDefault = getDefaultQueryParams({ schema: entitySchema });
+  const queryParamsDefault = getDefaultQueryParams(entitySchema);
   const [queryParams, setQueryParams] = useState(queryParamsDefault);
-  const { menuItems, setMenuItems } = useMainContext(MainContext);
+  const [listFilters, setListFilters] = useState([]);
+  const [displayCardPrompt, setDisplayCardPrompt] = useState(true);
   const client = useApolloClient();
   const { addToast } = useToasts();
 
@@ -34,20 +35,7 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
           entitySchema.id !== previousSchema.id ||
           (previousSchema.id === null && entitySchema.id)
         ) {
-          const data = await fetchData({
-            client,
-            querySettings: {
-              entitySchema,
-              queryParams: queryParamsDefault
-            }
-          });
-          const populatedTable = populateRows({
-            toggleModal,
-            url: match.url,
-            entitySchema,
-            rows: data
-          });
-          setTableData(populatedTable);
+          await doQuery();
           setPreviousSchema({ id: entitySchema.id });
         }
       })();
@@ -55,18 +43,33 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
     [client, entitySchema, match.url, previousSchema.id, queryParams] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  const onCloseCardPrompt = () => {
-    const updatedSelectedMenuItem = {
-      ...selectedMenuItem,
-      isDisplayedPrompt: false
-    };
-    const [{ header, items }] = menuItems;
-    const updatedItems = items.map(
-      item => (item.name === selectedMenuItem.name ? updatedSelectedMenuItem : item)
-    );
-    setMenuItems([{ header, items: updatedItems }]);
+  const doQuery = async (filters = listFilters) => {
+    const data = await fetchData({
+      client,
+      querySettings: {
+        entitySchema,
+        queryParams: queryParamsDefault
+      },
+      listFilters: filters
+    });
+
+    const populatedTable = populateRows({
+      toggleModal,
+      url: match.url,
+      entitySchema,
+      rows: data
+    });
+
+    setTableData(populatedTable);
   };
 
+  const updateListingFilters = async filters => {
+    await doQuery(filters);
+    setListFilters(filters);
+  };
+
+  const onCloseCardPrompt = () => null;
+
   const toggleModal = item => {
     setModalStatus(!!item);
     setItemToDelete(item || {});
@@ -107,15 +110,22 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
       querySettings: {
         entitySchema,
         queryParams: sortQueryParams
-      }
+      },
+      listFilters
     });
-    const { columns } = tableData;
+    const { columns, isEnquiry } = tableData;
     const [firstColumn] = columns;
 
     setTableData({
       ...tableData,
       appliedSort: { [property]: direction },
-      rows: formatRows({ rows: data, url: match.url, toggleModal, firstColumn })
+      rows: formatRows({
+        rows: getParsedRowData(data),
+        url: match.url,
+        toggleModal,
+        firstColumn,
+        isEnquiry
+      })
     });
   };
 
@@ -133,11 +143,17 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
         querySettings: {
           entitySchema,
           queryParams: updatedQueryParams
-        }
+        },
+        listFilters
       });
       const updatedRows = [
         ...tableData.rows,
-        ...formatRows({ rows: data, url: match.url, toggleModal })
+        ...formatRows({
+          rows: getParsedRowData(data),
+          url: match.url,
+          toggleModal,
+          isEnquiry: tableData.isEnquiry
+        })
       ];
 
       setVerifiedRanges([...verifiedRanges, loadIndex]);
@@ -151,6 +167,7 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
   };
 
   if (!tableData || !tableData.rows) return 'loading';
+  const showAddButton = !!tableData.rows.length && !tableData.isEnquiry;
 
   return (
     <div className="page">
@@ -162,7 +179,7 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
         />
       )}
       <PageHeader title={entitySchema.displayName} subtitle="">
-        {(!selectedMenuItem.isDisplayedPrompt || !!tableData.rows.length) && (
+        {showAddButton && (
           <Fragment>
             <Link
               data-testid="addEntity"
@@ -181,13 +198,31 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
           </Fragment>
         )}
       </PageHeader>
+      {displayCardPrompt &&
+        !showAddButton && (
+          <CardPrompt
+            onClose={() => {
+              setDisplayCardPrompt(false);
+            }}>
+            <Link
+              className="button button--rounded button--cta"
+              to={`${match.url}/create`}
+              data-testid="add-button">
+              Add
+            </Link>
+          </CardPrompt>
+        )}
+      <RenderHook
+        hookKey="entity:listing:main:top"
+        schema={entitySchema}
+        setListFilters={updateListingFilters}
+      />
       <ListingTableContent
         overScanBuffer={OVER_SCAN_BUFFER}
         onSort={handleSort}
         onRenderItems={handleRenderedItems}
         tableData={tableData}
         onCloseCardPrompt={onCloseCardPrompt}
-        selectedMenuItem={selectedMenuItem}
         scrollToIndex={scrollToIndex}
       />
     </div>
@@ -195,8 +230,7 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
 };
 ListingTable.propTypes = {
   entitySchema: PropTypes.object.isRequired,
-  match: PropTypes.object.isRequired,
-  selectedMenuItem: PropTypes.object.isRequired
+  match: PropTypes.object.isRequired
 };
 
 export default withRouter(ListingTable);

package/src/components/ListingTable/ListingTableContent/ListingTableContent.js

@@ -1,15 +1,11 @@
 import React from 'react';
 import Table from '@blaze-react/table';
 import PropTypes from 'prop-types';
-import { CardPrompt } from '@blaze-cms/admin';
-import { Link, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 
 const ListingTableContent = ({
   tableData,
   handleSelect,
-  onCloseCardPrompt,
-  selectedMenuItem,
-  match,
   onSort,
   onClickRow,
   overScanBuffer,
@@ -17,12 +13,14 @@ const ListingTableContent = ({
   scrollToIndex
 }) => {
   const displayTable = tableData && tableData.rows && !!tableData.rows.length;
+  const { isEnquiry } = tableData;
+  const className = `page__content${isEnquiry ? ' array-table' : ''}`;
 
   return (
     <>
-      {displayTable ? (
+      {displayTable && (
         <>
-          <div className="page__content">
+          <div className={className}>
             <Table
               scrollToIndex={scrollToIndex}
               onSort={onSort}
@@ -30,23 +28,12 @@ const ListingTableContent = ({
               overScanBuffer={overScanBuffer}
               onRenderItems={onRenderItems}
               data={tableData}
-              checkboxes
+              checkboxes={!isEnquiry}
               onSelect={handleSelect}
               data-testid="listing-table-content"
             />
           </div>
         </>
-      ) : (
-        selectedMenuItem.isDisplayedPrompt && (
-          <CardPrompt onClose={onCloseCardPrompt} data-testid="card-prompt">
-            <Link
-              className="button button--rounded button--cta"
-              to={`${match.url}/create`}
-              data-testid="add-button">
-              Add
-            </Link>
-          </CardPrompt>
-        )
       )}
     </>
   );
@@ -54,8 +41,6 @@ const ListingTableContent = ({
 
 ListingTableContent.propTypes = {
   tableData: PropTypes.object.isRequired,
-  onCloseCardPrompt: PropTypes.func.isRequired,
-  selectedMenuItem: PropTypes.object.isRequired,
   match: PropTypes.shape({
     url: PropTypes.string
   }).isRequired,
@@ -73,7 +58,8 @@ ListingTableContent.defaultProps = {
   onClickRow: () => {},
   overScanBuffer: 0,
   scrollToIndex: 0,
-  onRenderItems: () => {}
+  onRenderItems: () => {},
+  selectedMenuItem: null
 };
 
 export default withRouter(ListingTableContent);

package/src/components/ListingTable/mappers/populate-rows.js

@@ -3,18 +3,22 @@ import { Link } from 'react-router-dom';
 import TableActions from '../TableActions';
 import { ACTIONS } from '../../../constants';
 
-const formatRows = ({ rows, url, toggleModal, label, firstColumn = 'name' }) =>
+const formatRows = ({ rows, url, toggleModal, label, firstColumn = 'name', isEnquiry }) =>
   rows.map(data => {
     const editUrl = `${url}/update/${data.id}`;
-    return {
+    const rowProps = {
       ...data,
       [firstColumn]: (
         <Link to={editUrl} role="button">
           {data[firstColumn]}
         </Link>
-      ),
-      actions: <TableActions editUrl={editUrl} data={data} showDeleteModal={toggleModal} />
+      )
     };
+    if (!isEnquiry)
+      rowProps.actions = (
+        <TableActions editUrl={editUrl} data={data} showDeleteModal={toggleModal} />
+      );
+    return rowProps;
   });
 
 const getSanitizedColumnLabel = columnProp => {
@@ -28,22 +32,82 @@ const getSanitizedColumnLabel = columnProp => {
   return sanitizedChar;
 };
 
-const getColumnLabels = (listingProperties, properties, dynamicProperties) => {
-  const allProperties = { ...properties, ...dynamicProperties };
-  return listingProperties.reduce((acc, listingProperty) => {
-    const label = allProperties[listingProperty].label || getSanitizedColumnLabel(listingProperty);
-    return { ...acc, ...{ [listingProperty]: label } };
-  }, {});
+const buildArrayRowContent = rowData => (
+  <div className="table-row-list">
+    {rowData.map(rowGroup => (
+      <div className="table-row-list__group">
+        {rowGroup.map(({ label, value, url }) => (
+          <div className="table-row-list__group__item">
+            <span className="table-row-list__group__item__label"> {label}:</span>
+            {url ? (
+              <Link to={url} role="button" className="table-row-list__group__item__value">
+                {value}
+              </Link>
+            ) : (
+              <span className="table-row-list__group__item__value"> {value}</span>
+            )}
+          </div>
+        ))}
+      </div>
+    ))}
+  </div>
+);
+
+const buildArrayRowData = rowData => {
+  const dataGroups = [];
+  const groups = Math.ceil(rowData.length / 3) || 1;
+  for (let index = 0; index < groups; index += 1) {
+    const currentStart = index * groups;
+    dataGroups[index] = rowData.slice(currentStart, currentStart + 3);
+  }
+
+  return buildArrayRowContent(dataGroups);
+};
+
+const getParsedRowData = rows =>
+  rows.map(rowData =>
+    Object.keys(rowData).reduce((acc, key) => {
+      const parsedData = Array.isArray(rowData[key])
+        ? buildArrayRowData(rowData[key])
+        : rowData[key];
+      return { ...acc, [key]: parsedData };
+    }, {})
+  );
+
+const getColumnsAndLabels = (listingProperties, allProperties, rows) => {
+  const columns = [];
+  const labels = {};
+
+  listingProperties.forEach(listingProperty => {
+    const propKey = listingProperty.includes(' ') ? listingProperty.split(' ')[0] : listingProperty;
+    const { label } = allProperties[propKey] || {};
+    columns.push(propKey);
+    labels[propKey] = label || getSanitizedColumnLabel(propKey);
+  });
+  const parsedRowData = getParsedRowData(rows);
+
+  return { columns, labels, parsedRowData };
 };
 
 const populateRows = ({ toggleModal, url, entitySchema, rows }) => {
-  const { listingProperties, properties, dynamicProperties = {}, formProperties } = entitySchema;
-  const columns = [...listingProperties, ACTIONS];
+  const {
+    id: schemaId,
+    listingProperties,
+    properties,
+    dynamicProperties = {},
+    formProperties
+  } = entitySchema;
+
+  const isEnquiry = schemaId === 'enquiry';
+  const columnOptions = !isEnquiry ? [...listingProperties, ACTIONS] : [...listingProperties];
+
+  const allProperties = { ...properties, ...dynamicProperties };
+  const { columns, labels, parsedRowData } = getColumnsAndLabels(
+    columnOptions,
+    allProperties,
+    rows
+  );
   const [firstColumn] = columns;
-  const labels = {
-    ...getColumnLabels(listingProperties, properties, dynamicProperties),
-    [ACTIONS]: ACTIONS
-  };
 
   return {
     identification: 'id',
@@ -51,8 +115,9 @@ const populateRows = ({ toggleModal, url, entitySchema, rows }) => {
     columns,
     labels,
     orderBy: [...formProperties],
-    rows: formatRows({ firstColumn, rows, url, toggleModal })
+    rows: formatRows({ firstColumn, rows: parsedRowData, url, toggleModal, isEnquiry }),
+    isEnquiry
   };
 };
 
-export { populateRows, formatRows };
+export { populateRows, formatRows, getParsedRowData };

package/src/components/ListingTable/service/index.js

@@ -1,12 +1,49 @@
 import buildListingQuery from '../../../utils/build-listing-query';
 
-const fetchData = async ({ client, querySettings: { entitySchema, queryParams } }) => {
-  const query = buildListingQuery(entitySchema);
+function buildVariables({ entitySchema, isSearchQuery, listFilters = [], queryParams = {} }) {
+  const { identifier } = entitySchema;
+  const { sort, offset, limit, where } = queryParams;
+  const [{ property, direction }] = sort;
+  const parsedOffset = `${property}:${direction}`;
+
+  if (!isSearchQuery)
+    return {
+      ...queryParams,
+      where: !Array.isArray(listFilters) ? listFilters : where
+    };
+
+  const rawQuery = {
+    bool: {
+      must: listFilters || [],
+      filter: [
+        {
+          term: {
+            entityIdentifier: identifier
+          }
+        }
+      ]
+    }
+  };
+
+  return {
+    limit,
+    offset,
+    sort: parsedOffset,
+    where: JSON.stringify(rawQuery)
+  };
+}
+
+const fetchData = async ({ client, querySettings: { entitySchema, queryParams }, listFilters }) => {
   const {
-    data: { listingData }
-  } = await client.query({ query, variables: queryParams, fetchPolicy: 'network-only' });
+    displayProperties: { adminListings: { dataSource: { source } = {} } = {} } = {}
+  } = entitySchema;
+
+  const isSearchQuery = source === 'search';
+  const query = buildListingQuery(entitySchema, isSearchQuery);
+  const variables = buildVariables({ entitySchema, listFilters, queryParams, isSearchQuery });
+  const { data = {} } = await client.query({ query, variables, fetchPolicy: 'network-only' });
 
-  return listingData;
+  return data.searchResults ? data.searchResults.results : data.listingData;
 };
 
 export { fetchData };

package/src/constants.js

@@ -25,6 +25,16 @@ const PAGE_BUILDER_TAB_INDEX = 1;
 const EDITOR_VIEW_TAB = 'Editor view';
 const EDITOR_VIEW_TAB_INDEX = 0;
 
+const ICON_SIZE = {
+  WIDTH: '25px',
+  HEIGHT: '25px'
+};
+
+const ICON_COLOR = {
+  STROKE: '#63779C',
+  FILL: '#63779C'
+};
+
 export {
   DATA_LISTING_PREFIX,
   ENTITY_PUBLISHED,
@@ -49,5 +59,7 @@ export {
   EDITOR_VIEW_TAB,
   PAGE_BUILDER_TAB,
   UNPUBLISHED_WARNING,
-  SAVE_BEFORE_PUBLISH_MESSAGE
+  SAVE_BEFORE_PUBLISH_MESSAGE,
+  ICON_SIZE,
+  ICON_COLOR
 };

package/src/icons/ContentIcon.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { ICON_COLOR } from '../constants';
+
+function ContentIcon({ fill = ICON_COLOR.FILL, stroke = ICON_COLOR.STROKE }) {
+  return (
+    <svg
+      width="19px"
+      height="19px"
+      viewBox="0 0 21 21"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink">
+      <title>content</title>
+      <g id="Page-1" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
+        <g id="content" transform="translate(1, 1)">
+          <g id="Group">
+            <path
+              d="M0,8.70833334 L5.445875,3.26245834 C6.37331215,2.33530123 7.87668785,2.33530123 8.804125,3.26245834 L14.25,8.70833334"
+              id="Shape-path"
+              stroke={stroke}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M11.875,6.33333334 L13.758375,4.44995834 C14.6858122,3.52280123 16.1891878,3.52280123 17.116625,4.44995834 L19,6.33333334"
+              id="Shape-path"
+              stroke={stroke}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M2.375,19 L16.625,19 C17.9366763,19 19,17.9366763 19,16.625 L19,2.375 C19,1.06332371 17.9366763,0 16.625,0 L2.375,0 C1.06332371,0 0,1.06332371 0,2.375 L0,16.625 C0,17.9366763 1.06332371,19 2.375,19 Z"
+              id="Shape-path"
+              stroke={stroke}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <circle
+              id="Oval"
+              fill={fill}
+              fillRule="nonzero"
+              cx="11.4791666"
+              cy="2.77083334"
+              r="1.1875"
+            />
+          </g>
+          <line
+            x1={0}
+            y1="9.23611111"
+            x2={19}
+            y2="9.23611111"
+            id="Path"
+            stroke={stroke}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <line
+            x1="3.95833334"
+            y1="12.4027778"
+            x2="15.3055553"
+            y2="12.4027778"
+            id="Path"
+            stroke={stroke}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <line
+            x1="3.95833334"
+            y1="15.5694445"
+            x2="12.1388885"
+            y2="15.5694445"
+            id="Path"
+            stroke={stroke}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default ContentIcon;

package/src/icons/SettingsIcon.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ICON_SIZE, ICON_COLOR } from '../constants';
+
+function SettingsIcon({
+  width = ICON_SIZE.WIDTH,
+  height = ICON_SIZE.HEIGHT,
+  stroke = ICON_COLOR.STROKE
+}) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 22 22"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink">
+      <title>setting</title>
+      <g
+        id="Page-1"
+        stroke="none"
+        strokeWidth={1}
+        fill="none"
+        fillRule="evenodd"
+        strokeLinecap="round"
+        strokeLinejoin="round">
+        <g id="Group" transform="translate(1, 1)" stroke={stroke}>
+          <path
+            d="M8.13888889,1.46333333 C8.61222222,-0.487777777 11.3877778,-0.487777777 11.8611111,1.46333333 C12.0051589,2.05784356 12.4244819,2.54780471 12.9896128,2.78193979 C13.5547438,3.01607487 14.1977123,2.96622362 14.72,2.64777778 C16.4344444,1.60333333 18.3977778,3.56555556 17.3533333,5.28111111 C17.0353472,5.803171 16.9856162,6.44564563 17.2194755,7.0104213 C17.4533348,7.57519696 17.9426987,7.99444609 18.5366667,8.13888889 C20.4877778,8.61222222 20.4877778,11.3877778 18.5366667,11.8611111 C17.9421564,12.0051589 17.4521953,12.4244819 17.2180602,12.9896128 C16.9839251,13.5547438 17.0337764,14.1977123 17.3522222,14.72 C18.3966667,16.4344444 16.4344444,18.3977778 14.7188889,17.3533333 C14.196829,17.0353472 13.5543544,16.9856162 12.9895787,17.2194755 C12.424803,17.4533348 12.0055539,17.9426987 11.8611111,18.5366667 C11.3877778,20.4877778 8.61222222,20.4877778 8.13888889,18.5366667 C7.99484107,17.9421564 7.57551807,17.4521953 7.01038716,17.2180602 C6.44525624,16.9839251 5.80228769,17.0337764 5.28,17.3522222 C3.56555556,18.3966667 1.60222222,16.4344444 2.64666667,14.7188889 C2.96465281,14.196829 3.01438377,13.5543544 2.78052448,12.9895787 C2.5466652,12.424803 2.05730134,12.0055539 1.46333333,11.8611111 C-0.487777777,11.3877778 -0.487777777,8.61222222 1.46333333,8.13888889 C2.05784356,7.99484107 2.54780471,7.57551807 2.78193979,7.01038716 C3.01607487,6.44525624 2.96622362,5.80228769 2.64777778,5.28 C1.60333333,3.56555556 3.56555556,1.60222222 5.28111111,2.64666667 C6.38777778,3.32222222 7.83222222,2.72444444 8.13888889,1.46333333 Z"
+            id="Path"
+          />
+          <path
+            d="M13.6666666,10.3333333 C13.6666666,12.1742825 12.1742825,13.6666666 10.3333333,13.6666666 C8.49238416,13.6666666 7,12.1742825 7,10.3333333 C7,8.49238416 8.49238416,7 10.3333333,7 C12.1742825,7 13.6666666,8.49238416 13.6666666,10.3333333 L13.6666666,10.3333333 Z"
+            id="Path"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SettingsIcon;

package/src/icons/TaxonomyIcon.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ICON_SIZE, ICON_COLOR } from '../constants';
+
+function TaxonomyIcon({
+  width = ICON_SIZE.WIDTH,
+  height = ICON_SIZE.HEIGHT,
+  stroke = ICON_COLOR.STROKE
+}) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 22 22"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink">
+      <title>taxonomy</title>
+      <g
+        id="Page-1"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+        strokeLinecap="round"
+        strokeLinejoin="round">
+        <g id="Group" transform="translate(1, 1)" stroke={stroke}>
+          <rect
+            id="Rectangle"
+            x="0"
+            y="13.2173913"
+            width="6.78260868"
+            height="6.60869564"
+            rx="1.5"
+          />
+          <rect
+            id="Rectangle"
+            x="13.2173913"
+            y="13.2173913"
+            width="6.78260868"
+            height="6.60869564"
+            rx="1.5"
+          />
+          <rect
+            id="Rectangle"
+            x="6.60869564"
+            y="0"
+            width="6.78260868"
+            height="6.60869564"
+            rx="1.5"
+          />
+          <path
+            d="M3.30434782,13.2173913 L3.30434782,12.115942 C3.30434782,10.8993147 4.2906191,9.91304346 5.50724637,9.91304346 L14.3188405,9.91304346 C15.5354678,9.91304346 16.5217391,10.8993147 16.5217391,12.115942 L16.5217391,13.2173913"
+            id="Path"
+          />
+          <line x1="9.91304346" y1="6.60869564" x2="9.91304346" y2="9.91304346" id="Path" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default TaxonomyIcon;