@primer/react-brand 0.34.4-rc.d299effb → 0.35.0-rc.02f8890c

package/lib/recipes/SolutionTemplates/CategoryPage/CategoryPage.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ColorModesEnum } from '../../../ThemeProvider';
+type CategoryPageProps = {
+    variant: 'size' | 'industry' | 'use-case';
+    gridOverlay?: boolean;
+    colorMode?: ColorModesEnum.LIGHT | ColorModesEnum.DARK;
+    heroLabel: string;
+    heroTitle: string;
+    heroDescription: string;
+    heroCtaTextPrimary: string;
+    heroCtaTextSecondary: string;
+    introVariant: 'pillars' | 'editorial prose' | 'editorial list';
+    [key: string]: unknown;
+};
+export declare function CategoryPage({ variant, gridOverlay, colorMode, ...args }: CategoryPageProps): JSX.Element;
+export {};

package/lib/recipes/SolutionTemplates/CategoryPage/CategoryPage.visual.spec.d.ts

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

package/lib/recipes/SolutionTemplates/SolutionPage/Industry/Industry.visual.spec.d.ts

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

package/lib/recipes/SolutionTemplates/SolutionPage/Size/Size.visual.spec.d.ts

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

package/lib/recipes/SolutionTemplates/SolutionPage/SolutionPage.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ColorModesEnum } from '../../../ThemeProvider';
+type SolutionPageProps = {
+    variant: 'size' | 'industry' | 'use-case';
+    gridOverlay?: boolean;
+    colorMode?: ColorModesEnum.LIGHT | ColorModesEnum.DARK;
+    heroLabel: string;
+    heroTitle: string;
+    heroDescription: string;
+    heroCtaTextPrimary: string;
+    heroCtaTextSecondary: string;
+    introVariant: 'pillars' | 'editorial list';
+    [key: string]: unknown;
+};
+export declare function SolutionPage({ variant, gridOverlay, colorMode, ...args }: SolutionPageProps): JSX.Element;
+export {};

package/lib/recipes/SolutionTemplates/SolutionPage/UseCase/UseCase.visual.spec.d.ts

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

package/lib/recipes/SolutionTemplates/SolutionPage/index.d.ts

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

package/lib/recipes/SolutionTemplates/SolutionsOverview/SolutionsOverview.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ColorModesEnum } from '../../../ThemeProvider';
+type SolutionsOverviewProps = {
+    variant: 'size' | 'industry' | 'use-case';
+    gridOverlay?: boolean;
+    colorMode?: ColorModesEnum.LIGHT | ColorModesEnum.DARK;
+    heroLabel: string;
+    heroTitle: string;
+    heroDescription: string;
+    heroCtaTextPrimary: string;
+    heroCtaTextSecondary: string;
+    introVariant: 'pillars' | 'editorial prose' | 'editorial list';
+    [key: string]: unknown;
+};
+export declare function SolutionsOverview({ variant, gridOverlay, colorMode, ...args }: SolutionsOverviewProps): JSX.Element;
+export {};

package/lib/recipes/SolutionTemplates/SolutionsOverview/SolutionsOverview.visual.spec.d.ts

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

package/lib/recipes/SolutionTemplates/helpers.d.ts

