uikit-react-public 0.36.0 → 0.37.0

package/lib/components/Table/subcomponents/Row.tsx

@@ -1,47 +1,236 @@
+import { Children, cloneElement, isValidElement, useState } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
+import { useTableContext } from '../Table.context';
+import Icon from '../../Icon/Icon';
+import type { TableCellProps } from './Cell/Cell';
+import type { NormalizedTableMobileRole } from '../Table.types';
 
 export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   selected?: boolean;
+  mobileExpanded?: boolean;
+  defaultMobileExpanded?: boolean;
+  mobileCollapsible?: boolean;
+  mobileDetailsLabel?: string;
+  mobileExpandLabel?: string;
+  mobileCollapseLabel?: string;
+  onMobileExpandedChange?: (expanded: boolean) => void;
 }
 
 const NAME = 'ucl-uikit-table__row';
 
+const isMobileBodyRole = (mobileRole?: NormalizedTableMobileRole) =>
+  !mobileRole || mobileRole === 'field';
+
+const isMobileRole = (
+  mobileRole: NormalizedTableMobileRole | undefined,
+  expectedMobileRole: NormalizedTableMobileRole
+) => mobileRole === expectedMobileRole;
+
 const Row = ({
   selected = false,
+  mobileExpanded,
+  defaultMobileExpanded = true,
+  mobileCollapsible = true,
+  mobileDetailsLabel = 'Details',
+  mobileExpandLabel = 'Show details',
+  mobileCollapseLabel = 'Hide details',
+  onMobileExpandedChange,
   className,
   children,
   ...props
 }: TableRowProps) => {
   const [theme] = useTheme();
+  const { columns } = useTableContext();
+  const [uncontrolledMobileExpanded, setUncontrolledMobileExpanded] = useState(
+    defaultMobileExpanded
+  );
+
+  const isMobileExpanded =
+    mobileExpanded === undefined ? uncontrolledMobileExpanded : mobileExpanded;
+
+  const hasMobileBodyFields = Children.toArray(children).some(
+    (child, index) =>
+      isValidElement(child) && isMobileBodyRole(columns[index]?.mobileRole)
+  );
+  const hasMobileSelection = Children.toArray(children).some(
+    (child, index) =>
+      isValidElement(child) &&
+      isMobileRole(columns[index]?.mobileRole, 'selection')
+  );
+  const hasMobilePrimaryMeta = Children.toArray(children).some(
+    (child, index) =>
+      isValidElement(child) &&
+      isMobileRole(columns[index]?.mobileRole, 'primaryMeta')
+  );
+  const hasMobileContextMenu = Children.toArray(children).some(
+    (child, index) =>
+      isValidElement(child) &&
+      isMobileRole(columns[index]?.mobileRole, 'contextMenu')
+  );
+  const firstMobileBodyFieldIndex = Children.toArray(children).findIndex(
+    (child, index) =>
+      isValidElement(child) && isMobileBodyRole(columns[index]?.mobileRole)
+  );
+
+  const canMobileCollapse = mobileCollapsible && hasMobileBodyFields;
+  const effectiveMobileExpanded = !canMobileCollapse || isMobileExpanded;
+
+  const handleMobileExpandedChange = () => {
+    const nextMobileExpanded = !isMobileExpanded;
+
+    if (mobileExpanded === undefined)
+      setUncontrolledMobileExpanded(nextMobileExpanded);
+
+    onMobileExpandedChange?.(nextMobileExpanded);
+  };
 
   const baseStyle = css`
     height: 40px;
-    border-bottom: 1px solid ${theme.color.neutral.grey20};
+    border-bottom: 1px solid ${theme.colour.border.default};
 
     &:hover {
-      background-color: ${theme.color.neutral.grey5};
+      background-color: ${theme.colour.surface.secondary};
+    }
+
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: start;
+      column-gap: ${theme.padding.p16};
+      row-gap: 0;
+      height: auto;
+      padding: ${theme.padding.p16};
+      margin-bottom: ${theme.margin.m16};
+      border: ${theme.border.b1} solid ${theme.colour.border.default};
+      border-radius: ${theme.radius.r4};
+      background-color: ${theme.colour.surface.default};
+
+      &:hover {
+        background-color: ${theme.colour.surface.default};
+      }
+
+      &[data-mobile-expanded='false'] > [data-mobile-role='field'] {
+        display: none;
+      }
+
+      &[data-mobile-expanded='false'] > [data-mobile-role='primaryAction'] {
+        display: none;
+      }
     }
   `;
 
   const highlightedStyle = css`
-    background-color: ${theme.color.interaction.blue5};
+    background-color: ${theme.colour.surface.brandSecondary};
 
     &:hover {
-      background-color: ${theme.color.interaction.blue5};
+      background-color: ${theme.colour.surface.brandSecondary};
+    }
+
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      background-color: ${theme.colour.surface.brandSecondary};
+      border-color: ${theme.colour.border.brandSubtle};
+
+      &:hover {
+        background-color: ${theme.colour.surface.brandSecondary};
+      }
+    }
+  `;
+
+  const mobileContextMenuGridStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      grid-template-columns: auto minmax(0, 1fr) auto auto;
     }
   `;
 
-  const style = cx(baseStyle, selected && highlightedStyle, className, NAME);
+  const style = cx(
+    baseStyle,
+    selected && highlightedStyle,
+    hasMobileContextMenu && mobileContextMenuGridStyle,
+    className,
+    NAME
+  );
+
+  const mobileDetailsCellStyle = css`
+    display: block;
+    grid-column: 1 / -1;
+    order: 10;
+    margin-top: ${theme.margin.m8};
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      display: none;
+    }
+  `;
+
+  const mobileDetailsButtonStyle = css`
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: ${theme.height.h24};
+    color: ${theme.colour.text.secondary};
+    font-family: ${theme.typography.body.sm.fontFamily};
+    font-feature-settings: ${theme.typography.body.sm.fontSettings};
+    font-size: ${theme.typography.body.sm.fontSize}px;
+    font-weight: ${theme.typography.body.sm.fontWeight};
+    line-height: ${theme.typography.body.sm.lineHeight}%;
+    cursor: pointer;
+
+    &:focus-visible {
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  let columnIndex = -1;
+  const mobileChildren = Children.map(children, (child) => {
+    if (!isValidElement<TableCellProps>(child)) return child;
+
+    columnIndex += 1;
+
+    return cloneElement(child, {
+      __mobileColumnIndex: columnIndex,
+      __mobileHasSelection: hasMobileSelection,
+      __mobileHasPrimaryMeta: hasMobilePrimaryMeta,
+      __mobileIsFirstBodyField: columnIndex === firstMobileBodyFieldIndex,
+    });
+  });
+
+  const mobileDetailsAriaLabel = isMobileExpanded
+    ? mobileCollapseLabel
+    : mobileExpandLabel;
 
   return (
     <tr
       className={style}
       data-testid={NAME}
       aria-selected={selected}
+      data-mobile-expanded={effectiveMobileExpanded}
       {...props}
     >
-      {children}
+      {mobileChildren}
+      {canMobileCollapse && (
+        <td
+          className={mobileDetailsCellStyle}
+          data-mobile-role='details'
+        >
+          <button
+            type='button'
+            className={mobileDetailsButtonStyle}
+            aria-label={mobileDetailsAriaLabel}
+            aria-expanded={isMobileExpanded}
+            onClick={handleMobileExpandedChange}
+          >
+            <span>{mobileDetailsLabel}</span>
+            {isMobileExpanded ? (
+              <Icon.ChevronUp size={20} />
+            ) : (
+              <Icon.ChevronDown size={20} />
+            )}
+          </button>
+        </td>
+      )}
     </tr>
   );
 };

