@primer/react-brand 0.31.1-rc.495b771 → 0.32.0-rc.4d4a600

package/lib/Accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens
@@ -11,9 +11,8 @@ export type AccordionRootProps = BaseProps<HTMLDetailsElement> & {
     ref?: React.RefObject<HTMLDetailsElement>;
 } & React.HTMLAttributes<HTMLDetailsElement>;
 export declare const AccordionRoot: React.ForwardRefExoticComponent<Omit<AccordionRootProps, "ref"> & React.RefAttributes<HTMLDetailsElement>>;
-type AccordionHeadingProps = BaseProps<HTMLHeadingElement> & {
+type AccordionHeadingProps = PropsWithChildren<BaseProps<HTMLHeadingElement>> & {
     className?: string;
-    children: string;
     as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     reversedToggles?: boolean;
     variant?: 'default' | 'emphasis';

package/lib/CTABanner/CTABanner.d.ts

@@ -23,10 +23,10 @@ export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<H
     } & {
         as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
         size?: "display" | "1" | "2" | "3" | "4" | "5" | "6" | "subhead-large" | "subhead-medium" | undefined;
-        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | {
-            narrow?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | undefined;
-            regular?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | undefined;
-            wide?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | {
+            narrow?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | undefined;
+            regular?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | undefined;
+            wide?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | undefined;
         } | undefined;
         stretch?: "normal" | "condensed" | "expanded" | {
             narrow?: "normal" | "condensed" | "expanded" | undefined;

package/lib/FAQ/FAQ.d.ts

@@ -28,8 +28,9 @@ export declare const FAQ: React.ForwardRefExoticComponent<Omit<FAQRootProps, "re
     Heading: React.ForwardRefExoticComponent<Omit<FAQHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Item: React.ForwardRefExoticComponent<Omit<import("..").AccordionRootProps, "ref"> & React.RefAttributes<HTMLDetailsElement>>;
     Question: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLHeadingElement> & {
+        children?: React.ReactNode;
+    } & {
         className?: string | undefined;
-        children: string;
         as?: "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
         reversedToggles?: boolean | undefined;
         variant?: "default" | "emphasis" | undefined;

package/lib/LogoSuite/LogoSuite.d.ts

@@ -36,7 +36,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;
@@ -48,7 +48,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;
@@ -60,7 +60,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;
@@ -72,7 +72,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;
@@ -84,7 +84,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;

package/lib/PricingOptions/PricingOptions.d.ts

@@ -0,0 +1,110 @@
+import React, { PropsWithChildren } from 'react';
+import type { BaseProps } from '../component-helpers';
+import { ButtonBaseProps, HeadingProps } from '..';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/pricing-options.css';
+export type PricingOptionsProps = {
+    variant?: 'default' | 'cards';
+    ['data-testid']?: string;
+} & PropsWithChildren<BaseProps<HTMLDivElement>>;
+export type PricingOptionsItem = {
+    ['data-testid']?: string;
+} & PropsWithChildren<BaseProps<HTMLDivElement>>;
+type PricingOptionsLabelProps = PropsWithChildren<BaseProps<HTMLSpanElement>> & {
+    'data-testid'?: string;
+};
+type PricingOptionsDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {
+    'data-testid'?: string;
+};
+type PricingOptionsHeadingProps = PropsWithChildren<BaseProps<HTMLHeadingElement>> & {
+    as?: Exclude<HeadingProps['as'], 'h1' | 'h2'>;
+    'data-testid'?: string;
+} & HeadingProps;
+type PricingOptionsPriceProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {
+    currencyCode?: string;
+    currencySymbol?: string;
+    'data-testid'?: string;
+    trailingText?: string;
+};
+type PricingOptionsFeatureListProps = BaseProps<HTMLUListElement> & {
+    children: React.ReactElement<PricingOptionsFeatureHeadingProps | PricingOptionsFeatureListItemProps>[];
+    'data-testid'?: string;
+};
+type PricingOptionsFeatureHeadingProps = PropsWithChildren<BaseProps<HTMLHeadingElement>> & {
+    'data-testid'?: string;
+};
+type PricingOptionsFeatureListItemProps = PropsWithChildren<BaseProps<HTMLLIElement>> & {
+    'data-testid'?: string;
+    variant?: 'included' | 'excluded';
+};
+type PricingOptionsFootnoteProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {
+    'data-testid'?: string;
+};
+/**
+ * Pricing options component:
+ * {@link https://primer.style/brand/components/PricingOptions/ See usage examples}.
+ */
+export declare const PricingOptions: React.ForwardRefExoticComponent<Omit<PricingOptionsProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Description: React.ForwardRefExoticComponent<Omit<PricingOptionsDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    FeatureList: React.ForwardRefExoticComponent<Omit<PricingOptionsFeatureListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    FeatureListHeading: React.ForwardRefExoticComponent<Omit<PricingOptionsFeatureHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    FeatureListItem: React.ForwardRefExoticComponent<Omit<PricingOptionsFeatureListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    Footnote: React.ForwardRefExoticComponent<Omit<PricingOptionsFootnoteProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Heading: React.ForwardRefExoticComponent<Omit<PricingOptionsHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<PricingOptionsItem, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<PricingOptionsLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Price: React.ForwardRefExoticComponent<Omit<PricingOptionsPriceProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    PrimaryAction: React.ForwardRefExoticComponent<(Omit<{
+        as: 'a' | 'button';
+        href: string;
+        'data-testid'?: string | undefined;
+    } & ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
+        as: 'a';
+        href: string;
+    } & {
+        children?: React.ReactNode;
+    }, "ref"> | Omit<{
+        as: 'a' | 'button';
+        href: string;
+        'data-testid'?: string | undefined;
+    } & ButtonBaseProps & BaseProps<HTMLButtonElement> & {
+        as: 'button';
+    } & {
+        children?: React.ReactNode;
+    }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    SecondaryAction: React.ForwardRefExoticComponent<(Omit<{
+        as: 'a' | 'button';
+        href: string;
+        'data-testid'?: string | undefined;
+    } & ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
+        as: 'a';
+        href: string;
+    } & {
+        children?: React.ReactNode;
+    }, "ref"> | Omit<{
+        as: 'a' | 'button';
+        href: string;
+        'data-testid'?: string | undefined;
+    } & ButtonBaseProps & BaseProps<HTMLButtonElement> & {
+        as: 'button';
+    } & {
+        children?: React.ReactNode;
+    }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    testIds: {
+        root: string;
+        item: string;
+        heading: string;
+        label: string;
+        description: string;
+        price: string;
+        primaryAction: string;
+        secondaryAction: string;
+        featureList: string;
+        featureListItem: string;
+        featureListHeading: string;
+        footnote: string;
+    };
+};
+export {};

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

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

package/lib/PricingOptions/index.d.ts

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