@@ -0,0 +1,126 @@
+export declare const sharedArgTypes: {
+    variant: {
+        control: string;
+        options: string[];
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+    /**
+     * Hero
+     */
+    heroLabel: {
+        control: string;
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+    heroTitle: {
+        control: string;
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+    heroDescription: {
+        control: string;
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+    heroCtaTextPrimary: {
+        control: string;
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+    heroCtaTextSecondary: {
+        control: string;
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+    /**
+     * Editorial intro
+     */
+    introVariant: {
+        control: string;
+        options: string[];
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+    sectionIntroText: {
+        control: string;
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+    /**
+     * Logobar
+     */
+    logobarVisible: {
+        control: string;
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+    /**
+     * Rivers
+     */
+    riverVisible: {
+        control: string;
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+    /**
+     * Customer story (Bento)
+     */
+    customerStoryVisible: {
+        control: string;
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+    /**
+     * Statistics
+     * */
+    statisticsVisible: {
+        control: string;
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+    /**
+     * Testimonials
+     */
+    testimonialsVisible: {
+        control: string;
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+    /**
+     * FAQ
+     * */
+    faqVisible: {
+        control: string;
+        name: string;
+        table: {
+            category: string;
+        };
+    };
+};

package/lib/river/River/River.d.ts

@@ -25,7 +25,7 @@ export type RiverProps = {
 } & BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement>;
 export declare const defaultRiverImageTextRatio = "50:50";
 export declare const defaultRiverAlign = "start";
-type RiverContentProps = BaseProps<HTMLDivElement> & {
+export type RiverContentProps = BaseProps<HTMLDivElement> & {
     /**
      * Escape-hatch for inserting custom React components.
      * Warning:
@@ -52,7 +52,34 @@ type RiverContentProps = BaseProps<HTMLDivElement> & {
      */
     children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[];
 } & React.HTMLAttributes<HTMLDivElement>;
-type RiverVisualProps = BaseProps<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+export declare const RiverContent: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLDivElement> & {
+    /**
+     * Escape-hatch for inserting custom React components.
+     * Warning:
+     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
+     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
+     */
+    trailingComponent?: React.FunctionComponent<{}> | undefined;
+    /**
+     * When `true`, a divider will be rendered between the standard river and optional trailing content.
+     */
+    trailingComponentDivider?: boolean | undefined;
+    /**
+     * Escape-hatch for inserting custom React components.
+     * Warning:
+     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
+     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
+     */
+    leadingComponent?: React.FunctionComponent<{}> | undefined;
+    /**
+     * Only valid children are allowed.
+     * These include: `Heading`, `Text` and `Link`.
+     * The declarative order of the children will be ignored in the rendered output
+     * to enforce correct HTML semantics.
+     */
+    children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[];
+} & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type RiverVisualProps = BaseProps<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * Applies automatic size constraints to child images and video.
      * This can be disabled by setting this prop to `false`.
@@ -118,4 +145,3 @@ export declare const River: React.ForwardRefExoticComponent<Omit<{
         children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[];
     } & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
-export {};

package/lib/river/RiverBreakout/RiverBreakout.d.ts

@@ -2,18 +2,12 @@ import React from 'react';
 import { RiverProps } from '../River';
 type RiverBreakoutProps = Omit<RiverProps, 'align' | 'imageTextRatio'>;
 export declare const RiverBreakout: React.ForwardRefExoticComponent<Omit<RiverBreakoutProps, "ref"> & React.RefAttributes<HTMLElement>> & {
-    Visual: React.ForwardRefExoticComponent<Omit<import("../../component-helpers").BaseProps<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement> & {
-        fillMedia?: boolean | undefined;
-        hasShadow?: boolean | undefined;
-        rounded?: boolean | undefined;
-    } & {
-        children?: React.ReactNode;
-    }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Visual: React.ForwardRefExoticComponent<Omit<import("../River").RiverVisualProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Content: React.ForwardRefExoticComponent<Omit<import("../../component-helpers").BaseProps<HTMLDivElement> & {
         trailingComponent?: React.FunctionComponent<{}> | undefined;
         trailingComponentDivider?: boolean | undefined;
         leadingComponent?: React.FunctionComponent<{}> | undefined;
-        children: React.ReactElement<import("../..").TextProps, string | React.JSXElementConstructor<any>> | React.ReactElement<import("../../Heading").HeadingProps | import("../..").TextProps | import("../..").LinkProps, string | React.JSXElementConstructor<any>>[];
+        children: React.ReactElement<import("../..").TextProps, string | React.JSXElementConstructor<any>> | React.ReactElement<import("../..").TextProps | import("../../Heading").HeadingProps | import("../..").LinkProps, string | React.JSXElementConstructor<any>>[];
     } & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     A11yHeading: ({ as, children }: React.PropsWithChildren<{
         as?: "h2" | "h3" | undefined;

package/lib/river/RiverStoryScroll/RiverStoryScroll.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BaseProps } from '../../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river-story-scroll/colors-with-modes.css';
+export type RiverStoryScrollProps = {
+    /**
+     * Adjust the order of the `Content` column. The default is `start`.
+     */
+    align?: 'start' | 'end';
+    /**
+     * Apply an alternative image to text column ratio. The default is `50:50`.
+     */
+    imageTextRatio?: '60:40' | '50:50';
+    /**
+     * Disable the scroll effect.
+     */
+    disabled?: boolean;
+} & BaseProps<HTMLDivElement>;
+export declare function RiverStoryScroll({ children, disabled }: React.PropsWithChildren<RiverStoryScrollProps>): JSX.Element;

package/lib/river/RiverStoryScroll/RiverStoryScroll.visual.spec.d.ts

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

package/lib/river/RiverStoryScroll/RiverStoryScrollProvider.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+type StoryScrollContextType = {
+    visibilityStates: boolean[];
+    setVisibilityStates: (index: number, isVisible: boolean) => void;
+};
+export declare const useStoryScrollContext: () => StoryScrollContextType;
+export declare function RiverStoryScrollProvider({ children, className, initialStates, }: {
+    children: ReactNode;
+    className?: string;
+    initialStates: boolean[];
+}): JSX.Element;
+export {};

package/lib/river/RiverStoryScroll/RiverStoryScrollResponder.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type RiverStoryScrollResponderProps = {
+    index: number;
+    children?: React.ReactNode;
+    className?: string;
+    visibleClassName?: string;
+    hiddenClassName?: string;
+};
+export declare function RiverStoryScrollResponder({ index, children, className, visibleClassName, hiddenClassName, }: RiverStoryScrollResponderProps): JSX.Element;
+export {};

package/lib/river/RiverStoryScroll/RiverStoryScrollTracker.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type RiverStoryScrollTrackerProps = {
+    index: number;
+    children?: React.ReactNode;
+    className?: string;
+    location?: string;
+};
+export declare const RiverStoryScrollTracker: ({ index, children, className }: RiverStoryScrollTrackerProps) => JSX.Element;
+export {};

package/lib/river/RiverStoryScroll/index.d.ts

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

package/lib/river/index.d.ts

@@ -1,2 +1,3 @@
 export * from './RiverBreakout';
 export * from './River';
+export * from './RiverStoryScroll';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react-brand",
-  "version": "0.34.4-rc.d299effb",
+  "version": "0.35.0-rc.02f8890c",
   "description": "Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.",
   "keywords": [
     "primer",

package/lib/VideoPlayer/components/captions/Captions.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-type CaptionsProps = {
-    videoRef: React.RefObject<HTMLVideoElement>;
-    disabled?: boolean;
-    trackInformation?: TextTrackCueList;
-};
-export declare const Captions: ({ videoRef, disabled, trackInformation }: CaptionsProps) => JSX.Element | null;
-export {};

package/lib/VideoPlayer/components/controls/Controls.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-type ControlsProps = {
-    videoRef: React.RefObject<HTMLVideoElement>;
-    videoWrapperRef: React.RefObject<HTMLDivElement>;
-    totalTime: number;
-    currentTime: number;
-    playing: boolean;
-    trackInformation?: TextTrackCueList;
-};
-export declare const Controls: ({ videoRef, videoWrapperRef, totalTime, currentTime, playing: playingProp, trackInformation, }: ControlsProps) => JSX.Element;
-export {};

package/lib/VideoPlayer/components/tooltip/Tooltip.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-type TooltipProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Tooltip: ({ children, className, style, ...rest }: TooltipProps) => JSX.Element;
-export {};

package/lib/VideoPlayer/components/tooltip/index.d.ts

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