Add tabs to pattern library

- Added tabbed interface to pattern library (storybook)
- Added tab nav link to pattern library (storybook)
- fixes #8632

CHANGELOG.txt

@@ -28,7 +28,7 @@ Changelog
  * Add ability to define a custom `get_field_clean_name` method when defining `FormField` models that extend `AbstractFormField` (LB (Ben) Johnston)
  * Migrate Home (Dashboard) view to use generic Wagtail class based view (LB (Ben) Johnston)
  * Combine most of Wagtail’s stylesheets into the global `core.css` file (Thibaud Colas)
- * Add new Breadcrumbs to the Wagtail pattern library (Paarth Agarwal)
+ * Add new Breadcrumbs and Tabs to the Wagtail pattern library (Paarth Agarwal)
  * Adopt new Page Editor UI tabs in the workflow history report page (Paarth Agarwal)
  * Update `ReportView` to extend from generic `wagtail.admin.views.generic.models.IndexView` (Sage Abdullah)
  * Fix: Typo in `ResumeWorkflowActionFormatter` message (Stefan Hammer)

docs/releases/4.0.md

@@ -37,7 +37,7 @@ When using a queryset to render a list of images, you can now use the ``prefetch
  * Add ability to define a custom `get_field_clean_name` method when defining `FormField` models that extend `AbstractFormField` (LB (Ben) Johnston)
  * Migrate Home (Dashboard) view to use generic Wagtail class based view (LB (Ben) Johnston)
  * Combine most of Wagtail’s stylesheets into the global `core.css` file (Thibaud Colas)
- * Add new Breadcrumbs to the Wagtail pattern library (Paarth Agarwal)
+ * Add new Breadcrumbs and Tabs to the Wagtail pattern library (Paarth Agarwal)
  * Adopt new Page Editor UI tabs in the workflow history report page (Paarth Agarwal)
  * Update `ReportView` to extend from generic `wagtail.admin.views.generic.models.IndexView` (Sage Abdullah)
 

wagtail/admin/templates/wagtailadmin/panels/tabbed_interface.stories.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Pattern, generateDocs } from 'storybook-django/src/react';
+import { initTabs } from '../../../../../client/src/includes/tabs';
+import template from './tabbed_interface.html';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initTabs();
+});
+
+const { docs, argTypes } = generateDocs(template);
+
+export default {
+  title: 'Shared / Tabs / TabbedInterface',
+  parameters: { docs },
+  argTypes: { ...argTypes },
+};
+
+const Template = (args) => <Pattern filename={__filename} context={args} />;
+
+export const Base = Template.bind({});
+
+Base.args = {
+  self: {
+    visible_children: [
+      {
+        heading: 'Content',
+        render_as_object: `<h2>Content</h2><div>Content Body</div>`,
+      },
+      {
+        heading: 'Promote',
+        render_as_object: `<h2>Promote</h2><div>Promote Body</div>`,
+      },
+      {
+        heading: 'Settings',
+        render_as_object: `<h2>Settings</h2><div>Settings Body</div>`,
+      },
+    ],
+  },
+};
+
+export const Single = Template.bind({});
+
+Single.args = {
+  self: {
+    visible_children: [
+      {
+        heading: 'Tab1',
+        render_as_object: `<h2>Title1</h2><div>Body Text</div>`,
+      },
+    ],
+  },
+};
+
+export const Multiple = Template.bind({});
+
+Multiple.args = {
+  self: {
+    visible_children: [
+      {
+        heading: 'Tab1',
+        render_as_object: `<h1>Title 1</h1><div>Body Text</div>`,
+      },
+      {
+        heading: 'Tab2',
+        render_as_object: `<h1>Title 2</h1><div>Body Text</div>`,
+      },
+      {
+        heading: 'Tab3',
+        render_as_object: `<h1>Title 3</h1><div>Body Text</div>`,
+      },
+      {
+        heading: 'Tab4',
+        render_as_object: `<h1>Title 4</h1><div>Body Text</div>`,
+      },
+      {
+        heading: 'Tab5',
+        render_as_object: `<h1>Title 5</h1><div>Body Text</div>`,
+      },
+    ],
+  },
+};

wagtail/admin/templates/wagtailadmin/shared/tabs/tab_nav_link.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Pattern, generateDocs } from 'storybook-django/src/react';
+
+import template from './tab_nav_link.html';
+
+const { docs, argTypes } = generateDocs(template);
+
+export default {
+  title: 'Shared / Tabs / TabsNavLink',
+  parameters: { docs },
+  argTypes: { ...argTypes },
+};
+
+const Template = (args) => <Pattern filename={__filename} context={args} />;
+
+export const Base = Template.bind({});
+
+Base.args = {
+  tab_id: 'tasks',
+  title: 'Tasks',
+};
+
+export const Errors = Template.bind({});
+
+Errors.args = {
+  tab_id: 'content',
+  title: 'Content',
+  errors_count: 35,
+};

wagtail/test/settings_ui.py

@@ -15,7 +15,7 @@ PATTERN_LIBRARY = {
     # Groups of templates for the pattern library navigation. The keys
     # are the group titles and the values are lists of template name prefixes that will
     # be searched to populate the groups.
-    "SECTIONS": (("components", ["wagtailadmin/shared"]),),
+    "SECTIONS": (("components", ["wagtailadmin/shared", "wagtailadmin/panels"]),),
     # Configure which files to detect as templates.
     "TEMPLATE_SUFFIX": ".html",
     "PATTERN_BASE_TEMPLATE_NAME": "",