@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

package/src/components/Stepper/Step.tsx

@@ -0,0 +1,116 @@
+/*
+ * 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 React, { CSSProperties, ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+import { Icon, Icons } from "../Icon/Icon";
+import classes from "./Step.module.scss";
+
+export type StepStatus = "waiting" | "current" | "done" | "error";
+
+export interface Props extends Omit<ComponentPropsWithRef<"div">, "onClick"> {
+  status: StepStatus;
+  label: string;
+  caption?: string;
+  index?: number;
+  lastStep?: boolean;
+  disabled?: boolean;
+  direction?: "horizontal" | "vertical";
+  textPosition?: "bottom" | "right";
+  onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+}
+
+const gapBetweenStepsInRem = 0.5;
+
+const getStepContent = (index: number, status: StepStatus) => {
+  switch (status) {
+    case "waiting":
+      return String(index + 1);
+    case "current":
+      return String(index + 1);
+    case "done":
+      return <Icon icon={Icons.Checkmark} />;
+    case "error":
+      return "!";
+  }
+};
+
+const getStepMaxWidth = (isHorizontal: boolean, lastStep: boolean, index: number) => {
+  if (isHorizontal && lastStep) {
+    const percentage = 100 / (index + 1);
+    const gapSize = index * gapBetweenStepsInRem;
+    return `calc(${percentage}% - ${gapSize}rem)`;
+  }
+};
+
+export const StepComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    label,
+    caption,
+    status,
+    index,
+    direction,
+    disabled,
+    lastStep,
+    onClick,
+    textPosition,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const stepIndex = index ?? 0;
+  const additionalClasses = [classes[status]];
+  const additionalStyles: CSSProperties = {};
+  const isHorizontal = direction === "horizontal";
+  const isTextBottom = textPosition === "bottom";
+  const hasCaption = !!caption;
+
+  additionalClasses.push(isHorizontal ? classes["horizontal"] : classes["vertical"]);
+  disabled && additionalClasses.push(classes["disabled"]);
+  isTextBottom && additionalClasses.push(classes["text-bottom"]);
+  lastStep && additionalClasses.push(classes["last-step"]);
+  hasCaption && additionalClasses.push(classes["has-caption"]);
+
+  additionalStyles["maxWidth"] = getStepMaxWidth(isHorizontal, !!lastStep, index!);
+
+  return (
+    <div
+      style={additionalStyles}
+      className={`${classes["step-wrapper"]} ${additionalClasses.join(" ")}`}
+      {...rest}
+    >
+      <div aria-hidden className={classes["step"]} onClick={onClick}>
+        {getStepContent(stepIndex, status)}
+      </div>
+      <button
+        aria-current={status === "current" ? "step" : undefined}
+        className={classes["label"]}
+        disabled={disabled}
+        onClick={onClick}
+      >
+        <span className={classes["label-inner-wrapper"]}>
+          {label}{" "}
+          {!lastStep && isHorizontal && !isTextBottom && (
+            <div className={`${classes["stepper-line"]} ${classes["stepper-line-extender"]}`}></div>
+          )}
+        </span>
+        <span className={classes["caption"]}>{caption}</span>
+      </button>
+      {!lastStep && <div className={classes["stepper-line"]}></div>}
+    </div>
+  );
+};
+
+export const Step = React.forwardRef(StepComponent);

package/src/components/Stepper/Stepper.module.scss

@@ -0,0 +1,17 @@
+.stepper {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-start;
+  width: auto;
+  flex-direction: column;
+
+  &.horizontal {
+    justify-content: center;
+    flex-direction: row;
+    width: 100%;
+
+    &.text-bottom {
+      gap: 0;
+    }
+  }
+}

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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 React, { ComponentPropsWithRef } from "react";
+import { Step, Props as StepProps } from "./Step";
+import classes from "./Stepper.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  steps: StepProps[];
+  direction: "horizontal" | "vertical";
+  textPosition?: "bottom" | "right";
+}
+
+export const Stepper = ({
+  steps,
+  direction = "horizontal",
+  textPosition,
+  className,
+  ...rest
+}: Props) => {
+  const additionalClasses = [];
+  direction === "horizontal" && additionalClasses.push(classes["horizontal"]);
+  textPosition === "bottom" && additionalClasses.push(classes["text-bottom"]);
+  className && additionalClasses.push(className);
+
+  return (
+    <div {...rest} className={`${classes["stepper"]} ${additionalClasses.join(" ")}`}>
+      {steps.map((step, index) => (
+        <Step
+          {...step}
+          key={step.label.toLowerCase().replace(/\s/, "-")}
+          index={index}
+          direction={direction}
+          lastStep={index + 1 === steps.length}
+          textPosition={textPosition}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/Tabs/Tab.module.scss

@@ -0,0 +1,27 @@
+/*!
+ * 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.
+ */
+
+.tab {
+  display: none;
+
+  &:focus-visible {
+    outline-color: var(--color-focus);
+  }
+
+  &.selected {
+    display: block;
+  }
+}

