@onewelcome/react-lib-components 6.7.1 → 7.0.0

package/src/components/Wizard/BaseWizardSteps/BaseWizardSteps.module.scss

@@ -1,214 +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.
- */
-
-@mixin clickable-element {
-  &:enabled:hover,
-  &:focus,
-  &:enabled:active {
-    cursor: pointer;
-
-    .number-wrapper {
-      .number {
-        background-color: var(--color-primary);
-        color: var(--light);
-      }
-    }
-
-    .label {
-      text-decoration: underline;
-    }
-  }
-
-  &:enabled:active {
-    .number-wrapper {
-      .number {
-        border: none;
-        margin: 2px;
-      }
-    }
-  }
-}
-
-@mixin disabled-element {
-  &:disabled {
-    .number-wrapper {
-      .number {
-        border: 2px solid var(--disabled);
-        color: var(--disabled);
-      }
-    }
-
-    .label {
-      color: var(--greyed-out);
-    }
-  }
-}
-
-.wizard {
-  padding: 1rem;
-  display: flex;
-}
-
-.wizard-element {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  background-color: transparent;
-  border: 0;
-  align-items: stretch;
-  padding: 0;
-  margin: 0;
-
-  &:focus-visible {
-    outline: 1px dashed var(--color-primary);
-    outline-offset: 1px;
-  }
-
-  // Completed/finished state
-  &.finished {
-    .number-wrapper {
-      .number {
-        border: 2px solid var(--color-primary);
-        color: var(--color-primary);
-        font-weight: normal;
-      }
-
-      &:before,
-      &:after {
-        border-bottom: 2px solid var(--color-primary);
-      }
-    }
-
-    .label {
-      color: var(--color-primary);
-    }
-    @include disabled-element;
-    @include clickable-element;
-  }
-
-  //Active/current step
-  &.current {
-    .number-wrapper {
-      .number {
-        color: var(--light);
-        border: 2px solid var(--color-primary);
-        background-color: var(--color-primary);
-      }
-
-      &:before {
-        border-bottom: 2px solid var(--color-primary);
-      }
-    }
-
-    .label {
-      font-weight: 700;
-      color: var(--color-primary);
-    }
-
-    .two-line-text-overflow {
-      display: unset;
-    }
-  }
-
-  //Future state for clickable elements - future state is a default one
-  &.future.clickable {
-    .number-wrapper {
-      .number {
-        border: 2px solid var(--color-primary);
-        color: var(--color-primary);
-      }
-    }
-
-    .label {
-      color: var(--color-primary);
-    }
-
-    @include clickable-element;
-    @include disabled-element;
-  }
-
-  &:first-child {
-    .number-wrapper:before {
-      border-bottom: none;
-    }
-  }
-
-  &:last-child {
-    .number-wrapper:after {
-      border-bottom: none;
-    }
-  }
-}
-
-.number-wrapper {
-  display: flex;
-  flex-direction: row;
-
-  &:after,
-  &:before {
-    content: " ";
-    margin-bottom: 0.8125rem;
-    width: 100%;
-    border-bottom: 2px solid var(--greyed-out);
-  }
-}
-
-.number {
-  font-family: var(--font-family);
-  font-size: 1rem;
-  font-weight: normal;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid var(--wizard-step-indicator-future-color);
-  border-radius: 50%;
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  color: var(--wizard-step-indicator-future-color);
-  line-height: var(--default-line-height);
-  background-color: var(--light);
-  box-sizing: content-box;
-}
-
-.two-line-text-overflow {
-  max-height: 2rem;
-  display: none;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  padding: 0.25rem 1rem 0;
-}
-
-.label {
-  font-family: var(--font-family);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  overflow: hidden;
-  color: var(--default);
-  text-align: center;
-}
-
-.checkmark {
-  font-size: 0.875rem;
-}
-
-@media only screen and (min-width: 30em) {
-  .two-line-text-overflow {
-    display: unset;
-  }
-}

