Skip to content

Commit

Permalink
release of v10.36 (#3707)
Browse files Browse the repository at this point in the history
Get inn these PRs:

- [x] #3706
- [x] #3581
- [x] #3683
- [x] #3709
- [x] #3708
  • Loading branch information
tujoworker authored Jun 14, 2024
2 parents f9a2f53 + f4363c2 commit b999dd1
Show file tree
Hide file tree
Showing 114 changed files with 2,921 additions and 1,380 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,12 @@ To force a specific state of style, use the following classes to do so:

<AnchorExampleHelperClasses />

### Anchor modifiers
### Anchor modifier props

- `.dnb-anchor--no-animation` <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-animation">No Animation</a>
- `.dnb-anchor--no-style` <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-style">No Style</a>
- `.dnb-anchor--no-hover` <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-hover">No Hover</a>
- `.dnb-anchor--no-underline` <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-underline">No Underline</a>
- `noAnimation` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-animation">No Animation</a>
- `noStyle` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-style">No Style</a>
- `noHover` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-hover">No Hover</a>
- `noUnderline` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-underline">No Underline</a>

### Anchor with `target="_blank"`

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,12 @@
showTabs: true
---

import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { AnchorProperties } from '@dnb/eufemia/src/components/anchor/AnchorDocs'

## Properties

| Properties | Description |
| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `element` | _(optional)_ define what HTML or React element should be used (e.g. `element={Link}`). Defaults to semantic `a` element. |
| `href` | _(optional)_ relative or absolute url. |
| `to` | _(optional)_ use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url. |
| `target` | _(optional)_ defines the opening method. Use `_blank` to open a new browser window/tab. |
| `targetBlankTitle` | _(optional)_ the title shown as a tooltip when target is set to `_blank`. |
| `tooltip` | _(optional)_ Provide a string or a React Element to be shown as the tooltip content. |
| `icon` | _(optional)_ [Primary Icons](/icons/primary) can be set as a string (e.g. icon="chevron_right"), other icons should be set as React elements. |
| `iconPosition` | _(optional)_ `left` (default) or `right`. Places icon to the left or to the right of the text. |
| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
<PropertiesTable props={AnchorProperties} />

### Router Link

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,18 @@
showTabs: true
---

import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import {
TableEventProperties,
TrEventProperties,
} from '@dnb/eufemia/src/components/table/TableDocs'

## Table events

<PropertiesTable props={TableEventProperties} showDefaultValue />

## 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.

| Events | Description |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `onClick` | _(optional)_ will emit when user clicks/expands the table row. Returns a native click. |
| `onOpened` | _(optional)_ Will emit when table row is expanded. Returns an object with the table row as the target: `{ target }`. |
| `onClosed` | _(optional)_ Will emit when table row is closed (after it was open). Returns an object with the table row as the target: `{ target }`. |
<PropertiesTable props={TrEventProperties} showDefaultValue />
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,28 @@
showTabs: true
---

import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import {
TableProperties,
TrProperties,
ThProperties,
TdProperties,
} from '@dnb/eufemia/src/components/table/TableDocs'

## Properties

### `<Table>`

| Properties | Description |
| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `accordion` | _(optional)_ set to `true` if you have one or more rows that contains an accordion content. Defaults to `false`. |
| `collapseAllHandleRef` | _(optional)_ ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows. Defaults to `undefined`. |
| `border` | _(optional)_ use `true` to show borders between table data cells. Defaults to `false`. |
| `outline` | _(optional)_ use `true` to show a outline border around the table. Defaults to `false`. |
| `sticky` | _(optional)_ use `true` to enable a sticky Table header. Or use `css-position` to enable the CSS based scroll behavior. Defaults to `false`. |
| `stickyOffset` | _(optional)_ defines the offset (top) in `rem` from where the header should start to stick. You may define your app header height here, if you have a sticky header on your page. Defaults to `0`. |
| `size` | _(optional)_ spacing size inside the table header and data. Options: `small` \| `medium` \| `large` \. Defaults to `large`. |
| `fixed` | _(optional)_ if set to `true`, the table will behave with a fixed table layout, using: `table-layout: fixed;`. Use e.g. CSS `width: 40%` on a table column to define the width. Defaults to `false`. |
| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
| ~~`variant`~~ (not implemented yet) | _(coming)_ defines the style variant of the table. Options: `basis` . Defaults to `generic`. |
| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
<PropertiesTable props={TableProperties} showDefaultValue />

### Table Row `<Tr>`

| Properties | Description |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `variant` | _(optional)_ defines the variant of the current row. If set to either `odd` or `even`, the next row one will continue with the opposite. Defaults to automatic. |
| `noWrap` | _(optional)_ if set to `true`, the inherited header text will not wrap to new lines. Defaults to `false`. |
| `expanded` | _(optional)_ use `true` to render the `<Tr>` initially as expanded. Defaults to `false`. |
| `disabled` | _(optional)_ use `true` to disable the `<Tr>` to be accessible as an interactive element. Defaults to `false`. |
| `noAnimation` | _(optional)_ use `true` to disable the expand/collapse animation. Defaults to `false`. |
<PropertiesTable props={TrProperties} showDefaultValue />

### Table Header `<Th>`

| Properties | Description |
| ---------- | ---------------------------------------------------------------------------------------------------- |
| `sortable` | _(optional)_ defines the table header as sortable if set to `true` (ascending). Defaults to `false`. |
| `active` | _(optional)_ defines the sortable column as the current active (ascending). Defaults to `false`. |
| `reversed` | _(optional)_ defines the sortable column as in reversed order (descending). Defaults to `false`. |
| `noWrap` | _(optional)_ if set to `true`, the header text will not wrap to new lines. Defaults to `false`. |
<PropertiesTable props={ThProperties} showDefaultValue />

### Table Data `<Td>`

| Properties | Description |
| ----------- | ----------------------------------------------------------------------------------------- |
| `noSpacing` | _(optional)_ if set to `true`, no padding will be added. Defaults to `false`. |
| `spacing` | _(optional)_ set to `horizontal` for padding on left and right side. Defaults to `false`. |
<PropertiesTable props={TdProperties} showDefaultValue />
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ Also, this is an example of how to define a different content background color,

<TabsNoBorder />

### Tabs without breakout bottom border
### Tabs without breakout

<TabsNoBreakout />

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,19 @@ showTabs: true
---

import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { TabsProperties } from '@dnb/eufemia/src/components/tabs/TabsDocs'
import {
TabsProperties,
TabsDataObject,
} from '@dnb/eufemia/src/components/tabs/TabsDocs'

## Properties

<PropertiesTable props={TabsProperties} />

## Data object

<PropertiesTable props={TabsDataObject} />

## Key

The key can be a string or a number.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,14 @@ showTabs: true
hideInMenu: true
---

import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { SectionProperties } from '@dnb/eufemia/src/extensions/forms/Form/Section/SectionDocs'

## Properties

<PropertiesTable props={SectionProperties} />

## Translations

<TranslationsTable localeKey="Section" />
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@
showTabs: true
---

import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { SubmitButtonProperties } from '@dnb/eufemia/src/extensions/forms/Form/SubmitButton/SubmitButtonDocs'

## Properties

<PropertiesTable props={SubmitButtonProperties} />

## Translations

<TranslationsTable localeKey="SubmitButton" />
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@
showTabs: true
---

import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'

## Properties

<PropertiesTable props={ValueProperties} />

## Translations

<TranslationsTable localeKey={['BankAccountNumber.label']} />
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@
showTabs: true
---

import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'

## Properties

<PropertiesTable props={ValueProperties} />

## Translations

<TranslationsTable localeKey={['Date.label']} />
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@
showTabs: true
---

import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'

## Properties

<PropertiesTable props={ValueProperties} />

## Translations

<TranslationsTable localeKey={['Email.label']} />
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,16 @@
showTabs: true
---

import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'

## Properties

<PropertiesTable props={ValueProperties} />

## Translations

<TranslationsTable
localeKey={['FirstName.label', 'LastName.label', 'CompanyName.label']}
/>
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@
showTabs: true
---

import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'

## Properties

<PropertiesTable props={ValueProperties} />

## Translations

<TranslationsTable localeKey={['NationalIdentityNumber.label']} />
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@
showTabs: true
---

import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'

## Properties

<PropertiesTable props={ValueProperties} />

## Translations

<TranslationsTable localeKey={['OrganizationNumber.label']} />
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@
showTabs: true
---

import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'

## Properties

<PropertiesTable props={ValueProperties} />

## Translations

<TranslationsTable localeKey={['PhoneNumber.label']} />
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
showTabs: true
---

import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
import { PostalCodeAndCityProperties } from '@dnb/eufemia/src/extensions/forms/Value/PostalCodeAndCity/PostalCodeAndCityDocs'
Expand All @@ -13,3 +14,7 @@ import { PostalCodeAndCityProperties } from '@dnb/eufemia/src/extensions/forms/V
## Properties

<PropertiesTable props={ValueProperties} />

## Translations

<TranslationsTable localeKey={['PostalCodeAndCity']} />
Original file line number Diff line number Diff line change
@@ -1,6 +1,67 @@
import { Card, P } from '@dnb/eufemia/src'
import ComponentBox from '../../../../../../shared/tags/ComponentBox'
import { Form, Value, Wizard } from '@dnb/eufemia/src/extensions/forms'
import {
Field,
Form,
Value,
Wizard,
} from '@dnb/eufemia/src/extensions/forms'

export const DynamicSteps = () => {
return (
<ComponentBox>
<Form.Handler defaultData={{ activeSteps: 'group-1' }}>
<Wizard.Container id="my-wizard">
<Wizard.Step
title="Step 1"
activeWhen={{ path: '/activeSteps', hasValue: 'group-1' }}
>
<Form.MainHeading>Step 1</Form.MainHeading>
<Wizard.Buttons />
</Wizard.Step>

<Wizard.Step
title="Step 2"
activeWhen={{ path: '/activeSteps', hasValue: 'group-1' }}
>
<Form.MainHeading>Step 2</Form.MainHeading>
<Wizard.Buttons />
</Wizard.Step>

<Wizard.Step
title="Step 3"
activeWhen={{
path: '/activeSteps',
withValue: (value: string) =>
['group-1', 'group-2'].includes(value),
}}
>
<Form.MainHeading>Step 3</Form.MainHeading>
<Wizard.Buttons />
</Wizard.Step>

<Wizard.Step
title="Step 4"
activeWhen={{ path: '/activeSteps', hasValue: 'group-2' }}
>
<Form.MainHeading>Step 4</Form.MainHeading>
<Wizard.Buttons />
</Wizard.Step>
</Wizard.Container>

<Field.Selection
path="/activeSteps"
variant="button"
optionsLayout="horizontal"
top
>
<Field.Option value="group-1" title="Group 1" />
<Field.Option value="group-2" title="Group 2" />
</Field.Selection>
</Form.Handler>
</ComponentBox>
)
}

export const EditButton = () => {
return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@
showTabs: true
---

import * as Examples from './Examples'

## Demos

See [WizardContainer demo section](/uilib/extensions/forms/Wizard/Container/demos) for examples.
See [WizardContainer demo section](/uilib/extensions/forms/Wizard/Container/demos) for more examples.

### Dynamic steps

<Examples.DynamicSteps />
Loading

0 comments on commit b999dd1

Please sign in to comment.