@primer/react-brand 0.0.2 → 0.0.4-rc.3d5d40c

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @primer/react-brand
+
+## 0.0.4
+
+### Patch Changes
+
+- [#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.
+
+## 0.0.3
+
+### Patch Changes
+
+- [#18](https://github.com/primer/react-brand/pull/18) [`0835830`](https://github.com/primer/react-brand/commit/0835830fc15c582e280ac692ff3d578d6bcf282e) Thanks [@rezrah](https://github.com/rezrah)! - Fixes for production bundles
+
+## 0.0.2
+
+### Patch Changes
+
+- [#2](https://github.com/primer/react-brand/pull/2) [`ab01a8a`](https://github.com/primer/react-brand/commit/ab01a8ad1dc504f7a2865213b6f41c0b0adba131) Thanks [@colebemis](https://github.com/colebemis)! - Initialize releases with [changesets](https://github.com/changesets/changesets)

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Primer
+Copyright (c) 2022 GitHub Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,3 +1,40 @@
-# @primer/react-brand
+<p align="center">
+  <img width="300px" src="https://user-images.githubusercontent.com/4608155/127241386-f11da52d-00d9-4366-b01c-6f4c1ebcf7f2.png">
+</p>
 
-TODO
+<h1 align="center">Primer React Brand</h1>
+
+<p align="center">A React implementation of GitHub's Brand Design System</p>
+
+<p align="center">
+  <a aria-label="npm package" href="https://www.npmjs.com/package/@primer/react-brand">
+    <img alt="" src="https://img.shields.io/npm/v/@primer/react-brand.svg">
+  </a>
+  <a aria-label="build status" href="https://github.com/primer/react-brand/actions/workflows/ci.yml">
+    <img alt="" src="https://github.com/primer/react-brand/actions/workflows/ci.yml/badge.svg">
+  </a>
+  <img src="https://img.shields.io/badge/status-experimental-red" alt="status: experimental">
+  <a aria-label="license" href="https://github.com/primer/react-brand/blob/main/LICENSE">
+    <img src="https://img.shields.io/github/license/primer/react-brand.svg" alt="">
+  </a>
+</p>
+
+<p align="center">
+    <a href="https://primer.github.io/react-brand/" target="_blank">https://primer.github.io/react-brand</a>
+</p>
+
+## Install
+
+This repository is distributed on [npm]. After [installing npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), you can install `@primer/react-brand` as a dependency of your project:
+
+```sh
+npm install @primer/react-brand
+```
+
+## Usage
+
+See our [getting started guide](https://primer.github.io/react-brand/getting-started) for more information.
+
+## License
+
+[MIT](./LICENSE) &copy; [GitHub](https://github.com/)

package/lib/ExpandableArrow/ExpandableArrow.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type ExpandableArrowProps = {
+    className?: string;
+    /** Animate between a chevron arrow and an arrow with a stem by toggling the value of `expanded` */
+    expanded?: boolean;
+};
+export declare function ExpandableArrow({ className, expanded }: ExpandableArrowProps): JSX.Element;
+export {};

package/lib/ExpandableArrow/index.d.ts

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

package/lib/Hero/Hero.d.ts

@@ -1,6 +1,14 @@
-import React from "react";
-declare type Props = {
-    children: React.ReactNode;
+import React from 'react';
+declare type Action = {
+    text: string;
+    href: string;
 };
-export declare function Hero({ children }: Props): JSX.Element;
+export declare type HeroProps = {
+    heading: string | React.ReactElement;
+    description?: string | React.ReactElement;
+    primaryAction: Action;
+    secondaryAction?: Action;
+    align?: 'start' | 'center';
+};
+export declare function Hero({ heading, description, primaryAction, secondaryAction, align }: HeroProps): JSX.Element;
 export {};

package/lib/Hero/index.d.ts

@@ -1 +1 @@
-export { Hero } from "./Hero";
+export * from './Hero';

package/lib/LinkButton/LinkButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare type LinkButtonProps = {
+    href: string;
+    variant?: 'primary' | 'secondary';
+} & React.ComponentPropsWithoutRef<'a'>;
+export declare function LinkButton({ variant, className, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: LinkButtonProps): JSX.Element;

package/lib/LinkButton/index.d.ts

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

package/lib/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,19 @@
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+export declare enum ColorModesEnum {
+    LIGHT = "light",
+    DARK = "dark",
+    AUTO = "auto"
+}
+export declare type ColorMode = `${ColorModesEnum}`;
+export declare type ThemeContextProps = {
+    colorMode: ColorMode;
+    availableColorModes: ColorModesEnum[];
+};
+export declare type ThemeProviderProps = {
+    colorMode?: ColorMode;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const ThemeContext: React.Context<ThemeContextProps>;
+/**
+ * ThemeProvider is used to provide theme-related context to its child components.
+ */
+export declare function ThemeProvider({ colorMode, children, ...rest }: PropsWithChildren<ThemeProviderProps>): JSX.Element;

package/lib/ThemeProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ThemeProvider';
+export { useTheme } from './useTheme';

package/lib/ThemeProvider/useTheme.d.ts

@@ -0,0 +1 @@
+export declare const useTheme: () => import("./ThemeProvider").ThemeContextProps;

package/lib/ThemeProvider/useTheme.test.d.ts

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