Merge pull request #875 from ably/web-4400-custom-header-logo

[WEB-4400] chore: add optional badge to logo component, add support to header

Author: jamiehenson

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.6.1",
+  "version": "17.6.2",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

src/core/Header.tsx

@@ -136,6 +136,11 @@ export type HeaderProps = {
    * Optional location object to detect location changes.
    */
   location?: Location;
+
+  /**
+   * Optional badge text to display on the logo.
+   */
+  logoBadge?: string;
 };
 
 const FLEXIBLE_DESKTOP_CLASSES = "hidden md:flex flex-1 items-center h-full";
@@ -160,6 +165,7 @@ const Header: React.FC<HeaderProps> = ({
   themedScrollpoints = [],
   searchButtonVisibility = "all",
   location,
+  logoBadge,
 }) => {
   const [showMenu, setShowMenu] = useState(false);
   const [fadingOut, setFadingOut] = useState(false);
@@ -248,7 +254,7 @@ const Header: React.FC<HeaderProps> = ({
       <header
         role="banner"
         className={cn(
-          "fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-6 md:px-16",
+          "fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-6 lg:px-16",
           scrollpointClasses,
           {
             "md:top-auto": bannerVisible,
@@ -263,8 +269,9 @@ const Header: React.FC<HeaderProps> = ({
                 key={theme}
                 href={logoHref}
                 theme={theme}
+                badge={logoBadge}
                 additionalLinkAttrs={{
-                  className: cn("h-full focus-base rounded mr-8 w-24", {
+                  className: cn("h-full focus-base rounded mr-4 lg:mr-8", {
                     "flex dark:hidden": theme === "light",
                     "hidden dark:flex": theme === "dark",
                   }),

src/core/Header/Header.stories.tsx

@@ -143,3 +143,9 @@ WithSearchBar.args = {
     <input type="text" placeholder="Search" className="ui-input w-64" />
   ),
 };
+
+export const WithLogoBadge = Template.bind({});
+WithLogoBadge.args = {
+  ...baseArgs,
+  logoBadge: "docs",
+};

src/core/Logo.tsx

@@ -1,4 +1,6 @@
-import React from "react";
+import React, { AnchorHTMLAttributes, ImgHTMLAttributes } from "react";
+import Badge from "./Badge";
+import cn from "./utils/cn";
 import LogoAssetMonoStacked from "./images/logo/ably-logo-mono-stacked.svg";
 import LogoAssetMonoWhiteStacked from "./images/logo/ably-logo-mono-white-stacked.svg";
 import LogoAssetMonoWhite from "./images/logo/ably-logo-mono-white.svg";
@@ -13,11 +15,12 @@ type LogoProps = {
   logoUrl?: string;
   logoAlt?: string;
   href?: string;
-  additionalImgAttrs?: object;
-  additionalLinkAttrs?: object;
+  additionalImgAttrs?: ImgHTMLAttributes<HTMLImageElement>;
+  additionalLinkAttrs?: AnchorHTMLAttributes<HTMLAnchorElement>;
   theme?: "light" | "dark";
   variant?: "default" | "mono";
   orientation?: "default" | "stacked";
+  badge?: string;
 };
 
 const Logo = ({
@@ -30,6 +33,7 @@ const Logo = ({
   orientation = "default",
   logoUrl,
   logoAlt = "Ably logo",
+  badge,
 }: LogoProps) => {
   const getLogoSrc = React.useCallback(() => {
     if (logoUrl) return logoUrl;
@@ -56,8 +60,21 @@ const Logo = ({
   const logoSrc = getLogoSrc();
 
   return (
-    <a href={href} data-id={dataId} className="block" {...additionalLinkAttrs}>
-      <img src={logoSrc} width="108px" alt={logoAlt} {...additionalImgAttrs} />
+    <a
+      href={href}
+      data-id={dataId}
+      {...additionalLinkAttrs}
+      className={cn(
+        "flex items-center gap-2 justify-center",
+        additionalLinkAttrs?.className,
+      )}
+    >
+      <img src={logoSrc} width="96px" alt={logoAlt} {...additionalImgAttrs} />
+      {badge && (
+        <Badge className="uppercase h-8 bg-transparent dark:bg-transparent rounded border border-neutral-400 dark:border-neutral-900 text-lg p-2 font-semibold text-neutral-800 dark:text-neutral-500">
+          {badge}
+        </Badge>
+      )}
     </a>
   );
 };

src/core/Logo/Logo.stories.tsx

@@ -6,14 +6,15 @@ export default {
   component: Logo,
 };
 
-const LogoSet = (variant, orientation) => (
+const LogoSet = (variant, orientation, badge?: string) => (
   <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
     <div className="text-center ui-text-code2 order-1">light</div>
     <div className="text-center ui-text-code2 order-3 sm:order-2">dark</div>
     <Logo
       variant={variant}
       orientation={orientation}
       theme="light"
+      badge={badge}
       additionalLinkAttrs={{
         className: "text-center p-2 bg-neutral-000 rounded order-2 sm:order-3",
       }}
@@ -22,8 +23,10 @@ const LogoSet = (variant, orientation) => (
       variant={variant}
       orientation={orientation}
       theme="dark"
+      badge={badge}
       additionalLinkAttrs={{
-        className: "text-center p-2 bg-neutral-1300 rounded order-4",
+        className:
+          "ui-theme-dark text-center p-2 bg-neutral-1300 rounded order-4",
       }}
     />
   </div>
@@ -40,3 +43,7 @@ export const Mono = {
 export const Stacked = {
   render: () => LogoSet("default", "stacked"),
 };
+
+export const WithBadge = {
+  render: () => LogoSet("default", "default", "docs"),
+};