package/src/components/Wizard/BaseWizardSteps/BaseWizardSteps.tsx

@@ -1,93 +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, Fragment } from "react";
-import classes from "./BaseWizardSteps.module.scss";
-import { Icon, Icons } from "../../Icon/Icon";
-
-type StepState = "finished" | "current" | "future";
-
-export interface Step {
-  label: string;
-  disabled?: boolean;
-}
-
-export interface Props extends Omit<ComponentPropsWithRef<"div">, "onClick"> {
-  steps: Step[];
-  currentStepNo: number;
-  onClick?: (stepNo: number) => void;
-  futureStepsClickable?: boolean;
-}
-
-const BaseWizardStepsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { steps, currentStepNo, onClick, futureStepsClickable = false, ...rest }: Props,
-  ref
-) => {
-  const getStepState = (stepNo: number): StepState => {
-    if (currentStepNo === stepNo) {
-      return "current";
-    } else if (stepNo < currentStepNo) {
-      return "finished";
-    }
-    return "future";
-  };
-
-  const getStepContent = (stepState: StepState, index: number, disabled?: boolean) => {
-    const stepNumberString = String(index + 1);
-    if (stepState === "finished") {
-      return disabled ? null : <Icon className={classes["checkmark"]} icon={Icons.Checkmark} />;
-    } else {
-      return <Fragment>{stepNumberString}</Fragment>;
-    }
-  };
-
-  const generatedSteps = steps.map((step, index) => {
-    const stepState = getStepState(index);
-    const disabledStyleClassName = step.disabled ? classes["disabled"] : "";
-    const clickableClassName = futureStepsClickable ? classes["clickable"] : "";
-
-    return (
-      <button
-        key={step.label.toLowerCase().replace(/\s/, "-")}
-        disabled={
-          step.disabled ||
-          (stepState === "future" && !futureStepsClickable) ||
-          stepState === "current"
-        }
-        aria-current={stepState === "current" ? "step" : undefined}
-        onClick={() => onClick?.(index)}
-        className={`${classes["wizard-element"]} ${classes[stepState]} ${clickableClassName} ${disabledStyleClassName}`}
-      >
-        <div className={classes["number-wrapper"]}>
-          <span className={classes["number"]}>
-            {getStepContent(stepState, index, step.disabled)}
-          </span>
-        </div>
-        <div className={classes["two-line-text-overflow"]}>
-          <span className={classes["label"]}>{step.label}</span>
-        </div>
-      </button>
-    );
-  });
-
-  return (
-    <div {...rest} ref={ref} className={classes["wizard"]}>
-      {generatedSteps}
-    </div>
-  );
-};
-
-export const BaseWizardSteps = React.forwardRef(BaseWizardStepsComponent);

package/src/components/Wizard/Wizard.tsx

@@ -1,67 +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, { Fragment, useContext, useEffect } from "react";
-import { Step } from "./BaseWizardSteps/BaseWizardSteps";
-import { WizardStateContext, WizardStateProvider } from "./WizardStateProvider";
-import { setWizardState } from "./wizardStateReducer";
-
-export type WizardMode = "add" | "edit";
-
-export interface Props {
-  steps: Step[];
-  mode: WizardMode;
-  initialStepNo?: number;
-  onStepChange: (stepNo: number) => void;
-  children: React.ReactNode;
-}
-
-const useSetWizardState = (steps: Step[], mode: WizardMode) => {
-  const { dispatch } = useContext(WizardStateContext);
-
-  useEffect(() => {
-    dispatch(setWizardState(steps, mode));
-  }, [steps, mode]);
-};
-
-const useStepChanging = (onStepChange: (stepNo: number) => void) => {
-  const {
-    state: { currentStepNo }
-  } = useContext(WizardStateContext);
-
-  useEffect(() => {
-    onStepChange(currentStepNo);
-  }, [currentStepNo]);
-};
-
-/**
- * @deprecated
- */
-const WizardContent = ({ steps, mode, onStepChange, children }: Props) => {
-  useSetWizardState(steps, mode);
-  useStepChanging(onStepChange);
-
-  return <Fragment>{children}</Fragment>;
-};
-
-export const Wizard = (props: Props) => {
-  const { steps, initialStepNo: currentStepNo = 0, mode } = props;
-  return (
-    <WizardStateProvider initialState={{ steps, currentStepNo, mode }}>
-      <WizardContent {...props} />
-    </WizardStateProvider>
-  );
-};

