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

package/src/Tooltip/Tooltip.tsx

@@ -1,166 +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,
-  ReactNode,
-  RefObject,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState
-} from "react";
-import { Icon, Icons } from "../Icon/Icon";
-import classes from "./Tooltip.module.scss";
-import { generateID } from "../util/helper";
-import { Offset, Placement, usePosition } from "../hooks/usePosition";
-import { createPortal } from "react-dom";
-import { useGetDomRoot } from "../hooks/useGetDomRoot";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  label: string | ReactNode;
-  children: string;
-  placement?: Placement;
-  offset?: Offset;
-  transformOrigin?: Placement;
-  domRoot?: HTMLElement;
-}
-
-interface DefaultPosition {
-  placement: Placement;
-  offset: Offset;
-  transformOrigin: Placement;
-}
-
-const defaultPosition: DefaultPosition = {
-  placement: { horizontal: "right", vertical: "center" },
-  offset: { left: 16, right: 0, top: 0, bottom: 0 },
-  transformOrigin: { horizontal: "left", vertical: "center" }
-};
-
-const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  {
-    children,
-    className,
-    placement = defaultPosition.placement,
-    offset = defaultPosition.offset,
-    transformOrigin = defaultPosition.transformOrigin,
-    domRoot,
-    label,
-    ...rest
-  }: Props,
-  ref
-) => {
-  const [identifier] = useState(generateID());
-  const [visible, setVisible] = useState(false);
-
-  const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
-  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
-
-  const relativeElement = useRef<HTMLDivElement>(null);
-  const elementToBePositioned = useRef<HTMLDivElement>(null);
-
-  const { top, bottom, right, left, calculatePosition } = usePosition({
-    relativeElement: relativeElement,
-    elementToBePositioned: elementToBePositioned,
-    placement: placement,
-    offset: offset,
-    transformOrigin: transformOrigin
-  });
-
-  useEffect(() => {
-    if (!visible) return;
-
-    function escapePressHandler(event: KeyboardEvent) {
-      if (event.key === "Escape") {
-        setVisible(false);
-      }
-    }
-
-    document.addEventListener("keyup", escapePressHandler);
-
-    return () => {
-      document.removeEventListener("keyup", escapePressHandler);
-    };
-  }, [visible]);
-
-  useLayoutEffect(() => {
-    calculatePosition();
-  }, [visible]);
-
-  const renderChildren = () => {
-    if (React.isValidElement(label)) {
-      return React.cloneElement(label as ReactElement, {
-        onFocus: () => setVisible(true),
-        onBlur: () => setVisible(false),
-        "aria-describedby": identifier,
-        tabIndex: 0,
-        className: classes["label"]
-      });
-    }
-
-    return (
-      <span
-        className={classes["label"]}
-        tabIndex={0}
-        onFocus={() => setVisible(true)}
-        onBlur={() => setVisible(false)}
-        aria-describedby={identifier}
-      >
-        {label}
-      </span>
-    );
-  };
-
-  return (
-    <div {...rest} ref={wrappingDivRef} className={`${classes.wrapper} ${className ?? ""}`}>
-      {renderChildren()}
-      <div className={`${classes["tooltip-wrapper"]}`}>
-        <Icon
-          ref={relativeElement}
-          tag="div"
-          onMouseEnter={() => setVisible(true)}
-          onMouseLeave={() => setVisible(false)}
-          icon={Icons.InfoCircle}
-          className={classes.icon}
-        />
-        {createPortal(
-          <div
-            ref={elementToBePositioned}
-            style={{
-              ...rest.style,
-              top: top,
-              left: left,
-              right: right,
-              bottom: bottom
-            }}
-            aria-hidden={!visible}
-            id={identifier}
-            className={`${classes.tooltip} ${visible ? classes.visible : ""}`}
-          >
-            {children}
-          </div>,
-          root
-        )}
-      </div>
-    </div>
-  );
-};
-
-export const Tooltip = React.forwardRef(TooltipComponent);

package/src/Typography/Typography.module.scss

@@ -1,62 +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 fontProperties($fontFamily, $fontSize, $fontWeight, $lineHeight) {
-  font-family: $fontFamily;
-  font-size: $fontSize;
-  font-style: normal;
-  font-variant: normal;
-  line-height: $lineHeight;
-  font-weight: $fontWeight;
-  text-transform: none;
-  letter-spacing: 0;
-  color: var(--default);
-  margin: 0 0 1rem 0;
-}
-
-.typography_style_ {
-  &h1 {
-    @include fontProperties(var(--font-family), var(--font-size-h1), 700, 1.2);
-  }
-
-  &h2 {
-    @include fontProperties(var(--font-family), var(--font-size-h2), 700, 1.42857);
-  }
-
-  &h3 {
-    @include fontProperties(var(--font-family), var(--font-size-h3), 500, 1.16666);
-  }
-
-  &h4 {
-    @include fontProperties(var(--font-family), var(--font-size-h4), 500, 1.2);
-  }
-
-  &body {
-    @include fontProperties(var(--font-family), var(--font-size), 400, var(--default-line-height));
-  }
-
-  &body-bold {
-    @include fontProperties(var(--font-family), var(--font-size), 700, var(--default-line-height));
-  }
-
-  &sub-text {
-    @include fontProperties(var(--font-family), var(--font-size-sub), 400, 1.333);
-  }
-
-  &code {
-    @include fontProperties(var(--font-family-code), var(--font-size-code), 400, 1.5);
-  }
-}

