@primer/react-brand 0.25.1-rc.57f98b8 → 0.26.0-rc.609f003

package/lib/Bento/Bento.d.ts

@@ -0,0 +1,54 @@
+import React, { ReactElement } from 'react';
+import { Icon } from '@primer/octicons-react';
+import type { BaseProps } from '../component-helpers';
+import { HeadingProps, ColorMode as FullColorMode } from '../';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css';
+type ColorMode = Exclude<FullColorMode, 'auto'>;
+export type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+export type ColumnIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type ResponsiveColumnIndex = Partial<Record<Size, ColumnIndex>>;
+type ResponsiveRowIndex = Partial<Record<Size, number>>;
+type Flow = 'row' | 'column';
+type ResponsiveFlow = Partial<Record<Size, Flow>>;
+type Align = 'start' | 'center' | 'end';
+type ResponsiveAlign = Partial<Record<Size, Align>>;
+type Padding = 'condensed' | 'normal' | 'spacious';
+type ResponsivePadding = Partial<Record<Size, Padding>>;
+type Order = 'default' | 'reversed';
+type ResponsiveOrder = Partial<Record<Size, Order>>;
+type BentoProps = React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
+type BentoItemProps = {
+    columnStart?: ColumnIndex | ResponsiveColumnIndex;
+    columnSpan?: ColumnIndex | ResponsiveColumnIndex;
+    rowStart?: number | ResponsiveRowIndex;
+    rowSpan?: number | ResponsiveRowIndex;
+    flow?: Flow | ResponsiveFlow;
+    colorMode?: ColorMode;
+    visualAsBackground?: boolean;
+    order?: Order | ResponsiveOrder;
+    bgColor?: 'default' | 'subtle';
+} & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
+type BentoContentProps = {
+    leadingVisual?: ReactElement | Icon;
+    padding?: Padding | ResponsivePadding;
+    verticalAlign?: Align | ResponsiveAlign;
+    horizontalAlign?: Exclude<Align, 'end'> | Partial<Record<Size, Exclude<Align, 'end'>>>;
+} & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
+type BentoHeadingProps = {
+    variant?: 'default' | 'muted';
+} & BaseProps<HTMLHeadingElement> & HeadingProps;
+type BentoVisualProps = {
+    horizontalAlign?: Align;
+    verticalAlign?: Align;
+    fillMedia?: boolean;
+    overflow?: 'hidden' | 'initial';
+    position?: string;
+    padding?: Padding | ResponsivePadding;
+} & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
+export declare const Bento: (({ className, ...rest }: BentoProps) => JSX.Element) & {
+    Item: ({ className, columnStart, columnSpan, rowStart, rowSpan, flow, colorMode, visualAsBackground, order, bgColor, children, ...rest }: BentoItemProps) => JSX.Element;
+    Visual: ({ horizontalAlign, verticalAlign, fillMedia, overflow, position, padding, className, children, ...rest }: BentoVisualProps) => JSX.Element;
+    Content: ({ children, leadingVisual: LeadingVisual, padding, verticalAlign, horizontalAlign, className, ...rest }: BentoContentProps) => JSX.Element;
+    Heading: React.ForwardRefExoticComponent<Omit<BentoHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+};
+export {};

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

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

package/lib/Bento/index.d.ts

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

package/lib/Testimonial/Testimonial.d.ts

@@ -3,7 +3,6 @@ import { BaseProps } from '../component-helpers';
 import type { AvatarProps } from '../';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors.css';
-type TestimonialAlignment = 'start' | 'center';
 type TestimonialSize = 'small' | 'large';
 export declare const TestimonialQuoteMarkColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow", "blue-purple", "green-blue", "pink-blue", "purple-red", "red-orange"];
 export declare const defaultQuoteMarkColor: "default";
@@ -12,10 +11,6 @@ export type TestimonialProps = {
      * Valid children include Testimonial.Name, Testimonial.Avatar, and Testimonial.Name
      */
     children: React.ReactNode | React.ReactElement<QuoteProps> | React.ReactElement<NameProps> | React.ReactElement<AvatarProps> | React.ReactElement<LogoProps>[];
-    /**
-     * Aligns the testimonial content
-     */
-    align?: TestimonialAlignment;
     /**
      * Sets the testimonial text size
      */