Skip to content

Commit

Permalink
feat(Table): add navigation mode (#3752)
Browse files Browse the repository at this point in the history 
Adds navigation mode="navigation"

---------

Co-authored-by: Joakim Bjerknes <joakbjerk@gmail.com>
  • Loading branch information
@langz @joakbjerk
langz and joakbjerk authored Jul 5, 2024
1 parent 43bd7a4 commit b3a6db9
Show file tree
Hide file tree
Showing 33 changed files with 2,164 additions and 272 deletions.
4 changes: 4 additions & 0 deletions ...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,4 +121,8 @@ The `InputPassword` component has been moved to `Field.Password`, and is now a p

- replace `class` with `className`.

## Table

- replace `accordion` with `mode="accordion"`.

_February, 6. 2024_
304 changes: 300 additions & 4 deletions packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -771,7 +771,7 @@ export const Accordion = () => (
}

return (
<Table accordion id={id} {...props}>
<Table mode="accordion" id={id} {...props}>
<caption className="dnb-sr-only">A Table Caption</caption>

<thead>
Expand All @@ -796,14 +796,147 @@ export const Accordion = () => (
<>
<Table.ScrollView>
<AccordionTable
id="table-1"
id="accordion-table-1"
showCheckbox
accordionChevronPlacement="end"
/>
</Table.ScrollView>

<Table.ScrollView top>
<AccordionTable id="table-2" border outline size="medium" />
<AccordionTable
id="accordion-table-2"
border
outline
size="medium"
/>
</Table.ScrollView>
</>
)
}}
</ComponentBox>
)

