Skip to content

Commit 7efdbdd

Browse files
dlabajdlabaj
authored
feat: Page template updates. (#8)
* feat: Page template updates. * fix: updated page template. * fixed eslint errors.
1 parent a13ac8c commit 7efdbdd

19 files changed

+1795
-208
lines changed

‎.vscode/launch.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,28 @@
66
"name": "Development server",
77
"request": "launch",
88
"type": "node-terminal"
9+
},
10+
{
11+
"type": "node",
12+
"request": "launch",
13+
"name": "Test Spec File",
14+
"program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
15+
"args": [
16+
"--collectCoverage=false",
17+
"--colors",
18+
"--config",
19+
"${workspaceRoot}/jest.config.ts",
20+
"--runInBand"
21+
],
22+
"internalConsoleOptions": "neverOpen",
23+
"sourceMaps": true,
24+
"skipFiles": [
25+
"${workspaceRoot}/../../node_modules/**/*"
26+
],
27+
"windows": {
28+
"skipFiles": ["C:\\\\**\\\\node_modules\\\\**\\\\*"]
29+
},
30+
"stopOnEntry": true
931
}
1032
]
1133
}

‎eslint.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default [
4848
'@typescript-eslint/array-type': 'error',
4949
'@typescript-eslint/ban-types': 'off',
5050
'@typescript-eslint/consistent-type-assertions': 'error',
51-
'@typescript-eslint/consistent-type-definitions': 'error',
51+
'@typescript-eslint/consistent-type-definitions': 'off',
5252
'@typescript-eslint/explicit-member-accessibility': 'off',
5353
'@typescript-eslint/explicit-module-boundary-types': 'off',
5454
'@typescript-eslint/indent': 'off',

‎src/components/Breadcrumbs.astro‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/components/KebabDropdownItems.astro‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/components/KebabDropdownItems.tsx‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/components/Toolbar.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
import { Toolbar as ReactToolbar } from './Toolbar.tsx'
33
---
44

5-
<ReactToolbar client:idle />
5+
<ReactToolbar client:idle />

‎src/components/Toolbar.tsx‎

Lines changed: 20 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,18 @@
11
import * as React from 'react'
2-
import { useState } from 'react'
32
import {
4-
Avatar,
53
Button,
6-
ButtonVariant,
7-
Divider,
8-
Dropdown,
9-
DropdownGroup,
10-
DropdownList,
11-
MenuToggle,
12-
type MenuToggleElement,
134
Toolbar as PFToolbar,
145
ToolbarContent,
156
ToolbarGroup,
167
ToolbarItem,
178
} from '@patternfly/react-core'
18-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'
19-
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'
20-
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'
21-
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'
229

23-
import imgAvatar from '/avatarImg.svg?url'
10+
import { ToggleThemeSwitcher } from './toolbar/ToogleThemeSwitcher'
11+
import { SearchComponent } from './toolbar/SearchComponent'
12+
import { DocumentReleaseDropdown } from './toolbar/DocumentReleaseDropdown';
13+
import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
2414

25-
import { KebabDropdownItems } from './KebabDropdownItems'
26-
import { UserDropdownItems } from './UserDropdownItems'
27-
28-
export const Toolbar: React.FunctionComponent = () => {
29-
const [isDropdownOpen, setIsDropdownOpen] = useState(false)
30-
const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false)
31-
const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false)
32-
33-
const onDropdownToggle = () => {
34-
setIsDropdownOpen(!isDropdownOpen)
35-
}
36-
37-
const onDropdownSelect = () => {
38-
setIsDropdownOpen(false)
39-
}
40-
41-
const onKebabDropdownToggle = () => {
42-
setIsKebabDropdownOpen(!isKebabDropdownOpen)
43-
}
44-
45-
const onKebabDropdownSelect = () => {
46-
setIsKebabDropdownOpen(false)
47-
}
48-
49-
const onFullKebabDropdownToggle = () => {
50-
setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen)
51-
}
52-
53-
const onFullKebabDropdownSelect = () => {
54-
setIsFullKebabDropdownOpen(false)
55-
}
56-
57-
return (
15+
export const Toolbar: React.FunctionComponent = () => (
5816
<PFToolbar id="toolbar" isStatic>
5917
<ToolbarContent>
6018
<ToolbarGroup
@@ -63,111 +21,26 @@ export const Toolbar: React.FunctionComponent = () => {
6321
gap={{ default: 'gapNone', md: 'gapMd' }}
6422
>
6523
<ToolbarItem>
66-
<Button
67-
aria-label="Notifications"
68-
variant={ButtonVariant.plain}
69-
icon={<BellIcon />}
70-
/>
24+
<ToggleThemeSwitcher/>
7125
</ToolbarItem>
72-
<ToolbarGroup
73-
variant="action-group-plain"
74-
visibility={{ default: 'hidden', lg: 'visible' }}
75-
>
76-
<ToolbarItem>
77-
<Button
78-
aria-label="Settings"
79-
variant={ButtonVariant.plain}
80-
icon={<CogIcon />}
81-
/>
82-
</ToolbarItem>
83-
<ToolbarItem>
84-
<Button
85-
aria-label="Help"
86-
variant={ButtonVariant.plain}
87-
icon={<QuestionCircleIcon />}
88-
/>
89-
</ToolbarItem>
90-
</ToolbarGroup>
91-
<ToolbarItem
92-
visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}
93-
>
94-
<Dropdown
95-
isOpen={isKebabDropdownOpen}
96-
onSelect={onKebabDropdownSelect}
97-
onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}
98-
popperProps={{ position: 'right' }}
99-
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
100-
<MenuToggle
101-
ref={toggleRef}
102-
onClick={onKebabDropdownToggle}
103-
isExpanded={isKebabDropdownOpen}
104-
variant="plain"
105-
aria-label="Settings and help"
106-
>
107-
<EllipsisVIcon aria-hidden="true" />
108-
</MenuToggle>
109-
)}
110-
>
111-
<DropdownList>
112-
<KebabDropdownItems />
113-
</DropdownList>
114-
</Dropdown>
26+
<ToolbarItem>
27+
<SearchComponent/>
11528
</ToolbarItem>
116-
<ToolbarItem visibility={{ md: 'hidden' }}>
117-
<Dropdown
118-
isOpen={isFullKebabDropdownOpen}
119-
onSelect={onFullKebabDropdownSelect}
120-
onOpenChange={(isOpen: boolean) =>
121-
setIsFullKebabDropdownOpen(isOpen)
122-
}
123-
popperProps={{ position: 'right' }}
124-
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
125-
<MenuToggle
126-
ref={toggleRef}
127-
onClick={onFullKebabDropdownToggle}
128-
isExpanded={isFullKebabDropdownOpen}
129-
variant="plain"
130-
aria-label="Toolbar menu"
131-
>
132-
<EllipsisVIcon aria-hidden="true" />
133-
</MenuToggle>
134-
)}
29+
<ToolbarItem>
30+
<Button
31+
component="a"
32+
variant="plain"
33+
href="//github.com/patternfly"
34+
target="top"
35+
aria-label="PatternFly GitHub page"
13536
>
136-
<DropdownGroup key="group 2" aria-label="User actions">
137-
<DropdownList>
138-
<UserDropdownItems />
139-
</DropdownList>
140-
</DropdownGroup>
141-
<Divider />
142-
<DropdownList>
143-
<KebabDropdownItems />
144-
</DropdownList>
145-
</Dropdown>
37+
<GithubIcon />
38+
</Button>
39+
</ToolbarItem>
40+
<ToolbarItem>
41+
<DocumentReleaseDropdown/>
14642
</ToolbarItem>
14743
</ToolbarGroup>
148-
<ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
149-
<Dropdown
150-
isOpen={isDropdownOpen}
151-
onSelect={onDropdownSelect}
152-
onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
153-
popperProps={{ position: 'right' }}
154-
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
155-
<MenuToggle
156-
ref={toggleRef}
157-
onClick={onDropdownToggle}
158-
isExpanded={isDropdownOpen}
159-
icon={<Avatar src={imgAvatar} alt="" size="sm" />}
160-
>
161-
Ned Username
162-
</MenuToggle>
163-
)}
164-
>
165-
<DropdownList>
166-
<UserDropdownItems />
167-
</DropdownList>
168-
</Dropdown>
169-
</ToolbarItem>
17044
</ToolbarContent>
17145
</PFToolbar>
17246
)
173-
}