package/lib/components/Table/subcomponents/SortIcon.tsx

@@ -11,12 +11,12 @@ const SortingIcon = ({ sortOrder, size = 16 }: SortingIconProps) => {
 
   const leftArrowColour =
     sortOrder === 'asc'
-      ? theme.color.neutral.black
-      : theme.color.neutral.grey20;
+      ? theme.colour.icon.default
+      : theme.colour.icon.disabled;
   const rightArrowColour =
     sortOrder === 'desc'
-      ? theme.color.neutral.black
-      : theme.color.neutral.grey20;
+      ? theme.colour.icon.default
+      : theme.colour.icon.disabled;
 
   return (
     <svg

package/lib/theme/__tests__/useTheme.test.tsx

@@ -100,14 +100,14 @@ describe('useTheme', () => {
     );
 
     expect(document.body).toHaveStyle({
-      backgroundColor: lightTheme.colour.bg.brand,
+      backgroundColor: lightTheme.colour.bg.default,
       color: lightTheme.colour.text.default,
     });
 
     fireEvent.click(screen.getByTestId('set-dark'));
 
     expect(document.body).toHaveStyle({
-      backgroundColor: darkTheme.colour.bg.brand,
+      backgroundColor: darkTheme.colour.bg.default,
       color: darkTheme.colour.text.default,
     });
   });

package/lib/theme/useTheme.tsx

@@ -96,7 +96,7 @@ const globalThemeStyles = (activeTheme: ThemeType) => css`
   html,
   body,
   #root {
-    background-color: ${activeTheme.colour.bg.brand};
+    background-color: ${activeTheme.colour.bg.default};
     color: ${activeTheme.colour.text.default};
   }
 `;

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",