docs: add additional stories

• docs: add story for jumbotron
• docs: add dropdown navbar
• docs: add story for direct nav
• docs: add story for promotion widget
• docs: add story for working group list widget

stories/layout/jumbotron.stories.ts

+
+import '../../less/astro/main.less';
+
+import type { StoryObj } from '@storybook/html';
+import { afterStoryRender, setOptionalAttribute, html } from '../utils';
+
+export default {
+  title: 'Layout/Jumbotron',
+};
+
+type Story = StoryObj<any>;
+
+const commonOptions: Partial<Story> = {
+  argTypes: {
+    container: {
+      control: 'text',
+      description: 'The container class for the jumbotron. E.g. "container" or "container-fluid"'
+    },
+    class: {
+      control: 'text',
+      description: 'The column class for the jumbotron',
+    },
+    headline: {
+      control: 'text',
+      description: 'The headline for the jumbotron'
+    },
+    subtitle: {
+      control: 'text',
+      description: 'The subtitle for the jumbotron',
+    },
+    background: {
+      control: 'text',
+      description: 'Background image url for the jumbotron', 
+    },
+  },
+  args: {
+    container: 'container',
+    class: 'col-md-20 col-md-offset-2 col-sm-18 col-sm-offset-3',
+    headline: 'Headline',
+    subtitle: 'Lorem ipsum dolor sit amet, consectetur.',
+    background: 'https://www.eclipse.org/public/images/vendor/eclipsefdn-solstice-components/landing-well/eclipse-home-bg.jpg',
+  },
+}
+
+export const Default: Story = {
+  ...commonOptions,
+  render: ({ 
+    class: jumbotronClass, 
+    container,
+    headline,
+    subtitle,
+    background,
+  }) => {
+    return html`
+      <header class="header-wrapper">
+        <div class="jumbotron featured-jumbotron featured-jumbotron-dark featured-jumbotron-astro margin-bottom-0" style="background-image: url('${background}');">
+          <div class="${container}">
+            <div class="row">
+              <div class="${jumbotronClass}">
+                <h1 class="featured-jumbotron-headline">${headline}</h1> 
+                <div class="featured-jumbotron-subtitle">
+                  ${subtitle}
+                </div>
+                <div class="row">
+                  <!-- @todo: Tagline -->
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+    `
+  }
+}