feat(MWPW-151628): Adds support for new categories layout (#156)

* feat(MWPW-151628) Adds support for new categories layout

* feat(MWPW-151628): Adds support for new categories layout

* feat(MWPW-151628): Adds support for new categories layout

* feat(MWPW-151628): Adds support for new categories layout

less/components/consonant/cards-grid.less

@@ -18,6 +18,23 @@
         max-width: 100%;
         grid-template-columns: repeat(auto-fit, minmax(@consonantCardMinWidth, max-content));
 
+        /* Cards hover grow animation */
+
+        &.card-hover-grow {
+            .consonant-Card.one-half {
+                transition: all 0.2s ease-in-out;
+            }
+
+            .consonant-Card.one-half:hover {
+                transform: scale(1.03);
+                transition: all 0.2s ease-in-out;
+            }
+
+            .consonant-Card.one-half [class *= -header]:after {
+                display: none !important;
+            }
+        }
+
         /* Spacing variations */
 
         &--with1xGutter {

less/components/consonant/categories.less

@@ -0,0 +1,122 @@
+/* TODO: This should be moved to its own file */
+.Categories {
+    .consonant-TopFilters-categoriesTitle {
+        text-align: center;
+        font-size: 30px;
+        font-weight: 700;
+        font-family: adobe-clean, "Segoe UI", Roboto, sans-serif;
+        margin-bottom: 32px;
+        color: #2c2c2c;
+    }
+
+    .consonant-TopFilters-collectionTitle {
+        display: none;
+    }
+
+    .filters-category {
+        text-align: center;
+        margin-bottom: 30px;
+        display: flex;
+        overflow-x: auto;
+        justify-content: left;
+
+        button {
+            border-radius: 24px;
+            background: #909090;
+            color: #fff;
+            font-weight: 700;
+            font-size: 16px;
+            height: 48px;
+            margin: 0 6px;
+            padding: 12px 20px 13px 18px;
+            display: flex;
+            white-space: nowrap;
+            align-items: center;
+            font-family: adobe-clean, "Segoe UI", Roboto, sans-serif;
+
+            img.filters-category--icon {
+                height: 24px;
+                vertical-align: -8px;
+                margin-right: 6px;
+            }
+
+            &:not(:first-child):after {
+                content: '';
+                width: 12px;
+            }
+
+            &:hover {
+                background: #505050;
+            }
+
+            &[data-selected = 'selected'] {
+                background: #292929;
+            }
+
+            &[data-group = 'alltopics'] img {
+                display: none;
+            }
+        }
+    }
+
+    .consonant-TopFilter button {
+        border: solid 1px #bbb;
+    }
+
+    span.filter-group-title {
+        display: block;
+        text-transform: uppercase;
+        font-weight: 600;
+        padding-top: 12px;
+        font-size: 14px;
+        border-top: solid 1px #ddd;
+        margin: 6px 20px;
+    }
+
+    span.filter-group-title:first-child {
+        border-top: none;
+        margin-top: 0;
+        padding-top: 2px;
+    }
+
+    .consonant-Card-label {
+        text-transform: uppercase;
+    }
+
+    .consonant-NoResultsView {
+        min-height: 300px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .consonant-Wrapper--1200MaxWidth .consonant-Wrapper-inner {
+        width: 92%;
+    }
+
+    .Categories .filters-category {
+        justify-content: left;
+    }
+}
+
+/* Dark button */
+[class *= 'consonant-u-theme'] .consonant-BtnInfobit--dark,
+.consonant-BtnInfobit--dark {
+    border-color: #101010;
+    background-color: #1e1e1e;
+}
+
+[class *= 'consonant-u-theme'] .consonant-BtnInfobit--dark span,
+.consonant-BtnInfobit--dark span {
+    color: #e3e3e3 !important;
+}
+
+[class *= 'consonant-u-theme'] .consonant-BtnInfobit--dark:hover,
+.consonant-BtnInfobit--dark:hover {
+    border-color: #000;
+    background-color: #000;
+}
+
+[class *= 'consonant-u-theme'] .consonant-BtnInfobit--dark:hover span,
+.consonant-BtnInfobit--dark:hover span {
+    color: #fff !important;
+}

less/components/consonant/main.less

@@ -54,5 +54,8 @@
 @import 'infobits/icon.less';
 @import 'infobits/link.less';
 
+/* layout specific */
+@import 'categories.less';
+
 /* Locale overrides; */
 @import 'localeOverrides.less';

less/components/consonant/select.less

@@ -153,7 +153,6 @@
 
             &--autoWidth &-options {
                 width: auto;
-                max-width: 100%;
             }
         }
 

react/src/js/components/Consonant/Container/Container.jsx

@@ -154,6 +154,10 @@ const Container = (props) => {
     const cardStyle = getConfig('collection', 'cardStyle');
     const title = getConfig('collection', 'i18n.title');
     const headers = getConfig('headers', '');
+    // eslint-disable-next-line no-use-before-define
+    const categories = getConfig('filterPanel', 'categories');
+    // eslint-disable-next-line no-use-before-define
+    const authoredCategories = getAuthoredCategories(authoredFilters, categories);
 
     /**
      **** Constants ****
@@ -162,6 +166,8 @@ const Container = (props) => {
     const isXorFilter = filterLogic.toLowerCase().trim() === FILTER_TYPES.XOR;
     const isCarouselContainer = authoredLayoutContainer === LAYOUT_CONTAINER.CAROUSEL;
     const isStandardContainer = authoredLayoutContainer !== LAYOUT_CONTAINER.CAROUSEL;
+    const isCategoriesContainer = authoredLayoutContainer === LAYOUT_CONTAINER.CATEGORIES;
+
     /**
      **** Hooks ****
      */
@@ -244,6 +250,8 @@ const Container = (props) => {
      * @type {[Array, Function]} Filters
      */
     const [filters, setFilters] = useState([]);
+    // window.filters = filters;
+    const [currCategories, setCategories] = useState([]);
 
     /**
      * @typedef {String} SearchQueryState — Will be used to search through cards
@@ -252,6 +260,7 @@ const Container = (props) => {
      * @type {[String, Function]} SearchQuery
      */
     const [searchQuery, setSearchQuery] = useState('');
+    const [selectedCategory, setSelectedCategory] = useState('');
 
     /**
      * @typedef {String} SortOpenedState — Toggles Sort Popup Opened Or Closed
@@ -842,7 +851,7 @@ const Container = (props) => {
                             hideCtaIds,
                             hideCtaTags,
                         );
-                    setFilters(() => authoredFilters.map((filter) => {
+                    setFilters(prevFilters => prevFilters.map((filter) => {
                         const { group, items } = filter;
                         const urlStateValue = urlState[filterGroupPrefix + group];
                         if (!urlStateValue) return filter;
@@ -1063,6 +1072,7 @@ const Container = (props) => {
         reservoirSize,
         featuredCards,
     );
+
     /**
      * @type {Function} getFilteredCollection
      * @desc Closure around CardFilterer for reuse within context
@@ -1072,7 +1082,7 @@ const Container = (props) => {
         .sortCards(sortOption, eventFilter, featuredCards, hideCtaIds, isFirstLoad)
         .keepBookmarkedCardsOnly(onlyShowBookmarks, bookmarkedCardIds, showBookmarks)
         .keepCardsWithinDateRange()
-        .filterCards(activeFilterIds, activePanels, filterLogic, FILTER_TYPES)
+        .filterCards(activeFilterIds, activePanels, filterLogic, FILTER_TYPES, currCategories)
         .truncateList(totalCardLimit)
         .searchCards(searchQuery, searchFields, cardStyle)
         .removeCards(inclusionIds);
@@ -1198,6 +1208,86 @@ const Container = (props) => {
         'consonant-u-themeDarkest': authoredMode === THEME_TYPE.DARKEST,
     });
 
+    /**
+     * @param {*} filterList
+     * @param {*} categoryList
+     * @returns List of categories for the top pills
+     *          Prepends the "All Topics" pill to the list of categories
+     */
+    function getAuthoredCategories(filterList, categoryList) {
+        const categoryIds = filterList
+            .filter(filter => filter.id.includes('caas:product-categories'))
+            .map(item => item.id);
+
+        // Sorts category list based on authored order
+        const selectedCategories = categoryIds
+            .map(id => categoryList.filter(category => category.id === id)[0]);
+
+        return [{
+            group: 'All Topics',
+            title: 'All Topics',
+            id: '',
+            items: [],
+        }, ...selectedCategories];
+    }
+
+    /**
+     * @returns List of all products from all categories for the 'All products' menu
+     *          Prepends the "All products" label to the list of categories
+     */
+    function getAllCategoryProducts() {
+        // if (isCategoriesContainer) return [];
+        let allCategories = [];
+        for (const category of authoredCategories) {
+            for (const item of category.items) {
+                item.fromCategory = true;
+            }
+            allCategories = allCategories.concat(category.items);
+        }
+        return {
+            group: 'All products',
+            id: 'caas:products',
+            items: allCategories,
+        };
+    }
+
+    /**
+     * @param {*} selectedCategories
+     * @param {*} groupId
+     * Sets the categories and filters based on the selected category
+     */
+    function categoryHandler(selectedCategories, groupId) {
+        const temp = [];
+        for (const category of selectedCategories) {
+            temp.push(category.id);
+        }
+        setCategories(temp);
+        setFilters((prevFilters) => {
+            prevFilters.pop();
+            const newGroup = authoredCategories.filter(category => category.id === groupId)[0];
+            if (!newGroup.items.length) {
+                const nextFilters = prevFilters.concat(getAllCategoryProducts());
+                return nextFilters;
+            }
+            prevFilters.push(newGroup);
+            return prevFilters;
+        });
+        setSelectedCategory(groupId);
+        setCurrentPage(1);
+    }
+
+    /**
+     * @param {*} category
+     * @returns The Authored icon for the category if exists,
+     *          otherwise returns the default icon from the tags or an empty string
+     */
+    function getCategoryIcon(category) {
+        const authoredIcon = authoredFilters
+            .filter(filter => filter.id === category.id)
+            .map(filter => filter.icon)
+            .toString();
+        return authoredIcon || category.icon || '';
+    }
 
     const collectionStr = collectionIdentifier ? `${collectionIdentifier} | ` : '';
     const filterStr = selectedFiltersItemsQty ? filterNames : 'No Filters';
@@ -1214,10 +1304,18 @@ const Container = (props) => {
         'consonant-Wrapper--83PercentContainier': authoredLayoutContainer === LAYOUT_CONTAINER.SIZE_83_VW,
         'consonant-Wrapper--1200MaxWidth': authoredLayoutContainer === LAYOUT_CONTAINER.SIZE_1200_PX,
         'consonant-Wrapper--1600MaxWidth': authoredLayoutContainer === LAYOUT_CONTAINER.SIZE_1600_PX,
+        'consonant-Wrapper--1200MaxWidth Categories': isCategoriesContainer,
         'consonant-Wrapper--carousel': isCarouselContainer,
         'consonant-Wrapper--withLeftFilter': filterPanelEnabled && isLeftFilterPanel,
     });
 
+    useEffect(() => {
+        setFilters((prevFilters) => {
+            const nextFilters = prevFilters.concat(getAllCategoryProducts());
+            return nextFilters;
+        });
+    }, []);
+
     return (
         <ConfigContext.Provider value={config}>
             <ExpandableContext.Provider value={{ value: openDropdown, setValue: setOpenDropdown }} >
@@ -1232,6 +1330,34 @@ const Container = (props) => {
                     onClick={handleWindowClick}
                     className={`${wrapperClass} ${themeClass}`}>
                     <div className="consonant-Wrapper-inner">
+                        { isCategoriesContainer &&
+                        <Fragment>
+                            <h2 data-testid="consonant-TopFilters-categoriesTitle" className="consonant-TopFilters-categoriesTitle">
+                                {title}
+                            </h2>
+                            <div className="filters-category">
+                                {
+                                    authoredCategories.map((category) => {
+                                        let selected = '';
+                                        if (category.id === selectedCategory) {
+                                            selected = 'selected';
+                                        }
+                                        return (
+                                            <button
+                                                onClick={() => {
+                                                    categoryHandler(category.items, category.id);
+                                                }}
+                                                data-selected={selected}
+                                                data-group={category.group.replaceAll(' ', '').toLowerCase()}>
+                                                <img className="filters-category--icon" src={getCategoryIcon(category)} alt={category.icon && 'Category icon'} />
+                                                {category.title}
+                                            </button>
+                                        );
+                                    })
+                                }
+                            </div>
+                        </Fragment>
+                        }
                         { displayLeftFilterPanel && isStandardContainer &&
                         <div className="consonant-Wrapper-leftFilterWrapper">
                             <LeftFilterPanel
@@ -1273,6 +1399,7 @@ const Container = (props) => {
                                 onCheckboxClick={handleCheckBoxChange}
                                 onFilterClick={handleFilterGroupClick}
                                 onClearFilterItems={clearFilterItem}
+                                categories={currCategories}
                                 onClearAllFilters={resetFiltersSearchAndBookmarks}
                                 showLimitedFiltersQty={showLimitedFiltersQty}
                                 searchComponent={