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

package/src/components/Tag/RemoveButton.module.scss

@@ -0,0 +1,42 @@
+/*!
+ * 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";
+
+.remove {
+  width: 1.25rem;
+  height: 1.25rem;
+  background: none;
+  border: none;
+  padding: 0;
+  margin-right: -0.375rem;
+  cursor: pointer;
+
+  &:hover {
+    border-radius: 0.125rem;
+    background-color: var(--color-black10);
+  }
+
+  &:active {
+    background-color: var(--color-blue-grey400);
+  }
+
+  @include mixins.focusVisibleOutline($outlineOffset: 0);
+
+  .icon {
+    font-size: var(--font-size-small);
+  }
+}

package/src/components/Tag/RemoveButton.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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, HTMLAttributes, forwardRef } from "react";
+import { Icon, Icons } from "../Icon/Icon";
+
+import readyclasses from "../../readyclasses.module.scss";
+import classes from "./RemoveButton.module.scss";
+
+export interface Props extends HTMLAttributes<HTMLButtonElement> {
+  removeLabel?: string;
+  label?: string;
+  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const RemoveButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { removeLabel = "Remove", label, onRemove, ...rest }: Props,
+  ref
+) => {
+  return (
+    onRemove && (
+      <button
+        title=""
+        type="button"
+        {...rest}
+        ref={ref}
+        className={`${classes["remove"]} ${rest.className ?? ""}`}
+        onClick={onRemove}
+      >
+        <Icon icon={Icons.Times} className={classes["icon"]} />
+        <span className={readyclasses["sr-only"]}>
+          {removeLabel}
+          {label ? " " + label : ""}
+        </span>
+      </button>
+    )
+  );
+};
+
+export const RemoveButton = forwardRef(RemoveButtonComponent);

package/src/components/Tag/Tag.module.scss

@@ -0,0 +1,43 @@
+/*!
+ * 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.
+ */
+
+.tag {
+  font-size: var(--font-size-sub);
+  padding: 0.25rem 0.75rem;
+  border: none;
+  border-radius: 3.125rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  &.tag-enabled {
+    background-color: var(--color-green100);
+  }
+
+  &.tag-disabled {
+    background-color: var(--color-blue-grey100);
+  }
+
+  &.sharp {
+    border-radius: 0.125rem;
+  }
+
+  .label {
+    line-height: 2;
+    font-size: inherit;
+    color: inherit;
+  }
+}

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,79 @@
+/*
+ * 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, HTMLAttributes, forwardRef } from "react";
+import { Icon, Icons } from "../Icon/Icon";
+import classes from "./Tag.module.scss";
+import { Typography } from "../Typography/Typography";
+import { RemoveButton, Props as RemoveButtonProps } from "./RemoveButton";
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  variant?: "enabled" | "disabled";
+  icon?: Icons;
+  backgroundColor?: string;
+  color?: string;
+  children?: string;
+  shape?: "rounded" | "sharp";
+  removeButton?: RemoveButtonProps;
+}
+
+const TagComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    variant,
+    icon,
+    backgroundColor,
+    color,
+    shape = "rounded",
+    removeButton = {},
+    ...rest
+  }: Props,
+  ref
+) => {
+  const determineIcon = () => {
+    if (icon) {
+      return <Icon size="inherit" icon={icon} />;
+    }
+
+    if (variant === "enabled") {
+      return <Icon size="inherit" icon={Icons.CheckmarkCircleAlt} />;
+    } else if (variant === "disabled") {
+      return <Icon size="inherit" icon={Icons.Forbidden} />;
+    }
+  };
+
+  const tagClasses = [classes["tag"]];
+  variant === "enabled" && tagClasses.push(classes["tag-enabled"]);
+  variant === "disabled" && tagClasses.push(classes["tag-disabled"]);
+  shape === "sharp" && tagClasses.push(classes["sharp"]);
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      className={`${tagClasses.join(" ")} ${rest.className ?? ""}`}
+      style={{ backgroundColor, color }}
+    >
+      {determineIcon()}
+      <Typography spacing={{ marginBottom: 0 }} variant="body" className={classes["label"]}>
+        {children}
+      </Typography>
+      <RemoveButton {...removeButton} label={children} />
+    </div>
+  );
+};
+
+export const Tag = forwardRef(TagComponent);

package/src/components/TextEllipsis/TextEllipsis.module.scss

@@ -0,0 +1,35 @@
+/*!
+ * 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.
+ */
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.popover {
+  max-width: min(75ch, 90%);
+  padding: 0.6875rem 0.6875rem 0.6875rem 0.875rem;
+  border-radius: 0.25rem;
+
+  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.29);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+
+  transition-property: opacity;
+  transform: scale(1);
+  z-index: 1;
+}

