@onewelcome/react-lib-components 6.7.1 → 7.1.0

package/src/components/DataGrid/DataGrid.tsx

@@ -23,6 +23,7 @@ import { DataGridBody } from "./DataGridBody/DataGridBody";
 import { HeaderCell, OnSortFunction, Sort } from "./datagrid.interfaces";
 import { Pagination, Props as PaginationProps } from "../Pagination/Pagination";
 import { Spacing, useSpacing } from "../../hooks/useSpacing";
+import { DataGridToolbar, DataGridToolbarProps } from "./DataGridFilters/DataGridToolbar";
 
 export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
   children: ({ item, index }: { item: T; index: number }) => ReactElement;
@@ -42,6 +43,11 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
   emptyLabel?: string;
   paginationProps?: PaginationProps;
   disableContextMenuColumn?: boolean;
+  enableExpandableRow?: boolean;
+  filters?: {
+    enable: boolean;
+    filtersProps: DataGridToolbarProps;
+  };
   isLoading?: boolean;
   enableMultiSorting?: boolean;
   spacing?: Spacing;
@@ -57,6 +63,8 @@ const DataGridInner = <T extends {}>(
     actions = {},
     paginationProps,
     disableContextMenuColumn,
+    enableExpandableRow,
+    filters,
     isLoading,
     enableMultiSorting,
     emptyLabel,
@@ -70,7 +78,7 @@ const DataGridInner = <T extends {}>(
     throw new Error("Headers definition has to be provided");
   }
   if (!children) {
-    throw new Error("DataGridBody should be provieded with a template how to render rows");
+    throw new Error("DataGridBody should be provided with a template how to render rows");
   }
 
   const [internalHeaders, setInternalHeaders] = useState(headers);
@@ -124,15 +132,20 @@ const DataGridInner = <T extends {}>(
         paddingBottom: styleWithSpacing?.paddingBottom
       }}
     >
-      <DataGridActions
-        {...actions}
-        style={{
-          paddingLeft: styleWithSpacing?.paddingLeft,
-          paddingRight: styleWithSpacing?.paddingRight
-        }}
-        headers={internalHeaders}
-        onColumnToggled={onColumnToggled}
-      />
+      {filters?.enable ? (
+        <DataGridToolbar {...filters.filtersProps} />
+      ) : (
+        <DataGridActions
+          {...actions}
+          style={{
+            paddingLeft: styleWithSpacing?.paddingLeft,
+            paddingRight: styleWithSpacing?.paddingRight
+          }}
+          headers={internalHeaders}
+          onColumnToggled={onColumnToggled}
+        />
+      )}
+
       <div className={classes["table-wrapper"]}>
         <table className={classes["table"]}>
           <DataGridHeader
