@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.2

package/src/Wizard/WizardSteps/WizardSteps.test.tsx

@@ -1,125 +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, { useReducer } from "react";
-import { WizardSteps, Props } from "./WizardSteps";
-import { getAllByRole, getByText, render } from "@testing-library/react";
-import { WizardStateContext, Props as ProviderProps } from "../WizardStateProvider";
-import { WizardStateType, reducer, changeCurrentStepNo } from "../wizardStateReducer";
-import userEvent from "@testing-library/user-event";
-
-const initWizardState: WizardStateType = {
-  steps: [
-    {
-      label: "Step 1"
-    },
-    {
-      label: "Step 2"
-    },
-    {
-      label: "Step 3",
-      disabled: true
-    },
-    {
-      label: "Step 4"
-    }
-  ],
-  currentStepNo: 1,
-  mode: "add"
-};
-
-const initParams: Props = {
-  onStepClick: jest.fn()
-};
-
-const renderWizardSteps = (initReducerState?: WizardStateType) => {
-  const wizardState = initReducerState ? initReducerState : initWizardState;
-  const dispatch = jest.fn();
-
-  const Provider = ({ children }: ProviderProps) => {
-    const [state] = useReducer(reducer, wizardState);
-    return (
-      <WizardStateContext.Provider value={{ state, dispatch }}>
-        {children}
-      </WizardStateContext.Provider>
-    );
-  };
-
-  const renderObj = render(
-    <Provider initialState={initWizardState}>
-      <WizardSteps {...initParams} />
-    </Provider>
-  );
-
-  return {
-    ...renderObj,
-    dispatch
-  };
-};
-
-const getStepButtons = (container: HTMLElement) => getAllByRole(container, "button");
-
-describe("WizardSteps", () => {
-  it("renders without crashing", () => {
-    const { container, dispatch } = renderWizardSteps();
-    const buttons = getStepButtons(container);
-    (
-      initParams.onStepClick as jest.MockedFunction<typeof initParams.onStepClick>
-    ).mockReturnValueOnce(true);
-
-    expect(buttons).toHaveLength(4);
-    userEvent.click(buttons[0]);
-    expect(initParams.onStepClick).toHaveBeenCalledWith(initWizardState.currentStepNo, 0);
-    expect(dispatch).toBeCalledWith(changeCurrentStepNo(0));
-    expect(buttons[0].querySelector(".checkmark")).toBeDefined();
-    expect(getByText(buttons[1], "2")).toBeDefined();
-    expect(getByText(buttons[2], "3")).toBeDefined();
-    expect(getByText(buttons[3], "4")).toBeDefined();
-
-    userEvent.click(buttons[1]);
-    userEvent.click(buttons[2]);
-    userEvent.click(buttons[3]);
-    expect(initParams.onStepClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("should allow to click on future and prev steps but not on current and disabled steps when mode is set to `edit`", () => {
-    const { container, dispatch } = renderWizardSteps({ ...initWizardState, mode: "edit" });
-    const buttons = getStepButtons(container);
-    (
-      initParams.onStepClick as jest.MockedFunction<typeof initParams.onStepClick>
-    ).mockReturnValueOnce(true);
-
-    userEvent.click(buttons[3]);
-    expect(initParams.onStepClick).toHaveBeenCalledWith(initWizardState.currentStepNo, 3);
-    expect(dispatch).toBeCalledWith(changeCurrentStepNo(3));
-
-    userEvent.click(buttons[1]);
-    userEvent.click(buttons[2]);
-    expect(initParams.onStepClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("should do not change step when `onStepClick` callback returns false", () => {
-    const { container, dispatch } = renderWizardSteps({ ...initWizardState, mode: "edit" });
-    const buttons = getStepButtons(container);
-    (
-      initParams.onStepClick as jest.MockedFunction<typeof initParams.onStepClick>
-    ).mockReturnValueOnce(false);
-
-    userEvent.click(buttons[3]);
-    expect(initParams.onStepClick).toHaveBeenCalledWith(initWizardState.currentStepNo, 3);
-    expect(dispatch).not.toBeCalled();
-  });
-});

package/src/_BaseStyling_/BaseStyling.tsx

@@ -1,225 +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.
- */
-
-/**
- * If you add more CSS variables, and they are a color, make sure to go into /.storybook/addon/src/components/PanelContent.tsx
- * and make sure to add it to the shouldBeColorPicker array!
- */
-
-import React, { HTMLAttributes, ReactChild, useEffect, useRef, useState } from "react";
-
-interface CSSProperties {
-  colorBlack10?: string;
-  colorFocus?: string;
-  colorPrimary?: string;
-  colorSecondary?: string;
-  colorTertiary?: string;
-  colorPrimary300?: string;
-  colorPrimary500?: string;
-  colorPrimary600?: string;
-  colorPrimary700?: string;
-  colorPrimary900?: string;
-  colorBlueGrey100?: string;
-  colorBlueGrey200?: string;
-  colorBlueGrey400?: string;
-  colorBlueGrey25?: string;
-  colorBlueGrey25Transparent?: string;
-  colorBlueGrey50?: string;
-  colorBlueGrey500?: string;
-  colorBlueGrey700?: string;
-  colorBlueGrey900?: string;
-  colorGreen500?: string;
-  colorLightBlue500?: string;
-  colorLightBlue600?: string;
-  colorOrange500?: string;
-  colorRed500?: string;
-  colorWhite?: string;
-  defaultLineHeight?: string;
-  buttonBorderRadius?: string;
-  buttonBorderWidth?: string;
-  buttonFontSize?: string;
-  buttonBorderStyle?: string;
-  buttonFillTextColor?: string;
-  buttonFillHoverBackgroundColor?: string;
-  buttonOutlineHoverTextColor?: string;
-  inputBorderRadius?: string;
-  inputBorderWidth?: string;
-  inputBorderWidthFocus?: string;
-  inputBorderStyle?: string;
-  inputBackgroundColor?: string;
-  dragBackgroundColor?: string;
-  dragBorderStyle?: string;
-  modalShadowColor?: string;
-  modalBackgroundColor?: string;
-  modalHeaderBackgroundColor?: string;
-  skeletonBackgroundColor?: string;
-  skeletonAnimationColorRgb?: string;
-  snackbarTextColor?: string;
-  snackbarInfoBackgroundColor?: string;
-  snackbarSuccessBackgroundColor?: string;
-  snackbarErrorBackgroundColor?: string;
-  snackbarBorderRadius?: string;
-  bannerBorderRadius?: string;
-  bannerBorderWidth?: string;
-  dataGridRowBackgroundColor?: string;
-  dataGridRowHoverBackgroundColor?: string;
-  tabsBackgroundColor?: string;
-  tabActiveBorderHeight?: string;
-  tabActiveBorderColor?: string;
-  tablistBorderWidth?: string;
-  tablistBorderStyle?: string;
-  tablistBorderColor?: string;
-  tabTextColor?: string;
-  wizardStepIndicatorFutureColor?: string;
-  default?: string;
-  success?: string;
-  error?: string;
-  info?: string;
-  disabled?: string;
-  greyedOut?: string;
-  lightGreyBorder?: string;
-  warning?: string;
-  light?: string;
-  fontFamily?: string;
-  fontFamilyCode?: string;
-  fontSize?: string;
-  fontSizeH1?: string;
-  fontSizeH2?: string;
-  fontSizeH3?: string;
-  fontSizeH4?: string;
-  fontSizeSub?: string;
-  fontSizeCode?: string;
-}
-
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-  children?: ReactChild;
-  properties?: CSSProperties;
-}
-
-export const BaseStyling = ({ children, properties = {} }: Props) => {
-  const defaultProperties: CSSProperties = {
-    colorBlack10: "#0000001a",
-    colorPrimary300: "#6871BF",
-    colorPrimary500: "#041295",
-    colorPrimary600: "#030F77",
-    colorPrimary700: "#020B59",
-    colorPrimary900: "#01041E",
-    colorBlueGrey25: "#F7F7F9",
-    colorBlueGrey25Transparent: "#F7F7F980",
-    colorBlueGrey50: "#EEEFF3",
-    colorBlueGrey100: "#DEDEE6",
-    colorBlueGrey200: "#BCBECE",
-    colorBlueGrey400: "#797D9C",
-    colorBlueGrey500: "#5D607E",
-    colorBlueGrey700: "#383A4B",
-    colorBlueGrey900: "#131319",
-    colorGreen500: "#178244",
-    colorLightBlue500: "#00BCDD",
-    colorLightBlue600: "#0096B1",
-    colorOrange500: "#E07900",
-    colorRed500: "#E01E00",
-    colorWhite: "#FFFFFF",
-    colorFocus: "var(--color-primary300)",
-    colorPrimary: "var(--color-primary500)",
-    colorSecondary: "var(--color-blue-grey700)",
-    colorTertiary: "var(--color-light-blue600)",
-    defaultLineHeight: "1.5",
-    buttonBorderRadius: "2px",
-    buttonBorderWidth: "2px",
-    buttonFontSize: "1rem",
-    buttonBorderStyle: "solid",
-    buttonFillTextColor: "var(--light)",
-    buttonFillHoverBackgroundColor: "var(--light)",
-    buttonOutlineHoverTextColor: "var(--light)",
-    inputBorderRadius: "2px",
-    inputBorderWidth: "1px",
-    inputBorderWidthFocus: "2px",
-    inputBorderStyle: "solid",
-    inputBackgroundColor: "var(--light)",
-    dragBackgroundColor: "var(--color-blue-grey25-transparent)",
-    dragBorderStyle: "solid",
-    modalShadowColor: "rgba(0, 0, 0, 0.16)",
-    modalBackgroundColor: "var(--color-blue-grey25)",
-    modalHeaderBackgroundColor: "var(--light)",
-    skeletonBackgroundColor: "var(--disabled)",
-    skeletonAnimationColorRgb: "255, 255, 255",
-    snackbarTextColor: "var(--light)",
-    snackbarInfoBackgroundColor: "var(--color-primary500)",
-    snackbarSuccessBackgroundColor: "var(--color-green500)",
-    snackbarErrorBackgroundColor: "var(--color-red500)",
-    snackbarBorderRadius: "2px",
-    bannerBorderRadius: "2px",
-    bannerBorderWidth: "0 0 0 4px",
-    dataGridRowBackgroundColor: "transparent",
-    dataGridRowHoverBackgroundColor: "var(--color-blue-grey25)",
-    tabsBackgroundColor: "var(--light)",
-    tabActiveBorderHeight: "4px",
-    tabActiveBorderColor: "var(--color-primary)",
-    tablistBorderWidth: "1px",
-    tablistBorderStyle: "solid",
-    tablistBorderColor: "var(--color-blue-grey100)",
-    tabTextColor: "var(--color-blue-grey900)",
-    wizardStepIndicatorFutureColor: "var(--color-blue-grey200)",
-    default: "var(--color-blue-grey900)",
-    success: "var(--color-green500)",
-    error: "var(--color-red500)",
-    info: "var(--color-primary500)",
-    disabled: "var(--color-blue-grey100)",
-    greyedOut: "var(--color-blue-grey500)",
-    lightGreyBorder: "var(--color-blue-grey100)",
-    warning: "var(--color-orange500)",
-    light: "var(--color-white)",
-    fontFamily: "Roboto, sans-serif",
-    fontFamilyCode: "'Roboto Mono', monospace",
-    fontSize: "1rem",
-    fontSizeH1: "2.5rem",
-    fontSizeH2: "1.625rem",
-    fontSizeH3: "1.5rem",
-    fontSizeH4: "1.25rem",
-    fontSizeSub: ".75rem",
-    fontSizeCode: "1rem"
-  };
-
-  /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */
-  const [isLoading, setIsLoading] = useState(true);
-  const baseStylingWrapper = useRef(null);
-
-  const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {
-    for (const [key, value] of Object.entries(CSSPropertiesObject)) {
-      const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);
-      (baseStylingWrapper.current! as HTMLElement).style.setProperty(
-        `--${formattedPropertyName}`,
-        value
-      );
-    }
-  };
-
-  useEffect(() => {
-    if (Object.keys(properties).length !== 0 && baseStylingWrapper.current) {
-      const mergedState = { ...defaultProperties, ...properties };
-      setCSSProperties(mergedState);
-    } else if (baseStylingWrapper.current) {
-      setCSSProperties(defaultProperties);
-    }
-    setIsLoading(false);
-  }, [properties, baseStylingWrapper.current]);
-
-  return (
-    <div className="basestyling-wrapper" ref={baseStylingWrapper}>
-      {!isLoading ? children : null}
-    </div>
-  );
-};