package/src/components/TextEllipsis/TextEllipsis.tsx

@@ -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.
+ */
+
+import React, {
+  ForwardRefRenderFunction,
+  useRef,
+  MouseEventHandler,
+  useState,
+  ComponentPropsWithRef
+} from "react";
+import { Popover } from "../Popover/Popover";
+import classes from "./TextEllipsis.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  children?: string;
+  popoverClassName?: string;
+}
+
+const TextEllipsisComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, popoverClassName, className, ...rest }: Props,
+  ref
+) => {
+  const [showPopover, setShowPopover] = useState(false);
+  const textContainer = useRef<HTMLDivElement>(null);
+
+  const ellipsisVisible = () => {
+    if (
+      textContainer.current &&
+      textContainer.current.offsetWidth < textContainer.current.scrollWidth
+    ) {
+      return true;
+    }
+    return false;
+  };
+
+  const onMouseEnter: MouseEventHandler<HTMLDivElement> = () => {
+    ellipsisVisible() && setShowPopover(true);
+  };
+
+  const onMouseLeave: MouseEventHandler<HTMLDivElement> = () => {
+    ellipsisVisible() && setShowPopover(false);
+  };
+
+  return (
+    <div
+      {...rest}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      className={`${classes["text-ellipsis"]} ${className ?? ""}`}
+      ref={ref ?? textContainer}
+    >
+      {children}
+      <Popover
+        aria-hidden={true}
+        data-hidden={!showPopover}
+        show={showPopover}
+        role="tooltip"
+        anchorEl={textContainer}
+        className={`${classes.popover} ${popoverClassName ?? ""}`}
+      >
+        {children}
+      </Popover>
+    </div>
+  );
+};
+
+export const TextEllipsis = React.forwardRef(TextEllipsisComponent);

package/src/components/Tiles/Tile.module.scss