‎src/components/UserDropdownItems.astro‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/components/UserDropdownItems.tsx‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/components/toolbar/DocumentReleaseDropdown.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React from 'react'
2+
import {
3+
Dropdown,
4+
DropdownList,
5+
MenuToggle,
6+
DropdownGroup,
7+
DropdownItem,
8+
Divider,
9+
} from '@patternfly/react-core'
10+
import { Release } from '../../types'
11+
import versions from '../../versions.json'
12+
13+
export const DocumentReleaseDropdown: React.FunctionComponent = () => {
14+
const latestRelease = versions.Releases.find(
15+
(release) => release.latest,
16+
) as Release
17+
const previousReleases = Object.values(versions.Releases).filter(
18+
(release) => !release.hidden && !release.latest,
19+
) as Release []
20+
21+
const previousVersions = Object.values(versions.ArchivedReleases) as Release[];
22+
23+
const [isDropdownOpen, setDropdownOpen] = React.useState(false)
24+
25+
const getDropdownItem = (version: Release, isLatest = false) => (
26+
<DropdownItem
27+
itemId={`${version.name}-latest-release`}
28+
key={`${version.name}-latest`}
29+
// eslint-disable-next-line no-nested-ternary
30+
to={isLatest ? '/' : version.href ? version.href : `/${version.name}`}
31+
isExternalLink = {version.href ? true : false}
32+
>
33+
{`Release ${version.name}`}
34+
</DropdownItem>
35+
)
36+
return (
37+
<Dropdown
38+
onSelect={() => setDropdownOpen(!isDropdownOpen)}
39+
onOpenChange={(isOpen) => setDropdownOpen(isOpen)}
40+
isOpen={isDropdownOpen}
41+
toggle={(toggleRef) => (
42+
<MenuToggle
43+
ref={toggleRef}
44+
onClick={() => setDropdownOpen(!isDropdownOpen)}
45+
isExpanded={isDropdownOpen}
46+
>
47+
{`Release ${latestRelease.name}`}
48+
</MenuToggle>
49+
)}
50+
popperProps={{ position: 'right' }}
51+
>
52+
<DropdownGroup key="Latest" label="Latest">
53+
<DropdownList>{getDropdownItem(latestRelease, true)}</DropdownList>
54+
</DropdownGroup>
55+
{previousReleases.length > 0 && (
56+
<DropdownGroup key="Previous releases" label="Previous releases">
57+
<DropdownList>
58+
{previousReleases
59+
.slice(0, 3)
60+
.map((version) => getDropdownItem(version))}
61+
</DropdownList>
62+
</DropdownGroup>
63+
)}
64+
{previousVersions.length > 0 && (
65+
<><Divider key="divider1" /><DropdownGroup key="Previous versions" label="Previous versions">
66+
<DropdownList>
67+
{previousVersions.map((version) => getDropdownItem(version))}
68+
</DropdownList>
69+
</DropdownGroup></>)}
70+
</Dropdown>
71+
)
72+
}

0 commit comments

Comments
 (0)