diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/Examples.js index 1ddb25a587a..ed520d3c936 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/Examples.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/Examples.js @@ -311,59 +311,3 @@ render() } ) - -export const StepIndicatorUrls = () => - typeof document === - 'undefined' ? null /* because of createBrowserHistory */ : ( - - { - /* 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 ( { - 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(<> - -
Navigate to B
-) -` - } - - ) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/demos-v1.md b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/demos-v1.md deleted file mode 100644 index a4d019dcb3b..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/demos-v1.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -showTabs: true -draft: true ---- - -import { -StepIndicatorV1WithNavigation, -StepIndicatorV1Customized, -StepIndicatorV1Urls, -StepIndicatorV1NoNavigation, -StepIndicatorV1StringsOnly, -StepIndicatorV1CustomRenderer, -} from 'Docs/uilib/components/step-indicator/v1/Examples' - -## Demos v1 - -### StepIndicator with navigation - -Every visited step can be clicked. - - - -### StepIndicator customized - -Completely customized step indicator. - - - -### StepIndicator with urls - -Using urls for visited steps only. - - - -### Default StepIndicator with no navigation - - - -### Default StepIndicator with strings only - - - -### StepIndicator with custom renderer. - - diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/demos.md index 3d59f28017c..435a195990c 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/demos.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/demos.md @@ -7,7 +7,6 @@ StepIndicatorStatic, StepIndicatorStrict, StepIndicatorLoose, StepIndicatorCustomized, -StepIndicatorUrls, StepIndicatorSidebar, StepIndicatorTextOnly, StepIndicatorCustomRenderer, @@ -61,11 +60,3 @@ Completely customized step indicator. ### StepIndicator with a custom renderer. - -### 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). - - diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.md index 927891e9dbf..5a01427d4b3 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.md @@ -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 `` 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. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/properties.md index 3939d63f0d6..3b9584f4caa 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/properties.md @@ -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 (``). 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 (``). 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 diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/v1/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/v1/Examples.js deleted file mode 100644 index 63ed274cb6c..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/v1/Examples.js +++ /dev/null @@ -1,226 +0,0 @@ -/** - * UI lib Component Example - * - */ - -import React from 'react' -import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox' -import { createBrowserHistory } from 'history' - -export const StepIndicatorV1WithNavigation = () => ( - - {` - { - console.log('on_change', currentItem) - }} - data={[ - { - title: 'Om din nye bolig', - }, - { - title: 'Ditt lån og egenkapital', - on_click: ({ currentItem }) => - console.log(currentItem) - }, - { - title: 'Oppsummering', - } - ]} -/> - `} - -) - -export const StepIndicatorV1Customized = () => ( - - {` -function CustomStepIndicator({ children, ...props }) { - const [step, setStep] = React.useState(0) - return ( - <> - setStep(currentItem)} - {...props} - /> -
- {children(step)} -
- - ) -} -render( - {(step) => { - switch (step) { - case 0: - return <>Step One - case 1: - return <>Step Two - default: - return <>Fallback - } - }} -) - `} - -) - -export const StepIndicatorV1Urls = () => - typeof document === - 'undefined' ? null /* because of createBrowserHistory */ : ( - - {` -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 ( { - try { - e.event.preventDefault() - history.push(e.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(<> - -
Navigate to B
-) - `} - - ) - -export const StepIndicatorV1NoNavigation = () => ( - - { - /* @jsx */ ` - - ` - } - -) - -export const StepIndicatorV1StringsOnly = () => ( - - { - /* @jsx */ ` - - ` - } - -) - -export const StepIndicatorV1CustomRenderer = () => ( - - {` - { - console.log('on_change', currentItem) - }} - on_item_render={({ StepItem }) => { - return ( - console.log(e)} - /> - ) - }} - data={[ - { - title: 'Om din nye bolig', - }, - { - title: 'Ditt lån og egenkapital', - on_click: ({ currentItem }) => - console.log(currentItem), - on_render: ({ StepItem, props, params }) => ( - console.log(e)} - /> - ) - }, - { - title: 'Oppsummering', - /* - We can also overwrite the states - is_active: true - is_current: true - */ - } - ]} -/> - `} - -) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js b/packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js index 3a6659123bc..7c52f501f33 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js @@ -26,13 +26,13 @@ import { Input, Textarea, Section, - StepIndicator, ToggleButton, Icon, Button, Switch, Space, GlobalStatus, + Tabs, } from '@dnb/eufemia/src/components' import { save as SaveIcon, @@ -61,21 +61,14 @@ const Header = () => ( Card complaint - - { - console.log('StepIndicator.on_change', e) - }} /> diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicator.js b/packages/dnb-eufemia/src/components/step-indicator/StepIndicator.js index cb17ebe2986..4ff020ec955 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/StepIndicator.js +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicator.js @@ -13,7 +13,6 @@ import { import StepIndicatorSidebar from './StepIndicatorSidebar' import StepIndicatorModal from './StepIndicatorModal' -import StepIndicatorList from './StepIndicatorList' import { StepIndicatorProvider } from './StepIndicatorContext' import { stepIndicatorPropTypes, @@ -43,66 +42,15 @@ export default class StepIndicator extends React.PureComponent { ) } - // Deprecated warning - canWarn = () => - typeof process !== 'undefined' && - process.env.NODE_ENV === 'development' - constructor(props) { super(props) this.state = { - // deprecated - isV1: !props.mode, sidebar_id: props.internalId || props.sidebar_id || makeUniqueId(), } - - if (this.canWarn()) { - // deprecated warning - if (props.active_item !== null) { - warn( - 'StepIndicator: `active_item` is deprecated. Use `current_step` instead.' - ) - } - // deprecated warning - if (props.use_navigation !== null) { - warn( - 'StepIndicator: `use_navigation` is deprecated. Use `mode="strict"` or `mode="loose"` instead.' - ) - } - // deprecated warning - if (props.active_url !== null) { - warn( - 'StepIndicator: The usage of `active_url` is deprecated. You will have to handle your URLs by yourself in the next major version.' - ) - } - } - - const sn = 'show_numbers' - if (typeof props[sn] !== 'undefined') { - warn( - 'StepIndicator: `show_numbers` is deprecated. Use `hide_numbers` instead.' - ) - } } render() { - // deprecated - if (this.state.isV1) { - return ( - -
- -
- - ) - } - if (!this.props.sidebar_id && this.props.mode) { warn( 'StepIndicator needs an unique "sidebar_id" property, also on the ' @@ -113,9 +61,8 @@ export default class StepIndicator extends React.PureComponent { -
+
diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorContext.js b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorContext.js index 6df9f6a2662..c895a396991 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorContext.js +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorContext.js @@ -11,8 +11,8 @@ import { processChildren, extendPropsWithContextInClassComponent, } from '../../shared/component-helper' -import { onMediaQueryChange } from '../../shared/MediaQueryUtils' import { includeValidProps } from '../form-row/FormRowHelpers' +import { onMediaQueryChange } from '../../shared/MediaQueryUtils' // We use this array to filter out unwanted const filterAttributes = Object.keys(stepIndicatorDefaultProps) @@ -39,10 +39,7 @@ const filterAttributes = Object.keys(stepIndicatorDefaultProps) 'innerRef', 'hasSkeletonData', 'filterAttributes', - 'listAttributes', 'onChangeState', - 'isV1', // deprecated - 'activeUrl', // deprecated ]) const StepIndicatorContext = React.createContext(null) @@ -84,24 +81,6 @@ export class StepIndicatorProvider extends React.PureComponent { state.activeStep = parseFloat(props.current_step) || 0 } - /** Deprecated */ - if ( - props.active_item !== null && - props.active_item !== state._active_item - ) { - state.activeStep = parseFloat(props.active_item) || 0 - } - - /** Deprecated */ - if (props.active_url && state.data.length > 0) { - state.activeStep = state.data.reduce((acc, { url }, i) => { - return url && - (url === state.current_step || url === props.active_url) - ? i - : acc - }, parseFloat(state.current_step) || 0) - } - if (!state.listOfReachedSteps.includes(state.activeStep)) { state.listOfReachedSteps.push(state.activeStep) } @@ -114,8 +93,6 @@ export class StepIndicatorProvider extends React.PureComponent { .replace('%count', state.data?.length || 1) state._current_step = props.current_step - state._active_item = props.active_item /** Deprecated */ - state._active_url = props.active_url /** Deprecated */ return state } @@ -141,28 +118,25 @@ export class StepIndicatorProvider extends React.PureComponent { componentDidMount() { this._isMounted = true - // deprecated (remove the check) - if (!this.props.isV1) { - this._mediaQueryListener = onMediaQueryChange( - { - min: '0', - max: 'medium', - }, - (hideSidebar) => { - this.setState({ - hideSidebar, - }) - }, - { runOnInit: true } - ) - - const container = document?.getElementById( - 'sidebar__' + this.props.sidebar_id - ) - this.setState({ - hasSidebar: Boolean(container), - }) - } + this._mediaQueryListener = onMediaQueryChange( + { + min: '0', + max: 'medium', + }, + (hideSidebar) => { + this.setState({ + hideSidebar, + }) + }, + { runOnInit: true } + ) + + const container = document?.getElementById( + 'sidebar__' + this.props.sidebar_id + ) + this.setState({ + hasSidebar: Boolean(container), + }) } componentWillUnmount() { diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem-v1.js b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem-v1.js deleted file mode 100644 index 277dbb13213..00000000000 --- a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem-v1.js +++ /dev/null @@ -1,218 +0,0 @@ -import React from 'react' -import classnames from 'classnames' -import { warn, isTrue, makeUniqueId } from '../../shared/component-helper' - -export class deprecated_v1 { - constructor(inst) { - for (let i in inst) { - this[i] = inst[i] - } - - const { - filterAttributes, - activeStep, - countSteps, - listOfReachedSteps, - - step_title, - - use_navigation, // Deprecated - hide_numbers, - on_item_render, - } = this.context - - const { - currentItemNum, - - url: _url, // Deprecated - url_future, // Deprecated - url_passed, // Deprecated - - inactive, // eslint-disable-line - is_active, - is_current, - title, - - on_render, - - on_click, // eslint-disable-line - on_change, // eslint-disable-line - - ...attributes - } = this.props - - const id = - (this.context.internalId || makeUniqueId()) + '-' + currentItemNum - - Object.keys(attributes).forEach((key) => { - if (filterAttributes.includes(key)) { - delete attributes[key] - } - }) - - let hasPassedAndIsCurrent = isTrue(is_active) - - // Deprecated - let url = _url - if (_url) { - // deprecated warning - if (this.canWarn()) { - warn( - 'StepIndicator: "url", "url_future" and "url_passed" are deprecated. You will have to handle your URLs by yourself in the next major version.' - ) - } - if (currentItemNum > activeStep) { - url = url_future - hasPassedAndIsCurrent = true - } - if (url_passed && currentItemNum < activeStep) { - url = url_passed - hasPassedAndIsCurrent = true - } - } - - if (currentItemNum <= activeStep) { - hasPassedAndIsCurrent = true - } - if (listOfReachedSteps.includes(currentItemNum)) { - hasPassedAndIsCurrent = true - } - - if ( - !hasPassedAndIsCurrent && - currentItemNum > activeStep && - !isTrue(is_active) - ) { - attributes['disabled'] = true - attributes['aria-disabled'] = true - } - attributes.className = classnames( - 'dnb-anchor', - attributes['disabled'] && 'dnb-anchor--no-style', - 'dnb-step-indicator__item-content', - 'dnb-step-indicator__item-content--link' - ) - const aria = step_title - ?.replace('%step', currentItemNum + 1) - .replace('%count', countSteps) - - const StepItemWrapper = (props) => ( - <> - {!isTrue(hide_numbers) && ( - - {`${currentItemNum + 1}. `} - - )} - - {title} - - - ) - - let itemComponent = - - const props = { - StepItem: StepItemWrapper, - itemComponent, - element: itemComponent, - params: attributes, - attributes, - props: this.props, - context: this.context, - } - - if (typeof on_render === 'function') { - itemComponent = on_render(props) - } else if (typeof on_item_render === 'function') { - itemComponent = on_item_render(props) - } - - let child = null - if ( - // Deprecated - isTrue(use_navigation) - ) { - child = ( - - ) - // Deprecated - } else if (url) { - child = ( - - this.onClickHandler({ - event, - item: props, - currentItemNum, - }) - } - {...attributes} - > - {itemComponent} - - ) - } else { - const contentParams = {} - - // To screen readers read both the nr. and the text in one sentence - contentParams.role = 'text' - - child = ( - - {itemComponent} - - ) - } - - const itemParams = {} - if (currentItemNum === activeStep || isTrue(is_current)) { - itemParams['aria-current'] = 'step' - } - - return ( -
  • - {child} - - {aria} - -
    • - ) - } -} diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem.js b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem.js index ce9ca33a853..92e0a13a822 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem.js +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem.js @@ -21,9 +21,6 @@ import { } from '../../components/form-status/FormStatus' import StepIndicatorContext from './StepIndicatorContext' -// Deprecated -import { deprecated_v1 } from './StepIndicatorItem-v1' - export default class StepIndicatorItem extends React.PureComponent { static contextType = StepIndicatorContext @@ -47,20 +44,6 @@ export default class StepIndicatorItem extends React.PureComponent { status_state: PropTypes.oneOf(['warn', 'info', 'error']), currentItemNum: PropTypes.number.isRequired, - - /* Deprecated */ - use_navigation: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.bool, - ]), - /* Deprecated */ - is_active: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - /* Deprecated */ - url: PropTypes.string, - /* Deprecated */ - url_future: PropTypes.string, - /* Deprecated */ - url_passed: PropTypes.string, } static defaultProps = { @@ -79,17 +62,6 @@ export default class StepIndicatorItem extends React.PureComponent { disabled: null, status: null, status_state: 'warn', - - /* Deprecated */ - use_navigation: null, - /* Deprecated */ - is_active: null, - /* Deprecated */ - url: null, - /* Deprecated */ - url_future: null, - /* Deprecated */ - url_passed: null, } constructor(props, context) { @@ -160,17 +132,7 @@ export default class StepIndicatorItem extends React.PureComponent { } } - // Deprecated warning - canWarn = () => - typeof process !== 'undefined' && - process.env.NODE_ENV === 'development' - render() { - // Deprecated - if (this.context.isV1) { - return new deprecated_v1(this) - } - const { mode, filterAttributes, @@ -188,7 +150,6 @@ export default class StepIndicatorItem extends React.PureComponent { title, is_current, - is_active, // Deprecated inactive, disabled, status, @@ -213,9 +174,7 @@ export default class StepIndicatorItem extends React.PureComponent { listOfReachedSteps.includes(currentItemNum) const isNavigateable = mode === 'strict' || mode === 'loose' let isInactive = - isTrue(inactive) || - is_active === false /* deprecated */ || - (mode === 'strict' && !hasPassedAndIsCurrent) + isTrue(inactive) || (mode === 'strict' && !hasPassedAndIsCurrent) let isVisited = currentItemNum < activeStep const id = `${sidebar_id || makeUniqueId()}-${currentItemNum}` @@ -268,11 +227,7 @@ export default class StepIndicatorItem extends React.PureComponent { buttonParams['disabled'] = true } - if ( - (isNavigateable && !isInactive) || - // Deprecated - isTrue(this.context.use_navigation) - ) { + if (isNavigateable && !isInactive) { buttonParams.onClick = ({ event }) => this.onClickHandler({ event, diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorList.js b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorList.js index 06b4aed28dc..f86ae2b819d 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorList.js +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorList.js @@ -28,22 +28,17 @@ export default class StepIndicatorList extends React.PureComponent { skeleton, data, countSteps, - isV1, // deprecated - mainTitle, - listAttributes = {}, + sidebar_id, } = this.context const params = { - // 'aria-label': 'progress', // used before in v1 - ...listAttributes, + sidebar_id, className: classnames( 'dnb-step-indicator', createSkeletonClass('font', skeleton), - createSpacingClasses(listAttributes), + this.context.hasSidebar && createSpacingClasses(this.context), this.context.className, - this.context.class, - listAttributes.className, - listAttributes.class + this.context.class ), } @@ -53,27 +48,21 @@ export default class StepIndicatorList extends React.PureComponent { const Element = mode === 'static' || - // deprecated - (!this.context.isV1 && !this.context.hasSidebar) || + !this.context.hasSidebar || isTrue(this.context.use_navigation) ? 'div' : 'nav' const useParams = Element === 'nav' ? params : listParams - - // deprecated - if (!isV1) { + if (useParams) { // prettier-ignore [useParams]['aria-labelledby'] = combineLabelledBy( - listAttributes, + {}, params.sidebar_id ) // We may use this // params.id = params.sidebar_id + '-list' - } else if (!params['aria-label']) { - // prettier-ignore - [useParams]['aria-label'] = mainTitle } Object.keys(params).forEach((key) => { diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorModal.js b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorModal.js index cee5ff090dd..a547912cfd7 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorModal.js +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorModal.js @@ -71,7 +71,7 @@ export default class StepIndicatorModal extends React.PureComponent { on_close={this.closeHandler} > -
    +

    {this.context.stepsLabelExtended}

    diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorProps.js b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorProps.js index 7100ecaab86..5960834821b 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorProps.js +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorProps.js @@ -18,15 +18,6 @@ export const stepIndicatorPropTypes = { on_click: PropTypes.func, on_render: PropTypes.func, - - /* Deprecated */ - url: PropTypes.string, // Deprecated - /* Deprecated */ - is_active: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // Deprecated - /* Deprecated */ - url_future: PropTypes.string, // Deprecated - /* Deprecated */ - url_passed: PropTypes.string, // Deprecated }) ), ]), @@ -35,13 +26,7 @@ export const stepIndicatorPropTypes = { step_title: PropTypes.string, current_step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - /* Deprecated */ - active_item: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // Deprecated - /* Deprecated */ - active_url: PropTypes.string, // Deprecated - hide_numbers: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - use_navigation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // Deprecated on_item_render: PropTypes.func, no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), @@ -63,10 +48,7 @@ export const stepIndicatorDefaultProps = { step_title_extended: null, step_title: null, current_step: null, - active_item: null, // Deprecated - active_url: null, // Deprecated hide_numbers: false, - use_navigation: null, // Deprecated on_item_render: null, no_animation: null, skeleton: false, diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorSidebar.js b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorSidebar.js index 7e441695b94..10dbc7b1d34 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorSidebar.js +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorSidebar.js @@ -77,7 +77,7 @@ export default class StepIndicatorSidebar extends React.PureComponent {
    { - const active_url = '?b' - const stepIndicatorListData = [ - { - title: 'Aa', - url: '?a', - }, - { - title: 'Bb', - url: '?b', - }, - { - title: 'Cc', - url: '?c', - url_future: '', - }, - ] - const Comp = mount( - - ) - - it('have to match snapshot', () => { - expect(toJson(Comp)).toMatchSnapshot() - }) - - // it('have a "active_url" state have to be same as prop from startup', () => { - // expect(Comp.state().activeUrl).toBe(active_url) - // }) - - it('has a "aria-current" attribute on correct item', () => { - expect( - Comp.find('li.dnb-step-indicator--active') - .instance() - .getAttribute('aria-current') - ).toBe('step') - }) - - it('should validate with ARIA rules', async () => { - expect(await axeComponent(Comp)).toHaveNoViolations() - }) -}) - -describe('StepIndicator component with buttons', () => { - const stepIndicatorListData = [ - { - title: 'Aa', - }, - { - title: 'Bb', - }, - { - title: 'Cc', - }, - ] - const Comp = mount( - - ) - - it('have to match snapshot', () => { - expect(toJson(Comp)).toMatchSnapshot() - }) - - it('has a "aria-current" attribute on correct item', () => { - expect( - Comp.find('li').at(1).hasClass('dnb-step-indicator--active') - ).toBe(true) - }) - - it('has a button tag on active items', () => { - expect(Comp.find('li').first().exists('button')).toBe(true) - expect(Comp.find('li').last().exists('button')).toBe(true) - }) - - it('has a "disabled" attribute on correct item', () => { - expect(Comp.find('li').last().find('[disabled]').exists()).toBe(true) - }) - - it('has a "aria-current" attribute on correct item', () => { - expect( - Comp.find('li.dnb-step-indicator--active') - .instance() - .getAttribute('aria-current') - ).toBe('step') - }) - - it('should validate with ARIA rules', async () => { - expect(await axeComponent(Comp)).toHaveNoViolations() - }) -}) - -describe('StepIndicator scss', () => { - it('have to match snapshot', () => { - const scss = loadScss( - require.resolve('../style/dnb-step-indicator.scss') - ) - expect(scss).toMatchSnapshot() - }) - it('have to match default theme snapshot', () => { - const scss = loadScss( - require.resolve('../style/themes/dnb-step-indicator-theme-ui.scss') - ) - expect(scss).toMatchSnapshot() - }) -}) diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/StepIndicator.test.js b/packages/dnb-eufemia/src/components/step-indicator/__tests__/StepIndicator.test.js index 1af1c786042..07733ba39b1 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/__tests__/StepIndicator.test.js +++ b/packages/dnb-eufemia/src/components/step-indicator/__tests__/StepIndicator.test.js @@ -111,7 +111,19 @@ describe('StepIndicator Sidebar', () => { describe('StepIndicator in general', () => { it('should support spacing props', () => { - render() + const id = 'unique-id-spacing' + render( + <> + + + + ) const element = document.querySelector('.dnb-step-indicator') @@ -120,6 +132,43 @@ describe('StepIndicator in general', () => { 'dnb-space__top--large', ]) }) + + it('should support spacing props with no sidebar', () => { + render( + + ) + + const element = document.querySelector('.dnb-step-indicator__trigger') + + expect(Array.from(element.classList)).toEqual([ + 'dnb-step-indicator__trigger', + 'dnb-space__top--large', + ]) + }) + + it('should not add spacing props to dnb-step-indicator with no sidebar', () => { + render( + + ) + + document.querySelector('button').click() + + const element = document.querySelector('.dnb-step-indicator') + + expect(Array.from(element.classList)).toEqual(['dnb-step-indicator']) + }) }) describe('StepIndicator in loose mode', () => { diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator-v1.test.js.snap b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator-v1.test.js.snap deleted file mode 100644 index 9b90327ddf2..00000000000 --- a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator-v1.test.js.snap +++ /dev/null @@ -1,1489 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`StepIndicator component with buttons have to match snapshot 1`] = ` - - -
    - -
    -
      - -
    1. - - - Steg 1 av 3 - -
      2. -       - -
    2. - - - Steg 2 av 3 - -
      3. -       - -
    3. - - - Steg 3 av 3 - -
      4. -       -
    -
    -     -
    -     -     -`; - -exports[`StepIndicator component with urls have to match snapshot 1`] = ` - - -
    - - - -
    -     -     -`; - -exports[`StepIndicator scss have to match default theme snapshot 1`] = ` -"/* -* StepIndicator theme -* -*/ -/** - * This file is only used to make themes independent - * so that they can get imported individually, without the core styles - * - */ -/* - * Utilities - */ -/* -* Deprecated v1 -* -*/ -.dnb-step-indicator-v1 .dnb-step-indicator__item-content--static { - color: var(--color-emerald-green); } - -.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link { - color: var(--color-sea-green); } - -.dnb-step-indicator-v1 .dnb-step-indicator__item { - margin-left: 4.5rem; } - .dnb-step-indicator-v1 .dnb-step-indicator__item:first-child { - margin-left: 0; } - @media screen and (max-width: 50em) { - .dnb-step-indicator-v1 .dnb-step-indicator__item { - margin-left: 2rem; } } - -.dnb-step-indicator-v1 .dnb-step-indicator::after { - color: var(--color-mint-green); } - -.dnb-step-indicator-v1 .dnb-step-indicator--active.dnb-step-indicator-v1 .dnb-step-indicator__item::after, -.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content::after { - background-color: var(--color-sea-green); } - -.dnb-step-indicator-v1 .dnb-step-indicator span[hidden], -.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content { - font-weight: var(--font-weight-medium); } - .dnb-step-indicator-v1 .dnb-step-indicator span[hidden]:not(:hover), - .dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content:not(:hover) { - color: var(--color-emerald-green); } - -.dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button { - font-weight: var(--font-weight-medium); - --border-color: var(--color-sea-green); - box-shadow: inset 0 0 0 0.125rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - -.dnb-step-indicator-v2 .dnb-step-indicator__item--visited .dnb-button { - background-color: var(--color-pistachio); } - -.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button { - cursor: text; - pointer-events: initial; - user-select: initial; } - .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active { - color: var(--color-black-80); - background-color: var(--color-white); - --border-color: var(--color-black-20); - box-shadow: inset 0 0 0 0.0625rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - -.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { - --border-color: var(--color-black-80); - box-shadow: inset 0 0 0 0.125rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - -html[data-whatinput='keyboard'] -.dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button:not([disabled]):not(:active):not(:hover):focus { - color: var(--color-emerald-green); - background-color: var(--color-mint-green); } - -.dnb-step-indicator-v2 .dnb-step-indicator__label, .dnb-step-indicator-v2 .dnb-step-indicator__label.dnb-p { - font-size: var(--font-size-small); - margin-bottom: 0.5rem; } - -.dnb-step-indicator-v2 .dnb-step-indicator__button__status.dnb-button--secondary { - background-color: var(--color-sand-yellow); } - -.dnb-step-indicator-v2 .dnb-step-indicator__button__status--error.dnb-button--secondary { - background-color: var(--color-fire-red-8); } - -.dnb-step-indicator-v2 .dnb-step-indicator__button__status--info.dnb-button--secondary { - background-color: var(--color-pistachio); } - -.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-button__icon { - align-self: flex-start; - margin-top: 1rem; - margin-right: 0.75rem; } - -.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number, .dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status { - font-weight: var(--font-weight-basis); } - -.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status { - margin-top: 0.5rem; - font-size: var(--font-size-x-small); - line-height: var(--font-size-basis); - color: var(--color-black-80); } -" -`; - -exports[`StepIndicator scss have to match snapshot 1`] = ` -"/* -* DNB StepIndicator -* -*/ -/** - * This file is only used to make components independent - * so that they can get imported individually, without the core styles - * - */ -/* - * Utilities - */ -/* - * Scopes - * - */ -/* - * Document Reset - * - */ -/* -* DNB Button -* -*/ -/* -* DNB icon -* -*/ -/* -* Icon component -* -*/ -.dnb-icon { - display: inline-block; - vertical-align: middle; - font-size: 1rem; - line-height: 1rem; - color: inherit; - width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } - -/* -* DNB Tooltip -* -*/ -.dnb-tooltip { - font-family: var(--font-family-default); - font-weight: var(--font-weight-basis); - font-size: var(--font-size-small); - font-style: normal; - line-height: var(--line-height-basis); - color: var(--color-black-80, #333); - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - /** - * Ensure consistency and use the same as HTML reset -> html {...} - * between base and code package - */ - -moz-tab-size: 4; - tab-size: 4; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - word-break: break-word; - /** - * 1. Remove repeating backgrounds in all browsers (opinionated). - * 2. Add border box sizing in all browsers (opinionated). - */ - /** - * 1. Add text decoration inheritance in all browsers (opinionated). - * 2. Add vertical alignment inheritance in all browsers (opinionated). - */ - margin: 0; - padding: 0; } - .dnb-tooltip *, - .dnb-tooltip ::before, - .dnb-tooltip ::after { - background-repeat: no-repeat; - /* 1 */ - box-sizing: border-box; - /* 2 */ } - .dnb-tooltip ::before, - .dnb-tooltip ::after { - text-decoration: inherit; - /* 1 */ - vertical-align: inherit; - /* 2 */ } - -/* -* Tooltip component -* -*/ -.dnb-tooltip { - position: absolute; - z-index: 3100; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 0 1rem; - opacity: 0; - visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } - -@keyframes show-tooltip { - from { - opacity: 0; } - to { - opacity: 1; } } - -@keyframes hide-tooltip { - from { - opacity: 1; } - to { - opacity: 0; - visibility: hidden; } } - -/* -* DNB FormStatus -* -*/ -.dnb-form-status { - font-family: var(--font-family-default); - font-weight: var(--font-weight-basis); - font-size: var(--font-size-small); - font-style: normal; - line-height: var(--line-height-basis); - color: var(--color-black-80, #333); - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - /** - * Ensure consistency and use the same as HTML reset -> html {...} - * between base and code package - */ - -moz-tab-size: 4; - tab-size: 4; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - word-break: break-word; - /** - * 1. Remove repeating backgrounds in all browsers (opinionated). - * 2. Add border box sizing in all browsers (opinionated). - */ - /** - * 1. Add text decoration inheritance in all browsers (opinionated). - * 2. Add vertical alignment inheritance in all browsers (opinionated). - */ - margin: 0; - padding: 0; } - .dnb-form-status *, - .dnb-form-status ::before, - .dnb-form-status ::after { - background-repeat: no-repeat; - /* 1 */ - box-sizing: border-box; - /* 2 */ } - .dnb-form-status ::before, - .dnb-form-status ::after { - text-decoration: inherit; - /* 1 */ - vertical-align: inherit; - /* 2 */ } - -/* - * FormStatus component - * - */ -:root { - --form-status-radius: 0.25rem; } - -.dnb-form-status { - display: flex; - opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } - -.dnb-button { - font-family: var(--font-family-default); - font-weight: var(--font-weight-basis); - font-size: var(--font-size-small); - font-style: normal; - line-height: var(--line-height-basis); - color: var(--color-black-80, #333); - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - /** - * Ensure consistency and use the same as HTML reset -> html {...} - * between base and code package - */ - -moz-tab-size: 4; - tab-size: 4; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - word-break: break-word; - /** - * 1. Remove repeating backgrounds in all browsers (opinionated). - * 2. Add border box sizing in all browsers (opinionated). - */ - /** - * 1. Add text decoration inheritance in all browsers (opinionated). - * 2. Add vertical alignment inheritance in all browsers (opinionated). - */ - margin: 0; - padding: 0; } - .dnb-button *, - .dnb-button ::before, - .dnb-button ::after { - background-repeat: no-repeat; - /* 1 */ - box-sizing: border-box; - /* 2 */ } - .dnb-button ::before, - .dnb-button ::after { - text-decoration: inherit; - /* 1 */ - vertical-align: inherit; - /* 2 */ } - -/* -* Button component -* -*/ -:root { - --button-font-size: var(--font-size-basis); - --button-font-size-small: var(--font-size-small); - --button-width: 2.5rem; - --button-height: 2.5rem; - --button-width--small: 1.5rem; - --button-height--small: 1.5rem; - --button-width--medium: 2rem; - --button-height--medium: 2rem; - --button-width--large: 3rem; - --button-height--large: 3rem; - --button-icon-size: 1rem; - --button-border-width: 0.0625rem; - --button-border-width--hover: 0.1875rem; - --button-border-radius: calc(var(--button-height) / 2); - --button-border-radius--small: calc(var(--button-height--small) / 2); - --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } - -.dnb-button { - position: relative; - user-select: none; - -webkit-user-select: none; - cursor: pointer; - white-space: nowrap; - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--button-width); - height: auto; - padding: 0; - border: var(--button-border-width) solid transparent; - border-radius: var(--button-border-radius); - text-decoration: none; - font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } - -/* Firefox includes a hidden border which messes up button dimensions */ -button.dnb-button::-moz-focus-inner { - border: none; } - -.dnb-step-indicator { - font-family: var(--font-family-default); - font-weight: var(--font-weight-basis); - font-size: var(--font-size-small); - font-style: normal; - line-height: var(--line-height-basis); - color: var(--color-black-80, #333); - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - /** - * Ensure consistency and use the same as HTML reset -> html {...} - * between base and code package - */ - -moz-tab-size: 4; - tab-size: 4; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - word-break: break-word; - /** - * 1. Remove repeating backgrounds in all browsers (opinionated). - * 2. Add border box sizing in all browsers (opinionated). - */ - /** - * 1. Add text decoration inheritance in all browsers (opinionated). - * 2. Add vertical alignment inheritance in all browsers (opinionated). - */ - margin: 0; - padding: 0; } - .dnb-step-indicator *, - .dnb-step-indicator ::before, - .dnb-step-indicator ::after { - background-repeat: no-repeat; - /* 1 */ - box-sizing: border-box; - /* 2 */ } - .dnb-step-indicator ::before, - .dnb-step-indicator ::after { - text-decoration: inherit; - /* 1 */ - vertical-align: inherit; - /* 2 */ } - -/* - * StepIndicator component - * - */ -/* - * Deprecated v1 - * - */ -.dnb-step-indicator-v1 .dnb-step-indicator { - position: relative; - z-index: 1; - display: block; - padding: 0; } - .dnb-step-indicator-v1 .dnb-step-indicator__list { - display: flex; - flex-direction: row; - align-items: stretch; - padding: 0; - margin: 0; - list-style: none; } - .dnb-spacing .dnb-step-indicator-v1 .dnb-step-indicator__list, - .dnb-spacing .dnb-step-indicator-v1 .dnb-step-indicator__list li { - margin-top: 0; - margin-bottom: 0; } - .dnb-step-indicator-v1 .dnb-step-indicator__item { - align-self: flex-end; } - .dnb-step-indicator-v1 .dnb-step-indicator__item-content { - font-size: var(--font-size-basis); } - .dnb-step-indicator-v1 .dnb-step-indicator__item-contenta, .dnb-step-indicator-v1 .dnb-step-indicator__item-content.dnb-anchor, .dnb-step-indicator-v1 .dnb-step-indicator__item-content--static, .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link { - position: relative; - z-index: 2; - display: inline-flex; - align-items: flex-end; - margin: 0; - padding: 0.25rem 0.25rem; - height: 100%; - border-bottom: none; - text-decoration: none; - box-shadow: none; } - .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link.dnb-anchor { - line-height: var(--line-height-basis); } - .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus[disabled], - html:not([data-whatintent='touch']) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus[disabled] { - cursor: not-allowed; } - .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]), - html:not([data-whatintent='touch']) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]) { - outline: none; } - html[data-whatinput='keyboard'] .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]) { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled])::after, - html:not([data-whatintent='touch']) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled])::after { - content: none; } - .dnb-step-indicator-v1 .dnb-step-indicator__item-content--number { - padding-right: 0.25rem; - white-space: nowrap; } - .dnb-step-indicator-v1 .dnb-step-indicator__item-content--text { - text-align: left; } - .dnb-step-indicator-v1 .dnb-step-indicator__item-content::after { - content: ''; - position: absolute; - z-index: 1; - left: 0; - bottom: 0; - width: 100%; - height: 3px; - border-radius: 1.5px; } - .dnb-step-indicator-v1 .dnb-step-indicator::after { - content: ''; - position: absolute; - z-index: -1; - left: -100vw; - bottom: 0; - width: 100vw; - height: 1px; - color: var(--color-black); - background-color: currentColor; - box-shadow: 100vw 0 0 0 currentColor; } - -@media screen and (min-width: 50.1em) { - .dnb-step-indicator__sidebar { - max-width: 20rem; - margin-right: var(--spacing-x-large); } - .dnb-step-indicator__sidebar .dnb-step-indicator__item { - min-width: 320px; } } - -@media screen and (max-width: 50.1em) { - .dnb-step-indicator__sidebar--ssr-skeleton { - visibility: hidden; - overflow: hidden; - width: 0; - height: 5.5rem; } } - -.dnb-step-indicator-v2 .dnb-step-indicator__list { - display: flex; - flex-direction: column; - padding: 0; - margin: 0; - list-style: none; } - -.dnb-step-indicator-v2 .dnb-step-indicator__trigger { - display: flex; - flex-direction: column; } - -.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button, -.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button { - overflow: hidden; - justify-content: space-between; - border-radius: 0.25rem; - will-change: height; - transition: height 400ms var(--easing-default); } - .dnb-step-indicator-v2 .dnb-step-indicator__trigger__button .dnb-button__text, - .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button .dnb-button__text { - text-align: left; } - .dnb-step-indicator-v2 .dnb-step-indicator__trigger__button.dnb-button--has-icon .dnb-button__text, - .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button.dnb-button--has-icon .dnb-button__text { - margin-right: 1rem; } - .dnb-step-indicator-v2 .dnb-step-indicator__trigger__button .dnb-button__alignment, - .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button .dnb-button__alignment { - order: 2; } - html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__trigger__button, html[data-visual-test] - .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button { - transition-duration: 1ms !important; } - -.dnb-step-indicator-v2 .dnb-step-indicator__trigger button.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button { - margin-top: 0.5rem; } - -.dnb-step-indicator-v2 .dnb-step-indicator__item { - margin-bottom: 1rem; } - .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button__icon { - opacity: 1; - transition: opacity 1400ms ease-in-out; } - html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button__icon { - transition-duration: 1ms !important; } - .dnb-step-indicator-v2 .dnb-step-indicator__item:not(.dnb-step-indicator__item--visited) .dnb-button:not(.dnb-step-indicator__button__status) -.dnb-button__icon { - opacity: 0; } - -.dnb-step-indicator-v2 .dnb-step-indicator__item-content { - display: flex; - flex-wrap: nowrap; - padding: 0.5rem 0; } - .dnb-step-indicator-v2 .dnb-step-indicator__item-content__number { - padding-right: 0.5rem; - white-space: nowrap; } - .dnb-step-indicator-v2 .dnb-step-indicator__item-content__wrapper { - display: flex; - flex-direction: column; } - -.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status { - color: var(--color-black-80); - font-size: var(--font-size-x-small); } -" -`; diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap index 9e66397d9cc..2e87edd4e01 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap +++ b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap @@ -9,13 +9,11 @@ exports[`StepIndicator in loose mode have to match snapshot 1`] = ` sidebar_id="unique-id-loose-snapshot" >
    ,