@onewelcome/react-lib-components 9.8.0 → 10.0.0

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

@@ -1,17 +0,0 @@
-.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

@@ -1,53 +0,0 @@
-/*
- * 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

@@ -1,27 +0,0 @@
-/*!
- * 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

@@ -1,41 +0,0 @@
-/*
- * 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

@@ -1,87 +0,0 @@
-/*!
- * 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 "src/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

@@ -1,66 +0,0 @@
-/*
- * 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

@@ -1,58 +0,0 @@
-/*!
- * 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

@@ -1,197 +0,0 @@
-/*
- * 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;
-  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",
-    ...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":
-        setActiveTabIndex(currentIndex => {
-          return currentIndex + 1 > totalAmountOfTabs - 1 ? 0 : currentIndex + 1;
-        });
-        break;
-      case "ArrowLeft":
-        setActiveTabIndex(currentIndex => {
-          return currentIndex - 1 < 0 ? totalAmountOfTabs - 1 : currentIndex - 1;
-        });
-        break;
-      case "Home":
-        setActiveTabIndex(0);
-        break;
-      case "End":
-        setActiveTabIndex(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
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (tabsRef.current && renderedButtons.length) {
-      calculateIndicatorPosition();
-    }
-  }, [tabsRef.current, activeTabIndex, renderedButtons]);
-
-  useEffect(() => {
-    onTabChange?.(activeTabIndex);
-  }, [activeTabIndex]);
-
-  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: () => setActiveTabIndex(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);

package/src/components/Tag/RemoveButton.module.scss

@@ -1,42 +0,0 @@
-/*!
- * 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";
-
-.remove {
-  width: 1.25rem;
-  height: 1.25rem;
-  background: none;
-  border: none;
-  padding: 0;
-  margin-right: -0.375rem;
-  cursor: pointer;
-
-  &:hover {
-    border-radius: 0.125rem;
-    background-color: var(--color-black10);
-  }
-
-  &:active {
-    background-color: var(--color-blue-grey400);
-  }
-
-  @include mixins.focusVisibleOutline($outlineOffset: 0);
-
-  .icon {
-    font-size: var(--font-size-small);
-  }
-}

package/src/components/Tag/RemoveButton.tsx

@@ -1,53 +0,0 @@
-/*
- * 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, HTMLAttributes, forwardRef } from "react";
-import { Icon, Icons } from "../Icon/Icon";
-
-import readyclasses from "../../readyclasses.module.scss";
-import classes from "./RemoveButton.module.scss";
-
-export interface Props extends HTMLAttributes<HTMLButtonElement> {
-  removeLabel?: string;
-  label?: string;
-  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-}
-
-const RemoveButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
-  { removeLabel = "Remove", label, onRemove, ...rest }: Props,
-  ref
-) => {
-  return (
-    onRemove && (
-      <button
-        title=""
-        type="button"
-        {...rest}
-        ref={ref}
-        className={`${classes["remove"]} ${rest.className ?? ""}`}
-        onClick={onRemove}
-      >
-        <Icon icon={Icons.Times} className={classes["icon"]} />
-        <span className={readyclasses["sr-only"]}>
-          {removeLabel}
-          {label ? " " + label : ""}
-        </span>
-      </button>
-    )
-  );
-};
-
-export const RemoveButton = forwardRef(RemoveButtonComponent);

package/src/components/Tag/Tag.module.scss

@@ -1,43 +0,0 @@
-/*!
- * 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.
- */
-
-.tag {
-  font-size: var(--font-size-sub);
-  padding: 0.25rem 0.75rem;
-  border: none;
-  border-radius: 3.125rem;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-
-  &.tag-enabled {
-    background-color: var(--color-green100);
-  }
-
-  &.tag-disabled {
-    background-color: var(--color-blue-grey100);
-  }
-
-  &.sharp {
-    border-radius: 0.125rem;
-  }
-
-  .label {
-    line-height: 2;
-    font-size: inherit;
-    color: inherit;
-  }
-}