From 1b3aa1921a3a6c2251cd3803e7fe012fdc8631b6 Mon Sep 17 00:00:00 2001 From: Ross Lovas Date: Wed, 29 Jul 2026 15:49:42 +0930 Subject: [PATCH] Add work-in-progress new TopNav component --- dictionary-octopus.txt | 2 + src/assets/octopus-logo-v2.svg | 4 ++ src/components/Button.astro | 4 +- src/components/TopNav.astro | 56 +++++++++++++++++ src/pages/components.mdx | 37 ++++++++++- src/styles/main.css | 108 +++++++++++++++++++++++++++++++-- src/styles/vars.css | 10 ++- 7 files changed, 213 insertions(+), 8 deletions(-) create mode 100644 src/assets/octopus-logo-v2.svg create mode 100644 src/components/TopNav.astro diff --git a/dictionary-octopus.txt b/dictionary-octopus.txt index 8cca5bda76..3d54554a5e 100644 --- a/dictionary-octopus.txt +++ b/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 diff --git a/src/assets/octopus-logo-v2.svg b/src/assets/octopus-logo-v2.svg new file mode 100644 index 0000000000..bffd0a9517 --- /dev/null +++ b/src/assets/octopus-logo-v2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Button.astro b/src/components/Button.astro index e97f3dca1e..53d685205a 100644 --- a/src/components/Button.astro +++ b/src/components/Button.astro @@ -7,6 +7,7 @@ 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 { @@ -14,6 +15,7 @@ const { 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}` : ''}`; ---