Remove Safari 14 support in Wagtail admin – update browserslist and TypeScript (#11258)

Co-authored-by: Sage Abdullah <sage.abdullah@torchbox.com>

.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   extends: [
     '@wagtail/eslint-config-wagtail',
     'plugin:@typescript-eslint/recommended',
+    'plugin:storybook/recommended',
   ],
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],

client/scss/components/_button.scss

@@ -102,13 +102,7 @@
       height: 100%;
       box-sizing: content-box;
       text-align: center;
-      // Remove once we drop support for Safari 14.
-      // stylelint-disable-next-line property-disallowed-list
-      border-top-left-radius: inherit;
       border-start-start-radius: inherit;
-      // Remove once we drop support for Safari 14.
-      // stylelint-disable-next-line property-disallowed-list
-      border-bottom-left-radius: inherit;
       border-end-start-radius: inherit;
     }
 

client/scss/components/_userbar.scss

@@ -154,24 +154,12 @@ $positions: (
   }
 
   &:first-child {
-    // Remove once we drop support for Safari 14.
-    // stylelint-disable-next-line property-disallowed-list
-    border-top-left-radius: $userbar-radius;
     border-start-start-radius: $userbar-radius;
-    // Remove once we drop support for Safari 14.
-    // stylelint-disable-next-line property-disallowed-list
-    border-top-right-radius: $userbar-radius;
     border-start-end-radius: $userbar-radius;
   }
 
   &:last-child {
-    // Remove once we drop support for Safari 14.
-    // stylelint-disable-next-line property-disallowed-list
-    border-bottom-right-radius: $userbar-radius;
     border-end-end-radius: $userbar-radius;
-    // Remove once we drop support for Safari 14.
-    // stylelint-disable-next-line property-disallowed-list
-    border-bottom-left-radius: $userbar-radius;
     border-end-start-radius: $userbar-radius;
   }
 

client/src/components/CommentApp/main.scss

@@ -71,13 +71,7 @@ $box-padding: 20px;
 
   & > &__notice-placeholder:last-child &__notice,
   &__replies:last-child > :last-child &__notice {
-    // Remove once we drop support for Safari 14.
-    // stylelint-disable-next-line property-disallowed-list
-    border-bottom-left-radius: $box-border-radius;
     border-end-start-radius: $box-border-radius;
-    // Remove once we drop support for Safari 14.
-    // stylelint-disable-next-line property-disallowed-list
-    border-bottom-right-radius: $box-border-radius;
     border-end-end-radius: $box-border-radius;
   }
 }

client/src/components/Draftail/Draftail.scss