@@ -140,6 +153,7 @@ const DataGridInner = <T extends {}>(
             initialSort={initialSort}
             onSort={onSort}
             disableContextMenuColumn={disableContextMenuColumn}
+            enableExpandableRow={enableExpandableRow}
             enableMultiSorting={enableMultiSorting}
             spacing={styleWithSpacing}
           />

package/src/components/DataGrid/DataGridBody/DataGridBody.tsx

@@ -16,8 +16,8 @@
 
 import React, { ComponentPropsWithRef, ReactElement, Ref } from "react";
 import { HeaderCell } from "../datagrid.interfaces";
-import { DataGridCell } from "./DataGridCell";
-import { DataGridRow } from "./DataGridRow";
+import { DataGridCell } from "./DataGridCell/DataGridCell";
+import { DataGridRow } from "./DataGridRow/DataGridRow";
 import classes from "./DataGridBody.module.scss";
 import { Typography } from "../../Typography/Typography";
 

package/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.module.scss

@@ -0,0 +1,54 @@
+/*!
+ * 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";
+
+.cell {
+  height: 2.75rem;
+  padding: 0.25rem 1rem;
+
+  &:first-child {
+    padding-left: 1rem;
+  }
+
+  &:last-child {
+    padding-right: 1rem;
+  }
+
+  .text {
+    font-size: var(--font-size-data-grid);
+    line-height: var(--data-grid-line-height);
+  }
+
+  .loading {
+    @include mixins.skeletonLoading();
+    border-radius: 0.5rem;
+    height: 1.25rem;
+    margin: 0.625rem 0;
+  }
+}
+
+@media only screen and (min-width: 50em) {
+  .cell {
+    &:first-child {
+      padding-left: 1.25rem;
+    }
+
+    &:last-child {
+      padding-right: 1.25rem;
+    }
+  }
+}

package/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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, ReactElement } from "react";
+import { Typography } from "../../../Typography/Typography";
+import classes from "./DataGridCell.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"td"> {
+  children?: ReactElement | string | number;
+  isLoading?: boolean;
+  spacing?: React.CSSProperties;
+  cellIndex?: number;
+  columnLength?: number;
+  disableContextMenuColumn?: boolean;
+}
+
+const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (
+  {
+    children,
+    className,
+    isLoading,
+    spacing,
+    cellIndex,
+    columnLength,
+    disableContextMenuColumn,
+    ...rest
+  }: Props,
+  ref
+) => {
+  let cellStyle: React.CSSProperties = {};
+
+  if (cellIndex === 0) {
+    cellStyle.paddingLeft = spacing?.paddingLeft;
+  }
+  if (
+    (cellIndex === columnLength && !disableContextMenuColumn) ||
+    (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)
+  ) {
+    cellStyle.paddingRight = spacing?.paddingRight;
+  }
+
+  return (
+    <td
+      {...rest}
+      ref={ref}
+      style={{ ...rest.style, ...cellStyle }}
+      className={`${classes["cell"]} ${className ?? ""}`}
+    >
+      {isLoading && <div className={classes["loading"]} aria-busy="true" aria-live="polite"></div>}
+      {!isLoading && (
+        <Typography className={classes["text"]} variant="body" tag="span">
+          {children}
+        </Typography>
+      )}
+    </td>
+  );
+};
+
+export const DataGridCell = React.forwardRef(DataGridCellComponent);

package/src/components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawer.module.scss

@@ -0,0 +1,60 @@
+.drawer {
+  display: grid;
+  grid-template-rows: 0fr;
+  gap: 0.5rem;
+  transition: grid-template-rows 200ms;
+
+  & > div > * {
+    padding-left: 4.75rem;
+    padding-right: 1.5rem;
+  }
+
+  & > div > *:first-child {
+    padding-top: 1rem;
+  }
+
+  & > div > *:last-child {
+    padding-bottom: 1.5rem;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  &.expanded {
+    grid-template-rows: 1fr;
+    $maxElements: 100;
+
+    @for $i from 1 to $maxElements {
+      & > div > :nth-child(#{$i}) {
+        opacity: 0;
+        animation-name: item-fade-in;
+        animation-duration: 250ms;
+        animation-fill-mode: forwards;
+        animation-delay: (100ms * ($i - 1));
+      }
+    }
+  }
+
+  @keyframes item-fade-in {
+    0% {
+      opacity: 0;
+      transform: translateY(-60px);
+    }
+
+    80% {
+      opacity: 0.6;
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0px);
+    }
+  }
+
+  & > * {
+    overflow: hidden;
+  }
+}

package/src/components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawer.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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, ForwardRefRenderFunction } from "react";
+import classes from "./DataGridDrawer.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  isExpanded: boolean;
+}
+
+const DataGridDrawerComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, isExpanded, ...rest }: Props,
+  ref
+) => {
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      className={`${classes["drawer"]} ${isExpanded ? classes["expanded"] : ""}`}
+    >
+      <div className={classes["wrapper"]}>{children}</div>
+    </div>
+  );
+};
+
+export const DataGridDrawer = React.forwardRef(DataGridDrawerComponent);

package/src/components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem.module.scss

@@ -0,0 +1,21 @@
+.item-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.item-title {
+  font-size: var(--font-size-data-grid);
+  line-height: var(--data-grid-line-height);
+  font-weight: 700;
+  margin: 0;
+}
+
+.item-description {
+  font-size: var(--font-size-data-grid);
+  line-height: var(--data-grid-line-height);
+  margin: 0;
+}
+
+.children-wrapper {
+  margin-top: 0.5rem;
+}

package/src/components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem.tsx

@@ -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 React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+import classes from "./DataGridDrawerItem.module.scss";
+import { Typography } from "../../../Typography/Typography";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  title?: string;
+  description?: string;
+}
+
+const DataGridDrawerItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, title, description, ...rest }: Props,
+  ref
+) => {
+  return (
+    <div {...rest} ref={ref} className={classes["item-wrapper"]}>
+      {title && (
+        <Typography className={classes["item-title"]} variant="body" tag="span">
+          {title}
+        </Typography>
+      )}
+      {description && (
+        <Typography className={classes["item-description"]} variant="body" tag="span">
+          {description}
+        </Typography>
+      )}
+      {children && <div className={classes["children-wrapper"]}> {children}</div>}
+    </div>
+  );
+};
+
+export const DataGridDrawerItem = React.forwardRef(DataGridDrawerItemComponent);

package/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.module.scss

@@ -0,0 +1,49 @@
+/*!
+ * 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.
+ */
+
+.row {
+  position: relative;
+  background-color: var(--data-grid-row-background-color);
+
+  &:not(.loading):hover {
+    background-color: var(--data-grid-row-hover-background-color);
+  }
+
+  @mixin borderAfter {
+    content: "";
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    border-bottom: 1px solid var(--light-grey-border);
+  }
+
+  &.border {
+    &:not(:last-child)::after {
+      @include borderAfter();
+    }
+  }
+
+  &.border-drawer {
+    &:not(:last-child):not(:nth-last-child(2))::after {
+      @include borderAfter();
+    }
+  }
+}
+
+.expand-button-cell {
+  padding: 0;
+}

package/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.tsx

@@ -0,0 +1,122 @@
+/*
+ * 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, useState, Fragment, ForwardRefRenderFunction } from "react";
+import { HeaderCell } from "../../datagrid.interfaces";
+import classes from "./DataGridRow.module.scss";
+import { IconButton } from "../../../Button/IconButton";
+import { Icon, Icons } from "../../../Icon/Icon";
+import { DataGridCell } from "../DataGridCell/DataGridCell";
+import { DataGridDrawer } from "../DataGridDrawer/DataGridDrawer";
+import { generateID } from "../../../../util/helper";
+
+export interface Props extends ComponentPropsWithRef<"tr"> {
+  headers?: HeaderCell[];
+  isLoading?: boolean;
+  spacing?: React.CSSProperties;
+  disableContextMenuColumn?: boolean;
+  expandableRowProps?: {
+    enableExpandableRow: boolean;
+    expandableRowContent: React.ReactNode;
+    expandButtonTitle?: string;
+    expandButtonId?: string;
+    drawerId?: string;
+  };
+}
+
+const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props> = (
+  {
+    children,
+    className,
+    headers,
+    isLoading,
+    spacing,
+    expandableRowProps,
+    disableContextMenuColumn,
+    ...rest
+  },
+  ref
+) => {
+  const {
+    enableExpandableRow = false,
+    expandButtonId = `ID-${generateID()}`,
+    expandButtonTitle = "Expand row",
+    drawerId = `ID-${generateID()}`,
+    expandableRowContent
+  } = expandableRowProps || {};
+  const [isRowExpanded, setIsRowExpanded] = useState(false);
+  const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {
+    if (child) {
+      const cellWithSpacing = React.cloneElement(child, {
+        spacing: spacing,
+        cellIndex: index,
+        columnLength: headers?.length,
+        disableContextMenuColumn
+      });
+
+      const visible = headers && headers.length > index ? !headers[index].hidden : true;
+      return visible && cellWithSpacing;
+    }
+    return null;
+  });
+
+  const classNames = [classes["row"]];
+  className && classNames.push(className);
+  enableExpandableRow
+    ? !isRowExpanded && classNames.push(classes["border-drawer"])
+    : classNames.push(classes["border"]);
+  isLoading && classNames.push(classes["loading"]);
+
+  return (
+    <Fragment>
+      <tr {...rest} ref={ref} className={classNames.join(" ")}>
+        {enableExpandableRow && (
+          <DataGridCell
+            className={classes["expand-button-cell"]}
+            onClick={() => setIsRowExpanded(!isRowExpanded)}
+            style={{ width: "1px" }}
+          >
+            <IconButton
+              id={expandButtonId}
+              title={expandButtonTitle}
+              aria-expanded={isRowExpanded}
+              aria-controls={drawerId}
+            >
+              <Icon size="0.75rem" icon={isRowExpanded ? Icons.ChevronUp : Icons.ChevronDown} />
+            </IconButton>
+          </DataGridCell>
+        )}
+        {visibleCells}
+      </tr>
+      {enableExpandableRow && (
+        <tr className={`${classes["row"]} ${isRowExpanded ? classes["border-drawer"] : ""}`}>
+          <td colSpan={visibleCells.length + 1}>
+            <DataGridDrawer
+              id={drawerId}
+              role="region"
+              aria-labelledby={expandButtonId}
+              isExpanded={isRowExpanded}
+            >
+              {expandableRowContent}
+            </DataGridDrawer>
+          </td>
+        </tr>
+      )}
+    </Fragment>
+  );
+};
+
+export const DataGridRow = React.forwardRef(DataGridRowComponent);

package/src/components/DataGrid/DataGridBody/__snapshots__/DataGridBody.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`DataGridBody should render renders without crashing 1`] = `
 [
   <tr
-    class="row"
+    class="row border"
   >
     <td
       class="cell "
@@ -67,7 +67,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
     </td>
   </tr>,
   <tr
-    class="row"
+    class="row border"
   >
     <td
       class="cell "
@@ -131,7 +131,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
     </td>
   </tr>,
   <tr
-    class="row"
+    class="row border"
   >
     <td
       class="cell "
@@ -195,7 +195,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
     </td>
   </tr>,
   <tr
-    class="row"
+    class="row border"
   >
     <td
       class="cell "

package/src/components/DataGrid/DataGridFilters/DataGridFilter.module.scss

@@ -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.
+ */
+
+@use "../../../mixins.module.scss";
+
+.filter-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
+  border-radius: 3.125rem;
+  background-color: var(--color-blue-grey100);
+
+  .filter-button {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.375rem;
+    background: none;
+    border: none;
+    padding: 0 0.25rem;
+    cursor: pointer;
+
+    &:only-child {
+      margin-right: -0.25rem;
+    }
+
+    &:hover {
+      border-radius: 0.125rem;
+      background-color: var(--color-black10);
+    }
+
+    &:active {
+      background-color: var(--color-blue-grey400);
+    }
+
+    @include mixins.focusVisibleOutline($outlineOffset: 0);
+  }
+
+  .caption {
+    font-size: var(--font-size-data-grid);
+    line-height: var(--data-grid-line-height);
+    margin: 0;
+    font-weight: 400;
+
+    &.bold {
+      font-weight: 600;
+    }
+  }
+
+  .remove-icon {
+    font-size: 0.6rem;
+  }
+}
+
+.column-select-option {
+  text-transform: capitalize;
+}
+
+.popover {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1rem 0.75rem;
+  min-width: 40rem;
+
+  .controls {
+    width: 100%;
+    display: flex;
+    gap: 1rem;
+
+    & > *:last-child,
+    *:first-child {
+      flex-grow: 1.8;
+      flex-shrink: 0;
+      margin-top: 0;
+    }
+
+    & > *:nth-child(2) {
+      flex-grow: 1;
+      flex-shrink: 0;
+      margin-top: 0;
+    }
+  }
+
+  .actions {
+    display: flex;
+    gap: 1rem;
+  }
+}