@@ -0,0 +1,91 @@
+/*!
+ * 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";
+
+.tile {
+  border: 1px solid var(--light-grey-border);
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 0 0 2rem;
+  background-color: var(--light);
+  font-family: var(--font-family);
+
+  @include mixins.transition(box-shadow, 0.2s, ease-in-out);
+
+  &:hover {
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.29);
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      padding: 0 1rem;
+    }
+  }
+
+  figure {
+    margin: 0 0 1rem;
+    height: 3rem;
+
+    img {
+      vertical-align: top;
+      height: 3rem;
+      width: auto;
+    }
+  }
+
+  .placeholder {
+    font-size: 3rem;
+    margin: 0 0 1rem;
+    color: var(--greyed-out);
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+    padding: 0 1rem;
+  }
+
+  &.loading {
+    header {
+      display: none;
+    }
+
+    .image {
+      margin-top: 2.5rem;
+      border-radius: 0.5rem;
+      width: 3rem;
+      height: 3rem;
+
+      @include mixins.skeletonLoading();
+    }
+
+    .title {
+      color: transparent;
+      display: inline-block;
+      width: 70%;
+      border-radius: 0.5rem;
+
+      @include mixins.skeletonLoading();
+    }
+  }
+}

package/src/components/Tiles/Tile.tsx

@@ -0,0 +1,105 @@
+/*
+ * 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, {
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  ForwardRefRenderFunction,
+  ReactElement,
+  useState
+} from "react";
+import { Icon, Icons } from "../Icon/Icon";
+import classes from "./Tile.module.scss";
+import readyClasses from "../../readyclasses.module.scss";
+
+import { Props as ContextMenuProps } from "../ContextMenu/ContextMenu";
+import { generateID } from "../../util/helper";
+import { Props as IconButtonProps } from "../Button/IconButton";
+
+interface ImageProps extends ComponentPropsWithoutRef<"img"> {
+  src: string;
+}
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  title: string;
+  imageProps?: ImageProps;
+  enabled?: boolean;
+  loading?: boolean;
+  tileAction?: ReactElement<ContextMenuProps> | ReactElement<IconButtonProps>;
+}
+
+const TileComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { title, imageProps, enabled, className, loading, tileAction, ...rest }: Props,
+  ref
+) => {
+  const [tileDescriptionID] = useState(generateID(20));
+
+  if (!title) {
+    throw new Error("Please make sure to pass a title prop to your Tile component.");
+  }
+
+  const statusMessage = () => {
+    if (enabled) {
+      return "Status: enabled";
+    }
+
+    return "Status: disabled";
+  };
+
+  return (
+    <article
+      {...rest}
+      tabIndex={0}
+      aria-labelledby={tileDescriptionID}
+      ref={ref}
+      className={`${classes["tile"]} ${loading ? classes["loading"] : ""}`}
+    >
+      <header style={{ justifyContent: enabled === undefined ? "flex-end" : "space-between" }}>
+        {enabled === true && (
+          <Icon
+            color="var(--success)"
+            icon={Icons.Checkmark}
+            className={`${classes["icon"]} ${className ?? ""}`}
+          />
+        )}
+        {enabled === false && (
+          <Icon
+            color="var(--greyed-out)"
+            icon={Icons.Forbidden}
+            className={`${classes["icon"]} ${className ?? ""}`}
+          />
+        )}
+        {enabled !== undefined && (
+          <span id={tileDescriptionID} className={readyClasses["sr-only"]}>
+            {`${title}. ${statusMessage()}`}
+          </span>
+        )}
+        {tileAction ?? null}
+      </header>
+      <div className={classes["content"]}>
+        {imageProps && imageProps.src.length > 0 && (
+          <figure className={classes["image"]}>{!loading && <img {...imageProps} alt="" />}</figure>
+        )}
+        {(!imageProps || imageProps.src.length === 0) && (
+          <Icon className={classes["placeholder"]} icon={Icons.Image} />
+        )}
+        <span className={classes["title"]}>{title}</span>
+      </div>
+    </article>
+  );
+};
+
+export const Tile = React.forwardRef(TileComponent);

package/src/components/Tiles/Tiles.module.scss

@@ -0,0 +1,27 @@
+/*!
+ * 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.
+ */
+
+.tiles {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-columns: repeat(1, 1fr);
+}
+
+@media screen and (min-width: 30em) {
+  .tiles {
+    grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
+  }
+}

package/src/components/Tiles/Tiles.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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 "./Tiles.module.scss";
+import { Tile } from "./Tile";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  children: ReactNode;
+  loading?: boolean;
+}
+
+const TilesComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, className, loading = false, ...rest }: Props,
+  ref
+) => {
+  const renderChildren = () => {
+    if (loading) {
+      return [
+        <Tile
+          key="placeholder1"
+          title="placeholder"
+          imageProps={{ src: "placeholder" }}
+          loading={true}
+        />,
+        <Tile
+          key="placeholder2"
+          title="placeholder"
+          imageProps={{ src: "placeholder" }}
+          loading={true}
+        />,
+        <Tile
+          key="placeholder3"
+          title="placeholder"
+          imageProps={{ src: "placeholder" }}
+          loading={true}
+        />
+      ];
+    }
+
+    return children;
+  };
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      className={`${classes["tiles"]} ${className ?? ""}`}
+      aria-live="polite"
+      aria-busy={loading}
+    >
+      {renderChildren()}
+    </div>
+  );
+};
+
+export const Tiles = React.forwardRef(TilesComponent);