@onewelcome/react-lib-components 6.5.0 → 6.7.0

package/src/components/Form/Select/SingleSelect/Select.module.scss

@@ -125,8 +125,19 @@ $listItemHeight: 2.5rem;
       cursor: pointer;
 
       &:focus {
-        outline: var(--input-border-width-focus) solid var(--color-primary300);
-        outline-offset: var(--input-border-width-focus);
+        outline: none;
+
+        &::before {
+          @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0.125rem;
+          height: 100%;
+          width: calc(100% - 0.25rem);
+          opacity: 1;
+          z-index: calc(variables.$popover-z-index + 1);
+        }
       }
 
       &:hover {

package/src/components/Form/Select/SingleSelect/Select.tsx

@@ -31,9 +31,10 @@ import readyclasses from "../../../../readyclasses.module.scss";
 import { filterProps } from "../../../../util/helper";
 import { Icon, Icons } from "../../../Icon/Icon";
 import { SingleSelectProps } from "../Select.interfaces";
-import { useArrowNavigation, useSelectPositionList } from "../SelectService";
+import { useSelectPositionList } from "../useSelectPositionList";
 import { useAddNewBtn } from "../useAddNewBtn";
-import { useSearch } from "../useSearch";
+import { useSearch } from "./useSearch";
+import { useArrowNavigation } from "./useArrowNavigation";
 
 const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectProps> = (
   {
@@ -87,7 +88,10 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
   });
   const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({
     addNew,
-    filter
+    filter,
+    focusedSelectItem,
+    optionsCount,
+    searchInputRef
   });
 
   const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();

package/src/components/Form/Select/{SelectService.ts → SingleSelect/useArrowNavigation.ts}

@@ -14,12 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { useEffect, useState } from "react";
-import {
-  Position,
-  UseArrowNavigationParams,
-  UseSelectPositionListParams
-} from "./Select.interfaces";
+import { UseArrowNavigationParams } from "../Select.interfaces";
 
 /** @scope .*/
 export const useArrowNavigation = ({
@@ -175,98 +170,3 @@ export const useArrowNavigation = ({
 
   return { onArrowNavigation };
 };
-
-/** @scope .*/
-export const useSelectPositionList = ({
-  expanded,
-  optionListReference,
-  addBtnRef,
-  containerReference
-}: UseSelectPositionListParams) => {
-  const [optionsListMaxHeight, setOptionsListMaxHeight] = useState<{
-    wrapper?: string;
-    list?: string;
-  }>({
-    wrapper: undefined,
-    list: undefined
-  });
-  const [opacity, setOpacity] = useState(0); // We set opacity because otherwise if we calculate the max height you see the list full height for a split second and then it shortens.
-  const [listPosition, setListPosition] = useState<Partial<Position>>({});
-
-  useEffect(() => {
-    rePositionList();
-  }, [expanded]);
-
-  const rePositionList = () => {
-    if (!expanded || !optionListReference.current || !containerReference.current) {
-      return;
-    }
-
-    // Check whether there is more space above or below the select
-    // Check space between the bottom of select and top of viewport
-    const spaceOnTopOfSelect = containerReference.current.getBoundingClientRect().bottom;
-
-    // Check space between the top of the select and bottom of viewport
-    const spaceOnBottomOfSelect =
-      window.innerHeight - containerReference.current.getBoundingClientRect().top;
-
-    // Set position as if there's more space on the bottom
-    let position: Position = { top: "2.75rem", bottom: "initial" };
-
-    // Set the position of the select
-    if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {
-      position = { top: "initial", bottom: "2.75rem" };
-    }
-
-    setListPosition(position);
-
-    // Calculate the potential max height of the options list
-    calculateOptionListMaxHeight(position);
-  };
-
-  const calculateOptionListMaxHeight = (position: Position) => {
-    // Calculate max height if there's more space below the select
-    const listHeight = optionListReference.current?.getBoundingClientRect().height;
-    const addNewButtonHeightWithMargin = addBtnRef.current
-      ? addBtnRef.current.getBoundingClientRect().height +
-        parseInt(getComputedStyle(addBtnRef.current).marginBottom)
-      : 0;
-    const transformOrigin = position.top !== "initial" ? "top" : "bottom";
-
-    if (!containerReference.current) {
-      console.error(
-        "The containerReference is empty for some reason in the SelectService.ts for the Select component in react-lib-components. We are trying to calculate the option list max height on expand"
-      );
-      return;
-    }
-
-    const availableSpace =
-      transformOrigin === "top"
-        ? window.innerHeight - containerReference.current.getBoundingClientRect().bottom - 16
-        : containerReference.current.getBoundingClientRect().top - 16;
-
-    if (listHeight && availableSpace < listHeight + addNewButtonHeightWithMargin) {
-      const maxHeightObject = {
-        wrapper: `${availableSpace}px`,
-        list:
-          addNewButtonHeightWithMargin > 0
-            ? `${availableSpace - addNewButtonHeightWithMargin}px`
-            : "none"
-      };
-      setOptionsListMaxHeight(maxHeightObject);
-      setOpacity(100);
-      return;
-    }
-
-    setOptionsListMaxHeight({ wrapper: undefined, list: undefined });
-    setOpacity(100);
-  };
-
-  return {
-    optionsListMaxHeight,
-    opacity,
-    setOpacity,
-    listPosition,
-    setListPosition
-  };
-};

package/src/components/Form/Select/{useSearch.tsx → SingleSelect/useSearch.tsx}

@@ -15,8 +15,8 @@
  */
 
 import React, { useEffect, useRef, useState } from "react";
-import { PartialInputProps, SearchProps } from "./Select.interfaces";
-import { Input } from "../Input/Input";
+import { PartialInputProps, SearchProps } from "../Select.interfaces";
+import { Input } from "../../Input/Input";
 
 interface Props {
   search?: SearchProps;
@@ -34,6 +34,7 @@ interface Props {
   setFocusedSelectItem: (idx: number) => void;
 }
 
+/** @scope .*/
 export const useSearch = ({
   search,
   optionsCount,

package/src/components/Form/Select/useAddNewBtn.module.scss

@@ -13,12 +13,15 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@use "src/mixins.module";
+@use "src/variables";
 
 ul.has-sibling {
   padding-bottom: 2px;
 }
 
 .action-button {
+  position: relative;
   border: none;
   border-top: 1px solid var(--color-blue-grey50);
   width: 100%;
@@ -35,10 +38,21 @@ ul.has-sibling {
   font-family: var(--font-family);
   font-size: var(--form-control-font-size);
 
-  &:focus {
-    outline: 1px solid;
-    outline-offset: 0;
-    border-radius: 0;
+  &:focus,
+  &.focus {
+    outline: none;
+
+    &::before {
+      @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0.125rem;
+      height: 100%;
+      width: calc(100% - 0.25rem);
+      opacity: 1;
+      z-index: calc(variables.$popover-z-index + 1);
+    }
   }
 
   &:hover {

package/src/components/Form/Select/useAddNewBtn.tsx

@@ -16,28 +16,62 @@
 
 import classes from "./useAddNewBtn.module.scss";
 
-import React, { useRef } from "react";
+import React, { RefObject, useEffect, useRef } from "react";
 import { AddNewProps } from "./Select.interfaces";
 
 interface Props {
+  id?: string;
   addNew?: AddNewProps;
   filter: string;
+  focusedSelectItem: number;
+  optionsCount: number;
+  searchInputRef: RefObject<HTMLInputElement>;
+  shouldClick?: boolean;
+  onClickCallback?: () => void;
 }
 
-export const useAddNewBtn = ({ addNew, filter }: Props) => {
+/** @scope .*/
+export const useAddNewBtn = ({
+  id,
+  addNew,
+  filter,
+  focusedSelectItem,
+  optionsCount,
+  searchInputRef,
+  shouldClick,
+  onClickCallback
+}: Props) => {
   const addBtnRef = useRef<HTMLButtonElement>(null);
-
   const addNewLabel = addNew?.label ?? "Create new";
+  const isProgrammaticallyFocused = focusedSelectItem === optionsCount;
+  const isSearchDisabled = !searchInputRef.current;
+  const hasSearchQuery = typeof filter === "string" && !!filter.trim() && !!searchInputRef.current;
+  const shouldRender = addNew && (isSearchDisabled || hasSearchQuery || addNew.alwaysEnabled);
+
+  const additionalClasses = [classes["action-button"]];
+  addNew?.btnProps?.className && additionalClasses.push(addNew?.btnProps?.className);
+  isProgrammaticallyFocused && additionalClasses.push(classes["focus"]);
+
+  useEffect(() => {
+    const addBtnClicked = addBtnRef.current && isProgrammaticallyFocused && shouldClick;
+    if (addBtnClicked) {
+      addBtnRef.current.click();
+    }
+  }, [addBtnRef.current, isProgrammaticallyFocused, shouldClick]);
 
   const renderAddNew = () =>
-    addNew && (
+    shouldRender && (
       <button
-        data-testid={"select-action-button"}
-        className={classes["action-button"]}
-        onClick={() => addNew.onAddNew(filter)}
+        data-testid="select-action-button"
+        {...addNew.btnProps}
         ref={addBtnRef}
         type="button"
-        {...addNew.btnProps}
+        className={additionalClasses.join(" ")}
+        onClick={() => {
+          addNew.onAddNew(filter);
+          onClickCallback?.();
+        }}
+        id={id}
       >
         {!filter && addNewLabel}
         {filter && <span style={{ fontWeight: "700" }}>{`"${filter}"`}</span>}

package/src/components/Form/Select/useSelectPositionList.ts

@@ -0,0 +1,113 @@
+/*
+ * 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 { useEffect, useState } from "react";
+import { Position, UseSelectPositionListParams } from "./Select.interfaces";
+
+/** @scope .*/
+export const useSelectPositionList = ({
+  expanded,
+  optionListReference,
+  addBtnRef,
+  containerReference
+}: UseSelectPositionListParams) => {
+  const [optionsListMaxHeight, setOptionsListMaxHeight] = useState<{
+    wrapper?: string;
+    list?: string;
+  }>({
+    wrapper: undefined,
+    list: undefined
+  });
+  const [opacity, setOpacity] = useState(0); // We set opacity because otherwise if we calculate the max height you see the list full height for a split second and then it shortens.
+  const [listPosition, setListPosition] = useState<Partial<Position>>({});
+
+  useEffect(() => {
+    rePositionList();
+  }, [expanded]);
+
+  const rePositionList = () => {
+    if (!expanded || !optionListReference.current || !containerReference.current) {
+      return;
+    }
+
+    // Check whether there is more space above or below the select
+    // Check space between the bottom of select and top of viewport
+    const spaceOnTopOfSelect = containerReference.current.getBoundingClientRect().bottom;
+
+    // Check space between the top of the select and bottom of viewport
+    const spaceOnBottomOfSelect =
+      window.innerHeight - containerReference.current.getBoundingClientRect().top;
+
+    // Set position as if there's more space on the bottom
+    let position: Position = { top: "2.75rem", bottom: "initial" };
+
+    // Set the position of the select
+    if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {
+      position = { top: "initial", bottom: "2.75rem" };
+    }
+
+    setListPosition(position);
+
+    // Calculate the potential max height of the options list
+    calculateOptionListMaxHeight(position);
+  };
+
+  const calculateOptionListMaxHeight = (position: Position) => {
+    // Calculate max height if there's more space below the select
+    const listHeight = optionListReference.current?.getBoundingClientRect().height;
+    const addNewButtonHeightWithMargin = addBtnRef.current
+      ? addBtnRef.current.getBoundingClientRect().height +
+        parseInt(getComputedStyle(addBtnRef.current).marginBottom)
+      : 0;
+    const transformOrigin = position.top !== "initial" ? "top" : "bottom";
+
+    if (!containerReference.current) {
+      console.error(
+        "The containerReference is empty for some reason in the SelectService.ts for the Select component in react-lib-components. We are trying to calculate the option list max height on expand"
+      );
+      return;
+    }
+
+    const availableSpace =
+      transformOrigin === "top"
+        ? window.innerHeight - containerReference.current.getBoundingClientRect().bottom - 16
+        : containerReference.current.getBoundingClientRect().top - 16;
+
+    if (listHeight && availableSpace < listHeight + addNewButtonHeightWithMargin) {
+      const maxHeightObject = {
+        wrapper: `${availableSpace}px`,
+        list:
+          addNewButtonHeightWithMargin > 0
+            ? `${availableSpace - addNewButtonHeightWithMargin}px`
+            : "none"
+      };
+      setOptionsListMaxHeight(maxHeightObject);
+      setOpacity(100);
+      return;
+    }
+
+    setOptionsListMaxHeight({ wrapper: undefined, list: undefined });
+    setOpacity(100);
+  };
+
+  return {
+    optionsListMaxHeight,
+    opacity,
+    setOpacity,
+    listPosition,
+    setListPosition
+  };
+};

package/src/components/Icon/Icon.module.scss

@@ -337,8 +337,23 @@
   content: "\e9d1";
   @include fontProperties();
 }
-
 .icon-warning-filled:before {
   content: "\e948";
   @include fontProperties();
 }
+.icon-download-file-outline:before {
+  content: "\e945";
+  @include fontProperties();
+}
+.icon-retry:before {
+  content: "\e949";
+  @include fontProperties();
+}
+.icon-cancel:before {
+  content: "\e94a";
+  @include fontProperties();
+}
+.icon-file-alt:before {
+  content: "\e94b";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -91,7 +91,11 @@ export enum Icons {
   FileDownload = "file-download-outline",
   UploadOutline = "upload-outline",
   ReplyOutline = "reply-outline",
-  SaveOutline = "save-outline"
+  SaveOutline = "save-outline",
+  DownloadFile = "download-file-outline",
+  RetryFile = "retry",
+  AbortFile = "cancel",
+  FileAltIcon = "file-alt"
 }
 
 type Tag = "span" | "div" | "i";

package/src/components/Layout/ContentHeader/ContentHeader.module.scss

@@ -0,0 +1,44 @@
+.header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 2rem;
+  padding: 2rem;
+  z-index: 1;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  max-width: 105rem;
+
+  &.collapsed-header {
+    padding: 1rem 2rem 1rem 2rem;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+  }
+
+  &-background-color {
+    background-color: var(--color-blue-grey25);
+  }
+}
+
+.hide-text {
+  display: none;
+}
+
+.header-text {
+  margin: 0;
+  font-weight: 500;
+  color: var(--color-blue-grey900);
+  line-height: 3.125rem;
+}
+
+.header-subtitle {
+  color: var(--color-blue-grey400);
+  font-weight: 500;
+}
+
+.buttons-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  gap: 1rem;
+}

package/src/components/Layout/ContentHeader/ContentHeader.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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, { HTMLAttributes, ReactElement } from "react";
+import { Button, Props as ButtonProps } from "../../Button/Button";
+import { Typography } from "../../Typography/Typography";
+
+import classes from "./ContentHeader.module.scss";
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  subtitle?: string;
+  buttons?: ReactElement<ButtonProps, typeof Button> | ReactElement<ButtonProps, typeof Button>[];
+  collapsed?: boolean;
+}
+
+export const ContentHeaderComponent = ({
+  title,
+  children,
+  buttons,
+  collapsed,
+  subtitle,
+  ...rest
+}: Props) => {
+  return (
+    <div className={classes["header-background-color"]}>
+      <div
+        className={`${classes["header"]} ${rest.className} ${collapsed ? classes["collapsed-header"] : ""}`}
+        {...rest}
+      >
+        <div>
+          <Typography className={classes["header-text"]} variant={"h1"}>
+            {title}
+          </Typography>
+          {subtitle && (
+            <Typography
+              className={`${classes["header-subtitle"]} ${collapsed ? classes["hide-text"] : ""}`}
+              variant={"h4"}
+            >
+              {subtitle}
+            </Typography>
+          )}
+          <Typography
+            className={`${collapsed ? classes["hide-text"] : ""}`}
+            variant={"body"}
+            spacing={{ margin: 0 }}
+          >
+            {children}
+          </Typography>
+        </div>
+        {buttons && <div className={classes["buttons-wrapper"]}>{buttons}</div>}
+      </div>
+    </div>
+  );
+};
+
+export const ContentHeader = ContentHeaderComponent;

package/src/components/Layout/FormPage/FormWithStepper/FormSection/FormSection.module.scss

@@ -0,0 +1,12 @@
+.section-wrapper {
+  padding-bottom: 4rem;
+}
+
+.section-header-wrapper {
+  margin-bottom: 1rem;
+}
+
+.section-header {
+  line-height: 2rem;
+  color: var(--color-primary500);
+}

package/src/components/Layout/FormPage/FormWithStepper/FormSection/FormSection.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, ForwardRefRenderFunction } from "react";
+import classes from "./FormSection.module.scss";
+import { Typography } from "../../../../Typography/Typography";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  header?: string;
+  subtext?: string;
+}
+
+export const FormSectionComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { header, subtext, children, ...rest },
+  ref
+) => {
+  return (
+    <div {...rest} className={classes["section-wrapper"]} ref={ref}>
+      {header && (
+        <div className={classes["section-header-wrapper"]}>
+          <Typography
+            variant="h4"
+            className={classes["section-header"]}
+            spacing={{ marginBottom: 0 }}
+          >
+            {header}
+          </Typography>
+          {subtext && (
+            <Typography variant="sub-text" spacing={{ marginBottom: 0 }}>
+              {subtext}
+            </Typography>
+          )}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export const FormSection = React.forwardRef(FormSectionComponent);

package/src/components/Layout/FormPage/FormWithStepper/FormStepper/FormStepper.module.scss

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+.stepper {
+  position: sticky;
+  top: 0;
+  & > div:first-child {
+    height: auto;
+    min-height: 15rem;
+    align-items: flex-start;
+  }
+}