From 9fad7347c952c3e31944823fc24ae14383ea4be5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ciar=C3=A1n=20Sch=C3=BCtte?= Date: Tue, 20 Jun 2023 11:06:40 -0400 Subject: [PATCH 1/4] Footer component updates (#135) * cleanup styles. add some types * logo can be prop --------- Co-authored-by: Ciaran Schutte --- src/Footer/index.tsx | 62 +++++++++++++++++++++++++++----------------- 1 file changed, 38 insertions(+), 24 deletions(-) diff --git a/src/Footer/index.tsx b/src/Footer/index.tsx index c6dbedbd..46958c84 100644 --- 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; + +type FooterProps = { + subtitle?: string; + links?: FooterLink[]; + className?: string; + Logo?: ReactNode; + otherProps?: any; +}; + +const DefaultLogo = () => ( + + Logo for Ontario Institute for Cancer Research + +); + export const Footer = ({ - version = '[version]', - apiVersion = null, + subtitle = '', links = [], className = '', + Logo = , ...otherProps -}) => ( +}: FooterProps) => ( - © {new Date().getFullYear()} ICGC ARGO. All rights reserved. -
- ICGC ARGO Data Platform {version} {apiVersion && `- API ${apiVersion}`} + {/** copyright and ARGO logo */} +
+ © {new Date().getFullYear()} ICGC ARGO. All rights reserved. +
+ {subtitle} +
+ + {/** nav links */}
{links.map(({ displayName, href, target }, idx) => { if (idx !== links.length - 1) { @@ -95,23 +124,8 @@ export const Footer = ({ })}
-
- - Ontario Institute for Cancer Research - -
+ {/** right side logo eg. OICR, RDPC */} +
{Logo}
 From 3ca60cd5146c0bfb4f624c72dddc9de3857c7a97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ciar=C3=A1n=20Sch=C3=BCtte?= Date: Tue, 16 Jan 2024 15:06:38 -0500 Subject: [PATCH 2/4] Custom table elemets (#141) * use tsc instead of ttsc * allow completely custom TH and TD elements * fix missing border in container el * fix table wrapper styling * change selector * pass sorting handler * remove nested check * add back in ttypescript * use ttsc for declarations --------- Co-authored-by: Ciaran Schutte --- package-lock.json | 32 +++++++-------- package.json | 4 +- src/Table/index.tsx | 98 ++++++++++++++++++++++++++------------------ src/Table/styled.tsx | 27 +++++++++++- 4 files changed, 102 insertions(+), 59 deletions(-) diff --git a/package-lock.json b/package-lock.json index 478d874d..3b219aae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@icgc-argo/uikit", - "version": "2.5.0", + "version": "3.0.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@icgc-argo/uikit", - "version": "2.5.0", + "version": "3.0.1", "dependencies": { "@babel/runtime-corejs2": "^7.7.2", "@emotion/react": "^11.11.0", @@ -64,8 +64,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" }, "peerDependencies": { @@ -25608,9 +25608,9 @@ "dev": true }, "node_modules/ttypescript": { - "version": "1.5.13", - "resolved": "https://registry.npmjs.org/ttypescript/-/ttypescript-1.5.13.tgz", - "integrity": "sha512-KT/RBfGGlVJFqEI8cVvI3nMsmYcFvPSZh8bU0qX+pAwbi7/ABmYkzn7l/K8skw0xmYjVCoyaV6WLsBQxdadybQ==", + "version": "1.5.15", + "resolved": "https://registry.npmjs.org/ttypescript/-/ttypescript-1.5.15.tgz", + "integrity": "sha512-48ykDNHzFnPMnv4hYX1P8Q84TvCZyL1QlFxeuxsuZ48X2+ameBgPenvmCkHJtoOSxpoWTWi8NcgNrRnVDOmfSg==", "dev": true, "dependencies": { "resolve": ">=1.9.0" @@ -25698,9 +25698,9 @@ } }, "node_modules/typescript": { - "version": "4.7.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", - "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==", + "version": "4.8.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz", + "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==", "dev": true, "bin": { "tsc": "bin/tsc", @@ -47418,9 +47418,9 @@ "dev": true }, "ttypescript": { - "version": "1.5.13", - "resolved": "https://registry.npmjs.org/ttypescript/-/ttypescript-1.5.13.tgz", - "integrity": "sha512-KT/RBfGGlVJFqEI8cVvI3nMsmYcFvPSZh8bU0qX+pAwbi7/ABmYkzn7l/K8skw0xmYjVCoyaV6WLsBQxdadybQ==", + "version": "1.5.15", + "resolved": "https://registry.npmjs.org/ttypescript/-/ttypescript-1.5.15.tgz", + "integrity": "sha512-48ykDNHzFnPMnv4hYX1P8Q84TvCZyL1QlFxeuxsuZ48X2+ameBgPenvmCkHJtoOSxpoWTWi8NcgNrRnVDOmfSg==", "dev": true, "requires": { "resolve": ">=1.9.0" @@ -47485,9 +47485,9 @@ } }, "typescript": { - "version": "4.7.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", - "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==", + "version": "4.8.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz", + "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==", "dev": true }, "ua-parser-js": { diff --git a/package.json b/package.json index f19e8f2a..0efd7344 100644 --- a/package.json +++ b/package.json @@ -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/Table/index.tsx b/src/Table/index.tsx index fe04ed55..3e3a167f 100644 --- a/src/Table/index.tsx +++ b/src/Table/index.tsx @@ -122,7 +122,11 @@ export const Table = ({ return ( - + {withHeaders && ( @@ -131,9 +135,21 @@ export const Table = ({ {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 = '', @@ -141,38 +157,32 @@ export const Table = ({ tabs = [], } = header.column.columnDef.meta?.columnTabs || {}; - return ( - - {!!tabs.length && ( - - )} - - {isCustomHeader ? ( - headerContents - ) : ( + if (isCustomHeader) { + return headerContents; + } else { + return ( + + {!!tabs.length && ( + + )} + {headerContents} + + {header.column.getCanResize() && ( + )} - - {header.column.getCanResize() && ( - - )} - - ); + + ); + } })} ))} @@ -190,14 +200,22 @@ export const Table = ({ > {row.getVisibleCells().map((cell) => { const isCustomCell = cell.column.columnDef.meta?.customCell; - const cellContents = flexRender(cell.column.columnDef.cell, cell.getContext()); - return ( - - {isCustomCell ? ( - cellContents - ) : ( - {cellContents} - )} + + const tableCellProps = { + key: cell.id, + width: cell.column.getSize(), + }; + + const cellContents = flexRender(cell.column.columnDef.cell, { + ...tableCellProps, + ...cell.getContext(), + }); + + return isCustomCell ? ( + cellContents + ) : ( + + {cellContents} ); })} diff --git a/src/Table/styled.tsx b/src/Table/styled.tsx index c90c95de..f3b698b7 100644 --- a/src/Table/styled.tsx +++ b/src/Table/styled.tsx @@ -89,8 +89,32 @@ 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; + }>, ) =>
; export const TableContainerInner = styled(TableContainerInnerComp, { shouldForwardProp: (prop) => isPropValid(prop), @@ -98,6 +122,7 @@ export const TableContainerInner = styled(TableContainerInnerComp, { width: 100%; max-width: 100%; overflow-x: auto; + ${(props) => props.withSideBorders && sideBordersStyle}; ${(props) => props.withFilters && ` From a0abbfadd43e617d4a97da671e6856111ca7e54b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ciar=C3=A1n=20Sch=C3=BCtte?= Date: Tue, 16 Jan 2024 23:04:30 -0500 Subject: [PATCH 3/4] rc/4.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0efd7344..bf5263cf 100644 --- 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", From f6390a06a60657d0e75519ecbbd35586f6ad980d Mon Sep 17 00:00:00 2001 From: Ciaran Schutte Date: Thu, 18 Jan 2024 10:52:32 -0500 Subject: [PATCH 4/4] update package-lock --- package-lock.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3b219aae..a14f167d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@icgc-argo/uikit", - "version": "3.0.1", + "version": "4.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@icgc-argo/uikit", - "version": "3.0.1", + "version": "4.0.0", "dependencies": { "@babel/runtime-corejs2": "^7.7.2", "@emotion/react": "^11.11.0",