Merge branch 'main' of github.com:UKHomeOffice/drt-react into DRTII-1…

…557-min-staff
UKHomeOffice · Sep 25, 2024 · fcf278b · fcf278b
2 parents d40922e + 4af0e47
commit fcf278b
Show file tree

Hide file tree

Showing 5 changed files with 201 additions and 141 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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: {},
 };