Skip to content

Commit

Permalink
feat: deprecate StepIndicator v1
Browse files Browse the repository at this point in the history
  • Loading branch information
@langz
langz committed Jan 2, 2023
1 parent 87c61ac commit b53dd60
Show file tree
Hide file tree
Showing 27 changed files with 160 additions and 2,991 deletions.
56 changes: 0 additions & 56 deletions packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/Examples.js
View file
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

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
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 />
4 changes: 2 additions & 2 deletions packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,6 @@ 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
- URL handling is deprecated and is 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.
The documentation is updated and every deprecated property name 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
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

0 comments on commit b53dd60

Please sign in to comment.