export const AccordionMixed = () => (
<ComponentBox
hideCode
data-visual-test="table-accordion-mixed"
scope={{ copyIcon, useCopyWithNotice }}
>
{() => {
const AccordionTable = ({ id, showCheckbox = false, ...props }) => {
const TdCheckbox = () => {
return <Checkbox label="Select row" label_sr_only />
}
const TdInput = () => {
return <Input label="Label" label_sr_only size={4} />
}
const Content = ({ shareId }) => {
const ref = React.useRef()
const { copy } = useCopyWithNotice()

const shareHandler = () => {
const url = new URL(location.href)
url.hash = '#' + shareId
copy(url.toString(), ref.current)
}

return (
<>
<Button top icon="bell" variant="secondary">
Ring the bell
</Button>

<Section top spacing>
<Dl>
<Dt>Favorittfarge</Dt>
<Dd>Grønn</Dd>
<Dt>Favorittmat</Dt>
<Dd>Taco</Dd>
</Dl>
</Section>

<Button
top
variant="tertiary"
icon={copyIcon}
icon_position="left"
on_click={shareHandler}
inner_ref={ref}
>
Copy link to this row
</Button>
</>
)
}

return (
<Table mode="accordion" id={id} {...props}>
<caption className="dnb-sr-only">A Table Caption</caption>

<thead>
<Tr>
<Th>Column A</Th>
<Th>Column B</Th>
<Th>Column C</Th>
<Th align="right">Column D</Th>
</Tr>
</thead>

<tbody>
<Tr id={id + '-' + 1}>
<Td>{showCheckbox ? <TdCheckbox /> : 'Row ' + 1}</Td>
<Td>Row {1}</Td>
<Td spacing="horizontal">
<TdInput />
</Td>
<Td align="right">Row {1}</Td>

<Td.AccordionContent>
<Content shareId={id + '-' + 1} />
</Td.AccordionContent>
</Tr>
<Tr id={id + '-' + 2}>
<Td>{showCheckbox ? <TdCheckbox /> : 'Row ' + 2}</Td>
<Td>Row {2}</Td>
<Td spacing="horizontal">
<TdInput />
</Td>
<Td align="right">Row {2}</Td>
</Tr>
<Tr id={id + '-' + 3}>
<Td>{showCheckbox ? <TdCheckbox /> : 'Row ' + 3}</Td>
<Td>Row {3}</Td>
<Td spacing="horizontal">
<TdInput />
</Td>
<Td align="right">Row {3}</Td>

<Td.AccordionContent>
<Content shareId={id + '-' + 3} />
</Td.AccordionContent>
</Tr>
</tbody>
</Table>
)
}

return (
<>
<Table.ScrollView>
<AccordionTable
id="accordion-table-mixed-1"
showCheckbox
accordionChevronPlacement="end"
/>
</Table.ScrollView>

<Table.ScrollView top>
<AccordionTable
id="accordion-table-mixed-2"
border
outline
size="medium"
/>
</Table.ScrollView>
</>
)
Expand All @@ -825,7 +958,7 @@ export const AccordionRow = () => {
]
return (
<Table.ScrollView>
<Table accordion accordionChevronPlacement="end">
<Table mode="accordion" accordionChevronPlacement="end">
<thead>
<Tr>
<Th>Column A</Th>
Expand Down Expand Up @@ -888,6 +1021,169 @@ export const AccordionRow = () => {
)
}

export const Navigation = () => (
<ComponentBox hideCode data-visual-test="table-navigation">
{() => {
const NavigationTable = ({ id, showCheckbox = false, ...props }) => {
const TdCheckbox = () => {
return <Checkbox label="Select row" label_sr_only />
}
const TdInput = () => {
return <Input label="Label" label_sr_only size={4} />
}

const Row = ({ nr }) => {
const shareId = id + '-' + nr
return (
<Tr
id={shareId}
onClick={() => {
console.log('your navigation logic here')
// window.location.href = 'https://eufemia.dnb.no/'
}}
>
<Td>{showCheckbox ? <TdCheckbox /> : 'Row ' + nr}</Td>
<Td>Row {nr}</Td>
<Td spacing="horizontal">
<TdInput />
</Td>
<Td align="right">Row {nr}</Td>
</Tr>
)
}

return (
<Table mode="navigation" id={id} {...props}>
<caption className="dnb-sr-only">A Table Caption</caption>

<thead>
<Tr>
<Th>Column A</Th>
<Th>Column B</Th>
<Th>Column C</Th>
<Th align="right">Column D</Th>
</Tr>
</thead>

<tbody>
<Row nr="1" />
<Row nr="2" />
<Row nr="3" />
</tbody>
</Table>
)
}

return (
<>
<Table.ScrollView>
<NavigationTable id="navigation-table-1" showCheckbox />
</Table.ScrollView>

<Table.ScrollView top>
<NavigationTable
id="navigation-table-2"
border
outline
size="medium"
/>
</Table.ScrollView>
</>
)
}}
</ComponentBox>
)

export const NavigationMixed = () => (
<ComponentBox hideCode data-visual-test="table-navigation-mixed">
{() => {
const NavigationTable = ({ id, showCheckbox = false, ...props }) => {
const TdCheckbox = () => {
return <Checkbox label="Select row" label_sr_only />
}
const TdInput = () => {
return <Input label="Label" label_sr_only size={4} />
}

return (
<Table mode="navigation" id={id} {...props}>
<caption className="dnb-sr-only">A Table Caption</caption>

<thead>
<Tr>
<Th>Column A</Th>
<Th>Column B</Th>
<Th>Column C</Th>
<Th align="right">Column D</Th>
</Tr>
</thead>

<tbody>
<Tr
id={id + '-' + 1}
onClick={() => {
console.log('your navigation logic here')
// window.location.href = 'https://eufemia.dnb.no/'
}}
>
<Td>{showCheckbox ? <TdCheckbox /> : 'Row ' + 1}</Td>
<Td>Row {1}</Td>
<Td spacing="horizontal">
<TdInput />
</Td>
<Td align="right">Row {1}</Td>
</Tr>
<Tr id={id + '-' + 2}>
<Td>{showCheckbox ? <TdCheckbox /> : 'Row ' + 2}</Td>
<Td>Row {2}</Td>
<Td spacing="horizontal">
<TdInput />
</Td>
<Td align="right">Row {2}</Td>
</Tr>
<Tr
id={id + '-' + 3}
onClick={() => {
console.log('your navigation logic here')
// window.location.href = 'https://eufemia.dnb.no/'
}}
>
<Td>{showCheckbox ? <TdCheckbox /> : 'Row ' + 3}</Td>
<Td>Row {3}</Td>
<Td spacing="horizontal">
<TdInput />
</Td>
<Td align="right">Row {3}</Td>
</Tr>
</tbody>
</Table>
)
}

return (
<>
<Table.ScrollView>
<NavigationTable
id="navigation-table-mixed-1"
showCheckbox
accordionChevronPlacement="end"
/>
</Table.ScrollView>

<Table.ScrollView top>
<NavigationTable
id="navigation-table-mixed-2"
border
outline
size="medium"
/>
</Table.ScrollView>
</>
)
}}
</ComponentBox>
)

export const Sticky = () => {
const isFullscreen = /data-visual-test|fullscreen/.test(
globalThis?.location?.href,
Expand Down
11 changes: 10 additions & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,16 @@ return (
Close all rows
</button>

<Table accordion collapseAllHandleRef={myTableCollapseAll}>
<Table mode="accordion" collapseAllHandleRef={myTableCollapseAll}>
{/* ... your table code */}
</Table>
)
```

### Table with navigation

<Examples.Navigation />

### Table with sticky header

<Examples.Sticky />
Expand Down Expand Up @@ -125,3 +129,8 @@ This example uses `scope="row"` with a table header (`<th>`) in each row.
<VisibleWhenVisualTest>
<Examples.VariantCombinations />
</VisibleWhenVisualTest>

<VisibleWhenVisualTest>
<Examples.AccordionMixed />
<Examples.NavigationMixed />
</VisibleWhenVisualTest>
6 changes: 5 additions & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/table/events.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ import {

## Table Row `<Tr>` events

Table Row `<Tr>` events are a part of the accordion feature and needs to be enabled with the `accordion` property on the main Table.
Table Row `<Tr>` events are a part of the mode feature and needs to be enabled with the `mode` property on the main Table.

Table with navigation mode(`mode="navigation"`) only supports the `<Tr>` event `onClick`.

Table with accordion mode(`mode="accordion"`) supports all the `<Tr>` events listed below.

<PropertiesTable props={TrEventProperties} showDefaultValue />
Loading

0 comments on commit b3a6db9

Please sign in to comment.