add ApplicationViewability component to hide elements for certain media

Author: haschek

src/components/Application/ApplicationViewability.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import classNames from "classnames";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+type media = "print" | "screen";
+
+interface ApplicationViewabilityShow {
+    /**
+     * Show on media type.
+     * If used, `hide` cannot be set.
+     */
+    show: media;
+    hide?: never;
+}
+
+interface ApplicationViewabilityHide {
+    /**
+     * Hide on media type.
+     * If used, `show` cannot be set.
+     */
+    hide: media;
+    show?: never;
+}
+
+interface ApplicationViewabilityUndecided {
+    /**
+     * Only one child allowed.
+     * Need to process the `className` property.
+     */
+    children: React.ReactElement<{ className?: string }>;
+}
+
+export type ApplicationViewabilityProps = ApplicationViewabilityUndecided &
+    (ApplicationViewabilityShow | ApplicationViewabilityHide);
+
+/**
+ * Sets the viewability of the the contained element regarding media.
+ * Can be used to hide elements, e.g. when the page is printed.
+ */
+export const ApplicationViewability = ({ children, show, hide }: ApplicationViewabilityProps) => {
+    if (!show && !hide) {
+        return children;
+    }
+    if (show === hide) {
+        // eslint-disable-next-line no-console
+        console.warn("`<ApplicationViewability/>` used with same media type for `hide` and `show`.");
+        return children;
+    }
+
+    const enhancedClone = React.cloneElement(children, {
+        className: classNames(children.props.className, {
+            [`${eccgui}-application__hide--${hide}`]: hide,
+            [`${eccgui}-application__show--${show}`]: show,
+        }),
+    });
+
+    return enhancedClone;
+};
+
+export default ApplicationViewability;

src/components/Application/_viewability.scss

@@ -0,0 +1,13 @@
+@media print {
+    .#{eccgui}-application__hide--print,
+    .#{eccgui}-application__show--screen {
+        display: none;
+    }
+}
+
+@media screen {
+    .#{eccgui}-application__hide--screen,
+    .#{eccgui}-application__show--print {
+        display: none;
+    }
+}

src/components/Application/application.scss

@@ -10,3 +10,4 @@
 // @import '~@carbon/react/scss/components/ui-shell/navigation-menu';
 @import "content";
 @import "dropzone";
+@import "viewability";

src/components/Application/index.ts

@@ -8,4 +8,5 @@ export * from "./ApplicationToolbar";
 export * from "./ApplicationToolbarSection";
 export * from "./ApplicationToolbarAction";
 export * from "./ApplicationToolbarPanel";
+export * from "./ApplicationViewability";
 export * from "./helper";

src/components/Application/stories/ApplicationViewability.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ApplicationViewability } from "../../../index";
+export default {
+    title: "Components/Application/Viewability",
+    component: ApplicationViewability,
+    argTypes: {
+        children: {
+            control: false,
+        },
+        hide: {
+            control: {
+                type: "radio",
+            },
+            options: ["print", "screen"],
+        },
+        show: {
+            control: {
+                type: "radio",
+            },
+            options: ["print", "screen"],
+        },
+    },
+} as Meta<typeof ApplicationViewability>;
+
+const TemplateBasicExample: StoryFn<typeof ApplicationViewability> = (args) => <ApplicationViewability {...args} />;
+
+export const Default = TemplateBasicExample.bind({});
+Default.args = {
+    children: (
+        <div>
+            <LoremIpsum random={false} />
+        </div>
+    ),
+};

src/components/Application/tests/ApplicationViewability.test.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { expect } from "@storybook/test";
+import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { ApplicationViewability, ApplicationViewabilityProps, CLASSPREFIX as eccgui } from "../../../index";
+
+import { Default as ApplicationViewabilityStory } from "./../stories/ApplicationViewability.stories";
+
+const applyViewabilityAndCheckClass = (props: Omit<ApplicationViewabilityProps, "children">) => {
+    const { container } = render(<ApplicationViewability {...ApplicationViewabilityStory.args} {...props} />);
+    const element = container.getElementsByClassName(
+        props.hide ? `${eccgui}-application__hide--${props.hide}` : `${eccgui}-application__show--${props.show}`
+    );
+    expect(element.length).toBe(1);
+    return element;
+};
+
+describe("ApplicationViewability", () => {
+    it("should be visible on `show=screen`", () => {
+        applyViewabilityAndCheckClass({ show: "screen" });
+        /**
+         * Currently we cannot really test visibility via jest if it is defined by S/CSS rules because those styles are not known.
+         * Looks like it is not too easy to include and test them.
+         * So we only test for the correct CSS class.
+         */
+        // console.log(window.getComputedStyle(element.item(0)??new Element).getPropertyValue("display"));
+        // waitFor(() => expect(element).toBeVisible());
+    });
+    it("should not be visible on `hide=screen`", () => {
+        applyViewabilityAndCheckClass({ hide: "screen" });
+        // waitFor(() => expect(element).not.toBeVisible());
+    });
+    it("should be visible on `hide=print`", () => {
+        applyViewabilityAndCheckClass({ hide: "print" });
+        // waitFor(() => expect(element).toBeVisible());
+    });
+    it("should not be visible on `show=print`", () => {
+        applyViewabilityAndCheckClass({ show: "print" });
+        // waitFor(() => expect(element).not.toBeVisible());
+    });
+});