@onewelcome/react-lib-components 9.7.1 → 9.8.1

package/src/components/Tooltip/Tooltip.module.scss

@@ -156,6 +156,10 @@
     &:hover {
       color: var(--default);
     }
+
+    &.error {
+      color: var(--error);
+    }
   }
 }
 
@@ -175,6 +179,7 @@
   pointer-events: none;
   box-shadow: 0 0.0625rem 0.3125rem 0 rgba(1, 5, 50, 0.3);
   word-break: break-word;
+  z-index: var(--tooltip-index);
 
   @include mixins.transition($transition-property, 0.2s, ease-in-out);
 

package/src/components/Tooltip/Tooltip.tsx

@@ -39,6 +39,7 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   title?: string;
   children: ReactNode;
   domRoot?: HTMLElement;
+  icon?: Icons;
   location?: "left" | "right" | "top" | "bottom";
   color?: "black" | "blue";
   position?: "start" | "center" | "end";
@@ -126,6 +127,7 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     location = "right",
     position = "center",
     color = "black",
+    icon,
     ...rest
   }: Props,
   ref
@@ -218,7 +220,8 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             onMouseEnter={() => setVisible(true)}
             onMouseLeave={() => setVisible(false)}
             icon={Icons.InfoCircle}
-            className={classes.icon}
+            aria-describedby={identifier}
+            className={`${classes.icon}`}
           />
         )}
         {createPortal(

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -102,7 +102,6 @@ export interface CSSProperties extends ButtonColorProps {
   inputHoverBackgroundColor?: string;
   inputDisabledBackgroundColor?: string;
   inputFontSize?: string;
-  iconFontBig?: string;
   dragBorderStyle?: string;
   modalTitleColor?: string;
   modalShadowColor?: string;
@@ -229,6 +228,8 @@ export interface CSSProperties extends ButtonColorProps {
   fontSizeDataGrid?: string;
   readOnlyBorderColor?: string;
   readOnlyTextColor?: string;
+  iconFontBig?: string;
+  tooltipIndex?: string;
 }
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -319,7 +320,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     inputHoverBackgroundColor: "var(--default-hover-color)",
     inputDisabledBackgroundColor: "var(--input-hover-background-color)",
     inputFontSize: "0.875rem",
-    iconFontBig: "1.125rem",
     dragBorderStyle: "solid",
     modalTitleColor: "var(--font-color-h4)",
     modalShadowColor: "rgba(0, 0, 0, 0.16)",
@@ -376,7 +376,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     stepperCaptionDisabledColor: "var(--color-blue-grey400)",
     stepperCaptionErrorDisabledColor: "var(--color-red200)",
     bannerBorderRadius: "2px",
-    bannerBorderWidth: "0 0 0 4px",
+    bannerBorderWidth: "4px",
     dataGridRowBackgroundColor: "transparent",
     dataGridRowHoverBackgroundColor: "var(--default-hover-color)",
     progressBarBackgroundColor: "var(--disabled)",
@@ -444,7 +444,9 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     readOnlyBorderColor: "var(--color-blue-grey100)",
     readOnlyTextColor: "var(--color-blue-grey900)",
     formControlFontSize: "0.875rem",
-    fontSizeDataGrid: "0.875rem"
+    fontSizeDataGrid: "0.875rem",
+    iconFontBig: "1.125rem",
+    tooltipIndex: "12"
   };
 
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */

package/src/index.ts

@@ -133,6 +133,10 @@ export type { Props as SideSheetHeaderProps } from "./components/Notifications/S
 /** Form components */
 export { Checkbox } from "./components/Form/Checkbox/Checkbox";
 export type { Props as CheckboxProps } from "./components/Form/Checkbox/Checkbox";
+export {
+  InlineCheckbox,
+  InlineCheckboxProps
+} from "./components/InlineEditing/InlineCheckbox/InlineCheckbox";
 export { Fieldset } from "./components/Form/Fieldset/Fieldset";
 export type { Props as FieldsetProps } from "./components/Form/Fieldset/Fieldset";
 export { Form } from "./components/Form/Form";
@@ -154,6 +158,10 @@ export type { Props as RadioProps } from "./components/Form/Radio/Radio";
 export { RadioWrapper } from "./components/Form/Wrapper/RadioWrapper/RadioWrapper";
 export type { Props as RadioWrapperProps } from "./components/Form/Wrapper/RadioWrapper/RadioWrapper";
 export { Select } from "./components/Form/Select/SingleSelect/Select";
+export {
+  InlineSelect,
+  InlineSelectProps
+} from "./components/InlineEditing/InlineEditingSelect/InlineSelect";
 export { MultiSelect } from "./components/Form/Select/MultiSelect/MultiSelect";
 export type {
   SingleSelectProps,

package/src/utils/statusUtils.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { Icons } from "../components/Icon/Icon";
+
+interface StatusProps {
+  error?: boolean;
+  success?: boolean;
+  info?: boolean;
+}
+
+type StatusState = "error" | "success" | "info";
+
+export function getStatusIcon({ error, success, info }: StatusProps): Icons {
+  if (error) {
+    return Icons.Error;
+  }
+  if (success) {
+    return Icons.CheckmarkCircleAlt;
+  }
+  return Icons.InfoCircle;
+}
+
+export function getStatusState(
+  { error, success, info }: StatusProps,
+  defaultToInfo = false
+): StatusState | undefined {
+  if (error) {
+    return "error";
+  }
+  if (success) {
+    return "success";
+  }
+  if (info || defaultToInfo) {
+    return "info";
+  }
+  return undefined;
+}