package/src/Typography/Typography.test.tsx

@@ -1,156 +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, { useEffect, useRef } from "react";
-import { Typography, Props } from "./Typography";
-import { render } from "@testing-library/react";
-import { Spacing } from "../hooks/useSpacing";
-
-const renderTypography = (
-  typoVariant: Props["variant"],
-  wrapper?: Props["tag"],
-  spacing?: Spacing
-) => {
-  const queries = render(
-    <Typography variant={typoVariant} tag={wrapper} spacing={spacing} data-testid="component">
-      Test
-    </Typography>
-  );
-
-  const typography = queries.getByTestId("component");
-
-  return {
-    ...queries,
-    typography
-  };
-};
-
-const className = (variant: Props["variant"]) => `typography_style_${variant}`;
-
-describe("Typography should render", () => {
-  it("renders without crashing", () => {
-    const { typography } = renderTypography("h1");
-    expect(typography).toBeDefined();
-  });
-});
-
-describe("Should give the correct default tags and corresponding classnames", () => {
-  it("renders an h1", () => {
-    const variant = "h1";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("H1");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders an h2", () => {
-    const variant = "h2";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("H2");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders an h3", () => {
-    const variant = "h3";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("H3");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders an h4", () => {
-    const variant = "h4";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("H4");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders a p", () => {
-    const variant = "body";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("P");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders a p", () => {
-    const variant = "body-bold";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("P");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders a span", () => {
-    const variant = "sub-text";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("SPAN");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders a code", () => {
-    const variant = "code";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("CODE");
-    expect(typography).toHaveClass(className(variant));
-  });
-});
-
-describe("Should override tagname", () => {
-  it("has to be a DIV element", () => {
-    const { typography } = renderTypography("h1", "div");
-
-    expect(typography.nodeName).toBe("DIV");
-  });
-});
-
-describe("Should override styling", () => {
-  it("renders h1 with overwritten margin properties", () => {
-    const { typography } = renderTypography("h1", undefined, { margin: 4, marginBottom: 8 });
-
-    expect(typography.style).toHaveProperty("margin", "1rem 1rem 2rem 1rem");
-  });
-});
-
-describe("ref should work", () => {
-  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
-    const ExampleComponent = ({
-      propagateRef
-    }: {
-      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
-    }) => {
-      const ref = useRef(null);
-
-      useEffect(() => {
-        if (ref.current) {
-          propagateRef && propagateRef(ref);
-        }
-      }, [ref]);
-
-      return <Typography variant="body" data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});

package/src/Typography/Typography.tsx

@@ -1,109 +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, ReactNode } from "react";
-import classes from "./Typography.module.scss";
-import { Spacing, useSpacing } from "../hooks/useSpacing";
-
-export const validVariants = [
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "body",
-  "body-bold",
-  "sub-text",
-  "code"
-] as const;
-export type Variant = (typeof validVariants)[number];
-
-type Tags =
-  | "h1"
-  | "h2"
-  | "h3"
-  | "h4"
-  | "p"
-  | "div"
-  | "code"
-  | "span"
-  | "sup"
-  | "sub"
-  | "strong"
-  | "em"
-  | "small"
-  | "mark"
-  | "del"
-  | "ins"
-  | "blockquote";
-
-export interface Props extends ComponentPropsWithRef<any> {
-  children: ReactNode;
-  variant: Variant;
-  tag?: Tags;
-  spacing?: Spacing;
-}
-
-const TypographyComponent: ForwardRefRenderFunction<any, Props> = (
-  { children, variant, tag, style, spacing, className = "", ...rest }: Props,
-  ref
-) => {
-  if (!validVariants.includes(variant)) {
-    throw new Error(
-      `You entered an invalid variant. You can choose from: ${validVariants}, you entered: ${variant}`
-    );
-  }
-
-  const styleWithSpacing = useSpacing(spacing, style);
-
-  if (!tag) {
-    switch (variant) {
-      case "h1":
-      case "h2":
-      case "h3":
-      case "h4":
-      case "code":
-        tag = variant;
-        break;
-      case "body":
-        tag = "p";
-        break;
-      case "body-bold":
-        tag = "p";
-        break;
-      case "sub-text":
-        tag = "span";
-        break;
-      default:
-        tag = "div";
-        break;
-    }
-  }
-
-  let TagName = tag;
-
-  return (
-    <TagName
-      {...rest}
-      ref={ref}
-      style={styleWithSpacing}
-      className={`${classes["typography_style_" + variant]} ${className}`}
-    >
-      {children}
-    </TagName>
-  );
-};
-
-export const Typography = React.forwardRef(TypographyComponent);

package/src/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: 1.5rem;
-  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;
-  }
-}