Merge pull request #142 from icgc-argo/rc/4.0.0

Rc/4.0.0
icgc-argo · Jan 18, 2024 · 86109d0 · 86109d0
2 parents d033ffb + f6390a0
commit 86109d0
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 84 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@icgc-argo/uikit",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "description": "ARGO UI component library",
   "main": "index.js",
   "types": "index.d.ts",
@@ -87,8 +87,8 @@
     "react-dom": "^18.2.0",
     "react-json-view": "^1.21.3",
     "ts-node-dev": "^1.1.8",
-    "ttypescript": "^1.5.13",
-    "typescript": "<4.8",
+    "ttypescript": "^1.5.15",
+    "typescript": "4.8",
     "webpack": "^5.75.0"
   },
   "prettier": {

diff --git a/src/Footer/index.tsx b/src/Footer/index.tsx
@@ -19,7 +19,7 @@
 
 /** @jsxImportSource @emotion/react */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '../ThemeProvider';
 import { Icon } from '../Icon';
@@ -30,6 +30,10 @@ import { Link as A } from '../Link';
 
 const Container = styled('footer')`
   ${({ theme }) => css(theme.typography.paragraph as any)};
+  background: #fff;
+  z-index: 1;
+  padding: 0 24px;
+  border-top: 1px solid ${({ theme }) => theme.colors.grey_2};
   font-size: 11px;
   min-height: 58px;
 
@@ -38,13 +42,33 @@ const Container = styled('footer')`
   }
 `;
 
+type FooterLink = { displayName: string } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+type FooterProps = {
+  subtitle?: string;
+  links?: FooterLink[];
+  className?: string;
+  Logo?: ReactNode;
+  otherProps?: any;
+};
+
+const DefaultLogo = () => (
+  <a href="https://www.oicr.on.ca/" target="_blank">
+    <img
+      alt="Logo for Ontario Institute for Cancer Research"
+      src={icgcLogo}
+      style={{ height: '42px' }}
+    />
+  </a>
+);
+
 export const Footer = ({
-  version = '[version]',
-  apiVersion = null,
+  subtitle = '',
   links = [],
   className = '',
+  Logo = <DefaultLogo />,
   ...otherProps
-}) => (
+}: FooterProps) => (
   <Container className={`footer ${className}`} {...otherProps}>
     <Row
       css={css`
