diff --git a/package-lock.json b/package-lock.json index 36dd4f8..3e7164e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@drt/drt-react-components", - "version": "1.0.0", + "version": "1.5.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@drt/drt-react-components", - "version": "1.0.0", + "version": "1.5.0", "license": "MIT", "dependencies": { "-": "^0.0.1", @@ -16,7 +16,7 @@ "@fontsource/roboto": "^5.0.13", "@mui/icons-material": "5.11.16", "@mui/lab": "5.0.0-alpha.119", - "@mui/material": "5.11", + "@mui/material": "5.16.5", "@storybook/addon-a11y": "^8.1.10", "@storybook/icons": "^1.2.9", "@svgr/webpack": "^8.1.0", @@ -36,7 +36,7 @@ "@emotion/styled": "^11.11.5", "@mui/icons-material": "5.11.16", "@mui/lab": "5.0.0-alpha.119", - "@mui/material": "5.11", + "@mui/material": "5.16.5", "@rollup/plugin-commonjs": "^24.0.1", "@rollup/plugin-image": "^3.0.3", "@rollup/plugin-node-resolve": "^15.0.2", @@ -86,9 +86,9 @@ "peerDependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", - "@mui/icons-material": "5.11.16", + "@mui/icons-material": "5.16.5", "@mui/lab": "5.0.0-alpha.119", - "@mui/material": "5.11", + "@mui/material": "5.16.5", "react": "18.2.0", "react-dom": "18.2.0" } @@ -2830,9 +2830,10 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.15.19", + "version": "5.16.7", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz", + "integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==", "dev": true, - "license": "MIT", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" @@ -2905,21 +2906,22 @@ } }, "node_modules/@mui/material": { - "version": "5.11.16", + "version": "5.16.5", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.5.tgz", + "integrity": "sha512-eQrjjg4JeczXvh/+8yvJkxWIiKNHVptB/AqpsKfZBWp5mUD5U3VsjODMuUl1K2BSq0omV3CiO/mQmWSSMKSmaA==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/runtime": "^7.21.0", - "@mui/base": "5.0.0-alpha.124", - "@mui/core-downloads-tracker": "^5.11.16", - "@mui/system": "^5.11.16", - "@mui/types": "^7.2.3", - "@mui/utils": "^5.11.13", - "@types/react-transition-group": "^4.4.5", - "clsx": "^1.2.1", - "csstype": "^3.1.2", + "@babel/runtime": "^7.23.9", + "@mui/core-downloads-tracker": "^5.16.5", + "@mui/system": "^5.16.5", + "@mui/types": "^7.2.15", + "@mui/utils": "^5.16.5", + "@popperjs/core": "^2.11.8", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", "prop-types": "^15.8.1", - "react-is": "^18.2.0", + "react-is": "^18.3.1", "react-transition-group": "^4.4.5" }, "engines": { @@ -2927,7 +2929,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@emotion/react": "^11.5.0", @@ -2948,45 +2950,23 @@ } } }, - "node_modules/@mui/material/node_modules/@mui/base": { - "version": "5.0.0-alpha.124", + "node_modules/@mui/material/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", "dev": true, - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.21.0", - "@emotion/is-prop-valid": "^1.2.0", - "@mui/types": "^7.2.3", - "@mui/utils": "^5.11.13", - "@popperjs/core": "^2.11.7", - "clsx": "^1.2.1", - "prop-types": "^15.8.1", - "react-is": "^18.2.0" - }, "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } + "node": ">=6" } }, "node_modules/@mui/private-theming": { - "version": "5.15.14", + "version": "5.16.6", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz", + "integrity": "sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==", "dev": true, - "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.15.14", + "@mui/utils": "^5.16.6", "prop-types": "^15.8.1" }, "engines": { @@ -3007,9 +2987,10 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.15.14", + "version": "5.16.6", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.6.tgz", + "integrity": "sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==", "dev": true, - "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", "@emotion/cache": "^11.11.0", @@ -3038,15 +3019,16 @@ } }, "node_modules/@mui/system": { - "version": "5.15.15", + "version": "5.16.7", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz", + "integrity": "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==", "dev": true, - "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/private-theming": "^5.15.14", - "@mui/styled-engine": "^5.15.14", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.15.14", + "@mui/private-theming": "^5.16.6", + "@mui/styled-engine": "^5.16.6", + "@mui/types": "^7.2.15", + "@mui/utils": "^5.16.6", "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -3085,11 +3067,12 @@ } }, "node_modules/@mui/types": { - "version": "7.2.14", + "version": "7.2.16", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.16.tgz", + "integrity": "sha512-qI8TV3M7ShITEEc8Ih15A2vLzZGLhD+/UPNwck/hcls2gwg7dyRjNGXcQYHKLB5Q7PuTRfrTkAoPa2VV1s67Ag==", "dev": true, - "license": "MIT", "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -3098,14 +3081,17 @@ } }, "node_modules/@mui/utils": { - "version": "5.15.14", + "version": "5.16.6", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz", + "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==", "dev": true, - "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@types/prop-types": "^15.7.11", + "@mui/types": "^7.2.15", + "@types/prop-types": "^15.7.12", + "clsx": "^2.1.1", "prop-types": "^15.8.1", - "react-is": "^18.2.0" + "react-is": "^18.3.1" }, "engines": { "node": ">=12.0.0" @@ -3124,6 +3110,15 @@ } } }, + "node_modules/@mui/utils/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@ndelangen/get-tarball": { "version": "3.0.9", "dev": true, diff --git a/package.json b/package.json index 044f787..a1db2f1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@drt/drt-react-components", - "version": "1.3.0", + "version": "1.5.1", "description": "React components for DRT applications", "main": "dist/cjs/bundle.js", "module": "dist/esm/bundle.js", diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx index 2183981..0700776 100644 --- a/src/components/Header/Header.stories.tsx +++ b/src/components/Header/Header.stories.tsx @@ -7,60 +7,71 @@ const meta: Meta = { component: HeaderComponent, }; +const HeaderArgs = { + userRoles: [ + 'manage-users', + 'download-manager', + 'health-checks:edit', + ], + portMenuItems: [ + { label: 'National Dashboard', link: '/national-pressure' }, + { label: 'CWL (Cardiff)', link: '/cwi' } + ], + adminMenuItems: [ + { label: 'Home', link: '/', roles: []}, + { label: 'Access requests', link: '/access-requests', roles: ['manage-users']}, + { label: 'Alert notices', link: '/alerts', roles: ['manage-users']}, + { label: 'Drop-in sessions', link: '/drop-in-sessions', roles: ['manage-users']}, + { label: 'Download Manager', link: '/download', roles: ['download-manager']}, + { label: 'Export Config', link: '/export-config', roles: ['manage-users']}, + { label: 'Feature guides', link: '/feature-guides', roles: ['manage-users']}, + { label: 'Health checks', link: '/health-checks', roles: ['health-checks:edit']}, + { label: 'Health check pauses', link: '/health-check-pauses', roles: ['health-checks:edit']}, + { label: 'Feedback', link: '/user-feedback', roles: ['manage-users']}, + { label: 'Users', link: '/users', roles: ['manage-users']}, + ], + leftMenuItems: [ + { + label: 'Port config', + link: '/port-config', + icon: 'Settings', + }, + { + label: 'Feed', + link: '/feed', + icon: 'Equalizer', + } + ], + rightMenuItems: [ + { + label: "What's new", + link: '/whats-new', + icon: 'Article', + }, + { + label: 'Training', + link: '/training', + icon: 'MenuBook', + } + ], + maxWidth: 'none', + initialSelectedPortMenuItem: '', + routingFunction: (string: string) => console.log(string), + logoutLink: () => {}, +} + export default meta; type Story = StoryObj; -export const Header: Story = { +export const FullWidthHeader: Story = { + args: HeaderArgs, + parameters: {}, +}; + +export const ConstrainedWidthHeader: Story = { args: { - userRoles: [ - 'manage-users', - 'download-manager', - 'health-checks:edit', - ], - portMenuItems: [ - { label: 'National Dashboard', link: '/national-pressure' }, - { label: 'CWL (Cardiff)', link: '/cwi' } - ], - adminMenuItems: [ - { label: 'Home', link: '/', roles: []}, - { label: 'Access requests', link: '/access-requests', roles: ['manage-users']}, - { label: 'Alert notices', link: '/alerts', roles: ['manage-users']}, - { label: 'Drop-in sessions', link: '/drop-in-sessions', roles: ['manage-users']}, - { label: 'Download Manager', link: '/download', roles: ['download-manager']}, - { label: 'Export Config', link: '/export-config', roles: ['manage-users']}, - { label: 'Feature guides', link: '/feature-guides', roles: ['manage-users']}, - { label: 'Health checks', link: '/health-checks', roles: ['health-checks:edit']}, - { label: 'Health check pauses', link: '/health-check-pauses', roles: ['health-checks:edit']}, - { label: 'Feedback', link: '/user-feedback', roles: ['manage-users']}, - { label: 'Users', link: '/users', roles: ['manage-users']}, - ], - leftMenuItems: [ - { - label: 'Port config', - link: '/port-config', - icon: 'Settings', - }, - { - label: 'Feed', - link: '/feed', - icon: 'Equalizer', - } - ], - rightMenuItems: [ - { - label: "What's new", - link: '/whats-new', - icon: 'Article', - }, - { - label: 'Training', - link: '/training', - icon: 'MenuBook', - } - ], - initialSelectedPortMenuItem: '', - routingFunction: (string) => console.log(string), - logoutLink: () => {}, + ...HeaderArgs, + maxWidth: '1280px', }, parameters: {}, }; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 31c02ad..219d3b5 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -21,6 +21,7 @@ export interface IHeader { rightMenuItems?: MenuItem[], portMenuItems: MenuItem[], initialSelectedPortMenuItem: string, + maxWidth: string, routingFunction: (route: string) => void, logoutLink: () => void, } @@ -37,12 +38,14 @@ const Header = ({ leftMenuItems, portMenuItems, initialSelectedPortMenuItem, + maxWidth, routingFunction, logoutLink }: IHeader) => { const [anchorEl, setAnchorEl] = React.useState(null); const [selectedPortOption, setSelectedPortOption] = React.useState(initialSelectedPortMenuItem); const open = Boolean(anchorEl); + const handleClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); }; @@ -56,30 +59,83 @@ const Header = ({ return ( - + - - Border - Force - Dynamic Response Tool + + + + + + Border Force + + + + + Dynamic Response Tool + + + + - Contact: drtpoiseteam@homeoffice.gov.uk {hasAdminMenuRoles && - +