@primer/react-brand 0.3.0 → 0.4.0-rc.420e2e9

package/lib/River/River.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { HeadingTags, LinkProps, HeadingProps, TextProps } from '../';
+import type { BaseProps } from '../component-helpers';
 import '../../lib/design-tokens/css/tokens/functional/components/river/base.css';
-export declare type RiverProps = {
+export declare type RiverProps = BaseProps<HTMLElement> & {
     /**
      * Only specific children are valid.
      * These include: `River.Visual` and `River.Content`.
@@ -9,10 +10,6 @@ export declare type RiverProps = {
      * to enforce correct HTML semantics.
      */
     children: React.ReactElement<RiverVisualProps | RiverContentProps>[];
-    /**
-     * Apply a custom classname that will be forwarded to the root River element.
-     */
-    className?: string;
     /**
      * Apply an alternative image to text column ratio. The default is `50:50`.
      */
@@ -24,8 +21,7 @@ export declare type RiverProps = {
 };
 export declare const defaultRiverImageTextRatio = "50:50";
 export declare const defaultRiverAlign = "start";
-declare function Root({ imageTextRatio, align, className, children, ...rest }: RiverProps): JSX.Element;
-declare type RiverContentProps = {
+declare type RiverContentProps = BaseProps<HTMLDivElement> & {
     /**
      * Escape-hatch for inserting custom React components.
      * Warning:
@@ -49,21 +45,61 @@ declare type RiverContentProps = {
     children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[];
 };
 export declare const getHeadingWarning: (size: (typeof HeadingTags)[number]) => string;
-declare function Content({ children, leadingComponent: LeadingComponent, trailingComponent: TrailingComponent }: RiverContentProps): JSX.Element;
-declare type RiverVisualProps = {
-    className?: string;
+declare type RiverVisualProps = BaseProps<HTMLDivElement> & PropsWithChildren<{
+    /**
+     * Applies automatic size constraints to child images and video.
+     * This can be disabled by setting this prop to `false`.
+     */
+    fillMedia?: boolean;
     /**
      * `img` and `video` elements will apply a shadow by default.
      * This can be disabled by setting this prop to `false`.
      */
     hasShadow?: boolean;
-};
-declare function Visual({ children, className, hasShadow }: React.PropsWithChildren<RiverVisualProps>): JSX.Element;
+}>;
 /**
  * Alternating text and image pairs.
  */
-export declare const River: typeof Root & {
-    Visual: typeof Visual;
-    Content: typeof Content;
+export declare const River: React.ForwardRefExoticComponent<Pick<BaseProps<HTMLElement> & {
+    /**
+     * Only specific children are valid.
+     * These include: `River.Visual` and `River.Content`.
+     * The declarative order of the children will be ignored in the rendered output
+     * to enforce correct HTML semantics.
+     */
+    children: React.ReactElement<RiverVisualProps | RiverContentProps>[];
+    /**
+     * Apply an alternative image to text column ratio. The default is `50:50`.
+     */
+    imageTextRatio?: "60:40" | "50:50" | undefined;
+    /**
+     * Adjust the order of the `Content` column. The default is `start`.
+     */
+    align?: "start" | "center" | "end" | undefined;
+}, "children" | "className" | "align" | "id" | "imageTextRatio"> & React.RefAttributes<HTMLElement>> & {
+    Visual: React.ForwardRefExoticComponent<Pick<RiverVisualProps, "children" | "className" | "id" | "fillMedia" | "hasShadow"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Pick<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;
+        /**
+         * 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>[];
+    }, "children" | "className" | "id" | "leadingComponent" | "trailingComponent"> & React.RefAttributes<HTMLDivElement>>;
 };
 export {};

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

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

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

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

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

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

package/lib/component-helpers.d.ts

@@ -1,7 +1,25 @@
-/// <reference types="react" />
+import React, { Ref } from 'react';
 /**
  * Layout
  */
-export declare const Container: ({ children }: {
-    children: any;
+export declare const Container: ({ children, style }: {
+    children: React.ReactElement[] | React.ReactElement;
+    style?: React.CSSProperties | undefined;
 }) => JSX.Element;
+/**
+ * Base Types
+ */
+/**
+ * Component helper type to be extended by component types, e.g.:
+ * type CustomComponentProps = BaseProps<HTMLDivElement> & { ... }
+ *
+ * Example use:
+ *   const CustomComponent = forwardRef<HTMLDivElement, CustomComponentProps>(({className, ...props}, ref) => { ... })
+ *   // OR:
+ *   const CustomComponent = forwardRef(({className: CustomComponentProps, ...props}, ref: Ref<HTMLDivElement>) => { ... })
+ */
+export declare type BaseProps<T> = {
+    className?: string;
+    id?: string;
+    ref?: Ref<T>;
+};