@databiosphere/findable-ui 2.0.1 → 2.1.0

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.js

@@ -8,7 +8,7 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const material_1 = require("@mui/material");
 const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
 exports.FilterLabel = (0, styled_1.default)(material_1.Button) `
-  color: ${({ theme }) => theme.palette.ink.main};
+  font-weight: inherit;
   gap: 0;
   justify-content: space-between;
   padding: 10px 16px;
@@ -20,7 +20,6 @@ exports.FilterLabel = (0, styled_1.default)(material_1.Button) `
   }
 
   &.Mui-disabled {
-    color: ${({ theme }) => theme.palette.ink.main};
     opacity: 0.3;
   }
 

package/lib/components/Filter/components/Filters/filters.js

@@ -65,11 +65,13 @@ const Filters = ({ categoryFilters, closeAncestor, disabled = false, onFilter, t
     const { height: windowHeight } = (0, useWindowResize_1.useWindowResize)();
     const filterListRef = (0, react_1.useRef)(null);
     const [height, setHeight] = (0, react_1.useState)(0);
+    const isLabeled = (0, react_1.useMemo)(() => isCategoryViewsLabeled(categoryFilters), [categoryFilters]);
     (0, react_1.useEffect)(() => {
         setHeight(calculateListHeight(windowHeight, filterListRef.current));
     }, [windowHeight]);
-    return (react_1.default.createElement(filters_styles_1.Filters, { disabled: disabled, height: height, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (react_1.default.createElement(react_1.Fragment, { key: i },
+    return (react_1.default.createElement(filters_styles_1.Filters, { disabled: disabled, height: height, isBaseStyle: !isLabeled, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (react_1.default.createElement(react_1.Fragment, { key: i },
         i !== 0 && react_1.default.createElement(material_1.Divider, null),
+        label && react_1.default.createElement(filters_styles_1.CategoryViewsLabel, null, label),
         categoryViews.map((categoryView) => (react_1.default.createElement(filter_1.Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: closeAncestor, isFilterDrawer: isFilterDrawer, onFilter: onFilter, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));
 };
 exports.Filters = Filters;
@@ -83,3 +85,11 @@ function calculateListHeight(windowHeight, filterListEl) {
     var _a, _b;
     return windowHeight - ((_b = (_a = filterListEl === null || filterListEl === void 0 ? void 0 : filterListEl.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.top) !== null && _b !== void 0 ? _b : 0);
 }
+/**
+ * Returns true if any category views are labelled.
+ * @param categoryFilters - Category filters.
+ * @returns true if any category views are labelled.
+ */
+function isCategoryViewsLabeled(categoryFilters) {
+    return categoryFilters.some(({ label }) => label);
+}

package/lib/components/Filter/components/Filters/filters.styles.d.ts

@@ -2,9 +2,14 @@
 interface Props {
     disabled: boolean;
     height: number;
+    isBaseStyle: boolean;
 }
 export declare const Filters: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CategoryViewsLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/lib/components/Filter/components/Filters/filters.styles.js

@@ -3,13 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Filters = void 0;
+exports.CategoryViewsLabel = exports.Filters = void 0;
 const react_1 = require("@emotion/react");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
+const colors_1 = require("../../../../styles/common/mixins/colors");
+const fonts_1 = require("../../../../styles/common/mixins/fonts");
 exports.Filters = (0, styled_1.default)("div", {
     shouldForwardProp: (prop) => prop !== "height",
 }) `
+  ${(props) => (props.isBaseStyle ? (0, fonts_1.textBody500)(props) : (0, fonts_1.textBody400)(props))};
+  color: ${(props) => (props.isBaseStyle ? (0, colors_1.inkMain)(props) : (0, colors_1.inkLight)(props))};
   height: ${({ height }) => height}px;
   margin: 8px 0;
   overflow: auto;
@@ -31,3 +35,12 @@ exports.Filters = (0, styled_1.default)("div", {
     padding: 0 12px 0 16px;
   }
 `;
+exports.CategoryViewsLabel = (0, styled_1.default)("div") `
+  ${fonts_1.textBody500};
+  color: ${colors_1.inkMain};
+  padding: 8px 16px;
+
+  ${breakpoints_1.mediaDesktopSmallUp} {
+    padding: 8px 0;
+  }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "",
   "scripts": {
     "test": "jest",

package/src/components/Filter/components/FilterLabel/filterLabel.styles.ts

@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
 import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
 
 export const FilterLabel = styled(Button)`
-  color: ${({ theme }) => theme.palette.ink.main};
+  font-weight: inherit;
   gap: 0;
   justify-content: space-between;
   padding: 10px 16px;
@@ -15,7 +15,6 @@ export const FilterLabel = styled(Button)`
   }
 
   &.Mui-disabled {
-    color: ${({ theme }) => theme.palette.ink.main};
     opacity: 0.3;
   }
 

package/src/components/Filter/components/Filters/filters.styles.ts

@@ -1,15 +1,23 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
+import { inkLight, inkMain } from "../../../../styles/common/mixins/colors";
+import {
+  textBody400,
+  textBody500,
+} from "../../../../styles/common/mixins/fonts";
 
 interface Props {
   disabled: boolean;
   height: number;
+  isBaseStyle: boolean;
 }
 
 export const Filters = styled("div", {
   shouldForwardProp: (prop) => prop !== "height",
 })<Props>`
+  ${(props) => (props.isBaseStyle ? textBody500(props) : textBody400(props))};
+  color: ${(props) => (props.isBaseStyle ? inkMain(props) : inkLight(props))};
   height: ${({ height }) => height}px;
   margin: 8px 0;
   overflow: auto;
@@ -32,3 +40,13 @@ export const Filters = styled("div", {
     padding: 0 12px 0 16px;
   }
 `;
+
+export const CategoryViewsLabel = styled("div")`
+  ${textBody500};
+  color: ${inkMain};
+  padding: 8px 16px;
+
+  ${mediaDesktopSmallUp} {
+    padding: 8px 0;
+  }
+`;

package/src/components/Filter/components/Filters/filters.tsx

@@ -1,6 +1,6 @@
 import { Divider } from "@mui/material";
 import { TrackFilterOpenedFunction } from "config/entities";
-import React, { Fragment, useEffect, useRef, useState } from "react";
+import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { CategoryTag, SelectCategoryView } from "../../../../common/entities";
 import {
   BREAKPOINT_FN_NAME,
@@ -11,7 +11,7 @@ import { useWindowResize } from "../../../../hooks/useWindowResize";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { Filter } from "../Filter/filter";
 import { FilterTags } from "../FilterTags/filterTags";
-import { Filters as FilterList } from "./filters.styles";
+import { CategoryViewsLabel, Filters as FilterList } from "./filters.styles";
 
 export interface CategoryFilter {
   categoryViews: SelectCategoryView[];
@@ -76,16 +76,26 @@ export const Filters = ({
   const { height: windowHeight } = useWindowResize();
   const filterListRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number>(0);
+  const isLabeled = useMemo(
+    () => isCategoryViewsLabeled(categoryFilters),
+    [categoryFilters]
+  );
 
   useEffect(() => {
     setHeight(calculateListHeight(windowHeight, filterListRef.current));
   }, [windowHeight]);
 
   return (
-    <FilterList disabled={disabled} height={height} ref={filterListRef}>
+    <FilterList
+      disabled={disabled}
+      height={height}
+      isBaseStyle={!isLabeled}
+      ref={filterListRef}
+    >
       {categoryFilters.map(({ categoryViews, label }, i) => (
         <Fragment key={i}>
           {i !== 0 && <Divider />}
+          {label && <CategoryViewsLabel>{label}</CategoryViewsLabel>}
           {categoryViews.map((categoryView) => (
             <Filter
               key={categoryView.key}
@@ -116,3 +126,12 @@ function calculateListHeight(
 ): number {
   return windowHeight - (filterListEl?.getBoundingClientRect()?.top ?? 0);
 }
+
+/**
+ * Returns true if any category views are labelled.
+ * @param categoryFilters - Category filters.
+ * @returns true if any category views are labelled.
+ */
+function isCategoryViewsLabeled(categoryFilters: CategoryFilter[]): boolean {
+  return categoryFilters.some(({ label }) => label);
+}