@primer/react-brand 0.5.0-rc.fc95189 → 0.5.1-rc.3eb50cb

package/CHANGELOG.md

@@ -1,10 +1,46 @@
 # @primer/react-brand
 
+## 0.5.1
+
+### Patch Changes
+
+- [#87](https://github.com/primer/brand/pull/87) [`0a82cd4`](https://github.com/primer/brand/commit/0a82cd42e8eb4f001504345172d209a33e18a476) Thanks [@rezrah](https://github.com/rezrah)! - UI bugfixes for `SubdomainNavBar` and `Testimonial` components.
+
+  ## SubdomainNavBar
+
+  - Fix bug where a missing `SubdomainNavBar.Search` child would cause the `SubdomainNavBar` to render incorrectly, despite being optional.
+  - Fix bug where the overflow menu still appears when there are no items in the overflow menu.
+  - Fix bug where longer titles caused text wrapping and layout issues. Slightly longer titles are now accepted.
+
+  ## Testimonial
+
+  - Increase spacing beneath the quote visual to 48px from 45px.
+
 ## 0.5.0
 
 ### Minor Changes
 
-- [#82](https://github.com/primer/brand/pull/82) [`afbab6c`](https://github.com/primer/brand/commit/afbab6c24b5a8fe08d6eea28dfebc4bde143bfd5) Thanks [@rezrah](https://github.com/rezrah)! - Added `Testimonial` component.
+- [#81](https://github.com/primer/brand/pull/81) [`88e2007`](https://github.com/primer/brand/commit/88e20076f797338b9ab6d7d2d932320094cda5d7) Thanks [@rezrah](https://github.com/rezrah)! - Added `SubdomainNavBar` component.
+
+  Usage example:
+
+  ```jsx
+  <SubdomainNavBar title="Subdomain">
+    <SubdomainNavBar.Link href="#">Collections</SubdomainNavBar.Link>
+    <SubdomainNavBar.Link href="#">Topics</SubdomainNavBar.Link>
+    <SubdomainNavBar.Link href="#">Articles</SubdomainNavBar.Link>
+    <SubdomainNavBar.Link href="#">Events</SubdomainNavBar.Link>
+    <SubdomainNavBar.Link href="#">Video</SubdomainNavBar.Link>
+    <SubdomainNavBar.Link href="#">Social</SubdomainNavBar.Link>
+    <SubdomainNavBar.Search ref={inputRef} onSubmit={handleSubmit} />
+    <SubdomainNavBar.PrimaryAction href="#">Primary CTA</SubdomainNavBar.PrimaryAction>
+    <SubdomainNavBar.SecondaryAction href="#">Secondary CTA</SubdomainNavBar.SecondaryAction>
+  </SubdomainNavBar>
+  ```
+
+  See the [documentation](https://primer.style/brand/components/SubdomainNavBar) and [Storybook](https://primer.style/brand/storybook/?path=/story/components-subdomainnavbar--playground) for more usage examples.
+
+* [#82](https://github.com/primer/brand/pull/82) [`afbab6c`](https://github.com/primer/brand/commit/afbab6c24b5a8fe08d6eea28dfebc4bde143bfd5) Thanks [@rezrah](https://github.com/rezrah)! - Added `Testimonial` component.
 
   Usage example:
 
@@ -24,7 +60,7 @@
 
   See the [documentation](https://primer.style/brand/components/Testimonial) or [Storybook](https://primer.style/brand/storybook/?path=/story/components-testimonial--playground) for more usage examples.
 
-* [#82](https://github.com/primer/brand/pull/82) [`afbab6c`](https://github.com/primer/brand/commit/afbab6c24b5a8fe08d6eea28dfebc4bde143bfd5) Thanks [@rezrah](https://github.com/rezrah)! - Added `Stack` component.
+- [#82](https://github.com/primer/brand/pull/82) [`afbab6c`](https://github.com/primer/brand/commit/afbab6c24b5a8fe08d6eea28dfebc4bde143bfd5) Thanks [@rezrah](https://github.com/rezrah)! - Added `Stack` component.
 
   Usage example:
 

package/lib/Button/Button.d.ts

@@ -5,9 +5,11 @@ export declare type ButtonProps<C extends React.ElementType> = BaseProps<C> & {
     as?: C;
     variant?: 'primary' | 'secondary';
     size?: 'medium' | 'large';
+    hasArrow?: boolean;
 } & React.ComponentPropsWithoutRef<C>;
 export declare const Button: React.ForwardRefExoticComponent<Pick<BaseProps<React.ElementType<any>> & {
     as?: React.ElementType<any> | undefined;
     variant?: "primary" | "secondary" | undefined;
     size?: "medium" | "large" | undefined;
+    hasArrow?: boolean | undefined;
 } & Pick<any, string | number | symbol>, string | number | symbol> & React.RefAttributes<HTMLButtonElement>>;

package/lib/SubdomainNavBar/NavigationVisbilityObserver.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function NavigationVisbilityObserver({ children, className, ...rest }: {
+    [x: string]: any;
+    children: any;
+    className: any;
+}): JSX.Element;

package/lib/SubdomainNavBar/SubdomainNavBar.d.ts

@@ -0,0 +1,63 @@
+import React, { PropsWithChildren } from 'react';
+/**
+ * Design tokens
+ */
+import '../../lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css';
+export declare type SubdomainNavBarProps = {
+    /**
+     * Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,
+     * `SubdomainNavBar.SecondaryAction` and `SubdomainNavBar.Search`
+     */
+    children?: React.ReactNode | React.ReactElement<LinkProps> | React.ReactElement<SearchProps> | React.ReactElement<CTAActionProps>;
+    /**
+     * Forward a custom HTML class attribute
+     */
+    className?: string;
+    /**
+     * Fixes the navigation bar to the top of the viewport. Defaults to `true`.
+     */
+    fixed?: boolean;
+    /**
+     * The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assisitive technologies.
+     */
+    title: string;
+    /**
+     * Optionally change the URL of the logo
+     */
+    logoHref?: string;
+};
+declare function Root({ children, fixed, logoHref, title, ...rest }: SubdomainNavBarProps): JSX.Element;
+declare type LinkProps = {
+    href: string;
+} & React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+declare function Link({ href, className, children, ...rest }: PropsWithChildren<LinkProps>): JSX.Element;
+export declare type SubdomainNavBarSearchResultProps = {
+    title: string;
+    description: string;
+    url: string;
+    date: string;
+    category?: string;
+};
+declare type SearchProps = {
+    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    ref: React.RefObject<HTMLInputElement>;
+    active?: boolean;
+    title?: string;
+    handlerFn?: () => void;
+    autoComplete?: boolean;
+    searchResults?: SubdomainNavBarSearchResultProps[];
+    searchTerm?: string;
+};
+declare type CTAActionProps = {
+    href: string;
+};
+declare function PrimaryAction({ children, href, ...rest }: PropsWithChildren<CTAActionProps>): JSX.Element;
+declare function SecondaryAction({ children, href, ...rest }: PropsWithChildren<CTAActionProps>): JSX.Element;
+export declare const SubdomainNavBar: typeof Root & {
+    Link: typeof Link;
+    Search: React.ForwardRefExoticComponent<Pick<SearchProps, "title" | "onChange" | "onSubmit" | "autoComplete" | "active" | "searchResults" | "searchTerm" | "handlerFn"> & React.RefAttributes<unknown>>;
+    PrimaryAction: typeof PrimaryAction;
+    SecondaryAction: typeof SecondaryAction;
+};
+export {};

package/lib/SubdomainNavBar/SubdomainNavBar.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/SubdomainNavBar/index.d.ts

@@ -0,0 +1 @@
+export * from './SubdomainNavBar';

package/lib/SubdomainNavBar/useVisibilityObserver.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+export declare type VisibilityMap = {
+    [key: string]: boolean;
+};
+export declare function useVisibilityObserver(navigationRef: RefObject<HTMLUListElement>): VisibilityMap[];