package/src/components/Wizard/WizardActions/WizardActions.tsx

@@ -1,116 +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, { Fragment, useContext, useMemo } from "react";
-import { Button, Props as ButtonProps } from "../../Button/Button";
-import { Step } from "../BaseWizardSteps/BaseWizardSteps";
-import { WizardMode } from "../Wizard";
-import { WizardStateContext } from "../WizardStateProvider";
-import { changeCurrentStepNo } from "../wizardStateReducer";
-
-export interface Props extends React.HTMLProps<HTMLDivElement> {
-  actions: {
-    previous: {
-      label: string;
-      onClick: () => void;
-      previousButtonProps?: ButtonProps;
-    };
-    next: {
-      label: string;
-      onClick: (currentStepNo: number) => boolean;
-      nextButtonProps?: ButtonProps;
-    };
-    saveAndClose: {
-      label: string;
-      onClick: (currentStepNo: number) => void;
-      saveAndCloseButtonProps?: ButtonProps;
-    };
-  };
-}
-
-const calculateNextStepNo = (steps: Step[], currentStepNo: number) => () =>
-  steps.findIndex((step, stepNo) => stepNo > currentStepNo && !step.disabled);
-
-const calculatePrevStepNo = (steps: Step[], currentStepNo: number) => () => {
-  const reversedCurrentStepNo = steps.length - 1 - currentStepNo;
-  const reversedPrevStepNo = [...steps]
-    .reverse()
-    .findIndex((step, stepNo) => stepNo > reversedCurrentStepNo && !step.disabled);
-  if (reversedPrevStepNo > 0) {
-    return steps.length - 1 - reversedPrevStepNo;
-  }
-  return -1;
-};
-
-const useNextStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =>
-  useMemo(calculateNextStepNo(steps, currentStepNo), [mode, currentStepNo, steps]);
-
-const usePreviousStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =>
-  useMemo(calculatePrevStepNo(steps, currentStepNo), [mode, currentStepNo, steps]);
-
-/**
- * @deprecated
- */
-export const WizardActions = ({ actions }: Props) => {
-  const {
-    state: { mode, steps, currentStepNo },
-    dispatch
-  } = useContext(WizardStateContext);
-  const nextStepNo = useNextStepNo(mode, currentStepNo, steps);
-  const hasNextStep = nextStepNo !== -1;
-  const previousStepNo = usePreviousStepNo(mode, currentStepNo, steps);
-  const hasPreviousStep = previousStepNo !== -1;
-  const isLastStepOrEditMode = !hasNextStep || mode === "edit";
-
-  const changeStepNo = (direction: "forward" | "backward") => {
-    if (direction === "forward") {
-      hasNextStep && dispatch(changeCurrentStepNo(nextStepNo));
-    } else {
-      hasPreviousStep && dispatch(changeCurrentStepNo(previousStepNo));
-    }
-  };
-
-  const onNextWrapper = () => {
-    actions.next.onClick(currentStepNo) && changeStepNo("forward");
-  };
-
-  const onPreviousWrapper = () => {
-    actions.previous.onClick?.();
-    changeStepNo("backward");
-  };
-
-  const onSaveAndCloseWrapper = () => {
-    actions.saveAndClose.onClick(currentStepNo);
-  };
-
-  return (
-    <Fragment>
-      {hasPreviousStep && (
-        <Button variant="outline" onClick={onPreviousWrapper}>
-          {actions.previous.label}
-        </Button>
-      )}
-      {hasNextStep && (
-        <Button variant={mode === "edit" ? "outline" : "fill"} onClick={onNextWrapper}>
-          {actions.next.label}
-        </Button>
-      )}
-      {isLastStepOrEditMode && (
-        <Button onClick={onSaveAndCloseWrapper}>{actions.saveAndClose.label}</Button>
-      )}
-    </Fragment>
-  );
-};

