From 8f7b8b84c324f0346d439ad7db48e06154a071d0 Mon Sep 17 00:00:00 2001 From: chisom chima Date: Wed, 20 Mar 2024 11:57:19 +0100 Subject: [PATCH 01/80] chore: update modal accessibility and translation chore: remove unnecessary files in PR chore: update modal accessibility and translation --- components/modal/i18n/en.pot | 12 +++++++ components/modal/src/modal/close-button.js | 3 ++ components/modal/src/modal/modal.js | 23 +++++++++++- components/modal/src/modal/modal.test.js | 42 +++++++++++++++++++++- 4 files changed, 78 insertions(+), 2 deletions(-) create mode 100644 components/modal/i18n/en.pot diff --git a/components/modal/i18n/en.pot b/components/modal/i18n/en.pot new file mode 100644 index 0000000000..1104ac28a2 --- /dev/null +++ b/components/modal/i18n/en.pot @@ -0,0 +1,12 @@ +msgid "" +msgstr "" +"Project-Id-Version: i18next-conv\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=utf-8\n" +"Content-Transfer-Encoding: 8bit\n" +"Plural-Forms: nplurals=2; plural=(n != 1)\n" +"POT-Creation-Date: 2024-05-24T12:07:29.190Z\n" +"PO-Revision-Date: 2024-05-24T12:07:29.190Z\n" + +msgid "Close modal dialog" +msgstr "Close modal dialog" diff --git a/components/modal/src/modal/close-button.js b/components/modal/src/modal/close-button.js index 45dac34256..4e57272211 100644 --- a/components/modal/src/modal/close-button.js +++ b/components/modal/src/modal/close-button.js @@ -2,6 +2,7 @@ import { colors, theme } from '@dhis2/ui-constants' import { IconCross16 } from '@dhis2/ui-icons' import PropTypes from 'prop-types' import React from 'react' +import i18n from '../locales/index.js' const createClickHandler = (onClick) => (event) => { onClick({}, event) @@ -9,8 +10,10 @@ const createClickHandler = (onClick) => (event) => { export const CloseButton = ({ onClick }) => ( +import React, { useState, useEffect, useRef } from 'react' + +export const Tab = React.forwardRef( + ( + { icon, onClick, selected, disabled, children, className, dataTest }, + ref + ) => { + let tabRef = useRef(null) + if (ref) { + tabRef = ref + } + const [isOverflowing, setIsOverflowing] = useState(false) + + useEffect(() => { + const checkOverflow = () => { + const isOverflow = + tabRef.current.scrollWidth > tabRef.current.clientWidth + setIsOverflowing(isOverflow) + } + checkOverflow() + }, []) + + return ( + + ) + } ) Tab.defaultProps = { @@ -149,4 +177,4 @@ Tab.propTypes = { onClick: PropTypes.func, } -export { Tab } +Tab.displayName = 'Tab' From b24e0f559e95bea22bf988970b46c2ecb7301a45 Mon Sep 17 00:00:00 2001 From: Redet Getachew Date: Wed, 3 Jul 2024 12:56:37 +0300 Subject: [PATCH 28/80] docs: improve documentation for CalendarInput callback function usage (#1538) --- components/calendar/src/stories/calendar-input.stories.js | 2 ++ docs/docs/components/calendar-input.md | 1 + 2 files changed, 3 insertions(+) diff --git a/components/calendar/src/stories/calendar-input.stories.js b/components/calendar/src/stories/calendar-input.stories.js index 13cc451670..8462ff11a2 100644 --- a/components/calendar/src/stories/calendar-input.stories.js +++ b/components/calendar/src/stories/calendar-input.stories.js @@ -34,6 +34,7 @@ const buildCalendar = date={date} locale={locale} calendar={calendar} + onDateSelect={()=>{}} /> ) @@ -85,6 +86,7 @@ export const IslamicWithArabic = () => { locale="ar-SD" calendar="islamic-civil" clearable={true} + onDateSelect={()=>{}} /> ) diff --git a/docs/docs/components/calendar-input.md b/docs/docs/components/calendar-input.md index 607a3af15d..9b35c65d5a 100644 --- a/docs/docs/components/calendar-input.md +++ b/docs/docs/components/calendar-input.md @@ -123,6 +123,7 @@ The Gregorian with initial date is then generated with this code. calendar="gregory" locale="en-GB" date="2021-10-13" + onDateSelect={handelDateChange} /> ``` From bddbdaeb63180b80a4352a256e7916ab75f633e9 Mon Sep 17 00:00:00 2001 From: Diana Nanyanzi <31903212+d-rita@users.noreply.github.com> Date: Wed, 3 Jul 2024 19:15:55 +0300 Subject: [PATCH 29/80] feat(menu): memoise menu's childrenToRender function and add valid role checks (#1539) * feat: optimise menu and add valid role checks - memoise menu's childrenToRender function - add comments explaining menu child checks and the props passed to them - avoid passing custom props to native HTML elements - move separator role to the divider component - check if role exists on menu children and log a console warning if not - update tests * fix(lint): lint issue in master --------- Co-authored-by: Mozafar Haider --- .../src/stories/calendar-input.stories.js | 4 +- components/divider/src/divider.js | 2 +- .../menu/src/menu-divider/menu-divider.js | 2 +- .../menu/src/menu/__tests__/menu.test.js | 2 +- components/menu/src/menu/helpers.js | 14 ++- components/menu/src/menu/menu.js | 88 ++++++++++--------- components/menu/src/menu/use-menu.js | 1 + 7 files changed, 65 insertions(+), 48 deletions(-) diff --git a/components/calendar/src/stories/calendar-input.stories.js b/components/calendar/src/stories/calendar-input.stories.js index 8462ff11a2..f9f6ed6d5e 100644 --- a/components/calendar/src/stories/calendar-input.stories.js +++ b/components/calendar/src/stories/calendar-input.stories.js @@ -34,7 +34,7 @@ const buildCalendar = date={date} locale={locale} calendar={calendar} - onDateSelect={()=>{}} + onDateSelect={() => {}} /> ) @@ -86,7 +86,7 @@ export const IslamicWithArabic = () => { locale="ar-SD" calendar="islamic-civil" clearable={true} - onDateSelect={()=>{}} + onDateSelect={() => {}} /> ) diff --git a/components/divider/src/divider.js b/components/divider/src/divider.js index 6311fe77ff..1db09c1b3e 100644 --- a/components/divider/src/divider.js +++ b/components/divider/src/divider.js @@ -17,7 +17,7 @@ const flipMargin = (margin) => { const Divider = ({ className, dataTest, dense, margin }) => { return ( -
+
- - ) - } -) - -SelectorBarItem.displayName = 'SelectorBarItem' + padding-block: 0; + padding-inline-start: ${spacers.dp8}; + padding-inline-end: ${spacers.dp12}; + font-size: 14px; + line-height: 16px; + border: none; + box-shadow: 0px 0px 0px 1px ${colors.grey400}; + } + + .selector-bar-item.openable { + cursor: pointer; + } + + .selector-bar-item:disabled { + cursor: not-allowed; + } + + .label { + color: ${colors.grey600}; + } + + .value { + padding-inline-start: ${spacers.dp8}; + } + + .clear-icon { + display: flex; + align-items: center; + margin-inline-start: ${spacers.dp4}; + padding: ${spacers.dp4}; + cursor: pointer; + } + .clear-icon svg path { + fill: ${colors.grey500}; + } + + .clear-icon:hover svg path { + fill: ${colors.grey700}; + } + + .toggle-icon { + display: flex; + margin-inline-start: ${spacers.dp4}; + height: 100%; + align-items: center; + } + `} + + ) +} SelectorBarItem.defaultProps = { dataTest: 'dhis2-ui-selectorbaritem', diff --git a/components/selector-bar/src/selector-bar/selector-bar.js b/components/selector-bar/src/selector-bar/selector-bar.js index 7573de496d..558a90530c 100644 --- a/components/selector-bar/src/selector-bar/selector-bar.js +++ b/components/selector-bar/src/selector-bar/selector-bar.js @@ -2,7 +2,7 @@ import { Button } from '@dhis2-ui/button' import { colors, spacers } from '@dhis2/ui-constants' import cx from 'classnames' import PropTypes from 'prop-types' -import React, { useRef, useMemo } from 'react' +import React, { useRef, useState, useEffect } from 'react' import i18n from '../locales/index.js' const ClearSelection = ({ disabled, onClick }) => { @@ -38,25 +38,38 @@ export const SelectorBar = ({ additionalContent, ariaLabel, }) => { - const chipContainer = useRef(null) - - const childrenRefs = useMemo( - () => React.Children.map(children, () => React.createRef()), - [children] - ) + const container = useRef(null) + + const [childrenToFocus, setChildrenToFocus] = useState([]) + + useEffect(() => { + if (container.current) { + const controlsDiv = container.current.querySelector('.controls') + if (controlsDiv) { + const childElements = Array.from(controlsDiv.children) + childElements.forEach((child) => { + child.tabIndex = -1 + }) + setChildrenToFocus(childElements) + } + } + }, [children]) const handleKeyDown = (event) => { const currentFocus = document.activeElement - if (chipContainer.current && chipContainer.current === currentFocus) { - if (childrenRefs.length > 0 && childrenRefs[0].current) { - childrenRefs[0].current.focus() + if (container.current && container.current === currentFocus) { + if (childrenToFocus.length > 0 && childrenToFocus[0]) { + childrenToFocus[0].focus() } return } + if (!childrenToFocus.length) { + return + } - const currentIndex = childrenRefs.findIndex( - (ref) => ref.current === currentFocus + const currentIndex = childrenToFocus.findIndex( + (element) => element === currentFocus ) if (currentIndex === -1) { @@ -65,15 +78,16 @@ export const SelectorBar = ({ if (event.key === 'ArrowRight') { event.preventDefault() - const nextIndex = (currentIndex + 1) % childrenRefs.length - childrenRefs[nextIndex].current.focus() + const nextIndex = (currentIndex + 1) % childrenToFocus.length + childrenToFocus[nextIndex].focus() } if (event.key === 'ArrowLeft') { event.preventDefault() const prevIndex = - (currentIndex - 1 + childrenRefs.length) % childrenRefs.length - childrenRefs[prevIndex].current.focus() + (currentIndex - 1 + childrenToFocus.length) % + childrenToFocus.length + childrenToFocus[prevIndex].focus() } } @@ -88,16 +102,17 @@ export const SelectorBar = ({ data-test={dataTest} onKeyDown={handleKeyDown} tabIndex={0} - ref={chipContainer} + ref={container} role="toolbar" aria-label={ariaLabel} >
- {React.Children.map(children, (child, index) => + {/* {React.Children.map(children, (child, index) => React.cloneElement(child, { ref: childrenRefs[index], }) - )} + )} */} + {children} {onClearSelectionClick && ( Date: Thu, 4 Jul 2024 10:47:42 +0000 Subject: [PATCH 33/80] chore(release): cut 9.10.1 [skip release] ## [9.10.1](https://github.com/dhis2/ui/compare/v9.10.0...v9.10.1) (2024-07-04) ### Bug Fixes * **selectorbar:** handle components other than SelectorBarItem correctly as children ([#1534](https://github.com/dhis2/ui/issues/1534)) ([7c78ac7](https://github.com/dhis2/ui/commit/7c78ac729b763e1c230d50828cc2728f0ed360e7)) * do not hijack input when inside a menu ([#1551](https://github.com/dhis2/ui/issues/1551)) ([7a27d3d](https://github.com/dhis2/ui/commit/7a27d3df5e4812ee01a3c2a9b1d69a3bab1ce96e)) --- CHANGELOG.md | 8 ++ collections/forms/package.json | 20 ++-- collections/ui/package.json | 98 +++++++++---------- components/alert/package.json | 8 +- components/box/package.json | 4 +- components/button/package.json | 12 +-- components/calendar/package.json | 16 +-- components/card/package.json | 4 +- components/center/package.json | 4 +- components/checkbox/package.json | 8 +- components/chip/package.json | 4 +- components/cover/package.json | 4 +- components/css/package.json | 4 +- components/divider/package.json | 4 +- components/field/package.json | 10 +- components/file-input/package.json | 16 +-- components/header-bar/package.json | 30 +++--- components/help/package.json | 4 +- components/input/package.json | 16 +-- components/intersection-detector/package.json | 4 +- components/label/package.json | 6 +- components/layer/package.json | 6 +- components/legend/package.json | 6 +- components/loader/package.json | 4 +- components/logo/package.json | 4 +- components/menu/package.json | 16 +-- components/modal/package.json | 14 +-- components/node/package.json | 6 +- components/notice-box/package.json | 6 +- .../organisation-unit-tree/package.json | 10 +- components/pagination/package.json | 10 +- components/popover/package.json | 8 +- components/popper/package.json | 4 +- components/portal/package.json | 2 +- components/radio/package.json | 4 +- components/required/package.json | 4 +- components/segmented-control/package.json | 4 +- components/select/package.json | 30 +++--- components/selector-bar/package.json | 22 ++--- components/sharing-dialog/package.json | 34 +++---- components/status-icon/package.json | 8 +- components/switch/package.json | 8 +- components/tab/package.json | 8 +- components/table/package.json | 6 +- components/tag/package.json | 4 +- components/text-area/package.json | 14 +-- components/tooltip/package.json | 8 +- components/transfer/package.json | 14 +-- components/user-avatar/package.json | 4 +- constants/package.json | 2 +- docs/package.json | 2 +- icons/package.json | 2 +- package.json | 2 +- storybook/package.json | 6 +- 54 files changed, 287 insertions(+), 279 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ce611efbdf..31f6e63262 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## [9.10.1](https://github.com/dhis2/ui/compare/v9.10.0...v9.10.1) (2024-07-04) + + +### Bug Fixes + +* **selectorbar:** handle components other than SelectorBarItem correctly as children ([#1534](https://github.com/dhis2/ui/issues/1534)) ([7c78ac7](https://github.com/dhis2/ui/commit/7c78ac729b763e1c230d50828cc2728f0ed360e7)) +* do not hijack input when inside a menu ([#1551](https://github.com/dhis2/ui/issues/1551)) ([7a27d3d](https://github.com/dhis2/ui/commit/7a27d3df5e4812ee01a3c2a9b1d69a3bab1ce96e)) + # [9.10.0](https://github.com/dhis2/ui/compare/v9.9.1...v9.10.0) (2024-07-03) diff --git a/collections/forms/package.json b/collections/forms/package.json index 53365e32e5..0a87c3b6d4 100644 --- a/collections/forms/package.json +++ b/collections/forms/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2/ui-forms", - "version": "9.10.0", + "version": "9.10.1", "main": "./build/cjs/index.js", "module": "./build/es/index.js", "sideEffects": [ @@ -35,15 +35,15 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/button": "9.10.0", - "@dhis2-ui/checkbox": "9.10.0", - "@dhis2-ui/field": "9.10.0", - "@dhis2-ui/file-input": "9.10.0", - "@dhis2-ui/input": "9.10.0", - "@dhis2-ui/radio": "9.10.0", - "@dhis2-ui/select": "9.10.0", - "@dhis2-ui/switch": "9.10.0", - "@dhis2-ui/text-area": "9.10.0", + "@dhis2-ui/button": "9.10.1", + "@dhis2-ui/checkbox": "9.10.1", + "@dhis2-ui/field": "9.10.1", + "@dhis2-ui/file-input": "9.10.1", + "@dhis2-ui/input": "9.10.1", + "@dhis2-ui/radio": "9.10.1", + "@dhis2-ui/select": "9.10.1", + "@dhis2-ui/switch": "9.10.1", + "@dhis2-ui/text-area": "9.10.1", "classnames": "^2.3.1", "final-form": "^4.20.2", "prop-types": "^15.7.2", diff --git a/collections/ui/package.json b/collections/ui/package.json index 77cfb90131..32fe438eb5 100644 --- a/collections/ui/package.json +++ b/collections/ui/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2/ui", - "version": "9.10.0", + "version": "9.10.1", "main": "./build/cjs/index.js", "module": "./build/es/index.js", "exports": { @@ -21,54 +21,54 @@ "build": "d2-app-scripts build" }, "dependencies": { - "@dhis2-ui/alert": "9.10.0", - "@dhis2-ui/box": "9.10.0", - "@dhis2-ui/button": "9.10.0", - "@dhis2-ui/calendar": "9.10.0", - "@dhis2-ui/card": "9.10.0", - "@dhis2-ui/center": "9.10.0", - "@dhis2-ui/checkbox": "9.10.0", - "@dhis2-ui/chip": "9.10.0", - "@dhis2-ui/cover": "9.10.0", - "@dhis2-ui/css": "9.10.0", - "@dhis2-ui/divider": "9.10.0", - "@dhis2-ui/field": "9.10.0", - "@dhis2-ui/file-input": "9.10.0", - "@dhis2-ui/header-bar": "9.10.0", - "@dhis2-ui/help": "9.10.0", - "@dhis2-ui/input": "9.10.0", - "@dhis2-ui/intersection-detector": "9.10.0", - "@dhis2-ui/label": "9.10.0", - "@dhis2-ui/layer": "9.10.0", - "@dhis2-ui/legend": "9.10.0", - "@dhis2-ui/loader": "9.10.0", - "@dhis2-ui/logo": "9.10.0", - "@dhis2-ui/menu": "9.10.0", - "@dhis2-ui/modal": "9.10.0", - "@dhis2-ui/node": "9.10.0", - "@dhis2-ui/notice-box": "9.10.0", - "@dhis2-ui/organisation-unit-tree": "9.10.0", - "@dhis2-ui/pagination": "9.10.0", - "@dhis2-ui/popover": "9.10.0", - "@dhis2-ui/popper": "9.10.0", - "@dhis2-ui/portal": "9.10.0", - "@dhis2-ui/radio": "9.10.0", - "@dhis2-ui/required": "9.10.0", - "@dhis2-ui/segmented-control": "9.10.0", - "@dhis2-ui/select": "9.10.0", - "@dhis2-ui/selector-bar": "9.10.0", - "@dhis2-ui/sharing-dialog": "9.10.0", - "@dhis2-ui/switch": "9.10.0", - "@dhis2-ui/tab": "9.10.0", - "@dhis2-ui/table": "9.10.0", - "@dhis2-ui/tag": "9.10.0", - "@dhis2-ui/text-area": "9.10.0", - "@dhis2-ui/tooltip": "9.10.0", - "@dhis2-ui/transfer": "9.10.0", - "@dhis2-ui/user-avatar": "9.10.0", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-forms": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2-ui/alert": "9.10.1", + "@dhis2-ui/box": "9.10.1", + "@dhis2-ui/button": "9.10.1", + "@dhis2-ui/calendar": "9.10.1", + "@dhis2-ui/card": "9.10.1", + "@dhis2-ui/center": "9.10.1", + "@dhis2-ui/checkbox": "9.10.1", + "@dhis2-ui/chip": "9.10.1", + "@dhis2-ui/cover": "9.10.1", + "@dhis2-ui/css": "9.10.1", + "@dhis2-ui/divider": "9.10.1", + "@dhis2-ui/field": "9.10.1", + "@dhis2-ui/file-input": "9.10.1", + "@dhis2-ui/header-bar": "9.10.1", + "@dhis2-ui/help": "9.10.1", + "@dhis2-ui/input": "9.10.1", + "@dhis2-ui/intersection-detector": "9.10.1", + "@dhis2-ui/label": "9.10.1", + "@dhis2-ui/layer": "9.10.1", + "@dhis2-ui/legend": "9.10.1", + "@dhis2-ui/loader": "9.10.1", + "@dhis2-ui/logo": "9.10.1", + "@dhis2-ui/menu": "9.10.1", + "@dhis2-ui/modal": "9.10.1", + "@dhis2-ui/node": "9.10.1", + "@dhis2-ui/notice-box": "9.10.1", + "@dhis2-ui/organisation-unit-tree": "9.10.1", + "@dhis2-ui/pagination": "9.10.1", + "@dhis2-ui/popover": "9.10.1", + "@dhis2-ui/popper": "9.10.1", + "@dhis2-ui/portal": "9.10.1", + "@dhis2-ui/radio": "9.10.1", + "@dhis2-ui/required": "9.10.1", + "@dhis2-ui/segmented-control": "9.10.1", + "@dhis2-ui/select": "9.10.1", + "@dhis2-ui/selector-bar": "9.10.1", + "@dhis2-ui/sharing-dialog": "9.10.1", + "@dhis2-ui/switch": "9.10.1", + "@dhis2-ui/tab": "9.10.1", + "@dhis2-ui/table": "9.10.1", + "@dhis2-ui/tag": "9.10.1", + "@dhis2-ui/text-area": "9.10.1", + "@dhis2-ui/tooltip": "9.10.1", + "@dhis2-ui/transfer": "9.10.1", + "@dhis2-ui/user-avatar": "9.10.1", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-forms": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "prop-types": "^15.7.2" }, "peerDependencies": { diff --git a/components/alert/package.json b/components/alert/package.json index a9f2317855..bd867f4807 100644 --- a/components/alert/package.json +++ b/components/alert/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/alert", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Alert", "repository": { "type": "git", @@ -33,9 +33,9 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/portal": "9.10.0", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2-ui/portal": "9.10.1", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/box/package.json b/components/box/package.json index 8fa7df5616..ca1bde433d 100644 --- a/components/box/package.json +++ b/components/box/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/box", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Box", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/button/package.json b/components/button/package.json index b9539974fa..a0d2cd159f 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/button", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Button", "repository": { "type": "git", @@ -33,11 +33,11 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/layer": "9.10.0", - "@dhis2-ui/loader": "9.10.0", - "@dhis2-ui/popper": "9.10.0", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2-ui/layer": "9.10.1", + "@dhis2-ui/loader": "9.10.1", + "@dhis2-ui/popper": "9.10.1", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/calendar/package.json b/components/calendar/package.json index 4368544f64..85be7427c9 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/calendar", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Calendar", "repository": { "type": "git", @@ -33,15 +33,15 @@ "styled-jsx": "^4" }, "dependencies": { - "@dhis2-ui/button": "9.10.0", - "@dhis2-ui/card": "9.10.0", - "@dhis2-ui/input": "9.10.0", - "@dhis2-ui/layer": "9.10.0", - "@dhis2-ui/popper": "9.10.0", + "@dhis2-ui/button": "9.10.1", + "@dhis2-ui/card": "9.10.1", + "@dhis2-ui/input": "9.10.1", + "@dhis2-ui/layer": "9.10.1", + "@dhis2-ui/popper": "9.10.1", "@dhis2/multi-calendar-dates": "^1.2.3", "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/card/package.json b/components/card/package.json index 484e08fab9..193931624f 100644 --- a/components/card/package.json +++ b/components/card/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/card", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Card", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/center/package.json b/components/center/package.json index 7e3e4b65e2..abcd2f9604 100644 --- a/components/center/package.json +++ b/components/center/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/center", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Center", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/checkbox/package.json b/components/checkbox/package.json index 5a714f88d8..9b6f7f78a4 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/checkbox", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Checkbox", "repository": { "type": "git", @@ -33,9 +33,9 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/field": "9.10.0", - "@dhis2-ui/required": "9.10.0", - "@dhis2/ui-constants": "9.10.0", + "@dhis2-ui/field": "9.10.1", + "@dhis2-ui/required": "9.10.1", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/chip/package.json b/components/chip/package.json index 3321994a4e..f1e347f405 100644 --- a/components/chip/package.json +++ b/components/chip/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/chip", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Chip", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/cover/package.json b/components/cover/package.json index f16c478436..2729ca5077 100644 --- a/components/cover/package.json +++ b/components/cover/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/cover", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Cover", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/css/package.json b/components/css/package.json index d29eb4c9a2..cd5c529e25 100644 --- a/components/css/package.json +++ b/components/css/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/css", - "version": "9.10.0", + "version": "9.10.1", "description": "UI CSS", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/divider/package.json b/components/divider/package.json index f88a984fe8..163687d546 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/divider", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Divider", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/field/package.json b/components/field/package.json index 90d15f1876..6fe48af599 100644 --- a/components/field/package.json +++ b/components/field/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/field", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Field", "repository": { "type": "git", @@ -33,10 +33,10 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/box": "9.10.0", - "@dhis2-ui/help": "9.10.0", - "@dhis2-ui/label": "9.10.0", - "@dhis2/ui-constants": "9.10.0", + "@dhis2-ui/box": "9.10.1", + "@dhis2-ui/help": "9.10.1", + "@dhis2-ui/label": "9.10.1", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/file-input/package.json b/components/file-input/package.json index 76db6fa1e8..0d4cdc012b 100644 --- a/components/file-input/package.json +++ b/components/file-input/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/file-input", - "version": "9.10.0", + "version": "9.10.1", "description": "UI FileInput", "repository": { "type": "git", @@ -34,13 +34,13 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/button": "9.10.0", - "@dhis2-ui/field": "9.10.0", - "@dhis2-ui/label": "9.10.0", - "@dhis2-ui/loader": "9.10.0", - "@dhis2-ui/status-icon": "9.10.0", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2-ui/button": "9.10.1", + "@dhis2-ui/field": "9.10.1", + "@dhis2-ui/label": "9.10.1", + "@dhis2-ui/loader": "9.10.1", + "@dhis2-ui/status-icon": "9.10.1", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/header-bar/package.json b/components/header-bar/package.json index b4b55ee7fd..fb03d87e74 100644 --- a/components/header-bar/package.json +++ b/components/header-bar/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/header-bar", - "version": "9.10.0", + "version": "9.10.1", "description": "UI HeaderBar", "repository": { "type": "git", @@ -34,21 +34,21 @@ "styled-jsx": "^4" }, "dependencies": { - "@dhis2-ui/box": "9.10.0", - "@dhis2-ui/button": "9.10.0", - "@dhis2-ui/card": "9.10.0", - "@dhis2-ui/center": "9.10.0", - "@dhis2-ui/divider": "9.10.0", - "@dhis2-ui/input": "9.10.0", - "@dhis2-ui/layer": "9.10.0", - "@dhis2-ui/loader": "9.10.0", - "@dhis2-ui/logo": "9.10.0", - "@dhis2-ui/menu": "9.10.0", - "@dhis2-ui/modal": "9.10.0", - "@dhis2-ui/user-avatar": "9.10.0", + "@dhis2-ui/box": "9.10.1", + "@dhis2-ui/button": "9.10.1", + "@dhis2-ui/card": "9.10.1", + "@dhis2-ui/center": "9.10.1", + "@dhis2-ui/divider": "9.10.1", + "@dhis2-ui/input": "9.10.1", + "@dhis2-ui/layer": "9.10.1", + "@dhis2-ui/loader": "9.10.1", + "@dhis2-ui/logo": "9.10.1", + "@dhis2-ui/menu": "9.10.1", + "@dhis2-ui/modal": "9.10.1", + "@dhis2-ui/user-avatar": "9.10.1", "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "moment": "^2.29.1", "prop-types": "^15.7.2" diff --git a/components/help/package.json b/components/help/package.json index c20125b676..7e61008fee 100644 --- a/components/help/package.json +++ b/components/help/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/help", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Help", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/input/package.json b/components/input/package.json index 4cb43bd827..51eabb768e 100644 --- a/components/input/package.json +++ b/components/input/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/input", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Input", "repository": { "type": "git", @@ -33,13 +33,13 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/box": "9.10.0", - "@dhis2-ui/field": "9.10.0", - "@dhis2-ui/input": "9.10.0", - "@dhis2-ui/loader": "9.10.0", - "@dhis2-ui/status-icon": "9.10.0", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2-ui/box": "9.10.1", + "@dhis2-ui/field": "9.10.1", + "@dhis2-ui/input": "9.10.1", + "@dhis2-ui/loader": "9.10.1", + "@dhis2-ui/status-icon": "9.10.1", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/intersection-detector/package.json b/components/intersection-detector/package.json index 5002467252..00ec727e16 100644 --- a/components/intersection-detector/package.json +++ b/components/intersection-detector/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/intersection-detector", - "version": "9.10.0", + "version": "9.10.1", "description": "UI IntersectionDetector", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/label/package.json b/components/label/package.json index 3a9bc3bed6..4f94f57640 100644 --- a/components/label/package.json +++ b/components/label/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/label", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Label", "repository": { "type": "git", @@ -33,8 +33,8 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/required": "9.10.0", - "@dhis2/ui-constants": "9.10.0", + "@dhis2-ui/required": "9.10.1", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/layer/package.json b/components/layer/package.json index f300a7a6be..cc32127295 100644 --- a/components/layer/package.json +++ b/components/layer/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/layer", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Layer", "repository": { "type": "git", @@ -33,8 +33,8 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/portal": "9.10.0", - "@dhis2/ui-constants": "9.10.0", + "@dhis2-ui/portal": "9.10.1", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/legend/package.json b/components/legend/package.json index da2d1261a0..125655b2c3 100644 --- a/components/legend/package.json +++ b/components/legend/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/legend", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Legend", "repository": { "type": "git", @@ -33,8 +33,8 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/required": "9.10.0", - "@dhis2/ui-constants": "9.10.0", + "@dhis2-ui/required": "9.10.1", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/loader/package.json b/components/loader/package.json index 6aa08c1b08..f9d8501410 100644 --- a/components/loader/package.json +++ b/components/loader/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/loader", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Loaders", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/logo/package.json b/components/logo/package.json index 0d736e1d7e..05a420fa0c 100644 --- a/components/logo/package.json +++ b/components/logo/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/logo", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Logo", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/menu/package.json b/components/menu/package.json index 5dbcd54d92..3f57aa6214 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/menu", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Menu", "repository": { "type": "git", @@ -33,13 +33,13 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/card": "9.10.0", - "@dhis2-ui/divider": "9.10.0", - "@dhis2-ui/layer": "9.10.0", - "@dhis2-ui/popper": "9.10.0", - "@dhis2-ui/portal": "9.10.0", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2-ui/card": "9.10.1", + "@dhis2-ui/divider": "9.10.1", + "@dhis2-ui/layer": "9.10.1", + "@dhis2-ui/popper": "9.10.1", + "@dhis2-ui/portal": "9.10.1", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/modal/package.json b/components/modal/package.json index f42744f6de..4a019c6b9e 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/modal", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Modal", "repository": { "type": "git", @@ -33,12 +33,12 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/card": "9.10.0", - "@dhis2-ui/center": "9.10.0", - "@dhis2-ui/layer": "9.10.0", - "@dhis2-ui/portal": "9.10.0", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2-ui/card": "9.10.1", + "@dhis2-ui/center": "9.10.1", + "@dhis2-ui/layer": "9.10.1", + "@dhis2-ui/portal": "9.10.1", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/node/package.json b/components/node/package.json index 4137d6820d..d680a2f419 100644 --- a/components/node/package.json +++ b/components/node/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/node", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Node", "repository": { "type": "git", @@ -33,8 +33,8 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/loader": "9.10.0", - "@dhis2/ui-constants": "9.10.0", + "@dhis2-ui/loader": "9.10.1", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/notice-box/package.json b/components/notice-box/package.json index 378dca749f..0e24683cec 100644 --- a/components/notice-box/package.json +++ b/components/notice-box/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/notice-box", - "version": "9.10.0", + "version": "9.10.1", "description": "UI NoticeBox", "repository": { "type": "git", @@ -33,8 +33,8 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/organisation-unit-tree/package.json b/components/organisation-unit-tree/package.json index d78267eee3..66454ade83 100644 --- a/components/organisation-unit-tree/package.json +++ b/components/organisation-unit-tree/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/organisation-unit-tree", - "version": "9.10.0", + "version": "9.10.1", "description": "UI OrganisationUnitTree", "repository": { "type": "git", @@ -35,10 +35,10 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/checkbox": "9.10.0", - "@dhis2-ui/loader": "9.10.0", - "@dhis2-ui/node": "9.10.0", - "@dhis2/ui-constants": "9.10.0", + "@dhis2-ui/checkbox": "9.10.1", + "@dhis2-ui/loader": "9.10.1", + "@dhis2-ui/node": "9.10.1", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/pagination/package.json b/components/pagination/package.json index 60e3df668f..8edf886717 100644 --- a/components/pagination/package.json +++ b/components/pagination/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/pagination", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Pagination", "repository": { "type": "git", @@ -34,10 +34,10 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/button": "9.10.0", - "@dhis2-ui/select": "9.10.0", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2-ui/button": "9.10.1", + "@dhis2-ui/select": "9.10.1", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/popover/package.json b/components/popover/package.json index ba990cd9cf..b72a64de17 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/popover", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Popover", "repository": { "type": "git", @@ -33,9 +33,9 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/layer": "9.10.0", - "@dhis2-ui/popper": "9.10.0", - "@dhis2/ui-constants": "9.10.0", + "@dhis2-ui/layer": "9.10.1", + "@dhis2-ui/popper": "9.10.1", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/popper/package.json b/components/popper/package.json index bdaf38f9ee..41045d77f0 100644 --- a/components/popper/package.json +++ b/components/popper/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/popper", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Popper", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "@popperjs/core": "^2.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2", diff --git a/components/portal/package.json b/components/portal/package.json index c92d4d500a..7a1156c132 100644 --- a/components/portal/package.json +++ b/components/portal/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/portal", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Portal", "repository": { "type": "git", diff --git a/components/radio/package.json b/components/radio/package.json index 5ab1f08fc5..dd91baa37c 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/radio", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Radio", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/required/package.json b/components/required/package.json index ac2d6a72fb..7ad9e02fce 100644 --- a/components/required/package.json +++ b/components/required/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/required", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Required", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/segmented-control/package.json b/components/segmented-control/package.json index d416c5d35b..c366358e3e 100644 --- a/components/segmented-control/package.json +++ b/components/segmented-control/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/segmented-control", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Segmented Control", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/select/package.json b/components/select/package.json index 6ae6522c67..3171d67441 100644 --- a/components/select/package.json +++ b/components/select/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/select", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Select", "repository": { "type": "git", @@ -33,21 +33,21 @@ "styled-jsx": "^4" }, "dependencies": { - "@dhis2-ui/box": "9.10.0", - "@dhis2-ui/button": "9.10.0", - "@dhis2-ui/card": "9.10.0", - "@dhis2-ui/checkbox": "9.10.0", - "@dhis2-ui/chip": "9.10.0", - "@dhis2-ui/field": "9.10.0", - "@dhis2-ui/input": "9.10.0", - "@dhis2-ui/layer": "9.10.0", - "@dhis2-ui/loader": "9.10.0", - "@dhis2-ui/popper": "9.10.0", - "@dhis2-ui/status-icon": "9.10.0", - "@dhis2-ui/tooltip": "9.10.0", + "@dhis2-ui/box": "9.10.1", + "@dhis2-ui/button": "9.10.1", + "@dhis2-ui/card": "9.10.1", + "@dhis2-ui/checkbox": "9.10.1", + "@dhis2-ui/chip": "9.10.1", + "@dhis2-ui/field": "9.10.1", + "@dhis2-ui/input": "9.10.1", + "@dhis2-ui/layer": "9.10.1", + "@dhis2-ui/loader": "9.10.1", + "@dhis2-ui/popper": "9.10.1", + "@dhis2-ui/status-icon": "9.10.1", + "@dhis2-ui/tooltip": "9.10.1", "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/selector-bar/package.json b/components/selector-bar/package.json index 0775dd6da3..7236508dcf 100644 --- a/components/selector-bar/package.json +++ b/components/selector-bar/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/selector-bar", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Select", "repository": { "type": "git", @@ -33,21 +33,21 @@ "styled-jsx": "^4" }, "dependencies": { - "@dhis2-ui/button": "9.10.0", - "@dhis2-ui/card": "9.10.0", - "@dhis2-ui/popper": "9.10.0", - "@dhis2-ui/layer": "9.10.0", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2-ui/button": "9.10.1", + "@dhis2-ui/card": "9.10.1", + "@dhis2-ui/popper": "9.10.1", + "@dhis2-ui/layer": "9.10.1", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "@testing-library/react": "^12.1.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, "devDependencies": { - "@dhis2-ui/css": "9.10.0", - "@dhis2-ui/menu": "9.10.0", - "@dhis2-ui/organisation-unit-tree": "9.10.0", - "@dhis2-ui/select": "9.10.0", + "@dhis2-ui/css": "9.10.1", + "@dhis2-ui/menu": "9.10.1", + "@dhis2-ui/organisation-unit-tree": "9.10.1", + "@dhis2-ui/select": "9.10.1", "@dhis2/d2-i18n": "^1.1.0", "@testing-library/jest-dom": "^5.16.1", "react": "16.13", diff --git a/components/sharing-dialog/package.json b/components/sharing-dialog/package.json index 16848a9d2a..647ed1f104 100644 --- a/components/sharing-dialog/package.json +++ b/components/sharing-dialog/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/sharing-dialog", - "version": "9.10.0", + "version": "9.10.1", "description": "UI SharingDialog", "repository": { "type": "git", @@ -35,22 +35,22 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/box": "9.10.0", - "@dhis2-ui/button": "9.10.0", - "@dhis2-ui/card": "9.10.0", - "@dhis2-ui/divider": "9.10.0", - "@dhis2-ui/input": "9.10.0", - "@dhis2-ui/layer": "9.10.0", - "@dhis2-ui/menu": "9.10.0", - "@dhis2-ui/modal": "9.10.0", - "@dhis2-ui/notice-box": "9.10.0", - "@dhis2-ui/popper": "9.10.0", - "@dhis2-ui/select": "9.10.0", - "@dhis2-ui/tab": "9.10.0", - "@dhis2-ui/tooltip": "9.10.0", - "@dhis2-ui/user-avatar": "9.10.0", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2-ui/box": "9.10.1", + "@dhis2-ui/button": "9.10.1", + "@dhis2-ui/card": "9.10.1", + "@dhis2-ui/divider": "9.10.1", + "@dhis2-ui/input": "9.10.1", + "@dhis2-ui/layer": "9.10.1", + "@dhis2-ui/menu": "9.10.1", + "@dhis2-ui/modal": "9.10.1", + "@dhis2-ui/notice-box": "9.10.1", + "@dhis2-ui/popper": "9.10.1", + "@dhis2-ui/select": "9.10.1", + "@dhis2-ui/tab": "9.10.1", + "@dhis2-ui/tooltip": "9.10.1", + "@dhis2-ui/user-avatar": "9.10.1", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "@react-hook/size": "^2.1.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" diff --git a/components/status-icon/package.json b/components/status-icon/package.json index e7d6962292..72be316c63 100644 --- a/components/status-icon/package.json +++ b/components/status-icon/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/status-icon", - "version": "9.10.0", + "version": "9.10.1", "description": "UI StatusIcon", "repository": { "type": "git", @@ -33,9 +33,9 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/loader": "9.10.0", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2-ui/loader": "9.10.1", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/switch/package.json b/components/switch/package.json index 2873dca511..e0ad4aed3e 100644 --- a/components/switch/package.json +++ b/components/switch/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/switch", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Switch", "repository": { "type": "git", @@ -33,9 +33,9 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/field": "9.10.0", - "@dhis2-ui/required": "9.10.0", - "@dhis2/ui-constants": "9.10.0", + "@dhis2-ui/field": "9.10.1", + "@dhis2-ui/required": "9.10.1", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/tab/package.json b/components/tab/package.json index 8415af903f..fd936a7826 100644 --- a/components/tab/package.json +++ b/components/tab/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/tab", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Tabs", "repository": { "type": "git", @@ -32,10 +32,10 @@ "styled-jsx": "^4" }, "dependencies": { - "@dhis2-ui/tooltip": "9.10.0", + "@dhis2-ui/tooltip": "9.10.1", "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/table/package.json b/components/table/package.json index 26d0731ddf..d94d94dd9f 100644 --- a/components/table/package.json +++ b/components/table/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/table", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Table", "repository": { "type": "git", @@ -34,8 +34,8 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/tag/package.json b/components/tag/package.json index 5cc84062df..9eb457b247 100644 --- a/components/tag/package.json +++ b/components/tag/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/tag", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Tag", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/text-area/package.json b/components/text-area/package.json index 96079a4a4d..191afff9a1 100644 --- a/components/text-area/package.json +++ b/components/text-area/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/text-area", - "version": "9.10.0", + "version": "9.10.1", "description": "UI TextArea", "repository": { "type": "git", @@ -33,12 +33,12 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/box": "9.10.0", - "@dhis2-ui/field": "9.10.0", - "@dhis2-ui/loader": "9.10.0", - "@dhis2-ui/status-icon": "9.10.0", - "@dhis2/ui-constants": "9.10.0", - "@dhis2/ui-icons": "9.10.0", + "@dhis2-ui/box": "9.10.1", + "@dhis2-ui/field": "9.10.1", + "@dhis2-ui/loader": "9.10.1", + "@dhis2-ui/status-icon": "9.10.1", + "@dhis2/ui-constants": "9.10.1", + "@dhis2/ui-icons": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/tooltip/package.json b/components/tooltip/package.json index f93a5c0d93..620a17a2fb 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/tooltip", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Tooltip", "repository": { "type": "git", @@ -33,9 +33,9 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/popper": "9.10.0", - "@dhis2-ui/portal": "9.10.0", - "@dhis2/ui-constants": "9.10.0", + "@dhis2-ui/popper": "9.10.1", + "@dhis2-ui/portal": "9.10.1", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/transfer/package.json b/components/transfer/package.json index 19fef58893..d05045a334 100644 --- a/components/transfer/package.json +++ b/components/transfer/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/transfer", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Transfer", "repository": { "type": "git", @@ -33,12 +33,12 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/button": "9.10.0", - "@dhis2-ui/field": "9.10.0", - "@dhis2-ui/input": "9.10.0", - "@dhis2-ui/intersection-detector": "9.10.0", - "@dhis2-ui/loader": "9.10.0", - "@dhis2/ui-constants": "9.10.0", + "@dhis2-ui/button": "9.10.1", + "@dhis2-ui/field": "9.10.1", + "@dhis2-ui/input": "9.10.1", + "@dhis2-ui/intersection-detector": "9.10.1", + "@dhis2-ui/loader": "9.10.1", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/user-avatar/package.json b/components/user-avatar/package.json index e98b04c4d8..a6278ec094 100644 --- a/components/user-avatar/package.json +++ b/components/user-avatar/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/user-avatar", - "version": "9.10.0", + "version": "9.10.1", "description": "UI User Avatar", "repository": { "type": "git", @@ -34,7 +34,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.10.0", + "@dhis2/ui-constants": "9.10.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/constants/package.json b/constants/package.json index 660d06e0af..0b9629c653 100644 --- a/constants/package.json +++ b/constants/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2/ui-constants", - "version": "9.10.0", + "version": "9.10.1", "description": "Constants used in the UI libs", "main": "./build/cjs/index.js", "module": "./build/es/index.js", diff --git a/docs/package.json b/docs/package.json index 45c295197b..0fe7837ab9 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "ui-docusaurus", - "version": "9.10.0", + "version": "9.10.1", "private": true, "description": "UI Docusaurus", "repository": { diff --git a/icons/package.json b/icons/package.json index 3666cd0d24..0737afbdf1 100644 --- a/icons/package.json +++ b/icons/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2/ui-icons", - "version": "9.10.0", + "version": "9.10.1", "description": "Icons used in the UI libs", "main": "./build/cjs/react/index.js", "module": "./build/es/react/index.js", diff --git a/package.json b/package.json index 9f785fdf98..ad0a7224e6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2/ui-root", - "version": "9.10.0", + "version": "9.10.1", "repository": { "type": "git", "url": "https://github.com/dhis2/ui.git" diff --git a/storybook/package.json b/storybook/package.json index 9e6d6bc60d..b7bea969b4 100644 --- a/storybook/package.json +++ b/storybook/package.json @@ -1,6 +1,6 @@ { "name": "ui-storybook", - "version": "9.10.0", + "version": "9.10.1", "description": "UI Storybook", "repository": { "type": "git", @@ -23,8 +23,8 @@ "@babel/plugin-proposal-class-properties": "^7.13.0", "@babel/plugin-proposal-private-methods": "^7.13.0", "@babel/plugin-proposal-private-property-in-object": "^7.14.0", - "@dhis2-ui/css": "9.10.0", - "@dhis2/ui-constants": "9.10.0", + "@dhis2-ui/css": "9.10.1", + "@dhis2/ui-constants": "9.10.1", "@fontsource/roboto": "^4.5.0", "@storybook/addon-a11y": "^6.3.7", "@storybook/addon-console": "^1.2.3", From 0dec7a3dfe25812783e7948a4718c93104e4cf0f Mon Sep 17 00:00:00 2001 From: Mohammer5 Date: Wed, 17 Apr 2024 06:31:24 +0800 Subject: [PATCH 34/80] refactor(storybook): replace "storiesOf" with new api --- .../CheckboxFieldFF.e3e.stories.js | 52 + .../CheckboxFieldFF.stories.e2e.js | 54 - .../FileInputFieldFF.stories.e2e.js | 18 +- .../InputFieldFF/InputFieldFF.stories.e2e.js | 28 +- .../MultiSelectFieldFF.stories.e2e.js | 30 +- .../RadioFieldFF/RadioFieldFF.stories.e2e.js | 66 +- .../SingleSelectFieldFF.stories.e2e.js | 29 +- .../SwitchFieldFF.stories.e2e.js | 88 +- .../TextAreaFieldFF.stories.e2e.js | 36 +- .../src/alert-bar/alert-bar.stories.e2e.js | 94 +- .../alert-stack/alert-stack.stories.e2e.js | 7 +- components/box/src/box.stories.e2e.js | 15 +- .../button-strip/button-strip.stories.e2e.js | 7 +- .../button/src/button/button.stories.e2e.js | 44 +- .../dropdown-button.stories.e2e.js | 124 +- .../split-button/split-button.stories.e2e.js | 119 +- components/card/src/card.stories.e2e.js | 6 +- .../checkbox-field.stories.e2e.js | 57 +- .../src/checkbox/checkbox.stories.e2e.js | 95 +- components/chip/src/chip.stories.e2e.js | 17 +- .../css-variables.stories.e2e.js | 87 +- .../field-group/field-group.stories.e2e.js | 6 +- .../src/field-set/field-set.stories.e2e.js | 6 +- .../field/src/field/field.stories.e2e.js | 6 +- .../file-input-field-with-list.stories.e2e.js | 79 +- .../file-input-field.stories.e2e.js | 23 +- .../src/file-input/file-input.stories.e2e.js | 63 +- .../file-list/file-list-item.stories.e2e.js | 67 +- .../file-list-placeholder.stories.e2e.js | 6 +- .../src/file-list/file-list.stories.e2e.js | 6 +- components/help/src/help.stories.e2e.js | 4 +- .../input-field/input-field.stories.e2e.js | 6 +- .../input/src/input/input.stories.e2e.js | 65 +- components/label/src/label.stories.e2e.js | 7 +- components/legend/src/legend.stories.e2e.js | 15 +- components/menu/src/menu/menu.stories.e2e.js | 4 +- .../modal-actions.stories.e2e.js | 6 +- .../modal-content.stories.e2e.js | 6 +- .../modal-title/modal-title.stories.e2e.js | 6 +- .../modal/src/modal/modal.stories.e2e.js | 95 +- components/node/src/node.stories.e2e.js | 55 +- .../notice-box/src/notice-box.stories.e2e.js | 7 +- .../children_as_child_nodes.stories.e2e.js | 6 +- .../displaying_loading_error.stories.e2e.js | 53 +- .../src/__e2e__/force_reload.stories.e2e.js | 6 +- .../src/__e2e__/highlight.stories.e2e.js | 6 +- .../src/__e2e__/loading_state.stories.e2e.js | 6 +- .../__e2e__/multi_selection.stories.e2e.js | 8 +- .../src/__e2e__/no_selection.stories.e2e.js | 57 +- .../path_based_filtering.stories.e2e.js | 71 +- .../__e2e__/single_selection.stories.e2e.js | 6 +- .../src/__e2e__/tree_api.stories.e2e.js | 6 +- components/radio/src/radio.stories.e2e.js | 73 +- .../multi-select-field.stories.e2e.js | 83 +- .../multi-select/multi-select.stories.e2e.js | 681 +- .../single-select-field.stories.e2e.js | 83 +- .../single-select.stories.e2e.js | 633 +- .../switch-field/switch-field.stories.e2e.js | 6 +- .../switch/src/switch/switch.stories.e2e.js | 71 +- .../tab/src/tab-bar/tab-bar.stories.e2e.js | 53 +- components/tab/src/tab/tab.stories.e2e.js | 19 +- components/tag/src/tag.stories.e2e.js | 25 +- .../text-area-field.stories.e2e.js | 6 +- .../src/text-area/text-area.stories.e2e.js | 25 +- package.json | 5 +- storybook/config/main.js | 43 +- storybook/config/manager.js | 2 +- storybook/package.json | 34 +- storybook/src/babel-config.js | 11 +- storybook/src/load-stories.js | 23 +- storybook/src/webpack-config.js | 8 +- yarn.lock | 18439 +++++++++------- 72 files changed, 11881 insertions(+), 10278 deletions(-) create mode 100644 collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.e3e.stories.js delete mode 100644 collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.stories.e2e.js diff --git a/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.e3e.stories.js b/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.e3e.stories.js new file mode 100644 index 0000000000..9dcb79c5b7 --- /dev/null +++ b/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.e3e.stories.js @@ -0,0 +1,52 @@ +import React from 'react' +import { Field } from 'react-final-form' +import { formDecorator } from '../formDecorator.js' +import { hasValue } from '../validators/index.js' +import { CheckboxFieldFF } from './CheckboxFieldFF.js' + +// https://github.com/final-form/react-final-form-arrays/issues/111 +const initialValue = ['yes'] + +export default { title: 'TestingCheckbox', decorators: [formDecorator] } +export const Unchecked = () => ( + +) +export const Checked = () => ( + +) +export const UncheckedWithValue = () => ( + +) +export const CheckedWithValue = () => ( + +) diff --git a/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.stories.e2e.js b/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.stories.e2e.js deleted file mode 100644 index 07d8978c80..0000000000 --- a/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.stories.e2e.js +++ /dev/null @@ -1,54 +0,0 @@ -import { storiesOf } from '@storybook/react' -import React from 'react' -import { Field } from 'react-final-form' -import { formDecorator } from '../formDecorator.js' -import { hasValue } from '../validators/index.js' -import { CheckboxFieldFF } from './CheckboxFieldFF.js' - -// https://github.com/final-form/react-final-form-arrays/issues/111 -const initialValue = ['yes'] - -storiesOf('Testing:Checkbox', module) - .addDecorator(formDecorator) - .add('Unchecked', () => ( - - )) - .add('Checked ', () => ( - - )) - .add('Unchecked with value', () => ( - - )) - .add('Checked with value', () => ( - - )) diff --git a/collections/forms/src/FileInputFieldFF/FileInputFieldFF.stories.e2e.js b/collections/forms/src/FileInputFieldFF/FileInputFieldFF.stories.e2e.js index 77c62bb192..030c4440a7 100644 --- a/collections/forms/src/FileInputFieldFF/FileInputFieldFF.stories.e2e.js +++ b/collections/forms/src/FileInputFieldFF/FileInputFieldFF.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { CheckboxFieldFF } from '../CheckboxFieldFF/CheckboxFieldFF.js' @@ -13,7 +12,7 @@ import { TextAreaFieldFF } from '../TextAreaFieldFF/TextAreaFieldFF.js' import { composeValidators, email, hasValue } from '../validators/index.js' import { FileInputFieldFF } from './FileInputFieldFF.js' -const StandardForm = ({ values }) => { +const Form = ({ values }) => { return (
{ ) } -storiesOf('Testing:FileInput', module) - .addDecorator(formDecorator) - .addParameters({ options: { showPanel: false } }) - .add('Standard form', (_, { formRenderProps }) => ( - - )) +export default { + title: 'Testing:FileInput', + decorators: [formDecorator], + parameters: { options: { showPanel: false } }, +} + +export const StandardForm = (_, { formRenderProps }) => ( +
+) diff --git a/collections/forms/src/InputFieldFF/InputFieldFF.stories.e2e.js b/collections/forms/src/InputFieldFF/InputFieldFF.stories.e2e.js index 3401342491..6c4109cba9 100644 --- a/collections/forms/src/InputFieldFF/InputFieldFF.stories.e2e.js +++ b/collections/forms/src/InputFieldFF/InputFieldFF.stories.e2e.js @@ -1,21 +1,19 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { formDecorator } from '../formDecorator.js' import { hasValue } from '../validators/index.js' import { InputFieldFF } from './InputFieldFF.js' -storiesOf('Testing:InputFieldFF', module) - .addDecorator(formDecorator) - .add('Default', () => ( - - )) - .add('Required', () => ( - - )) +export default { title: 'TestingInputFieldFF', decorators: [formDecorator] } +export const Default = () => ( + +) +export const Required = () => ( + +) diff --git a/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js b/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js index 8e84ea3a98..2f8178a69d 100644 --- a/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js +++ b/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { formDecorator } from '../formDecorator.js' @@ -10,16 +9,19 @@ const defaultOptions = [ { value: 'second', label: 'Second' }, ] -storiesOf('Testing:MultiSelectFieldFF', module) - .addDecorator(formDecorator) - .addParameters({ options: { showPanel: false } }) - .add('Required', (_, { cypressProps }) => ( - - )) +export default { + title: 'MultiSelectFieldFF', + component: MultiSelectFieldFF, + decorators: [formDecorator], +} + +export const Required = (_, { cypressProps }) => ( + +) diff --git a/collections/forms/src/RadioFieldFF/RadioFieldFF.stories.e2e.js b/collections/forms/src/RadioFieldFF/RadioFieldFF.stories.e2e.js index 7380ad4577..546a106531 100644 --- a/collections/forms/src/RadioFieldFF/RadioFieldFF.stories.e2e.js +++ b/collections/forms/src/RadioFieldFF/RadioFieldFF.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { FieldGroupFF } from '../FieldGroupFF/FieldGroupFF.js' @@ -6,36 +5,35 @@ import { formDecorator } from '../formDecorator.js' import { hasValue } from '../validators/index.js' import { RadioFieldFF } from './RadioFieldFF.js' -storiesOf('Testing:RadioFieldFF', module) - .addDecorator(formDecorator) - .add('Required and no selected value', () => ( - - - - - - )) +export default { title: 'TestingRadioFieldFF', decorators: [formDecorator] } +export const RequiredAndNoSelectedValue = () => ( + + + + + +) diff --git a/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js b/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js index 8d5cff006a..4c30e415e1 100644 --- a/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js +++ b/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { formDecorator } from '../formDecorator.js' @@ -7,16 +6,18 @@ import { SingleSelectFieldFF } from './SingleSelectFieldFF.js' const defaultOptions = [{ value: 'initial', label: 'Initial' }] -storiesOf('Testing:SingleSelectFieldFF', module) - .addDecorator(formDecorator) - .addParameters({ options: { showPanel: false } }) - .add('Required', (_, { cypressProps }) => ( - - )) +export default { + title: 'Testing:SingleSelectFieldFF', + decorators: [formDecorator], + parameters: { options: { showPanel: false } } +} +export const Required = (_, { cypressProps }) => ( + +) diff --git a/collections/forms/src/SwitchFieldFF/SwitchFieldFF.stories.e2e.js b/collections/forms/src/SwitchFieldFF/SwitchFieldFF.stories.e2e.js index 51715f9131..d4d9b3f084 100644 --- a/collections/forms/src/SwitchFieldFF/SwitchFieldFF.stories.e2e.js +++ b/collections/forms/src/SwitchFieldFF/SwitchFieldFF.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { formDecorator } from '../formDecorator.js' @@ -8,47 +7,46 @@ import { SwitchFieldFF } from './SwitchFieldFF.js' // https://github.com/final-form/react-final-form-arrays/issues/111 const initialValue = ['yes'] -storiesOf('Testing:SwitchFieldFF', module) - .addDecorator(formDecorator) - .add('Unchecked', () => ( - - )) - .add('Checked ', () => ( - - )) - .add('Unchecked with value', () => ( - - )) - .add('Checked with value', () => ( - - )) +export default { title: 'Testing:SwitchFieldFF', decorators: [formDecorator] } +export const Unchecked = () => ( + +) +export const Checked = () => ( + +) +export const UncheckedWithValue = () => ( + +) +export const CheckedWithValue = () => ( + +) diff --git a/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js b/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js index 82a56e4496..4a743e64ad 100644 --- a/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js +++ b/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js @@ -1,25 +1,23 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { formDecorator } from '../formDecorator.js' import { hasValue } from '../validators/index.js' import { TextAreaFieldFF } from './TextAreaFieldFF.js' -storiesOf('TextArea', module) - .addDecorator(formDecorator) - .add('Default', () => ( - - )) - .add('Required', () => ( - - )) +export default { title: 'TextArea', decorators: [formDecorator] } +export const Default = () => ( + +) +export const Required = () => ( + +) diff --git a/components/alert/src/alert-bar/alert-bar.stories.e2e.js b/components/alert/src/alert-bar/alert-bar.stories.e2e.js index a415d1f6a3..6518be77be 100644 --- a/components/alert/src/alert-bar/alert-bar.stories.e2e.js +++ b/components/alert/src/alert-bar/alert-bar.stories.e2e.js @@ -1,53 +1,53 @@ -import { storiesOf } from '@storybook/react' import React, { useState } from 'react' import { AlertBar } from './index.js' window.onHidden = window.Cypress && window.Cypress.cy.stub() -storiesOf('AlertBar', module) - .add('Default', () => Default) - .add('Custom duration', () => ( - Custom duration - )) - .add('Permanent with actions', () => ( - {} }, +export default { title: 'AlertBar' } + +export const Default = () => Default +export const CustomDuration = () => ( + Custom duration +) +export const PermanentWithActions = () => ( + {} }, { label: 'Cancel', onClick: () => {} }, - ]} - > - With Actions - - )) - .add('Disabled icon', () => Message) - .add('Custom icon', () => ( - Custom icon}>Message - )) - .add('With message', () => With a message) - .add('With onHidden', () => ( - Message - )) - .add('Permanent', () => Message) - .add('Hidden prop', () => { - const [hidden, setHidden] = useState(true) - const toggleVisibility = () => setHidden((prevHidden) => !prevHidden) - return ( - - - - - ) - }) + ]} + > + With Actions + +) +export const DisabledIcon = () => Message +export const CustomIcon = () => ( + Custom icon}>Message +) +export const WithMessage = () => With a message +export const WithOnHidden = () => ( + Message +) +export const Permanent = () => Message +export const HiddenProp = () => { + const [hidden, setHidden] = useState(true) + const toggleVisibility = () => setHidden((prevHidden) => !prevHidden) + return ( + + + + + ) +} diff --git a/components/alert/src/alert-stack/alert-stack.stories.e2e.js b/components/alert/src/alert-stack/alert-stack.stories.e2e.js index 83ed76a162..8069370010 100644 --- a/components/alert/src/alert-stack/alert-stack.stories.e2e.js +++ b/components/alert/src/alert-stack/alert-stack.stories.e2e.js @@ -1,12 +1,13 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { AlertBar } from '../alert-bar/index.js' import { AlertStack } from './alert-stack.js' -storiesOf('AlertStack', module).add('Default', () => ( +export default { title: 'AlertStac' } + +export const Default = () => ( Message Message Message -)) +) diff --git a/components/box/src/box.stories.e2e.js b/components/box/src/box.stories.e2e.js index 41dd3464e0..aab22b627f 100644 --- a/components/box/src/box.stories.e2e.js +++ b/components/box/src/box.stories.e2e.js @@ -1,11 +1,10 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Box } from './box.js' -storiesOf('Box', module) - .add('With children', () => I am a child) - .add('Multiple', () => ( - - I am a child in a Box. - - )) +export default { title: 'Box' } +export const Withchildren = () => I am a child +export const Multiple = () => ( + + I am a child in a Box. + +) diff --git a/components/button/src/button-strip/button-strip.stories.e2e.js b/components/button/src/button-strip/button-strip.stories.e2e.js index e173009074..d6d5116d91 100644 --- a/components/button/src/button-strip/button-strip.stories.e2e.js +++ b/components/button/src/button-strip/button-strip.stories.e2e.js @@ -1,12 +1,13 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Button } from '../index.js' import { ButtonStrip } from './index.js' -storiesOf('ButtonStrip', module).add('With children', () => ( +export default { title: 'ButtonStrip' } + +export const WithChildren = () => ( -)) +) diff --git a/components/button/src/button/button.stories.e2e.js b/components/button/src/button/button.stories.e2e.js index 5730885ae5..9894153ebf 100644 --- a/components/button/src/button/button.stories.e2e.js +++ b/components/button/src/button/button.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Button } from './button.js' @@ -6,24 +5,25 @@ window.onClick = window.Cypress && window.Cypress.cy.stub() window.onBlur = window.Cypress && window.Cypress.cy.stub() window.onFocus = window.Cypress && window.Cypress.cy.stub() -storiesOf('Button', module) - .add('With onClick', () => ( - - )) - .add('With initialFocus and onBlur', () => ( - - )) - .add('With onFocus', () => ( - - )) +export default { title: 'Button' } + +export const WithOnClick = () => ( + +) +export const WithInitialFocusAndOnBlur = () => ( + +) +export const WithOnFocus = () => ( + +) diff --git a/components/button/src/dropdown-button/dropdown-button.stories.e2e.js b/components/button/src/dropdown-button/dropdown-button.stories.e2e.js index 6d9de79a9c..7a27a146dc 100644 --- a/components/button/src/dropdown-button/dropdown-button.stories.e2e.js +++ b/components/button/src/dropdown-button/dropdown-button.stories.e2e.js @@ -1,67 +1,67 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { DropdownButton } from './index.js' window.onClick = window.Cypress && window.Cypress.cy.stub() -storiesOf('DropdownButton', module) - .add('Default', () => ( - Content
} - > - Button - - )) - .add('With onClick', () => ( - Content
} - > - Button - - )) - .add('With children', () => ( - Component
} - > - I am a child - - )) - .add('With component', () => ( - I am a component
} - /> - )) - .add('With icon', () => ( - I am a component} - icon={'Icon'} - /> - )) - .add('With initialFocus', () => ( - Content} - initialFocus - /> - )) - .add('Disabled with onClick', () => ( - Content} - onClick={window.onClick} - disabled - /> - )) +export default { title: 'DropdownButton' } + +export const Default = () => ( + Content} + > + Button + +) +export const WithOnClick = () => ( + Content} + > + Button + +) +export const WithChildren = () => ( + Component} + > + I am a child + +) +export const WithComponent = () => ( + I am a component} + /> +) +export const WithIcon = () => ( + I am a component} + icon={'Icon'} + /> +) +export const WithInitialFocus = () => ( + Content} + initialFocus + /> +) +export const DisabledWithOnClick = () => ( + Content} + onClick={window.onClick} + disabled + /> +) diff --git a/components/button/src/split-button/split-button.stories.e2e.js b/components/button/src/split-button/split-button.stories.e2e.js index 29eb16ab2c..3a937a1e8e 100644 --- a/components/button/src/split-button/split-button.stories.e2e.js +++ b/components/button/src/split-button/split-button.stories.e2e.js @@ -1,65 +1,64 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { SplitButton } from './split-button.js' window.onClick = window.Cypress && window.Cypress.cy.stub() -storiesOf('SplitButton', module) - .add('Default', () => ( - Component} - > - Label me! - - )) - .add('With onClick', () => ( - Component} - onClick={window.onClick} - > - Label me! - - )) - .add('With children', () => ( - Component} - > - I am a child - - )) - .add('With icon', () => ( - Component} - icon={
Icon
} - > - Children -
- )) - .add('With initialFocus', () => ( - Component} - initialFocus - > - Children - - )) - .add('With disabled', () => ( - Component} - disabled - > - Children - - )) +export default { title: 'SplitButton' } +export const Default = () => ( + Component} + > + Label me! + +) +export const WithOnClick = () => ( + Component} + onClick={window.onClick} + > + Label me! + +) +export const WithChildren = () => ( + Component} + > + I am a child + +) +export const WithIcon = () => ( + Component} + icon={
Icon
} + > + Children +
+) +export const WithInitialFocus = () => ( + Component} + initialFocus + > + Children + +) +export const WithDisabled = () => ( + Component} + disabled + > + Children + +) diff --git a/components/card/src/card.stories.e2e.js b/components/card/src/card.stories.e2e.js index 00170dbe78..2da68f0aa9 100644 --- a/components/card/src/card.stories.e2e.js +++ b/components/card/src/card.stories.e2e.js @@ -1,11 +1,11 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Card } from './card.js' -storiesOf('Card', module).add('With children', () => ( +export default { title: 'Card' } +export const WithChildren = () => ( I am a child I am a child I am a child -)) +) diff --git a/components/checkbox/src/checkbox-field/checkbox-field.stories.e2e.js b/components/checkbox/src/checkbox-field/checkbox-field.stories.e2e.js index 0c8111c6f6..e3b2b771c4 100644 --- a/components/checkbox/src/checkbox-field/checkbox-field.stories.e2e.js +++ b/components/checkbox/src/checkbox-field/checkbox-field.stories.e2e.js @@ -1,32 +1,31 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { CheckboxField } from './index.js' -storiesOf('CheckboxField', module) - .add('With label and required', () => ( - - )) - .add('With help text', () => ( - - )) - .add('With label', () => ( - - )) - .add('With validation text', () => ( - - )) +export default { title: 'CheckboxField' } +export const WithLabelAndRequired = () => ( + +) +export const WithHelpText = () => ( + +) +export const WithLabel = () => ( + +) +export const WithValidationText = () => ( + +) diff --git a/components/checkbox/src/checkbox/checkbox.stories.e2e.js b/components/checkbox/src/checkbox/checkbox.stories.e2e.js index 18609d4464..f47bee5748 100644 --- a/components/checkbox/src/checkbox/checkbox.stories.e2e.js +++ b/components/checkbox/src/checkbox/checkbox.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Checkbox } from './index.js' @@ -7,50 +6,50 @@ window.onChange = window.Cypress && window.Cypress.cy.stub() window.onBlur = window.Cypress && window.Cypress.cy.stub() window.onFocus = window.Cypress && window.Cypress.cy.stub() -storiesOf('Checkbox', module) - .add('With onChange', () => ( - - )) - .add('With initialFocus and onBlur', () => ( - - )) - .add('With onFocus', () => ( - - )) - .add('Disabled with onClick', () => ( - - )) - .add('With label', () => ( - - )) - .add('With initialFocus', () => ( - - )) - .add('Indeterminate prop', () => ( - - )) - .add('No indeterminate prop', () => ( - - )) +export default { title: 'Checkbox' } +export const WithOnChange = () => ( + +) +export const WithInitialFocusAndOnBlur = () => ( + +) +export const WithOnFocus = () => ( + +) +export const DisabledWithOnClick = () => ( + +) +export const WithLabel = () => ( + +) +export const WithInitialFocus = () => ( + +) +export const IndeterminateProp = () => ( + +) +export const NoIndeterminateProp = () => ( + +) diff --git a/components/chip/src/chip.stories.e2e.js b/components/chip/src/chip.stories.e2e.js index 737cc5ecd8..d840f14262 100644 --- a/components/chip/src/chip.stories.e2e.js +++ b/components/chip/src/chip.stories.e2e.js @@ -1,15 +1,14 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Chip } from './chip.js' window.onClick = window.Cypress && window.Cypress.cy.stub() window.onRemove = window.Cypress && window.Cypress.cy.stub() -storiesOf('Chip', module) - .add('Default', () => Message) - .add('With onClick', () => Chippy) - .add('With onRemove', () => ( - Chipmunk - )) - .add('With children', () => I am a child) - .add('With icon', () => Icon}>Message) +export default { title: 'Chip' } +export const Default = () => Message +export const WithOnClick = () => Chippy + export const WithOnRemove = () => ( + Chipmunk +) +export const WithChildren = () => I am a child +export const WithIcon = () => Icon}>Message diff --git a/components/css/src/css-variables/css-variables.stories.e2e.js b/components/css/src/css-variables/css-variables.stories.e2e.js index 0871b7b458..5276e34b03 100644 --- a/components/css/src/css-variables/css-variables.stories.e2e.js +++ b/components/css/src/css-variables/css-variables.stories.e2e.js @@ -1,47 +1,46 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { CssVariables } from './index.js' -storiesOf('CssVariables', module) - .add('With colors', () => ( - - -
-
- )) - .add('With theme', () => ( - - -
-
- )) - .add('With layers', () => ( - - -
-
- )) - .add('With spacers', () => ( - - -
-
- )) - .add('With elevations', () => ( - - -
-
- )) +export default { title: 'CssVariables' } +export const WithColors = () => ( + + +
+
+) +export const WithTheme = () => ( + + +
+
+) +export const WithLayers = () => ( + + +
+
+) +export const WithSpacers = () => ( + + +
+
+) +export const WithElevations = () => ( + + +
+
+) diff --git a/components/field/src/field-group/field-group.stories.e2e.js b/components/field/src/field-group/field-group.stories.e2e.js index 45eeffc073..d591841f46 100644 --- a/components/field/src/field-group/field-group.stories.e2e.js +++ b/components/field/src/field-group/field-group.stories.e2e.js @@ -1,9 +1,9 @@ import { Checkbox } from '@dhis2-ui/checkbox' -import { storiesOf } from '@storybook/react' import React from 'react' import { FieldGroup } from './field-group.js' -storiesOf('FieldGroup', module).add('With label and required', () => ( +export default { title: 'FieldGroup' } +export const WithLabelAndRequired = () => ( ( -)) +) diff --git a/components/field/src/field-set/field-set.stories.e2e.js b/components/field/src/field-set/field-set.stories.e2e.js index 3e74d69a99..925364d919 100644 --- a/components/field/src/field-set/field-set.stories.e2e.js +++ b/components/field/src/field-set/field-set.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FieldSet } from './field-set.js' -storiesOf('FieldSet', module).add('With children', () => ( +export default { title: 'FieldSet' } +export const WithChildren = () => (
I am a child
-)) +) diff --git a/components/field/src/field/field.stories.e2e.js b/components/field/src/field/field.stories.e2e.js index c8ca27c06d..dbd74c8382 100644 --- a/components/field/src/field/field.stories.e2e.js +++ b/components/field/src/field/field.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from './field.js' -storiesOf('Field', module).add('With children', () => ( +export default { title: 'Field' } +export const WithChildren = () => ( I am a child -)) +) diff --git a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.stories.e2e.js b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.stories.e2e.js index 11664011aa..8d66caceee 100644 --- a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.stories.e2e.js +++ b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FileInputFieldWithList } from './index.js' @@ -33,42 +32,42 @@ const onChange = (payload, event) => { ) } -storiesOf('FileInputFieldWithList', module) - .add('Single file - with file', () => ( - - )) - .add('Multiple files - empty', () => ( - - )) - .add('Multiple files - with files', () => ( - - )) - .add('With file and default texts', () => ( - - )) - .add('With default texts', () => ( - - )) +export default { title: 'FileInputFieldWithList' } +export const SingleFileWithFile = () => ( + +) +export const MultipleFilesEmpty = () => ( + +) +export const MultipleFilesWithFiles = () => ( + +) +export const WithFileAndDefaultTexts = () => ( + +) +export const WithDefaultTexts = () => ( + +) diff --git a/components/file-input/src/file-input-field/file-input-field.stories.e2e.js b/components/file-input/src/file-input-field/file-input-field.stories.e2e.js index 7a5a4e9b40..5d7bfdcdde 100644 --- a/components/file-input/src/file-input-field/file-input-field.stories.e2e.js +++ b/components/file-input/src/file-input-field/file-input-field.stories.e2e.js @@ -1,16 +1,13 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FileInputField } from './file-input-field.js' -storiesOf('FileInputField', module) - .add('With label and required', () => ( - - )) - .add('Default', () => ( - - )) +export default { title: 'FileInputField' } +export const WithLabelAndRequired = () => ( + +) +export const Default = () => diff --git a/components/file-input/src/file-input/file-input.stories.e2e.js b/components/file-input/src/file-input/file-input.stories.e2e.js index 485f6c5e89..c1da8ad992 100644 --- a/components/file-input/src/file-input/file-input.stories.e2e.js +++ b/components/file-input/src/file-input/file-input.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FileInput } from './index.js' @@ -17,34 +16,34 @@ const onChange = (payload, event) => { ) } -storiesOf('FileInput', module) - .add('With onChange', () => ( - - )) - .add('With onChange and multiple', () => ( - - )) - .add('With initialFocus and onBlur', () => ( - - )) - .add('With onFocus', () => ( - - )) +export default { title: 'FileInput' } +export const WithOnChange = () => ( + +) +export const WithOnChangeAndMultiple = () => ( + +) +export const WithInitialFocusAndOnBlur = () => ( + +) +export const WithOnFocus = () => ( + +) diff --git a/components/file-input/src/file-list/file-list-item.stories.e2e.js b/components/file-input/src/file-list/file-list-item.stories.e2e.js index fb3dd1d18f..d2b12ffae7 100644 --- a/components/file-input/src/file-list/file-list-item.stories.e2e.js +++ b/components/file-input/src/file-list/file-list-item.stories.e2e.js @@ -1,40 +1,39 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FileListItem } from './file-list-item.js' window.onRemove = window.Cypress && window.Cypress.cy.stub() window.onCancel = window.Cypress && window.Cypress.cy.stub() -storiesOf('FileListItem', module) - .add('With onRemove', () => ( - - )) - .add('Loading with onCancel', () => ( - - )) - .add('Loading with onCancel and cancelText', () => ( - {}} - onRemove={() => {}} - cancelText="Cancel" - /> - )) - .add('With label', () => ( - {}} /> - )) - .add('With removeText', () => ( - {}} /> - )) +export default { title: 'FileListItem' } +export const WithOnRemove = () => ( + +) +export const LoadingWithOnCancel = () => ( + +) +export const LoadingWithOnCancelAndCancelText = () => ( + {}} + onRemove={() => {}} + cancelText="Cancel" + /> +) +export const WithLabel = () => ( + {}} /> +) +export const WithRemoveText = () => ( + {}} /> +) diff --git a/components/file-input/src/file-list/file-list-placeholder.stories.e2e.js b/components/file-input/src/file-list/file-list-placeholder.stories.e2e.js index 25af178f3d..98ea79f561 100644 --- a/components/file-input/src/file-list/file-list-placeholder.stories.e2e.js +++ b/components/file-input/src/file-list/file-list-placeholder.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FileListPlaceholder } from './file-list-placeholder.js' -storiesOf('FileListPlaceholder', module).add('With children', () => ( +export default { title: 'FileListPlaceholder' } +export const WithChildren = () => ( I am a child -)) +) diff --git a/components/file-input/src/file-list/file-list.stories.e2e.js b/components/file-input/src/file-list/file-list.stories.e2e.js index c705d53fe8..d0fe4a3a8b 100644 --- a/components/file-input/src/file-list/file-list.stories.e2e.js +++ b/components/file-input/src/file-list/file-list.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FileList } from './file-list.js' -storiesOf('FileList', module).add('With children', () => ( +export default { title: 'FileList' } +export const WithChildren = () => ( I am a child -)) +) diff --git a/components/help/src/help.stories.e2e.js b/components/help/src/help.stories.e2e.js index 1d305fa6e9..09265078aa 100644 --- a/components/help/src/help.stories.e2e.js +++ b/components/help/src/help.stories.e2e.js @@ -1,5 +1,5 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Help } from './help.js' -storiesOf('Help', module).add('With children', () => I am a child) +export default { title: 'Help' } +export const WithChildren = () => I am a child diff --git a/components/input/src/input-field/input-field.stories.e2e.js b/components/input/src/input-field/input-field.stories.e2e.js index 998449bbe8..1b8274c6f8 100644 --- a/components/input/src/input-field/input-field.stories.e2e.js +++ b/components/input/src/input-field/input-field.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { InputField } from './index.js' -storiesOf('InputField', module).add('With label and required', () => ( +export default { title: 'InputField' } +export const WithLabelAndRequired = () => ( -)) +) diff --git a/components/input/src/input/input.stories.e2e.js b/components/input/src/input/input.stories.e2e.js index c53354c453..3bf88f3314 100644 --- a/components/input/src/input/input.stories.e2e.js +++ b/components/input/src/input/input.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Input } from './index.js' @@ -6,35 +5,35 @@ window.onChange = window.Cypress && window.Cypress.cy.stub() window.onBlur = window.Cypress && window.Cypress.cy.stub() window.onFocus = window.Cypress && window.Cypress.cy.stub() -storiesOf('Input', module) - .add('With onChange', () => ( - - )) - .add('With initialFocus and onBlur', () => ( - - )) - .add('With onFocus', () => ( - - )) - .add('With initialFocus', () => ( - - )) - .add('With disabled', () => ( - - )) +export default { title: 'Input' } +export const WithOnChange = () => ( + +) +export const WithInitialFocusAndOnBlur = () => ( + +) +export const WithOnFocus = () => ( + +) +export const WithInitialFocus = () => ( + +) +export const WithDisabled = () => ( + +) diff --git a/components/label/src/label.stories.e2e.js b/components/label/src/label.stories.e2e.js index 8dd08e8c34..759602a151 100644 --- a/components/label/src/label.stories.e2e.js +++ b/components/label/src/label.stories.e2e.js @@ -1,7 +1,6 @@ import { Label } from '@dhis2-ui/label' -import { storiesOf } from '@storybook/react' import React from 'react' -storiesOf('Label', module) - .add('With children', () => ) - .add('With required', () => ) +export default { title: 'Label' } +export const WithChildren = () => +export const WithRequired = () => diff --git a/components/legend/src/legend.stories.e2e.js b/components/legend/src/legend.stories.e2e.js index 2b18458821..4bd6266553 100644 --- a/components/legend/src/legend.stories.e2e.js +++ b/components/legend/src/legend.stories.e2e.js @@ -1,11 +1,10 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Legend } from './legend.js' -storiesOf('Legend', module) - .add('With content and required', () => ( - - I am wrapped in a legend which has some styling - - )) - .add('With children', () => I am a child) +export default { title: 'Legend' } +export const WithContentAndRequired = () => ( + + I am wrapped in a legend which has some styling + +) +export const WithChildren = () => I am a child diff --git a/components/menu/src/menu/menu.stories.e2e.js b/components/menu/src/menu/menu.stories.e2e.js index 45a8103357..c30865282d 100644 --- a/components/menu/src/menu/menu.stories.e2e.js +++ b/components/menu/src/menu/menu.stories.e2e.js @@ -1,5 +1,5 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Menu } from './index.js' -storiesOf('Menu', module).add('With children', () => I am a child) +export default { title: 'Menu' } +export const WithChildren = () => I am a child diff --git a/components/modal/src/modal-actions/modal-actions.stories.e2e.js b/components/modal/src/modal-actions/modal-actions.stories.e2e.js index 13d2e6ef7b..f28e01526c 100644 --- a/components/modal/src/modal-actions/modal-actions.stories.e2e.js +++ b/components/modal/src/modal-actions/modal-actions.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { ModalActions } from './modal-actions.js' -storiesOf('ModalActions', module).add('With children', () => ( +export default { title: 'ModalActions' } +export const WithChildren = () => ( I am a child -)) +) diff --git a/components/modal/src/modal-content/modal-content.stories.e2e.js b/components/modal/src/modal-content/modal-content.stories.e2e.js index f0fa22ef50..71e5a64eaf 100644 --- a/components/modal/src/modal-content/modal-content.stories.e2e.js +++ b/components/modal/src/modal-content/modal-content.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { ModalContent } from './modal-content.js' -storiesOf('ModalContent', module).add('With children', () => ( +export default { title: 'ModalContent' } +export const WithChildren = () => ( I am a child -)) +) diff --git a/components/modal/src/modal-title/modal-title.stories.e2e.js b/components/modal/src/modal-title/modal-title.stories.e2e.js index d62dbb6d07..73a98fc1a1 100644 --- a/components/modal/src/modal-title/modal-title.stories.e2e.js +++ b/components/modal/src/modal-title/modal-title.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { ModalTitle } from './modal-title.js' -storiesOf('ModalTitle', module).add('With children', () => ( +export default { title: 'ModalTitle' } +export const WithChildren = () => ( I am a child -)) +) diff --git a/components/modal/src/modal/modal.stories.e2e.js b/components/modal/src/modal/modal.stories.e2e.js index abf835efae..179616fb4d 100644 --- a/components/modal/src/modal/modal.stories.e2e.js +++ b/components/modal/src/modal/modal.stories.e2e.js @@ -1,5 +1,4 @@ import { Button, ButtonStrip } from '@dhis2-ui/button' -import { storiesOf } from '@storybook/react' import React, { useState } from 'react' import { ModalActions, ModalContent, ModalTitle } from '../index.js' import { Modal } from './modal.js' @@ -26,54 +25,54 @@ const StatefuleComponent = () => { ) } -storiesOf('Modal', module) - .add('With onClose', () => ( - - Title - Content - - - - - - - - )) - .add('Bottom-aligned, with onClose', () => ( - - Title - Content - - - - - - - - )) - .add('With children', () => I am a child) - .add('With stateful children', () => { - const [hide, setHide] = useState(false) +export default { title: 'Modal' } +export const WithOnClose = () => ( + + Title + Content + + + + + + + +) +export const BottomAlignedWithOnClose = () => ( + + Title + Content + + + + + + + +) +export const WithChildren = () => I am a child + export const WithStatefulChildren = () => { + const [hide, setHide] = useState(false) - return ( -
- + return ( +
+ - - Can be hidden + + Can be hidden - - - + + + - - - - -
- ) - }) + + + + +
+ ) +} diff --git a/components/node/src/node.stories.e2e.js b/components/node/src/node.stories.e2e.js index fe1d483836..bbcdd00aca 100644 --- a/components/node/src/node.stories.e2e.js +++ b/components/node/src/node.stories.e2e.js @@ -1,34 +1,33 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Node } from './node.js' window.onClose = window.Cypress && window.Cypress.cy.stub() window.onOpen = window.Cypress && window.Cypress.cy.stub() -storiesOf('Node', module) - .add('Open with onClose', () => ( - Component}> - Children - - )) - .add('Closed with onOpen', () => ( - Component}> - Children - - )) - .add('Closed with children', () => ( - Component}>I am a child - )) - .add('Open with children', () => ( - Component}> - I am a child - - )) - .add('With component', () => ( - I am a component}>Children - )) - .add('With icon', () => ( - Component} icon={
Icon
}> - Children -
- )) +export default { title: 'Node' } +export const OpenWithOnClose = () => ( + Component}> + Children + +) +export const ClosedWithOnOpen = () => ( + Component}> + Children + +) +export const ClosedWithChildren = () => ( + Component}>I am a child +) +export const OpenWithChildren = () => ( + Component}> + I am a child + +) +export const WithComponent = () => ( + I am a component}>Children +) +export const WithIcon = () => ( + Component} icon={
Icon
}> + Children +
+) diff --git a/components/notice-box/src/notice-box.stories.e2e.js b/components/notice-box/src/notice-box.stories.e2e.js index 79c0725096..cf75dd9658 100644 --- a/components/notice-box/src/notice-box.stories.e2e.js +++ b/components/notice-box/src/notice-box.stories.e2e.js @@ -1,7 +1,6 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { NoticeBox } from './notice-box.js' -storiesOf('NoticeBox', module) - .add('With children', () => The noticebox content) - .add('With title', () => ) +export default { title: 'NoticeBox' } +export const WithChildren = () => The noticebox content +export const WithTitle = () => diff --git a/components/organisation-unit-tree/src/__e2e__/children_as_child_nodes.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/children_as_child_nodes.stories.e2e.js index a13167e972..b2716cf19e 100644 --- a/components/organisation-unit-tree/src/__e2e__/children_as_child_nodes.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/children_as_child_nodes.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -8,7 +7,8 @@ import { namespace, } from './common.js' -storiesOf(namespace, module).add('Closed with children', () => ( +export default { title: namespace } +export const ClosedWithChildren = () => ( {({ selected, onChange }) => ( @@ -20,4 +20,4 @@ storiesOf(namespace, module).add('Closed with children', () => ( )} -)) +) diff --git a/components/organisation-unit-tree/src/__e2e__/displaying_loading_error.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/displaying_loading_error.stories.e2e.js index 3d49019cc6..718e8392a5 100644 --- a/components/organisation-unit-tree/src/__e2e__/displaying_loading_error.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/displaying_loading_error.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -23,29 +22,29 @@ const dataProviderDataWithError = { }, } -storiesOf(namespace, module) - .add('A0000000001 loading error', () => ( - - - {() => ( - null} - /> - )} - - - )) - .add('A0000000001 loading error autoexpand', () => ( - - - {() => ( - null} - /> - )} - - - )) +export default { title: namespace } +export const A0000000001LoadingError = () => ( + + + {() => ( + null} + /> + )} + + +) +export const A0000000001LoadingErrorAutoexpand = () => ( + + + {() => ( + null} + /> + )} + + +) diff --git a/components/organisation-unit-tree/src/__e2e__/force_reload.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/force_reload.stories.e2e.js index f3e432cd09..a1edecb818 100644 --- a/components/organisation-unit-tree/src/__e2e__/force_reload.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/force_reload.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React, { useState } from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -31,7 +30,7 @@ const afterReloadData = { }, } -const ForceReloading = () => { +const ForceReloading_ = () => { const [forceReload, setForceReload] = useState(false) return ( @@ -63,4 +62,5 @@ const ForceReloading = () => { ) } -storiesOf(namespace, module).add('Force reloading', () => ) +export default { title: namespace } +export const ForceReloading = () => diff --git a/components/organisation-unit-tree/src/__e2e__/highlight.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/highlight.stories.e2e.js index 3f978886fa..2d62f8581a 100644 --- a/components/organisation-unit-tree/src/__e2e__/highlight.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/highlight.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -8,7 +7,8 @@ import { namespace, } from './common.js' -storiesOf(namespace, module).add('Root highlighted', () => ( +export default { title: namespace } +export const RootHighlighted = () => ( {({ onChange }) => ( @@ -20,4 +20,4 @@ storiesOf(namespace, module).add('Root highlighted', () => ( )} -)) +) diff --git a/components/organisation-unit-tree/src/__e2e__/loading_state.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/loading_state.stories.e2e.js index 102c7d075a..d6635a72aa 100644 --- a/components/organisation-unit-tree/src/__e2e__/loading_state.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/loading_state.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -28,7 +27,8 @@ const data = { }, } -storiesOf(namespace, module).add('A0000000001 loading', () => ( +export default { title: namespace } +export const A0000000001Loading = () => ( {({ onChange }) => ( @@ -36,4 +36,4 @@ storiesOf(namespace, module).add('A0000000001 loading', () => ( )} -)) +) diff --git a/components/organisation-unit-tree/src/__e2e__/multi_selection.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/multi_selection.stories.e2e.js index e80890221f..bd452612dd 100644 --- a/components/organisation-unit-tree/src/__e2e__/multi_selection.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/multi_selection.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -10,11 +9,12 @@ import { window.selection = [] -storiesOf(namespace, module).add('Multiple selection', () => ( +export default { title: namespace } +export const MultipleSelection = () => ( - (window.selection = newSelection) + (window.selection = newSelection) } > {({ selected, onChange }) => ( @@ -26,4 +26,4 @@ storiesOf(namespace, module).add('Multiple selection', () => ( )} -)) +) diff --git a/components/organisation-unit-tree/src/__e2e__/no_selection.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/no_selection.stories.e2e.js index ce52182a79..9d2d01476e 100644 --- a/components/organisation-unit-tree/src/__e2e__/no_selection.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/no_selection.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -8,31 +7,31 @@ import { namespace, } from './common.js' -storiesOf(namespace, module) - .add('No selection closed', () => ( - - - {({ onChange }) => ( - - )} - - - )) - .add('No selection root opened', () => ( - - - {({ onChange }) => ( - - )} - - - )) +export default { title: namespace } +export const NoSelectionClosed = () => ( + + + {({ onChange }) => ( + + )} + + +) +export const NoSelectionRootOpened = () => ( + + + {({ onChange }) => ( + + )} + + +) diff --git a/components/organisation-unit-tree/src/__e2e__/path_based_filtering.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/path_based_filtering.stories.e2e.js index ebfea9d31d..76ac869548 100644 --- a/components/organisation-unit-tree/src/__e2e__/path_based_filtering.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/path_based_filtering.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -13,43 +12,43 @@ for (let i = 0; i < 7; ++i) { window.allUnits.push(`A000000000${i}`) } -storiesOf(namespace, module) - .add('Filtered by 3-level-path', () => ( - - - {({ onChange }) => ( - ( + + + {({ onChange }) => ( + - )} - - - )) - .add('Filtered by 3-level-path and 2-level-path', () => ( - - - {({ onChange }) => ( - + )} + + +) +export const FilteredBy3LevelPathAnd2LevelPath = () => ( + + + {({ onChange }) => ( + - )} - - - )) + ]} + /> + )} + + +) diff --git a/components/organisation-unit-tree/src/__e2e__/single_selection.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/single_selection.stories.e2e.js index b29413a9fd..fe2a208402 100644 --- a/components/organisation-unit-tree/src/__e2e__/single_selection.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/single_selection.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -35,7 +34,8 @@ const data = { }, } -storiesOf(namespace, module).add('Single selection', () => ( +export default { title: namespace } +export const SingleSelection = () => ( {({ selected, onChange }) => ( @@ -48,4 +48,4 @@ storiesOf(namespace, module).add('Single selection', () => ( )} -)) +) diff --git a/components/organisation-unit-tree/src/__e2e__/tree_api.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/tree_api.stories.e2e.js index 1c09bb09f8..ca728cfbcc 100644 --- a/components/organisation-unit-tree/src/__e2e__/tree_api.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/tree_api.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -39,7 +38,8 @@ window.onCollapse = window.Cypress && window.Cypress.cy.stub() window.onExpand = window.Cypress && window.Cypress.cy.stub() window.onChildrenLoaded = window.Cypress && window.Cypress.cy.stub() -storiesOf(namespace, module).add('Events', () => ( +export default { title: namespace } +export const Events = () => ( {({ selected, onChange }) => ( @@ -57,4 +57,4 @@ storiesOf(namespace, module).add('Events', () => ( )} -)) +) diff --git a/components/radio/src/radio.stories.e2e.js b/components/radio/src/radio.stories.e2e.js index 189ab153b3..e5c929f852 100644 --- a/components/radio/src/radio.stories.e2e.js +++ b/components/radio/src/radio.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Radio } from './radio.js' @@ -6,39 +5,39 @@ window.onChange = window.Cypress && window.Cypress.cy.stub() window.onBlur = window.Cypress && window.Cypress.cy.stub() window.onFocus = window.Cypress && window.Cypress.cy.stub() -storiesOf('Radio', module) - .add('With onChange', () => ( - - )) - .add('With initialFocus and onBlur', () => ( - - )) - .add('With onFocus', () => ( - - )) - .add('With disabled', () => ( - - )) - .add('With label', () => ( - - )) - .add('With initialFocus', () => ( - - )) +export default { title: 'Radio' } +export const WithOnChange = () => ( + +) +export const WithInitialFocusAndOnBlur = () => ( + +) +export const WithOnFocus = () => ( + +) +export const WithDisabled = () => ( + +) +export const WithLabel = () => ( + +) +export const WithInitialFocus = () => ( + +) diff --git a/components/select/src/multi-select-field/multi-select-field.stories.e2e.js b/components/select/src/multi-select-field/multi-select-field.stories.e2e.js index 4b97327671..ed223c42f6 100644 --- a/components/select/src/multi-select-field/multi-select-field.stories.e2e.js +++ b/components/select/src/multi-select-field/multi-select-field.stories.e2e.js @@ -1,46 +1,45 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { MultiSelectOption } from '../index.js' import { MultiSelectField } from './index.js' -storiesOf('MultiSelectField', module) - .add('With label', () => ( - - - - - - )) - .add('With help text', () => ( - - - - - - )) - .add('With validation text', () => ( - - - - - - )) - .add('With label and required status', () => ( - - - - - - )) - .add('With clearable and selected option', () => ( - - - - )) - .add('With filterable', () => ( - - - - )) - .add('With loading', () => ) - .add('Without options', () => ) +export default { title: 'MultiSelectField' } +export const WithLabel = () => ( + + + + + +) +export const WithHelpText = () => ( + + + + + +) +export const WithValidationText = () => ( + + + + + +) +export const WithLabelAndRequiredStatus = () => ( + + + + + +) +export const WithClearableAndSelectedOption = () => ( + + + +) +export const WithFilterable = () => ( + + + +) +export const WithLoading = () => +export const WithoutOptions = () => diff --git a/components/select/src/multi-select/multi-select.stories.e2e.js b/components/select/src/multi-select/multi-select.stories.e2e.js index 7d820c6de7..2f50f79b17 100644 --- a/components/select/src/multi-select/multi-select.stories.e2e.js +++ b/components/select/src/multi-select/multi-select.stories.e2e.js @@ -1,6 +1,5 @@ import { Button } from '@dhis2-ui/button' import { Modal, ModalTitle, ModalContent } from '@dhis2-ui/modal' -import { storiesOf } from '@storybook/react' import PropTypes from 'prop-types' import React, { useState } from 'react' import { MultiSelectOption } from '../index.js' @@ -26,93 +25,225 @@ const options = [ { name: 'bar', id: '4' }, ] -storiesOf('MultiSelect', module) - .add('With options', () => ( - - - - - - )) - .add('With options and onChange', () => ( - - - - - - )) - .add('With onFocus', () => ( - - - - - - )) - .add('With onBlur', () => ( - - - - - - )) - .add('With custom options and onChange', () => ( - - - - - - )) - .add('With invalid options', () => ( - -
invalid one
- -
invalid two
- -
invalid three
- - {null} - {undefined} - {false} -
- )) - .add('With invalid filterable options', () => ( - -
invalid one
- -
invalid two
- -
invalid three
- -
- )) - .add('With initialFocus', () => ( - - )) - .add('Empty', () => ) - .add('Empty with empty text', () => ( - - )) - .add('Empty with empty component', () => ( - Custom empty component} - /> - )) - .add('With options and loading', () => ( - - - - - - )) - .add('With options, loading and loading text', () => ( - - - - - - )) - .add('With more than ten options', () => ( +export default { title: 'MultiSelect' } +export const WithOptions = () => ( + + + + + +) +export const WithOptionsAndOnChange = () => ( + + + + + +) +export const WithOnFocus = () => ( + + + + + +) +export const WithOnBlur = () => ( + + + + + +) +export const WithCustomOptionsAndOnChange = () => ( + + + + + +) +export const WithInvalidOptions = () => ( + +
invalid one
+ +
invalid two
+ +
invalid three
+ + {null} + {undefined} + {false} +
+) +export const WithInvalidFilterableOptions = () => ( + +
invalid one
+ +
invalid two
+ +
invalid three
+ +
+) +export const WithInitialFocus = () => ( + +) +export const Empty = () => +export const EmptyWithEmptyText = () => ( + +) +export const EmptyWithEmptyComponent = () => ( + Custom empty component} + /> +) +export const WithOptionsAndLoading = () => ( + + + + + +) +export const WithOptionsLoadingAndLoadingText = () => ( + + + + + +) +export const WithMoreThanTenOptions = () => ( + + + + + + + + + + + + + + +) +export const WithMoreThanThreeOptionsAndA100pxMaxHeight = () => ( + + + + + + + + + + + + + + +) +export const WithOptionsASelectionAndDisabled = () => ( + + + + + +) +export const WithOptionsAndDisabled = () => ( + + + + + +) +export const WithPrefix = () => ( + + + + + +) +export const WithPrefixAndSelection = () => ( + + + + + +) +export const WithPlaceholder = () => ( + + + + + +) +export const WithPlaceholderAndSelection = () => ( + + + + + +) +export const WithDisabledOptionAndOnChange = () => ( + + + + + + +) +export const WithOptionsAndASelection = () => ( + + + + + +) +export const WithOptionsASelectionAndOnChange = () => ( + + + + + +) +export const WithOptionsAndMultipleSelections = () => ( + + + + + +) +export const WithClearButtonSelectionAndOnChange = () => ( + + + + + +) +export const WithFilterField = () => ( + + + + + +) +export const DefaultPosition = () => ( + <> @@ -127,9 +258,16 @@ storiesOf('MultiSelect', module) - )) - .add('With more than three options and a 100px max-height', () => ( - + + +) +export const FlippedPosition = () => ( + <> + @@ -143,149 +281,10 @@ storiesOf('MultiSelect', module) - )) - .add('With options, a selection and disabled', () => ( - - - - - - )) - .add('With options and disabled', () => ( - - - - - - )) - .add('With prefix', () => ( - - - - - - )) - .add('With prefix and selection', () => ( - - - - - - )) - .add('With placeholder', () => ( - - - - - - )) - .add('With placeholder and selection', () => ( - - - - - - )) - .add('With disabled option and onChange', () => ( - - - - - - - )) - .add('With options and a selection', () => ( - - - - - - )) - .add('With options, a selection and onChange', () => ( - - - - - - )) - .add('With options and multiple selections', () => ( - - - - - - )) - .add('With clear button, selection and onChange', () => ( - - - - - - )) - .add('With filter field', () => ( - - - - - - )) - .add('Default position', () => ( - <> - - - - - - - - - - - - - - - - - )) - .add('Flipped position', () => ( - <> - - - - - - - - - - - - - - - - - )) - .add('Shifted into view', () => ( - <> - - - - - - - - - - - - - - - - - )) - .add('With duplicate selected option values', () => ( - - - - - - - )) - .add('With options that can be added to the input', () => { - const [values, setValues] = React.useState([]) - return ( - <> - { - window.onChange && window.onChange({ selected }) - setValues(selected) - }} - > - - - - - - - ) - }) - .add('Menu width changing', () => { - const [toggle, setToggle] = useState(false) - return ( -
- - Modal - -
- {toggle && ( -
- Stuff -
- )} -
- - console.log( - 'size changed to ' + selected - ) - } - > - {options.map(({ name, id }) => ( - - ))} - + + ) +} +export const MenuWidthChanging = () => { + const [toggle, setToggle] = useState(false) + return ( +
+ + Modal + +
+ {toggle && ( +
+ Stuff
- {toggle && ( -
- Stuff -
- )} + )} +
+ + console.log( + 'size changed to ' + selected + ) + } + > + {options.map(({ name, id }) => ( + + ))} +
- - - -
- ) - }) + {toggle && ( +
+ Stuff +
+ )} +
+ + + +
+ ) +} diff --git a/components/select/src/single-select-field/single-select-field.stories.e2e.js b/components/select/src/single-select-field/single-select-field.stories.e2e.js index 88f759a282..c9f76263b4 100644 --- a/components/select/src/single-select-field/single-select-field.stories.e2e.js +++ b/components/select/src/single-select-field/single-select-field.stories.e2e.js @@ -1,46 +1,45 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { SingleSelectOption } from '../index.js' import { SingleSelectField } from './index.js' -storiesOf('SingleSelectField', module) - .add('With label', () => ( - - - - - - )) - .add('With help text', () => ( - - - - - - )) - .add('With validation text', () => ( - - - - - - )) - .add('With label and required status', () => ( - - - - - - )) - .add('With clearable and selected option', () => ( - - - - )) - .add('With filterable', () => ( - - - - )) - .add('With loading', () => ) - .add('Without options', () => ) +export default { title: 'SingleSelectField' } +export const WithLabel = () => ( + + + + + +) +export const WithHelpText = () => ( + + + + + +) +export const WithValidationText = () => ( + + + + + +) +export const WithLabelAndRequiredStatus = () => ( + + + + + +) +export const WithClearableAndSelectedOption = () => ( + + + +) +export const WithFilterable = () => ( + + + +) +export const WithLoading = () => +export const WithoutOptions = () => diff --git a/components/select/src/single-select/single-select.stories.e2e.js b/components/select/src/single-select/single-select.stories.e2e.js index 23f4e71027..f5bb355b69 100644 --- a/components/select/src/single-select/single-select.stories.e2e.js +++ b/components/select/src/single-select/single-select.stories.e2e.js @@ -1,6 +1,5 @@ import { Button } from '@dhis2-ui/button' import { Modal, ModalTitle, ModalContent } from '@dhis2-ui/modal' -import { storiesOf } from '@storybook/react' import PropTypes from 'prop-types' import React, { useState } from 'react' import { SingleSelectOption } from '../index.js' @@ -26,93 +25,222 @@ const options = [ { name: 'bar', id: '4' }, ] -storiesOf('SingleSelect', module) - .add('With options', () => ( - - - - - - )) - .add('With options and onChange', () => ( - - - - - - )) - .add('With onFocus', () => ( - - - - - - )) - .add('With onBlur', () => ( - - - - - - )) - .add('With custom options and onChange', () => ( - - - - - - )) - .add('With invalid options', () => ( - -
invalid one
- -
invalid two
- -
invalid three
- - {null} - {undefined} - {false} -
- )) - .add('With invalid filterable options', () => ( - -
invalid one
- -
invalid two
- -
invalid three
- -
- )) - .add('With initialFocus', () => ( - - )) - .add('Empty', () => ) - .add('Empty with empty text', () => ( - - )) - .add('Empty with empty component', () => ( - Custom empty component
} - /> - )) - .add('With options and loading', () => ( - - - - - - )) - .add('With options, loading and loading text', () => ( - - - - - - )) - .add('With more than ten options', () => ( +export default { title: 'SingleSelect' } +export const WithOptions = () => ( + + + + + +) +export const WithOptionsAndOnChange = () => ( + + + + + +) +export const WithOnFocus = () => ( + + + + + +) +export const WithOnBlur = () => ( + + + + + +) +export const WithCustomOptionsAndOnChange = () => ( + + + + + +) +export const WithInvalidOptions = () => ( + +
invalid one
+ +
invalid two
+ +
invalid three
+ + {null} + {undefined} + {false} +
+) +export const WithInvalidFilterableOptions = () => ( + +
invalid one
+ +
invalid two
+ +
invalid three
+ +
+) +export const WithInitialFocus = () => ( + +) +export const Empty = () => + export const EmptyWithEmptyText = () => ( + +) +export const EmptyWithEmptyComponent = () => ( + Custom empty component
} + /> +) +export const WithOptionsAndLoading = () => ( + + + + + +) +export const WithOptionsLoadingAndLoadingText = () => ( + + + + + +) +export const WithMoreThanTenOptions = () => ( + + + + + + + + + + + + + + +) +export const WithMoreThanThreeOptionsAndA100pxMaxHeight = () => ( + + + + + + + + + + + + + + +) +export const WithOptionsASelectionAndDisabled = () => ( + + + + + +) +export const WithOptionsAndDisabled = () => ( + + + + + +) +export const WithPrefix = () => ( + + + + + +) +export const WithPrefixAndSelection = () => ( + + + + + +) +export const WithPlaceholder = () => ( + + + + + +) +export const WithPlaceholderAndSelection = () => ( + + + + + +) +export const WithDisabledOptionAndOnChange = () => ( + + + + + + +) +export const WithOptionsAndASelection = () => ( + + + + + +) +export const WithOptionsASelectionAndOnChange = () => ( + + + + + +) +export const WithClearButtonSelectionAndOnChange = () => ( + + + + + +) +export const WithFilterField = () => ( + + + + + +) +export const DefaultPosition = () => ( + <> @@ -127,9 +255,16 @@ storiesOf('SingleSelect', module) - )) - .add('With more than three options and a 100px max-height', () => ( - + + +) +export const FlippedPosition = () => ( + <> + @@ -143,146 +278,10 @@ storiesOf('SingleSelect', module) - )) - .add('With options, a selection and disabled', () => ( - - - - - - )) - .add('With options and disabled', () => ( - - - - - - )) - .add('With prefix', () => ( - - - - - - )) - .add('With prefix and selection', () => ( - - - - - - )) - .add('With placeholder', () => ( - - - - - - )) - .add('With placeholder and selection', () => ( - - - - - - )) - .add('With disabled option and onChange', () => ( - - - - - - - )) - .add('With options and a selection', () => ( - - - - - - )) - .add('With options, a selection and onChange', () => ( - - - - - - )) - .add('With clear button, selection and onChange', () => ( - - - - - - )) - .add('With filter field', () => ( - - - - - - )) - .add('Default position', () => ( - <> - - - - - - - - - - - - - - - - - )) - .add('Flipped position', () => ( - <> - - - - - - - - - - - - - - - - - )) - .add('Shifted into view', () => ( - <> - - - - - - - - - - - - - - - - - )) - .add('With duplicate selected option values', () => ( - - - - - - - )) - .add('Menu width changing', () => { - const [toggle, setToggle] = useState(false) - return ( -
- - Modal - -
- {toggle && ( -
- Stuff -
- )} -
- - console.log( - 'size changed to ' + selected - ) - } - > - {options.map(({ name, id }) => ( - - ))} - + +) +export const WithDuplicateSelectedOptionValues = () => ( + + + + + + +) +export const MenuWidthChanging = () => { + const [toggle, setToggle] = useState(false) + return ( +
+ + Modal + +
+ {toggle && ( +
+ Stuff
- {toggle && ( -
- Stuff -
- )} + )} +
+ + console.log( + 'size changed to ' + selected + ) + } + > + {options.map(({ name, id }) => ( + + ))} +
- - - -
- ) - }) + {toggle && ( +
+ Stuff +
+ )} +
+ + + +
+ ) +} diff --git a/components/switch/src/switch-field/switch-field.stories.e2e.js b/components/switch/src/switch-field/switch-field.stories.e2e.js index b1dff350f5..f2abc1d398 100644 --- a/components/switch/src/switch-field/switch-field.stories.e2e.js +++ b/components/switch/src/switch-field/switch-field.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { SwitchField } from './index.js' -storiesOf('SwitchField', module).add('With label and required', () => ( +export default { title: 'SwitchField' } +export const WithLabelAndRequired = () => ( -)) +) diff --git a/components/switch/src/switch/switch.stories.e2e.js b/components/switch/src/switch/switch.stories.e2e.js index e34f37f2a1..4788b6fab6 100644 --- a/components/switch/src/switch/switch.stories.e2e.js +++ b/components/switch/src/switch/switch.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Switch } from './index.js' @@ -6,38 +5,38 @@ window.onChange = window.Cypress && window.Cypress.cy.stub() window.onBlur = window.Cypress && window.Cypress.cy.stub() window.onFocus = window.Cypress && window.Cypress.cy.stub() -storiesOf('Switch', module) - .add('With onChange', () => ( - - )) - .add('With initialFocus and onBlur', () => ( - - )) - .add('With onFocus', () => ( - - )) - .add('With disabled', () => ( - - )) - .add('With label', () => ( - - )) - .add('With initialFocus', () => ( - - )) +export default { title: 'Switch' } +export const WithOnChange = () => ( + +) +export const WithInitialFocusAndOnBlur = () => ( + +) +export const WithOnFocus = () => ( + +) +export const WithDisabled = () => ( + +) +export const WithLabel = () => ( + +) +export const WithInitialFocus = () => ( + +) diff --git a/components/tab/src/tab-bar/tab-bar.stories.e2e.js b/components/tab/src/tab-bar/tab-bar.stories.e2e.js index 60d61f7c72..6a89cf43fc 100644 --- a/components/tab/src/tab-bar/tab-bar.stories.e2e.js +++ b/components/tab/src/tab-bar/tab-bar.stories.e2e.js @@ -1,32 +1,31 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Tab } from '../tab/index.js' import { TabBar } from './index.js' -storiesOf('TabBar', module) - .add('With children', () => I am a child) - .add('Scrollable with children', () => ( - I am a child - )) - .add('Scrollable with some tabs', () => { - const TabStaticWidth = () => ( - -
- Foo -
-
- ) +export default { title: 'TabBar' } +export const WithChildren = () => I am a child + export const ScrollableWithChildren = () => ( + I am a child +) +export const ScrollableWithSomeTabs = () => { + const TabStaticWidth = () => ( + +
+ Foo +
+
+ ) - return ( - - - - - - ) - }) + return ( + + + + + + ) +} diff --git a/components/tab/src/tab/tab.stories.e2e.js b/components/tab/src/tab/tab.stories.e2e.js index b030e6276d..51e7e6588a 100644 --- a/components/tab/src/tab/tab.stories.e2e.js +++ b/components/tab/src/tab/tab.stories.e2e.js @@ -1,15 +1,14 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Tab } from './tab.js' window.onClick = window.Cypress && window.Cypress.cy.stub() -storiesOf('Tab', module) - .add('With onClick', () => Tab A) - .add('With children', () => I am a child) - .add('With icon', () => Icon
}>Children) - .add('With onClick and disabled', () => ( - - Tab A - - )) +export default { title: 'Tab' } +export const WithOnClick = () => Tab A +export const WithChildren = () => I am a child +export const WithIcon = () => Icon
}>Children +export const WithOnClickAndDisabled = () => ( + + Tab A + +) diff --git a/components/tag/src/tag.stories.e2e.js b/components/tag/src/tag.stories.e2e.js index 9479cda4a3..28507e8583 100644 --- a/components/tag/src/tag.stories.e2e.js +++ b/components/tag/src/tag.stories.e2e.js @@ -1,16 +1,15 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Tag } from './tag.js' -storiesOf('Tag', module) - .add('Without icon', () => Default) - .add('With icon', () => Icon}>Default) - .add('With text', () => Text content) - .add('With default max width', () => ( - - This is a lot of content that should exceed the default max width of - the tag component quite significantly so testing is still works when - the default value of the max width is changed - - )) - .add('With custom max width', () => Text content) +export default { title: 'Tag' } +export const WithoutIcon = () => Default +export const WithIcon = () => Icon}>Default +export const WithText = () => Text content + export const WithDefaultMaxWidth = () => ( + + This is a lot of content that should exceed the default max width of + the tag component quite significantly so testing is still works when + the default value of the max width is changed + +) +export const WithCustomMaxWidth = () => Text content diff --git a/components/text-area/src/text-area-field/text-area-field.stories.e2e.js b/components/text-area/src/text-area-field/text-area-field.stories.e2e.js index b8629e72c8..fa50d32a08 100644 --- a/components/text-area/src/text-area-field/text-area-field.stories.e2e.js +++ b/components/text-area/src/text-area-field/text-area-field.stories.e2e.js @@ -1,11 +1,11 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { TextAreaField } from './index.js' -storiesOf('TextAreaField', module).add('With label and required', () => ( +export default { title: 'TextAreaField' } +export const WithLabelAndRequired = () => ( -)) +) diff --git a/components/text-area/src/text-area/text-area.stories.e2e.js b/components/text-area/src/text-area/text-area.stories.e2e.js index 209291c6c5..ae4550c69d 100644 --- a/components/text-area/src/text-area/text-area.stories.e2e.js +++ b/components/text-area/src/text-area/text-area.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { TextArea } from './index.js' @@ -6,15 +5,15 @@ window.onChange = window.Cypress && window.Cypress.cy.stub() window.onBlur = window.Cypress && window.Cypress.cy.stub() window.onFocus = window.Cypress && window.Cypress.cy.stub() -storiesOf('TextArea', module) - .add('With onChange', () => ( -