@@ -60,10 +84,14 @@ export const Footer = ({
           align-items: center;
         `}
       >
-        © {new Date().getFullYear()} ICGC ARGO. All rights reserved.
-        <br />
-        ICGC ARGO Data Platform {version} {apiVersion && `- API ${apiVersion}`}
+        {/** copyright and ARGO logo */}
+        <div>
+          © {new Date().getFullYear()} ICGC ARGO. All rights reserved.
+          <br />
+          {subtitle}
+        </div>
       </Col>
+
       <Col
         md={7}
         css={css`
@@ -74,6 +102,7 @@ export const Footer = ({
           padding-left: 22px;
         `}
       >
+        {/** nav links */}
         <div>
           {links.map(({ displayName, href, target }, idx) => {
             if (idx !== links.length - 1) {
@@ -95,23 +124,8 @@ export const Footer = ({
           })}
         </div>
 
-        <div
-          css={css`
-            display: flex;
-            align-items: center;
-            flex-direction: row-reverse;
-            line-height: 0;
-            margin-left: 16px;
-          `}
-        >
-          <a href="https://www.oicr.on.ca/" target="_blank">
-            <img
-              alt="Ontario Institute for Cancer Research"
-              src={icgcLogo}
-              style={{ height: '42px' }}
-            />
-          </a>
-        </div>
+        {/** right side logo eg. OICR, RDPC */}
+        <div>{Logo}</div>
       </Col>
     </Row>
   </Container>

diff --git a/src/Table/index.tsx b/src/Table/index.tsx
@@ -122,7 +122,11 @@ export const Table = <TData extends object>({
 
   return (
     <TableContainer className={className}>
-      <TableContainerInner withFilters={withFilters} withTabs={withTabs}>
+      <TableContainerInner
+        withFilters={withFilters}
+        withTabs={withTabs}
+        withSideBorders={withSideBorders}
+      >
         <TableStyled withSideBorders={withSideBorders}>
           {withHeaders && (
             <TableHead>
@@ -131,48 +135,54 @@ export const Table = <TData extends object>({
                   {headerGroup.headers.map((header) => {
                     const canSort = enableSorting && header.column.getCanSort();
                     const isCustomHeader = header.column.columnDef.meta?.customHeader;
+                    const tableHeaderProps = {
+                      key: header.id,
+                      colSpan: header.colSpan,
+                      width: header.getSize(),
+                      sorted: header.column.getIsSorted(),
+                      getSortingHandler: () => header.column.getToggleSortingHandler(),
+                      canSort,
+                    };
+
                     const headerContents = header.isPlaceholder
                       ? null
-                      : flexRender(header.column.columnDef.header, header.getContext());
+                      : flexRender(header.column.columnDef.header, {
+                          ...tableHeaderProps,
+                          ...header.getContext(),
+                        });
 
                     const {
                       activeTab = '',
                       handleTabs = () => {},
                       tabs = [],
                     } = header.column.columnDef.meta?.columnTabs || {};
 
-                    return (
-                      <TableHeader
-                        key={header.id}
-                        colSpan={header.colSpan}
-                        width={header.getSize()}
-                        sorted={header.column.getIsSorted()}
-                        canSort={canSort}
-                      >
-                        {!!tabs.length && (
-                          <TableTabs activeTab={activeTab} handleTabs={handleTabs} tabs={tabs} />
-                        )}
-                        <SortButton
-                          canSort={canSort}
-                          onClick={header.column.getToggleSortingHandler()}
-                        >
-                          {isCustomHeader ? (
-                            headerContents
-                          ) : (
+                    if (isCustomHeader) {
+                      return headerContents;
+                    } else {
+                      return (
+                        <TableHeader {...tableHeaderProps}>
+                          {!!tabs.length && (
+                            <TableTabs activeTab={activeTab} handleTabs={handleTabs} tabs={tabs} />
+                          )}
+                          <SortButton
+                            canSort={canSort}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
                             <TableHeaderWrapper>{headerContents}</TableHeaderWrapper>
+                          </SortButton>
+                          {header.column.getCanResize() && (
+                            <Resizer
+                              onMouseDown={header.getResizeHandler()}
+                              onTouchStart={header.getResizeHandler()}
+                              className={`resizer ${
+                                header.column.getIsResizing() ? 'isResizing' : ''
+                              }`}
+                            />
                           )}
-                        </SortButton>
-                        {header.column.getCanResize() && (
-                          <Resizer
-                            onMouseDown={header.getResizeHandler()}
-                            onTouchStart={header.getResizeHandler()}
-                            className={`resizer ${
-                              header.column.getIsResizing() ? 'isResizing' : ''
-                            }`}
-                          />
-                        )}
-                      </TableHeader>
-                    );
+                        </TableHeader>
+                      );
+                    }
                   })}
                 </TableRow>
               ))}
@@ -190,14 +200,22 @@ export const Table = <TData extends object>({
               >
                 {row.getVisibleCells().map((cell) => {
                   const isCustomCell = cell.column.columnDef.meta?.customCell;
-                  const cellContents = flexRender(cell.column.columnDef.cell, cell.getContext());
-                  return (
-                    <TableCell key={cell.id} width={cell.column.getSize()}>
-                      {isCustomCell ? (
-                        cellContents
-                      ) : (
-                        <TableCellWrapper>{cellContents}</TableCellWrapper>
-                      )}
+
+                  const tableCellProps = {
+                    key: cell.id,
+                    width: cell.column.getSize(),
+                  };
+
+                  const cellContents = flexRender(cell.column.columnDef.cell, {
+                    ...tableCellProps,
+                    ...cell.getContext(),
+                  });
+
+                  return isCustomCell ? (
+                    cellContents
+                  ) : (
+                    <TableCell {...tableCellProps}>
+                      <TableCellWrapper>{cellContents}</TableCellWrapper>
                     </TableCell>
                   );
                 })}

diff --git a/src/Table/styled.tsx b/src/Table/styled.tsx
@@ -89,15 +89,40 @@ export const TableContainer = styled(TableContainerComp, {
   background: ${COLORS.BACKGROUND};
 `;
 
+/*
+ * stop cells from having overlapping border if we have side borders on our container
+ */
+const sideBordersStyle = css`
+  border-right: 1px solid ${colors.grey_2};
+  border-left: 1px solid ${colors.grey_2};
+
+  table,
+  tr td:first-of-type,
+  tr th:first-of-type {
+    border-left: none;
+  }
+  table,
+  tr td:last-of-type,
+  tr th:last-of-type {
+    border-right: none;
+  }
+`;
+
 const TableContainerInnerComp = (
-  props: React.PropsWithChildren<{ className?: string; withFilters?: boolean; withTabs?: boolean }>,
+  props: React.PropsWithChildren<{
+    className?: string;
+    withFilters?: boolean;
+    withTabs?: boolean;
+    withSideBorders?: boolean;
+  }>,
 ) => <div {...props} className={clsx(TABLE_CLASSES.TABLE_CONTAINER_INNER, props.className)} />;
 export const TableContainerInner = styled(TableContainerInnerComp, {
   shouldForwardProp: (prop) => isPropValid(prop),
 })`
   width: 100%;
   max-width: 100%;
   overflow-x: auto;
+  ${(props) => props.withSideBorders && sideBordersStyle};
   ${(props) =>
     props.withFilters &&
     `