Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: deprecate StepIndicator v1 #1840

Merged
merged 2 commits into from
Jan 6, 2023
Merged

feat: deprecate StepIndicator v1 #1840

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee1964a
feat: deprecate StepIndicator v1
langz Jan 4, 2023
a9f2045
adds support for aria-labelledby
langz Jan 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 0 additions & 56 deletions packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/Examples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,59 +311,3 @@ render(<StepIndicatorWithRouter />)
}
</ComponentBox>
)

export const StepIndicatorUrls = () =>
typeof document ===
'undefined' ? null /* because of createBrowserHistory */ : (
<ComponentBox
data-visual-test="step-indicator-urls"
scope={{ createBrowserHistory }}
hideCode
useRender
>
{
/* jsx */ `
const history = createBrowserHistory()
const StepIndicatorWithUrl = () => {
const [activeUrl, setActiveUrl] = React.useState(history.location.search)
React.useState(() => {
const unlisten = history.listen(({ search }) => {
setActiveUrl(search)
})
return () => unlisten()
}, [])
return (<StepIndicator
active_url={activeUrl || '?a'}
on_change={({ event, item }) => {
try {
event.preventDefault()
history.push(item.url)
} catch (e) {
//
}
}}
data={[
{
title: 'Om din nye bolig',
url: '?a'
},
{
title: 'Ditt lån og egenkapital',
url: '?b'
},
{
title: 'Oppsummering',
url: '?c',
url_future: ''
}
]}
/>)
}
render(<>
<StepIndicatorWithUrl />
<Section spacing style_type="lavender"><Anchor href="?b">Navigate to B</Anchor></Section>
</>)
`
}
</ComponentBox>
)
45 changes: 0 additions & 45 deletions ...s/dnb-design-system-portal/src/docs/uilib/components/step-indicator/demos-v1.md
View file
Open in desktop

This file was deleted.

9 changes: 0 additions & 9 deletions ...ages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/demos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ StepIndicatorStatic,
StepIndicatorStrict,
StepIndicatorLoose,
StepIndicatorCustomized,
StepIndicatorUrls,
StepIndicatorSidebar,
StepIndicatorTextOnly,
StepIndicatorCustomRenderer,
Expand Down Expand Up @@ -61,11 +60,3 @@ Completely customized step indicator.
### StepIndicator with a custom renderer.

<StepIndicatorCustomRenderer />

### StepIndicator with urls

**NB:** The URL support is deprecated. You have to handle this kind of logic internally in your application from v10 of `@dnb/eufemia`.

You find more [v1 demos here](/uilib/components/step-indicator/demos-v1).

<StepIndicatorUrls />
3 changes: 0 additions & 3 deletions packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,3 @@ The API has been simplified and some properties have to be changed by the next m
- Add a property called `mode="strict"` (choose your mode)
- Add a property called `sidebar_id` with an unique ID.
- Optional, place `<StepIndicator.Sidebar sidebar_id="unique-step-indicator" />` in your layout.
- URL handling is deprecated and will be removed in v10

The documentation is updated and every property name that will be deprecated is clearly marked with a strike-through line. You will get a console warning during development when you use outdated properties.
45 changes: 19 additions & 26 deletions ...dnb-design-system-portal/src/docs/uilib/components/step-indicator/properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,29 @@ showTabs: true

## Component Properties

| Properties | Description |
| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Properties | Description |
| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mode` | _(required)_ defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely. |
| `data` | _(required)_ defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above. |
| `sidebar_id` | _(required)_ a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID. |
| `current_step` | _(optional)_ defines the active number marked step starting by 0. Defaults to `0`. |
| `hide_numbers` | _(optional)_ define whether to show automatically counted numbers or not. Defaults to `false`. |
| `no_animation` | _(optional)_ if set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to false. |
| `on_item_render` | _(optional)_ callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`. |
| ~~`use_navigation`~~ | _(deprecated)_ use `mode="static"` instead – if set to true, every achieved step (and the current step) has an item with a [Button](/uilib/components/button) so the user can navigate back and forth. |
| ~~`active_item`~~ | _(deprecated)_ defines the active number marked step starting by 0. Defaults to `0`. |
| ~~`active_url`~~ | _(deprecated)_ defines the active url marked step. |
| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
| `data` | _(required)_ defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above. |
| `sidebar_id` | _(required)_ a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID. |
| `current_step` | _(optional)_ defines the active number marked step starting by 0. Defaults to `0`. |
| `hide_numbers` | _(optional)_ define whether to show automatically counted numbers or not. Defaults to `false`. |
| `no_animation` | _(optional)_ if set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to false. |
| `on_item_render` | _(optional)_ callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`. |
| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |

## Steps Parameters

| Parameters | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title` | _(required)_ the title as a string or React element. |
| `is_current` | _(optional)_ if set to `true`, this item step will be set as the current current selected step. This can be used instead of `current_step` on the component itself. |
| `inactive` | _(optional)_ if set to `true`, this item step will be handled as an inactive step and will not be clickable. Defaults to false. |
| `disabled` | _(optional)_ if set to `true`, this item step will be visible as an disabled button and will not be clickable. Defaults to false. |
| `status` | _(optional)_ a status text. |
| `status_state` | _(optional)_ In case the status state should be `info` or `error`. Defaults to `warn`. |
| `on_render` | _(optional)_ callback function to manipulate or wrap a certain item. Has to return a React Node. |
| `on_click` | _(optional)_ event function that gets invoked once the users clicks on the active item. |
| ~~`is_active`~~ | _(deprecated)_ if set to `is_active`: true, this item step will be handled as an active (activated) step and may be clickable . |
| ~~`url`~~ | _(deprecated)_ sets the url, showing on every step, if not `url_future` is set. |
| ~~`url_future`~~ | _(deprecated)_ sets the url, showing only on the future steps. Can be used to _reset_ the future steps individually. |
| ~~`url_passed`~~ | _(deprecated)_ sets the url, showing only on the passed steps. Can be used to _reset_ the passed steps individually. |
| Parameters | Description |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --- |
| `title` | _(required)_ the title as a string or React element. |
| `is_current` | _(optional)_ if set to `true`, this item step will be set as the current current selected step. This can be used instead of `current_step` on the component itself. |
| `inactive` | _(optional)_ if set to `true`, this item step will be handled as an inactive step and will not be clickable. Defaults to false. |
| `disabled` | _(optional)_ if set to `true`, this item step will be visible as an disabled button and will not be clickable. Defaults to false. |
| `status` | _(optional)_ a status text. |
| `status_state` | _(optional)_ In case the status state should be `info` or `error`. Defaults to `warn`. |
| `on_render` | _(optional)_ callback function to manipulate or wrap a certain item. Has to return a React Node. |
| `on_click` | _(optional)_ event function that gets invoked once the users clicks on the active item. | | |

## Steps example

Expand Down
Loading