@onewelcome/react-lib-components 6.1.0 → 6.3.0

package/src/components/Notifications/Dialog/Dialog.tsx

@@ -56,7 +56,6 @@ const DialogComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     secondaryAction,
     cancelAction,
     zIndex,
-    disableEscapeKeyDown = true,
     titleIcon,
     caption,
     ...rest
@@ -97,12 +96,16 @@ const DialogComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       className={classes["dialog"]}
       containerProps={{ className: classes["container"] }}
       open={open}
-      disableBackdrop
       onClose={onClose}
       zIndex={zIndex}
-      disableEscapeKeyDown={disableEscapeKeyDown}
     >
-      <DialogTitle titleIcon={titleIcon} caption={caption} id={labelId(dialogId)} title={title} />
+      <DialogTitle
+        titleIcon={titleIcon}
+        caption={caption}
+        id={labelId(dialogId)}
+        title={title}
+        onClose={onClose}
+      />
       <BaseModalContent
         id={descriptionId(dialogId)}
         className={classes["content"]}

package/src/components/Notifications/Dialog/DialogTitle/DialogTitle.module.scss

@@ -17,7 +17,20 @@
 .header {
   margin: 1rem 1.5rem;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.headline {
+  display: flex;
+
+  &.with-caption {
+    align-items: flex-start;
+  }
+
+  &.no-caption {
+    align-items: center;
+  }
 }
 
 .title {
@@ -32,3 +45,7 @@
 .caption {
   color: var(--color-blue-grey500);
 }
+
+.close-button {
+  flex-shrink: 0;
+}

package/src/components/Notifications/Dialog/DialogTitle/DialogTitle.tsx

@@ -18,41 +18,54 @@ import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import { Typography } from "../../../Typography/Typography";
 import classes from "./DialogTitle.module.scss";
 import { Icon, Icons } from "../../../Icon/Icon";
+import { IconButton } from "../../../Button/IconButton";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   id: string;
   title: string;
   titleIcon?: React.ReactNode;
   caption?: string;
+  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const DialogTitleComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { id, title, titleIcon, caption, ...rest }: Props,
+  { id, title, titleIcon, caption, onClose, ...rest }: Props,
   ref
 ) => {
   return (
     <div {...rest} ref={ref} className={classes["header"]}>
-      {titleIcon && (
-        <div className={classes["title-icon"]}>
-          {typeof titleIcon === "boolean" ? <Icon icon={Icons.InfoCircle} /> : titleIcon}
-        </div>
-      )}
-      <div className={classes["title-wrapper"]}>
-        <Typography
-          id={id}
-          className={classes["title"]}
-          spacing={titleIcon && { marginLeft: 2 }}
-          tag="h1"
-          variant="h4"
-        >
-          {title}
-        </Typography>
-        {caption && (
-          <Typography className={classes["caption"]} spacing={{ marginLeft: 2 }} variant="sub-text">
-            {caption}
-          </Typography>
+      <div
+        className={`${classes["headline"]} ${caption ? classes["with-caption"] : classes["no-caption"]}`}
+      >
+        {titleIcon && (
+          <div className={classes["title-icon"]}>
+            {typeof titleIcon === "boolean" ? <Icon icon={Icons.InfoCircle} /> : titleIcon}
+          </div>
         )}
+        <div className={classes["title-wrapper"]}>
+          <Typography
+            id={id}
+            className={classes["title"]}
+            spacing={titleIcon && { marginLeft: 2 }}
+            tag="h1"
+            variant="h4"
+          >
+            {title}
+          </Typography>
+          {caption && (
+            <Typography
+              className={classes["caption"]}
+              spacing={{ marginLeft: 2 }}
+              variant="sub-text"
+            >
+              {caption}
+            </Typography>
+          )}
+        </div>
       </div>
+      <IconButton onClick={onClose} className={classes["close-button"]} title="close modal">
+        <Icon icon={Icons.Times} />
+      </IconButton>
     </div>
   );
 };

package/src/components/Pagination/Pagination.tsx

@@ -25,8 +25,8 @@ import classes from "./Pagination.module.scss";
 import readyclasses from "../../readyclasses.module.scss";
 import { IconButton } from "../Button/IconButton";
 import { Icons, Icon } from "../Icon/Icon";
-import { Select } from "../Form/Select/Select";
-import { Option } from "../Form/Select/Option";
+import { Select } from "../Form/Select/SingleSelect/Select";
+import { Option } from "../Form/Select/SingleSelect/Option";
 import { Label } from "../Form/Label/Label";
 
 export type PaginationTranslations = {

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

@@ -0,0 +1,41 @@
+/*!
+ * 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;
+
+  &: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: 0.625rem;
+  }
+}

package/src/components/Tag/RemoveButton.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, { 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
+        {...rest}
+        ref={ref}
+        className={`${classes["remove"]} ${rest.className ?? ""}`}
+        title=""
+        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

@@ -1,8 +1,25 @@
+/*!
+ * 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.
+ */
+
 $tagFontSize: 0.75rem;
 
 .tag {
   font-size: $tagFontSize;
-  padding: 0.375rem 0.7rem;
+  padding: 0.25rem 0.75rem;
+  border: none;
   border-radius: 3.125rem;
   display: inline-flex;
   align-items: center;
@@ -16,8 +33,12 @@ $tagFontSize: 0.75rem;
     background-color: var(--color-blue-grey100);
   }
 
+  &.sharp {
+    border-radius: 0.125rem;
+  }
+
   .label {
-    line-height: $tagFontSize;
+    line-height: 2;
     font-size: inherit;
     color: inherit;
   }

package/src/components/Tag/Tag.tsx

@@ -18,6 +18,7 @@ import React, { ForwardRefRenderFunction, HTMLAttributes, forwardRef } from "rea
 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";
@@ -25,10 +26,21 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
   backgroundColor?: string;
   color?: string;
   children?: string;
+  shape?: "rounded" | "sharp";
+  removeButton?: RemoveButtonProps;
 }
 
 const TagComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, variant, icon, backgroundColor, color, ...rest }: Props,
+  {
+    children,
+    variant,
+    icon,
+    backgroundColor,
+    color,
+    shape = "rounded",
+    removeButton = {},
+    ...rest
+  }: Props,
   ref
 ) => {
   const determineIcon = () => {
@@ -43,25 +55,23 @@ const TagComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     }
   };
 
-  const determineClassName = () => {
-    if (variant === "enabled") {
-      return classes["tag-enabled"];
-    } else if (variant === "disabled") {
-      return classes["tag-disabled"];
-    }
-  };
+  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
-      ref={ref}
-      className={`${determineClassName()} ${classes["tag"]} ${rest.className ?? ""}`}
-      style={{ backgroundColor, color }}
       {...rest}
+      ref={ref as any}
+      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>
   );
 };

