@loadsmart/loadsmart-ui 5.3.1 → 5.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.3.1",
+  "version": "5.5.0",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [
@@ -103,7 +103,6 @@
     "@testing-library/react-hooks": "5.1.2",
     "@testing-library/user-event": "13.1.9",
     "@types/chance": "1.1.1",
-    "@types/enzyme": "3.10.8",
     "@types/jest": "26.0.23",
     "@types/lodash.debounce": "4.0.6",
     "@types/lodash.flatten": "4.4.6",
@@ -117,7 +116,6 @@
     "@types/styled-components": "5.1.9",
     "@typescript-eslint/eslint-plugin": "4.22.1",
     "@typescript-eslint/parser": "4.22.1",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.1",
     "@zerollup/ts-transform-paths": "1.7.18",
     "autoprefixer": "9",
     "babel-jest": "26.6.3",
@@ -130,7 +128,6 @@
     "commitizen": "4.2.4",
     "cross-env": "7.0.3",
     "cz-conventional-changelog": "3.3.0",
-    "enzyme": "3.11.0",
     "eslint": "7.26.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-jest-dom": "3.8.1",

package/src/components/Breadcrumbs/Breadbrumbs.test.tsx

@@ -14,7 +14,7 @@ describe('<Breadcrumbs />', () => {
 
     setup({ entries })
 
-    expect(screen.getByTestId('breadcrumbs')).not.toBeEmptyDOMElement()
+    expect(screen.getByRole('list')).not.toBeEmptyDOMElement()
 
     for (let i = 0; i < entries.length; i++) {
       screen.getByText(entries[i].label)
@@ -26,7 +26,7 @@ describe('<Breadcrumbs />', () => {
 
     setup({ entries })
 
-    expect(screen.getByTestId('breadcrumbs')).toBeEmptyDOMElement()
+    expect(screen.getByRole('list')).toBeEmptyDOMElement()
   })
 
   it('renders active breadcrumb correctly', () => {
@@ -36,13 +36,15 @@ describe('<Breadcrumbs />', () => {
       ({ index }) => ({
         label: generator.word(),
         active: index === activeIndex,
+        url: '/',
       }),
       9
     )
 
     setup({ entries })
 
-    expect(screen.getAllByTestId('breadcrumb')[activeIndex]).toHaveClass('is-active')
+    expect(screen.getAllByRole('listitem')[activeIndex]).toHaveClass('is-active')
+    expect(screen.getAllByRole('link')[activeIndex]).toHaveAttribute('aria-current', 'page')
   })
 
   it('render non-url and non-onClick breadcrumb correctly', () => {
@@ -114,6 +116,10 @@ describe('<Breadcrumbs />', () => {
 
     setup({ entries, onBack: jest.fn() })
 
-    expect(screen.getByTestId('breadcrumbs-back')).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', {
+        name: 'Back to previous page',
+      })
+    ).toBeInTheDocument()
   })
 })

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -47,22 +47,30 @@ const StyledLi = styled.li<BreadcrumbProps>`
     position: absolute;
     left: calc(100% + 14px);
 
-    font-weight: normal;
+    font-weight: ${token('font-weight-bold')};
     font-size: ${token('breadcrumbs-font-size')};
 
+    line-height: ${token('breadcrumbs-font-height')};
+
     content: '/';
   }
 `
 
 function getWrappedLabel(props: Partial<BreadcrumbProps>) {
-  const { url, label, onClick, ...rest } = props
+  const { url, label, onClick, active, ...rest } = props
 
   if (isNil(url) && !onClick) {
     return label
   }
 
   return (
-    <StyledLink href={url} target="_self" onClick={onClick} {...rest}>
+    <StyledLink
+      href={url}
+      target="_self"
+      onClick={onClick}
+      {...(active && {'aria-current': 'page'})}
+      {...rest}
+    >
       {label}
     </StyledLink>
   )
@@ -76,7 +84,7 @@ function Breadcrumb({ active, label, url, ...rest }: BreadcrumbProps): JSX.Eleme
       data-testid="breadcrumb"
       active={active}
     >
-      {getWrappedLabel({ label, url, ...rest })}
+      {getWrappedLabel({ label, url, active, ...rest })}
     </StyledLi>
   )
 }

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -12,12 +12,12 @@ export interface BreadcrumbsProps {
   onBack?: (e: MouseEvent<HTMLButtonElement>) => void
 }
 
-const StyledWrapper = styled.div`
+const StyledWrapper = styled.nav`
   display: flex;
   flex-direction: row;
 `
 
-const StyledUl = styled.ul`
+const StyledOl = styled.ol`
   display: flex;
   flex-direction: row;
   margin: 0;
@@ -31,18 +31,23 @@ const StyledBackButton = styled(BackButton)`
   margin: 0 ${token('space-m')} 0 0;
 `
 
-function Breadcrumbs({ entries, onBack, disabled, ...others }: BreadcrumbsProps): JSX.Element {
+function Breadcrumbs({ entries = [], onBack, disabled, ...others }: BreadcrumbsProps): JSX.Element {
   return (
-    <StyledWrapper {...others}>
+    <StyledWrapper aria-label="Breadcrumb" {...others}>
       {onBack && (
-        <StyledBackButton data-testid="breadcrumbs-back" onClick={onBack} disabled={disabled} />
+        <StyledBackButton
+          data-testid="breadcrumbs-back"
+          onClick={onBack}
+          disabled={disabled}
+          aria-label="Back to previous page"
+        />
       )}
 
-      <StyledUl data-testid="breadcrumbs">
-        {(entries || []).map((entry: BreadcrumbProps) => {
+      <StyledOl data-testid="breadcrumbs">
+        {entries.map((entry: BreadcrumbProps) => {
           return <Breadcrumb key={entry.label} {...entry} />
         })}
-      </StyledUl>
+      </StyledOl>
     </StyledWrapper>
   )
 }

package/src/components/Table/Table.stories.tsx

@@ -508,3 +508,64 @@ This function is passed a boolean \`selected\` and a function \`toggle\`.
     },
   },
 }
+
+export function WithExpandableRow(args: TableProps): JSX.Element {
+  const leading = (expanded: boolean) => {
+    if (expanded) {
+      return <div style={{ fontWeight: 'bold' }}>Open</div>
+    }
+    return <div style={{ fontWeight: 'bold' }}>Closed</div>
+  }
+
+  return (
+    <div className="p-4 bg-neutral-white">
+      <Table {...args}>
+        <Table.Head>
+          <Table.Row>
+            <Table.Expandable.HeadCell />
+            <Table.Expandable.HeadCell>Reference</Table.Expandable.HeadCell>
+            <Table.Expandable.HeadCell>Product</Table.Expandable.HeadCell>
+            <Table.Expandable.HeadCell>Price</Table.Expandable.HeadCell>
+          </Table.Row>
+        </Table.Head>
+
+        <Table.Body>
+          <Table.Expandable.Row
+            index={0}
+            leading={leading}
+            expandableContent={<div>Forced expanded with custom leading</div>}
+            expanded
+          >
+            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
+            <Table.Expandable.Cell>Body 1</Table.Expandable.Cell>
+            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row
+            index={1}
+            leading={leading}
+            expandableContent={<div>Initial expanded row with custom leading</div>}
+            initialExpanded
+          >
+            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
+            <Table.Expandable.Cell>Body 2</Table.Expandable.Cell>
+            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row index={2} expandableContent={<div>Expandable row</div>}>
+            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
+            <Table.Expandable.Cell>Body 3</Table.Expandable.Cell>
+            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row index={3} expanded>
+            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
+            <Table.Expandable.Cell>Body 5</Table.Expandable.Cell>
+            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
+          </Table.Expandable.Row>
+        </Table.Body>
+      </Table>
+    </div>
+  )
+}
+
+WithExpandableRow.args = {
+  scale: 'default',
+}

package/src/components/Table/Table.test.tsx

@@ -182,4 +182,132 @@ describe('<Table />', () => {
     expect(checkboxes[0]).toBeChecked()
     expect(checkboxes[1]).toBeChecked()
   })
+
+  it('Table.Expandable renders correclty', () => {
+    const onExpandedChange = jest.fn()
+
+    const expandableTable = ({ controlledExpanded4 }: { controlledExpanded4: boolean }) => (
+      <React.Fragment>
+        <Table.Head>
+          <Table.Row>
+            <Table.Expandable.HeadCell />
+            <Table.HeadCell># Number</Table.HeadCell>
+            <Table.HeadCell>Company</Table.HeadCell>
+            <Table.HeadCell alignment="right">Price $</Table.HeadCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Expandable.Row
+            index={0}
+            expandableContent={<div>This is an expandable content on index 0</div>}
+            expanded
+          >
+            <Table.Cell format="number">#000000-1</Table.Cell>
+            <Table.Cell>Modal X 21</Table.Cell>
+            <Table.Cell format="currency" alignment="right">
+              $9876,50
+            </Table.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row index={1}>
+            <Table.Cell format="number">#000000-2</Table.Cell>
+            <Table.Cell>Modal X 21</Table.Cell>
+            <Table.Cell format="currency" alignment="right">
+              $9876,50
+            </Table.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row
+            index={2}
+            expandableContent={<div>This is an expandable content on index 2</div>}
+            leading={(expanded) => (expanded ? 'open' : 'closed')}
+            onExpandedChange={onExpandedChange}
+          >
+            <Table.Cell format="number">#000000-3</Table.Cell>
+            <Table.Cell>Modal X 21</Table.Cell>
+            <Table.Cell format="currency" alignment="right">
+              $9876,50
+            </Table.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row
+            index={3}
+            expandableContent={<div>This is an expandable content on index 3</div>}
+            expanded={controlledExpanded4}
+          >
+            <Table.Cell format="number">#000000-4</Table.Cell>
+            <Table.Cell>Modal X 21</Table.Cell>
+            <Table.Cell format="currency" alignment="right">
+              $9876,50
+            </Table.Cell>
+          </Table.Expandable.Row>
+        </Table.Body>
+      </React.Fragment>
+    )
+    const props = {
+      children: expandableTable({ controlledExpanded4: true }),
+    }
+
+    const { rerender } = setup(props)
+
+    // Check if table is displaying 3 rows
+    const row1 = screen.getByText(/000000-1/i).closest('tr')
+    expect(row1).toBeInTheDocument()
+
+    const row2 = screen.getByText(/000000-2/i).closest('tr')
+    expect(row2).toBeInTheDocument()
+
+    const row3 = screen.getByText(/000000-3/i).closest('tr')
+    expect(row3).toBeInTheDocument()
+
+    const row4 = screen.getByText(/000000-4/i).closest('tr')
+    expect(row4).toBeInTheDocument()
+
+    // Row 1 should be forced to be expanded
+    expect(screen.getByText(/This is an expandable content on index 0/i)).toBeInTheDocument()
+
+    // Clicking row1
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    user.click(row1!)
+
+    // Row 1 can't be collapsed
+    expect(screen.getByText(/This is an expandable content on index 0/i)).toBeInTheDocument()
+
+    // Checking if Row 3 has custom trailing (row is collapsed)
+    expect(screen.getByText(/close/i)).toBeInTheDocument()
+
+    // Expanding row3
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    user.click(row3!)
+    expect(screen.getByText(/This is an expandable content on index 2/i)).toBeInTheDocument()
+
+    // Check if onExpandedChange is triggered
+    expect(onExpandedChange).toHaveBeenCalledTimes(1)
+    expect(onExpandedChange).toHaveBeenCalledWith(true)
+
+    // Checking if Row 3 has custom trailing (row is expanded)
+    expect(screen.getByText(/open/i)).toBeInTheDocument()
+
+    // Collapsing row3
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    user.click(row3!)
+    expect(screen.queryByText(/This is an expandable content on index 2/i)).not.toBeInTheDocument()
+
+    // Check if onExpandedChange is triggered
+    expect(onExpandedChange).toHaveBeenCalledTimes(2)
+    expect(onExpandedChange).toHaveBeenCalledWith(false)
+
+    // Checking controlled expanded (row4), it's opened by default
+    expect(screen.queryByText(/This is an expandable content on index 4/i)).not.toBeInTheDocument()
+
+    // Clicking on row4 shouldn't change the open state because it's controlled externally
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    user.click(row4!)
+
+    // row4 should be still opened
+    expect(screen.queryByText(/This is an expandable content on index 4/i)).not.toBeInTheDocument()
+
+    // Re-render to change controlled state
+    rerender(expandableTable({ controlledExpanded4: false }))
+
+    // row4 should be collapsed because externally controlled state is changed
+    expect(screen.queryByText(/This is an expandable content on index 4/i)).not.toBeInTheDocument()
+  })
 })

package/src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import React, { Children, Fragment, isValidElement, useEffect } from 'react'
+import React, { Children, Fragment, isValidElement, useCallback, useEffect, useState } from 'react'
 import styled, { css } from 'styled-components'
 import type { ReactNode } from 'react'
 import { isFunction } from '@loadsmart/utils-function'
@@ -35,6 +35,7 @@ import type {
   SelectionCellProps,
   TablePickerItemProps,
   TablePickerProps,
+  ExpandableTableRowProps,
 } from './Table.types'
 
 const StyledTableBody = styled.tbody`
@@ -104,27 +105,31 @@ const StyledTableHead = styled.thead`
   }
 `
 
-const StyledTableRow = styled.tr<{ selected?: boolean }>`
+const BaseStyledTableRow = styled.tr`
   ${StyledTableHead} > & {
     height: 36px;
 
     background-color: ${token('color-neutral-white')};
   }
 
+  ${StyledTableBody} > & {
+    ${hoverable`
+    outline: 1px solid ${token('color-accent')};
+  `}
+
+    ${focusable`
+    box-shadow: inset ${token('shadow-glow-primary')};
+  `}
+  }
+`
+
+const StyledTableRow = styled(BaseStyledTableRow)<{ selected?: boolean }>`
   background-color: ${conditional({
     'table-row-selected-color': whenProps({ selected: true }),
     'color-transparent': whenProps({ selected: false }),
   })};
 
   ${StyledTableBody} > & {
-    ${hoverable`
-      outline: 1px solid ${token('color-accent')};
-    `}
-
-    ${focusable`
-      box-shadow: inset ${token('shadow-glow-primary')};
-    `}
-
     &:nth-child(odd) ${StyledTableCell} {
       background: ${token('table-row-variant-color')};
     }
@@ -135,6 +140,13 @@ const StyledTableRow = styled.tr<{ selected?: boolean }>`
   }
 `
 
+const StyledExpandableTableRow = styled(BaseStyledTableRow)<{ $even: boolean }>`
+  background-color: ${conditional({
+    'table-row-variant-color': whenProps({ $even: true }),
+    'color-transparent': whenProps({ $even: false }),
+  })};
+`
+
 const StyledTable = styled.table<{ scale?: string }>`
   width: 100%;
 
@@ -144,7 +156,8 @@ const StyledTable = styled.table<{ scale?: string }>`
 
   border-collapse: collapse;
 
-  ${StyledTableBody} ${StyledTableRow} {
+  ${StyledTableBody} ${StyledTableRow}, 
+  ${StyledTableBody} ${StyledExpandableTableRow} {
     height: ${conditional({
       '24px': whenProps({ scale: 'small' }),
       '48px': whenProps({ scale: 'default' }),
@@ -153,7 +166,9 @@ const StyledTable = styled.table<{ scale?: string }>`
   }
 
   ${StyledTableBody} ${StyledTableRow} ${StyledTableCell},
-  ${StyledTableHead} ${StyledTableRow} ${StyledTableHeadCell} {
+  ${StyledTableHead} ${StyledTableRow} ${StyledTableHeadCell},
+  ${StyledTableBody} ${StyledExpandableTableRow} ${StyledTableCell},
+  ${StyledTableHead} ${StyledExpandableTableRow} ${StyledTableHeadCell} {
     padding: ${conditional({
       'space-xs': whenProps({ scale: 'small' }),
       'space-s': whenProps({ scale: ['default', 'large'] }),
@@ -166,6 +181,12 @@ const StyledTable = styled.table<{ scale?: string }>`
   }
 `
 
+const RotatableIcon = styled(Icon)<{ $rotate: boolean }>`
+  ${conditional({
+    'transform: rotate(90deg);': whenProps({ $rotate: true }),
+  })}
+`
+
 function Table<T>({
   children,
   selection,
@@ -269,6 +290,14 @@ function SelectionHeadCell<T>(props: SelectionCellProps<T>): JSX.Element {
   )
 }
 
+function ExpandableHeadCell(props: TableCellProps): JSX.Element {
+  return <TableHeadCell {...props} />
+}
+
+function ExpandableCell(props: TableCellProps): JSX.Element {
+  return <TableCell {...props} />
+}
+
 function TableRow({ children, ...others }: TableRowProps): JSX.Element {
   const selected = useIsRowSelected(children)
 
@@ -279,6 +308,49 @@ function TableRow({ children, ...others }: TableRowProps): JSX.Element {
   )
 }
 
+function ExpandableTableRow({
+  index,
+  expandableContent,
+  expanded,
+  leading: propsLeading,
+  children,
+  onExpandedChange,
+  initialExpanded = false,
+  ...others
+}: ExpandableTableRowProps): JSX.Element {
+  const [openState, setOpenState] = useState(initialExpanded)
+
+  const open = expanded ?? openState
+  const colSpan = Array.isArray(children) ? children.length + 1 : 1
+  const isEven = index % 2 === 0
+
+  let leading: ReactNode = <RotatableIcon name="caret-right" $rotate={open} />
+  if (propsLeading) {
+    leading = isFunction(propsLeading) ? propsLeading(open) : propsLeading
+  }
+
+  function toggle() {
+    if (!expandableContent) return
+
+    onExpandedChange?.(!open)
+    setOpenState(!open)
+  }
+
+  return (
+    <>
+      <StyledExpandableTableRow {...others} onClick={toggle} $even={isEven}>
+        <ExpandableCell>{expandableContent && leading}</ExpandableCell>
+        {children}
+      </StyledExpandableTableRow>
+      {open && expandableContent && (
+        <StyledExpandableTableRow $even={isEven}>
+          <StyledTableCell colSpan={colSpan}>{expandableContent}</StyledTableCell>
+        </StyledExpandableTableRow>
+      )}
+    </>
+  )
+}
+
 function TableHeadCell({
   alignment = 'left',
   children,
@@ -436,6 +508,11 @@ Table.Selection = {
   Cell: SelectionCell,
   HeadCell: SelectionHeadCell,
 }
+Table.Expandable = {
+  HeadCell: ExpandableHeadCell,
+  Cell: ExpandableCell,
+  Row: ExpandableTableRow,
+}
 Table.SortHandle = TableSortHandle
 TablePicker.Item = TablePickerItem
 Table.Picker = TablePicker

package/src/components/Table/Table.types.ts

@@ -35,6 +35,15 @@ export interface TableSectionProps extends HTMLAttributes<HTMLTableSectionElemen
 
 export type TableRowProps = HTMLAttributes<HTMLTableRowElement>
 
+export type ExpandableTableRowProps = TableRowProps & {
+  index: number
+  expandableContent?: ReactNode
+  leading?: ReactNode | ((expanded: boolean) => ReactNode)
+  initialExpanded?: boolean
+  expanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
+}
+
 export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
   alignment?: 'left' | 'right'
   format?: 'default' | 'number' | 'currency'

package/src/components/TablePagination/TablePagination.stories.tsx

@@ -15,6 +15,11 @@ export const Playground: Story<TablePaginationProps> = (args: TablePaginationPro
   const [page, setPage] = useState(args.page)
   const [rowsPerPage, setRowsPerPage] = useState(args.rowsPerPage)
 
+  const handleRowsPerPageChange = (rowsPerPage: number) => {
+    setRowsPerPage(rowsPerPage)
+    setPage(0)
+  }
+
   return (
     <Layout.Group>
       <TablePagination
@@ -22,7 +27,7 @@ export const Playground: Story<TablePaginationProps> = (args: TablePaginationPro
         onPageChange={(page) => setPage(page)}
         page={page}
         rowsPerPage={rowsPerPage}
-        onRowsPerPageChange={setRowsPerPage}
+        onRowsPerPageChange={handleRowsPerPageChange}
       />
     </Layout.Group>
   )

package/src/components/TablePagination/TablePagination.test.tsx

@@ -70,7 +70,6 @@ describe('TablePagination', () => {
     userEvent.click(screen.getByText(/50 per page/i))
 
     expect(onRowsPerPageChange).toHaveBeenLastCalledWith(50)
-    expect(onPageChange).toHaveBeenLastCalledWith(0)
   })
 
   it('hides some actions for the compact variant', () => {

package/src/components/TablePagination/TablePagination.tsx

@@ -20,17 +20,12 @@ function TablePagination(props: TablePaginationProps): JSX.Element {
     ...rest
   } = props
 
-  const handleRowsPerPageChange = (selectedOption: number) => {
-    onRowsPerPageChange(selectedOption)
-    onPageChange(0)
-  }
-
   return (
     <Layout.Group space="xl" align="center" justify="space-between" {...rest}>
       <RowsPerPage
         page={page}
         count={count}
-        onRowsPerPageChange={handleRowsPerPageChange}
+        onRowsPerPageChange={onRowsPerPageChange}
         rowsPerPage={rowsPerPage}
         rowsPerPageOptions={rowsPerPageOptions}
         labelRowsPerPage={labelRowsPerPage}

package/src/components/TablePagination/TablePagination.types.ts

@@ -21,6 +21,9 @@ export interface TablePaginationProps extends GroupProps {
   onPageChange: (page: number) => void
   /**
    * Callback fired when the number of rows per page is changed.
+   *
+   * Note: Resetting the page to zero after the number of rows per page is changed isn't part of
+   * the component and has to be implemented where it's necessary
    */
   onRowsPerPageChange: (rowsPerPage: number) => void
   /**