Header width fixes and Port Selector tweaks

UKHomeOffice · Sep 5, 2024 · a566c10 · a566c10
1 parent 0be2ea0
commit a566c10
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 54 deletions.
diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx
@@ -7,60 +7,71 @@ const meta: Meta<typeof HeaderComponent> = {
   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<typeof HeaderComponent>;
 
-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
@@ -21,6 +21,7 @@ export interface IHeader {
   rightMenuItems?: MenuItem[],
   portMenuItems: MenuItem[],
   initialSelectedPortMenuItem: string,
+  maxWidth: string,
   routingFunction: (route: string) => void,
   logoutLink: () => void,
 }
@@ -37,6 +38,7 @@ const Header = ({
                   leftMenuItems,
                   portMenuItems,
                   initialSelectedPortMenuItem,
+                  maxWidth,
                   routingFunction,
                   logoutLink
                 }: IHeader) => {
@@ -56,7 +58,7 @@ const Header = ({
   return (
     <AppBar sx={{backgroundColor: '#fff'}} elevation={0} position={"sticky"}>
       <Box>
-        <Grid container sx={{maxWidth: '1200px', margin: '0 auto'}}>
+        <Grid container sx={{maxWidth, margin: '0 auto'}} maxWidth={'none'}>
           <Grid item xs={8}>
             <Box display="flex" mr={'auto'} sx={{
               padding: 2,
@@ -120,7 +122,7 @@ const Header = ({
         </Grid>
       </Box>
       <Box sx={{backgroundColor: '#f3f5f9', flexWrap: 'nowrap'}}>
-        <Grid container sx={{maxWidth: '1200px', margin: '0 auto'}}>
+        <Grid container sx={{maxWidth, margin: '0 auto'}}>
           <Grid item xs={12} sx={{backgroundColor: '#f3f5f9', padding: 2, flexWrap: 'nowrap'}}>
             <Grid container spacing={3}>
               <Grid item flexGrow={{xs: 1, md: 0}}>
@@ -159,7 +161,7 @@ const Header = ({
                     Admin
                   </Button>
                 </Grid>}
-              <Grid item>
+              <Grid item display={{xs: 'none', md: 'block'}}>
                 <Grid container>
                   {
                     rightMenuItems && rightMenuItems.map((menuItem) => {

diff --git a/src/components/Header/PortSelector.tsx b/src/components/Header/PortSelector.tsx
@@ -35,6 +35,9 @@ const StyledSelect = styled(Select)<SelectProps>(({ theme }) => ({
     fontWeight: 'bold !important',
     fontSize: '0.875rem !important',
     marginTop: '6px !important',
+  },
+  '& .MuiTypography-root': {
+    marginTop: 0,
   }
 }));
 
@@ -54,7 +57,7 @@ const PortSelector = ({handleChangePort, options, selectedOption}: IPortSelector
   }
 
   return (
-    <FormControl size="small">     
+    <FormControl sx={{width: '100%'}}>     
       <StyledSelect
         displayEmpty
         data-testid={`port-selector-trigger`}