@@ -96,13 +96,7 @@ $draftail-editor-font-family: $font-sans;
 
 .Draftail-Toolbar {
   border-width: 0;
-  // Remove once we drop support for Safari 14.
-  // stylelint-disable-next-line property-disallowed-list
-  border-bottom-left-radius: 0;
   border-end-start-radius: 0;
-  // Remove once we drop support for Safari 14.
-  // stylelint-disable-next-line property-disallowed-list
-  border-bottom-right-radius: 0;
   border-end-end-radius: 0;
   background-color: $draftail-editor-background;
   color: $draftail-placeholder-text;

client/src/components/Sidebar/Sidebar.stories.tsx

@@ -8,6 +8,7 @@ import { LinkMenuItemDefinition } from './menu/LinkMenuItem';
 import { SubMenuItemDefinition } from './menu/SubMenuItem';
 import { WagtailBrandingModuleDefinition } from './modules/WagtailBranding';
 import { range } from '../../utils/range';
+import { MenuItemDefinition } from './menu/MenuItem';
 
 export default {
   title: 'Sidebar/Sidebar',
@@ -27,7 +28,7 @@ function bogStandardMenuModule(): MainMenuModuleDefinition {
           label: 'Pages',
           url: '/admin/pages',
           icon_name: 'folder-open-inverse',
-          classnames: '',
+          classname: '',
         },
         1,
       ),
@@ -36,35 +37,35 @@ function bogStandardMenuModule(): MainMenuModuleDefinition {
         label: 'Images',
         url: '/admin/images/',
         icon_name: 'image',
-        classnames: '',
+        classname: '',
       }),
       new LinkMenuItemDefinition({
         name: 'documents',
         label: 'Documents',
         url: '/admin/documents/',
         icon_name: 'doc-full-inverse',
-        classnames: '',
+        classname: '',
       }),
       new LinkMenuItemDefinition({
         name: 'snippets',
         label: 'Snippets',
         url: '/admin/snippets/',
         icon_name: 'snippet',
-        classnames: '',
+        classname: '',
       }),
       new LinkMenuItemDefinition({
         name: 'forms',
         label: 'Forms',
         url: '/admin/forms/',
         icon_name: 'form',
-        classnames: '',
+        classname: '',
       }),
       new SubMenuItemDefinition(
         {
           name: 'reports',
           label: 'Reports',
           icon_name: 'site',
-          classnames: '',
+          classname: '',
         },
         [
           new LinkMenuItemDefinition({
@@ -72,28 +73,28 @@ function bogStandardMenuModule(): MainMenuModuleDefinition {
             label: 'Locked pages',
             url: '/admin/reports/locked/',
             icon_name: 'lock',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'workflows',
             label: 'Workflows',
             url: '/admin/reports/workflow/',
             icon_name: 'tasks',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'workflow-tasks',
             label: 'Workflow tasks',
             url: '/admin/reports/workflow_tasks/',
             icon_name: 'thumbtack',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'site-history',
             label: 'Site history',
             url: '/admin/reports/site-history/',
             icon_name: 'history',
-            classnames: '',
+            classname: '',
           }),
         ],
       ),
@@ -102,7 +103,7 @@ function bogStandardMenuModule(): MainMenuModuleDefinition {
           name: 'settings',
           label: 'Settings',
           icon_name: 'cogs',
-          classnames: '',
+          classname: '',
           footer_text: 'Wagtail Version',
         },
         [
@@ -111,49 +112,49 @@ function bogStandardMenuModule(): MainMenuModuleDefinition {
             label: 'Workflows',
             url: '/admin/workflows/list/',
             icon_name: 'tasks',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'workflow-tasks',
             label: 'Workflow tasks',
             url: '/admin/workflows/tasks/index/',
             icon_name: 'thumbtack',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'users',
             label: 'Users',
             url: '/admin/users/',
             icon_name: 'user',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'groups',
             label: 'Groups',
             url: '/admin/groups/',
             icon_name: 'group',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'sites',
             label: 'Sites',
             url: '/admin/sites/',
             icon_name: 'site',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'collections',
             label: 'Collections',
             url: '/admin/collections/',
             icon_name: 'folder-open-1',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'redirects',
             label: 'Redirects',
             url: '/admin/redirects/',
             icon_name: 'redirect',
-            classnames: '',
+            classname: '',
           }),
         ],
       ),
