@primer/react-brand 0.1.0-rc.c341bbe → 0.2.0-rc.c749f63

package/CHANGELOG.md

@@ -1,5 +1,104 @@
 # @primer/react-brand
 
+## 0.2.0
+
+### Minor Changes
+
+- [#33](https://github.com/primer/react-brand/pull/33) [`662fcfc`](https://github.com/primer/react-brand/commit/662fcfc6d123460730317b7ddd3d3a4622d30dce) Thanks [@rezrah](https://github.com/rezrah)! - - Adds `River` component
+
+  - Renames `LinkButton` to `Button` :warning: (see below)
+  - Button supports polymorphism and can be used `as` either `a` or `button`
+
+  ### `River`
+
+  **NEW** Component :sparkles:
+
+  <table>
+  <tr>
+  <th> Before</th> <th> After</th>
+  </tr>
+  <tr>
+  <td valign="top">❌</td>
+  <td valign="top">
+
+  ```jsx
+  import {River} from '@primer/react-brand'
+
+  ;<River>
+    <River.Visual>
+      <img
+        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
+        alt="placeholder, blank area with an off-white background color"
+      />
+    </River.Visual>
+    <River.Content>
+      <Heading>Heading</Heading>
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
+        felis nam pulvinar risus elementum.
+      </Text>
+      <Link href="#">Call to action</Link>
+    </River.Content>
+  </River>
+  ```
+
+  </td>
+  </tr>
+  </table>
+
+  See more examples in our documentation.
+  https://primer.style/react-brand/components/River
+
+  ### `LinkButton`
+
+  > **Warning**
+  > The changes below should be considered a breaking change for anyone relying on `LinkButton`, but as we are shipping a pre-v1 library, this has been marked as a `minor` release rather than `major`. Please remember to update your usage per the below example.
+
+  <table>
+  <tr>
+  <th> Before</th> <th> After</th>
+  </tr>
+  <tr>
+  <td valign="top">
+
+  ```jsx
+  //import { LinkButton } from '@primer/react-brand';
+
+  <LinkButton href="#">Sign up</LinkButton>
+  ```
+
+  </td>
+  <td valign="top">
+
+  ```jsx
+  //import { Button } from '@primer/react-brand';
+
+  <Button as="a" href="#">
+    Sign up
+  </Button>
+  ```
+
+  </td>
+  </tr>
+  <tr>
+  <td valign="top">
+
+  ❌
+
+  </td>
+  <td valign="top">
+
+  ```jsx
+  //import { Button } from '@primer/react-brand';
+
+  <Button onClick={handler}>Sign Up</Button>
+  ```
+
+  </td>
+  </tr>
+
+  </table>
+
 ## 0.1.0
 
 ### Minor Changes
@@ -10,11 +109,25 @@
 
 - [#23](https://github.com/primer/react-brand/pull/23) [`77abf53`](https://github.com/primer/react-brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - add Text and Heading components
 
-* [#23](https://github.com/primer/react-brand/pull/23) [`77abf53`](https://github.com/primer/react-brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - forward className in Hero
+* [#29](https://github.com/primer/react-brand/pull/29) [`144c7d7`](https://github.com/primer/react-brand/commit/144c7d762a91cb691699e4f8923ab08385c77966) Thanks [@rezrah](https://github.com/rezrah)! - Removed `gh-variables.css` from package as Brand variables are now surfaced in main.css
+
+  **To upgrade:**
+
+  - _Remove_ `import "@primer/react-brand/lib/css/gh-variables.css"`
+
+  - _Add_ `import "@primer/react-brand/lib/css/main.css"`
+
+- [#23](https://github.com/primer/react-brand/pull/23) [`77abf53`](https://github.com/primer/react-brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - forward className in Hero
+
+* [#25](https://github.com/primer/react-brand/pull/25) [`4b00b72`](https://github.com/primer/react-brand/commit/4b00b72f5dbf5e578351ea77e1e74cddc69833e7) Thanks [@rezrah](https://github.com/rezrah)! - adds baseline tokens
+
+- [#21](https://github.com/primer/react-brand/pull/21) [`ab06cce`](https://github.com/primer/react-brand/commit/ab06cceb6ed3b2eaca70f9738b9708343b4e6db9) Thanks [@rezrah](https://github.com/rezrah)! - Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.
 
-- [#25](https://github.com/primer/react-brand/pull/25) [`4b00b72`](https://github.com/primer/react-brand/commit/4b00b72f5dbf5e578351ea77e1e74cddc69833e7) Thanks [@rezrah](https://github.com/rezrah)! - adds baseline tokens
+* [#27](https://github.com/primer/react-brand/pull/27) [`ca2d300`](https://github.com/primer/react-brand/commit/ca2d3002ba6f7ca9c719f80077c4d95246f33410) Thanks [@rezrah](https://github.com/rezrah)! - Updated Hero text appearance
 
-* [#21](https://github.com/primer/react-brand/pull/21) [`ab06cce`](https://github.com/primer/react-brand/commit/ab06cceb6ed3b2eaca70f9738b9708343b4e6db9) Thanks [@rezrah](https://github.com/rezrah)! - Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.
+  - **updated** Hero description text size from `500` to `400`
+  - **updated** button alignment to not stretch on mobile viewports
+  - **removed** `size` prop. Now only one responsive size available.
 
 ## 0.0.3
 

package/lib/Button/Button.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import '../../lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css';
+export declare type ButtonProps<C extends React.ElementType> = {
+    as?: C;
+    variant?: 'primary' | 'secondary';
+} & React.ComponentPropsWithoutRef<C>;
+export declare function Button<C extends React.ElementType>({ as, variant, className, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: ButtonProps<C>): JSX.Element;

package/lib/Button/index.d.ts

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

package/lib/Heading/Heading.d.ts

@@ -13,7 +13,7 @@ export declare const classMap: {
 declare type HeadingTags = {
     as?: typeof HeadingTags[number];
 } & React.HTMLAttributes<HTMLHeadingElement>;
-declare type HeadingProps = {
+export declare type HeadingProps = {
     className?: string;
 } & HeadingTags;
 export declare function Heading({ className, children, as, ...rest }: PropsWithChildren<HeadingProps>): JSX.Element;

package/lib/Hero/Hero.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import '../../lib/design-tokens/css/tokens/functional/components/hero/base.css';
 declare type Action = {
     text: string;
     href: string;
@@ -10,7 +11,6 @@ export declare type HeroProps = {
     primaryAction: Action;
     secondaryAction?: Action;
     align?: 'start' | 'center';
-    size?: 'small' | 'large';
 };
-export declare function Hero({ className, heading, description, primaryAction, secondaryAction, align, size }: HeroProps): JSX.Element;
+export declare function Hero({ className, heading, description, primaryAction, secondaryAction, align }: HeroProps): JSX.Element;
 export {};

package/lib/Link/Link.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare type LinkProps = {
+    size?: 'medium' | 'large';
+} & React.ComponentPropsWithoutRef<'a'>;
+/**
+ * Links connect users to related content.
+ * These are not intended to be used as a call-to-action.
+ */
+export declare function Link({ size, className, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: LinkProps): JSX.Element;

package/lib/Link/index.d.ts

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

package/lib/River/River.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import { HeadingTags, LinkProps, HeadingProps, TextProps } from '../';
+import '../../lib/design-tokens/css/tokens/functional/components/river/base.css';
+export declare type RiverProps = {
+    /**
+     * 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 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`.
+     */
+    imageTextRatio?: '60:40' | '50:50';
+    /**
+     * Adjust the order of the `Content` column. The default is `left`.
+     */
+    align?: 'left' | 'right' | 'center';
+};
+export declare const defaultRiverImageTextRatio = "50:50";
+export declare const defaultRiverAlign = "left";
+declare function Root({ imageTextRatio, align, className, children, ...rest }: RiverProps): JSX.Element;
+declare type RiverContentProps = {
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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>[];
+};
+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;
+    /**
+     * `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 {};

package/lib/River/index.d.ts

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

package/lib/Text/Text.d.ts

@@ -18,7 +18,7 @@ declare type TextTags = {
      */
     as?: typeof TextTags[number];
 } & RestrictedPolymorphism;
-declare type TextProps = {
+export declare type TextProps = {
     /**
      * Forward a custom HTML class attribute
      */

package/lib/component-helpers.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * Layout
+ */
+export declare const Container: ({ children }: {
+    children: any;
+}) => JSX.Element;