@eccenca/gui-elements 23.0.0 → 23.1.0-rc.2

package/src/components/Icon/Icon.tsx

@@ -1,111 +1,52 @@
 import React from "react";
-import { IconProps as CarbonIconProps } from "carbon-components-react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { IntentTypes } from "../../common/Intent";
-import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
-import canonicalIcons, {IconSized, ValidIconName} from "./canonicalIconNames"
+import BaseIcon, { BaseIconProps } from "./BaseIcon";
+import canonicalIcons, { CarbonIconType, ValidIconName } from "./canonicalIconNames"
 
-export interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
+export interface IconProps extends Omit<BaseIconProps, "iconComponent"> {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.
      */
     name: ValidIconName | string[],
-    /**
-     * Add tooltip text to icon
-     */
-    tooltipText?: string,
-    /**
-     * Intent state of icon.
-     * Currently only `success`, `info`, `warning` and `danger` are implemented for icons, even there are more states available.
-     */
-    intent?: IntentTypes
-    /**
-     * Display large icon version.
-     */
-    large?: boolean,
-    /**
-     * Display small icon version.
-     */
-    small?: boolean,
-    /**
-     * Additional CSS classes.
-     */
-    className?: string,
-    /**
-     * Description for icon as accessibility fallback.
-     */
-    description?: string,
-    /**
-     * Additonal tooltip properties, e.g. `hoverOpenDelay`.
-     */
-    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>,
 }
 
 /** Returns the first icon that exists or the fallback icon. */
