@primer/react-brand 0.23.0 → 0.24.0-rc.1040aa1

package/lib/{River → river/River}/River.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
-import { LinkProps, HeadingProps, TextProps } from '../';
-import type { BaseProps } from '../component-helpers';
+import { LinkProps, HeadingProps, TextProps } from '../../';
+import type { BaseProps } from '../../component-helpers';
 /**
  * Design tokens
  */
@@ -63,6 +63,11 @@ type RiverVisualProps = BaseProps<HTMLDivElement> & PropsWithChildren<{
      * This can be disabled by setting this prop to `false`.
      */
     hasShadow?: boolean;
+    /**
+     * Enables rounded corners.
+     * Can optionally be disabled.
+     */
+    rounded?: boolean;
 }>;
 /**
  * Alternating text and image pairs.

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

@@ -0,0 +1,22 @@
+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> & {
+        fillMedia?: boolean | undefined;
+        hasShadow?: boolean | undefined;
+        rounded?: boolean | undefined;
+    } & {
+        children?: React.ReactNode;
+    }, "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>>[];
+    } & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    A11yHeading: ({ as, children }: React.PropsWithChildren<{
+        as?: "h2" | "h3" | undefined;
+    }>) => JSX.Element;
+};
+export {};

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

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

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

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

package/lib/river/index.d.ts

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

package/package.json

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

package/lib/design-tokens/css/tokens/functional/components/control/base.css

@@ -1,18 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Mon, 14 Aug 2023 09:40:20 GMT
- */
-
-:root {
-  --brand-control-animation-easing: var(--brand-animation-easing-glide);
-  --brand-control-animation-duration: 80ms;
-  --brand-control-border-radius: var(--brand-borderRadius-medium);
-  --brand-control-large-fontSize: var(--brand-text-size-300);
-  --brand-control-large-fontWeight: var(--brand-text-weight-300);
-  --brand-control-large-padding: var(--base-size-12);
-  --brand-control-large-size: var(--base-size-48);
-  --brand-control-medium-fontSize: var(--brand-text-size-200);
-  --brand-control-medium-fontWeight: var(--brand-text-weight-200);
-  --brand-control-medium-padding: 0.625rem;
-  --brand-control-medium-size: 2.5rem;
-}

package/lib/design-tokens/js/module/tokens/functional/components/control/base.js

@@ -1,195 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Mon, 14 Aug 2023 09:40:20 GMT
- */
-
-module.exports = {
-  "brand": {
-    "control": {
-      "medium": {
-        "size": {
-          "value": "2.5rem",
-          "filePath": "tokens/functional/components/control/base.json",
-          "isSource": true,
-          "original": {
-            "value": "40px"
-          },
-          "name": "size",
-          "attributes": {},
-          "path": [
-            "brand",
-            "control",
-            "medium",
-            "size"
-          ]
-        },
-        "padding": {
-          "value": "0.625rem",
-          "filePath": "tokens/functional/components/control/base.json",
-          "isSource": true,
-          "original": {
-            "value": "10px"
-          },
-          "name": "padding",
-          "attributes": {},
-          "path": [
-            "brand",
-            "control",
-            "medium",
-            "padding"
-          ]
-        },
-        "fontWeight": {
-          "value": "var(--brand-text-weight-200)",
-          "filePath": "tokens/functional/components/control/base.json",
-          "isSource": true,
-          "original": {
-            "value": "var(--brand-text-weight-200)"
-          },
-          "name": "fontWeight",
-          "attributes": {},
-          "path": [
-            "brand",
-            "control",
-            "medium",
-            "fontWeight"
-          ]
-        },
-        "fontSize": {
-          "value": "var(--brand-text-size-200)",
-          "filePath": "tokens/functional/components/control/base.json",
-          "isSource": true,
-          "original": {
-            "value": "var(--brand-text-size-200)"
-          },
-          "name": "fontSize",
-          "attributes": {},
-          "path": [
-            "brand",
-            "control",
-            "medium",
-            "fontSize"
-          ]
-        }
-      },
-      "large": {
-        "size": {
-          "value": "var(--base-size-48)",
-          "filePath": "tokens/functional/components/control/base.json",
-          "isSource": true,
-          "original": {
-            "value": "var(--base-size-48)"
-          },
-          "name": "size",
-          "attributes": {},
-          "path": [
-            "brand",
-            "control",
-            "large",
-            "size"
-          ]
-        },
-        "padding": {
-          "value": "var(--base-size-12)",
-          "filePath": "tokens/functional/components/control/base.json",
-          "isSource": true,
-          "original": {
-            "value": "var(--base-size-12)"
-          },
-          "name": "padding",
-          "attributes": {},
-          "path": [
-            "brand",
-            "control",
-            "large",
-            "padding"
-          ]
-        },
-        "fontWeight": {
-          "value": "var(--brand-text-weight-300)",
-          "filePath": "tokens/functional/components/control/base.json",
-          "isSource": true,
-          "original": {
-            "value": "var(--brand-text-weight-300)"
-          },
-          "name": "fontWeight",
-          "attributes": {},
-          "path": [
-            "brand",
-            "control",
-            "large",
-            "fontWeight"
-          ]
-        },
-        "fontSize": {
-          "value": "var(--brand-text-size-300)",
-          "filePath": "tokens/functional/components/control/base.json",
-          "isSource": true,
-          "original": {
-            "value": "var(--brand-text-size-300)"
-          },
-          "name": "fontSize",
-          "attributes": {},
-          "path": [
-            "brand",
-            "control",
-            "large",
-            "fontSize"
-          ]
-        }
-      },
-      "border": {
-        "radius": {
-          "value": "var(--brand-borderRadius-medium)",
-          "filePath": "tokens/functional/components/control/base.json",
-          "isSource": true,
-          "original": {
-            "value": "var(--brand-borderRadius-medium)"
-          },
-          "name": "radius",
-          "attributes": {},
-          "path": [
-            "brand",
-            "control",
-            "border",
-            "radius"
-          ]
-        }
-      },
-      "animation": {
-        "duration": {
-          "value": "80ms",
-          "filePath": "tokens/functional/components/control/base.json",
-          "isSource": true,
-          "original": {
-            "value": "80ms"
-          },
-          "name": "duration",
-          "attributes": {},
-          "path": [
-            "brand",
-            "control",
-            "animation",
-            "duration"
-          ]
-        },
-        "easing": {
-          "value": "var(--brand-animation-easing-glide)",
-          "filePath": "tokens/functional/components/control/base.json",
-          "isSource": true,
-          "original": {
-            "value": "var(--brand-animation-easing-glide)"
-          },
-          "name": "easing",
-          "attributes": {},
-          "path": [
-            "brand",
-            "control",
-            "animation",
-            "easing"
-          ]
-        }
-      }
-    }
-  }
-};