package/src/components/Wizard/WizardStateProvider.tsx

@@ -1,45 +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, { createContext, Dispatch, useReducer } from "react";
-import { WizardActions, WizardStateType, reducer } from "./wizardStateReducer";
-
-const WizardStateContext = createContext<{
-  state: WizardStateType;
-  dispatch: Dispatch<WizardActions>;
-}>({
-  state: {} as WizardStateType,
-  dispatch: () => null
-});
-
-export interface Props {
-  initialState: WizardStateType;
-  children?: React.ReactNode;
-}
-
-/**
- * @deprecated
- */
-const WizardStateProvider = ({ children, initialState }: Props) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-  return (
-    <WizardStateContext.Provider value={{ state, dispatch }}>
-      {children}
-    </WizardStateContext.Provider>
-  );
-};
-
-export { WizardStateProvider, WizardStateContext };

package/src/components/Wizard/WizardSteps/WizardSteps.tsx

@@ -1,54 +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, useContext } from "react";
-import { WizardStateContext } from "../WizardStateProvider";
-import { BaseWizardSteps } from "../BaseWizardSteps/BaseWizardSteps";
-import { changeCurrentStepNo } from "../wizardStateReducer";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  onStepClick: (currentStepNo: number, selectedStepNo: number) => boolean;
-}
-
-const WizardStepsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { onStepClick, ...rest }: Props,
-  ref
-) => {
-  const {
-    state: { currentStepNo, mode, steps },
-    dispatch
-  } = useContext(WizardStateContext);
-
-  const onClick = (selectedStepNo: number) => {
-    onStepClick(currentStepNo, selectedStepNo) && dispatch(changeCurrentStepNo(selectedStepNo));
-  };
-
-  return (
-    <BaseWizardSteps
-      {...rest}
-      ref={ref}
-      onClick={onClick}
-      steps={steps}
-      currentStepNo={currentStepNo}
-      futureStepsClickable={mode === "edit"}
-    />
-  );
-};
-
-/**
- * @deprecated
- */
-export const WizardSteps = React.forwardRef(WizardStepsComponent);

package/src/components/Wizard/wizardStateReducer.ts

@@ -1,61 +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 { Reducer } from "react";
-import { Step } from "./BaseWizardSteps/BaseWizardSteps";
-import { WizardMode } from "./Wizard";
-
-type WizardStateType = {
-  steps: Step[];
-  currentStepNo: number;
-  mode: WizardMode;
-};
-
-interface SetWizardStateAction {
-  type: "SET_STATE";
-  payload: {
-    steps: Step[];
-    mode: WizardMode;
-  };
-}
-
-interface ChangeCurrentStepNoAction {
-  type: "CHANGE_CURRENT_STEP_NO";
-  payload: number;
-}
-
-const setWizardState = (steps: Step[], mode: WizardMode): SetWizardStateAction => {
-  return { type: "SET_STATE", payload: { steps, mode } };
-};
-
-const changeCurrentStepNo = (currentStepNo: number): ChangeCurrentStepNoAction => {
-  return { type: "CHANGE_CURRENT_STEP_NO", payload: currentStepNo };
-};
-
-type WizardActions = SetWizardStateAction | ChangeCurrentStepNoAction;
-
-const reducer: Reducer<WizardStateType, WizardActions> = (state, action) => {
-  switch (action.type) {
-    case "SET_STATE":
-      return { ...state, ...action.payload };
-    case "CHANGE_CURRENT_STEP_NO":
-      return { ...state, currentStepNo: action.payload };
-    default:
-      return state;
-  }
-};
-
-export { setWizardState, changeCurrentStepNo, reducer, WizardActions, WizardStateType };