package/src/components/Tabs/Tab.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 React, { HTMLProps } from "react";
+import classes from "./Tab.module.scss";
+
+export interface Props extends Omit<HTMLProps<HTMLDivElement>, "children"> {
+  title: string;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  children?: any;
+  tabActive?: boolean;
+  icon?: React.ReactNode;
+}
+
+export const Tab = ({ children, tabActive, ...rest }: Props) => {
+  return (
+    <div
+      {...rest}
+      aria-hidden={!tabActive}
+      role="tabpanel"
+      className={`${classes["tab"]} ${tabActive ? classes["selected"] : ""} ${
+        rest.className ?? ""
+      }`}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Tabs/TabButton.module.scss

@@ -0,0 +1,87 @@
+/*!
+ * 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.
+ */
+
+@use "../../mixins.module.scss";
+@use "../../functions" as *;
+
+.tabbutton {
+  color: var(--tab-text-color);
+  border: 0;
+  border-radius: 0;
+  font-size: var(--font-size);
+  line-height: var(--default-line-height);
+  margin: 0;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  font-family: var(--font-family);
+  background-color: transparent;
+  white-space: nowrap;
+  position: relative;
+  font-weight: normal;
+  border-bottom-style: var(--tablist-border-style);
+  border-bottom-width: var(--tablist-border-width);
+  border-bottom-color: var(--tablist-border-color);
+
+  @include mixins.focusVisibleOutline($outlineOffset: 0);
+  &:where(:focus-visible) {
+    z-index: 1;
+  }
+
+  &:hover {
+    background-color: var(--tab-hover-color);
+  }
+
+  &:active {
+    background-color: var(--tab-pressed-color);
+  }
+
+  &.selected {
+    color: var(--tab-active-text-color);
+  }
+
+  &.fluid {
+    flex: 1;
+  }
+
+  &.has-icon {
+    gap: relativeToBaseFontSize(0.25);
+    display: inline-flex;
+    align-items: center;
+
+    i {
+      display: flex;
+    }
+
+    span[data-icon] {
+      display: inline-block;
+      font-size: var(--font-size-big);
+      width: var(--font-size-big);
+    }
+
+    &.top-icon,
+    &.bottom-icon {
+      flex-direction: column;
+    }
+
+    &.left-icon i {
+      order: -1;
+    }
+
+    &.top-icon i {
+      order: -1;
+    }
+  }
+}

package/src/components/Tabs/TabButton.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  createRef,
+  RefObject,
+  useEffect
+} from "react";
+import classes from "./TabButton.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"button"> {
+  tabActive?: boolean;
+  focused?: boolean;
+  fluid?: boolean;
+  icon?: React.ReactNode;
+  iconPosition?: "left" | "right" | "top" | "bottom";
+}
+
+const TabButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { children, tabActive, focused, title, fluid, icon, iconPosition, className, ...rest }: Props,
+  ref
+) => {
+  const buttonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();
+
+  useEffect(() => {
+    if (focused && buttonRef.current) {
+      buttonRef.current.focus();
+    }
+  }, [buttonRef.current, focused]);
+
+  const tabButtonClasses = [classes["tabbutton"]];
+  tabActive && tabButtonClasses.push(classes["selected"]);
+  fluid && tabButtonClasses.push(classes["fluid"]);
+  className && tabButtonClasses.push(className);
+  icon && tabButtonClasses.push(classes["has-icon"], classes[`${iconPosition}-icon`]);
+
+  return (
+    <button
+      {...rest}
+      className={tabButtonClasses.join(" ")}
+      ref={buttonRef}
+      role="tab"
+      type="button"
+    >
+      {children}
+      {icon && <i>{icon}</i>}
+    </button>
+  );
+};
+
+export const TabButton = React.forwardRef(TabButtonComponent);

