Add work-in-progress new TopNav component

dictionary-octopus.txt

@@ -225,6 +225,7 @@ inetmgr
 inetsrv
 inkey
 inlinable
+inlines
 INSTALLLOCATION
 internalcustomer
 ioutil
@@ -634,6 +635,7 @@ windir
 windowsfeatures
 Wireshark
 WIXUI
+wordmark
 workerpool
 workerpools
 workertools

src/components/Button.astro

@@ -7,13 +7,15 @@ type Props = HTMLAttributes<'button'> & {
   icon?: string; // URL to an SVG or a FontAwesome class
   iconEnd?: string; // URL to an SVG or a FontAwesome class
   size?: 'xSmall' | 'small' | 'medium';
+  importance?: 'default' | 'loud';
 };
 
 const {
   label,
   icon,
   iconEnd,
   size = 'medium',
+  importance = 'default',
   disabled = false,
   type = 'button',
   class: className,
@@ -24,7 +26,7 @@ if (!label && !rest['aria-label'] && !rest['aria-labelledby']) {
   throw new Error('An icon-only button needs an aria-label for screen readers');
 }
 
-const classes = `btn btn--${size.toLowerCase()}${className ? ` ${className}` : ''}`;
+const classes = `btn btn--${size.toLowerCase()}${importance === 'loud' ? ' btn--loud' : ''}${className ? ` ${className}` : ''}`;
 ---
 
 <button class={classes} type={type} disabled={disabled} {...rest}>

src/components/TopNav.astro

@@ -0,0 +1,56 @@
+---
+import Logo from '../assets/octopus-logo-v2.svg';
+import Button from './Button.astro';
+
+type Props = {
+  active?: string;
+  links?: { label: string; href: string }[];
+};
+
+// TODO: Make these real links
+const {
+  active = 'Docs',
+  links = [
+    { label: 'Docs', href: '#' },
+    { label: 'Learn', href: '#' },
+    { label: 'API', href: '#' },
+    { label: 'CLI', href: '#' },
+  ],
+} = Astro.props;
+---
+
+<header class="top-nav">
+  <div class="top-nav__leading">
+    <a
+      class="top-nav__logo"
+      href="https://octopus.com"
+      aria-label="Octopus Deploy"
+    >
+      <Logo class="top-nav__logo-mark" aria-hidden="true" />
+    </a>
+    <nav class="top-nav__links" aria-label="Sections">
+      {
+        links.map(({ label, href }) => (
+          <a
+            class:list={[
+              'top-nav__link',
+              label === active && 'top-nav__link--active',
+            ]}
+            href={href}
+            aria-current={label === active ? 'page' : undefined}
+          >
+            {label}
+          </a>
+        ))
+      }
+    </nav>
+  </div>
+  <div class="top-nav__trailing">
+    <!-- All of these are just non-functional and for visual/presentation only at this stage -->
+    <Button icon="fa-regular fa-moon" aria-label="Switch to dark theme" />
+    <!-- TODO: Presumably at least some of these buttons should be <a> rather than <button> in practice, which isn't possible just yet -->
+    <Button label="Changelog" />
+    <Button label="Sign in" />
+    <Button label="Start for free" importance="loud" />
+  </div>
+</header>

src/pages/components.mdx

@@ -19,6 +19,7 @@ import IconTile from 'src/components/IconTile.astro';
 import Image from 'src/components/Image.astro';
 import Link from 'src/components/Link.astro';
 import Separator from 'src/components/Separator.astro';
+import TopNav from 'src/components/TopNav.astro';
 
 ## Component Usage Guide
 
@@ -46,8 +47,9 @@ The Button component renders an HTML `<button>`.
 1. **label**: Optional text label. Omit for an icon-only button.
 2. **icon** / **iconEnd**: Optional leading and/or trailing icon. Accepts a FontAwesome class (e.g. `iconEnd="fa-solid fa-caret-down"` for a dropdown button) or a URL to an SVG.
 3. **size**: Optional: `medium` (default), `small`, or `xSmall`.
-4. **disabled**: Optional `true`/`false`
-5. **type**: Optional: `button` (default), `submit`, or `reset`.
+4. **importance**: Optional: `default` or `loud`
+5. **disabled**: Optional `true`/`false`
+6. **type**: Optional: `button` (default), `submit`, or `reset`.
 
 An icon-only button has no visible text, so include an `aria-label` to give it an accessible name.
 
@@ -144,6 +146,37 @@ An icon-only button has no visible text, so include an `aria-label` to give it a
   </div>
 </div>
 
+### TopNav
+
+Temporary showcase for the new, work-in-progress TopNav component.
+
+{
+// Temporary hack: the nav needs more width than the cap on this page's main column, so the column takes the grid's
+// leftover space and everything except the nav is held back at the width the column normally maxes out at
+}
+<style>{`
+  @media (min-width: 1131px) {
+    .content-group {
+      grid-template-columns: var(--navigation-width) minmax(0, 1fr) var(--toc-width);
+    }
+
+    main > :not(article),
+    article > :not(.page-content),
+    .page-content > :not(.top-nav-showcase) {
+      max-width: var(--content-width-article);
+      margin-inline: auto;
+    }
+  }
+
+  .top-nav-showcase {
+    overflow-x: auto;
+  }
+`}</style>
+
+<div class="top-nav-showcase">
+  <TopNav />
+</div>
+
 ### Card
 
 The Card component displays content in a card format, suitable for highlights, features, or related topics.