@@ -164,14 +165,14 @@ function bogStandardMenuModule(): MainMenuModuleDefinition {
         label: 'Account',
         url: '/admin/account/',
         icon_name: 'user',
-        classnames: '',
+        classname: '',
       }),
       new LinkMenuItemDefinition({
         name: 'logout',
         label: 'Log out',
         url: '/admin/logout/',
         icon_name: 'logout',
-        classnames: '',
+        classname: '',
       }),
     ],
     {
@@ -218,6 +219,13 @@ function renderSidebarStory(
     document.documentElement.setAttribute('dir', 'ltr');
   }
 
+  React.useEffect(
+    () => () => {
+      document.documentElement.removeAttribute('dir');
+    },
+    [],
+  );
+
   return (
     <div className="wrapper">
       <Sidebar
@@ -249,7 +257,7 @@ export function withNestedSubmenu() {
         name: 'nested-menu',
         label: 'Nested menu',
         icon_name: 'cogs',
-        classnames: '',
+        classname: '',
       },
       [
         new LinkMenuItemDefinition({
@@ -257,14 +265,14 @@ export function withNestedSubmenu() {
           label: 'Item',
           url: '/admin/item/',
           icon_name: 'user',
-          classnames: '',
+          classname: '',
         }),
         new SubMenuItemDefinition(
           {
             name: 'nested-menu',
             label: 'Nested menu',
             icon_name: 'folder-open-1',
-            classnames: '',
+            classname: '',
           },
           [
             new LinkMenuItemDefinition({
@@ -272,14 +280,14 @@ export function withNestedSubmenu() {
               label: 'Item',
               url: '/admin/item/item/',
               icon_name: 'user',
-              classnames: '',
+              classname: '',
             }),
             new SubMenuItemDefinition(
               {
                 name: 'deeply-nested-menu',
                 label: 'Deeply nested menu',
                 icon_name: 'side',
-                classnames: '',
+                classname: '',
               },
               [
                 new LinkMenuItemDefinition({
@@ -287,7 +295,7 @@ export function withNestedSubmenu() {
                   label: 'Item',
                   url: '/admin/item/item/item/',
                   icon_name: 'user',
-                  classnames: '',
+                  classname: '',
                 }),
               ],
             ),
@@ -296,7 +304,7 @@ export function withNestedSubmenu() {
                 name: 'another-deeply-nested-menu',
                 label: 'Another deeply nested menu',
                 icon_name: 'user',
-                classnames: '',
+                classname: '',
               },
               [
                 new LinkMenuItemDefinition({
@@ -304,7 +312,7 @@ export function withNestedSubmenu() {
                   label: 'Item',
                   url: '/admin/item/item/item2/',
                   icon_name: 'user',
-                  classnames: '',
+                  classname: '',
                 }),
               ],
             ),
@@ -320,7 +328,7 @@ export function withNestedSubmenu() {
 export function withLargeSubmenu() {
   const menuModule = bogStandardMenuModule();
 
-  const menuItems = [];
+  const menuItems: MenuItemDefinition[] = [];
   range(0, 100).forEach((i) => {
     menuItems.push(
       new LinkMenuItemDefinition({
@@ -328,7 +336,7 @@ export function withLargeSubmenu() {
         label: `Item ${i}`,
         url: `/admin/item-${i}/`,
         icon_name: 'snippet',
-        classnames: '',
+        classname: '',
       }),
     );
   });
@@ -339,7 +347,7 @@ export function withLargeSubmenu() {
         name: 'large-menu',
         label: 'Large menu',
         icon_name: 'cogs',
-        classnames: '',
+        classname: '',
         footer_text: 'Footer text',
       },
       menuItems,
@@ -356,48 +364,50 @@ export function withoutSearch() {
 function arabicMenuModule(): MainMenuModuleDefinition {
   return new MainMenuModuleDefinition(
     [
-      new PageExplorerMenuItemDefinition({
-        name: 'explorer',
-        label: 'صفحات',
-        url: '/admin/pages',
-        start_page_id: 1,
-        icon_name: 'folder-open-inverse',
-        classnames: '',
-      }),
+      new PageExplorerMenuItemDefinition(
+        {
+          name: 'explorer',
+          label: 'صفحات',
+          url: '/admin/pages',
+          icon_name: 'folder-open-inverse',
+          classname: '',
+        },
+        1,
+      ),
       new LinkMenuItemDefinition({
         name: 'images',
         label: 'صور',
         url: '/admin/images/',
         icon_name: 'image',
-        classnames: '',
+        classname: '',
       }),
       new LinkMenuItemDefinition({
         name: 'documents',
         label: 'وثائق',
         url: '/admin/documents/',
         icon_name: 'doc-full-inverse',
-        classnames: '',
+        classname: '',
       }),
       new LinkMenuItemDefinition({
         name: 'snippets',
         label: 'قصاصات',
         url: '/admin/snippets/',
         icon_name: 'snippet',
-        classnames: '',
+        classname: '',
       }),
       new LinkMenuItemDefinition({
         name: 'forms',
         label: 'نماذج',
         url: '/admin/forms/',
         icon_name: 'form',
-        classnames: '',
+        classname: '',
       }),
       new SubMenuItemDefinition(
         {
           name: 'reports',
           label: 'التقارير',
           icon_name: 'site',
-          classnames: '',
+          classname: '',
         },
         [
           new LinkMenuItemDefinition({
@@ -405,28 +415,28 @@ function arabicMenuModule(): MainMenuModuleDefinition {
             label: 'Locked pages',
             url: '/admin/reports/locked/',
             icon_name: 'lock',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'workflows',
             label: 'Workflows',
             url: '/admin/reports/workflow/',
             icon_name: 'tasks',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'workflow-tasks',
             label: 'Workflow tasks',
             url: '/admin/reports/workflow_tasks/',
             icon_name: 'thumbtack',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'site-history',
             label: 'Site history',
             url: '/admin/reports/site-history/',
             icon_name: 'history',
-            classnames: '',
+            classname: '',
           }),
         ],
       ),
@@ -435,7 +445,7 @@ function arabicMenuModule(): MainMenuModuleDefinition {
           name: 'settings',
           label: 'إعدادات',
           icon_name: 'cogs',
-          classnames: '',
+          classname: '',
         },
         [
           new LinkMenuItemDefinition({
@@ -443,49 +453,49 @@ function arabicMenuModule(): MainMenuModuleDefinition {
             label: 'Workflows',
             url: '/admin/workflows/list/',
             icon_name: 'tasks',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'workflow-tasks',
             label: 'Workflow tasks',
             url: '/admin/workflows/tasks/index/',
             icon_name: 'thumbtack',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'users',
             label: 'مستخدمين',
             url: '/admin/users/',
             icon_name: 'user',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'groups',
             label: 'مجموعات',
             url: '/admin/groups/',
             icon_name: 'group',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'sites',
             label: 'مواقع',
             url: '/admin/sites/',
             icon_name: 'site',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'collections',
             label: 'مجموعات',
             url: '/admin/collections/',
             icon_name: 'folder-open-1',
-            classnames: '',
+            classname: '',
           }),
           new LinkMenuItemDefinition({
             name: 'redirects',
             label: 'اعادة التوجيهات',
             url: '/admin/redirects/',
             icon_name: 'redirect',
-            classnames: '',
+            classname: '',
           }),
         ],
       ),
@@ -496,14 +506,14 @@ function arabicMenuModule(): MainMenuModuleDefinition {
         label: 'حساب',
         url: '/admin/account/',
         icon_name: 'user',
-        classnames: '',
+        classname: '',
       }),
       new LinkMenuItemDefinition({
         name: 'logout',
         label: 'تسجيل الخروج',
         url: '/admin/logout/',
         icon_name: 'logout',
-        classnames: '',
+        classname: '',
       }),
     ],
     {

client/src/components/Sidebar/menu/ActionMenuItem.tsx

@@ -81,7 +81,7 @@ export class ActionMenuItemDefinition implements MenuItemDefinition {
     name,
     label,
     action,
-    attrs,
+    attrs = {},
     icon_name: iconName = null,
     classname = undefined,
     method = 'POST',

client/src/components/Sidebar/menu/LinkMenuItem.tsx

@@ -96,9 +96,9 @@ export class LinkMenuItemDefinition implements MenuItemDefinition {
     name,
     label,
     url,
-    attrs,
-    icon_name: iconName = null,
-    classname = undefined,
+    attrs = {},
+    icon_name: iconName = null as string | null,
+    classname = undefined as string | undefined,
   }) {
     this.name = name;
     this.label = label;

client/src/components/Sidebar/menu/PageExplorerMenuItem.tsx

@@ -120,9 +120,9 @@ export class PageExplorerMenuItemDefinition extends LinkMenuItemDefinition {
       name,
       label,
       url,
-      attrs,
-      icon_name: iconName = null,
-      classname = undefined,
+      attrs = {},
+      icon_name: iconName = null as string | null,
+      classname = undefined as string | undefined,
     },
     startPageId: number,
   ) {

client/src/components/Sidebar/menu/SubMenuItem.tsx

@@ -168,7 +168,7 @@ export class SubMenuItemDefinition implements MenuItemDefinition {
     {
       name,
       label,
-      attrs,
+      attrs = {},
       icon_name: iconName = null,
       classname = undefined,
       footer_text: footerText = '',

client/storybook/main.js

@@ -2,18 +2,16 @@ module.exports = {
   stories: [
     '../../client/**/*.stories.mdx',
     '../../client/**/*.stories.@(js|tsx)',
-    {
-      directory: '../../wagtail/admin/templates/wagtailadmin/shared/',
-      titlePrefix: 'Shared',
-      files: '**/*.stories.*',
-    },
     '../../wagtail/**/*.stories.*',
   ],
+
   addons: ['@storybook/addon-docs', '@storybook/addon-controls'],
-  framework: '@storybook/react',
-  core: {
-    builder: 'webpack5',
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
   },
+
   // Redefine Babel config to allow TypeScript class fields `declare`.
   // See https://github.com/storybookjs/storybook/issues/12479.
   // The resulting configuration is closer to Wagtail’s Webpack + TypeScript setup,
@@ -26,6 +24,7 @@ module.exports = {
       ['@babel/preset-react', { runtime: 'automatic' }],
     ],
   }),
+
   webpackFinal: (config) => {
     /* eslint-disable no-param-reassign */
 
@@ -67,4 +66,8 @@ module.exports = {
 
     return config;
   },
+
+  docs: {
+    autodocs: true,
+  },
 };

docs/contributing/developing.md

@@ -216,14 +216,7 @@ Wagtail is meant to be used on a wide variety of devices and browsers. Supported
 | Firefox ESR   | Desktop    | Latest     |
 | Safari        | macOS      | Last 3     |
 
-We aim for Wagtail to work in those environments, there are known support gaps for Safari 13 introduced in Wagtail 4.0 to provide better support for RTL languages. Our development standards ensure that the site is usable on other browsers **and will work on future browsers**.
-
-IE 11 support has been officially dropped in 2.15 as it is gradually falling out of use. Features already known not to work include:
-
--   Rich text copy-paste in the rich text editor.
--   Sticky toolbar in the rich text editor.
--   Focus outline styles in the main menu & explorer menu.
--   Keyboard access to the actions in page listing tables.
+We aim for Wagtail to work in those environments. Our development standards ensure that the site is usable on other browsers **and will work on future browsers**.
 
 **Unsupported browsers / devices include:**
 

package.json

@@ -14,7 +14,8 @@
     "last 1 Firefox version",
     "last 2 iOS versions",
     "last 3 Safari versions",
-    "not safari 13",
+    "iOS >= 16",
+    "Safari 15",
     "not ie 11"
   ],
   "jest": {
@@ -56,11 +57,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
-    "@storybook/addon-controls": "^6.4.19",
-    "@storybook/addon-docs": "^6.4.19",
-    "@storybook/builder-webpack5": "^6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/react": "^6.4.19",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@storybook/addon-controls": "^7.5.3",
+    "@storybook/addon-docs": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
     "@types/autosize": "^4.0.1",
     "@types/draft-js": "^0.10.45",
     "@types/jest": "^29.5.3",
@@ -81,6 +84,7 @@
     "enzyme-adapter-react-16": "^1.15.7",
     "enzyme-to-json": "^3.6.2",
     "eslint": "^8.46.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "expose-loader": "^3.1.0",
     "gettext-extractor": "^3.5.3",
     "jest": "^29.6.2",
@@ -93,13 +97,14 @@
     "redux-mock-store": "^1.3.0",
     "sass": "^1.45.1",
     "sass-loader": "^12.4.0",
+    "storybook": "^7.5.3",
     "storybook-django": "^0.5.1",
     "stylelint": "^15.10.0",
     "tailwindcss": "^3.1.5",
     "tailwindcss-vanilla-rtl": "^0.2.0",
     "ts-jest": "^29.1.0",
     "ts-loader": "^9.2.6",
-    "typescript": "^4.5.4",
+    "typescript": "^5.2.2",
     "webpack": "^5.76.0",
     "webpack-cli": "^4.9.1"
   },
@@ -145,7 +150,7 @@
     "test:unit:watch": "jest --watch",
     "test:unit:coverage": "jest --coverage",
     "test:integration": "./client/tests/integration/node_modules/.bin/jest --config ./client/tests/integration/jest.config.js",
-    "storybook": "start-storybook -c client/storybook -p 6006 --no-open --no-version-updates --no-release-notes --quiet --modern",
-    "build-storybook": "build-storybook -c client/storybook --modern"
+    "storybook": "storybook dev -c client/storybook -p 6006 --no-open --no-version-updates",
+    "build-storybook": "storybook build -c client/storybook"
   }
 }

tsconfig.json

@@ -5,14 +5,14 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "lib": ["ES2021", "DOM", "DOM.iterable"],
+    "lib": ["ES2022", "DOM", "DOM.iterable"],
     "moduleResolution": "node",
     "noImplicitAny": false, // TODO: Enable once all existing code is typed
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "strictNullChecks": true,
     "strictPropertyInitialization": true,
-    "target": "ES2021" // Since lowest browser support is for Safari 14
+    "target": "ES2022"
   },
   "files": [
     "client/src/index.ts",

wagtail/admin/templates/wagtailadmin/shared/avatar.stories.tsx

@@ -6,6 +6,7 @@ import template from './avatar.html';
 const { docs, argTypes } = generateDocs(template);
 
 export default {
+  title: 'Shared / Avatar',
   parameters: {
     docs,
   },

wagtail/admin/templates/wagtailadmin/shared/breadcrumbs.stories.tsx

@@ -9,6 +9,7 @@ import template from './breadcrumbs.html';
 const { docs, argTypes } = generateDocs(template);
 
 export default {
+  title: 'Shared / Breadcrumbs',
   parameters: { docs },
   argTypes: { ...argTypes },
 };

wagtail/admin/templates/wagtailadmin/shared/dropdown/dropdown.stories.tsx

@@ -9,6 +9,7 @@ import template from './dropdown.html';
 const { docs, argTypes } = generateDocs(template);
 
 export default {
+  title: 'Shared / Dropdown',
   parameters: {
     docs,
   },

wagtail/admin/templates/wagtailadmin/shared/header.stories.tsx

@@ -6,6 +6,7 @@ import template from './header.html';
 const { docs, argTypes } = generateDocs(template);
 
 export default {
+  title: 'Shared / Header',
   parameters: {
     docs,
   },

wagtail/admin/templates/wagtailadmin/shared/help_block.stories.tsx

@@ -6,6 +6,7 @@ import template from './help_block.html';
 const { docs, argTypes } = generateDocs(template);
 
 export default {
+  title: 'Shared / Help Block',
   parameters: { docs },
   argTypes: { ...argTypes },
 };

wagtail/admin/templates/wagtailadmin/shared/page_breadcrumbs.stories.tsx

@@ -9,6 +9,7 @@ import template from './page_breadcrumbs.html';
 const { docs, argTypes } = generateDocs(template);
 
 export default {
+  title: 'Shared / Page Breadcrumbs',
   parameters: { docs },
   argTypes: { ...argTypes },
 };

wagtail/admin/templates/wagtailadmin/shared/status_tag.stories.tsx

@@ -6,6 +6,7 @@ import template from './status_tag.html';
 const { docs, argTypes } = generateDocs(template);
 
 export default {
+  title: 'Shared / Status Tag',
   parameters: { docs },
   argTypes: {
     ...argTypes,