package/src/components/Tabs/Tabs.module.scss

@@ -0,0 +1,58 @@
+/*!
+ * 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.
+ */
+
+@use "../../mixins.module.scss";
+
+$focus-width: 5px;
+
+.tabs {
+  background-color: var(--tabs-background-color);
+  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.tablist {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  position: relative;
+  margin: -$focus-width;
+  padding: $focus-width;
+  z-index: 0;
+
+  &.center {
+    justify-content: center;
+  }
+
+  &.right {
+    justify-content: flex-end;
+  }
+}
+
+.indicator {
+  $transition-property: left, width;
+
+  position: absolute;
+  height: calc(var(--tab-active-border-height) - var(--tablist-border-width));
+  border-radius: 0.125rem 0.125rem 0 0;
+  background-color: var(--tab-active-border-color);
+  z-index: 2;
+
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
+}

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,217 @@
+/*
+ * 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 React, {
+  ComponentPropsWithRef,
+  createRef,
+  ForwardRefRenderFunction,
+  ReactElement,
+  RefObject,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Props as TabProps } from "./Tab";
+import { TabButton } from "./TabButton";
+import classes from "./Tabs.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  children: ReactElement<TabProps>[];
+  selected?: number;
+  onTabChange?: (index: number) => void;
+  tabChanging?: (newIndex: number, oldIndex: number) => Promise<boolean> | boolean;
+  fluid?: boolean;
+  align?: "left" | "center" | "right";
+  tabListClassName?: string;
+  iconsPosition?: "left" | "right" | "top" | "bottom";
+}
+
+const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    selected = 0,
+    onTabChange,
+    className,
+    fluid,
+    tabListClassName,
+    align,
+    iconsPosition = "left",
+    tabChanging,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const [renderedButtons, setRenderedButtons] = useState<ReactElement[]>([]);
+  const [renderedTabs, setRenderedTabs] = useState<ReactElement[]>([]);
+  const [activeTabIndex, setActiveTabIndex] = useState(selected);
+  const [usingKeyboardNavigation, setUsingKeyboardNavigation] = useState(false);
+  const [indicatorStyles, setIndicatorStyles] = useState<{
+    width: number;
+    left: number;
+    top: number;
+  }>({
+    width: 0,
+    left: 0,
+    top: 0
+  });
+  const tabsRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
+  const indicatorRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    const totalAmountOfTabs = [children].flat().length;
+    if (!usingKeyboardNavigation) {
+      setUsingKeyboardNavigation(true);
+    }
+    if (totalAmountOfTabs === 1) {
+      return;
+    }
+
+    switch (e.key) {
+      case "ArrowRight": {
+        const nextIndex = activeTabIndex + 1 > totalAmountOfTabs - 1 ? 0 : activeTabIndex + 1;
+        void handleTabClick(nextIndex);
+        break;
+      }
+      case "ArrowLeft": {
+        const prevIndex = activeTabIndex - 1 < 0 ? totalAmountOfTabs - 1 : activeTabIndex - 1;
+        void handleTabClick(prevIndex);
+        break;
+      }
+      case "Home":
+        void handleTabClick(0);
+        break;
+      case "End":
+        void handleTabClick(totalAmountOfTabs - 1);
+        break;
+      default:
+        return;
+    }
+  };
+
+  const calculateIndicatorPosition = () => {
+    if (tabsRef.current) {
+      const selectedButton = tabsRef.current.querySelectorAll('button[role="tab"]')[
+        activeTabIndex
+      ] as HTMLElement;
+
+      setIndicatorStyles({
+        left: selectedButton.offsetLeft,
+        top:
+          selectedButton.offsetTop +
+          selectedButton.offsetHeight -
+          indicatorRef.current!.offsetHeight -
+          parseInt(getComputedStyle(selectedButton).borderBottomWidth),
+        width: selectedButton.offsetWidth
+      });
+    }
+  };
+
+  const handleTabClick = async (newIndex: number) => {
+    try {
+      const allowed =
+        typeof tabChanging === "function"
+          ? await Promise.resolve(tabChanging(newIndex, activeTabIndex))
+          : true;
+
+      if (!allowed) {
+        const buttons = tabsRef.current?.querySelectorAll<HTMLButtonElement>('button[role="tab"]');
+        buttons?.[activeTabIndex]?.focus();
+        return;
+      }
+
+      setActiveTabIndex(newIndex);
+      onTabChange?.(newIndex);
+    } catch (error) {
+      console.error("handleTabClick failed: ", error);
+    }
+  };
+
+  useEffect(() => {
+    if (tabsRef.current && renderedButtons.length) {
+      calculateIndicatorPosition();
+    }
+  }, [tabsRef.current, activeTabIndex, renderedButtons]);
+
+  useEffect(() => {
+    const buttons = React.Children.map(children, (child, index) => {
+      if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
+        return React.createElement(
+          TabButton,
+          {
+            key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_button`,
+            tabIndex: activeTabIndex === index ? 0 : -1,
+            "aria-selected": activeTabIndex === index,
+            focused: usingKeyboardNavigation && activeTabIndex === index,
+            tabActive: activeTabIndex === index,
+            "aria-controls": `tab_${index}`,
+            onClick: () => {
+              void handleTabClick(index);
+            },
+            disabled: child.props.disabled,
+            fluid: fluid,
+            iconPosition: iconsPosition,
+            icon: child.props.icon
+          },
+          child.props.title
+        );
+      }
+      return null;
+    });
+
+    const tabs = React.Children.map(children, (child, index) => {
+      if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
+        return React.cloneElement(child, {
+          key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_tab`,
+          tabIndex: activeTabIndex === index ? 0 : -1,
+          tabActive: activeTabIndex === index,
+          id: `tab_${index}`,
+          children: child.props.children
+        });
+      }
+
+      return null;
+    });
+
+    setRenderedTabs(tabs);
+    setRenderedButtons(buttons);
+  }, [activeTabIndex, fluid, align, iconsPosition]);
+
+  const tabListClasses = [classes["tablist"]];
+  align && tabListClasses.push(classes[align]);
+  tabListClassName && tabListClasses.push(tabListClassName);
+
+  return (
+    <div {...rest} ref={tabsRef} className={`${classes["tabs"]} ${className ?? ""}`}>
+      <div role="tablist" className={tabListClasses.join(" ")} onKeyDown={handleKeyDown}>
+        {renderedButtons}
+        <div
+          className={classes["indicator"]}
+          ref={indicatorRef}
+          aria-hidden="true"
+          tabIndex={-1}
+          style={{
+            width: indicatorStyles.width,
+            left: indicatorStyles.left,
+            top: indicatorStyles.top
+          }}
+        />
+      </div>
+      <div>{renderedTabs}</div>
+    </div>
+  );
+};
+
+export const Tabs = React.forwardRef(TabsComponent);