Skip to content

Commit

Permalink
refactor(dntable): don't implicitly include TR elm
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: DnTable.Header, DnTable.Body, & DnTable.Footer
components now require DnTable.Row children. DnTable.BodyCell has been
renamed to DnTable.Cell.
  • Loading branch information
@jkusa
jkusa committed Aug 30, 2021
1 parent 1e1bea4 commit 3753420
Show file tree
Hide file tree
Showing 6 changed files with 188 additions and 139 deletions.
1 change: 1 addition & 0 deletions .storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ module.exports = {
'@storybook/addon-links',
'@storybook/addon-viewport/register',
'@storybook/addon-docs',
'@storybook/addon-actions',
// TODO: add @storybook/addon-backgrounds
],
};
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
"pr-storybook": "build-storybook --no-dll -c .storybook -o artifacts/storybook",
"vsc-ext": "extList=$(node ./.vscode/.export-ext.js) && code --install-extension $extList",
"prepare": "husky install"

},
"peerDependencies": {
"@denali-design/icons": "1.x",
Expand All @@ -54,6 +53,7 @@
"@commitlint/config-conventional": "12.1.1",
"@denali-design/icons": "1.0.0",
"@semantic-release/changelog": "5.0.1",
"@storybook/addon-actions": "6.3.7",
"@storybook/addon-docs": "6.2.0",
"@storybook/addon-knobs": "6.2.0",
"@storybook/addon-links": "6.2.0",
Expand Down
56 changes: 39 additions & 17 deletions src/DnTable/DnTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* Copyright 2020, Verizon Media
* Copyright 2021, Verizon Media
* Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
*/

Expand Down Expand Up @@ -46,11 +46,11 @@ DnTable.defaultProps = {
isFrozen: false,
};

const DnTableHeader = ({ children }: DnTableHeaderProps): JSX.Element => {
// DnTableHeader

const DnTableHeader = ({ children, ...rest }: DnTableHeaderProps): JSX.Element => {
return (
<thead>
<tr>{children}</tr>
</thead>
<thead {...rest} >{children}</thead>
);
};

Expand All @@ -64,11 +64,11 @@ DnTableHeader.defaultProps = {
children: null,
};

const DnTableBody = ({ children }: DnTableBodyProps): JSX.Element => {
// DnTableBody

const DnTableBody = ({ children, ...rest }: DnTableBodyProps): JSX.Element => {
return (
<tbody>
<tr>{children}</tr>
</tbody>
<tbody {...rest} >{children}</tbody>
);
};

Expand All @@ -82,11 +82,29 @@ DnTableBody.defaultProps = {
children: null,
};

const DnTableFooter = ({ children }: DnTableFooterProps): JSX.Element => {
// DnTableRow

const DnTableRow = ({ children, ...rest }: DnTableRowProps): JSX.Element => {
return (
<tfoot>
<tr>{children}</tr>
</tfoot>
<tr {...rest} >{children}</tr>
);
};

DnTable.Row = DnTableRow;

export interface DnTableRowProps {
children: React.ReactNode;
}

DnTableRow.defaultProps = {
children: null,
};

// DnTableFooter

const DnTableFooter = ({ children, ...rest }: DnTableFooterProps): JSX.Element => {
return (
<tfoot {...rest} >{children}</tfoot>
);
};

Expand All @@ -100,6 +118,8 @@ DnTableFooter.defaultProps = {
children: null,
};

// DnTableHeaderCell

const DnTableHeaderCell = ({
position,
isMono,
Expand Down Expand Up @@ -159,7 +179,9 @@ DnTableHeaderCell.defaultProps = {
isMono: false,
};

const DnTableBodyCell = ({ position, isMono, className, children, ...rest }: DnTableBodyCellProps): JSX.Element => {
// DnTableCell

const DnTableCell = ({ position, isMono, className, children, ...rest }: DnTableCellProps): JSX.Element => {
return (
<td
className={classnames(
Expand All @@ -176,16 +198,16 @@ const DnTableBodyCell = ({ position, isMono, className, children, ...rest }: DnT
);
};

DnTable.BodyCell = DnTableBodyCell;
DnTable.Cell = DnTableCell;

export interface DnTableBodyCellProps {
export interface DnTableCellProps {
children: React.ReactNode;
className?: string;
position: DnTableDataPositions;
isMono: boolean;
}

DnTableBodyCell.defaultProps = {
DnTableCell.defaultProps = {
children: null,
className: undefined,
position: DnTableDataPositions.default,
Expand Down
132 changes: 75 additions & 57 deletions src/DnTable/__stories__/index.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

import React from 'react';
import { withKnobs, boolean, select } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { getThemeClassName, propsGroupId } from '../../../.storybook/storybook-utils';
import { DnTable, DnTableDataPositions, DnTableSortDirections } from '../../index'; // src/index.tsx

Expand Down Expand Up @@ -32,25 +33,31 @@ export const Default = () => {
return (
<DnTable>
<DnTable.Header>
<DnTable.HeaderCell>Date</DnTable.HeaderCell>
<DnTable.HeaderCell>Time</DnTable.HeaderCell>
<DnTable.HeaderCell>User</DnTable.HeaderCell>
<DnTable.HeaderCell>Role</DnTable.HeaderCell>
<DnTable.HeaderCell>Cause</DnTable.HeaderCell>
<DnTable.Row>
<DnTable.HeaderCell>Date</DnTable.HeaderCell>
<DnTable.HeaderCell>Time</DnTable.HeaderCell>
<DnTable.HeaderCell>User</DnTable.HeaderCell>
<DnTable.HeaderCell>Role</DnTable.HeaderCell>
<DnTable.HeaderCell>Cause</DnTable.HeaderCell>
</DnTable.Row>
</DnTable.Header>
<DnTable.Body>
<DnTable.HeaderCell>04/14/2017</DnTable.HeaderCell>
<DnTable.BodyCell>19:34 PDT</DnTable.BodyCell>
<DnTable.BodyCell>yby.jupiter</DnTable.BodyCell>
<DnTable.BodyCell>Admin</DnTable.BodyCell>
<DnTable.BodyCell>jira123</DnTable.BodyCell>
<DnTable.Row>
<DnTable.Cell>04/14/2017</DnTable.Cell>
<DnTable.Cell>19:34 PDT</DnTable.Cell>
<DnTable.Cell>yby.jupiter</DnTable.Cell>
<DnTable.Cell>Admin</DnTable.Cell>
<DnTable.Cell>jira123</DnTable.Cell>
</DnTable.Row>
</DnTable.Body>
<DnTable.Footer>
<DnTable.HeaderCell>04/14/2017</DnTable.HeaderCell>
<DnTable.BodyCell>19:34 PDT</DnTable.BodyCell>
<DnTable.BodyCell>yby.jupiter</DnTable.BodyCell>
<DnTable.BodyCell>Admin</DnTable.BodyCell>
<DnTable.BodyCell>jira123</DnTable.BodyCell>
<DnTable.Row>
<DnTable.Cell>04/14/2017</DnTable.Cell>
<DnTable.Cell>19:34 PDT</DnTable.Cell>
<DnTable.Cell>yby.jupiter</DnTable.Cell>
<DnTable.Cell>Admin</DnTable.Cell>
<DnTable.Cell>jira123</DnTable.Cell>
</DnTable.Row>
</DnTable.Footer>
</DnTable>
);
Expand All @@ -59,50 +66,61 @@ export const Default = () => {
export const Playground = () => {
return (
<div className={getThemeClassName()}>
<DnTable isStriped={getIsStriped()} isCards={getIsCards()} isFrozen={getIsFrozen()}>
<DnTable.Header>
<DnTable.HeaderCell position={getPosition(DnTableDataPositions.right)}>Date</DnTable.HeaderCell>
<DnTable.HeaderCell isMono={getIsMono()}>Time</DnTable.HeaderCell>
<DnTable.HeaderCell
isSorted={getIsSorted()}
sortDirection={getSortDirection(DnTableSortDirections.ascend)}
>
User
</DnTable.HeaderCell>
<DnTable.HeaderCell>Role</DnTable.HeaderCell>
<DnTable.HeaderCell>Cause</DnTable.HeaderCell>
<DnTable
isStriped={getIsStriped()}
isCards={getIsCards()}
isFrozen={getIsFrozen()}
onClick={action('table-click')}
>
<DnTable.Header onClick={action('header-click')}>
<DnTable.Row>
<DnTable.HeaderCell position={getPosition(DnTableDataPositions.right)}>Date</DnTable.HeaderCell>
<DnTable.HeaderCell isMono={getIsMono()}>Time</DnTable.HeaderCell>
<DnTable.HeaderCell
isSorted={getIsSorted()}
sortDirection={getSortDirection(DnTableSortDirections.ascend)}
>
User
</DnTable.HeaderCell>
<DnTable.HeaderCell>Role</DnTable.HeaderCell>
<DnTable.HeaderCell>Cause</DnTable.HeaderCell>
</DnTable.Row>
</DnTable.Header>
<DnTable.Body>
<DnTable.HeaderCell>04/14/2017</DnTable.HeaderCell>
<DnTable.BodyCell>19:34 PDT</DnTable.BodyCell>
<DnTable.BodyCell>yby.jupiter</DnTable.BodyCell>
<DnTable.BodyCell>Admin</DnTable.BodyCell>
<DnTable.BodyCell>jira123</DnTable.BodyCell>
</DnTable.Body>
<DnTable.Body>
<DnTable.HeaderCell>04/14/2017</DnTable.HeaderCell>
<DnTable.BodyCell>19:34 PDT</DnTable.BodyCell>
<DnTable.BodyCell>yby.jupiter</DnTable.BodyCell>
<DnTable.BodyCell>Admin</DnTable.BodyCell>
<DnTable.BodyCell>jira123</DnTable.BodyCell>
</DnTable.Body>
<DnTable.Body>
<DnTable.HeaderCell>04/14/2017</DnTable.HeaderCell>
<DnTable.BodyCell>19:34 PDT</DnTable.BodyCell>
<DnTable.BodyCell>yby.jupiter</DnTable.BodyCell>
<DnTable.BodyCell>Admin</DnTable.BodyCell>
<DnTable.BodyCell>jira123</DnTable.BodyCell>
<DnTable.Body onClick={action('body-click')}>
<DnTable.Row onClick={action('row-click')}>
<DnTable.HeaderCell>04/14/2017</DnTable.HeaderCell>
<DnTable.Cell>19:34 PDT</DnTable.Cell>
<DnTable.Cell>yby.jupiter</DnTable.Cell>
<DnTable.Cell>Admin</DnTable.Cell>
<DnTable.Cell>jira123</DnTable.Cell>
</DnTable.Row>
<DnTable.Row>
<DnTable.HeaderCell onClick={action('cell-click')}>04/14/2017</DnTable.HeaderCell>
<DnTable.Cell>19:34 PDT</DnTable.Cell>
<DnTable.Cell>yby.jupiter</DnTable.Cell>
<DnTable.Cell>Admin</DnTable.Cell>
<DnTable.Cell>jira123</DnTable.Cell>
</DnTable.Row>
<DnTable.Row>
<DnTable.HeaderCell>04/14/2017</DnTable.HeaderCell>
<DnTable.Cell>19:34 PDT</DnTable.Cell>
<DnTable.Cell>yby.jupiter</DnTable.Cell>
<DnTable.Cell>Admin</DnTable.Cell>
<DnTable.Cell>jira123</DnTable.Cell>
</DnTable.Row>
</DnTable.Body>
<DnTable.Footer>
<DnTable.HeaderCell>
<a href="#footer">Footer</a>
</DnTable.HeaderCell>
<DnTable.BodyCell>
<a href="#greyList">pes.acl.greylist</a>
</DnTable.BodyCell>
<DnTable.BodyCell>Foo Turansky</DnTable.BodyCell>
<DnTable.BodyCell>Admin</DnTable.BodyCell>
<DnTable.BodyCell>jira123</DnTable.BodyCell>
<DnTable.Footer onClick={action('footer-click')}>
<DnTable.Row>
<DnTable.HeaderCell>
<a href="#footer">Footer</a>
</DnTable.HeaderCell>
<DnTable.Cell>
<a href="#greyList">pes.acl.greylist</a>
</DnTable.Cell>
<DnTable.Cell>Foo Turansky</DnTable.Cell>
<DnTable.Cell>Admin</DnTable.Cell>
<DnTable.Cell>jira123</DnTable.Cell>
</DnTable.Row>
</DnTable.Footer>
</DnTable>
</div>
Expand Down
24 changes: 10 additions & 14 deletions src/DnTable/__tests__/__snapshots__/index.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,11 @@ exports[`DnTable Tests should render correctly with custom props 1`] = `
</thead>
<tbody>
<tr>
<th
<td
class="is-default"
>
04/14/2017
</th>
</td>
<td
class="is-default"
>
Expand All @@ -64,14 +64,12 @@ exports[`DnTable Tests should render correctly with custom props 1`] = `
jira123
</td>
</tr>
</tbody>
<tbody>
<tr>
<th
<td
class="is-default"
>
04/14/2017
</th>
</td>
<td
class="is-default"
>
Expand All @@ -93,14 +91,12 @@ exports[`DnTable Tests should render correctly with custom props 1`] = `
jira123
</td>
</tr>
</tbody>
<tbody>
<tr>
<th
<td
class="is-default"
>
04/14/2017
</th>
</td>
<td
class="is-default"
>
Expand All @@ -125,15 +121,15 @@ exports[`DnTable Tests should render correctly with custom props 1`] = `
</tbody>
<tfoot>
<tr>
<th
<td
class="is-default"
>
<a
href="#footer"
>
Footer
</a>
</th>
</td>
<td
class="is-default"
>
Expand Down Expand Up @@ -228,11 +224,11 @@ exports[`DnTable Tests should render with default props 1`] = `
</tbody>
<tfoot>
<tr>
<th
<td
class="is-default"
>
04/14/2017
</th>
</td>
<td
class="is-default"
>
Expand Down
Loading

0 comments on commit 3753420

Please sign in to comment.