package/lib/design-tokens/js/tokens/functional/components/control/base.js

@@ -1,16 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Mon, 14 Aug 2023 09:40:20 GMT
- */
-
-export const BrandControlMediumSize = "2.5rem";
-export const BrandControlMediumPadding = "0.625rem";
-export const BrandControlMediumFontWeight = "var(--brand-text-weight-200)";
-export const BrandControlMediumFontSize = "var(--brand-text-size-200)";
-export const BrandControlLargeSize = "var(--base-size-48)";
-export const BrandControlLargePadding = "var(--base-size-12)";
-export const BrandControlLargeFontWeight = "var(--brand-text-weight-300)";
-export const BrandControlLargeFontSize = "var(--brand-text-size-300)";
-export const BrandControlBorderRadius = "var(--brand-borderRadius-medium)";
-export const BrandControlAnimationDuration = "80ms";
-export const BrandControlAnimationEasing = "var(--brand-animation-easing-glide)";

package/lib/design-tokens/scss/tokens/functional/components/control/base.scss

@@ -1,15 +0,0 @@
-
-// Do not edit directly
-// Generated on Mon, 14 Aug 2023 09:40:20 GMT
-
-$brand-control-animation-easing: var(--brand-animation-easing-glide);
-$brand-control-animation-duration: 80ms;
-$brand-control-border-radius: var(--brand-borderRadius-medium);
-$brand-control-large-fontSize: var(--brand-text-size-300);
-$brand-control-large-fontWeight: var(--brand-text-weight-300);
-$brand-control-large-padding: var(--base-size-12);
-$brand-control-large-size: var(--base-size-48);
-$brand-control-medium-fontSize: var(--brand-text-size-200);
-$brand-control-medium-fontWeight: var(--brand-text-weight-200);
-$brand-control-medium-padding: 0.625rem;
-$brand-control-medium-size: 2.5rem;

package/lib/design-tokens/ts/tokens/functional/components/control/base.d.ts

@@ -1,33 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Mon, 14 Aug 2023 09:40:20 GMT
- */
-
-
-    
-declare const tokens: {
-  "brand": {
-    "control": {
-      "medium": {
-        "size": string,
-        "padding": string,
-        "fontWeight": string,
-        "fontSize": string
-      },
-      "large": {
-        "size": string,
-        "padding": string,
-        "fontWeight": string,
-        "fontSize": string
-      },
-      "border": {
-        "radius": string
-      },
-      "animation": {
-        "duration": string,
-        "easing": string
-      }
-    }
-  }
-}
-export default tokens;

package/lib/design-tokens/ts/tokens/functional/components/control/base.js

@@ -1,32 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Mon, 14 Aug 2023 09:40:20 GMT
- */
-
-
-    
-module.exports = {
-  "brand": {
-    "control": {
-      "medium": {
-        "size": "2.5rem",
-        "padding": "0.625rem",
-        "fontWeight": "var(--brand-text-weight-200)",
-        "fontSize": "var(--brand-text-size-200)"
-      },
-      "large": {
-        "size": "var(--base-size-48)",
-        "padding": "var(--base-size-12)",
-        "fontWeight": "var(--brand-text-weight-300)",
-        "fontSize": "var(--brand-text-size-300)"
-      },
-      "border": {
-        "radius": "var(--brand-borderRadius-medium)"
-      },
-      "animation": {
-        "duration": "80ms",
-        "easing": "var(--brand-animation-easing-glide)"
-      }
-    }
-  }
-}