From eb816a5369adcdcfe91c2213ce1960d4bc30277d Mon Sep 17 00:00:00 2001 From: Alaa Yahia <6881345+alaa-yahia@users.noreply.github.com> Date: Mon, 26 Aug 2024 13:10:27 +0300 Subject: [PATCH] chore: sync alpha branch with latest master changes (#1580) fix: sync alpha branch with latest master --- .github/workflows/dhis2-deploy-netlify.yml | 2 +- .github/workflows/dhis2-preview-pr.yml | 2 +- .github/workflows/dhis2-verify-commits.yml | 6 + .github/workflows/dhis2-verify-lib.yml | 22 +- CHANGELOG.md | 123 +- collections/forms/i18n/en.pot | 4 +- collections/forms/i18n/es_419.po | 52 +- collections/forms/i18n/ru.po | 59 +- collections/forms/package.json | 26 +- .../CheckboxFieldFF.e2e.stories.js | 52 + ...ies.js => CheckboxFieldFF.prod.stories.js} | 0 .../CheckboxFieldFF.stories.e2e.js | 54 - ...tories.js => FieldGroupFF.prod.stories.js} | 0 ...e2e.js => FileInputFieldFF.e2e.stories.js} | 18 +- ...es.js => FileInputFieldFF.prod.stories.js} | 0 .../InputFieldFF/InputFieldFF.e2e.stories.js | 19 + ...tories.js => InputFieldFF.prod.stories.js} | 0 .../InputFieldFF/InputFieldFF.stories.e2e.js | 21 - .../MultiSelectFieldFF.e2e.stories.js | 27 + ....js => MultiSelectFieldFF.prod.stories.js} | 0 .../MultiSelectFieldFF.stories.e2e.js | 25 - .../features/common/index.js | 2 +- .../RadioFieldFF/RadioFieldFF.e2e.stories.js | 39 + ...tories.js => RadioFieldFF.prod.stories.js} | 0 .../RadioFieldFF/RadioFieldFF.stories.e2e.js | 41 - .../SingleSelectFieldFF.e2e.stories.js | 23 + ...js => SingleSelectFieldFF.prod.stories.js} | 0 .../SingleSelectFieldFF.stories.e2e.js | 22 - .../SwitchFieldFF.e2e.stories.js | 52 + ...ories.js => SwitchFieldFF.prod.stories.js} | 0 .../SwitchFieldFF.stories.e2e.js | 54 - .../TextAreaFieldFF.e2e.stories.js | 23 + ...ies.js => TextAreaFieldFF.prod.stories.js} | 0 .../TextAreaFieldFF.stories.e2e.js | 25 - .../__snapshots__/index.test.js.snap | 3 + collections/ui/API.md | 47 +- collections/ui/package.json | 100 +- components/alert/package.json | 14 +- .../src/alert-bar/alert-bar.e2e.stories.js | 53 + ...r.stories.js => alert-bar.prod.stories.js} | 0 .../src/alert-bar/alert-bar.stories.e2e.js | 53 - .../alert/src/alert-bar/features/api/index.js | 2 +- .../alert/src/alert-bar/features/hide.feature | 4 +- .../src/alert-bar/features/hide/index.js | 8 +- ...ries.e2e.js => alert-stack.e2e.stories.js} | 7 +- .../alert/src/alert-stack/alert-stack.js | 2 +- ...stories.js => alert-stack.prod.stories.js} | 0 components/box/package.json | 10 +- components/box/src/box.e2e.stories.js | 10 + .../{box.stories.js => box.prod.stories.js} | 0 components/box/src/box.stories.e2e.js | 11 - components/button/i18n/en.pot | 12 + components/button/package.json | 18 +- ...ies.e2e.js => button-strip.e2e.stories.js} | 7 +- ...tories.js => button-strip.prod.stories.js} | 0 .../button/src/button/button.e2e.stories.js | 24 + components/button/src/button/button.js | 2 +- ...tton.stories.js => button.prod.stories.js} | 0 .../button/src/button/button.stories.e2e.js | 29 - .../button/features/can_be_blurred/index.js | 2 +- .../button/features/can_be_clicked/index.js | 2 +- .../button/features/can_be_focused/index.js | 2 +- .../dropdown-button.e2e.stories.js | 67 + .../src/dropdown-button/dropdown-button.js | 8 +- ...ies.js => dropdown-button.prod.stories.js} | 2 +- .../dropdown-button.stories.e2e.js | 67 - .../features/accepts_initial_focus/index.js | 2 +- .../features/button_is_clickable/index.js | 2 +- .../features/can_be_disabled/index.js | 2 +- .../features/accepts_initial_focus/index.js | 2 +- .../features/button_is_clickable/index.js | 2 +- .../split-button/split-button.e2e.stories.js | 56 + .../button/src/split-button/split-button.js | 8 +- ...tories.js => split-button.prod.stories.js} | 0 .../split-button/split-button.stories.e2e.js | 65 - components/calendar/i18n/en.pot | 4 +- components/calendar/package.json | 22 +- ...s.e2e.js => calendar-input.e2e.stories.js} | 4 +- .../src/calendar-input/calendar-input.js | 8 +- ...ries.js => calendar-input.prod.stories.js} | 2 + ...ar.stories.js => calendar.prod.stories.js} | 0 components/card/package.json | 10 +- ...ard.stories.e2e.js => card.e2e.stories.js} | 6 +- .../{card.stories.js => card.prod.stories.js} | 0 components/center/package.json | 10 +- ...nter.stories.js => center.prod.stories.js} | 0 components/checkbox/package.json | 14 +- .../checkbox-field.e2e.stories.js | 26 + .../src/checkbox-field/checkbox-field.js | 4 +- ...ries.js => checkbox-field.prod.stories.js} | 0 .../checkbox-field.stories.e2e.js | 32 - .../src/checkbox/checkbox.e2e.stories.js | 55 + ...ox.stories.js => checkbox.prod.stories.js} | 0 .../src/checkbox/checkbox.stories.e2e.js | 56 - .../features/accepts_initial_focus/index.js | 2 +- .../checkbox/features/can_be_blurred/index.js | 2 +- .../checkbox/features/can_be_changed/index.js | 2 +- .../features/can_be_disabled/index.js | 2 +- .../checkbox/features/can_be_focused/index.js | 2 +- components/chip/package.json | 10 +- components/chip/src/chip.e2e.stories.js | 14 + .../{chip.stories.js => chip.prod.stories.js} | 0 components/chip/src/chip.stories.e2e.js | 15 - .../chip/src/features/is_clickable/index.js | 2 +- .../chip/src/features/is_removable/index.js | 2 +- components/cover/package.json | 10 +- ...er.stories.e2e.js => cover.e2e.stories.js} | 8 +- ...cover.stories.js => cover.prod.stories.js} | 0 .../src/features/click_behavior/index.js | 2 +- components/css/package.json | 10 +- ...t.stories.js => css-reset.prod.stories.js} | 0 .../css-variables.e2e.stories.js | 43 + .../css/src/css-variables/css-variables.js | 1 + ...ories.js => css-variables.prod.stories.js} | 0 .../css-variables.stories.e2e.js | 47 - components/divider/package.json | 10 +- components/divider/src/divider.js | 2 +- ...der.stories.js => divider.prod.stories.js} | 0 components/field/package.json | 16 +- ...ries.e2e.js => field-group.e2e.stories.js} | 6 +- .../field/src/field-group/field-group.js | 3 +- ...stories.js => field-group.prod.stories.js} | 2 +- .../src/field-set/field-set.e2e.stories.js | 5 + ...t.stories.js => field-set.prod.stories.js} | 0 .../src/field-set/field-set.stories.e2e.js | 7 - .../field/src/field/field.e2e.stories.js | 5 + components/field/src/field/field.js | 2 +- ...field.stories.js => field.prod.stories.js} | 2 +- .../field/src/field/field.stories.e2e.js | 7 - components/file-input/i18n/es_419.po | 4 +- components/file-input/i18n/fr.po | 9 +- components/file-input/i18n/nl.po | 2 +- components/file-input/i18n/ru.po | 11 +- components/file-input/package.json | 22 +- .../file-input-field-with-list.e2e.stories.js | 73 + .../file-input-field-with-list.js | 2 +- ...ile-input-field-with-list.prod.stories.js} | 0 .../file-input-field-with-list.stories.e2e.js | 74 - .../file-list-item-with-remove.js | 2 +- .../file-input-field.e2e.stories.js | 15 + .../src/file-input-field/file-input-field.js | 5 +- ...es.js => file-input-field.prod.stories.js} | 0 .../file-input-field.stories.e2e.js | 16 - .../features/accepts_multiple_files/index.js | 2 +- .../features/can_be_blurred/index.js | 2 +- .../features/can_be_changed/index.js | 2 +- .../features/can_be_focused/index.js | 2 +- .../src/file-input/file-input.e2e.stories.js | 46 + .../file-input/src/file-input/file-input.js | 4 +- ....stories.js => file-input.prod.stories.js} | 0 .../src/file-input/file-input.stories.e2e.js | 50 - .../features/accepts_cancel_text/index.js | 2 +- .../features/accepts_remove_text/index.js | 2 +- .../features/can_be_removed/index.js | 2 +- .../loading_can_be_cancelled/index.js | 2 +- .../file-list/file-list-item.e2e.stories.js | 39 + .../src/file-list/file-list-item.js | 2 +- .../file-list/file-list-item.stories.e2e.js | 40 - ...s => file-list-placeholder.e2e.stories.js} | 6 +- .../src/file-list/file-list.e2e.stories.js | 5 + .../src/file-list/file-list.stories.e2e.js | 7 - components/header-bar/i18n/en.pot | 7 +- components/header-bar/i18n/es.po | 8 +- components/header-bar/i18n/es_419.po | 44 +- components/header-bar/i18n/km.po | 12 +- components/header-bar/i18n/ps.po | 15 +- components/header-bar/i18n/pt.po | 15 +- components/header-bar/i18n/ru.po | 44 +- components/header-bar/i18n/sv.po | 15 +- components/header-bar/i18n/tet.po | 15 +- components/header-bar/i18n/ur.po | 15 +- components/header-bar/i18n/vi.po | 17 +- components/header-bar/i18n/zh.po | 19 +- components/header-bar/i18n/zh_CN.po | 17 +- components/header-bar/package.json | 36 +- ...ories.e2e.js => header-bar.e2e.stories.js} | 0 .../__e2e__/stories/online-status-message.js | 2 +- components/header-bar/src/apps.js | 4 +- .../src/debug-info/debug-info-menu-item.js | 2 +- .../src/debug-info/debug-info-modal.js | 2 +- .../the_headerbar_displays_online_status.js | 5 + ....stories.js => header-bar.prod.stories.js} | 0 components/header-bar/src/logo-image.js | 2 +- .../src/profile-menu/profile-header.js | 2 +- .../src/profile-menu/profile-menu.js | 12 +- .../src/profile-menu/update-notification.js | 2 +- components/header-bar/src/profile.js | 2 +- components/help/package.json | 10 +- components/help/src/help.e2e.stories.js | 5 + .../{help.stories.js => help.prod.stories.js} | 0 components/help/src/help.stories.e2e.js | 5 - components/input/package.json | 22 +- ...ries.e2e.js => input-field.e2e.stories.js} | 6 +- .../input/src/input-field/input-field.js | 2 +- ...stories.js => input-field.prod.stories.js} | 0 .../features/accepts_initial_focus/index.js | 2 +- .../input/features/can_be_blurred/index.js | 2 +- .../input/features/can_be_changed/index.js | 2 +- .../input/features/can_be_focused/index.js | 2 +- .../input/src/input/input.e2e.stories.js | 39 + components/input/src/input/input.js | 2 +- ...input.stories.js => input.prod.stories.js} | 0 .../input/src/input/input.stories.e2e.js | 40 - components/intersection-detector/package.json | 10 +- .../features/Visibility_notification/index.js | 24 +- ...s => intersection-detector.e2e.stories.js} | 0 ... => intersection-detector.prod.stories.js} | 0 components/label/package.json | 12 +- components/label/src/label.e2e.stories.js | 6 + components/label/src/label.js | 2 +- components/label/src/label.stories.e2e.js | 7 - components/layer/package.json | 12 +- .../src/features/click_behavior/index.js | 2 +- .../layer/src/features/stacking/index.js | 11 +- ...er.stories.e2e.js => layer.e2e.stories.js} | 0 components/layer/src/layer.js | 2 +- ...layer.stories.js => layer.prod.stories.js} | 0 components/legend/package.json | 12 +- components/legend/src/legend.e2e.stories.js | 8 + components/legend/src/legend.js | 2 +- ...gend.stories.js => legend.prod.stories.js} | 0 components/legend/src/legend.stories.e2e.js | 11 - components/loader/package.json | 10 +- ...ies.js => circular-loader.prod.stories.js} | 0 ...ories.js => linear-loader.prod.stories.js} | 2 +- components/logo/package.json | 10 +- .../{logo.stories.js => logo.prod.stories.js} | 0 components/menu/API.md | 4 + components/menu/package.json | 22 +- .../flyout-menu/__tests__/flyout-menu.test.js | 48 + .../flyout-menu/features/position/index.js | 6 +- ...ries.e2e.js => flyout-menu.e2e.stories.js} | 0 .../menu/src/flyout-menu/flyout-menu.js | 53 +- ...stories.js => flyout-menu.prod.stories.js} | 4 +- .../menu/src/menu-divider/menu-divider.js | 2 +- ...tories.js => menu-divider.prod.stories.js} | 0 .../src/menu-item/__tests__/menu-item.test.js | 76 + .../menu-item/features/accepts_href/index.js | 4 +- .../menu-item/features/accepts_label/index.js | 2 +- .../features/accepts_target/index.js | 4 +- ...tories.e2e.js => menu-item.e2e.stories.js} | 0 components/menu/src/menu-item/menu-item.js | 63 +- ...m.stories.js => menu-item.prod.stories.js} | 2 + .../features/accepts_label/index.js | 2 +- ....js => menu-section-header.e2e.stories.js} | 0 .../menu-section-header.js | 2 +- ...js => menu-section-header.prod.stories.js} | 0 .../menu/src/menu/__tests__/menu.test.js | 204 + components/menu/src/menu/helpers.js | 36 + components/menu/src/menu/menu.e2e.stories.js | 5 + components/menu/src/menu/menu.js | 112 +- .../{menu.stories.js => menu.prod.stories.js} | 0 components/menu/src/menu/menu.stories.e2e.js | 5 - components/menu/src/menu/use-menu.js | 100 + components/menu/types/index.d.ts | 17 + components/modal/API.md | 2 +- components/modal/package.json | 20 +- .../modal-actions.e2e.stories.js | 5 + .../modal-actions.stories.e2e.js | 7 - .../modal-content.e2e.stories.js | 5 + .../modal-content.stories.e2e.js | 7 - .../modal-title/modal-title.e2e.stories.js | 5 + .../modal/src/modal-title/modal-title.js | 2 +- .../modal-title/modal-title.stories.e2e.js | 7 - components/modal/src/modal/close-button.js | 3 + .../src/modal/features/can_be_closed/index.js | 6 +- .../modal/src/modal/modal.e2e.stories.js | 78 + components/modal/src/modal/modal.js | 25 +- ...modal.stories.js => modal.prod.stories.js} | 2 +- .../modal/src/modal/modal.stories.e2e.js | 79 - components/modal/src/modal/modal.test.js | 42 +- components/modal/types/index.d.ts | 2 +- components/node/package.json | 12 +- .../node/src/features/can_be_closed/index.js | 2 +- .../node/src/features/can_be_opened/index.js | 2 +- components/node/src/node.e2e.stories.js | 33 + .../{node.stories.js => node.prod.stories.js} | 0 components/node/src/node.stories.e2e.js | 34 - components/notice-box/package.json | 12 +- .../notice-box/src/notice-box.e2e.stories.js | 6 + ....stories.js => notice-box.prod.stories.js} | 0 .../notice-box/src/notice-box.stories.e2e.js | 7 - .../organisation-unit-tree/i18n/es_419.po | 25 + components/organisation-unit-tree/i18n/fr.po | 25 + components/organisation-unit-tree/i18n/ru.po | 25 + .../organisation-unit-tree/package.json | 17 +- ...ries.e2e.js => children_as_child_nodes.js} | 6 +- ....stories.e2e.js => controlled_expanded.js} | 11 +- .../src/__e2e__/displaying_loading_error.js | 45 + .../displaying_loading_error.stories.e2e.js | 51 - .../{expanded.stories.e2e.js => expanded.js} | 17 +- ..._reload.stories.e2e.js => force_reload.js} | 6 +- ...{highlight.stories.e2e.js => highlight.js} | 6 +- ..._state.stories.e2e.js => loading_state.js} | 6 +- ...tion.stories.e2e.js => multi_selection.js} | 11 +- .../src/__e2e__/no_selection.js | 32 + .../src/__e2e__/no_selection.stories.e2e.js | 38 - .../src/__e2e__/path_based_filtering.js | 49 + .../path_based_filtering.stories.e2e.js | 55 - ...ion.stories.e2e.js => single_selection.js} | 11 +- ...oot.stories.e2e.js => sub_unit_as_root.js} | 13 +- .../{tree_api.stories.e2e.js => tree_api.js} | 11 +- .../src/features/controlled_expanded/index.js | 9 +- .../displaying_loading_error/index.js | 4 +- .../src/features/expanded/index.js | 12 +- .../src/features/loading_state/index.js | 2 +- .../src/organisation-unit-tree.e2e.stories.js | 28 + ...=> organisation-unit-tree.prod.stories.js} | 0 components/pagination/i18n/es_419.po | 20 +- components/pagination/i18n/ru.po | 18 +- components/pagination/package.json | 16 +- components/pagination/src/page-controls.js | 2 +- components/pagination/src/page-select.js | 2 +- components/pagination/src/page-size-select.js | 2 +- ....stories.js => pagination.prod.stories.js} | 0 components/popover/package.json | 14 +- ....stories.e2e.js => popover.e2e.stories.js} | 0 components/popover/src/popover.js | 2 +- ...ver.stories.js => popover.prod.stories.js} | 0 components/popper/package.json | 10 +- .../accepts_different_reference_types.feature | 1 - .../index.js | 18 +- ...r.stories.e2e.js => popper.e2e.stories.js} | 0 components/popper/src/popper.js | 9 +- ...pper.stories.js => popper.prod.stories.js} | 0 components/portal/package.json | 8 +- components/radio/package.json | 10 +- .../features/accepts_initial_focus/index.js | 2 +- .../src/features/can_be_blurred/index.js | 2 +- .../src/features/can_be_changed/index.js | 2 +- .../src/features/can_be_focused/index.js | 2 +- components/radio/src/radio.e2e.stories.js | 38 + ...radio.stories.js => radio.prod.stories.js} | 0 components/radio/src/radio.stories.e2e.js | 44 - components/required/package.json | 10 +- components/segmented-control/package.json | 10 +- ...s.js => segmented-control.prod.stories.js} | 0 components/select/i18n/es_419.po | 6 +- components/select/i18n/fr.po | 9 +- components/select/i18n/nl.po | 2 +- components/select/i18n/ru.po | 4 +- components/select/package.json | 36 +- .../multi-select-field.e2e.stories.js | 45 + .../multi-select-field/multi-select-field.js | 4 +- ....js => multi-select-field.prod.stories.js} | 0 .../multi-select-field.stories.e2e.js | 46 - .../multi-select-option.js | 2 +- .../features/accepts_blur_cb/index.js | 2 +- .../features/accepts_focus_cb/index.js | 2 +- .../features/accepts_initial_focus/index.js | 2 +- .../features/accepts_max_height/index.js | 2 +- .../features/allows_selecting/index.js | 4 +- .../features/can_be_cleared/index.js | 2 +- .../src/multi-select/features/common/index.js | 4 +- .../menu_width_matches_input/index.js | 2 +- .../multi-select/features/position.feature | 1 - .../multi-select/features/position/index.js | 8 +- .../multi-select/multi-select.e2e.stories.js | 407 + .../select/src/multi-select/multi-select.js | 2 +- ...tories.js => multi-select.prod.stories.js} | 4 +- .../multi-select/multi-select.stories.e2e.js | 416 - components/select/src/select/filter-input.js | 2 +- .../select/src/select/input-clear-button.js | 2 +- components/select/src/select/loading.js | 2 +- components/select/src/select/menu-wrapper.js | 2 +- .../single-select-field.e2e.stories.js | 45 + .../single-select-field.js | 4 +- ...js => single-select-field.prod.stories.js} | 0 .../single-select-field.stories.e2e.js | 46 - .../features/accepts_blur_cb/index.js | 2 +- .../features/accepts_focus_cb/index.js | 2 +- .../features/accepts_initial_focus/index.js | 2 +- .../features/accepts_max_height/index.js | 2 +- .../features/allows_selecting/index.js | 4 +- .../features/can_be_cleared/index.js | 2 +- .../single-select/features/common/index.js | 4 +- .../menu_width_matches_input/index.js | 2 +- .../single-select/features/position/index.js | 6 +- .../single-select.e2e.stories.js | 376 + .../select/src/single-select/single-select.js | 2 +- ...ories.js => single-select.prod.stories.js} | 3 +- .../single-select.stories.e2e.js | 389 - components/selector-bar/API.md | 1 + components/selector-bar/i18n/es_419.po | 19 + components/selector-bar/i18n/ru.po | 19 + components/selector-bar/package.json | 28 +- ...2e.js => selector-bar-item.e2e.stories.js} | 0 .../selector-bar-item/selector-bar-item.js | 4 +- .../src/selector-bar/__stories__/common.js | 4 +- .../src/selector-bar/selector-bar.js | 169 +- ...tories.js => selector-bar.prod.stories.js} | 0 components/sharing-dialog/API.md | 38 +- components/sharing-dialog/i18n/es_419.po | 74 +- components/sharing-dialog/i18n/ru.po | 66 +- components/sharing-dialog/package.json | 40 +- .../src/access-add/access-add.js | 4 +- .../src/access-list/list-item-icon.js | 2 +- .../src/access-list/list-item.js | 4 +- .../src/autocomplete/autocomplete.js | 2 +- .../autocomplete/sharing-autocomplete.test.js | 18 +- .../src/cascade-sharing/controls.js | 6 +- .../src/cascade-sharing/update-info.js | 2 +- components/sharing-dialog/src/constants.js | 59 +- ...s.e2e.js => sharing-dialog.e2e.stories.js} | 0 .../sharing-dialog/src/sharing-dialog.js | 13 +- ...ries.js => sharing-dialog.prod.stories.js} | 0 .../sharing-dialog/src/tabs/tabbed-content.js | 15 +- components/sharing-dialog/types/index.d.ts | 52 +- components/status-icon/package.json | 14 +- components/status-icon/src/status-icon.js | 2 +- components/switch/package.json | 14 +- ...ies.e2e.js => switch-field.e2e.stories.js} | 6 +- .../switch/src/switch-field/switch-field.js | 4 +- ...tories.js => switch-field.prod.stories.js} | 0 .../features/accepts_initial_focus/index.js | 2 +- .../switch/features/can_be_blurred/index.js | 2 +- .../switch/features/can_be_changed/index.js | 2 +- .../switch/features/can_be_focused/index.js | 2 +- .../switch/src/switch/switch.e2e.stories.js | 37 + ...itch.stories.js => switch.prod.stories.js} | 0 .../switch/src/switch/switch.stories.e2e.js | 43 - components/tab/package.json | 13 +- .../tab/src/tab-bar/tab-bar.e2e.stories.js | 31 + ...bar.stories.js => tab-bar.prod.stories.js} | 0 .../tab/src/tab-bar/tab-bar.stories.e2e.js | 32 - components/tab/src/tab-bar/tabs.js | 98 +- .../src/tab/features/is_clickable/index.js | 4 +- components/tab/src/tab/tab.e2e.stories.js | 14 + components/tab/src/tab/tab.js | 290 +- components/tab/src/tab/tab.stories.e2e.js | 15 - components/table/i18n/es_419.po | 22 + components/table/i18n/ru.po | 22 + components/table/package.json | 12 +- ...ories.e2e.js => data-table.e2e.stories.js} | 0 ....stories.js => data-table.prod.stories.js} | 0 ...le.stories.e2e.js => table.e2e.stories.js} | 0 .../table-elements/table.stories.internal.js | 4 +- ...ories.js => stacked-table.prod.stories.js} | 0 ...table.stories.js => table.prod.stories.js} | 0 components/tag/API.md | 2 +- components/tag/package.json | 10 +- components/tag/src/tag.e2e.stories.js | 15 + components/tag/src/tag.js | 2 +- .../{tag.stories.js => tag.prod.stories.js} | 0 components/tag/src/tag.stories.e2e.js | 16 - components/tag/types/index.d.ts | 2 +- components/text-area/package.json | 20 +- ....e2e.js => text-area-field.e2e.stories.js} | 6 +- .../src/text-area-field/text-area-field.js | 4 +- ...ies.js => text-area-field.prod.stories.js} | 0 .../features/accepts_initial_focus/index.js | 2 +- .../features/can_be_blurred/index.js | 2 +- .../features/can_be_changed/index.js | 2 +- .../features/can_be_focused/index.js | 2 +- .../src/text-area/text-area.e2e.stories.js | 19 + .../text-area/src/text-area/text-area.js | 2 +- ...a.stories.js => text-area.prod.stories.js} | 0 .../src/text-area/text-area.stories.e2e.js | 20 - components/tooltip/package.json | 14 +- .../tooltip/src/features/common/index.js | 2 +- ....stories.e2e.js => tooltip.e2e.stories.js} | 9 +- components/tooltip/src/tooltip.js | 2 +- ...tip.stories.js => tooltip.prod.stories.js} | 0 components/transfer/package.json | 20 +- ...remove-highlighted-options.e2e.stories.js} | 0 ... disabled-transfer-buttons.e2e.stories.js} | 0 ... disabled-transfer-options.e2e.stories.js} | 0 ...es.e2e.js => display-order.e2e.stories.js} | 0 ....js => filter-options-list.e2e.stories.js} | 0 ...highlight-range-of-options.e2e.stories.js} | 0 ...es.e2e.js => loading_lists.e2e.stories.js} | 0 ...s => notify_at_end_of_list.e2e.stories.js} | 0 ...js => reorder-with-buttons.e2e.stories.js} | 0 ...t_unset-highlighted-option.e2e.stories.js} | 0 ...e.js => transferring-items.e2e.stories.js} | 0 .../helper/use-highlighted-option.test.js | 2 +- components/transfer/src/filter.js | 2 +- components/transfer/src/options-container.js | 2 +- components/transfer/src/reordering-actions.js | 2 +- components/transfer/src/transfer.js | 2 +- ...er.stories.js => transfer.prod.stories.js} | 0 components/user-avatar/package.json | 10 +- ...stories.js => user-avatar.prod.stories.js} | 0 constants/package.json | 4 +- docs/docs/components/calendar-input.md | 1 + .../forms/react-final-form.stories.mdx | 6 - .../utilities/forms/transformers.stories.mdx | 6 - .../utilities/forms/validators.stories.mdx | 6 - docs/package.json | 7 +- icons/package.json | 8 +- ...icons.stories.js => icons.prod.stories.js} | 0 icons/types/index.d.ts | 2 + package.json | 15 +- scripts/build-docs.js | 29 - scripts/build-world.sh | 3 +- storybook/config/main.js | 28 +- storybook/config/manager.js | 2 +- storybook/config/preview.js | 4 +- storybook/package.json | 44 +- storybook/src/babel-config.js | 13 +- storybook/src/load-stories.js | 25 +- storybook/src/webpack-config.js | 16 +- yarn.lock | 21375 +++++++--------- 503 files changed, 13896 insertions(+), 16099 deletions(-) create mode 100644 collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.e2e.stories.js rename collections/forms/src/CheckboxFieldFF/{CheckboxFieldFF.stories.js => CheckboxFieldFF.prod.stories.js} (100%) delete mode 100644 collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.stories.e2e.js rename collections/forms/src/FieldGroupFF/{FieldGroupFF.stories.js => FieldGroupFF.prod.stories.js} (100%) rename collections/forms/src/FileInputFieldFF/{FileInputFieldFF.stories.e2e.js => FileInputFieldFF.e2e.stories.js} (96%) rename collections/forms/src/FileInputFieldFF/{FileInputFieldFF.stories.js => FileInputFieldFF.prod.stories.js} (100%) create mode 100644 collections/forms/src/InputFieldFF/InputFieldFF.e2e.stories.js rename collections/forms/src/InputFieldFF/{InputFieldFF.stories.js => InputFieldFF.prod.stories.js} (100%) delete mode 100644 collections/forms/src/InputFieldFF/InputFieldFF.stories.e2e.js create mode 100644 collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.e2e.stories.js rename collections/forms/src/MultiSelectFieldFF/{MultiSelectFieldFF.stories.js => MultiSelectFieldFF.prod.stories.js} (100%) delete mode 100644 collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js create mode 100644 collections/forms/src/RadioFieldFF/RadioFieldFF.e2e.stories.js rename collections/forms/src/RadioFieldFF/{RadioFieldFF.stories.js => RadioFieldFF.prod.stories.js} (100%) delete mode 100644 collections/forms/src/RadioFieldFF/RadioFieldFF.stories.e2e.js create mode 100644 collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.e2e.stories.js rename collections/forms/src/SingleSelectFieldFF/{SingleSelectFieldFF.stories.js => SingleSelectFieldFF.prod.stories.js} (100%) delete mode 100644 collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js create mode 100644 collections/forms/src/SwitchFieldFF/SwitchFieldFF.e2e.stories.js rename collections/forms/src/SwitchFieldFF/{SwitchFieldFF.stories.js => SwitchFieldFF.prod.stories.js} (100%) delete mode 100644 collections/forms/src/SwitchFieldFF/SwitchFieldFF.stories.e2e.js create mode 100644 collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.e2e.stories.js rename collections/forms/src/TextAreaFieldFF/{TextAreaFieldFF.stories.js => TextAreaFieldFF.prod.stories.js} (100%) delete mode 100644 collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js create mode 100644 components/alert/src/alert-bar/alert-bar.e2e.stories.js rename components/alert/src/alert-bar/{alert-bar.stories.js => alert-bar.prod.stories.js} (100%) delete mode 100644 components/alert/src/alert-bar/alert-bar.stories.e2e.js rename components/alert/src/alert-stack/{alert-stack.stories.e2e.js => alert-stack.e2e.stories.js} (74%) rename components/alert/src/alert-stack/{alert-stack.stories.js => alert-stack.prod.stories.js} (100%) create mode 100644 components/box/src/box.e2e.stories.js rename components/box/src/{box.stories.js => box.prod.stories.js} (100%) delete mode 100644 components/box/src/box.stories.e2e.js create mode 100644 components/button/i18n/en.pot rename components/button/src/button-strip/{button-strip.stories.e2e.js => button-strip.e2e.stories.js} (69%) rename components/button/src/button-strip/{button-strip.stories.js => button-strip.prod.stories.js} (100%) create mode 100644 components/button/src/button/button.e2e.stories.js rename components/button/src/button/{button.stories.js => button.prod.stories.js} (100%) delete mode 100644 components/button/src/button/button.stories.e2e.js create mode 100644 components/button/src/dropdown-button/dropdown-button.e2e.stories.js rename components/button/src/dropdown-button/{dropdown-button.stories.js => dropdown-button.prod.stories.js} (100%) delete mode 100644 components/button/src/dropdown-button/dropdown-button.stories.e2e.js create mode 100644 components/button/src/split-button/split-button.e2e.stories.js rename components/button/src/split-button/{split-button.stories.js => split-button.prod.stories.js} (100%) delete mode 100644 components/button/src/split-button/split-button.stories.e2e.js rename components/calendar/src/__e2e__/{calendar-input.stories.e2e.js => calendar-input.e2e.stories.js} (90%) rename components/calendar/src/stories/{calendar-input.stories.js => calendar-input.prod.stories.js} (97%) rename components/calendar/src/stories/{calendar.stories.js => calendar.prod.stories.js} (100%) rename components/card/src/{card.stories.e2e.js => card.e2e.stories.js} (64%) rename components/card/src/{card.stories.js => card.prod.stories.js} (100%) rename components/center/src/{center.stories.js => center.prod.stories.js} (100%) create mode 100644 components/checkbox/src/checkbox-field/checkbox-field.e2e.stories.js rename components/checkbox/src/checkbox-field/{checkbox-field.stories.js => checkbox-field.prod.stories.js} (100%) delete mode 100644 components/checkbox/src/checkbox-field/checkbox-field.stories.e2e.js create mode 100644 components/checkbox/src/checkbox/checkbox.e2e.stories.js rename components/checkbox/src/checkbox/{checkbox.stories.js => checkbox.prod.stories.js} (100%) delete mode 100644 components/checkbox/src/checkbox/checkbox.stories.e2e.js create mode 100644 components/chip/src/chip.e2e.stories.js rename components/chip/src/{chip.stories.js => chip.prod.stories.js} (100%) delete mode 100644 components/chip/src/chip.stories.e2e.js rename components/cover/src/{cover.stories.e2e.js => cover.e2e.stories.js} (81%) rename components/cover/src/{cover.stories.js => cover.prod.stories.js} (100%) rename components/css/src/css-reset/{css-reset.stories.js => css-reset.prod.stories.js} (100%) create mode 100644 components/css/src/css-variables/css-variables.e2e.stories.js rename components/css/src/css-variables/{css-variables.stories.js => css-variables.prod.stories.js} (100%) delete mode 100644 components/css/src/css-variables/css-variables.stories.e2e.js rename components/divider/src/{divider.stories.js => divider.prod.stories.js} (100%) rename components/field/src/field-group/{field-group.stories.e2e.js => field-group.e2e.stories.js} (78%) rename components/field/src/field-group/{field-group.stories.js => field-group.prod.stories.js} (100%) create mode 100644 components/field/src/field-set/field-set.e2e.stories.js rename components/field/src/field-set/{field-set.stories.js => field-set.prod.stories.js} (100%) delete mode 100644 components/field/src/field-set/field-set.stories.e2e.js create mode 100644 components/field/src/field/field.e2e.stories.js rename components/field/src/field/{field.stories.js => field.prod.stories.js} (100%) delete mode 100644 components/field/src/field/field.stories.e2e.js create mode 100644 components/file-input/src/file-input-field-with-list/file-input-field-with-list.e2e.stories.js rename components/file-input/src/file-input-field-with-list/{file-input-field-with-list.stories.js => file-input-field-with-list.prod.stories.js} (100%) delete mode 100644 components/file-input/src/file-input-field-with-list/file-input-field-with-list.stories.e2e.js create mode 100644 components/file-input/src/file-input-field/file-input-field.e2e.stories.js rename components/file-input/src/file-input-field/{file-input-field.stories.js => file-input-field.prod.stories.js} (100%) delete mode 100644 components/file-input/src/file-input-field/file-input-field.stories.e2e.js create mode 100644 components/file-input/src/file-input/file-input.e2e.stories.js rename components/file-input/src/file-input/{file-input.stories.js => file-input.prod.stories.js} (100%) delete mode 100644 components/file-input/src/file-input/file-input.stories.e2e.js create mode 100644 components/file-input/src/file-list/file-list-item.e2e.stories.js delete mode 100644 components/file-input/src/file-list/file-list-item.stories.e2e.js rename components/file-input/src/file-list/{file-list-placeholder.stories.e2e.js => file-list-placeholder.e2e.stories.js} (56%) create mode 100644 components/file-input/src/file-list/file-list.e2e.stories.js delete mode 100644 components/file-input/src/file-list/file-list.stories.e2e.js rename components/header-bar/src/__e2e__/{header-bar.stories.e2e.js => header-bar.e2e.stories.js} (100%) rename components/header-bar/src/{header-bar.stories.js => header-bar.prod.stories.js} (100%) create mode 100644 components/help/src/help.e2e.stories.js rename components/help/src/{help.stories.js => help.prod.stories.js} (100%) delete mode 100644 components/help/src/help.stories.e2e.js rename components/input/src/input-field/{input-field.stories.e2e.js => input-field.e2e.stories.js} (52%) rename components/input/src/input-field/{input-field.stories.js => input-field.prod.stories.js} (100%) create mode 100644 components/input/src/input/input.e2e.stories.js rename components/input/src/input/{input.stories.js => input.prod.stories.js} (100%) delete mode 100644 components/input/src/input/input.stories.e2e.js rename components/intersection-detector/src/{intersection-detector.stories.e2e.js => intersection-detector.e2e.stories.js} (100%) rename components/intersection-detector/src/{intersection-detector.stories.js => intersection-detector.prod.stories.js} (100%) create mode 100644 components/label/src/label.e2e.stories.js delete mode 100644 components/label/src/label.stories.e2e.js rename components/layer/src/{layer.stories.e2e.js => layer.e2e.stories.js} (100%) rename components/layer/src/{layer.stories.js => layer.prod.stories.js} (100%) create mode 100644 components/legend/src/legend.e2e.stories.js rename components/legend/src/{legend.stories.js => legend.prod.stories.js} (100%) delete mode 100644 components/legend/src/legend.stories.e2e.js rename components/loader/src/circular-loader/{circular-loader.stories.js => circular-loader.prod.stories.js} (100%) rename components/loader/src/linear-loader/{linear-loader.stories.js => linear-loader.prod.stories.js} (100%) rename components/logo/src/{logo.stories.js => logo.prod.stories.js} (100%) create mode 100644 components/menu/src/flyout-menu/__tests__/flyout-menu.test.js rename components/menu/src/flyout-menu/{flyout-menu.stories.e2e.js => flyout-menu.e2e.stories.js} (100%) rename components/menu/src/flyout-menu/{flyout-menu.stories.js => flyout-menu.prod.stories.js} (99%) rename components/menu/src/menu-divider/{menu-divider.stories.js => menu-divider.prod.stories.js} (100%) create mode 100644 components/menu/src/menu-item/__tests__/menu-item.test.js rename components/menu/src/menu-item/{menu-item.stories.e2e.js => menu-item.e2e.stories.js} (100%) rename components/menu/src/menu-item/{menu-item.stories.js => menu-item.prod.stories.js} (99%) rename components/menu/src/menu-section-header/{menu-section-header.stories.e2e.js => menu-section-header.e2e.stories.js} (100%) rename components/menu/src/menu-section-header/{menu-section-header.stories.js => menu-section-header.prod.stories.js} (100%) create mode 100644 components/menu/src/menu/__tests__/menu.test.js create mode 100644 components/menu/src/menu/helpers.js create mode 100644 components/menu/src/menu/menu.e2e.stories.js rename components/menu/src/menu/{menu.stories.js => menu.prod.stories.js} (100%) delete mode 100644 components/menu/src/menu/menu.stories.e2e.js create mode 100644 components/menu/src/menu/use-menu.js create mode 100644 components/modal/src/modal-actions/modal-actions.e2e.stories.js delete mode 100644 components/modal/src/modal-actions/modal-actions.stories.e2e.js create mode 100644 components/modal/src/modal-content/modal-content.e2e.stories.js delete mode 100644 components/modal/src/modal-content/modal-content.stories.e2e.js create mode 100644 components/modal/src/modal-title/modal-title.e2e.stories.js delete mode 100644 components/modal/src/modal-title/modal-title.stories.e2e.js create mode 100644 components/modal/src/modal/modal.e2e.stories.js rename components/modal/src/modal/{modal.stories.js => modal.prod.stories.js} (100%) delete mode 100644 components/modal/src/modal/modal.stories.e2e.js create mode 100644 components/node/src/node.e2e.stories.js rename components/node/src/{node.stories.js => node.prod.stories.js} (100%) delete mode 100644 components/node/src/node.stories.e2e.js create mode 100644 components/notice-box/src/notice-box.e2e.stories.js rename components/notice-box/src/{notice-box.stories.js => notice-box.prod.stories.js} (100%) delete mode 100644 components/notice-box/src/notice-box.stories.e2e.js create mode 100644 components/organisation-unit-tree/i18n/es_419.po create mode 100644 components/organisation-unit-tree/i18n/fr.po create mode 100644 components/organisation-unit-tree/i18n/ru.po rename components/organisation-unit-tree/src/__e2e__/{children_as_child_nodes.stories.e2e.js => children_as_child_nodes.js} (84%) rename components/organisation-unit-tree/src/__e2e__/{controlled_expanded.stories.e2e.js => controlled_expanded.js} (92%) create mode 100644 components/organisation-unit-tree/src/__e2e__/displaying_loading_error.js delete mode 100644 components/organisation-unit-tree/src/__e2e__/displaying_loading_error.stories.e2e.js rename components/organisation-unit-tree/src/__e2e__/{expanded.stories.e2e.js => expanded.js} (76%) rename components/organisation-unit-tree/src/__e2e__/{force_reload.stories.e2e.js => force_reload.js} (92%) rename components/organisation-unit-tree/src/__e2e__/{highlight.stories.e2e.js => highlight.js} (85%) rename components/organisation-unit-tree/src/__e2e__/{loading_state.stories.e2e.js => loading_state.js} (88%) rename components/organisation-unit-tree/src/__e2e__/{multi_selection.stories.e2e.js => multi_selection.js} (75%) create mode 100644 components/organisation-unit-tree/src/__e2e__/no_selection.js delete mode 100644 components/organisation-unit-tree/src/__e2e__/no_selection.stories.e2e.js create mode 100644 components/organisation-unit-tree/src/__e2e__/path_based_filtering.js delete mode 100644 components/organisation-unit-tree/src/__e2e__/path_based_filtering.stories.e2e.js rename components/organisation-unit-tree/src/__e2e__/{single_selection.stories.e2e.js => single_selection.js} (85%) rename components/organisation-unit-tree/src/__e2e__/{sub_unit_as_root.stories.e2e.js => sub_unit_as_root.js} (80%) rename components/organisation-unit-tree/src/__e2e__/{tree_api.stories.e2e.js => tree_api.js} (90%) create mode 100644 components/organisation-unit-tree/src/organisation-unit-tree.e2e.stories.js rename components/organisation-unit-tree/src/{organisation-unit-tree.stories.js => organisation-unit-tree.prod.stories.js} (100%) rename components/pagination/src/{pagination.stories.js => pagination.prod.stories.js} (100%) rename components/popover/src/{popover.stories.e2e.js => popover.e2e.stories.js} (100%) rename components/popover/src/{popover.stories.js => popover.prod.stories.js} (100%) rename components/popper/src/{popper.stories.e2e.js => popper.e2e.stories.js} (100%) rename components/popper/src/{popper.stories.js => popper.prod.stories.js} (100%) create mode 100644 components/radio/src/radio.e2e.stories.js rename components/radio/src/{radio.stories.js => radio.prod.stories.js} (100%) delete mode 100644 components/radio/src/radio.stories.e2e.js rename components/segmented-control/src/{segmented-control.stories.js => segmented-control.prod.stories.js} (100%) create mode 100644 components/select/src/multi-select-field/multi-select-field.e2e.stories.js rename components/select/src/multi-select-field/{multi-select-field.stories.js => multi-select-field.prod.stories.js} (100%) delete mode 100644 components/select/src/multi-select-field/multi-select-field.stories.e2e.js create mode 100644 components/select/src/multi-select/multi-select.e2e.stories.js rename components/select/src/multi-select/{multi-select.stories.js => multi-select.prod.stories.js} (99%) delete mode 100644 components/select/src/multi-select/multi-select.stories.e2e.js create mode 100644 components/select/src/single-select-field/single-select-field.e2e.stories.js rename components/select/src/single-select-field/{single-select-field.stories.js => single-select-field.prod.stories.js} (100%) delete mode 100644 components/select/src/single-select-field/single-select-field.stories.e2e.js create mode 100644 components/select/src/single-select/single-select.e2e.stories.js rename components/select/src/single-select/{single-select.stories.js => single-select.prod.stories.js} (99%) delete mode 100644 components/select/src/single-select/single-select.stories.e2e.js create mode 100644 components/selector-bar/i18n/es_419.po create mode 100644 components/selector-bar/i18n/ru.po rename components/selector-bar/src/selector-bar-item/{selector-bar-item.stories.e2e.js => selector-bar-item.e2e.stories.js} (100%) rename components/selector-bar/src/selector-bar/{selector-bar.stories.js => selector-bar.prod.stories.js} (100%) rename components/sharing-dialog/src/{sharing-dialog.stories.e2e.js => sharing-dialog.e2e.stories.js} (100%) rename components/sharing-dialog/src/{sharing-dialog.stories.js => sharing-dialog.prod.stories.js} (100%) rename components/switch/src/switch-field/{switch-field.stories.e2e.js => switch-field.e2e.stories.js} (54%) rename components/switch/src/switch-field/{switch-field.stories.js => switch-field.prod.stories.js} (100%) create mode 100644 components/switch/src/switch/switch.e2e.stories.js rename components/switch/src/switch/{switch.stories.js => switch.prod.stories.js} (100%) delete mode 100644 components/switch/src/switch/switch.stories.e2e.js create mode 100644 components/tab/src/tab-bar/tab-bar.e2e.stories.js rename components/tab/src/tab-bar/{tab-bar.stories.js => tab-bar.prod.stories.js} (100%) delete mode 100644 components/tab/src/tab-bar/tab-bar.stories.e2e.js create mode 100644 components/tab/src/tab/tab.e2e.stories.js delete mode 100644 components/tab/src/tab/tab.stories.e2e.js create mode 100644 components/table/i18n/es_419.po create mode 100644 components/table/i18n/ru.po rename components/table/src/data-table/{data-table.stories.e2e.js => data-table.e2e.stories.js} (100%) rename components/table/src/data-table/{data-table.stories.js => data-table.prod.stories.js} (100%) rename components/table/src/data-table/table-elements/{table.stories.e2e.js => table.e2e.stories.js} (100%) rename components/table/src/stacked-table/{stacked-table.stories.js => stacked-table.prod.stories.js} (100%) rename components/table/src/table/{table.stories.js => table.prod.stories.js} (100%) create mode 100644 components/tag/src/tag.e2e.stories.js rename components/tag/src/{tag.stories.js => tag.prod.stories.js} (100%) delete mode 100644 components/tag/src/tag.stories.e2e.js rename components/text-area/src/text-area-field/{text-area-field.stories.e2e.js => text-area-field.e2e.stories.js} (60%) rename components/text-area/src/text-area-field/{text-area-field.stories.js => text-area-field.prod.stories.js} (100%) create mode 100644 components/text-area/src/text-area/text-area.e2e.stories.js rename components/text-area/src/text-area/{text-area.stories.js => text-area.prod.stories.js} (100%) delete mode 100644 components/text-area/src/text-area/text-area.stories.e2e.js rename components/tooltip/src/{tooltip.stories.e2e.js => tooltip.e2e.stories.js} (93%) rename components/tooltip/src/{tooltip.stories.js => tooltip.prod.stories.js} (100%) rename components/transfer/src/__e2e__/{add_remove-highlighted-options.stories.e2e.js => add_remove-highlighted-options.e2e.stories.js} (100%) rename components/transfer/src/__e2e__/{disabled-transfer-buttons.stories.e2e.js => disabled-transfer-buttons.e2e.stories.js} (100%) rename components/transfer/src/__e2e__/{disabled-transfer-options.stories.e2e.js => disabled-transfer-options.e2e.stories.js} (100%) rename components/transfer/src/__e2e__/{display-order.stories.e2e.js => display-order.e2e.stories.js} (100%) rename components/transfer/src/__e2e__/{filter-options-list.stories.e2e.js => filter-options-list.e2e.stories.js} (100%) rename components/transfer/src/__e2e__/{highlight-range-of-options.stories.e2e.js => highlight-range-of-options.e2e.stories.js} (100%) rename components/transfer/src/__e2e__/{loading_lists.stories.e2e.js => loading_lists.e2e.stories.js} (100%) rename components/transfer/src/__e2e__/{notify_at_end_of_list.stories.e2e.js => notify_at_end_of_list.e2e.stories.js} (100%) rename components/transfer/src/__e2e__/{reorder-with-buttons.stories.e2e.js => reorder-with-buttons.e2e.stories.js} (100%) rename components/transfer/src/__e2e__/{set_unset-highlighted-option.stories.e2e.js => set_unset-highlighted-option.e2e.stories.js} (100%) rename components/transfer/src/__e2e__/{transferring-items.stories.e2e.js => transferring-items.e2e.stories.js} (100%) rename components/transfer/src/{transfer.stories.js => transfer.prod.stories.js} (100%) rename components/user-avatar/src/{user-avatar.stories.js => user-avatar.prod.stories.js} (100%) delete mode 100644 docs/docs/utilities/forms/react-final-form.stories.mdx delete mode 100644 docs/docs/utilities/forms/transformers.stories.mdx delete mode 100644 docs/docs/utilities/forms/validators.stories.mdx rename icons/src/{icons.stories.js => icons.prod.stories.js} (100%) delete mode 100755 scripts/build-docs.js diff --git a/.github/workflows/dhis2-deploy-netlify.yml b/.github/workflows/dhis2-deploy-netlify.yml index 4ca3dc29a5..14210c991f 100644 --- a/.github/workflows/dhis2-deploy-netlify.yml +++ b/.github/workflows/dhis2-deploy-netlify.yml @@ -31,7 +31,7 @@ jobs: - uses: c-hive/gha-yarn-cache@v1 - run: yarn install --frozen-lockfile - - run: yarn build:legacy + - run: yarn build - uses: nwtgck/actions-netlify@v1.1 with: diff --git a/.github/workflows/dhis2-preview-pr.yml b/.github/workflows/dhis2-preview-pr.yml index 094b3394c7..ffb902c967 100644 --- a/.github/workflows/dhis2-preview-pr.yml +++ b/.github/workflows/dhis2-preview-pr.yml @@ -29,7 +29,7 @@ jobs: - uses: c-hive/gha-yarn-cache@v1 - run: yarn install --frozen-lockfile - - run: yarn build:legacy + - run: yarn build - name: Deploy id: netlify-deploy diff --git a/.github/workflows/dhis2-verify-commits.yml b/.github/workflows/dhis2-verify-commits.yml index 5845360b7d..59456e95c6 100644 --- a/.github/workflows/dhis2-verify-commits.yml +++ b/.github/workflows/dhis2-verify-commits.yml @@ -9,6 +9,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 20.x - uses: c-hive/gha-yarn-cache@v1 - run: yarn install --frozen-lockfile - id: commitlint @@ -23,6 +26,9 @@ jobs: - uses: actions/checkout@v2 with: fetch-depth: 0 + - uses: actions/setup-node@v1 + with: + node-version: 20.x - uses: c-hive/gha-yarn-cache@v1 - run: yarn install --frozen-lockfile - id: commitlint diff --git a/.github/workflows/dhis2-verify-lib.yml b/.github/workflows/dhis2-verify-lib.yml index 88bcada1ad..b591890c4b 100644 --- a/.github/workflows/dhis2-verify-lib.yml +++ b/.github/workflows/dhis2-verify-lib.yml @@ -34,17 +34,17 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v1 + - uses: actions/setup-node@v3 with: node-version: 20.x - uses: c-hive/gha-yarn-cache@v1 - run: | yarn install --frozen-lockfile - NODE_OPTIONS=--openssl-legacy-provider yarn setup + yarn setup - name: Build - run: yarn build:legacy + run: yarn build - run: ./scripts/create-artifact.sh @@ -59,7 +59,7 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v1 + - uses: actions/setup-node@v3 with: node-version: 20.x @@ -80,7 +80,7 @@ jobs: needs: [build] steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v1 + - uses: actions/setup-node@v3 with: node-version: 20.x @@ -112,7 +112,7 @@ jobs: - name: Checkout uses: actions/checkout@v2 - - uses: actions/setup-node@v1 + - uses: actions/setup-node@v3 with: node-version: 20.x @@ -147,7 +147,8 @@ jobs: - name: End-to-End tests uses: cypress-io/github-action@v6 with: - start: 'yarn cy:start:legacy' + # This should be a command that starts the server to test against. + start: 'yarn cy:start' wait-on: 'http://localhost:5000' wait-on-timeout: 300 record: ${{ env.SHOULD_RECORD }} @@ -174,7 +175,6 @@ jobs: - uses: actions/setup-node@v3 with: node-version: 20.x - cache: 'yarn' - uses: actions/download-artifact@v2 with: @@ -183,12 +183,10 @@ jobs: - run: ./scripts/extract-artifact.sh # ensure that d2-app-scripts is available + - uses: c-hive/gha-yarn-cache@v1 - run: yarn install --frozen-lockfile - # FIXME: Add legacy npm to allow our broken peerdeps for now. - # This should be addressed properly by fixing our peerdeps. - - run: npm i -g npm@6 - - uses: dhis2/action-semantic-release@master + - uses: dhis2/action-semantic-release@node20 with: publish-npm: true publish-github: true diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e3b8f64e8..fd0108a868 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,12 @@ -# [9.9.0-alpha.6](https://github.com/dhis2/ui/compare/v9.9.0-alpha.5...v9.9.0-alpha.6) (2024-08-08) +## [9.11.2](https://github.com/dhis2/ui/compare/v9.11.1...v9.11.2) (2024-08-18) + + +### Bug Fixes + +* **translations:** sync translations from transifex (master) ([2f82be2](https://github.com/dhis2/ui/commit/2f82be21006c25b40b3d4e29f479a2c7ee0bd2fa)) +* **translations:** sync translations from transifex (master) ([e8b0559](https://github.com/dhis2/ui/commit/e8b05595730f02fdf58e12eb58daf346fc66ffd8)) + +## [9.11.1](https://github.com/dhis2/ui/compare/v9.11.0...v9.11.1) (2024-08-08) ### Bug Fixes @@ -6,6 +14,15 @@ * bump multi calendar library version in calendar component ([#1576](https://github.com/dhis2/ui/issues/1576)) ([5f2b13d](https://github.com/dhis2/ui/commit/5f2b13dc3abfd2396c83c39fb399d3c7e0d1dffe)) # [9.9.0-alpha.5](https://github.com/dhis2/ui/compare/v9.9.0-alpha.4...v9.9.0-alpha.5) (2024-08-08) +* fix publishing to npm ([#1577](https://github.com/dhis2/ui/issues/1577)) ([1889a7b](https://github.com/dhis2/ui/commit/1889a7baf0ad1b6709272be61094da80cad65fe1)) +* get rid of storybook references in docs ([1904b17](https://github.com/dhis2/ui/commit/1904b172bfde066a17a0edf82c196959ba35c8bb)) +* get storybook 8 working ([8c6be62](https://github.com/dhis2/ui/commit/8c6be62c2df9261109df12e51c7dc2339b59eedf)) +* issue with production build not loading some dependent modules ([5060c61](https://github.com/dhis2/ui/commit/5060c6143e3788895ab4282ba7dc84283d62bae8)) +* pin react version in resolution ([#1573](https://github.com/dhis2/ui/issues/1573)) ([46cdd79](https://github.com/dhis2/ui/commit/46cdd79c27b28d69eb8e5d72a6946376961ba670)) +* resolve react version ([#1567](https://github.com/dhis2/ui/issues/1567)) ([c18a73d](https://github.com/dhis2/ui/commit/c18a73d71a1a59e4229adae2f964e06041eaab8b)) +* **calendar:** pin temporal dependency to version 0.4.3 due to breaking changes ([3b5a586](https://github.com/dhis2/ui/commit/3b5a58614eb6992469d5c5d74aa19aa225fb2b1c)) + +# [9.11.0](https://github.com/dhis2/ui/compare/v9.10.3...v9.11.0) (2024-07-29) ### Features @@ -20,6 +37,9 @@ * verify date input only on blur on calendar input, close calendar popup on blur as well ([d8b0d1c](https://github.com/dhis2/ui/commit/d8b0d1cd2fd93a88413f0f73ad216783e6dd3ff7)) # [9.9.0-alpha.3](https://github.com/dhis2/ui/compare/v9.9.0-alpha.2...v9.9.0-alpha.3) (2024-08-01) +* implement accessible flyout menu and handle submenus ([#1495](https://github.com/dhis2/ui/issues/1495)) ([73d1f7e](https://github.com/dhis2/ui/commit/73d1f7e062ad393a156b3b439b590c5927f0fc9d)) + +## [9.10.3](https://github.com/dhis2/ui/compare/v9.10.2...v9.10.3) (2024-07-24) ### Bug Fixes @@ -27,6 +47,27 @@ * bump multi calendar library version in calendar ([#1566](https://github.com/dhis2/ui/issues/1566)) ([d205016](https://github.com/dhis2/ui/commit/d205016ae9f51eb286007762d99549325199cedc)) # [9.9.0-alpha.2](https://github.com/dhis2/ui/compare/v9.9.0-alpha.1...v9.9.0-alpha.2) (2024-08-01) +* **translations:** sync translations from transifex (master) ([b7d3ec6](https://github.com/dhis2/ui/commit/b7d3ec6a91d7fd54c9220364c678f71c9daa14eb)) + +## [9.10.2](https://github.com/dhis2/ui/compare/v9.10.1...v9.10.2) (2024-07-15) + + +### Bug Fixes + +* **icon types:** export IconSubtract16 & IconSubtract24 ([5237c66](https://github.com/dhis2/ui/commit/5237c66ffa372ca79eb28c55369cefc7d4eab327)) +* **menu item types:** make suffix prop optional ([c059fde](https://github.com/dhis2/ui/commit/c059fde8e511c21c8540a418833a98b2f868eb6e)) +* **modal types:** accept ReactNodes as children ([bc59cf7](https://github.com/dhis2/ui/commit/bc59cf769d24ac66061b78424db0732f164ce387)) +* **tag types:** accept ReactNodes as children ([c093a14](https://github.com/dhis2/ui/commit/c093a14988da636a88bc9ce2c5e7589a5a7e8f80)) + +## [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) ### Features @@ -34,18 +75,88 @@ * support editable input | min & max dates | dd-mm-yyyy format in CalendarInput ([#1504](https://github.com/dhis2/ui/issues/1504)) ([99a78f5](https://github.com/dhis2/ui/commit/99a78f5caec83529af26a11a2dd4d93fface30b4)) # [9.9.0-alpha.1](https://github.com/dhis2/ui/compare/v9.8.1...v9.9.0-alpha.1) (2024-06-17) +* **menu:** memoise menu's childrenToRender function and add valid role checks ([#1539](https://github.com/dhis2/ui/issues/1539)) ([bddbdae](https://github.com/dhis2/ui/commit/bddbdaeb63180b80a4352a256e7916ab75f633e9)) +* **TabBar:** accessibility improvements for TabBar & Tab ([#1468](https://github.com/dhis2/ui/issues/1468)) ([b095f5a](https://github.com/dhis2/ui/commit/b095f5a90688b7e95338622137c71b2305fd9fe7)) + +## [9.9.1](https://github.com/dhis2/ui/compare/v9.9.0...v9.9.1) (2024-07-02) + + +### Bug Fixes + +* **translations:** sync translations from transifex (master) ([#1532](https://github.com/dhis2/ui/issues/1532)) ([bb15173](https://github.com/dhis2/ui/commit/bb151732970dee94d0431d379373fbb369776346)) + +# [9.9.0](https://github.com/dhis2/ui/compare/v9.8.10...v9.9.0) (2024-07-02) ### Features -* splitButton accessibility improvements ([#1458](https://github.com/dhis2/ui/issues/1458)) ([51a1b14](https://github.com/dhis2/ui/commit/51a1b149ae720703339dc36edc88de70c6798bf8)) -* **tooltip:** accessibility improvements for tooltip ([#1463](https://github.com/dhis2/ui/issues/1463)) ([f11eabb](https://github.com/dhis2/ui/commit/f11eabb87309efdb6e1d961a461002cdc76664b1)) -* add aria attributes to loaders ([#1449](https://github.com/dhis2/ui/issues/1449)) ([2832584](https://github.com/dhis2/ui/commit/28325848aac6e1c5244b7a48ed5d8951a0cfa1d3)) +* **menu:** add aria-attributes and roles to menu and its components ([#1514](https://github.com/dhis2/ui/issues/1514)) ([54b816c](https://github.com/dhis2/ui/commit/54b816c8ac28ef74ac628130994c9c8fadf9d178)) +* **menu:** add keyboard accessibility to menus ([#1533](https://github.com/dhis2/ui/issues/1533)) ([235a71e](https://github.com/dhis2/ui/commit/235a71e92d41c35b84e61407adfbfa53b3513d4e)) + +## [9.8.10](https://github.com/dhis2/ui/compare/v9.8.9...v9.8.10) (2024-07-01) + + +### Bug Fixes + +* **LIBS-629:** bump library to use Nepali script when 'ne' locale passed ([6546572](https://github.com/dhis2/ui/commit/6546572ea30d8faed53728cb8b005da0445326d4)) + +## [9.8.9](https://github.com/dhis2/ui/compare/v9.8.8...v9.8.9) (2024-06-20) + + +### Bug Fixes + +* update @dhis2/multi-calendar-dates ([#1525](https://github.com/dhis2/ui/issues/1525)) ([cf5d39d](https://github.com/dhis2/ui/commit/cf5d39d2b9898958e6e3c359d1062f16b2011778)) + +## [9.8.8](https://github.com/dhis2/ui/compare/v9.8.7...v9.8.8) (2024-06-20) + + +### Bug Fixes + +* i18n wrap pick a date ([#1531](https://github.com/dhis2/ui/issues/1531)) ([4e4a43d](https://github.com/dhis2/ui/commit/4e4a43db24342300c4db94ac497d1a381c50dab2)) + +## [9.8.7](https://github.com/dhis2/ui/compare/v9.8.6...v9.8.7) (2024-06-20) + + +### Bug Fixes + +* **split-button:** stop swallowing key down events ([22d43bc](https://github.com/dhis2/ui/commit/22d43bc54ee5be5fc6b17400ac7b4a518051dfe7)) + +## [9.8.6](https://github.com/dhis2/ui/compare/v9.8.5...v9.8.6) (2024-06-20) + + +### Bug Fixes + +* add aggregate data exchange to sharing dialog type prop's type ([d3b5486](https://github.com/dhis2/ui/commit/d3b54860337913be53ed25cbb72a0710787fdd28)) +* add all possible sharing dialog type prop's types ([43210cb](https://github.com/dhis2/ui/commit/43210cb1f7df6e903f86ad8f5a4d93471704a28b)) +* restrict dialog types to only sharable and restrict type of sharing type ([1748809](https://github.com/dhis2/ui/commit/1748809b093ebefefc01db2e4054d61b039fcd52)) + +## [9.8.5](https://github.com/dhis2/ui/compare/v9.8.4...v9.8.5) (2024-06-19) -### Reverts +### Bug Fixes + +* **modal:** dont swallow keyDown events ([d4a0c44](https://github.com/dhis2/ui/commit/d4a0c44bcd3892f46510eae0c16c977681f8069f)) + +## [9.8.4](https://github.com/dhis2/ui/compare/v9.8.3...v9.8.4) (2024-06-19) + + +### Bug Fixes + +* **drop-down:** dont swallow keyDown events unless its esc and open ([#1529](https://github.com/dhis2/ui/issues/1529)) ([bdb8eff](https://github.com/dhis2/ui/commit/bdb8eff1c34f1352ce27130584bcf2f442b9e6d5)) + +## [9.8.3](https://github.com/dhis2/ui/compare/v9.8.2...v9.8.3) (2024-06-16) + + +### Bug Fixes + +* **translations:** sync translations from transifex (master) ([5f7f65a](https://github.com/dhis2/ui/commit/5f7f65a01bb0819a5794e1ce10550b283a9b3c0e)) + +## [9.8.2](https://github.com/dhis2/ui/compare/v9.8.1...v9.8.2) (2024-06-14) + + +### Bug Fixes -* Revert "feat(selectionBar): accessibility improvements for SelectionBar (#1475)" ([54498fb](https://github.com/dhis2/ui/commit/54498fbdd8cec448c891855b72691d5613c83a47)), closes [#1475](https://github.com/dhis2/ui/issues/1475) +* **translations:** sync translations from transifex (master) ([0dfb475](https://github.com/dhis2/ui/commit/0dfb4754c0d0d13f54a499b7a589633b877fe2a7)) ## [9.8.1](https://github.com/dhis2/ui/compare/v9.8.0...v9.8.1) (2024-06-09) diff --git a/collections/forms/i18n/en.pot b/collections/forms/i18n/en.pot index cb7ef7c954..84c7a35ee4 100644 --- a/collections/forms/i18n/en.pot +++ b/collections/forms/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "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-04-18T04:00:14.144Z\n" -"PO-Revision-Date: 2024-04-18T04:00:14.144Z\n" +"POT-Creation-Date: 2024-08-20T17:05:51.905Z\n" +"PO-Revision-Date: 2024-08-20T17:05:51.906Z\n" msgid "Upload file" msgstr "Upload file" diff --git a/collections/forms/i18n/es_419.po b/collections/forms/i18n/es_419.po index 1a114ccced..0b4d2c4492 100644 --- a/collections/forms/i18n/es_419.po +++ b/collections/forms/i18n/es_419.po @@ -5,7 +5,7 @@ msgid "" msgstr "" "Project-Id-Version: i18next-conv\n" -"POT-Creation-Date: 2024-02-12T14:58:56.792Z\n" +"POT-Creation-Date: 2024-04-18T04:00:14.144Z\n" "PO-Revision-Date: 2021-06-24 12:50+0000\n" "Last-Translator: Enzo Nicolas Rossi , 2024\n" "Language-Team: Spanish (Latin America) (https://app.transifex.com/hisp-uio/teams/100509/es_419/)\n" @@ -16,86 +16,92 @@ msgstr "" "Plural-Forms: nplurals=3; plural=n == 1 ? 0 : n != 0 && n % 1000000 == 0 ? 1 : 2;\n" msgid "Upload file" -msgstr "" +msgstr "Cargar archivo" msgid "Upload files" -msgstr "" +msgstr "Cargar archivos" msgid "Remove" msgstr "Eliminar" msgid "Please provide an alpha-numeric value" -msgstr "" +msgstr "Indique un valor alfanumérico" msgid "Please provide a boolean value" -msgstr "" +msgstr "Indique un valor booleano" msgid "Please enter between {{lowerBound}} and {{upperBound}} characters" -msgstr "" +msgstr "Introduzca entre {{lowerBound}} y {{upperBound}} caracteres" msgid "" "Please make sure the value of this input matches the value in " "\"{{otherField}}\"." msgstr "" +"Asegúrese de que el valor de esta entrada coincide con el de " +"\"{{otherField}}\"." msgid "Please enter a maximum of {{upperBound}} characters" -msgstr "" +msgstr "Introduzca un máximo de {{upperBound}} caracteres" msgid "Please enter a number with a maximum of {{upperBound}}" -msgstr "" +msgstr "Introduzca un número con un máximo de {{upperBound}}" msgid "Please enter at least {{lowerBound}} characters" -msgstr "" +msgstr "Introduzca al menos {{lowerBound}} caracteres" msgid "Please enter a number of at least {{lowerBound}}" -msgstr "" +msgstr "Introduzca un número de al menos {{lowerBound}}" msgid "Number cannot be less than {{lowerBound}} or more than {{upperBound}}" msgstr "" +"El número no puede ser inferior a {{lowerBound}} ni superior a " +"{{upperBound}}" msgid "" "Please make sure the value of this input matches the pattern " "{{patternString}}." msgstr "" +"Asegúrese de que el valor de esta entrada coincide con el patrón " +"{{patternString}}." msgid "Password should be a string" -msgstr "" +msgstr "La contraseña debe ser texto" msgid "Password should be at least 8 characters long" -msgstr "" +msgstr "La contraseña debe tener al menos 8 caracteres" msgid "Password should be no longer than 34 characters" -msgstr "" +msgstr "La contraseña no debe tener más de 34 caracteres" msgid "Password should contain at least one lowercase letter" -msgstr "" +msgstr "La contraseña debe contener al menos una letra minúscula" msgid "Password should contain at least one UPPERCASE letter" -msgstr "" +msgstr "La contraseña debe contener al menos una letra MAYÚSCULA" msgid "Password should contain at least one number" -msgstr "" +msgstr "La contraseña debe contener al menos un número" msgid "Password should have at least one special character" -msgstr "" +msgstr "La contraseña debe tener al menos un carácter especial" msgid "Please provide a valid email address" msgstr "Por favor ingrese una dirección de correo electrónico válida" msgid "Please provide a value" -msgstr "" +msgstr "Indique un valor" msgid "Please provide a round number without decimals" -msgstr "" +msgstr "Indique una cifra redonda sin decimales" msgid "Please provide a valid international phone number." -msgstr "" +msgstr "Indique un número de teléfono internacional válido." msgid "Please provide a number" -msgstr "" +msgstr "Indique un número" msgid "Please provide a string" -msgstr "" +msgstr "Proporcione una texto" msgid "Please provide a valid url" msgstr "Proporcione una URL válida" @@ -105,3 +111,5 @@ msgid "" "Please provide a username between 4 and 255 characters long and possibly " "separated by . " msgstr "" +"Indique un nombre de usuario de entre 4 y 255 caracteres, posiblemente " +"separados por . o @." diff --git a/collections/forms/i18n/ru.po b/collections/forms/i18n/ru.po index 94e3d04d6f..b978f1c973 100644 --- a/collections/forms/i18n/ru.po +++ b/collections/forms/i18n/ru.po @@ -1,17 +1,18 @@ # # Translators: -# phil_dhis2, 2021 +# Philip Larsen Donnelly, 2021 # Viktor Varland , 2021 # Ulanbek Abakirov , 2021 # Valeriu Plesca , 2021 +# Yury Rogachev , 2024 # msgid "" msgstr "" "Project-Id-Version: i18next-conv\n" -"POT-Creation-Date: 2022-02-11T13:37:19.312Z\n" +"POT-Creation-Date: 2024-04-18T04:00:14.144Z\n" "PO-Revision-Date: 2021-06-24 12:50+0000\n" -"Last-Translator: Valeriu Plesca , 2021\n" -"Language-Team: Russian (https://www.transifex.com/hisp-uio/teams/100509/ru/)\n" +"Last-Translator: Yury Rogachev , 2024\n" +"Language-Team: Russian (https://app.transifex.com/hisp-uio/teams/100509/ru/)\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" @@ -22,47 +23,50 @@ msgid "Upload file" msgstr "Загрузить файл" msgid "Upload files" -msgstr "" +msgstr "Загрузить файлы" msgid "Remove" msgstr "Убрать" msgid "Please provide an alpha-numeric value" -msgstr "" +msgstr "Укажите буквенно-цифровое значение" msgid "Please provide a boolean value" -msgstr "" +msgstr "Укажите булевое значение" msgid "Please enter between {{lowerBound}} and {{upperBound}} characters" -msgstr "" +msgstr "Введите от {{lowerBound}} до {{upperBound}} символов." msgid "" "Please make sure the value of this input matches the value in " "\"{{otherField}}\"." msgstr "" +"Убедитесь, что введенное значение совпадает со значением в разделе " +"\"{{otherField}}\"." msgid "Please enter a maximum of {{upperBound}} characters" -msgstr "" +msgstr "Введите максимум {{upperBound}} символа/ов." msgid "Please enter a number with a maximum of {{upperBound}}" -msgstr "" +msgstr "Введите число, не превышающее {{upperBound}}" msgid "Please enter at least {{lowerBound}} characters" -msgstr "" +msgstr "Введите не менее {{lowerBound}} символа/ов." msgid "Please enter a number of at least {{lowerBound}}" -msgstr "" +msgstr "Введите число не менее {{lowerBound}}" msgid "Number cannot be less than {{lowerBound}} or more than {{upperBound}}" -msgstr "" +msgstr "Число не может быть меньше {{lowerBound}} или больше {{upperBound}}" msgid "" "Please make sure the value of this input matches the pattern " "{{patternString}}." msgstr "" +"Убедитесь, что введенное значение соответствует формату {{patternString}}." msgid "Password should be a string" -msgstr "" +msgstr "Пароль должен быть строкой" msgid "Password should be at least 8 characters long" msgstr "Пароль должен состоять не менее чем из 8 символов." @@ -71,10 +75,10 @@ msgid "Password should be no longer than 34 characters" msgstr "Пароль не должен быть длиннее 34 символов" msgid "Password should contain at least one lowercase letter" -msgstr "Пароль должен содержать хотя бы одну СТРОЧНУЮ букву" +msgstr "Пароль должен содержать хотя бы одну строчную букву" msgid "Password should contain at least one UPPERCASE letter" -msgstr "Пароль должен содержать хотя бы одну ЗАГЛАВНУЮ букву" +msgstr "Пароль должен содержать хотя бы одну заглавную букву" msgid "Password should contain at least one number" msgstr "Пароль должен содержать хотя бы одну цифру" @@ -82,26 +86,31 @@ msgstr "Пароль должен содержать хотя бы одну ци msgid "Password should have at least one special character" msgstr "В пароле должен быть хотя бы один специальный символ" -msgid "Please provide a username between 4 and 255 characters" -msgstr "" - msgid "Please provide a valid email address" msgstr "Введите правильный адрес электронной почты" msgid "Please provide a value" -msgstr "" +msgstr "Введите значение" msgid "Please provide a round number without decimals" -msgstr "" +msgstr "Введите круглое число без десятичных знаков" msgid "Please provide a valid international phone number." -msgstr "" +msgstr "Укажите действительный международный номер телефона." msgid "Please provide a number" -msgstr "" +msgstr "Введите номер" msgid "Please provide a string" -msgstr "" +msgstr "Введите строку" msgid "Please provide a valid url" -msgstr "Введите правильную url" +msgstr "Введите правильный URL адрес" + +msgctxt " - or @" +msgid "" +"Please provide a username between 4 and 255 characters long and possibly " +"separated by . " +msgstr "" +"Укажите имя пользователя длиной от 4 до 255 символов по возможности " +"разделенных знаками . _ - или @" diff --git a/collections/forms/package.json b/collections/forms/package.json index defef4389f..2ec945f0ef 100644 --- a/collections/forms/package.json +++ b/collections/forms/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2/ui-forms", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "main": "./build/cjs/index.js", "module": "./build/es/index.js", "sideEffects": [ @@ -26,24 +26,24 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8" + "react": "^16.13", + "react-dom": "^16.13" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/button": "9.9.0-alpha.6", - "@dhis2-ui/checkbox": "9.9.0-alpha.6", - "@dhis2-ui/field": "9.9.0-alpha.6", - "@dhis2-ui/file-input": "9.9.0-alpha.6", - "@dhis2-ui/input": "9.9.0-alpha.6", - "@dhis2-ui/radio": "9.9.0-alpha.6", - "@dhis2-ui/select": "9.9.0-alpha.6", - "@dhis2-ui/switch": "9.9.0-alpha.6", - "@dhis2-ui/text-area": "9.9.0-alpha.6", + "@dhis2-ui/button": "9.11.2", + "@dhis2-ui/checkbox": "9.11.2", + "@dhis2-ui/field": "9.11.2", + "@dhis2-ui/file-input": "9.11.2", + "@dhis2-ui/input": "9.11.2", + "@dhis2-ui/radio": "9.11.2", + "@dhis2-ui/select": "9.11.2", + "@dhis2-ui/switch": "9.11.2", + "@dhis2-ui/text-area": "9.11.2", "classnames": "^2.3.1", "final-form": "^4.20.2", "prop-types": "^15.7.2", diff --git a/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.e2e.stories.js b/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.e2e.stories.js new file mode 100644 index 0000000000..d63ffa40b3 --- /dev/null +++ b/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.e2e.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: 'Testing:Checkbox', decorators: [formDecorator] } +export const Unchecked = () => ( + +) +export const Checked = () => ( + +) +export const UncheckedWithValue = () => ( + +) +export const CheckedWithValue = () => ( + +) diff --git a/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.stories.js b/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.prod.stories.js similarity index 100% rename from collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.stories.js rename to collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.prod.stories.js 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/FieldGroupFF/FieldGroupFF.stories.js b/collections/forms/src/FieldGroupFF/FieldGroupFF.prod.stories.js similarity index 100% rename from collections/forms/src/FieldGroupFF/FieldGroupFF.stories.js rename to collections/forms/src/FieldGroupFF/FieldGroupFF.prod.stories.js diff --git a/collections/forms/src/FileInputFieldFF/FileInputFieldFF.stories.e2e.js b/collections/forms/src/FileInputFieldFF/FileInputFieldFF.e2e.stories.js similarity index 96% rename from collections/forms/src/FileInputFieldFF/FileInputFieldFF.stories.e2e.js rename to collections/forms/src/FileInputFieldFF/FileInputFieldFF.e2e.stories.js index 77c62bb192..030c4440a7 100644 --- a/collections/forms/src/FileInputFieldFF/FileInputFieldFF.stories.e2e.js +++ b/collections/forms/src/FileInputFieldFF/FileInputFieldFF.e2e.stories.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/FileInputFieldFF/FileInputFieldFF.stories.js b/collections/forms/src/FileInputFieldFF/FileInputFieldFF.prod.stories.js similarity index 100% rename from collections/forms/src/FileInputFieldFF/FileInputFieldFF.stories.js rename to collections/forms/src/FileInputFieldFF/FileInputFieldFF.prod.stories.js diff --git a/collections/forms/src/InputFieldFF/InputFieldFF.e2e.stories.js b/collections/forms/src/InputFieldFF/InputFieldFF.e2e.stories.js new file mode 100644 index 0000000000..10bc12af76 --- /dev/null +++ b/collections/forms/src/InputFieldFF/InputFieldFF.e2e.stories.js @@ -0,0 +1,19 @@ +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' + +export default { title: 'Testing:InputFieldFF', decorators: [formDecorator] } +export const Default = () => ( + +) +export const Required = () => ( + +) diff --git a/collections/forms/src/InputFieldFF/InputFieldFF.stories.js b/collections/forms/src/InputFieldFF/InputFieldFF.prod.stories.js similarity index 100% rename from collections/forms/src/InputFieldFF/InputFieldFF.stories.js rename to collections/forms/src/InputFieldFF/InputFieldFF.prod.stories.js diff --git a/collections/forms/src/InputFieldFF/InputFieldFF.stories.e2e.js b/collections/forms/src/InputFieldFF/InputFieldFF.stories.e2e.js deleted file mode 100644 index 3401342491..0000000000 --- a/collections/forms/src/InputFieldFF/InputFieldFF.stories.e2e.js +++ /dev/null @@ -1,21 +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 { InputFieldFF } from './InputFieldFF.js' - -storiesOf('Testing:InputFieldFF', module) - .addDecorator(formDecorator) - .add('Default', () => ( - - )) - .add('Required', () => ( - - )) diff --git a/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.e2e.stories.js b/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.e2e.stories.js new file mode 100644 index 0000000000..2f8178a69d --- /dev/null +++ b/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.e2e.stories.js @@ -0,0 +1,27 @@ +import React from 'react' +import { Field } from 'react-final-form' +import { formDecorator } from '../formDecorator.js' +import { hasValue } from '../validators/index.js' +import { MultiSelectFieldFF } from './MultiSelectFieldFF.js' + +const defaultOptions = [ + { value: 'first', label: 'First' }, + { value: 'second', label: 'Second' }, +] + +export default { + title: 'MultiSelectFieldFF', + component: MultiSelectFieldFF, + decorators: [formDecorator], +} + +export const Required = (_, { cypressProps }) => ( + +) diff --git a/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.js b/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.prod.stories.js similarity index 100% rename from collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.js rename to collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.prod.stories.js diff --git a/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js b/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js deleted file mode 100644 index 8e84ea3a98..0000000000 --- a/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js +++ /dev/null @@ -1,25 +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 { MultiSelectFieldFF } from './MultiSelectFieldFF.js' - -const defaultOptions = [ - { value: 'first', label: 'First' }, - { value: 'second', label: 'Second' }, -] - -storiesOf('Testing:MultiSelectFieldFF', module) - .addDecorator(formDecorator) - .addParameters({ options: { showPanel: false } }) - .add('Required', (_, { cypressProps }) => ( - - )) diff --git a/collections/forms/src/MultiSelectFieldFF/features/common/index.js b/collections/forms/src/MultiSelectFieldFF/features/common/index.js index 1cb2810a3b..4367b28c4d 100644 --- a/collections/forms/src/MultiSelectFieldFF/features/common/index.js +++ b/collections/forms/src/MultiSelectFieldFF/features/common/index.js @@ -1,7 +1,7 @@ import { Given } from '@badeball/cypress-cucumber-preprocessor' Given('a required MultiSelect with no selected value', () => { - cy.visitStory('Testing:MultiSelectFieldFF', 'Required') + cy.visitStory('MultiSelectFieldFF', 'Required') cy.getFormValue('multiSelect') cy.verifyFormValue('multiSelect', undefined) }) diff --git a/collections/forms/src/RadioFieldFF/RadioFieldFF.e2e.stories.js b/collections/forms/src/RadioFieldFF/RadioFieldFF.e2e.stories.js new file mode 100644 index 0000000000..584c96cd54 --- /dev/null +++ b/collections/forms/src/RadioFieldFF/RadioFieldFF.e2e.stories.js @@ -0,0 +1,39 @@ +import React from 'react' +import { Field } from 'react-final-form' +import { FieldGroupFF } from '../FieldGroupFF/FieldGroupFF.js' +import { formDecorator } from '../formDecorator.js' +import { hasValue } from '../validators/index.js' +import { RadioFieldFF } from './RadioFieldFF.js' + +export default { title: 'Testing:RadioFieldFF', decorators: [formDecorator] } +export const RequiredAndNoSelectedValue = () => ( + + + + + +) diff --git a/collections/forms/src/RadioFieldFF/RadioFieldFF.stories.js b/collections/forms/src/RadioFieldFF/RadioFieldFF.prod.stories.js similarity index 100% rename from collections/forms/src/RadioFieldFF/RadioFieldFF.stories.js rename to collections/forms/src/RadioFieldFF/RadioFieldFF.prod.stories.js diff --git a/collections/forms/src/RadioFieldFF/RadioFieldFF.stories.e2e.js b/collections/forms/src/RadioFieldFF/RadioFieldFF.stories.e2e.js deleted file mode 100644 index 7380ad4577..0000000000 --- a/collections/forms/src/RadioFieldFF/RadioFieldFF.stories.e2e.js +++ /dev/null @@ -1,41 +0,0 @@ -import { storiesOf } from '@storybook/react' -import React from 'react' -import { Field } from 'react-final-form' -import { FieldGroupFF } from '../FieldGroupFF/FieldGroupFF.js' -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', () => ( - - - - - - )) diff --git a/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.e2e.stories.js b/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.e2e.stories.js new file mode 100644 index 0000000000..9c35636184 --- /dev/null +++ b/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.e2e.stories.js @@ -0,0 +1,23 @@ +import React from 'react' +import { Field } from 'react-final-form' +import { formDecorator } from '../formDecorator.js' +import { hasValue } from '../validators/index.js' +import { SingleSelectFieldFF } from './SingleSelectFieldFF.js' + +const defaultOptions = [{ value: 'initial', label: 'Initial' }] + +export default { + title: 'Testing:SingleSelectFieldFF', + decorators: [formDecorator], + parameters: { options: { showPanel: false } }, +} +export const Required = (_, { cypressProps }) => ( + +) diff --git a/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.js b/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.prod.stories.js similarity index 100% rename from collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.js rename to collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.prod.stories.js diff --git a/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js b/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js deleted file mode 100644 index 8d5cff006a..0000000000 --- a/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js +++ /dev/null @@ -1,22 +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 { SingleSelectFieldFF } from './SingleSelectFieldFF.js' - -const defaultOptions = [{ value: 'initial', label: 'Initial' }] - -storiesOf('Testing:SingleSelectFieldFF', module) - .addDecorator(formDecorator) - .addParameters({ options: { showPanel: false } }) - .add('Required', (_, { cypressProps }) => ( - - )) diff --git a/collections/forms/src/SwitchFieldFF/SwitchFieldFF.e2e.stories.js b/collections/forms/src/SwitchFieldFF/SwitchFieldFF.e2e.stories.js new file mode 100644 index 0000000000..d4d9b3f084 --- /dev/null +++ b/collections/forms/src/SwitchFieldFF/SwitchFieldFF.e2e.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 { SwitchFieldFF } from './SwitchFieldFF.js' + +// https://github.com/final-form/react-final-form-arrays/issues/111 +const initialValue = ['yes'] + +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/SwitchFieldFF/SwitchFieldFF.stories.js b/collections/forms/src/SwitchFieldFF/SwitchFieldFF.prod.stories.js similarity index 100% rename from collections/forms/src/SwitchFieldFF/SwitchFieldFF.stories.js rename to collections/forms/src/SwitchFieldFF/SwitchFieldFF.prod.stories.js diff --git a/collections/forms/src/SwitchFieldFF/SwitchFieldFF.stories.e2e.js b/collections/forms/src/SwitchFieldFF/SwitchFieldFF.stories.e2e.js deleted file mode 100644 index 51715f9131..0000000000 --- a/collections/forms/src/SwitchFieldFF/SwitchFieldFF.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 { 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', () => ( - - )) diff --git a/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.e2e.stories.js b/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.e2e.stories.js new file mode 100644 index 0000000000..4a743e64ad --- /dev/null +++ b/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.e2e.stories.js @@ -0,0 +1,23 @@ +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' + +export default { title: 'TextArea', decorators: [formDecorator] } +export const Default = () => ( + +) +export const Required = () => ( + +) diff --git a/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.js b/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.prod.stories.js similarity index 100% rename from collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.js rename to collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.prod.stories.js diff --git a/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js b/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js deleted file mode 100644 index 82a56e4496..0000000000 --- a/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js +++ /dev/null @@ -1,25 +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 { TextAreaFieldFF } from './TextAreaFieldFF.js' - -storiesOf('TextArea', module) - .addDecorator(formDecorator) - .add('Default', () => ( - - )) - .add('Required', () => ( - - )) diff --git a/collections/forms/src/__tests__/__snapshots__/index.test.js.snap b/collections/forms/src/__tests__/__snapshots__/index.test.js.snap index 0d38e7199f..d324e56fed 100644 --- a/collections/forms/src/__tests__/__snapshots__/index.test.js.snap +++ b/collections/forms/src/__tests__/__snapshots__/index.test.js.snap @@ -11,6 +11,7 @@ Array [ "getIn", "setIn", "version", + "default", ] `; @@ -22,6 +23,8 @@ exports[`final-form named export should re-export the expected type for configOp exports[`final-form named export should re-export the expected type for createForm 1`] = `"function"`; +exports[`final-form named export should re-export the expected type for default 1`] = `"object"`; + exports[`final-form named export should re-export the expected type for fieldSubscriptionItems 1`] = `"object"`; exports[`final-form named export should re-export the expected type for formSubscriptionItems 1`] = `"object"`; diff --git a/collections/ui/API.md b/collections/ui/API.md index eb459068c0..eb27fb75a0 100644 --- a/collections/ui/API.md +++ b/collections/ui/API.md @@ -1070,6 +1070,7 @@ import { FlyoutMenu } from '@dhis2/ui' |---|---|---|---|---| |children|node|||Typically, but not limited to, `MenuItem` components| |className|string|||| +|closeMenu|function|||when Escape key is pressed, this function is called to close the flyout menu| |dataTest|string|`'dhis2-uicore-menu'`||| |dense|boolean|||Menu uses smaller dimensions| |maxHeight|string|`'auto'`||| @@ -1133,6 +1134,8 @@ import { MenuItem } from '@dhis2/ui' |Name|Type|Default|Required|Description| |---|---|---|---|---| |active|boolean|||| +|checkbox|boolean|||| +|checked|boolean|||| |chevron|boolean|||| |children|node|||Nested menu items can become submenus.
See `showSubMenu` and `toggleSubMenu` props, and 'Children' demo| |className|string|||| @@ -1145,6 +1148,7 @@ import { MenuItem } from '@dhis2/ui' |label|node|||Text in the menu item| |showSubMenu|boolean|||When true, nested menu items are shown in a Popper| |suffix|node|||A supporting element shown at the end of the menu item| +|tabIndex|number|||| |target|string|||For using menu item as a link| |toggleSubMenu|function|||On click, this function is called (without args)| |value|string|||Value associated with item. Passed as an argument to onClick handler.| @@ -1253,7 +1257,7 @@ import { ModalTitle } from '@dhis2/ui' |Name|Type|Default|Required|Description| |---|---|---|---|---| -|children|string|||| +|children|node|||| |dataTest|string|`'dhis2-uicore-modaltitle'`||| ### Node @@ -1931,6 +1935,7 @@ import { SelectorBar } from '@dhis2/ui' |---|---|---|---|---| |children|any||*|| |additionalContent|any|||| +|ariaLabel|string|||| |className|string|||| |dataTest|string|`'dhis2-ui-selectorbar'`||| |disableClearSelections|boolean|||| @@ -1981,47 +1986,15 @@ import { SharingDialog } from '@dhis2/ui' |Name|Type|Default|Required|Description| |---|---|---|---|---| |id|string||*|The id of the object to share| -|type|import { - ACCESS_NONE, - ACCESS_VIEW_ONLY, - ACCESS_VIEW_AND_EDIT, - VISUALIZATION, - DASHBOARD, - EVENT_VISUALIZATION, - INTERPRETATION, -} from './constants.js' │ import { - ACCESS_NONE, - ACCESS_VIEW_ONLY, - ACCESS_VIEW_AND_EDIT, - VISUALIZATION, - DASHBOARD, - EVENT_VISUALIZATION, - INTERPRETATION, -} from './constants.js' │ import { - ACCESS_NONE, - ACCESS_VIEW_ONLY, - ACCESS_VIEW_AND_EDIT, - VISUALIZATION, - DASHBOARD, - EVENT_VISUALIZATION, - INTERPRETATION, -} from './constants.js' │ import { - ACCESS_NONE, - ACCESS_VIEW_ONLY, - ACCESS_VIEW_AND_EDIT, - VISUALIZATION, - DASHBOARD, - EVENT_VISUALIZATION, - INTERPRETATION, -} from './constants.js'||*|The type of object to share| +|type|DIALOG_TYPES_LIST||*|The type of object to share| |dataTest|string|`'dhis2-uicore-sharingdialog'`||| -|initialSharingSettings|{
"allowPublic": "boolean",
"groups": "objectOf",
"name": "string",
"public": "import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js'",
"users": "objectOf"
}|`{ +|initialSharingSettings|{
"allowPublic": "boolean",
"groups": "objectOf",
"name": "string",
"public": "import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n DIALOG_TYPES_LIST,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n DIALOG_TYPES_LIST,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n DIALOG_TYPES_LIST,\n} from './constants.js'",
"users": "objectOf"
}|`{ name: '', allowPublic: true, public: ACCESS_NONE, groups: {}, users: {}, -}`||| +}`||Used to seed the component with data to show whilst loading| |onClose|function|`() => {}`||| |onError|function|`() => {}`||| |onSave|function|`() => {}`||| @@ -2786,7 +2759,7 @@ import { Tag } from '@dhis2/ui' |Name|Type|Default|Required|Description| |---|---|---|---|---| |bold|boolean|||Use bold tags where it is important that the tag is seen by the user in an information dense interface. Bold tags should be reserved for edge cases and not overused.| -|children|string|||| +|children|node|||| |className|string|||| |dataTest|string|`'dhis2-uicore-tag'`||| |icon|node|||Tags can contain icons. Use icons where they will help users easily identify the content of the tag. Tags must have a text label and cannot display only an icon.| diff --git a/collections/ui/package.json b/collections/ui/package.json index 0db4b02a66..7121c5544a 100644 --- a/collections/ui/package.json +++ b/collections/ui/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2/ui", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "main": "./build/cjs/index.js", "module": "./build/es/index.js", "exports": { @@ -21,61 +21,61 @@ "build": "d2-app-scripts build" }, "dependencies": { - "@dhis2-ui/alert": "9.9.0-alpha.6", - "@dhis2-ui/box": "9.9.0-alpha.6", - "@dhis2-ui/button": "9.9.0-alpha.6", + "@dhis2-ui/alert": "9.11.2", + "@dhis2-ui/box": "9.11.2", + "@dhis2-ui/button": "9.11.2", "@dhis2-ui/calendar": "9.9.0-alpha.6", - "@dhis2-ui/card": "9.9.0-alpha.6", - "@dhis2-ui/center": "9.9.0-alpha.6", - "@dhis2-ui/checkbox": "9.9.0-alpha.6", - "@dhis2-ui/chip": "9.9.0-alpha.6", - "@dhis2-ui/cover": "9.9.0-alpha.6", - "@dhis2-ui/css": "9.9.0-alpha.6", - "@dhis2-ui/divider": "9.9.0-alpha.6", - "@dhis2-ui/field": "9.9.0-alpha.6", - "@dhis2-ui/file-input": "9.9.0-alpha.6", - "@dhis2-ui/header-bar": "9.9.0-alpha.6", - "@dhis2-ui/help": "9.9.0-alpha.6", - "@dhis2-ui/input": "9.9.0-alpha.6", - "@dhis2-ui/intersection-detector": "9.9.0-alpha.6", - "@dhis2-ui/label": "9.9.0-alpha.6", - "@dhis2-ui/layer": "9.9.0-alpha.6", - "@dhis2-ui/legend": "9.9.0-alpha.6", - "@dhis2-ui/loader": "9.9.0-alpha.6", - "@dhis2-ui/logo": "9.9.0-alpha.6", - "@dhis2-ui/menu": "9.9.0-alpha.6", - "@dhis2-ui/modal": "9.9.0-alpha.6", - "@dhis2-ui/node": "9.9.0-alpha.6", - "@dhis2-ui/notice-box": "9.9.0-alpha.6", - "@dhis2-ui/organisation-unit-tree": "9.9.0-alpha.6", - "@dhis2-ui/pagination": "9.9.0-alpha.6", - "@dhis2-ui/popover": "9.9.0-alpha.6", - "@dhis2-ui/popper": "9.9.0-alpha.6", - "@dhis2-ui/portal": "9.9.0-alpha.6", - "@dhis2-ui/radio": "9.9.0-alpha.6", - "@dhis2-ui/required": "9.9.0-alpha.6", - "@dhis2-ui/segmented-control": "9.9.0-alpha.6", - "@dhis2-ui/select": "9.9.0-alpha.6", - "@dhis2-ui/selector-bar": "9.9.0-alpha.6", - "@dhis2-ui/sharing-dialog": "9.9.0-alpha.6", - "@dhis2-ui/switch": "9.9.0-alpha.6", - "@dhis2-ui/tab": "9.9.0-alpha.6", - "@dhis2-ui/table": "9.9.0-alpha.6", - "@dhis2-ui/tag": "9.9.0-alpha.6", - "@dhis2-ui/text-area": "9.9.0-alpha.6", - "@dhis2-ui/tooltip": "9.9.0-alpha.6", - "@dhis2-ui/transfer": "9.9.0-alpha.6", - "@dhis2-ui/user-avatar": "9.9.0-alpha.6", - "@dhis2/ui-constants": "9.9.0-alpha.6", - "@dhis2/ui-forms": "9.9.0-alpha.6", - "@dhis2/ui-icons": "9.9.0-alpha.6", + "@dhis2-ui/card": "9.11.2", + "@dhis2-ui/center": "9.11.2", + "@dhis2-ui/checkbox": "9.11.2", + "@dhis2-ui/chip": "9.11.2", + "@dhis2-ui/cover": "9.11.2", + "@dhis2-ui/css": "9.11.2", + "@dhis2-ui/divider": "9.11.2", + "@dhis2-ui/field": "9.11.2", + "@dhis2-ui/file-input": "9.11.2", + "@dhis2-ui/header-bar": "9.11.2", + "@dhis2-ui/help": "9.11.2", + "@dhis2-ui/input": "9.11.2", + "@dhis2-ui/intersection-detector": "9.11.2", + "@dhis2-ui/label": "9.11.2", + "@dhis2-ui/layer": "9.11.2", + "@dhis2-ui/legend": "9.11.2", + "@dhis2-ui/loader": "9.11.2", + "@dhis2-ui/logo": "9.11.2", + "@dhis2-ui/menu": "9.11.2", + "@dhis2-ui/modal": "9.11.2", + "@dhis2-ui/node": "9.11.2", + "@dhis2-ui/notice-box": "9.11.2", + "@dhis2-ui/organisation-unit-tree": "9.11.2", + "@dhis2-ui/pagination": "9.11.2", + "@dhis2-ui/popover": "9.11.2", + "@dhis2-ui/popper": "9.11.2", + "@dhis2-ui/portal": "9.11.2", + "@dhis2-ui/radio": "9.11.2", + "@dhis2-ui/required": "9.11.2", + "@dhis2-ui/segmented-control": "9.11.2", + "@dhis2-ui/select": "9.11.2", + "@dhis2-ui/selector-bar": "9.11.2", + "@dhis2-ui/sharing-dialog": "9.11.2", + "@dhis2-ui/switch": "9.11.2", + "@dhis2-ui/tab": "9.11.2", + "@dhis2-ui/table": "9.11.2", + "@dhis2-ui/tag": "9.11.2", + "@dhis2-ui/text-area": "9.11.2", + "@dhis2-ui/tooltip": "9.11.2", + "@dhis2-ui/transfer": "9.11.2", + "@dhis2-ui/user-avatar": "9.11.2", + "@dhis2/ui-constants": "9.11.2", + "@dhis2/ui-forms": "9.11.2", + "@dhis2/ui-icons": "9.11.2", "prop-types": "^15.7.2" }, "peerDependencies": { "@dhis2/app-runtime": "^3", "@dhis2/d2-i18n": "^1", - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "devDependencies": { diff --git a/components/alert/package.json b/components/alert/package.json index 26284e77a4..d39dca11f4 100644 --- a/components/alert/package.json +++ b/components/alert/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/alert", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Alert", "repository": { "type": "git", @@ -22,20 +22,20 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/portal": "9.9.0-alpha.6", - "@dhis2/ui-constants": "9.9.0-alpha.6", - "@dhis2/ui-icons": "9.9.0-alpha.6", + "@dhis2-ui/portal": "9.11.2", + "@dhis2/ui-constants": "9.11.2", + "@dhis2/ui-icons": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/alert/src/alert-bar/alert-bar.e2e.stories.js b/components/alert/src/alert-bar/alert-bar.e2e.stories.js new file mode 100644 index 0000000000..1987690404 --- /dev/null +++ b/components/alert/src/alert-bar/alert-bar.e2e.stories.js @@ -0,0 +1,53 @@ +import React, { useState } from 'react' +import { AlertBar } from './index.js' + +window.onHidden = window.Cypress && window.Cypress.cy.stub() + +export default { title: 'AlertBar' } + +export const Default = () => Default +export const CustomDuration = () => ( + Custom duration +) +export const PermanentWithActions = () => ( + {} }, + { label: 'Cancel', onClick: () => {} }, + ]} + > + 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-bar/alert-bar.stories.js b/components/alert/src/alert-bar/alert-bar.prod.stories.js similarity index 100% rename from components/alert/src/alert-bar/alert-bar.stories.js rename to components/alert/src/alert-bar/alert-bar.prod.stories.js diff --git a/components/alert/src/alert-bar/alert-bar.stories.e2e.js b/components/alert/src/alert-bar/alert-bar.stories.e2e.js deleted file mode 100644 index a415d1f6a3..0000000000 --- a/components/alert/src/alert-bar/alert-bar.stories.e2e.js +++ /dev/null @@ -1,53 +0,0 @@ -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', () => ( - {} }, - { 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 ( - - - - - ) - }) diff --git a/components/alert/src/alert-bar/features/api/index.js b/components/alert/src/alert-bar/features/api/index.js index 69478dc80d..de57875b20 100644 --- a/components/alert/src/alert-bar/features/api/index.js +++ b/components/alert/src/alert-bar/features/api/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('an AlertBar with onHidden handler is rendered', () => { - cy.visitStory('AlertBar', 'With onHidden') + cy.visitStory('AlertBar', 'With on hidden') }) Given('an AlertBar with disabled icon is rendered', () => { diff --git a/components/alert/src/alert-bar/features/hide.feature b/components/alert/src/alert-bar/features/hide.feature index cde15c2a0c..cfa440e818 100644 --- a/components/alert/src/alert-bar/features/hide.feature +++ b/components/alert/src/alert-bar/features/hide.feature @@ -19,8 +19,8 @@ Feature: Hiding the AlertBar Given a permanent AlertBar with hidden and onHidden is rendered Then the AlertBar is not rendered And the onHidden handler is not called - When the user click a button which toggles the hidden prop + When the user click a button which toggles the hidden prop to false Then the AlertBar is rendered - When the user click a button which toggles the hidden prop + When the user click a button which toggles the hidden prop to true Then the AlertBar is not rendered And the onHidden handler is called diff --git a/components/alert/src/alert-bar/features/hide/index.js b/components/alert/src/alert-bar/features/hide/index.js index b8530b1715..83a2c89bcf 100644 --- a/components/alert/src/alert-bar/features/hide/index.js +++ b/components/alert/src/alert-bar/features/hide/index.js @@ -20,8 +20,12 @@ When('the user clicks on the "Cancel" button', () => { ).click() }) -When('the user click a button which toggles the hidden prop', () => { - cy.get('button').click() +When('the user click a button which toggles the hidden prop to false', () => { + cy.get('button:contains("Show")').click() +}) + +When('the user click a button which toggles the hidden prop to true', () => { + cy.get('button:contains("Hide")').click() }) When('the custom duration has passed', () => { diff --git a/components/alert/src/alert-stack/alert-stack.stories.e2e.js b/components/alert/src/alert-stack/alert-stack.e2e.stories.js similarity index 74% rename from components/alert/src/alert-stack/alert-stack.stories.e2e.js rename to components/alert/src/alert-stack/alert-stack.e2e.stories.js index 83ed76a162..372df0d277 100644 --- a/components/alert/src/alert-stack/alert-stack.stories.e2e.js +++ b/components/alert/src/alert-stack/alert-stack.e2e.stories.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: 'AlertStack' } + +export const Default = () => ( Message Message Message -)) +) diff --git a/components/alert/src/alert-stack/alert-stack.js b/components/alert/src/alert-stack/alert-stack.js index 8b18766e2c..c4b35ed022 100644 --- a/components/alert/src/alert-stack/alert-stack.js +++ b/components/alert/src/alert-stack/alert-stack.js @@ -1,5 +1,5 @@ -import { Portal } from '@dhis2-ui/portal' import { layers } from '@dhis2/ui-constants' +import { Portal } from '@dhis2-ui/portal' import cx from 'classnames' import PropTypes from 'prop-types' import React from 'react' diff --git a/components/alert/src/alert-stack/alert-stack.stories.js b/components/alert/src/alert-stack/alert-stack.prod.stories.js similarity index 100% rename from components/alert/src/alert-stack/alert-stack.stories.js rename to components/alert/src/alert-stack/alert-stack.prod.stories.js diff --git a/components/box/package.json b/components/box/package.json index 1522ad1776..a4347c214f 100644 --- a/components/box/package.json +++ b/components/box/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/box", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Box", "repository": { "type": "git", @@ -22,18 +22,18 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.9.0-alpha.6", + "@dhis2/ui-constants": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/box/src/box.e2e.stories.js b/components/box/src/box.e2e.stories.js new file mode 100644 index 0000000000..498db343ae --- /dev/null +++ b/components/box/src/box.e2e.stories.js @@ -0,0 +1,10 @@ +import React from 'react' +import { Box } from './box.js' + +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/box/src/box.stories.js b/components/box/src/box.prod.stories.js similarity index 100% rename from components/box/src/box.stories.js rename to components/box/src/box.prod.stories.js diff --git a/components/box/src/box.stories.e2e.js b/components/box/src/box.stories.e2e.js deleted file mode 100644 index 41dd3464e0..0000000000 --- a/components/box/src/box.stories.e2e.js +++ /dev/null @@ -1,11 +0,0 @@ -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. - - )) diff --git a/components/button/i18n/en.pot b/components/button/i18n/en.pot new file mode 100644 index 0000000000..71313629ac --- /dev/null +++ b/components/button/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-06-12T03:40:49.003Z\n" +"PO-Revision-Date: 2024-06-12T03:40:49.004Z\n" + +msgid "Toggle dropdown" +msgstr "Toggle dropdown" diff --git a/components/button/package.json b/components/button/package.json index 188549e086..f53a6db4b8 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/button", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Button", "repository": { "type": "git", @@ -22,22 +22,22 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/layer": "9.9.0-alpha.6", - "@dhis2-ui/loader": "9.9.0-alpha.6", - "@dhis2-ui/popper": "9.9.0-alpha.6", - "@dhis2/ui-constants": "9.9.0-alpha.6", - "@dhis2/ui-icons": "9.9.0-alpha.6", + "@dhis2-ui/layer": "9.11.2", + "@dhis2-ui/loader": "9.11.2", + "@dhis2-ui/popper": "9.11.2", + "@dhis2/ui-constants": "9.11.2", + "@dhis2/ui-icons": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/button/src/button-strip/button-strip.stories.e2e.js b/components/button/src/button-strip/button-strip.e2e.stories.js similarity index 69% rename from components/button/src/button-strip/button-strip.stories.e2e.js rename to components/button/src/button-strip/button-strip.e2e.stories.js index e173009074..d6d5116d91 100644 --- a/components/button/src/button-strip/button-strip.stories.e2e.js +++ b/components/button/src/button-strip/button-strip.e2e.stories.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-strip/button-strip.stories.js b/components/button/src/button-strip/button-strip.prod.stories.js similarity index 100% rename from components/button/src/button-strip/button-strip.stories.js rename to components/button/src/button-strip/button-strip.prod.stories.js diff --git a/components/button/src/button/button.e2e.stories.js b/components/button/src/button/button.e2e.stories.js new file mode 100644 index 0000000000..07ebfb3b3e --- /dev/null +++ b/components/button/src/button/button.e2e.stories.js @@ -0,0 +1,24 @@ +import React from 'react' +import { Button } from './button.js' + +window.onClick = window.Cypress && window.Cypress.cy.stub() +window.onBlur = window.Cypress && window.Cypress.cy.stub() +window.onFocus = window.Cypress && window.Cypress.cy.stub() + +export default { title: 'Button' } + +export const WithOnClick = () => ( + +) +export const WithInitialFocusAndOnBlur = () => ( + +) +export const WithOnFocus = () => ( + +) diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js index 7f27d98223..a920e49b77 100644 --- a/components/button/src/button/button.js +++ b/components/button/src/button/button.js @@ -1,5 +1,5 @@ -import { CircularLoader } from '@dhis2-ui/loader' import { sharedPropTypes } from '@dhis2/ui-constants' +import { CircularLoader } from '@dhis2-ui/loader' import cx from 'classnames' import PropTypes from 'prop-types' import React, { useEffect, useRef } from 'react' diff --git a/components/button/src/button/button.stories.js b/components/button/src/button/button.prod.stories.js similarity index 100% rename from components/button/src/button/button.stories.js rename to components/button/src/button/button.prod.stories.js diff --git a/components/button/src/button/button.stories.e2e.js b/components/button/src/button/button.stories.e2e.js deleted file mode 100644 index 5730885ae5..0000000000 --- a/components/button/src/button/button.stories.e2e.js +++ /dev/null @@ -1,29 +0,0 @@ -import { storiesOf } from '@storybook/react' -import React from 'react' -import { Button } from './button.js' - -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', () => ( - - )) diff --git a/components/button/src/button/features/can_be_blurred/index.js b/components/button/src/button/features/can_be_blurred/index.js index 1ec6598ac3..560b5bcc42 100644 --- a/components/button/src/button/features/can_be_blurred/index.js +++ b/components/button/src/button/features/can_be_blurred/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('an Button with initialFocus and onBlur handler is rendered', () => { - cy.visitStory('Button', 'With initialFocus and onBlur') + cy.visitStory('Button', 'With initial focus and on blur') cy.focused().should('exist') }) diff --git a/components/button/src/button/features/can_be_clicked/index.js b/components/button/src/button/features/can_be_clicked/index.js index bda9294441..c7493e616a 100644 --- a/components/button/src/button/features/can_be_clicked/index.js +++ b/components/button/src/button/features/can_be_clicked/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a Button with onClick handler is rendered', () => { - cy.visitStory('Button', 'With onClick') + cy.visitStory('Button', 'With on click') }) When('the Button is clicked', () => { diff --git a/components/button/src/button/features/can_be_focused/index.js b/components/button/src/button/features/can_be_focused/index.js index 02a27fb5b1..3541401dcb 100644 --- a/components/button/src/button/features/can_be_focused/index.js +++ b/components/button/src/button/features/can_be_focused/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a Button with onFocus handler is rendered', () => { - cy.visitStory('Button', 'With onFocus') + cy.visitStory('Button', 'With on focus') }) When('the Button is focused', () => { diff --git a/components/button/src/dropdown-button/dropdown-button.e2e.stories.js b/components/button/src/dropdown-button/dropdown-button.e2e.stories.js new file mode 100644 index 0000000000..7a27a146dc --- /dev/null +++ b/components/button/src/dropdown-button/dropdown-button.e2e.stories.js @@ -0,0 +1,67 @@ +import React from 'react' +import { DropdownButton } from './index.js' + +window.onClick = window.Cypress && window.Cypress.cy.stub() + +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/dropdown-button/dropdown-button.js b/components/button/src/dropdown-button/dropdown-button.js index 4fd4aa65ab..82abc73249 100644 --- a/components/button/src/dropdown-button/dropdown-button.js +++ b/components/button/src/dropdown-button/dropdown-button.js @@ -1,11 +1,11 @@ -import { Layer } from '@dhis2-ui/layer' -import { Popper } from '@dhis2-ui/popper' import { requiredIf } from '@dhis2/prop-types' import { spacers, sharedPropTypes } from '@dhis2/ui-constants' +import { Layer } from '@dhis2-ui/layer' +import { Popper } from '@dhis2-ui/popper' import PropTypes from 'prop-types' import React, { Component } from 'react' import { resolve } from 'styled-jsx/css' -import { Button } from '../index.js' +import { Button } from '../button/index.js' function ArrowDown({ className }) { return ( @@ -78,8 +78,8 @@ class DropdownButton extends Component { } handleKeyDown = (event) => { - event.preventDefault() if (event.key === 'Escape' && this.state.open) { + event.preventDefault() event.stopPropagation() this.setState({ open: false }) } diff --git a/components/button/src/dropdown-button/dropdown-button.stories.js b/components/button/src/dropdown-button/dropdown-button.prod.stories.js similarity index 100% rename from components/button/src/dropdown-button/dropdown-button.stories.js rename to components/button/src/dropdown-button/dropdown-button.prod.stories.js index 8209e2bfa6..a830acc7d6 100644 --- a/components/button/src/dropdown-button/dropdown-button.stories.js +++ b/components/button/src/dropdown-button/dropdown-button.prod.stories.js @@ -1,5 +1,5 @@ -import { FlyoutMenu, MenuItem } from '@dhis2-ui/menu' import { sharedPropTypes } from '@dhis2/ui-constants' +import { FlyoutMenu, MenuItem } from '@dhis2-ui/menu' import React, { useState } from 'react' import { DropdownButton } from './index.js' diff --git a/components/button/src/dropdown-button/dropdown-button.stories.e2e.js b/components/button/src/dropdown-button/dropdown-button.stories.e2e.js deleted file mode 100644 index 6d9de79a9c..0000000000 --- a/components/button/src/dropdown-button/dropdown-button.stories.e2e.js +++ /dev/null @@ -1,67 +0,0 @@ -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 - /> - )) diff --git a/components/button/src/dropdown-button/features/accepts_initial_focus/index.js b/components/button/src/dropdown-button/features/accepts_initial_focus/index.js index ac129fab4f..e205f5b8a1 100644 --- a/components/button/src/dropdown-button/features/accepts_initial_focus/index.js +++ b/components/button/src/dropdown-button/features/accepts_initial_focus/index.js @@ -1,7 +1,7 @@ import { Given, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a DropdownButton with initialFocus is rendered', () => { - cy.visitStory('DropdownButton', 'With initialFocus') + cy.visitStory('DropdownButton', 'With initial focus') }) Then('the DropdownButton is focused', () => { diff --git a/components/button/src/dropdown-button/features/button_is_clickable/index.js b/components/button/src/dropdown-button/features/button_is_clickable/index.js index dbcda045c6..d2a7ad8555 100644 --- a/components/button/src/dropdown-button/features/button_is_clickable/index.js +++ b/components/button/src/dropdown-button/features/button_is_clickable/index.js @@ -1,7 +1,7 @@ import { Given, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a DropdownButton with onClick handler is rendered', () => { - cy.visitStory('DropdownButton', 'With onClick') + cy.visitStory('DropdownButton', 'With on click') }) Then('the onClick handler is called', () => { diff --git a/components/button/src/dropdown-button/features/can_be_disabled/index.js b/components/button/src/dropdown-button/features/can_be_disabled/index.js index 95e0330fb9..ec3ede855f 100644 --- a/components/button/src/dropdown-button/features/can_be_disabled/index.js +++ b/components/button/src/dropdown-button/features/can_be_disabled/index.js @@ -1,7 +1,7 @@ import { Given, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a disabled DropdownButton with onClick handler is rendered', () => { - cy.visitStory('DropdownButton', 'Disabled with onClick') + cy.visitStory('DropdownButton', 'Disabled with on click') }) Then('the onClick handler is not called', () => { diff --git a/components/button/src/split-button/features/accepts_initial_focus/index.js b/components/button/src/split-button/features/accepts_initial_focus/index.js index 6d8fdee9cd..826579edf3 100644 --- a/components/button/src/split-button/features/accepts_initial_focus/index.js +++ b/components/button/src/split-button/features/accepts_initial_focus/index.js @@ -1,7 +1,7 @@ import { Given, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a SplitButton with initialFocus is rendered', () => { - cy.visitStory('SplitButton', 'With initialFocus') + cy.visitStory('SplitButton', 'With initial focus') }) Then('the SplitButton button is focused', () => { diff --git a/components/button/src/split-button/features/button_is_clickable/index.js b/components/button/src/split-button/features/button_is_clickable/index.js index 132c7ff0fb..dc349581f5 100644 --- a/components/button/src/split-button/features/button_is_clickable/index.js +++ b/components/button/src/split-button/features/button_is_clickable/index.js @@ -1,7 +1,7 @@ import { Given, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a SplitButton with onClick hander is rendered', () => { - cy.visitStory('SplitButton', 'With onClick') + cy.visitStory('SplitButton', 'With on click') }) Then('the onClick handler is called', () => { diff --git a/components/button/src/split-button/split-button.e2e.stories.js b/components/button/src/split-button/split-button.e2e.stories.js new file mode 100644 index 0000000000..c7d779547b --- /dev/null +++ b/components/button/src/split-button/split-button.e2e.stories.js @@ -0,0 +1,56 @@ +import React from 'react' +import { SplitButton } from './split-button.js' + +window.onClick = window.Cypress && window.Cypress.cy.stub() + +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/button/src/split-button/split-button.js b/components/button/src/split-button/split-button.js index fadbc21a92..4aab19d6f5 100644 --- a/components/button/src/split-button/split-button.js +++ b/components/button/src/split-button/split-button.js @@ -1,12 +1,12 @@ -import { Layer } from '@dhis2-ui/layer' -import { Popper } from '@dhis2-ui/popper' import { spacers, sharedPropTypes } from '@dhis2/ui-constants' import { IconChevronUp16, IconChevronDown16 } from '@dhis2/ui-icons' +import { Layer } from '@dhis2-ui/layer' +import { Popper } from '@dhis2-ui/popper' import cx from 'classnames' import PropTypes from 'prop-types' import React, { Component } from 'react' import css from 'styled-jsx/css' -import { Button } from '../index.js' +import { Button } from '../button/index.js' import i18n from '../locales/index.js' const rightButton = css.resolve` @@ -30,8 +30,8 @@ class SplitButton extends Component { document.removeEventListener('keydown', this.handleKeyDown) } handleKeyDown = (event) => { - event.preventDefault() if (event.key === 'Escape' && this.state.open) { + event.preventDefault() event.stopPropagation() this.setState({ open: false }) this.anchorRef.current && this.anchorRef.current.focus() diff --git a/components/button/src/split-button/split-button.stories.js b/components/button/src/split-button/split-button.prod.stories.js similarity index 100% rename from components/button/src/split-button/split-button.stories.js rename to components/button/src/split-button/split-button.prod.stories.js diff --git a/components/button/src/split-button/split-button.stories.e2e.js b/components/button/src/split-button/split-button.stories.e2e.js deleted file mode 100644 index 29eb16ab2c..0000000000 --- a/components/button/src/split-button/split-button.stories.e2e.js +++ /dev/null @@ -1,65 +0,0 @@ -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 - - )) diff --git a/components/calendar/i18n/en.pot b/components/calendar/i18n/en.pot index 1a43ab3ae5..b1b9fb0605 100644 --- a/components/calendar/i18n/en.pot +++ b/components/calendar/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2023-02-28T09:43:48.470Z\n" -"PO-Revision-Date: 2023-02-28T09:43:48.470Z\n" +"POT-Creation-Date: 2024-08-17T14:54:18.072Z\n" +"PO-Revision-Date: 2024-08-17T14:54:18.073Z\n" msgid "Go to previous year" msgstr "Go to previous year" diff --git a/components/calendar/package.json b/components/calendar/package.json index 08ffe0f8bc..303d11acd1 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -22,26 +22,26 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { "@dhis2/d2-i18n": "^1", - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { - "@dhis2-ui/button": "9.9.0-alpha.6", - "@dhis2-ui/card": "9.9.0-alpha.6", - "@dhis2-ui/input": "9.9.0-alpha.6", - "@dhis2-ui/layer": "9.9.0-alpha.6", - "@dhis2-ui/popper": "9.9.0-alpha.6", - "@dhis2/multi-calendar-dates": "1.0.0-alpha.29", + "@dhis2-ui/button": "9.11.2", + "@dhis2-ui/card": "9.11.2", + "@dhis2-ui/input": "9.11.2", + "@dhis2-ui/layer": "9.11.2", + "@dhis2-ui/popper": "9.11.2", + "@dhis2/multi-calendar-dates": "^1.0.0-alpha.29", "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.9.0-alpha.6", - "@dhis2/ui-icons": "9.9.0-alpha.6", + "@dhis2/ui-constants": "9.11.2", + "@dhis2/ui-icons": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/calendar/src/__e2e__/calendar-input.stories.e2e.js b/components/calendar/src/__e2e__/calendar-input.e2e.stories.js similarity index 90% rename from components/calendar/src/__e2e__/calendar-input.stories.e2e.js rename to components/calendar/src/__e2e__/calendar-input.e2e.stories.js index 767dd727d1..ce0a882598 100644 --- a/components/calendar/src/__e2e__/calendar-input.stories.e2e.js +++ b/components/calendar/src/__e2e__/calendar-input.e2e.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { CalendarInput as component } from '../index.js' -import { CalendarWithClearButton } from '../stories/calendar-input.stories.js' +import { CalendarWithClearButton } from '../stories/calendar-input.prod.stories.js' export default { title: 'CalendarInputTesting', component } export { @@ -11,7 +11,7 @@ export { GregorianWithArabic, GregorianWithEnglish, IslamicWithArabic, -} from '../stories/calendar-input.stories.js' +} from '../stories/calendar-input.prod.stories.js' export const TestCalendarWithClearButton = () => { const params = new URLSearchParams(location.search) diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js index b308e85234..0ff771cf87 100644 --- a/components/calendar/src/calendar-input/calendar-input.js +++ b/components/calendar/src/calendar-input/calendar-input.js @@ -1,12 +1,12 @@ +import { + useDatePicker, + useResolvedDirection, +} from '@dhis2/multi-calendar-dates' import { Button } from '@dhis2-ui/button' import { Card } from '@dhis2-ui/card' import { InputField } from '@dhis2-ui/input' import { Layer } from '@dhis2-ui/layer' import { Popper } from '@dhis2-ui/popper' -import { - useDatePicker, - useResolvedDirection, -} from '@dhis2/multi-calendar-dates' import cx from 'classnames' import React, { useRef, useState, useMemo, useEffect } from 'react' import { CalendarContainer } from '../calendar/calendar-container.js' diff --git a/components/calendar/src/stories/calendar-input.stories.js b/components/calendar/src/stories/calendar-input.prod.stories.js similarity index 97% rename from components/calendar/src/stories/calendar-input.stories.js rename to components/calendar/src/stories/calendar-input.prod.stories.js index 7d3917ad00..6a90a62cc1 100644 --- a/components/calendar/src/stories/calendar-input.stories.js +++ b/components/calendar/src/stories/calendar-input.prod.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/components/calendar/src/stories/calendar.stories.js b/components/calendar/src/stories/calendar.prod.stories.js similarity index 100% rename from components/calendar/src/stories/calendar.stories.js rename to components/calendar/src/stories/calendar.prod.stories.js diff --git a/components/card/package.json b/components/card/package.json index 10bd4c21fa..4f55cb3eba 100644 --- a/components/card/package.json +++ b/components/card/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/card", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Card", "repository": { "type": "git", @@ -22,18 +22,18 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.9.0-alpha.6", + "@dhis2/ui-constants": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/card/src/card.stories.e2e.js b/components/card/src/card.e2e.stories.js similarity index 64% rename from components/card/src/card.stories.e2e.js rename to components/card/src/card.e2e.stories.js index 00170dbe78..2da68f0aa9 100644 --- a/components/card/src/card.stories.e2e.js +++ b/components/card/src/card.e2e.stories.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/card/src/card.stories.js b/components/card/src/card.prod.stories.js similarity index 100% rename from components/card/src/card.stories.js rename to components/card/src/card.prod.stories.js diff --git a/components/center/package.json b/components/center/package.json index e8d7b0e053..65be26c9dc 100644 --- a/components/center/package.json +++ b/components/center/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/center", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Center", "repository": { "type": "git", @@ -22,18 +22,18 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.9.0-alpha.6", + "@dhis2/ui-constants": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/center/src/center.stories.js b/components/center/src/center.prod.stories.js similarity index 100% rename from components/center/src/center.stories.js rename to components/center/src/center.prod.stories.js diff --git a/components/checkbox/package.json b/components/checkbox/package.json index 64cff240a2..e04d4d0e92 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/checkbox", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Checkbox", "repository": { "type": "git", @@ -22,20 +22,20 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/field": "9.9.0-alpha.6", - "@dhis2-ui/required": "9.9.0-alpha.6", - "@dhis2/ui-constants": "9.9.0-alpha.6", + "@dhis2-ui/field": "9.11.2", + "@dhis2-ui/required": "9.11.2", + "@dhis2/ui-constants": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/checkbox/src/checkbox-field/checkbox-field.e2e.stories.js b/components/checkbox/src/checkbox-field/checkbox-field.e2e.stories.js new file mode 100644 index 0000000000..5d41e9ecfc --- /dev/null +++ b/components/checkbox/src/checkbox-field/checkbox-field.e2e.stories.js @@ -0,0 +1,26 @@ +import React from 'react' +import { CheckboxField } from './index.js' + +export default { title: 'CheckboxField' } +export const WithLabelAndRequired = () => ( + +) +export const WithHelpText = () => ( + +) +export const WithLabel = () => ( + +) +export const WithValidationText = () => ( + +) diff --git a/components/checkbox/src/checkbox-field/checkbox-field.js b/components/checkbox/src/checkbox-field/checkbox-field.js index 853fefe4f7..78e5883eed 100644 --- a/components/checkbox/src/checkbox-field/checkbox-field.js +++ b/components/checkbox/src/checkbox-field/checkbox-field.js @@ -1,9 +1,9 @@ +import { sharedPropTypes } from '@dhis2/ui-constants' import { Field } from '@dhis2-ui/field' import { Required } from '@dhis2-ui/required' -import { sharedPropTypes } from '@dhis2/ui-constants' import PropTypes from 'prop-types' import React from 'react' -import { Checkbox } from '../index.js' +import { Checkbox } from '../checkbox/index.js' const AddRequired = ({ label, required, dataTest }) => ( diff --git a/components/checkbox/src/checkbox-field/checkbox-field.stories.js b/components/checkbox/src/checkbox-field/checkbox-field.prod.stories.js similarity index 100% rename from components/checkbox/src/checkbox-field/checkbox-field.stories.js rename to components/checkbox/src/checkbox-field/checkbox-field.prod.stories.js diff --git a/components/checkbox/src/checkbox-field/checkbox-field.stories.e2e.js b/components/checkbox/src/checkbox-field/checkbox-field.stories.e2e.js deleted file mode 100644 index 0c8111c6f6..0000000000 --- a/components/checkbox/src/checkbox-field/checkbox-field.stories.e2e.js +++ /dev/null @@ -1,32 +0,0 @@ -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', () => ( - - )) diff --git a/components/checkbox/src/checkbox/checkbox.e2e.stories.js b/components/checkbox/src/checkbox/checkbox.e2e.stories.js new file mode 100644 index 0000000000..f47bee5748 --- /dev/null +++ b/components/checkbox/src/checkbox/checkbox.e2e.stories.js @@ -0,0 +1,55 @@ +import React from 'react' +import { Checkbox } from './index.js' + +window.onClick = window.Cypress && window.Cypress.cy.stub() +window.onChange = window.Cypress && window.Cypress.cy.stub() +window.onBlur = window.Cypress && window.Cypress.cy.stub() +window.onFocus = window.Cypress && window.Cypress.cy.stub() + +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/checkbox/src/checkbox/checkbox.stories.js b/components/checkbox/src/checkbox/checkbox.prod.stories.js similarity index 100% rename from components/checkbox/src/checkbox/checkbox.stories.js rename to components/checkbox/src/checkbox/checkbox.prod.stories.js diff --git a/components/checkbox/src/checkbox/checkbox.stories.e2e.js b/components/checkbox/src/checkbox/checkbox.stories.e2e.js deleted file mode 100644 index 18609d4464..0000000000 --- a/components/checkbox/src/checkbox/checkbox.stories.e2e.js +++ /dev/null @@ -1,56 +0,0 @@ -import { storiesOf } from '@storybook/react' -import React from 'react' -import { Checkbox } from './index.js' - -window.onClick = window.Cypress && window.Cypress.cy.stub() -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', () => ( - - )) diff --git a/components/checkbox/src/checkbox/features/accepts_initial_focus/index.js b/components/checkbox/src/checkbox/features/accepts_initial_focus/index.js index 8d4ea621fd..1dcb306796 100644 --- a/components/checkbox/src/checkbox/features/accepts_initial_focus/index.js +++ b/components/checkbox/src/checkbox/features/accepts_initial_focus/index.js @@ -1,7 +1,7 @@ import { Given, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a Checkbox with initialFocus is rendered', () => { - cy.visitStory('Checkbox', 'With initialFocus') + cy.visitStory('Checkbox', 'With initial focus') }) Then('the Checkbox is focused', () => { diff --git a/components/checkbox/src/checkbox/features/can_be_blurred/index.js b/components/checkbox/src/checkbox/features/can_be_blurred/index.js index 7791c44954..3e736f8de7 100644 --- a/components/checkbox/src/checkbox/features/can_be_blurred/index.js +++ b/components/checkbox/src/checkbox/features/can_be_blurred/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a Checkbox with initialFocus and onBlur handler is rendered', () => { - cy.visitStory('Checkbox', 'With initialFocus and onBlur') + cy.visitStory('Checkbox', 'With initial focus and on blur') }) When('the Checkbox is blurred', () => { diff --git a/components/checkbox/src/checkbox/features/can_be_changed/index.js b/components/checkbox/src/checkbox/features/can_be_changed/index.js index 303c3647f7..fca04eef66 100644 --- a/components/checkbox/src/checkbox/features/can_be_changed/index.js +++ b/components/checkbox/src/checkbox/features/can_be_changed/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a Checkbox with onChange handler is rendered', () => { - cy.visitStory('Checkbox', 'With onChange') + cy.visitStory('Checkbox', 'With on change') }) When('the Checkbox is clicked', () => { diff --git a/components/checkbox/src/checkbox/features/can_be_disabled/index.js b/components/checkbox/src/checkbox/features/can_be_disabled/index.js index 0cc9f50de6..78685ff209 100644 --- a/components/checkbox/src/checkbox/features/can_be_disabled/index.js +++ b/components/checkbox/src/checkbox/features/can_be_disabled/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a disabled Checkbox with onClick handler is rendered', () => { - cy.visitStory('Checkbox', 'Disabled with onClick') + cy.visitStory('Checkbox', 'Disabled with on click') }) When('the Checkbox is clicked', () => { diff --git a/components/checkbox/src/checkbox/features/can_be_focused/index.js b/components/checkbox/src/checkbox/features/can_be_focused/index.js index d205652c64..9237aaa459 100644 --- a/components/checkbox/src/checkbox/features/can_be_focused/index.js +++ b/components/checkbox/src/checkbox/features/can_be_focused/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a Checkbox with onFocus handler is rendered', () => { - cy.visitStory('Checkbox', 'With onFocus') + cy.visitStory('Checkbox', 'With on focus') }) When('the Checkbox is focused', () => { diff --git a/components/chip/package.json b/components/chip/package.json index 909306cc20..f4c8467586 100644 --- a/components/chip/package.json +++ b/components/chip/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/chip", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Chip", "repository": { "type": "git", @@ -22,18 +22,18 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.9.0-alpha.6", + "@dhis2/ui-constants": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/chip/src/chip.e2e.stories.js b/components/chip/src/chip.e2e.stories.js new file mode 100644 index 0000000000..02b6d33fce --- /dev/null +++ b/components/chip/src/chip.e2e.stories.js @@ -0,0 +1,14 @@ +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() + +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/chip/src/chip.stories.js b/components/chip/src/chip.prod.stories.js similarity index 100% rename from components/chip/src/chip.stories.js rename to components/chip/src/chip.prod.stories.js diff --git a/components/chip/src/chip.stories.e2e.js b/components/chip/src/chip.stories.e2e.js deleted file mode 100644 index 737cc5ecd8..0000000000 --- a/components/chip/src/chip.stories.e2e.js +++ /dev/null @@ -1,15 +0,0 @@ -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) diff --git a/components/chip/src/features/is_clickable/index.js b/components/chip/src/features/is_clickable/index.js index 2d10769ed5..fdf2ddec2d 100644 --- a/components/chip/src/features/is_clickable/index.js +++ b/components/chip/src/features/is_clickable/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a Chip with onClick handler is rendered', () => { - cy.visitStory('Chip', 'With onClick') + cy.visitStory('Chip', 'With on click') }) When('the Chip is clicked', () => { diff --git a/components/chip/src/features/is_removable/index.js b/components/chip/src/features/is_removable/index.js index f032ad10a8..42095bc948 100644 --- a/components/chip/src/features/is_removable/index.js +++ b/components/chip/src/features/is_removable/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a Chip with onRemove handler is rendered', () => { - cy.visitStory('Chip', 'With onRemove') + cy.visitStory('Chip', 'With on remove') }) When('the remove icon is clicked', () => { diff --git a/components/cover/package.json b/components/cover/package.json index f866377dbf..f774a845c1 100644 --- a/components/cover/package.json +++ b/components/cover/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/cover", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Cover", "repository": { "type": "git", @@ -22,18 +22,18 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.9.0-alpha.6", + "@dhis2/ui-constants": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/cover/src/cover.stories.e2e.js b/components/cover/src/cover.e2e.stories.js similarity index 81% rename from components/cover/src/cover.stories.e2e.js rename to components/cover/src/cover.e2e.stories.js index 780fc7e22d..0a2b53bc1b 100644 --- a/components/cover/src/cover.stories.e2e.js +++ b/components/cover/src/cover.e2e.stories.js @@ -32,13 +32,17 @@ export const WithChildren = () => ( export const Blocking = () => ( <> - + ) export const WithClickHandler = () => ( - + ) diff --git a/components/cover/src/cover.stories.js b/components/cover/src/cover.prod.stories.js similarity index 100% rename from components/cover/src/cover.stories.js rename to components/cover/src/cover.prod.stories.js diff --git a/components/cover/src/features/click_behavior/index.js b/components/cover/src/features/click_behavior/index.js index 3fb1baef50..6cf69bf319 100644 --- a/components/cover/src/features/click_behavior/index.js +++ b/components/cover/src/features/click_behavior/index.js @@ -9,7 +9,7 @@ Given('a Cover with a button in it is rendered', () => { }) When('the user clicks the button', () => { - cy.get('button').click() + cy.get('[data-test="button"]').click() }) When('the user clicks on the Cover', () => { diff --git a/components/css/package.json b/components/css/package.json index f8fc21f83a..8c650ddfa6 100644 --- a/components/css/package.json +++ b/components/css/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/css", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI CSS", "repository": { "type": "git", @@ -22,18 +22,18 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.9.0-alpha.6", + "@dhis2/ui-constants": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/css/src/css-reset/css-reset.stories.js b/components/css/src/css-reset/css-reset.prod.stories.js similarity index 100% rename from components/css/src/css-reset/css-reset.stories.js rename to components/css/src/css-reset/css-reset.prod.stories.js diff --git a/components/css/src/css-variables/css-variables.e2e.stories.js b/components/css/src/css-variables/css-variables.e2e.stories.js new file mode 100644 index 0000000000..3d15080bd5 --- /dev/null +++ b/components/css/src/css-variables/css-variables.e2e.stories.js @@ -0,0 +1,43 @@ +import React from 'react' +import { CssVariables } from './index.js' + +export default { title: 'CssVariables' } +export const WithColors = () => ( + + +
+ +) +export const WithTheme = () => ( + + +
+ +) +export const WithLayers = () => ( + + +
+ +) +export const WithSpacers = () => ( + + +
+ +) +export const WithElevations = () => ( + + +
+ +) diff --git a/components/css/src/css-variables/css-variables.js b/components/css/src/css-variables/css-variables.js index 371113aacc..d1136932fa 100644 --- a/components/css/src/css-variables/css-variables.js +++ b/components/css/src/css-variables/css-variables.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' const toPrefixedThemeSection = (themeSectionKey) => + // eslint-disable-next-line import/namespace Object.entries(theme[themeSectionKey]).reduce((prefixed, [key, value]) => { prefixed[`${themeSectionKey}-${key}`] = value diff --git a/components/css/src/css-variables/css-variables.stories.js b/components/css/src/css-variables/css-variables.prod.stories.js similarity index 100% rename from components/css/src/css-variables/css-variables.stories.js rename to components/css/src/css-variables/css-variables.prod.stories.js diff --git a/components/css/src/css-variables/css-variables.stories.e2e.js b/components/css/src/css-variables/css-variables.stories.e2e.js deleted file mode 100644 index 0871b7b458..0000000000 --- a/components/css/src/css-variables/css-variables.stories.e2e.js +++ /dev/null @@ -1,47 +0,0 @@ -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', () => ( - - -
- - )) diff --git a/components/divider/package.json b/components/divider/package.json index 9d1369c435..e2df6f0bf7 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/divider", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Divider", "repository": { "type": "git", @@ -22,18 +22,18 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.9.0-alpha.6", + "@dhis2/ui-constants": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, 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 ( -
+
- -) +import React, { Children, cloneElement, isValidElement, useMemo } from 'react' +import { hasMenuItemRole } from './helpers.js' +import { useMenuNavigation } from './use-menu.js' + +const Menu = ({ children, className, dataTest, dense }) => { + const { menuRef, focusedIndex } = useMenuNavigation(children) + + const childrenToRender = useMemo( + () => + Children.map(children, (child, index) => { + if (!isValidElement(child)) { + return child + } + const tabIndex = index === focusedIndex ? 0 : -1 + + const childProps = { + ...child.props, + } + + // this check is based on the type of child. + // if it is a native HTML element, like li, a, span, only apply its child props + // if it is a functional (React) component, it applies custom props, like dense, hideDivider, etc + if (typeof child.type === 'string') { + // if the native HTML element child is not li, then wrap it in an li tag + // apply the tabindex prop if a child has the menuitem role to make it focusable + if (child.type === 'li') { + return hasMenuItemRole(child.props.children[0]) + ? cloneElement(child, { ...childProps, tabIndex }) + : cloneElement(child, childProps) + } else { + return ( +
  • + {cloneElement(child, childProps)} +
    • + ) + } + } else { + childProps.dense = + typeof child.props.dense === 'boolean' + ? child.props.dense + : dense + childProps.hideDivider = + typeof child.props.hideDivider !== 'boolean' && + index === 0 + ? true + : child.props.hideDivider + return cloneElement(child, { ...childProps, tabIndex }) + } + }), + [children, dense, focusedIndex] + ) + + return ( +
      + {childrenToRender} + +
    + ) +} Menu.defaultProps = { dataTest: 'dhis2-uicore-menulist', diff --git a/components/menu/src/menu/menu.stories.js b/components/menu/src/menu/menu.prod.stories.js similarity index 100% rename from components/menu/src/menu/menu.stories.js rename to components/menu/src/menu/menu.prod.stories.js diff --git a/components/menu/src/menu/menu.stories.e2e.js b/components/menu/src/menu/menu.stories.e2e.js deleted file mode 100644 index 45a8103357..0000000000 --- a/components/menu/src/menu/menu.stories.e2e.js +++ /dev/null @@ -1,5 +0,0 @@ -import { storiesOf } from '@storybook/react' -import React from 'react' -import { Menu } from './index.js' - -storiesOf('Menu', module).add('With children', () => I am a child) diff --git a/components/menu/src/menu/use-menu.js b/components/menu/src/menu/use-menu.js new file mode 100644 index 0000000000..b7d0ec8848 --- /dev/null +++ b/components/menu/src/menu/use-menu.js @@ -0,0 +1,100 @@ +import { useRef, useState, useEffect, useCallback } from 'react' +import { getFocusableItemsIndices } from './helpers.js' + +export const useMenuNavigation = (children) => { + const menuRef = useRef(null) + const [focusableItemsIndices, setFocusableItemsIndices] = useState(null) + const [activeItemIndex, setActiveItemIndex] = useState(-1) + + // Initializes the indices for focusable items + // focusable items have the role of menuitem || menuitemcheckbox || menuitemradio + useEffect(() => { + if (menuRef) { + const menuItems = Array.from(menuRef.current.children) + const itemsIndices = getFocusableItemsIndices(menuItems) + setFocusableItemsIndices(itemsIndices) + } + }, [children]) + + // Focus the active menu child + useEffect(() => { + if (menuRef) { + if (focusableItemsIndices?.length && activeItemIndex > -1) { + const currentIndex = focusableItemsIndices[activeItemIndex] + menuRef.current.children[currentIndex].focus() + } + } + }, [activeItemIndex, focusableItemsIndices]) + + // Navigate through focusable children using arrow keys + // Trigger actionable items + const handleKeyDown = useCallback( + (event) => { + const totalFocusablePositions = focusableItemsIndices?.length + if (totalFocusablePositions) { + const lastIndex = totalFocusablePositions - 1 + + switch (event.key) { + case 'ArrowUp': + event.preventDefault() + setActiveItemIndex( + activeItemIndex > 0 + ? activeItemIndex - 1 + : lastIndex + ) + break + case 'ArrowDown': + event.preventDefault() + setActiveItemIndex( + activeItemIndex >= lastIndex + ? 0 + : activeItemIndex + 1 + ) + break + case 'Enter': + case ' ': + if (event.target.nodeName === 'LI') { + event.preventDefault() + event.target.children?.[0]?.click() + } + break + default: + break + } + } + }, + [activeItemIndex, focusableItemsIndices?.length] + ) + + // Event listeners for menu focus and key handling + useEffect(() => { + if (!menuRef) { + return + } + + const menu = menuRef.current + + // Focus the first menu item when the menu receives focus + const handleFocus = (event) => { + if (event.target === menuRef.current) { + const firstItemIndex = focusableItemsIndices?.[0] + firstItemIndex && + menuRef.current.children[firstItemIndex].focus() + setActiveItemIndex(0) + } + } + + menu.addEventListener('focus', handleFocus) + menu.addEventListener('keydown', handleKeyDown) + + return () => { + menu.removeEventListener('focus', handleFocus) + menu.removeEventListener('keydown', handleKeyDown) + } + }, [activeItemIndex, focusableItemsIndices, handleKeyDown]) + + return { + menuRef, + focusedIndex: focusableItemsIndices?.[activeItemIndex], + } +} diff --git a/components/menu/types/index.d.ts b/components/menu/types/index.d.ts index 4f123396f5..bcbafdc9d7 100644 --- a/components/menu/types/index.d.ts +++ b/components/menu/types/index.d.ts @@ -6,6 +6,10 @@ export interface FlyoutMenuProps { */ children?: React.ReactNode className?: string + /** + * On Escape key press, this function is called + */ + closeMenu?: () => void dataTest?: string /** * Menu uses smaller dimensions @@ -42,6 +46,14 @@ export const MenuDivider: React.FC export interface MenuItemProps { active?: boolean + /** + * Specifies if menu item is a checkbox + */ + checkbox?: boolean + /** + * checkbox state for toggleable menu items + */ + checked?: boolean chevron?: boolean /** * Nested menu items can become submenus. @@ -69,6 +81,11 @@ export interface MenuItemProps { * When true, nested menu items are shown in a Popper */ showSubMenu?: boolean + /** + * A supporting element shown at the end of the menu item + */ + suffix?: React.ReactNode + tabIndex?: number /** * For using menu item as a link */ diff --git a/components/modal/API.md b/components/modal/API.md index 5e67977a19..ab1ca487e8 100644 --- a/components/modal/API.md +++ b/components/modal/API.md @@ -79,5 +79,5 @@ import { ModalTitle } from '@dhis2/ui' |Name|Type|Default|Required|Description| |---|---|---|---|---| -|children|string|||| +|children|node|||| |dataTest|string|`'dhis2-uicore-modaltitle'`||| diff --git a/components/modal/package.json b/components/modal/package.json index 6c9f15de93..74ab3412a8 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/modal", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Modal", "repository": { "type": "git", @@ -22,23 +22,23 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/card": "9.9.0-alpha.6", - "@dhis2-ui/center": "9.9.0-alpha.6", - "@dhis2-ui/layer": "9.9.0-alpha.6", - "@dhis2-ui/portal": "9.9.0-alpha.6", - "@dhis2/ui-constants": "9.9.0-alpha.6", - "@dhis2/ui-icons": "9.9.0-alpha.6", + "@dhis2-ui/card": "9.11.2", + "@dhis2-ui/center": "9.11.2", + "@dhis2-ui/layer": "9.11.2", + "@dhis2-ui/portal": "9.11.2", + "@dhis2/ui-constants": "9.11.2", + "@dhis2/ui-icons": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/modal/src/modal-actions/modal-actions.e2e.stories.js b/components/modal/src/modal-actions/modal-actions.e2e.stories.js new file mode 100644 index 0000000000..78b7c37ff4 --- /dev/null +++ b/components/modal/src/modal-actions/modal-actions.e2e.stories.js @@ -0,0 +1,5 @@ +import React from 'react' +import { ModalActions } from './modal-actions.js' + +export default { title: 'ModalActions' } +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 deleted file mode 100644 index 13d2e6ef7b..0000000000 --- a/components/modal/src/modal-actions/modal-actions.stories.e2e.js +++ /dev/null @@ -1,7 +0,0 @@ -import { storiesOf } from '@storybook/react' -import React from 'react' -import { ModalActions } from './modal-actions.js' - -storiesOf('ModalActions', module).add('With children', () => ( - I am a child -)) diff --git a/components/modal/src/modal-content/modal-content.e2e.stories.js b/components/modal/src/modal-content/modal-content.e2e.stories.js new file mode 100644 index 0000000000..6338b489e8 --- /dev/null +++ b/components/modal/src/modal-content/modal-content.e2e.stories.js @@ -0,0 +1,5 @@ +import React from 'react' +import { ModalContent } from './modal-content.js' + +export default { title: 'ModalContent' } +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 deleted file mode 100644 index f0fa22ef50..0000000000 --- a/components/modal/src/modal-content/modal-content.stories.e2e.js +++ /dev/null @@ -1,7 +0,0 @@ -import { storiesOf } from '@storybook/react' -import React from 'react' -import { ModalContent } from './modal-content.js' - -storiesOf('ModalContent', module).add('With children', () => ( - I am a child -)) diff --git a/components/modal/src/modal-title/modal-title.e2e.stories.js b/components/modal/src/modal-title/modal-title.e2e.stories.js new file mode 100644 index 0000000000..206dadf579 --- /dev/null +++ b/components/modal/src/modal-title/modal-title.e2e.stories.js @@ -0,0 +1,5 @@ +import React from 'react' +import { ModalTitle } from './modal-title.js' + +export default { title: 'ModalTitle' } +export const WithChildren = () => I am a child diff --git a/components/modal/src/modal-title/modal-title.js b/components/modal/src/modal-title/modal-title.js index 5ac103b05a..95c32c2c1c 100644 --- a/components/modal/src/modal-title/modal-title.js +++ b/components/modal/src/modal-title/modal-title.js @@ -26,6 +26,6 @@ ModalTitle.defaultProps = { } ModalTitle.propTypes = { - children: PropTypes.string, + children: PropTypes.node, dataTest: PropTypes.string, } diff --git a/components/modal/src/modal-title/modal-title.stories.e2e.js b/components/modal/src/modal-title/modal-title.stories.e2e.js deleted file mode 100644 index d62dbb6d07..0000000000 --- a/components/modal/src/modal-title/modal-title.stories.e2e.js +++ /dev/null @@ -1,7 +0,0 @@ -import { storiesOf } from '@storybook/react' -import React from 'react' -import { ModalTitle } from './modal-title.js' - -storiesOf('ModalTitle', module).add('With children', () => ( - I am a child -)) 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 }) => ( + + +
    + ) +} diff --git a/components/select/src/multi-select/multi-select.js b/components/select/src/multi-select/multi-select.js index 00f5c33c94..cbac23fcf7 100644 --- a/components/select/src/multi-select/multi-select.js +++ b/components/select/src/multi-select/multi-select.js @@ -1,6 +1,6 @@ -import { StatusIcon } from '@dhis2-ui/status-icon' import { requiredIf } from '@dhis2/prop-types' import { spacers, sharedPropTypes } from '@dhis2/ui-constants' +import { StatusIcon } from '@dhis2-ui/status-icon' import PropTypes from 'prop-types' import React from 'react' import { Loading as CommonLoading, Select } from '../select/index.js' diff --git a/components/select/src/multi-select/multi-select.stories.js b/components/select/src/multi-select/multi-select.prod.stories.js similarity index 99% rename from components/select/src/multi-select/multi-select.stories.js rename to components/select/src/multi-select/multi-select.prod.stories.js index 132dc1546b..d0cce981db 100644 --- a/components/select/src/multi-select/multi-select.stories.js +++ b/components/select/src/multi-select/multi-select.prod.stories.js @@ -86,7 +86,7 @@ WithOptionsAndASelection.storyName = 'With options and a selection' export const WithOnFocus = WithOptionsTemplate.bind({}) WithOnFocus.args = { onFocus } -WithOnFocus.storyName = 'With onFocus' +WithOnFocus.storyName = 'With on focus' export const WithOnBlur = WithOptionsTemplate.bind({}) WithOnBlur.args = { onBlur } @@ -133,7 +133,7 @@ WithInvalidFilterableOptions.args = { export const WithInitialFocus = EmptyTemplate.bind({}) WithInitialFocus.args = { initialFocus: true } WithInitialFocus.parameters = { docs: { disable: true } } -WithInitialFocus.storyName = 'With initialFocus' +WithInitialFocus.storyName = 'With initial focus' export const Dense = WithOptionsTemplate.bind({}) Dense.args = { dense: true, placeholder: 'Dense sized multi select' } diff --git a/components/select/src/multi-select/multi-select.stories.e2e.js b/components/select/src/multi-select/multi-select.stories.e2e.js deleted file mode 100644 index 7d820c6de7..0000000000 --- a/components/select/src/multi-select/multi-select.stories.e2e.js +++ /dev/null @@ -1,416 +0,0 @@ -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' -import { MultiSelect } from './multi-select.js' - -window.onChange = window.Cypress && window.Cypress.cy.stub() -window.onFocus = window.Cypress && window.Cypress.cy.stub() -window.onBlur = window.Cypress && window.Cypress.cy.stub() - -const CustomMultiSelectOption = ({ label, onClick }) => ( -
    onClick({}, e)}>{label}
    -) - -CustomMultiSelectOption.propTypes = { - label: PropTypes.string, - onClick: PropTypes.func, -} - -const options = [ - { name: 'Hello', id: '1' }, - { name: 'world', id: '2' }, - { name: 'foo', id: '3' }, - { 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', () => ( - - - - - - - - - - - - - - - )) - .add('With more than three options and a 100px max-height', () => ( - - - - - - - - - - - - - - - )) - .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 }) => ( - - ))} - -
    - {toggle && ( -
    - Stuff -
    - )} -
    - -     -     -
    - ) - }) diff --git a/components/select/src/select/filter-input.js b/components/select/src/select/filter-input.js index bdcf566848..4dc282a884 100644 --- a/components/select/src/select/filter-input.js +++ b/components/select/src/select/filter-input.js @@ -1,5 +1,5 @@ -import { Input } from '@dhis2-ui/input' import { spacers, colors } from '@dhis2/ui-constants' +import { Input } from '@dhis2-ui/input' import PropTypes from 'prop-types' import React from 'react' diff --git a/components/select/src/select/input-clear-button.js b/components/select/src/select/input-clear-button.js index ceef7d656c..1d13a7411c 100644 --- a/components/select/src/select/input-clear-button.js +++ b/components/select/src/select/input-clear-button.js @@ -1,5 +1,5 @@ -import { Tooltip } from '@dhis2-ui/tooltip' import { colors, theme } from '@dhis2/ui-constants' +import { Tooltip } from '@dhis2-ui/tooltip' import PropTypes from 'prop-types' import React from 'react' diff --git a/components/select/src/select/loading.js b/components/select/src/select/loading.js index 7d5b3f4208..f7f2c683af 100644 --- a/components/select/src/select/loading.js +++ b/components/select/src/select/loading.js @@ -1,5 +1,5 @@ -import { CircularLoader } from '@dhis2-ui/loader' import { colors, spacers, theme } from '@dhis2/ui-constants' +import { CircularLoader } from '@dhis2-ui/loader' import cx from 'classnames' import PropTypes from 'prop-types' import React from 'react' diff --git a/components/select/src/select/menu-wrapper.js b/components/select/src/select/menu-wrapper.js index 15b575e74d..2411652dfc 100644 --- a/components/select/src/select/menu-wrapper.js +++ b/components/select/src/select/menu-wrapper.js @@ -1,6 +1,6 @@ +import { colors, elevations } from '@dhis2/ui-constants' import { Layer } from '@dhis2-ui/layer' import { Popper } from '@dhis2-ui/popper' -import { colors, elevations } from '@dhis2/ui-constants' import PropTypes from 'prop-types' import React from 'react' diff --git a/components/select/src/single-select-field/single-select-field.e2e.stories.js b/components/select/src/single-select-field/single-select-field.e2e.stories.js new file mode 100644 index 0000000000..c9f76263b4 --- /dev/null +++ b/components/select/src/single-select-field/single-select-field.e2e.stories.js @@ -0,0 +1,45 @@ +import React from 'react' +import { SingleSelectOption } from '../index.js' +import { SingleSelectField } from './index.js' + +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-field/single-select-field.js b/components/select/src/single-select-field/single-select-field.js index 2a893634e6..662fd076fc 100644 --- a/components/select/src/single-select-field/single-select-field.js +++ b/components/select/src/single-select-field/single-select-field.js @@ -1,10 +1,10 @@ +import { sharedPropTypes } from '@dhis2/ui-constants' import { Box } from '@dhis2-ui/box' import { Field } from '@dhis2-ui/field' -import { sharedPropTypes } from '@dhis2/ui-constants' import PropTypes from 'prop-types' import React from 'react' -import { SingleSelect } from '../index.js' import i18n from '../locales/index.js' +import { SingleSelect } from '../single-select/index.js' // TODO: translate const translate = (prop, interpolationObject) => { diff --git a/components/select/src/single-select-field/single-select-field.stories.js b/components/select/src/single-select-field/single-select-field.prod.stories.js similarity index 100% rename from components/select/src/single-select-field/single-select-field.stories.js rename to components/select/src/single-select-field/single-select-field.prod.stories.js 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 deleted file mode 100644 index 88f759a282..0000000000 --- a/components/select/src/single-select-field/single-select-field.stories.e2e.js +++ /dev/null @@ -1,46 +0,0 @@ -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', () => ) diff --git a/components/select/src/single-select/features/accepts_blur_cb/index.js b/components/select/src/single-select/features/accepts_blur_cb/index.js index 2ca5893467..e28a867526 100644 --- a/components/select/src/single-select/features/accepts_blur_cb/index.js +++ b/components/select/src/single-select/features/accepts_blur_cb/index.js @@ -1,7 +1,7 @@ import { Given, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a SingleSelect with onBlur handler is rendered', () => { - cy.visitStory('SingleSelect', 'With onBlur') + cy.visitStory('SingleSelect', 'With on blur') }) Then('the onBlur handler is called', () => { diff --git a/components/select/src/single-select/features/accepts_focus_cb/index.js b/components/select/src/single-select/features/accepts_focus_cb/index.js index 26bb90081e..a8eb7ebc48 100644 --- a/components/select/src/single-select/features/accepts_focus_cb/index.js +++ b/components/select/src/single-select/features/accepts_focus_cb/index.js @@ -1,7 +1,7 @@ import { Given, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a SingleSelect with onFocus handler is rendered', () => { - cy.visitStory('SingleSelect', 'With onFocus') + cy.visitStory('SingleSelect', 'With on focus') }) Then('the onFocus handler is called', () => { diff --git a/components/select/src/single-select/features/accepts_initial_focus/index.js b/components/select/src/single-select/features/accepts_initial_focus/index.js index 26dbf28b74..e2e6a3f375 100644 --- a/components/select/src/single-select/features/accepts_initial_focus/index.js +++ b/components/select/src/single-select/features/accepts_initial_focus/index.js @@ -1,5 +1,5 @@ import { Given } from '@badeball/cypress-cucumber-preprocessor' Given('a SingleSelect with initial focus is rendered', () => { - cy.visitStory('SingleSelect', 'With initialFocus') + cy.visitStory('SingleSelect', 'With initial focus') }) diff --git a/components/select/src/single-select/features/accepts_max_height/index.js b/components/select/src/single-select/features/accepts_max_height/index.js index 6f5f9cbb12..8ab1d4e7bf 100644 --- a/components/select/src/single-select/features/accepts_max_height/index.js +++ b/components/select/src/single-select/features/accepts_max_height/index.js @@ -9,7 +9,7 @@ Given( () => { cy.visitStory( 'SingleSelect', - 'With more than three options and a 100px max-height' + 'With more than three options and a 100 px max-height' ) } ) diff --git a/components/select/src/single-select/features/allows_selecting/index.js b/components/select/src/single-select/features/allows_selecting/index.js index d0f2ec1645..eee0ed8434 100644 --- a/components/select/src/single-select/features/allows_selecting/index.js +++ b/components/select/src/single-select/features/allows_selecting/index.js @@ -3,14 +3,14 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given( 'a SingleSelect with a disabled option and onChange handler is rendered', () => { - cy.visitStory('SingleSelect', 'With disabled option and onChange') + cy.visitStory('SingleSelect', 'With disabled option and on change') } ) Given( 'a SingleSelect with custom options and onChange handler is rendered', () => { - cy.visitStory('SingleSelect', 'With custom options and onChange') + cy.visitStory('SingleSelect', 'With custom options and on change') } ) diff --git a/components/select/src/single-select/features/can_be_cleared/index.js b/components/select/src/single-select/features/can_be_cleared/index.js index d38558e981..dbd33fdf50 100644 --- a/components/select/src/single-select/features/can_be_cleared/index.js +++ b/components/select/src/single-select/features/can_be_cleared/index.js @@ -5,7 +5,7 @@ Given( () => { cy.visitStory( 'SingleSelect', - 'With clear button, selection and onChange' + 'With clear button, selection and on change' ) } ) diff --git a/components/select/src/single-select/features/common/index.js b/components/select/src/single-select/features/common/index.js index f8f0ed7c7a..0953054d4c 100644 --- a/components/select/src/single-select/features/common/index.js +++ b/components/select/src/single-select/features/common/index.js @@ -1,13 +1,13 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a SingleSelect with options and onChange handler is rendered', () => { - cy.visitStory('SingleSelect', 'With options and onChange') + cy.visitStory('SingleSelect', 'With options and on change') }) Given( 'a SingleSelect with options, a selection and onChange handler is rendered', () => { - cy.visitStory('SingleSelect', 'With options, a selection and onChange') + cy.visitStory('SingleSelect', 'With options, a selection and on change') } ) diff --git a/components/select/src/single-select/features/menu_width_matches_input/index.js b/components/select/src/single-select/features/menu_width_matches_input/index.js index 9fa7b0a2e9..67e3002cb7 100644 --- a/components/select/src/single-select/features/menu_width_matches_input/index.js +++ b/components/select/src/single-select/features/menu_width_matches_input/index.js @@ -7,7 +7,7 @@ Given('a SingleSelect with hidden sibling elements', () => { }) }) When('the button is clicked', () => { - cy.get('button').click() + cy.get('button:contains("Toggle")').click() }) Then('the siblings are displayed', () => { cy.get('.toggler').should('exist').and('have.length', 2) diff --git a/components/select/src/single-select/features/position/index.js b/components/select/src/single-select/features/position/index.js index 6273ad78d1..337a5d88b0 100644 --- a/components/select/src/single-select/features/position/index.js +++ b/components/select/src/single-select/features/position/index.js @@ -47,7 +47,7 @@ Then('the top of the menu is aligned with the bottom of the input', () => { const selectRect = $select.getBoundingClientRect() const menuRect = $menu.getBoundingClientRect() - expect(menuRect.top).to.equal(selectRect.bottom) + expect(menuRect.top).to.be.closeTo(selectRect.bottom, 1) }) }) @@ -65,7 +65,7 @@ Then('the bottom of the menu is aligned with the top of the input', () => { const selectRect = $select.getBoundingClientRect() const menuRect = $menu.getBoundingClientRect() - expect(selectRect.top).to.equal(menuRect.bottom) + expect(selectRect.top).to.be.closeTo(menuRect.bottom, 1) }) }) @@ -105,7 +105,7 @@ Then( const selectRect = $select.getBoundingClientRect() const menuRect = $menu.getBoundingClientRect() - expect(selectRect.left).to.equal(menuRect.left) + expect(selectRect.left).to.be.closeTo(menuRect.left, 1) }) } ) diff --git a/components/select/src/single-select/single-select.e2e.stories.js b/components/select/src/single-select/single-select.e2e.stories.js new file mode 100644 index 0000000000..b0b775d357 --- /dev/null +++ b/components/select/src/single-select/single-select.e2e.stories.js @@ -0,0 +1,376 @@ +import { Button } from '@dhis2-ui/button' +import { Modal, ModalTitle, ModalContent } from '@dhis2-ui/modal' +import PropTypes from 'prop-types' +import React, { useState } from 'react' +import { SingleSelectOption } from '../index.js' +import { SingleSelect } from './index.js' + +window.onChange = window.Cypress && window.Cypress.cy.stub() +window.onFocus = window.Cypress && window.Cypress.cy.stub() +window.onBlur = window.Cypress && window.Cypress.cy.stub() + +const CustomSingleSelectOption = ({ label, onClick }) => ( +
    onClick({}, e)}>{label}
    +) + +CustomSingleSelectOption.propTypes = { + label: PropTypes.string, + onClick: PropTypes.func, +} + +const options = [ + { name: 'Hello', id: '1' }, + { name: 'world', id: '2' }, + { name: 'foo', id: '3' }, + { name: 'bar', id: '4' }, +] + +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 = () => ( + <> + + + + + + + + + + + + + + + + +) +export const FlippedPosition = () => ( + <> + + + + + + + + + + + + + + + + +) +export const ShiftedIntoView = () => ( + <> + + + + + + + + + + + + + + + + +) +export const WithDuplicateSelectedOptionValues = () => ( + + + + + + +) +export const MenuWidthChanging = () => { + const [toggle, setToggle] = useState(false) + return ( +
    + + Modal + +
    + {toggle && ( +
    + Stuff +
    + )} +
    + + console.log('size changed to ' + selected) + } + > + {options.map(({ name, id }) => ( + + ))} + +
    + {toggle && ( +
    + Stuff +
    + )} +
    + +     +     +
    + ) +} diff --git a/components/select/src/single-select/single-select.js b/components/select/src/single-select/single-select.js index 3e87a7351a..8ce8f279aa 100644 --- a/components/select/src/single-select/single-select.js +++ b/components/select/src/single-select/single-select.js @@ -1,6 +1,6 @@ -import { StatusIcon } from '@dhis2-ui/status-icon' import { requiredIf } from '@dhis2/prop-types' import { spacers, sharedPropTypes } from '@dhis2/ui-constants' +import { StatusIcon } from '@dhis2-ui/status-icon' import PropTypes from 'prop-types' import React from 'react' import { Loading as CommonLoading, Select } from '../select/index.js' diff --git a/components/select/src/single-select/single-select.stories.js b/components/select/src/single-select/single-select.prod.stories.js similarity index 99% rename from components/select/src/single-select/single-select.stories.js rename to components/select/src/single-select/single-select.prod.stories.js index b30eec2326..b0ebcec064 100644 --- a/components/select/src/single-select/single-select.stories.js +++ b/components/select/src/single-select/single-select.prod.stories.js @@ -84,7 +84,7 @@ WithOptionsAndASelection.storyName = 'With options and a selection' export const WithOnFocus = WithOptionsTemplate.bind({}) WithOnFocus.args = { onFocus } -WithOnFocus.storyName = 'With onFocus' +WithOnFocus.storyName = 'With on focus' export const WithOnBlur = WithOptionsTemplate.bind({}) WithOnBlur.args = { onBlur } @@ -131,7 +131,6 @@ WithInvalidFilterableOptions.args = { export const WithInitialFocus = EmptyTemplate.bind({}) WithInitialFocus.args = { initialFocus: true } WithInitialFocus.parameters = { docs: { disable: true } } -WithInitialFocus.storyName = 'With initialFocus' export const Dense = WithOptionsTemplate.bind({}) Dense.args = { dense: true, placeholder: 'Dense sized select' } diff --git a/components/select/src/single-select/single-select.stories.e2e.js b/components/select/src/single-select/single-select.stories.e2e.js deleted file mode 100644 index 23f4e71027..0000000000 --- a/components/select/src/single-select/single-select.stories.e2e.js +++ /dev/null @@ -1,389 +0,0 @@ -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' -import { SingleSelect } from './index.js' - -window.onChange = window.Cypress && window.Cypress.cy.stub() -window.onFocus = window.Cypress && window.Cypress.cy.stub() -window.onBlur = window.Cypress && window.Cypress.cy.stub() - -const CustomSingleSelectOption = ({ label, onClick }) => ( -
    onClick({}, e)}>{label}
    -) - -CustomSingleSelectOption.propTypes = { - label: PropTypes.string, - onClick: PropTypes.func, -} - -const options = [ - { name: 'Hello', id: '1' }, - { name: 'world', id: '2' }, - { name: 'foo', id: '3' }, - { 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', () => ( - - - - - - - - - - - - - - - )) - .add('With more than three options and a 100px max-height', () => ( - - - - - - - - - - - - - - - )) - .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 }) => ( - - ))} - -
    - {toggle && ( -
    - Stuff -
    - )} -
    - -     -     -
    - ) - }) diff --git a/components/selector-bar/API.md b/components/selector-bar/API.md index 8a8ba2bc5a..a343bd22e5 100644 --- a/components/selector-bar/API.md +++ b/components/selector-bar/API.md @@ -16,6 +16,7 @@ import { SelectorBar } from '@dhis2/ui' |---|---|---|---|---| |children|any||*|| |additionalContent|any|||| +|ariaLabel|string|||| |className|string|||| |dataTest|string|`'dhis2-ui-selectorbar'`||| |disableClearSelections|boolean|||| diff --git a/components/selector-bar/i18n/es_419.po b/components/selector-bar/i18n/es_419.po new file mode 100644 index 0000000000..255ad52ba8 --- /dev/null +++ b/components/selector-bar/i18n/es_419.po @@ -0,0 +1,19 @@ +# +# Translators: +# Enzo Nicolas Rossi , 2024 +# +msgid "" +msgstr "" +"Project-Id-Version: i18next-conv\n" +"POT-Creation-Date: 2021-12-07T14:09:16.792Z\n" +"PO-Revision-Date: 2023-06-08 13:23+0000\n" +"Last-Translator: Enzo Nicolas Rossi , 2024\n" +"Language-Team: Spanish (Latin America) (https://app.transifex.com/hisp-uio/teams/100509/es_419/)\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: 8bit\n" +"Language: es_419\n" +"Plural-Forms: nplurals=3; plural=n == 1 ? 0 : n != 0 && n % 1000000 == 0 ? 1 : 2;\n" + +msgid "Clear selections" +msgstr "Borrar selecciones" diff --git a/components/selector-bar/i18n/ru.po b/components/selector-bar/i18n/ru.po new file mode 100644 index 0000000000..af0d7d82b4 --- /dev/null +++ b/components/selector-bar/i18n/ru.po @@ -0,0 +1,19 @@ +# +# Translators: +# Yury Rogachev , 2024 +# +msgid "" +msgstr "" +"Project-Id-Version: i18next-conv\n" +"POT-Creation-Date: 2021-12-07T14:09:16.792Z\n" +"PO-Revision-Date: 2023-06-08 13:23+0000\n" +"Last-Translator: Yury Rogachev , 2024\n" +"Language-Team: Russian (https://app.transifex.com/hisp-uio/teams/100509/ru/)\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: 8bit\n" +"Language: ru\n" +"Plural-Forms: nplurals=4; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<12 || n%100>14) ? 1 : n%10==0 || (n%10>=5 && n%10<=9) || (n%100>=11 && n%100<=14)? 2 : 3);\n" + +msgid "Clear selections" +msgstr "Очистить выбор" diff --git a/components/selector-bar/package.json b/components/selector-bar/package.json index dd15d83019..12902775ea 100644 --- a/components/selector-bar/package.json +++ b/components/selector-bar/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/selector-bar", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Select", "repository": { "type": "git", @@ -22,32 +22,32 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { "@dhis2/d2-i18n": "^1", - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { - "@dhis2-ui/button": "9.9.0-alpha.6", - "@dhis2-ui/card": "9.9.0-alpha.6", - "@dhis2-ui/popper": "9.9.0-alpha.6", - "@dhis2-ui/layer": "9.9.0-alpha.6", - "@dhis2/ui-constants": "9.9.0-alpha.6", - "@dhis2/ui-icons": "9.9.0-alpha.6", + "@dhis2-ui/button": "9.11.2", + "@dhis2-ui/card": "9.11.2", + "@dhis2-ui/popper": "9.11.2", + "@dhis2-ui/layer": "9.11.2", + "@dhis2/ui-constants": "9.11.2", + "@dhis2/ui-icons": "9.11.2", "@testing-library/react": "^12.1.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, "devDependencies": { - "@dhis2-ui/css": "9.9.0-alpha.6", - "@dhis2-ui/menu": "9.9.0-alpha.6", - "@dhis2-ui/organisation-unit-tree": "9.9.0-alpha.6", - "@dhis2-ui/select": "9.9.0-alpha.6", + "@dhis2-ui/css": "9.11.2", + "@dhis2-ui/menu": "9.11.2", + "@dhis2-ui/organisation-unit-tree": "9.11.2", + "@dhis2-ui/select": "9.11.2", "@dhis2/d2-i18n": "^1.1.0", "@testing-library/jest-dom": "^5.16.1", "react": "16.13", diff --git a/components/selector-bar/src/selector-bar-item/selector-bar-item.stories.e2e.js b/components/selector-bar/src/selector-bar-item/selector-bar-item.e2e.stories.js similarity index 100% rename from components/selector-bar/src/selector-bar-item/selector-bar-item.stories.e2e.js rename to components/selector-bar/src/selector-bar-item/selector-bar-item.e2e.stories.js diff --git a/components/selector-bar/src/selector-bar-item/selector-bar-item.js b/components/selector-bar/src/selector-bar-item/selector-bar-item.js index 16b8a6ce48..2e4cb91fe1 100644 --- a/components/selector-bar/src/selector-bar-item/selector-bar-item.js +++ b/components/selector-bar/src/selector-bar-item/selector-bar-item.js @@ -1,8 +1,8 @@ +import { colors, spacers } from '@dhis2/ui-constants' +import { IconChevronUp24, IconChevronDown24 } from '@dhis2/ui-icons' import { Card } from '@dhis2-ui/card' import { Layer } from '@dhis2-ui/layer' import { Popper } from '@dhis2-ui/popper' -import { colors, spacers } from '@dhis2/ui-constants' -import { IconChevronUp24, IconChevronDown24 } from '@dhis2/ui-icons' import cx from 'classnames' import PropTypes from 'prop-types' import React, { useRef } from 'react' diff --git a/components/selector-bar/src/selector-bar/__stories__/common.js b/components/selector-bar/src/selector-bar/__stories__/common.js index 235720dc80..e31a863bf0 100644 --- a/components/selector-bar/src/selector-bar/__stories__/common.js +++ b/components/selector-bar/src/selector-bar/__stories__/common.js @@ -1,7 +1,7 @@ -import { Menu, MenuItem } from '@dhis2-ui/menu' -import { OrganisationUnitTree } from '@dhis2-ui/organisation-unit-tree' import { CustomDataProvider } from '@dhis2/app-runtime' import { colors } from '@dhis2/ui-constants' +import { Menu, MenuItem } from '@dhis2-ui/menu' +import { OrganisationUnitTree } from '@dhis2-ui/organisation-unit-tree' import React, { useState } from 'react' export const decoratorCommonStyles = (fn) => ( diff --git a/components/selector-bar/src/selector-bar/selector-bar.js b/components/selector-bar/src/selector-bar/selector-bar.js index 3e0263c5c1..495dafc0a2 100644 --- a/components/selector-bar/src/selector-bar/selector-bar.js +++ b/components/selector-bar/src/selector-bar/selector-bar.js @@ -1,8 +1,8 @@ -import { Button } from '@dhis2-ui/button' import { colors, spacers } from '@dhis2/ui-constants' +import { Button } from '@dhis2-ui/button' import cx from 'classnames' import PropTypes from 'prop-types' -import React from 'react' +import React, { useRef, useState, useEffect } from 'react' import i18n from '../locales/index.js' const ClearSelection = ({ disabled, onClick }) => { @@ -36,61 +36,129 @@ export const SelectorBar = ({ dataTest, disableClearSelections, additionalContent, -}) => ( - <> -
    -
    - {children} - {onClearSelectionClick && ( - + ariaLabel, +}) => { + 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 (container.current && container.current === currentFocus) { + if (childrenToFocus.length > 0 && childrenToFocus[0]) { + childrenToFocus[0].focus() + } + return + } + if (!childrenToFocus.length) { + return + } + + const currentIndex = childrenToFocus.findIndex( + (element) => element === currentFocus + ) + + if (currentIndex === -1) { + return + } + + if (event.key === 'ArrowRight') { + event.preventDefault() + const nextIndex = (currentIndex + 1) % childrenToFocus.length + childrenToFocus[nextIndex].focus() + } + + if (event.key === 'ArrowLeft') { + event.preventDefault() + const prevIndex = + (currentIndex - 1 + childrenToFocus.length) % + childrenToFocus.length + childrenToFocus[prevIndex].focus() + } + } + + return ( + <> +
    + data-test={dataTest} + onKeyDown={handleKeyDown} + tabIndex={0} + ref={container} + role="toolbar" + aria-label={ariaLabel} + > +
    + {/* {React.Children.map(children, (child, index) => + React.cloneElement(child, { + ref: childrenRefs[index], + }) + )} */} + {children} + {onClearSelectionClick && ( + + )} +
    - {additionalContent && ( -
    {additionalContent}
    - )} + {additionalContent && ( +
    + {additionalContent} +
    + )} - -
    - -) + `} +
    + + ) +} SelectorBar.defaultProps = { dataTest: 'dhis2-ui-selectorbar', @@ -99,6 +167,7 @@ SelectorBar.defaultProps = { SelectorBar.propTypes = { children: PropTypes.any.isRequired, additionalContent: PropTypes.any, + ariaLabel: PropTypes.string, className: PropTypes.string, dataTest: PropTypes.string, disableClearSelections: PropTypes.bool, diff --git a/components/selector-bar/src/selector-bar/selector-bar.stories.js b/components/selector-bar/src/selector-bar/selector-bar.prod.stories.js similarity index 100% rename from components/selector-bar/src/selector-bar/selector-bar.stories.js rename to components/selector-bar/src/selector-bar/selector-bar.prod.stories.js diff --git a/components/sharing-dialog/API.md b/components/sharing-dialog/API.md index cf45f35f53..c598050621 100644 --- a/components/sharing-dialog/API.md +++ b/components/sharing-dialog/API.md @@ -15,47 +15,15 @@ import { SharingDialog } from '@dhis2/ui' |Name|Type|Default|Required|Description| |---|---|---|---|---| |id|string||*|The id of the object to share| -|type|import { - ACCESS_NONE, - ACCESS_VIEW_ONLY, - ACCESS_VIEW_AND_EDIT, - VISUALIZATION, - DASHBOARD, - EVENT_VISUALIZATION, - INTERPRETATION, -} from './constants.js' │ import { - ACCESS_NONE, - ACCESS_VIEW_ONLY, - ACCESS_VIEW_AND_EDIT, - VISUALIZATION, - DASHBOARD, - EVENT_VISUALIZATION, - INTERPRETATION, -} from './constants.js' │ import { - ACCESS_NONE, - ACCESS_VIEW_ONLY, - ACCESS_VIEW_AND_EDIT, - VISUALIZATION, - DASHBOARD, - EVENT_VISUALIZATION, - INTERPRETATION, -} from './constants.js' │ import { - ACCESS_NONE, - ACCESS_VIEW_ONLY, - ACCESS_VIEW_AND_EDIT, - VISUALIZATION, - DASHBOARD, - EVENT_VISUALIZATION, - INTERPRETATION, -} from './constants.js'||*|The type of object to share| +|type|DIALOG_TYPES_LIST||*|The type of object to share| |dataTest|string|`'dhis2-uicore-sharingdialog'`||| -|initialSharingSettings|{
    "allowPublic": "boolean",
    "groups": "objectOf",
    "name": "string",
    "public": "import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js'",
    "users": "objectOf"
    }|`{ +|initialSharingSettings|{
    "allowPublic": "boolean",
    "groups": "objectOf",
    "name": "string",
    "public": "import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n DIALOG_TYPES_LIST,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n DIALOG_TYPES_LIST,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n DIALOG_TYPES_LIST,\n} from './constants.js'",
    "users": "objectOf"
    }|`{ name: '', allowPublic: true, public: ACCESS_NONE, groups: {}, users: {}, -}`||| +}`||Used to seed the component with data to show whilst loading| |onClose|function|`() => {}`||| |onError|function|`() => {}`||| |onSave|function|`() => {}`||| diff --git a/components/sharing-dialog/i18n/es_419.po b/components/sharing-dialog/i18n/es_419.po index 75857b1e23..bfa6020cda 100644 --- a/components/sharing-dialog/i18n/es_419.po +++ b/components/sharing-dialog/i18n/es_419.po @@ -1,14 +1,15 @@ # # Translators: # Jaime Bosque , 2022 +# Enzo Nicolas Rossi , 2024 # msgid "" msgstr "" "Project-Id-Version: i18next-conv\n" "POT-Creation-Date: 2021-11-25T09:59:40.995Z\n" "PO-Revision-Date: 2021-10-01 23:39+0000\n" -"Last-Translator: Jaime Bosque , 2022\n" -"Language-Team: Spanish (Latin America) (https://www.transifex.com/hisp-uio/teams/100509/es_419/)\n" +"Last-Translator: Enzo Nicolas Rossi , 2024\n" +"Language-Team: Spanish (Latin America) (https://app.transifex.com/hisp-uio/teams/100509/es_419/)\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" @@ -16,124 +17,153 @@ msgstr "" "Plural-Forms: nplurals=3; plural=n == 1 ? 0 : n != 0 && n % 1000000 == 0 ? 1 : 2;\n" msgid "View only" -msgstr "" +msgstr "Ver sólo" msgid "View and edit" -msgstr "" +msgstr "Ver y editar" msgid "Give access to a user or group" -msgstr "" +msgstr "Dar acceso a un usuario o grupo" msgid "Access level" -msgstr "" +msgstr "Nivel de acceso" msgid "Select a level" -msgstr "" +msgstr "Seleccione un nivel" msgid "Not available offline" -msgstr "" +msgstr "No disponible sin conexión" msgid "Give access" -msgstr "" +msgstr "Dar acceso" msgid "Users and groups that currently have access" -msgstr "" +msgstr "Usuarios y grupos que tienen acceso actualmente" msgid "User / Group" -msgstr "" +msgstr "Usuario / Grupo" msgid "All users" -msgstr "" +msgstr "Todos los usuarios" msgid "No access" -msgstr "" +msgstr "Sin acceso" msgid "Can view" -msgstr "" +msgstr "Puede ver" msgid "Can view and edit" -msgstr "" +msgstr "Puede ver y editar" msgid "Metadata" msgstr "Metadatos" msgid "Remove access" -msgstr "" +msgstr "Eliminar el acceso" msgid "User or group" -msgstr "" +msgstr "Usuario o grupo" msgid "Search" msgstr "Buscar" msgid "Apply dashboard sharing settings to visualizations" msgstr "" +"Aplicar la configuración de uso compartido del cuadro de mandos a las " +"visualizaciones" msgid "Something went wrong" msgstr "Algo ha ido mal" msgid "Apply sharing to dashboard visualizations" -msgstr "" +msgstr "Aplicar la compartición a las visualizaciones de cuadros de mando" msgid "" "No visualizations were updated. Check that you have permission to change " "sharing for all visualizations." msgstr "" +"No se ha actualizado ninguna visualización. Compruebe que tiene permiso para" +" cambiar el uso compartido de todas las visualizaciones." msgid "" "Not all visualizations could be updated successfully. {{ success }} updated " "successfully, {{ failed }} failed to update. Check that you have permission " "to change sharing for all visualizations." msgstr "" +"No se han podido actualizar correctamente todas las visualizaciones. {{ " +"success }} se ha actualizado correctamente, {{ failed }} no se ha podido " +"actualizar. Compruebe que tiene permiso para cambiar la compartición de " +"todas las visualizaciones." msgid "" "No visualizations were updated because sharing settings are already " "sufficient." msgstr "" +"No se ha actualizado ninguna visualización porque los ajustes de " +"compartición ya son suficientes." msgid "Successfully updated sharing for all visualizations." -msgstr "" +msgstr "Actualizada con éxito la compartición de todas las visualizaciones." msgid "" "Not all visualization sharing settings needed to be updated. {{ updated }} " "updated, {{ skipped }} already had sufficient sharing settings." msgstr "" +"No era necesario actualizar todos los ajustes de compartición de " +"visualizaciones. {{ updated }} actualizado, {{ skipped }} ya tenía " +"suficientes ajustes de compartición." msgid "There are no users or groups to apply sharing settings for." msgstr "" +"No hay usuarios ni grupos a los que aplicar la configuración de uso " +"compartido." msgid "" "Number of visualizations on this dashboard that will potentially get updated" " sharing settings: {{ visualizationsCount }}. The number of users or groups " "that these updated settings will apply to: {{ entityAmount }}." msgstr "" +"Número de visualizaciones en este cuadro de mando que potencialmente " +"obtendrán ajustes de uso compartido actualizados: {{ visualizationsCount }}." +" Número de usuarios o grupos a los que se aplicarán estos ajustes " +"actualizados: {{ entityAmount }}." msgid "" "Applying the same sharing settings makes sure that users and groups that " "have access to the dashboard also have at least \"View only\" access to its " "visualizations (charts, tables, maps, event charts and event reports)." msgstr "" +"Aplicando la misma configuración de compartición se garantiza que los " +"usuarios y grupos que tienen acceso al cuadro de mando también tienen al " +"menos acceso de \"sólo visualización\" a sus visualizaciones (gráficos, " +"tablas, mapas, gráficos de eventos e informes de eventos)." msgid "" "If a user or group already has \"View and edit\" access to a visualization, " "this won't be reduced to \"View only\". The \"All users\" access level won't" " be updated or changed." msgstr "" +"Si un usuario o grupo ya tiene acceso \"Ver y editar\" a una visualización, " +"éste no se reducirá a \"Sólo ver\". El nivel de acceso \"Todos los " +"usuarios\" no se actualizará ni cambiará." msgid "" "Applying sharing can't be undone, and needs to be done again if new " "visualizations are added to the dashboard or its sharing settings are " "changed." msgstr "" +"La aplicación de la compartición no puede deshacerse, y debe hacerse de " +"nuevo si se añaden nuevas visualizaciones al cuadro de mandos o se cambia su" +" configuración de compartición." msgid "Sharing and access: {{- objectName}}" -msgstr "" +msgstr "Compartir y acceder: {{- objectName}}" msgid "Sharing and access" -msgstr "" +msgstr "Compartir y acceder" msgid "Close" msgstr "Cerrar" msgid "Dashboard sharing" -msgstr "" +msgstr "Compartir el cuadro de mandos" diff --git a/components/sharing-dialog/i18n/ru.po b/components/sharing-dialog/i18n/ru.po index 5c370fd12f..a6fd346e8a 100644 --- a/components/sharing-dialog/i18n/ru.po +++ b/components/sharing-dialog/i18n/ru.po @@ -2,15 +2,16 @@ # Translators: # Viktor Varland , 2021 # Ulanbek Abakirov , 2021 -# phil_dhis2, 2021 +# Philip Larsen Donnelly, 2021 +# Yury Rogachev , 2024 # msgid "" msgstr "" "Project-Id-Version: i18next-conv\n" "POT-Creation-Date: 2021-11-25T09:59:40.995Z\n" "PO-Revision-Date: 2021-10-01 23:39+0000\n" -"Last-Translator: phil_dhis2, 2021\n" -"Language-Team: Russian (https://www.transifex.com/hisp-uio/teams/100509/ru/)\n" +"Last-Translator: Yury Rogachev , 2024\n" +"Language-Team: Russian (https://app.transifex.com/hisp-uio/teams/100509/ru/)\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" @@ -18,13 +19,13 @@ msgstr "" "Plural-Forms: nplurals=4; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<12 || n%100>14) ? 1 : n%10==0 || (n%10>=5 && n%10<=9) || (n%100>=11 && n%100<=14)? 2 : 3);\n" msgid "View only" -msgstr "" +msgstr "Только просмотр" msgid "View and edit" -msgstr "" +msgstr "Просмотр и редактирование" msgid "Give access to a user or group" -msgstr "" +msgstr "Предоставить доступ пользователю или группе" msgid "Access level" msgstr "Уровень доступа" @@ -33,109 +34,130 @@ msgid "Select a level" msgstr "Выбрать уровень" msgid "Not available offline" -msgstr "" +msgstr "Недоступно в автономном режиме" msgid "Give access" -msgstr "" +msgstr "Предоставить доступ" msgid "Users and groups that currently have access" -msgstr "" +msgstr "Пользователи и группы с доступом" msgid "User / Group" -msgstr "" +msgstr "Пользователь / Группа" msgid "All users" -msgstr "" +msgstr "Все пользователи" msgid "No access" msgstr "Нет доступа" msgid "Can view" -msgstr "Можно просматривать" +msgstr "Право просмотра" msgid "Can view and edit" -msgstr "" +msgstr "Право просмотра и редактирования" msgid "Metadata" msgstr "Метаданные" msgid "Remove access" -msgstr "" +msgstr "Удалить доступ" msgid "User or group" -msgstr "" +msgstr "Пользователь или группа" msgid "Search" msgstr "Поиск" msgid "Apply dashboard sharing settings to visualizations" -msgstr "" +msgstr "Применить параметры доступа к инфопанели к визуализациям" msgid "Something went wrong" msgstr "Что-то пошло не так" msgid "Apply sharing to dashboard visualizations" -msgstr "" +msgstr "Применить параметры доступа к визуализациям инфопанели" msgid "" "No visualizations were updated. Check that you have permission to change " "sharing for all visualizations." msgstr "" +"Визуализации не были обновлены. Убедитесь, что у вас есть право на изменение" +" параметров доступа ко всем визуализациям." msgid "" "Not all visualizations could be updated successfully. {{ success }} updated " "successfully, {{ failed }} failed to update. Check that you have permission " "to change sharing for all visualizations." msgstr "" +"Не все визуализации были успешно обновлены. Обновлено: {{ success }}, не " +"обновлено: {{ failed }} . Убедитесь, что у вас есть право на изменение " +"общего параметров доступа ко всем визуализациям." msgid "" "No visualizations were updated because sharing settings are already " "sufficient." msgstr "" +"Визуализации не были обновлены, необходимые права доступа уже предоставлены." msgid "Successfully updated sharing for all visualizations." -msgstr "" +msgstr "Доступ ко всем визуализациям успешно обновлен" msgid "" "Not all visualization sharing settings needed to be updated. {{ updated }} " "updated, {{ skipped }} already had sufficient sharing settings." msgstr "" +"Нет необходимости обнавлять все параметры доступа к визуализациям. " +"Обновлено: {{ updated }}, доступ уже предоставлен: {{ skipped }}." msgid "There are no users or groups to apply sharing settings for." -msgstr "" +msgstr "Нет пользователей или групп для применения настроек общего доступа." msgid "" "Number of visualizations on this dashboard that will potentially get updated" " sharing settings: {{ visualizationsCount }}. The number of users or groups " "that these updated settings will apply to: {{ entityAmount }}." msgstr "" +"Количество визуализаций на данной инфопанели, которые потенциально получат " +"обновленные настройки доступа: {{ visualizationsCount }}. Количество " +"пользователей или групп, к которым будут применены обновленные настройки: {{" +" entityAmount }}." msgid "" "Applying the same sharing settings makes sure that users and groups that " "have access to the dashboard also have at least \"View only\" access to its " "visualizations (charts, tables, maps, event charts and event reports)." msgstr "" +"Применение одинаковых параметров доступа гарантирует пользователям и " +"группам, имеющим доступ к инфопанели, доступ (как минимум на просмотр) к ее " +"визуализациям (графикам, таблицам, картам, графикам событий и отчетам)." msgid "" "If a user or group already has \"View and edit\" access to a visualization, " "this won't be reduced to \"View only\". The \"All users\" access level won't" " be updated or changed." msgstr "" +"Если у пользователя или группы уже есть доступ \"Просмотр и редактирование\"" +" к визуализации, он не будет уменьшен до \"Только просмотр\". Уровень " +"доступа \"Все пользователи\" не будет обновлен или изменен." msgid "" "Applying sharing can't be undone, and needs to be done again if new " "visualizations are added to the dashboard or its sharing settings are " "changed." msgstr "" +"Параметров доступа нельзя отменить. Параметры должны устанавливаться заново," +" если на инфопанель добавлены новые визуализации или настройки доступа " +"изменены." msgid "Sharing and access: {{- objectName}}" -msgstr "" +msgstr "Доступ: {{- objectName}}" msgid "Sharing and access" -msgstr "" +msgstr "Совместное использование и доступ" msgid "Close" msgstr "Закрыть" msgid "Dashboard sharing" -msgstr "" +msgstr " Совместное использование инфопанели" diff --git a/components/sharing-dialog/package.json b/components/sharing-dialog/package.json index ae45a1212e..f978c793b9 100644 --- a/components/sharing-dialog/package.json +++ b/components/sharing-dialog/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/sharing-dialog", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI SharingDialog", "repository": { "type": "git", @@ -22,35 +22,35 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { "@dhis2/app-runtime": "^3", "@dhis2/d2-i18n": "^1", - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/box": "9.9.0-alpha.6", - "@dhis2-ui/button": "9.9.0-alpha.6", - "@dhis2-ui/card": "9.9.0-alpha.6", - "@dhis2-ui/divider": "9.9.0-alpha.6", - "@dhis2-ui/input": "9.9.0-alpha.6", - "@dhis2-ui/layer": "9.9.0-alpha.6", - "@dhis2-ui/menu": "9.9.0-alpha.6", - "@dhis2-ui/modal": "9.9.0-alpha.6", - "@dhis2-ui/notice-box": "9.9.0-alpha.6", - "@dhis2-ui/popper": "9.9.0-alpha.6", - "@dhis2-ui/select": "9.9.0-alpha.6", - "@dhis2-ui/tab": "9.9.0-alpha.6", - "@dhis2-ui/tooltip": "9.9.0-alpha.6", - "@dhis2-ui/user-avatar": "9.9.0-alpha.6", - "@dhis2/ui-constants": "9.9.0-alpha.6", - "@dhis2/ui-icons": "9.9.0-alpha.6", + "@dhis2-ui/box": "9.11.2", + "@dhis2-ui/button": "9.11.2", + "@dhis2-ui/card": "9.11.2", + "@dhis2-ui/divider": "9.11.2", + "@dhis2-ui/input": "9.11.2", + "@dhis2-ui/layer": "9.11.2", + "@dhis2-ui/menu": "9.11.2", + "@dhis2-ui/modal": "9.11.2", + "@dhis2-ui/notice-box": "9.11.2", + "@dhis2-ui/popper": "9.11.2", + "@dhis2-ui/select": "9.11.2", + "@dhis2-ui/tab": "9.11.2", + "@dhis2-ui/tooltip": "9.11.2", + "@dhis2-ui/user-avatar": "9.11.2", + "@dhis2/ui-constants": "9.11.2", + "@dhis2/ui-icons": "9.11.2", "@react-hook/size": "^2.1.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" diff --git a/components/sharing-dialog/src/access-add/access-add.js b/components/sharing-dialog/src/access-add/access-add.js index 0ed5df3a07..b1d7f6c4f0 100644 --- a/components/sharing-dialog/src/access-add/access-add.js +++ b/components/sharing-dialog/src/access-add/access-add.js @@ -1,7 +1,7 @@ -import { Button } from '@dhis2-ui/button' -import { SingleSelectField, SingleSelectOption } from '@dhis2-ui/select' import { useDhis2ConnectionStatus } from '@dhis2/app-runtime' import { colors, spacers } from '@dhis2/ui-constants' +import { Button } from '@dhis2-ui/button' +import { SingleSelectField, SingleSelectOption } from '@dhis2-ui/select' import PropTypes from 'prop-types' import React, { useState, useContext } from 'react' import { SharingAutocomplete } from '../autocomplete/index.js' diff --git a/components/sharing-dialog/src/access-list/list-item-icon.js b/components/sharing-dialog/src/access-list/list-item-icon.js index 6834a4945c..e1b2e5ca3e 100644 --- a/components/sharing-dialog/src/access-list/list-item-icon.js +++ b/components/sharing-dialog/src/access-list/list-item-icon.js @@ -1,6 +1,6 @@ -import { UserAvatar } from '@dhis2-ui/user-avatar' import { colors } from '@dhis2/ui-constants' import { IconWorld24, IconUserGroup24 } from '@dhis2/ui-icons' +import { UserAvatar } from '@dhis2-ui/user-avatar' import PropTypes from 'prop-types' import React from 'react' import { diff --git a/components/sharing-dialog/src/access-list/list-item.js b/components/sharing-dialog/src/access-list/list-item.js index 2848f167c8..207824b1a4 100644 --- a/components/sharing-dialog/src/access-list/list-item.js +++ b/components/sharing-dialog/src/access-list/list-item.js @@ -1,7 +1,7 @@ -import { Divider } from '@dhis2-ui/divider' -import { SingleSelectField, SingleSelectOption } from '@dhis2-ui/select' import { useDhis2ConnectionStatus } from '@dhis2/app-runtime' import { colors } from '@dhis2/ui-constants' +import { Divider } from '@dhis2-ui/divider' +import { SingleSelectField, SingleSelectOption } from '@dhis2-ui/select' import PropTypes from 'prop-types' import React, { useContext } from 'react' import { diff --git a/components/sharing-dialog/src/autocomplete/autocomplete.js b/components/sharing-dialog/src/autocomplete/autocomplete.js index d0e75a7836..265385df29 100644 --- a/components/sharing-dialog/src/autocomplete/autocomplete.js +++ b/components/sharing-dialog/src/autocomplete/autocomplete.js @@ -1,6 +1,6 @@ +import { useDhis2ConnectionStatus } from '@dhis2/app-runtime' import { InputField } from '@dhis2-ui/input' import { Menu, MenuItem } from '@dhis2-ui/menu' -import { useDhis2ConnectionStatus } from '@dhis2/app-runtime' import useSize from '@react-hook/size' import PropTypes from 'prop-types' import React, { useRef } from 'react' diff --git a/components/sharing-dialog/src/autocomplete/sharing-autocomplete.test.js b/components/sharing-dialog/src/autocomplete/sharing-autocomplete.test.js index 620dde8a37..a224f48110 100644 --- a/components/sharing-dialog/src/autocomplete/sharing-autocomplete.test.js +++ b/components/sharing-dialog/src/autocomplete/sharing-autocomplete.test.js @@ -1,5 +1,10 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { render, screen, waitFor } from '@testing-library/react' +import { + render, + screen, + waitFor, + waitForElementToBeRemoved, +} from '@testing-library/react' import userEvent from '@testing-library/user-event' import '@testing-library/jest-dom' import React, { useState } from 'react' @@ -43,17 +48,18 @@ describe('SharingAutocomplete', () => { userEvent.type(screen.getByRole('textbox'), searchString) expect(screen.getByRole('textbox')).toHaveValue(searchString) - await waitFor(() => screen.getByRole('listitem')) - userEvent.click(screen.getByRole('listitem').querySelector('a')) + await waitForElementToBeRemoved(() => screen.getByRole('progressbar')) + + userEvent.click(screen.getByRole('menuitem')) expect(screen.getByRole('textbox')).toHaveValue(userDisplayName) try { - await waitFor(() => screen.getByRole('listitem'), { timeout: 1 }) + await waitFor(() => screen.getByRole('menuitem'), { timeout: 1 }) } catch (error) { - if (!error.message.startsWith('Unable to find role="listitem"')) { + if (!error.message.startsWith('Unable to find role="menuitem"')) { throw error } } - expect(screen.queryByRole('listitem')).not.toBeInTheDocument() + expect(screen.queryByRole('menuitem')).not.toBeInTheDocument() }) }) diff --git a/components/sharing-dialog/src/cascade-sharing/controls.js b/components/sharing-dialog/src/cascade-sharing/controls.js index 46e476d98a..1a403d29df 100644 --- a/components/sharing-dialog/src/cascade-sharing/controls.js +++ b/components/sharing-dialog/src/cascade-sharing/controls.js @@ -1,12 +1,12 @@ -import { Box } from '@dhis2-ui/box' -import { Button } from '@dhis2-ui/button' -import { NoticeBox } from '@dhis2-ui/notice-box' import { useDataQuery, useDataEngine, useDhis2ConnectionStatus, } from '@dhis2/app-runtime' import { spacers } from '@dhis2/ui-constants' +import { Box } from '@dhis2-ui/box' +import { Button } from '@dhis2-ui/button' +import { NoticeBox } from '@dhis2-ui/notice-box' import PropTypes from 'prop-types' import React, { useState, useEffect } from 'react' import i18n from '../locales/index.js' diff --git a/components/sharing-dialog/src/cascade-sharing/update-info.js b/components/sharing-dialog/src/cascade-sharing/update-info.js index f5c72eb6d8..9bc6c9b152 100644 --- a/components/sharing-dialog/src/cascade-sharing/update-info.js +++ b/components/sharing-dialog/src/cascade-sharing/update-info.js @@ -1,5 +1,5 @@ -import { NoticeBox } from '@dhis2-ui/notice-box' import { useDataQuery } from '@dhis2/app-runtime' +import { NoticeBox } from '@dhis2-ui/notice-box' import PropTypes from 'prop-types' import React from 'react' import { getVisualizationsCount, getInfoMessage } from './helpers.js' diff --git a/components/sharing-dialog/src/constants.js b/components/sharing-dialog/src/constants.js index f0de52ca23..469715bd3e 100644 --- a/components/sharing-dialog/src/constants.js +++ b/components/sharing-dialog/src/constants.js @@ -19,7 +19,58 @@ export const SHARE_TARGET_GROUP = 'SHARE_TARGET_GROUP' * Sharing dialog types */ -export const VISUALIZATION = 'visualization' -export const DASHBOARD = 'dashboard' -export const EVENT_VISUALIZATION = 'eventVisualization' -export const INTERPRETATION = 'interpretation' +export const DIALOG_TYPES = { + AGGREGATE_DATA_EXCHANGE: 'aggregateDataExchange', + API_TOKEN: 'apiToken', + ATTRIBUTE: 'attribute', + CATEGORY: 'category', + CATEGORY_COMBO: 'categoryCombo', + CATEGORY_OPTION: 'categoryOption', + CATEGORY_OPTION_GROUP: 'categoryOptionGroup', + CATEGORY_OPTION_GROUP_SET: 'categoryOptionGroupSet', + CONSTANT: 'constant', + DASHBOARD: 'dashboard', + DATA_APPROVAL_LEVEL: 'dataApprovalLevel', + DATA_APPROVAL_WORKFLOW: 'dataApprovalWorkflow', + DATA_ELEMENT: 'dataElement', + DATA_ELEMENT_GROUP: 'dataElementGroup', + DATA_ELEMENT_GROUP_SET: 'dataElementGroupSet', + DATA_SET: 'dataSet', + DOCUMENT: 'document', + EVENT_CHART: 'eventChart', + EVENT_FILTER: 'eventFilter', + EVENT_REPORT: 'eventReport', + EVENT_VISUALIZATION: 'eventVisualization', + EXPRESSION_DIMENSION_ITEM: 'expressionDimensionItem', + EXTERNAL_MAP_LAYER: 'externalMapLayer', + IDENTIFIABLE_OBJECT: 'identifiableObject', + INDICATOR: 'indicator', + INDICATOR_GROUP: 'indicatorGroup', + INDICATOR_GROUP_SET: 'indicatorGroupSet', + INTERPRETATION: 'interpretation', + LEGEND_SET: 'legendSet', + MAP: 'map', + OPTION_GROUP: 'optionGroup', + OPTION_GROUP_SET: 'optionGroupSet', + OPTION_SET: 'optionSet', + ORGANISATION_UNIT_GROUP: 'organisationUnitGroup', + ORGANISATION_UNIT_GROUP_SET: 'organisationUnitGroupSet', + PREDICTOR_GROUP: 'predictorGroup', + PROGRAM: 'program', + PROGRAM_INDICATOR: 'programIndicator', + PROGRAM_INDICATOR_GROUP: 'programIndicatorGroup', + PROGRAM_STAGE: 'programStage', + PROGRAM_STAGE_WORKING_LIST: 'programStageWorkingList', + RELATIONSHIP_TYPE: 'relationshipType', + REPORT: 'report', + SQL_VIEW: 'sqlView', + TRACKED_ENTITY_ATTRIBUTE: 'trackedEntityAttribute', + TRACKED_ENTITY_FILTER: 'trackedEntityFilter', + TRACKED_ENTITY_TYPE: 'trackedEntityType', + USER_GROUP: 'userGroup', + USER_ROLE: 'userRole', + VALIDATION_RULE: 'validationRule', + VALIDATION_RULE_GROUP: 'validationRuleGroup', + VISUALIZATION: 'visualization', +} +export const DIALOG_TYPES_LIST = Object.values(DIALOG_TYPES) diff --git a/components/sharing-dialog/src/sharing-dialog.stories.e2e.js b/components/sharing-dialog/src/sharing-dialog.e2e.stories.js similarity index 100% rename from components/sharing-dialog/src/sharing-dialog.stories.e2e.js rename to components/sharing-dialog/src/sharing-dialog.e2e.stories.js diff --git a/components/sharing-dialog/src/sharing-dialog.js b/components/sharing-dialog/src/sharing-dialog.js index 921776dc32..0abb8a7ef0 100644 --- a/components/sharing-dialog/src/sharing-dialog.js +++ b/components/sharing-dialog/src/sharing-dialog.js @@ -5,10 +5,7 @@ import { ACCESS_NONE, ACCESS_VIEW_ONLY, ACCESS_VIEW_AND_EDIT, - VISUALIZATION, - DASHBOARD, - EVENT_VISUALIZATION, - INTERPRETATION, + DIALOG_TYPES_LIST, } from './constants.js' import { FetchingContext } from './fetching-context/index.js' import { @@ -199,13 +196,9 @@ SharingDialog.propTypes = { /** The id of the object to share */ id: PropTypes.string.isRequired, /** The type of object to share */ - type: PropTypes.oneOf([ - VISUALIZATION, - DASHBOARD, - EVENT_VISUALIZATION, - INTERPRETATION, - ]).isRequired, + type: PropTypes.oneOf(DIALOG_TYPES_LIST).isRequired, dataTest: PropTypes.string, + /** Used to seed the component with data to show whilst loading */ initialSharingSettings: PropTypes.shape({ allowPublic: PropTypes.bool.isRequired, groups: PropTypes.objectOf( diff --git a/components/sharing-dialog/src/sharing-dialog.stories.js b/components/sharing-dialog/src/sharing-dialog.prod.stories.js similarity index 100% rename from components/sharing-dialog/src/sharing-dialog.stories.js rename to components/sharing-dialog/src/sharing-dialog.prod.stories.js diff --git a/components/sharing-dialog/src/tabs/tabbed-content.js b/components/sharing-dialog/src/tabs/tabbed-content.js index 4021fd23f8..82c6d9cf73 100644 --- a/components/sharing-dialog/src/tabs/tabbed-content.js +++ b/components/sharing-dialog/src/tabs/tabbed-content.js @@ -8,10 +8,8 @@ import { ACCESS_NONE, ACCESS_VIEW_ONLY, ACCESS_VIEW_AND_EDIT, - VISUALIZATION, - DASHBOARD, - EVENT_VISUALIZATION, - INTERPRETATION, + DIALOG_TYPES_LIST, + DIALOG_TYPES, } from '../constants.js' import i18n from '../locales/index.js' @@ -28,7 +26,7 @@ export const TabbedContent = ({ }) => { const [activeTabIndex, setActiveTabIndex] = useState(0) - if (type === DASHBOARD) { + if (type === DIALOG_TYPES.DASHBOARD) { return ( <> @@ -104,12 +102,7 @@ TabbedContent.propTypes = { ACCESS_VIEW_ONLY, ACCESS_VIEW_AND_EDIT, ]).isRequired, - type: PropTypes.oneOf([ - VISUALIZATION, - DASHBOARD, - EVENT_VISUALIZATION, - INTERPRETATION, - ]).isRequired, + type: PropTypes.oneOf(DIALOG_TYPES_LIST).isRequired, users: PropTypes.arrayOf( PropTypes.shape({ access: PropTypes.oneOf([ diff --git a/components/sharing-dialog/types/index.d.ts b/components/sharing-dialog/types/index.d.ts index 69a0c4b9e1..fc26c09471 100644 --- a/components/sharing-dialog/types/index.d.ts +++ b/components/sharing-dialog/types/index.d.ts @@ -9,10 +9,60 @@ interface SharingObject { type SharingPublic = 'ACCESS_NONE' | 'ACCESS_VIEW_ONLY' | 'ACCESS_VIEW_AND_EDIT' type SharingType = - | 'visualization' + | 'aggregateDataExchange' + | 'apiToken' + | 'attribute' + | 'category' + | 'categoryCombo' + | 'categoryOption' + | 'categoryOptionGroup' + | 'categoryOptionGroupSet' + | 'constant' | 'dashboard' + | 'dataApprovalLevel' + | 'dataApprovalWorkflow' + | 'dataElement' + | 'dataElementGroup' + | 'dataElementGroupSet' + | 'dataSet' + | 'document' + | 'eventChart' + | 'eventFilter' + | 'eventReport' | 'eventVisualization' + | 'expressionDimensionItem' + | 'externalMapLayer' + | 'identifiableObject' + | 'identifiableObject' + | 'identifiableObject' + | 'indicator' + | 'indicatorGroup' + | 'indicatorGroupSet' | 'interpretation' + | 'legendSet' + | 'map' + | 'optionGroup' + | 'optionGroupSet' + | 'optionSet' + | 'organisationUnitGroup' + | 'organisationUnitGroupSet' + | 'predictorGroup' + | 'program' + | 'programIndicator' + | 'programIndicatorGroup' + | 'programStage' + | 'programStageWorkingList' + | 'relationshipType' + | 'report' + | 'sqlView' + | 'trackedEntityAttribute' + | 'trackedEntityFilter' + | 'trackedEntityType' + | 'userGroup' + | 'userRole' + | 'validationRule' + | 'validationRuleGroup' + | 'visualization' export interface SharingDialogInitialSharingSettings { allowPublic: boolean diff --git a/components/status-icon/package.json b/components/status-icon/package.json index 82e169f619..d452020c0e 100644 --- a/components/status-icon/package.json +++ b/components/status-icon/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/status-icon", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI StatusIcon", "repository": { "type": "git", @@ -22,20 +22,20 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/loader": "9.9.0-alpha.6", - "@dhis2/ui-constants": "9.9.0-alpha.6", - "@dhis2/ui-icons": "9.9.0-alpha.6", + "@dhis2-ui/loader": "9.11.2", + "@dhis2/ui-constants": "9.11.2", + "@dhis2/ui-icons": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/status-icon/src/status-icon.js b/components/status-icon/src/status-icon.js index 3f0545a358..8af50c297a 100644 --- a/components/status-icon/src/status-icon.js +++ b/components/status-icon/src/status-icon.js @@ -1,10 +1,10 @@ -import { CircularLoader } from '@dhis2-ui/loader' import { theme } from '@dhis2/ui-constants' import { IconErrorFilled24, IconWarningFilled24, IconCheckmark24, } from '@dhis2/ui-icons' +import { CircularLoader } from '@dhis2-ui/loader' import PropTypes from 'prop-types' import React from 'react' diff --git a/components/switch/package.json b/components/switch/package.json index 3b75051597..97ce936ae2 100644 --- a/components/switch/package.json +++ b/components/switch/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/switch", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Switch", "repository": { "type": "git", @@ -22,20 +22,20 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/field": "9.9.0-alpha.6", - "@dhis2-ui/required": "9.9.0-alpha.6", - "@dhis2/ui-constants": "9.9.0-alpha.6", + "@dhis2-ui/field": "9.11.2", + "@dhis2-ui/required": "9.11.2", + "@dhis2/ui-constants": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/switch/src/switch-field/switch-field.stories.e2e.js b/components/switch/src/switch-field/switch-field.e2e.stories.js similarity index 54% rename from components/switch/src/switch-field/switch-field.stories.e2e.js rename to components/switch/src/switch-field/switch-field.e2e.stories.js index b1dff350f5..f2abc1d398 100644 --- a/components/switch/src/switch-field/switch-field.stories.e2e.js +++ b/components/switch/src/switch-field/switch-field.e2e.stories.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-field/switch-field.js b/components/switch/src/switch-field/switch-field.js index 8d3237ba06..e388b1b6e5 100644 --- a/components/switch/src/switch-field/switch-field.js +++ b/components/switch/src/switch-field/switch-field.js @@ -1,9 +1,9 @@ +import { sharedPropTypes } from '@dhis2/ui-constants' import { Field } from '@dhis2-ui/field' import { Required } from '@dhis2-ui/required' -import { sharedPropTypes } from '@dhis2/ui-constants' import PropTypes from 'prop-types' import React from 'react' -import { Switch } from '../index.js' +import { Switch } from '../switch/index.js' const AddRequired = ({ label, required, dataTest }) => ( diff --git a/components/switch/src/switch-field/switch-field.stories.js b/components/switch/src/switch-field/switch-field.prod.stories.js similarity index 100% rename from components/switch/src/switch-field/switch-field.stories.js rename to components/switch/src/switch-field/switch-field.prod.stories.js diff --git a/components/switch/src/switch/features/accepts_initial_focus/index.js b/components/switch/src/switch/features/accepts_initial_focus/index.js index b711fe37df..12f31752fa 100644 --- a/components/switch/src/switch/features/accepts_initial_focus/index.js +++ b/components/switch/src/switch/features/accepts_initial_focus/index.js @@ -1,7 +1,7 @@ import { Given, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a Switch with initialFocus is rendered', () => { - cy.visitStory('Switch', 'With initialFocus') + cy.visitStory('Switch', 'With initial focus') }) Then('the Switch is focused', () => { diff --git a/components/switch/src/switch/features/can_be_blurred/index.js b/components/switch/src/switch/features/can_be_blurred/index.js index 29d2278937..44d314e709 100644 --- a/components/switch/src/switch/features/can_be_blurred/index.js +++ b/components/switch/src/switch/features/can_be_blurred/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a Switch with initialFocus and onBlur handler is rendered', () => { - cy.visitStory('Switch', 'With initialFocus and onBlur') + cy.visitStory('Switch', 'With initial focus and on blur') }) When('the Switch is blurred', () => { diff --git a/components/switch/src/switch/features/can_be_changed/index.js b/components/switch/src/switch/features/can_be_changed/index.js index c774da15ee..e3df762949 100644 --- a/components/switch/src/switch/features/can_be_changed/index.js +++ b/components/switch/src/switch/features/can_be_changed/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a Switch with onChange handler is rendered', () => { - cy.visitStory('Switch', 'With onChange') + cy.visitStory('Switch', 'With on change') }) When('the Switch is clicked', () => { diff --git a/components/switch/src/switch/features/can_be_focused/index.js b/components/switch/src/switch/features/can_be_focused/index.js index 806c9e139e..334b510d89 100644 --- a/components/switch/src/switch/features/can_be_focused/index.js +++ b/components/switch/src/switch/features/can_be_focused/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a Switch with onFocus handler is rendered', () => { - cy.visitStory('Switch', 'With onFocus') + cy.visitStory('Switch', 'With on focus') }) When('the Switch is focused', () => { diff --git a/components/switch/src/switch/switch.e2e.stories.js b/components/switch/src/switch/switch.e2e.stories.js new file mode 100644 index 0000000000..197f5a238d --- /dev/null +++ b/components/switch/src/switch/switch.e2e.stories.js @@ -0,0 +1,37 @@ +import React from 'react' +import { Switch } from './index.js' + +window.onChange = window.Cypress && window.Cypress.cy.stub() +window.onBlur = window.Cypress && window.Cypress.cy.stub() +window.onFocus = window.Cypress && window.Cypress.cy.stub() + +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/switch/src/switch/switch.stories.js b/components/switch/src/switch/switch.prod.stories.js similarity index 100% rename from components/switch/src/switch/switch.stories.js rename to components/switch/src/switch/switch.prod.stories.js diff --git a/components/switch/src/switch/switch.stories.e2e.js b/components/switch/src/switch/switch.stories.e2e.js deleted file mode 100644 index e34f37f2a1..0000000000 --- a/components/switch/src/switch/switch.stories.e2e.js +++ /dev/null @@ -1,43 +0,0 @@ -import { storiesOf } from '@storybook/react' -import React from 'react' -import { Switch } from './index.js' - -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', () => ( - - )) diff --git a/components/tab/package.json b/components/tab/package.json index 58fbba6c9d..d32cc7f91f 100644 --- a/components/tab/package.json +++ b/components/tab/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/tab", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Tabs", "repository": { "type": "git", @@ -22,19 +22,20 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { + "@dhis2-ui/tooltip": "9.11.2", "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.9.0-alpha.6", - "@dhis2/ui-icons": "9.9.0-alpha.6", + "@dhis2/ui-constants": "9.11.2", + "@dhis2/ui-icons": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/tab/src/tab-bar/tab-bar.e2e.stories.js b/components/tab/src/tab-bar/tab-bar.e2e.stories.js new file mode 100644 index 0000000000..3e3efb42c1 --- /dev/null +++ b/components/tab/src/tab-bar/tab-bar.e2e.stories.js @@ -0,0 +1,31 @@ +import React from 'react' +import { Tab } from '../tab/index.js' +import { TabBar } from './index.js' + +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 ( + + + + + + ) +} diff --git a/components/tab/src/tab-bar/tab-bar.stories.js b/components/tab/src/tab-bar/tab-bar.prod.stories.js similarity index 100% rename from components/tab/src/tab-bar/tab-bar.stories.js rename to components/tab/src/tab-bar/tab-bar.prod.stories.js diff --git a/components/tab/src/tab-bar/tab-bar.stories.e2e.js b/components/tab/src/tab-bar/tab-bar.stories.e2e.js deleted file mode 100644 index 60d61f7c72..0000000000 --- a/components/tab/src/tab-bar/tab-bar.stories.e2e.js +++ /dev/null @@ -1,32 +0,0 @@ -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 -
    -     - ) - - return ( - - - - - - ) - }) diff --git a/components/tab/src/tab-bar/tabs.js b/components/tab/src/tab-bar/tabs.js index e999671f0d..8b586bf8bb 100644 --- a/components/tab/src/tab-bar/tabs.js +++ b/components/tab/src/tab-bar/tabs.js @@ -1,26 +1,86 @@ import { colors } from '@dhis2/ui-constants' import cx from 'classnames' import PropTypes from 'prop-types' -import React from 'react' - -const Tabs = ({ children, fixed, dataTest }) => ( -
    - {children} - - -
    -) + return + } + + const currentIndex = childrenRefs.findIndex( + (ref) => ref.current === currentFocus + ) + + if (currentIndex === -1) { + return + } + + if (event.key === 'ArrowRight') { + event.preventDefault() + const nextIndex = (currentIndex + 1) % childrenRefs.length + childrenRefs[nextIndex].current.focus() + } + + if (event.key === 'ArrowLeft') { + event.preventDefault() + const prevIndex = + (currentIndex - 1 + childrenRefs.length) % childrenRefs.length + childrenRefs[prevIndex].current.focus() + } + } + + return ( +
    + {React.Children.map(children, (child, index) => { + if (React.isValidElement(child)) { + return React.cloneElement(child, { + ref: childrenRefs[index], + }) + } + // Wrap non-element children e.g string in a + return ( + + {child} + + ) + })} + + +
    + ) +} Tabs.propTypes = { dataTest: PropTypes.string.isRequired, diff --git a/components/tab/src/tab/features/is_clickable/index.js b/components/tab/src/tab/features/is_clickable/index.js index ebf12842de..74dfc22aa4 100644 --- a/components/tab/src/tab/features/is_clickable/index.js +++ b/components/tab/src/tab/features/is_clickable/index.js @@ -1,11 +1,11 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a Tab with onClick handler is rendered', () => { - cy.visitStory('Tab', 'With onClick') + cy.visitStory('Tab', 'With on click') }) Given('a disabled Tab with onClick handler is rendered', () => { - cy.visitStory('Tab', 'With onClick and disabled') + cy.visitStory('Tab', 'With on click and disabled') }) When('the Tab is clicked', () => { diff --git a/components/tab/src/tab/tab.e2e.stories.js b/components/tab/src/tab/tab.e2e.stories.js new file mode 100644 index 0000000000..51e7e6588a --- /dev/null +++ b/components/tab/src/tab/tab.e2e.stories.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Tab } from './tab.js' + +window.onClick = window.Cypress && window.Cypress.cy.stub() + +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/tab/src/tab/tab.js b/components/tab/src/tab/tab.js index bb85dcec9c..5f8da77203 100644 --- a/components/tab/src/tab/tab.js +++ b/components/tab/src/tab/tab.js @@ -1,136 +1,164 @@ import { colors, theme } from '@dhis2/ui-constants' +import { Tooltip } from '@dhis2-ui/tooltip' import cx from 'classnames' import PropTypes from 'prop-types' -import React from 'react' - -const Tab = ({ - icon, - onClick, - selected, - disabled, - children, - className, - dataTest, -}) => ( - +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' diff --git a/components/tab/src/tab/tab.stories.e2e.js b/components/tab/src/tab/tab.stories.e2e.js deleted file mode 100644 index b030e6276d..0000000000 --- a/components/tab/src/tab/tab.stories.e2e.js +++ /dev/null @@ -1,15 +0,0 @@ -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 - - )) diff --git a/components/table/i18n/es_419.po b/components/table/i18n/es_419.po new file mode 100644 index 0000000000..2e03fec886 --- /dev/null +++ b/components/table/i18n/es_419.po @@ -0,0 +1,22 @@ +# +# Translators: +# Enzo Nicolas Rossi , 2024 +# +msgid "" +msgstr "" +"Project-Id-Version: i18next-conv\n" +"POT-Creation-Date: 2021-06-15T13:35:03.608Z\n" +"PO-Revision-Date: 2021-06-24 12:50+0000\n" +"Last-Translator: Enzo Nicolas Rossi , 2024\n" +"Language-Team: Spanish (Latin America) (https://app.transifex.com/hisp-uio/teams/100509/es_419/)\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: 8bit\n" +"Language: es_419\n" +"Plural-Forms: nplurals=3; plural=n == 1 ? 0 : n != 0 && n % 1000000 == 0 ? 1 : 2;\n" + +msgid "Toggle filter" +msgstr "Alternar filtro" + +msgid "Sort items" +msgstr "Clasificar artículos" diff --git a/components/table/i18n/ru.po b/components/table/i18n/ru.po new file mode 100644 index 0000000000..f512e0dd04 --- /dev/null +++ b/components/table/i18n/ru.po @@ -0,0 +1,22 @@ +# +# Translators: +# Yury Rogachev , 2024 +# +msgid "" +msgstr "" +"Project-Id-Version: i18next-conv\n" +"POT-Creation-Date: 2021-06-15T13:35:03.608Z\n" +"PO-Revision-Date: 2021-06-24 12:50+0000\n" +"Last-Translator: Yury Rogachev , 2024\n" +"Language-Team: Russian (https://app.transifex.com/hisp-uio/teams/100509/ru/)\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: 8bit\n" +"Language: ru\n" +"Plural-Forms: nplurals=4; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<12 || n%100>14) ? 1 : n%10==0 || (n%10>=5 && n%10<=9) || (n%100>=11 && n%100<=14)? 2 : 3);\n" + +msgid "Toggle filter" +msgstr "Переключить фильтр" + +msgid "Sort items" +msgstr "Сортировать элементы" diff --git a/components/table/package.json b/components/table/package.json index 04bb400ba5..82ae544497 100644 --- a/components/table/package.json +++ b/components/table/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/table", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Table", "repository": { "type": "git", @@ -22,20 +22,20 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { "@dhis2/d2-i18n": "^1", - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.9.0-alpha.6", - "@dhis2/ui-icons": "9.9.0-alpha.6", + "@dhis2/ui-constants": "9.11.2", + "@dhis2/ui-icons": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/table/src/data-table/data-table.stories.e2e.js b/components/table/src/data-table/data-table.e2e.stories.js similarity index 100% rename from components/table/src/data-table/data-table.stories.e2e.js rename to components/table/src/data-table/data-table.e2e.stories.js diff --git a/components/table/src/data-table/data-table.stories.js b/components/table/src/data-table/data-table.prod.stories.js similarity index 100% rename from components/table/src/data-table/data-table.stories.js rename to components/table/src/data-table/data-table.prod.stories.js diff --git a/components/table/src/data-table/table-elements/table.stories.e2e.js b/components/table/src/data-table/table-elements/table.e2e.stories.js similarity index 100% rename from components/table/src/data-table/table-elements/table.stories.e2e.js rename to components/table/src/data-table/table-elements/table.e2e.stories.js diff --git a/components/table/src/data-table/table-elements/table.stories.internal.js b/components/table/src/data-table/table-elements/table.stories.internal.js index 24e02521a3..8799ad6bfe 100644 --- a/components/table/src/data-table/table-elements/table.stories.internal.js +++ b/components/table/src/data-table/table-elements/table.stories.internal.js @@ -1,14 +1,14 @@ /* eslint-disable react/prop-types */ +import { IconAttachment16 } from '@dhis2/ui-icons' import { Box } from '@dhis2-ui/box' import { Checkbox } from '@dhis2-ui/checkbox' -import { IconAttachment16 } from '@dhis2/ui-icons' import React, { useState } from 'react' import { TableBody } from './table-body.js' import { TableDataCell } from './table-data-cell/table-data-cell.js' import { TableFoot } from './table-foot.js' import { TableHead } from './table-head.js' -import { TableHeaderCellAction } from './table-header-cell-action.js' import { TableHeaderCell } from './table-header-cell/table-header-cell.js' +import { TableHeaderCellAction } from './table-header-cell-action.js' import { TableRow } from './table-row.js' import { TableScrollBox } from './table-scroll-box.js' import { TableToolbar } from './table-toolbar.js' diff --git a/components/table/src/stacked-table/stacked-table.stories.js b/components/table/src/stacked-table/stacked-table.prod.stories.js similarity index 100% rename from components/table/src/stacked-table/stacked-table.stories.js rename to components/table/src/stacked-table/stacked-table.prod.stories.js diff --git a/components/table/src/table/table.stories.js b/components/table/src/table/table.prod.stories.js similarity index 100% rename from components/table/src/table/table.stories.js rename to components/table/src/table/table.prod.stories.js diff --git a/components/tag/API.md b/components/tag/API.md index 1b1e530ccd..b70a72e8dc 100644 --- a/components/tag/API.md +++ b/components/tag/API.md @@ -15,7 +15,7 @@ import { Tag } from '@dhis2/ui' |Name|Type|Default|Required|Description| |---|---|---|---|---| |bold|boolean|||Use bold tags where it is important that the tag is seen by the user in an information dense interface. Bold tags should be reserved for edge cases and not overused.| -|children|string|||| +|children|node|||| |className|string|||| |dataTest|string|`'dhis2-uicore-tag'`||| |icon|node|||Tags can contain icons. Use icons where they will help users easily identify the content of the tag. Tags must have a text label and cannot display only an icon.| diff --git a/components/tag/package.json b/components/tag/package.json index c3df0d3ed2..26be1b7fe8 100644 --- a/components/tag/package.json +++ b/components/tag/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/tag", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI Tag", "repository": { "type": "git", @@ -22,18 +22,18 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.9.0-alpha.6", + "@dhis2/ui-constants": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/tag/src/tag.e2e.stories.js b/components/tag/src/tag.e2e.stories.js new file mode 100644 index 0000000000..308f374310 --- /dev/null +++ b/components/tag/src/tag.e2e.stories.js @@ -0,0 +1,15 @@ +import React from 'react' +import { Tag } from './tag.js' + +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/tag/src/tag.js b/components/tag/src/tag.js index 6520fed456..34bf4d8d43 100644 --- a/components/tag/src/tag.js +++ b/components/tag/src/tag.js @@ -102,7 +102,7 @@ Tag.defaultProps = { Tag.propTypes = { /** Use bold tags where it is important that the tag is seen by the user in an information dense interface. Bold tags should be reserved for edge cases and not overused. */ bold: PropTypes.bool, - children: PropTypes.string, + children: PropTypes.node, className: PropTypes.string, dataTest: PropTypes.string, /** Tags can contain icons. Use icons where they will help users easily identify the content of the tag. Tags must have a text label and cannot display only an icon. */ diff --git a/components/tag/src/tag.stories.js b/components/tag/src/tag.prod.stories.js similarity index 100% rename from components/tag/src/tag.stories.js rename to components/tag/src/tag.prod.stories.js diff --git a/components/tag/src/tag.stories.e2e.js b/components/tag/src/tag.stories.e2e.js deleted file mode 100644 index 9479cda4a3..0000000000 --- a/components/tag/src/tag.stories.e2e.js +++ /dev/null @@ -1,16 +0,0 @@ -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) diff --git a/components/tag/types/index.d.ts b/components/tag/types/index.d.ts index 2a66f9ee9b..518da25947 100644 --- a/components/tag/types/index.d.ts +++ b/components/tag/types/index.d.ts @@ -5,7 +5,7 @@ export interface TagProps { * Use bold tags where it is important that the tag is seen by the user in an information dense interface. Bold tags should be reserved for edge cases and not overused. */ bold?: boolean - children?: string + children?: React.ReactNode className?: string dataTest?: string /** diff --git a/components/text-area/package.json b/components/text-area/package.json index 960b72e161..72b8b914fd 100644 --- a/components/text-area/package.json +++ b/components/text-area/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/text-area", - "version": "9.9.0-alpha.6", + "version": "9.11.2", "description": "UI TextArea", "repository": { "type": "git", @@ -22,23 +22,23 @@ "access": "public" }, "scripts": { - "start": "start-storybook -c ../../storybook/config --port 5000", + "start": "storybook dev -c ../../storybook/config --port 5000", "build": "d2-app-scripts build", "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js" }, "peerDependencies": { - "react": "^16.8", - "react-dom": "^16.8", + "react": "^16.13", + "react-dom": "^16.13", "styled-jsx": "^4" }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/box": "9.9.0-alpha.6", - "@dhis2-ui/field": "9.9.0-alpha.6", - "@dhis2-ui/loader": "9.9.0-alpha.6", - "@dhis2-ui/status-icon": "9.9.0-alpha.6", - "@dhis2/ui-constants": "9.9.0-alpha.6", - "@dhis2/ui-icons": "9.9.0-alpha.6", + "@dhis2-ui/box": "9.11.2", + "@dhis2-ui/field": "9.11.2", + "@dhis2-ui/loader": "9.11.2", + "@dhis2-ui/status-icon": "9.11.2", + "@dhis2/ui-constants": "9.11.2", + "@dhis2/ui-icons": "9.11.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, 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.e2e.stories.js similarity index 60% rename from components/text-area/src/text-area-field/text-area-field.stories.e2e.js rename to components/text-area/src/text-area-field/text-area-field.e2e.stories.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.e2e.stories.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-field/text-area-field.js b/components/text-area/src/text-area-field/text-area-field.js index 19395c1adf..7e8b53e22f 100644 --- a/components/text-area/src/text-area-field/text-area-field.js +++ b/components/text-area/src/text-area-field/text-area-field.js @@ -1,9 +1,9 @@ +import { sharedPropTypes } from '@dhis2/ui-constants' import { Box } from '@dhis2-ui/box' import { Field } from '@dhis2-ui/field' -import { sharedPropTypes } from '@dhis2/ui-constants' import PropTypes from 'prop-types' import React from 'react' -import { TextArea } from '../index.js' +import { TextArea } from '../text-area/index.js' const TextAreaField = ({ className, diff --git a/components/text-area/src/text-area-field/text-area-field.stories.js b/components/text-area/src/text-area-field/text-area-field.prod.stories.js similarity index 100% rename from components/text-area/src/text-area-field/text-area-field.stories.js rename to components/text-area/src/text-area-field/text-area-field.prod.stories.js diff --git a/components/text-area/src/text-area/features/accepts_initial_focus/index.js b/components/text-area/src/text-area/features/accepts_initial_focus/index.js index e6f9c21a82..f0479f5f64 100644 --- a/components/text-area/src/text-area/features/accepts_initial_focus/index.js +++ b/components/text-area/src/text-area/features/accepts_initial_focus/index.js @@ -1,7 +1,7 @@ import { Given, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a TextArea with initialFocus is rendered', () => { - cy.visitStory('TextArea', 'With initialFocus') + cy.visitStory('TextArea', 'With initial focus') }) Then('the TextArea is focused', () => { diff --git a/components/text-area/src/text-area/features/can_be_blurred/index.js b/components/text-area/src/text-area/features/can_be_blurred/index.js index 8606765a4a..07d854ceb4 100644 --- a/components/text-area/src/text-area/features/can_be_blurred/index.js +++ b/components/text-area/src/text-area/features/can_be_blurred/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a TextArea with initialFocus and onBlur handler is rendered', () => { - cy.visitStory('TextArea', 'With initialFocus and onBlur') + cy.visitStory('TextArea', 'With initial focus and on blur') }) When('the TextArea is blurred', () => { diff --git a/components/text-area/src/text-area/features/can_be_changed/index.js b/components/text-area/src/text-area/features/can_be_changed/index.js index 812a9deb39..4ed5e4a677 100644 --- a/components/text-area/src/text-area/features/can_be_changed/index.js +++ b/components/text-area/src/text-area/features/can_be_changed/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a TextArea with onChange handler is rendered', () => { - cy.visitStory('TextArea', 'With onChange') + cy.visitStory('TextArea', 'With on change') }) When('the TextArea is filled with a character', () => { diff --git a/components/text-area/src/text-area/features/can_be_focused/index.js b/components/text-area/src/text-area/features/can_be_focused/index.js index ea2bb88a31..a8bc845680 100644 --- a/components/text-area/src/text-area/features/can_be_focused/index.js +++ b/components/text-area/src/text-area/features/can_be_focused/index.js @@ -1,7 +1,7 @@ import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor' Given('a TextArea with onFocus handler is rendered', () => { - cy.visitStory('TextArea', 'With onFocus') + cy.visitStory('TextArea', 'With on focus') }) When('the TextArea is focused', () => { diff --git a/components/text-area/src/text-area/text-area.e2e.stories.js b/components/text-area/src/text-area/text-area.e2e.stories.js new file mode 100644 index 0000000000..ae4550c69d --- /dev/null +++ b/components/text-area/src/text-area/text-area.e2e.stories.js @@ -0,0 +1,19 @@ +import React from 'react' +import { TextArea } from './index.js' + +window.onChange = window.Cypress && window.Cypress.cy.stub() +window.onBlur = window.Cypress && window.Cypress.cy.stub() +window.onFocus = window.Cypress && window.Cypress.cy.stub() + +export default { title: 'TextArea' } +export const WithOnChange = () => ( +