package/src/font/icomoon.svg

@@ -79,5 +79,6 @@
 <glyph unicode="&#xe945;" glyph-name="upload" d="M933.648 598.588h-240.942v361.412h-361.412v-361.412h-240.942l421.648-421.648 421.648 421.648zM451.764 478.116v361.412h120.47v-361.412h70.475l-130.711-130.711-130.711 130.711h70.475zM90.352 56.47h843.294v-120.47h-843.294v120.47z" />
 <glyph unicode="&#xe946;" glyph-name="reply" d="M98.011 739.109l366.202-157.014-366.689 48.762 0.488 108.251zM463.726 313.905l-366.202-157.014v108.251l366.202 48.762zM0.488 886.857l-0.488-341.334 731.429-97.523-731.429-97.523 0.488-341.334 1023.512 438.857-1023.512 438.857z" />
 <glyph unicode="&#xe947;" glyph-name="save" d="M796.445 959.998h-682.667c-63.147 0-113.777-51.2-113.777-113.777v-796.444c0-62.577 50.631-113.777 113.777-113.777h796.444c62.577 0 113.777 51.2 113.777 113.777v682.667l-227.556 227.556zM910.224 49.775h-796.444v796.444h635.449l160.996-160.996v-635.449zM512.001 447.998c-94.436 0-170.667-76.231-170.667-170.667s76.231-170.667 170.667-170.667c94.436 0 170.667 76.231 170.667 170.667s-76.231 170.667-170.667 170.667zM170.668 789.331h512v-227.556h-512v227.556z" />
+<glyph unicode="&#xe948;" glyph-name="warning-filled" d="M0 5.818h1024l-511.999 884.364-511.999-884.364zM558.545 145.454h-93.091v93.091h93.091v-93.091zM558.545 331.636h-93.091v186.182h93.091v-186.182z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>