switch to CSS custom properties control and add intent property

Author: haschek

CHANGELOG.md

@@ -18,6 +18,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     - `searchListPredicate` property: Allows to filter the complete list of search options at once.
     - Following optional BlueprintJs properties are forwarded now to override default behaviour: `noResults`, `createNewItemRenderer` and `itemRenderer`
     - `isValidNewOption` property: Checks if an input string is or can be turned into a valid new option.
+- `<OverviewItem />`
+    - `intent` property: visualize the state
 
 ### Fixed
 

src/components/OverviewItem/OverviewItem.test.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { IntentTypes } from "../../common/Intent";
+
+import OverviewItem from "./OverviewItem";
+
+describe("OverviewItem", () => {
+    const findItem = (container: HTMLElement) => container.querySelector(".eccgui-overviewitem__item");
+
+    it("does not apply any intent class when `intent` is not set", () => {
+        const { container } = render(<OverviewItem>content</OverviewItem>);
+        const item = findItem(container);
+        expect(item).not.toBeNull();
+        expect(item!.className).not.toMatch(/eccgui-intent--/);
+    });
+
+    it.each<IntentTypes>(["primary", "success", "warning", "danger", "neutral", "accent", "info"])(
+        'applies the matching intent class for `intent="%s"`',
+        (intent) => {
+            const { container } = render(<OverviewItem intent={intent}>content</OverviewItem>);
+            const item = findItem(container);
+            expect(item).not.toBeNull();
+            expect(item).toHaveClass(`eccgui-intent--${intent}`);
+        },
+    );
+
+    it("keeps the base class and additional className alongside the intent class", () => {
+        const { container } = render(
+            <OverviewItem intent="success" className="custom-class">
+                content
+            </OverviewItem>,
+        );
+        const item = findItem(container);
+        expect(item).toHaveClass("eccgui-overviewitem__item");
+        expect(item).toHaveClass("eccgui-intent--success");
+        expect(item).toHaveClass("custom-class");
+    });
+});

src/components/OverviewItem/OverviewItem.tsx

@@ -1,9 +1,14 @@
 import React from "react";
 
+import { intentClassName, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Card, { CardProps } from "../Card/Card";
 
 export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visual intent state.
+     */
+    intent?: IntentTypes;
     /**
      * Displays the element using reduced height and less white space inside.
      */
@@ -36,6 +41,7 @@ export const OverviewItem = ({
     hasSpacing = false,
     hasCardWrapper = false,
     cardProps,
+    intent,
     ...otherProps
 }: OverviewItemProps) => {
     const item = (
@@ -45,6 +51,7 @@ export const OverviewItem = ({
                 `${eccgui}-overviewitem__item ` +
                 (densityHigh ? `${eccgui}-overviewitem__item--highdensity ` : "") +
                 (hasSpacing ? `${eccgui}-overviewitem__item--hasspacing ` : "") +
+                (intent ? `${intentClassName(intent)} ` : "") +
                 className
             }
         >

src/components/OverviewItem/overviewitem.scss

@@ -44,6 +44,9 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 }
 
 .#{$eccgui}-overviewitem__item {
+    --eccgui-overviewitem-color-background: transparent;
+    --eccgui-overviewitem-color-text: inherit;
+
     display: flex;
     flex-flow: row nowrap;
     place-content: stretch flex-start;
@@ -59,21 +62,54 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     // height: mini-units(6);
     min-height: mini-units(6);
     max-height: mini-units(6);
+    color: var(--eccgui-overviewitem-color-text);
+    background-color: var(--eccgui-overviewitem-color-background);
 
     &[tabindex]:not([tabindex="-1"]) {
         cursor: pointer;
     }
 
     .#{$ns}-menu > & {
         // TODO: discuss if this should be enabled via explicit element property
-        // remove this because reason was not clear and it lead to wrong display
-        // @extend .#{$ns}-menu-item;
 
         &--active {
             color: $eccgui-color-accent-contrast;
             background-color: $eccgui-color-accent;
         }
     }
+
+    &.#{$eccgui}-intent--info {
+        --eccgui-overviewitem-color-background: #{$eccgui-color-info-background};
+        --eccgui-overviewitem-color-text: #{$eccgui-color-info-text};
+    }
+    &.#{$eccgui}-intent--success {
+        --eccgui-overviewitem-color-background: #{$eccgui-color-success-background};
+        --eccgui-overviewitem-color-text: #{$eccgui-color-success-text};
+    }
+    &.#{$eccgui}-intent--warning {
+        --eccgui-overviewitem-color-background: #{$eccgui-color-warning-background};
+        --eccgui-overviewitem-color-text: #{$eccgui-color-warning-text};
+    }
+    &.#{$eccgui}-intent--danger {
+        --eccgui-overviewitem-color-background: #{$eccgui-color-danger-background};
+        --eccgui-overviewitem-color-text: #{$eccgui-color-danger-text};
+    }
+    &.#{$eccgui}-intent--neutral {
+        --eccgui-overviewitem-color-background: #{$eccgui-color-workspace-background};
+        --eccgui-overviewitem-color-text: #{$eccgui-color-workspace-text};
+    }
+    &.#{$eccgui}-intent--neutral {
+        --eccgui-overviewitem-color-background: #{$eccgui-color-workspace-background};
+        --eccgui-overviewitem-color-text: #{$eccgui-color-workspace-text};
+    }
+    &.#{$eccgui}-intent--primary {
+        --eccgui-overviewitem-color-background: #{eccgui-color-var("identity", "brand", "100")};
+        --eccgui-overviewitem-color-text: #{eccgui-color-var("identity", "brand", "900")};
+    }
+    &.#{$eccgui}-intent--accent {
+        --eccgui-overviewitem-color-background: #{eccgui-color-var("identity", "accent", "100")};
+        --eccgui-overviewitem-color-text: #{eccgui-color-var("identity", "accent", "900")};
+    }
 }
 
 .#{$eccgui}-overviewitem__item--highdensity {

src/components/OverviewItem/stories/OverviewItem.stories.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
+
 import {
     Badge,
     Card,
@@ -35,6 +37,10 @@ export default {
             control: false,
             description: "Elements used as depiction, text and interactive elements of an overview-item.",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "none", "primary", "success", "warning", "danger", "neutral", "accent", "info"],
+        },
     },
 } as Meta<typeof OverviewItem>;