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

package/src/components/Link/Link.module.scss

@@ -0,0 +1,106 @@
+/*!
+ * 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";
+
+.link {
+  font-family: var(--font-family);
+  font-size: var(--link-font-size);
+  font-style: normal;
+  font-variant: normal;
+  line-height: var(--default-line-height);
+  font-weight: normal;
+  text-transform: none;
+  letter-spacing: 0;
+
+  &:focus,
+  &:hover,
+  &:active {
+    text-decoration-thickness: 0.125rem;
+    outline: 0;
+  }
+
+  &.primary {
+    color: var(--link-primary-default-color);
+
+    &:focus-visible {
+      outline: 0.5px dashed var(--link-primary-default-color);
+    }
+
+    &:visited {
+      color: var(--link-primary-visited-color);
+    }
+  }
+
+  &.success {
+    color: var(--link-success-default-color);
+
+    &:focus-visible {
+      outline: 0.5px dashed var(--link-success-default-color);
+    }
+
+    &:visited {
+      color: var(--link-success-visited-color);
+    }
+  }
+
+  &.danger {
+    color: var(--link-danger-default-color);
+
+    &:focus-visible {
+      outline: 0.5px dashed var(--link-danger-default-color);
+    }
+
+    &:visited {
+      color: var(--link-danger-visited-color);
+    }
+  }
+
+  &.warning {
+    color: var(--link-warning-default-color);
+
+    &:focus-visible {
+      outline: 0.5px dashed var(--link-warning-default-color);
+    }
+
+    &:visited {
+      color: var(--link-warning-visited-color);
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    color: var(--greyed-out);
+  }
+}
+
+.button {
+  text-decoration: none;
+
+  @include mixins.buttonBase("link");
+
+  &.fill {
+    @include mixins.button("fill", "link");
+  }
+
+  &.outline {
+    @include mixins.button("outline", "link");
+  }
+
+  &.text {
+    @include mixins.button("text", "link");
+  }
+}

package/src/components/Link/Link.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,
+  ForwardRefExoticComponent,
+  ReactElement
+} from "react";
+import classes from "./Link.module.scss";
+import { IconProps, Icon } from "../../index";
+
+export type AnchorType = "external" | "internal" | "download";
+
+export interface Props extends ComponentPropsWithRef<"a"> {
+  prefixIcon?: ReactElement<IconProps, typeof Icon>;
+  color?: "primary" | "success" | "danger" | "warning";
+  display?: "link" | "button";
+  buttonVariant?: "outline" | "text" | "fill";
+  type?: AnchorType;
+  to: string;
+  disabled?: boolean;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  component?: ForwardRefExoticComponent<any>;
+}
+
+const LinkComponent: ForwardRefRenderFunction<HTMLAnchorElement, Props> = (
+  {
+    children,
+    className,
+    disabled = false,
+    prefixIcon = undefined,
+    to,
+    color = "primary",
+    type = "internal",
+    display = "link",
+    buttonVariant = "fill",
+    component,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const determineTarget = () => {
+    if (rest.target) {
+      return rest.target;
+    }
+
+    if (type === "external") {
+      return "_blank";
+    }
+
+    return "";
+  };
+
+  const classNames = [classes[color]];
+  display === "link" && classNames.push(classes["link"]);
+  display === "button" && classNames.push(classes["button"], classes[buttonVariant]);
+  disabled && classNames.push(classes["disabled"]);
+  className && classNames.push(className);
+
+  if (component) {
+    return React.createElement(
+      component,
+      {
+        ...rest,
+        ref: ref,
+        to: to,
+        className: classNames.join(" "),
+        "aria-disabled": disabled,
+        style: {
+          ...rest.style
+        }
+      },
+      children
+    );
+  }
+
+  return (
+    <a
+      {...rest}
+      ref={ref}
+      download={type === "download"}
+      rel={type === "external" ? "noopener noreferer" : undefined}
+      href={!disabled ? to : undefined}
+      className={classNames.join(" ")}
+      aria-disabled={disabled}
+      target={determineTarget()}
+      style={{
+        ...rest.style
+      }}
+    >
+      {prefixIcon}
+      <span data-underline="true">{children}</span>
+    </a>
+  );
+};
+
+export const Link = React.forwardRef(LinkComponent);

package/src/components/Notifications/Alert/AlertContainer/AlertContainer.module.scss

@@ -0,0 +1,57 @@
+/*!
+ * 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 "../../../../variables.scss";
+@use "../alertVariables.scss";
+
+.alerts {
+  position: fixed;
+  z-index: variables.$alert-z-index;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  @include mixins.transition(height, 0.2s, ease-in-out);
+
+  &.bottom {
+    bottom: 3.5rem;
+  }
+
+  &.top {
+    top: 3.5rem;
+  }
+
+  &.start {
+    left: 0;
+  }
+
+  &.center {
+    left: 0;
+  }
+
+  &.end {
+    right: 0;
+  }
+}
+
+@media only screen and (min-width: 37.5em) {
+  .alerts {
+    width: initial;
+
+    &.center {
+      left: calc(50% - (alertVariables.$alert-item-width / 2));
+    }
+  }
+}

package/src/components/Notifications/Alert/AlertContainer/AlertContainer.tsx

@@ -0,0 +1,52 @@
+/*
+ * 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 from "react";
+import classes from "./AlertContainer.module.scss";
+import { useAlertContainerHeightAnimation } from "./useAlertContainerHeightAnimation";
+
+export interface Placement {
+  vertical: "top" | "bottom";
+  horizontal: "start" | "center" | "end";
+}
+
+export interface Props {
+  placement: Placement;
+  children?: React.ReactNode;
+  zIndex?: number;
+  className?: string;
+}
+
+export const AlertContainer = ({ placement, children, zIndex, className, ...rest }: Props) => {
+  const { height, justifyContent } = useAlertContainerHeightAnimation();
+
+  const containerClasses = [
+    classes["alerts"],
+    classes[placement.horizontal],
+    classes[placement.vertical],
+    className ?? ""
+  ];
+
+  return (
+    <div
+      {...rest}
+      style={{ zIndex, height, justifyContent }}
+      className={containerClasses.join(" ")}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Notifications/Alert/AlertContainer/useAlertContainerHeightAnimation.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 { useContext, useEffect, useState } from "react";
+import AlertContext from "../AlertProvider/AlertContext";
+
+export function useAlertContainerHeightAnimation() {
+  const { alerts } = useContext(AlertContext);
+  const [height, setHeight] = useState(0);
+  const [justifyContent, setJustifyContent] = useState<"flex-start" | "flex-end">("flex-start");
+  const spaceBetweenAlerts = 8;
+  const exceedsMaximumVisibleAlerts = alerts.length >= 3;
+
+  useEffect(() => {
+    const allHeights = alerts.map(alert => alert.height ?? 0);
+    let totalHeight = allHeights.reduce((prev, curr) => prev + curr, 0);
+    totalHeight += (Math.min(alerts.length, 3) - 1) * spaceBetweenAlerts;
+
+    if (exceedsMaximumVisibleAlerts) {
+      setTimeout(() => {
+        setJustifyContent("flex-end");
+      }, 500);
+    }
+    if (height > totalHeight && justifyContent !== "flex-end") {
+      setJustifyContent("flex-end");
+    } else if (height < totalHeight && justifyContent !== "flex-start") {
+      setJustifyContent("flex-start");
+    }
+
+    setHeight(totalHeight);
+  }, [alerts]);
+
+  return { height, justifyContent };
+}

package/src/components/Notifications/Alert/AlertItem/AlertItem.module.scss

@@ -0,0 +1,279 @@
+/*!
+ * 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 "../alertVariables.scss";
+
+.alert {
+  padding: 1rem 0.875rem;
+  border-radius: var(--alert-border-radius);
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  flex-grow: 0;
+
+  &.neutral {
+    background-color: var(--alert-neutral-background-color);
+    border-radius: var(--alert-border-radius);
+
+    &.emph-low {
+      color: unset;
+    }
+
+    &.emph-medium {
+      @include mixins.alertBorder(var(--alert-neutral-inverted-color));
+    }
+
+    &.emph-high {
+      background-color: var(--alert-neutral-inverted-color);
+
+      .content,
+      .title,
+      .close-btn,
+      .icon,
+      .action-button {
+        color: var(--alert-text-inverted-color);
+      }
+    }
+  }
+
+  &.informative {
+    background-color: var(--alert-info-background-color);
+    border-radius: var(--alert-border-radius);
+
+    &.emph-low {
+      color: unset;
+    }
+
+    &.emph-medium {
+      @include mixins.alertBorder(var(--alert-info-inverted-color));
+    }
+
+    &.emph-high {
+      background-color: var(--alert-info-inverted-color);
+
+      .content,
+      .title,
+      .close-btn,
+      .icon,
+      .action-button {
+        color: var(--alert-text-inverted-color);
+      }
+    }
+  }
+
+  &.success {
+    background-color: var(--alert-success-background-color);
+    border-radius: var(--alert-border-radius);
+
+    &.emph-low .icon {
+      color: var(--alert-success-inverted-color);
+    }
+
+    &.emph-medium {
+      @include mixins.alertBorder(var(--alert-success-inverted-color));
+
+      .icon {
+        color: var(--alert-success-inverted-color);
+      }
+    }
+
+    &.emph-high {
+      background-color: var(--alert-success-inverted-color);
+
+      .content,
+      .title,
+      .close-btn,
+      .icon,
+      .action-button {
+        color: var(--alert-text-inverted-color);
+      }
+    }
+  }
+
+  &.warning {
+    background-color: var(--alert-warning-background-color);
+    border-radius: var(--alert-border-radius);
+
+    &.emph-low .icon {
+      color: var(--alert-warning-inverted-color);
+    }
+
+    &.emph-medium {
+      @include mixins.alertBorder(var(--alert-warning-inverted-color));
+
+      .icon {
+        color: var(--alert-warning-inverted-color);
+      }
+    }
+
+    &.emph-high {
+      background-color: var(--alert-warning-inverted-color);
+
+      .content,
+      .title,
+      .close-btn,
+      .icon,
+      .action-button {
+        color: var(--alert-text-inverted-color);
+      }
+    }
+  }
+
+  &.error {
+    background-color: var(--alert-error-background-color);
+    border-radius: var(--alert-border-radius);
+
+    &.emph-low .icon {
+      color: var(--alert-error-inverted-color);
+    }
+
+    &.emph-medium {
+      @include mixins.alertBorder(var(--alert-error-inverted-color));
+
+      .icon {
+        color: var(--alert-error-inverted-color);
+      }
+    }
+
+    &.emph-high {
+      background-color: var(--alert-error-inverted-color);
+
+      .content,
+      .title,
+      .close-btn,
+      .icon,
+      .action-button {
+        color: var(--alert-text-inverted-color);
+      }
+    }
+  }
+
+  & + & {
+    margin-top: 0.5rem;
+  }
+
+  .close-btn {
+    color: var(--alert-text-color);
+    align-self: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin: -0.5rem 0;
+    flex-shrink: 0;
+    border: 0;
+
+    span {
+      font-size: var(--alert-font-size);
+    }
+
+    &:not(:disabled):hover,
+    &:not(:disabled):focus {
+      background-color: var(--color-black10);
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--color-black20);
+    }
+  }
+
+  .icon {
+    color: var(--alert-text-color);
+    font-size: var(--font-size);
+    height: var(--font-size-big);
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-start;
+  }
+
+  .title {
+    color: var(--alert-text-color);
+    flex: 1;
+    font-size: var(--alert-font-size);
+    line-height: 1.43;
+    margin-bottom: 0.25rem;
+    display: block;
+  }
+
+  .outer-content-wrapper {
+    display: flex;
+    gap: 0.5rem;
+    flex-grow: 1;
+  }
+
+  .content-wrapper {
+    flex-grow: 1;
+    padding-left: 0.125rem;
+  }
+
+  .content {
+    color: var(--alert-text-color);
+    font-size: var(--alert-font-size);
+    line-height: 1.43;
+    margin-bottom: 0;
+    word-break: break-word;
+  }
+
+  .actions {
+    text-align: right;
+    align-self: center;
+  }
+
+  .action-button {
+    border-width: var(--button-border-width);
+    border-style: var(--button-border-style);
+    border-radius: var(--button-border-radius);
+    white-space: nowrap;
+    font-size: var(--alert-font-size);
+    line-height: 1;
+    font-weight: 400;
+    margin: -0.5rem 0;
+    padding: 0.625rem 1.25rem;
+    cursor: pointer;
+    transition:
+      color,
+      background-color,
+      border-color 0.2s ease-in-out;
+    font-family: var(--font-family);
+    color: var(--alert-text-color);
+    background-color: transparent;
+    border-color: transparent;
+
+    &:disabled {
+      color: var(--greyed-out);
+      cursor: not-allowed;
+    }
+
+    @include mixins.focusVisibleOutline();
+
+    &:not(:disabled):hover,
+    &:not(:disabled):focus {
+      background-color: var(--color-black10);
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--color-black20);
+    }
+  }
+}
+
+@media only screen and (min-width: 37.5em) {
+  .alert {
+    width: min-content;
+    min-width: alertVariables.$alert-item-width;
+  }
+}