-const findExistingIcon = (iconName: ValidIconName | string[],
-                          fallbackItem: IconSized = canonicalIcons["Undefined"]): IconSized => {
+const findExistingIcon = (
+    iconName: ValidIconName | string[],
+    fallbackItem: CarbonIconType = canonicalIcons["undefined"]
+): CarbonIconType => {
     if (typeof iconName === "string") {
-        return canonicalIcons[iconName] ?? fallbackItem
+        return canonicalIcons[iconName] ?? fallbackItem;
     } else {
-        return canonicalIcons[findExistingIconName(iconName)]
+        return canonicalIcons[findExistingIconName(iconName)];
     }
 }
 
 /** Returns the first icon name that exists or the fallback icon name. */
-export const findExistingIconName = (iconNames: string[],
-                                     fallbackIconName: ValidIconName = "Undefined"): ValidIconName => {
+export const findExistingIconName = (
+    iconNames: string[],
+    fallbackIconName: ValidIconName = "undefined"
+): ValidIconName => {
     let foundIconName: string = fallbackIconName;
-    const iconNameStack = [...iconNames]
+    const iconNameStack = [...iconNames];
     while (foundIconName === fallbackIconName && iconNameStack.length > 0) {
         let iconNameToTest = iconNameStack.shift();
         if (iconNameToTest && (canonicalIcons as any)[iconNameToTest] != null) {
-            foundIconName = iconNameToTest
+            foundIconName = iconNameToTest;
         }
     }
-    return foundIconName as ValidIconName
+    return foundIconName as ValidIconName;
 }
 
+/**
+ * The icon provides a graphical symbol that is specified by a canonical name.
+ * This name is hard-coded to force a homegenous usage of the [Carbon icon library](https://carbondesignsystem.com/guidelines/icons/library).
+ */
 function Icon({
-    className = "",
-    name = "undefined",
-    large = false,
-    small = false,
-    tooltipText,
-    tooltipProps,
-    intent,
-    ...restProps
+    name,
+    ...otherBaseIconProps
 }: IconProps) {
-    let sizeConfig = { height: 20, width: 20 };
-    if (small) sizeConfig = { height: 16, width: 16 };
-    if (large) sizeConfig = { height: 32, width: 32 };
-    const carbonIcon = findExistingIcon(name)
-    let CarbonIconSized = carbonIcon.normal
-    if(small) CarbonIconSized = carbonIcon.small
-    if(large) CarbonIconSized = carbonIcon.large
-
-    if (!!tooltipText && !restProps.description) {
-        restProps['description'] = tooltipText;
-    }
-
-    const icon = (
-        <CarbonIconSized
-            {...restProps}
-            {...sizeConfig}
-            className={
-                `${eccgui}-icon ` +
-                (intent ? `${eccgui}-intent--${intent} ` : "") +
-                className
-            }
-        />
-    );
-    return tooltipText ? (
-        <Tooltip content={tooltipText} {...tooltipProps}>
-            <span>{icon}</span>
-        </Tooltip>
-    ) : (
-        icon
-    );
+    return <BaseIcon iconComponent={findExistingIcon(name)} {...otherBaseIconProps} />
 }
 
 export default Icon;

package/src/components/Icon/IconButton.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Button, { ButtonProps, AnchorOrButtonProps } from "../Button/Button";
 import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import Icon from "./Icon";
+import { TestIconProps } from "./TestIcon";
 import {ValidIconName} from "./canonicalIconNames";
 
 interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
@@ -9,21 +10,21 @@ interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.
      */
-    name: ValidIconName | string[]
+    name: ValidIconName | string[] | React.ReactElement<TestIconProps>;
     /**
      * Button text, will be displayed as tooltip.
      */
-    text?: string,
+    text?: string;
     /**
      * If `text` should be set as HTML `title` attribute instead of attaching it as tooltip.
      * If true then `tooltipProps` is ignored.
      */
-    tooltipAsTitle?: boolean
+    tooltipAsTitle?: boolean;
     /**
      * Description for icon as accessibility fallback.
      * If not set then `text` is used.
      */
-    description?: string
+    description?: string;
     /**
      * Button is displayed with minimal styles (no borders, no background color).
      */
@@ -41,20 +42,23 @@ function IconButton({
     minimal=true,
     ...restProps
 }: IconButtonProps & AnchorOrButtonProps) {
+    const iconProps = {
+        small: restProps.small,
+        large: restProps.large,
+        tooltipText: tooltipAsTitle ? undefined : text,
+        tooltipProps: !!tooltipProps ? {hoverOpenDelay: 1000, ...tooltipProps} : {hoverOpenDelay: 1000},
+        description: description ? description : text,
+    };
+
     return (
         <Button
             title={tooltipAsTitle && text ? text : undefined}
             {...restProps}
-            icon={
-                <Icon
-                    name={name}
-                    small={restProps.small}
-                    large={restProps.large}
-                    tooltipText={tooltipAsTitle ? undefined : text}
-                    tooltipProps={!!tooltipProps ? {hoverOpenDelay: 1000, ...tooltipProps} : {hoverOpenDelay: 1000}}
-                    description={description ? description : text}
-                />
-            }
+            icon={(typeof name === "string" || Array.isArray(name)) ? (
+                <Icon name={name} {...iconProps} />
+            ) : (
+                React.cloneElement(name, iconProps)
+            )}
             className={`${eccgui}-button--icon ` + className}
             minimal={minimal}
         />

package/src/components/Icon/TestIcon.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import BaseIcon, { BaseIconProps } from "./BaseIcon";
+import { CarbonIconType } from "./canonicalIconNames"
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface TestIconProps extends Omit<BaseIconProps, "iconComponent"> {
+    /**
+     * Carbon icon that is used instead of the via `name` defined canonical named icon.
+     */
+    tryout: CarbonIconType;
+}
+
+/**
+ * This component is primarily provided to test icons in a third application without defining them via a canonical name before.
+ *
+ * Example usage:
+ * ```
+ * import { LogoReact } from "@carbon/icons-react";
+ * const testIcon = <TestIcon tryout={LogoReact} />
+ * ```
+ */
+function TestIcon({
+    className = "",
+    tryout,
+    ...otherBaseIconProps
+}: TestIconProps) {
+    return (
+        <BaseIcon
+            iconComponent={tryout}
+            className={
+                `${eccgui}-icon--test` +
+                (className ? ` ${className}` : "")
+            }
+            {...otherBaseIconProps}
+        />
+    );
+}
+
+export default TestIcon;