@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

package/src/components/Tooltip/Tooltip.module.scss

@@ -0,0 +1,221 @@
+/*!
+ * 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 "sass:list" as *;
+
+@mixin triangle($color: #000, $size: 0.5rem, $direction, $position: "center") {
+  $directions: top, bottom, left, right;
+  @if not index($directions, $direction) {
+    @error "Invalid value `#{$direction}` for `$direction`. Must be one of: `top`, `bottom`, `left`, `right`.";
+  }
+
+  $positions: center, start, end;
+  @if not index($positions, $position) {
+    @error "Invalid value `#{$position}` for `$position`. Must be one of: `center`, `start`, `end`.";
+  }
+
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: calc($size / 2);
+  border-color: transparent;
+  border-#{$direction}-color: $color;
+  position: absolute;
+
+  @if $direction == "top" or $direction == "bottom" {
+    @if $position == "end" {
+      left: 1rem;
+      right: initial;
+    } @else if $position == "start" {
+      right: 0.75rem;
+      left: initial;
+    } @else {
+      // position == "center"
+      left: 50%;
+      right: initial;
+      transform: translateX(-50%);
+    }
+  } @else {
+    // direction == "left" or direction == "right"
+    @if $position == "end" {
+      top: 0.875rem;
+      bottom: initial;
+    } @else if $position == "start" {
+      bottom: 0.9375rem;
+      top: initial;
+    } @else {
+      // position == "center"
+      top: 50%;
+      bottom: initial;
+      transform: translateY(-50%);
+    }
+  }
+
+  @if $direction == "top" {
+    top: 100%;
+    border-bottom-width: 0;
+  } @else if $direction == "bottom" {
+    bottom: 100%;
+    border-top-width: 0;
+  } @else if $direction == "left" {
+    left: 100%;
+    border-right-width: 0;
+  } @else if $direction == "right" {
+    right: 100%;
+    border-left-width: 0;
+  }
+}
+
+@mixin triangleProperties($color) {
+  &.top {
+    &:after {
+      @include triangle($color, 0.5rem, "top", "center");
+    }
+  }
+  &.top-start {
+    &:after {
+      @include triangle($color, 0.5rem, "top", "start");
+    }
+  }
+  &.top-end {
+    &:after {
+      @include triangle($color, 0.5rem, "top", "end");
+    }
+  }
+  &.bottom {
+    &:after {
+      @include triangle($color, 0.5rem, "bottom", "center");
+    }
+  }
+  &.bottom-start {
+    &:after {
+      @include triangle($color, 0.5rem, "bottom", "start");
+    }
+  }
+  &.bottom-end {
+    &:after {
+      @include triangle($color, 0.5rem, "bottom", "end");
+    }
+  }
+  &.left {
+    &:after {
+      @include triangle($color, 0.5rem, "left", "center");
+    }
+  }
+  &.left-start {
+    &:after {
+      @include triangle($color, 0.5rem, "left", "start");
+    }
+  }
+  &.left-end {
+    &:after {
+      @include triangle($color, 0.5rem, "left", "end");
+    }
+  }
+  &.right {
+    &:after {
+      @include triangle($color, 0.5rem, "right", "center");
+    }
+  }
+  &.right-start {
+    &:after {
+      @include triangle($color, 0.5rem, "right", "start");
+    }
+  }
+  &.right-end {
+    &:after {
+      @include triangle($color, 0.5rem, "right", "end");
+    }
+  }
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.tooltip-wrapper {
+  .icon {
+    margin-left: 0.5rem;
+    color: var(--greyed-out);
+    @include mixins.transition(all, 0.2s, ease-in-out);
+
+    &:hover {
+      color: var(--default);
+    }
+
+    &.error {
+      color: var(--error);
+    }
+  }
+}
+
+.tooltip {
+  $transition-property: opacity, transform;
+
+  position: fixed;
+  font-size: var(--font-size-sub);
+  line-height: 1.33;
+  border-radius: 0.125rem;
+  padding: 0.75rem;
+  color: var(--light);
+  max-width: 20.625rem;
+  opacity: 0;
+  transform: scale(0);
+  transform-origin: center center;
+  pointer-events: none;
+  box-shadow: 0 0.0625rem 0.3125rem 0 rgba(1, 5, 50, 0.3);
+  word-break: break-word;
+  z-index: var(--tooltip-index);
+
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
+
+  &.black {
+    background-color: var(--tooltip-background-color);
+
+    @include triangleProperties(var(--tooltip-background-color));
+  }
+
+  &.blue {
+    background-color: var(--color-blue-grey500);
+
+    @include triangleProperties(var(--color-blue-grey500));
+  }
+
+  &:after {
+    content: "";
+  }
+
+  &.visible {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.label {
+  &:focus-visible {
+    outline: 0.0313rem dashed var(--color-primary);
+  }
+}
+
+.tooltip-title {
+  font-weight: 500;
+  font-size: var(--font-size-form-label);
+  line-height: 1.43;
+  display: block;
+  margin-bottom: 0.25rem;
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,251 @@
+/*
+ * 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,
+  useMemo,
+  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: ReactNode;
+  title?: string;
+  children: ReactNode;
+  domRoot?: HTMLElement;
+  icon?: Icons;
+  location?: "left" | "right" | "top" | "bottom";
+  color?: "black" | "blue";
+  position?: "start" | "center" | "end";
+}
+
+interface DefaultPosition {
+  placement: Placement;
+  offset: Offset;
+  transformOrigin: Placement;
+}
+
+type Location = "left" | "right" | "top" | "bottom";
+type Position = "start" | "end";
+type LocationPosition = `${Location}${Capitalize<Position>}` | `${Location}`;
+const locations: Record<LocationPosition, DefaultPosition> = {
+  left: {
+    placement: { horizontal: "left", vertical: "center" },
+    offset: { left: 0, right: 12, top: 0, bottom: 0 },
+    transformOrigin: { horizontal: "right", vertical: "center" }
+  },
+  leftEnd: {
+    placement: { horizontal: "left", vertical: "top" },
+    offset: { left: 0, right: 12, top: -12, bottom: 0 },
+    transformOrigin: { horizontal: "right", vertical: "top" }
+  },
+  leftStart: {
+    placement: { horizontal: "left", vertical: "bottom" },
+    offset: { left: 0, right: 12, top: 0, bottom: -12 },
+    transformOrigin: { horizontal: "right", vertical: "bottom" }
+  },
+  right: {
+    placement: { horizontal: "right", vertical: "center" },
+    offset: { left: 12, right: 0, top: 0, bottom: 0 },
+    transformOrigin: { horizontal: "left", vertical: "center" }
+  },
+  rightEnd: {
+    placement: { horizontal: "right", vertical: "top" },
+    offset: { left: 12, right: 0, top: -12, bottom: 0 },
+    transformOrigin: { horizontal: "left", vertical: "top" }
+  },
+  rightStart: {
+    placement: { horizontal: "right", vertical: "bottom" },
+    offset: { left: 12, right: 0, top: 0, bottom: -12 },
+    transformOrigin: { horizontal: "left", vertical: "bottom" }
+  },
+  top: {
+    placement: { horizontal: "center", vertical: "top" },
+    offset: { left: 0, right: 0, top: 0, bottom: 12 },
+    transformOrigin: { horizontal: "center", vertical: "bottom" }
+  },
+  topEnd: {
+    placement: { horizontal: "left", vertical: "top" },
+    offset: { left: -12, right: 0, top: 0, bottom: 12 },
+    transformOrigin: { horizontal: "left", vertical: "bottom" }
+  },
+  topStart: {
+    placement: { horizontal: "right", vertical: "top" },
+    offset: { left: 0, right: -12, top: 0, bottom: 12 },
+    transformOrigin: { horizontal: "right", vertical: "bottom" }
+  },
+  bottom: {
+    placement: { horizontal: "center", vertical: "bottom" },
+    offset: { left: 0, right: 0, top: 12, bottom: 0 },
+    transformOrigin: { horizontal: "center", vertical: "top" }
+  },
+  bottomEnd: {
+    placement: { horizontal: "left", vertical: "bottom" },
+    offset: { left: -12, right: 0, top: 12, bottom: 0 },
+    transformOrigin: { horizontal: "left", vertical: "top" }
+  },
+  bottomStart: {
+    placement: { horizontal: "right", vertical: "bottom" },
+    offset: { left: 0, right: -12, top: 12, bottom: 0 },
+    transformOrigin: { horizontal: "right", vertical: "top" }
+  }
+};
+
+const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    title,
+    children,
+    className,
+    domRoot,
+    label,
+    location = "right",
+    position = "center",
+    color = "black",
+    icon,
+    ...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 determinedLocation = useMemo(() => {
+    if (position === "center") {
+      return location;
+    }
+
+    return `${location}${position.charAt(0).toUpperCase() + position.slice(1)}` as LocationPosition;
+  }, [location, position]);
+
+  const { top, bottom, right, left, calculatePosition } = usePosition({
+    relativeElement: relativeElement,
+    elementToBePositioned: elementToBePositioned,
+    placement: locations[determinedLocation].placement,
+    offset: locations[determinedLocation].offset,
+    transformOrigin: locations[determinedLocation].transformOrigin
+  });
+
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+
+    const 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, {
+        ref: relativeElement,
+        onMouseEnter: () => setVisible(true),
+        onMouseLeave: () => setVisible(false),
+        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>
+    );
+  };
+
+  const tooltipClasses = `${classes["tooltip"]} ${classes[color]} ${
+    visible ? classes["visible"] : ""
+  } ${classes[determinedLocation.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase()]}`;
+
+  return (
+    <div {...rest} ref={wrappingDivRef} className={`${classes.wrapper} ${className ?? ""}`}>
+      {renderChildren()}
+      <div className={`${classes["tooltip-wrapper"]}`}>
+        {!React.isValidElement(label) && (
+          <Icon
+            ref={relativeElement}
+            tag="div"
+            onMouseEnter={() => setVisible(true)}
+            onMouseLeave={() => setVisible(false)}
+            icon={Icons.InfoCircle}
+            aria-describedby={identifier}
+            className={`${classes.icon}`}
+          />
+        )}
+        {createPortal(
+          <div
+            ref={elementToBePositioned}
+            style={{
+              ...rest.style,
+              top: top,
+              left: left,
+              right: right,
+              bottom: bottom
+            }}
+            aria-hidden={!visible}
+            id={identifier}
+            className={tooltipClasses}
+          >
+            {title && <span className={classes["tooltip-title"]}>{title}</span>}
+            {children}
+          </div>,
+          root
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const Tooltip = React.forwardRef(TooltipComponent);

package/src/components/Typography/Typography.module.scss

@@ -0,0 +1,80 @@
+/*!
+ * 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";
+
+.typography_style_ {
+  &h1 {
+    @include mixins.fontProperties(
+      $fontSize: var(--font-size-h1),
+      $fontWeight: 700,
+      $lineHeight: 1.2,
+      $color: var(--font-color-h1)
+    );
+  }
+
+  &h2 {
+    @include mixins.fontProperties(
+      $fontSize: var(--font-size-h2),
+      $fontWeight: 700,
+      $lineHeight: 1.42857,
+      $color: var(--font-color-h2)
+    );
+  }
+
+  &h3 {
+    @include mixins.fontProperties(
+      $fontSize: var(--font-size-h3),
+      $fontWeight: 500,
+      $lineHeight: 1.16666,
+      $color: var(--font-color-h3)
+    );
+  }
+
+  &h4 {
+    @include mixins.fontProperties(
+      $fontSize: var(--font-size-h4),
+      $fontWeight: 500,
+      $lineHeight: 1.2,
+      $color: var(--font-color-h4)
+    );
+  }
+
+  &body {
+    @include mixins.fontProperties($color: var(--font-color-body));
+  }
+
+  &body-bold {
+    @include mixins.fontProperties($color: var(--font-color-body), $fontWeight: 700);
+  }
+
+  &sub-text {
+    @include mixins.fontProperties(
+      $fontSize: var(--font-size-sub),
+      $lineHeight: var(--font-size),
+      $color: var(--font-color-h4)
+    );
+  }
+
+  &code {
+    @include mixins.fontProperties(
+      $fontFamily: var(--font-family-code),
+      $fontSize: var(--font-size-code),
+      $lineHeight: 1.5,
+      $color: var(--font-color-code)
+    );
+  }
+}

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,111 @@
+/*
+ * 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";
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export interface Props extends ComponentPropsWithRef<any> {
+  children: ReactNode;
+  variant: Variant;
+  tag?: Tags;
+  spacing?: Spacing;
+  align?: "left" | "center" | "right";
+}
+
+const TypographyComponent: ForwardRefRenderFunction<unknown, Omit<Props, "ref">> = (
+  { children, variant, tag, style, spacing, align, className = "", ...rest },
+  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;
+    }
+  }
+
+  const TagName = tag;
+
+  return (
+    <TagName
+      {...rest}
+      ref={ref}
+      style={{ ...styleWithSpacing, textAlign: align }}
+      className={`${classes["typography_style_" + variant]} ${className}`}
+    >
+      {children}
+    </TagName>
+  );
+};
+
+export const Typography = React.forwardRef(TypographyComponent);