Skip to content

Commit

Permalink
feat: toolbar UI update with hoverable menu (#1478)
Browse files Browse the repository at this point in the history
BREAKING CHANGE
The `FileMenu` is now using the new `HoverMenuBar` components which makes this version of the `FileMenu` incompatible with the previous version. Apps will be need to update their toolbar and file menu before using this version of analytics.
  • Loading branch information
HendrikThePendric committed Jun 20, 2023
1 parent 5296bd7 commit 24d21c1
Show file tree
Hide file tree
Showing 33 changed files with 1,841 additions and 457 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/node-publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ jobs:
token: ${{env.GH_TOKEN}}
- uses: actions/setup-node@v1
with:
node-version: 12.x
node-version: 16.x

- name: Install
run: yarn install --frozen-lockfile
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/node-test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: 12.x
node-version: 16.x

- name: Install
run: yarn install --frozen-lockfile
Expand Down
5 changes: 5 additions & 0 deletions config/setupTestingLibrary.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { configure } from '@testing-library/dom'

configure({
testIdAttribute: 'data-test',
})
7 changes: 5 additions & 2 deletions i18n/en.pot
Original file line number Diff line number Diff line change
Expand Up @@ -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-04-18T08:41:27.838Z\n"
"PO-Revision-Date: 2023-04-18T08:41:27.838Z\n"
"POT-Creation-Date: 2023-05-24T12:55:52.925Z\n"
"PO-Revision-Date: 2023-05-24T12:55:52.925Z\n"

msgid "view only"
msgstr "view only"
Expand Down Expand Up @@ -856,6 +856,9 @@ msgstr "Financial Years"
msgid "Years"
msgstr "Years"

msgid "Interpretations and details"
msgstr "Interpretations and details"

msgid "Translating to"
msgstr "Translating to"

Expand Down
5 changes: 4 additions & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
module.exports = {
testPathIgnorePatterns: ['/node_modules/', '/build/'],
setupFilesAfterEnv: ['<rootDir>/config/setupEnzyme.js'],
setupFilesAfterEnv: [
'<rootDir>/config/setupEnzyme.js',
'<rootDir>/config/setupTestingLibrary.js',
],
}
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@
"@storybook/addons": "^6.5.9",
"@storybook/preset-create-react-app": "^3.1.7",
"@storybook/react": "^6.1.14",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.1.5",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.15.6",
"fs-extra": "^10.1.0",
Expand Down
29 changes: 18 additions & 11 deletions src/__demo__/FileMenu.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Provider } from '@dhis2/app-runtime'
import { storiesOf } from '@storybook/react'
import React from 'react'
import { FileMenu } from '../components/FileMenu/FileMenu.js'
import { HoverMenuBar } from '../components/Toolbar/index.js'

const configMock = {
baseUrl: 'http://localhost:8080',
Expand Down Expand Up @@ -61,24 +62,30 @@ const visReadonlyObject = {
storiesOf('FileMenu', module)
.add('Simple', () => (
<Provider config={configMock}>
<FileMenu currentUser={user} fileType="visualization" />
<HoverMenuBar>
<FileMenu currentUser={user} fileType="visualization" />
</HoverMenuBar>
</Provider>
))
.add('With AO', () => (
<Provider config={configMock}>
<FileMenu
currentUser={user}
fileType="visualization"
fileObject={visObject}
/>
<HoverMenuBar>
<FileMenu
currentUser={user}
fileType="visualization"
fileObject={visObject}
/>
</HoverMenuBar>
</Provider>
))
.add('With readonly AO', () => (
<Provider config={configMock}>
<FileMenu
currentUser={user}
fileType="visualization"
fileObject={visReadonlyObject}
/>
<HoverMenuBar>
<FileMenu
currentUser={user}
fileType="visualization"
fileObject={visReadonlyObject}
/>
</HoverMenuBar>
</Provider>
))
78 changes: 78 additions & 0 deletions src/__demo__/Toolbar.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { storiesOf } from '@storybook/react'
import React, { useState } from 'react'
import {
HoverMenuBar,
HoverMenuDropdown,
HoverMenuList,
HoverMenuListItem,
InterpretationsAndDetailsToggler,
Toolbar,
ToolbarSidebar,
UpdateButton,
} from '../components/Toolbar/index.js'

function ToolbarWithState() {
const [isHidden, setIsHidden] = useState(false)
const [isSidebarShowing, setIsSidebarShowing] = useState(false)
return (
<Toolbar>
<ToolbarSidebar isHidden={isHidden}>
<span>Toolbar side bar</span>
<a
style={{
paddingLeft: 12,
textDecoration: 'underline',
cursor: 'pointer',
}}
onClick={() => setIsHidden(true)}
>
click to hide
</a>
</ToolbarSidebar>
<UpdateButton />
<HoverMenuBar>
<HoverMenuDropdown label="Menu A">
<HoverMenuList>
<HoverMenuListItem label="Menu item A.1" />
<HoverMenuListItem label="Menu item A.2" />
<HoverMenuListItem label="Menu item A.3" />
</HoverMenuList>
</HoverMenuDropdown>
<HoverMenuDropdown label="Menu B">
<HoverMenuList>
<HoverMenuListItem label="Menu item B.1">
<HoverMenuListItem label="Menu item B.1.1" />
<HoverMenuListItem label="Menu item B.1.2" />
<HoverMenuListItem label="Menu item B.1.3" />
</HoverMenuListItem>
<HoverMenuListItem label="Menu item B.2">
<HoverMenuListItem label="Menu item B.2.1" />
<HoverMenuListItem label="Menu item B.2.2" />
<HoverMenuListItem label="Menu item B.2.3" />
</HoverMenuListItem>
<HoverMenuListItem label="Menu item B.3" disabled>
<HoverMenuListItem label="Menu item B.3.1" />
<HoverMenuListItem label="Menu item B.3.2" />
<HoverMenuListItem label="Menu item B.3.3" />
</HoverMenuListItem>
</HoverMenuList>
</HoverMenuDropdown>
<HoverMenuDropdown label="Menu C" disabled>
<HoverMenuList>
<HoverMenuListItem label="Menu item C.1" />
<HoverMenuListItem label="Menu item C.2" />
<HoverMenuListItem label="Menu item C.3" />
</HoverMenuList>
</HoverMenuDropdown>
</HoverMenuBar>
<InterpretationsAndDetailsToggler
isShowing={isSidebarShowing}
onClick={() => setIsSidebarShowing((current) => !current)}
/>
</Toolbar>
)
}

storiesOf('Toolbar', module).add('default', () => {
return <ToolbarWithState />
})
Loading

0 comments on commit 24d21c1

Please sign in to comment.