@primer/react-brand 0.0.3 → 0.0.4-rc.bd3f6de

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/ThemeProvider/ThemeProvider.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
 export declare enum ColorModesEnum {
     LIGHT = "light",
     DARK = "dark",
@@ -6,13 +6,14 @@ export declare enum ColorModesEnum {
 }
 export declare type ColorMode = `${ColorModesEnum}`;
 export declare type ThemeContextProps = {
-    colorMode?: ColorMode;
+    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 }: PropsWithChildren<ThemeProviderProps>): JSX.Element;
+export declare function ThemeProvider({ colorMode, children, ...rest }: PropsWithChildren<ThemeProviderProps>): JSX.Element;

package/lib/ThemeProvider/index.d.ts

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

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

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

package/lib/{main.css → css/main.css}

@@ -10,7 +10,6 @@ body {
   padding: 6rem 0;
   display: flex;
   flex-direction: column;
-  background-color: var(--gh-color-canvas-default);
 }
 
 .Hero-module__Hero--align-start___\+ux3o {

package/lib/index.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.js.LICENSE.txt */
-!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define("@primer/react-brand",[],r):"object"==typeof exports?exports["@primer/react-brand"]=r(require("react")):e["@primer/react-brand"]=r(e.React)}(this,(function(e){return(()=>{"use strict";var r={418:e=>{var r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;function n(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var r={},o=0;o<10;o++)r["_"+String.fromCharCode(o)]=o;if("0123456789"!==Object.getOwnPropertyNames(r).map((function(e){return r[e]})).join(""))return!1;var t={};return"abcdefghijklmnopqrst".split("").forEach((function(e){t[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},t)).join("")}catch(e){return!1}}()?Object.assign:function(e,a){for(var i,s,c=n(e),l=1;l<arguments.length;l++){for(var u in i=Object(arguments[l]))o.call(i,u)&&(c[u]=i[u]);if(r){s=r(i);for(var d=0;d<s.length;d++)t.call(i,s[d])&&(c[s[d]]=i[s[d]])}}return c}},251:(e,r,o)=>{o(418);var t=o(697),n=60103;if("function"==typeof Symbol&&Symbol.for){var a=Symbol.for;n=a("react.element"),a("react.fragment")}var i=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s=Object.prototype.hasOwnProperty,c={key:!0,ref:!0,__self:!0,__source:!0};function l(e,r,o){var t,a={},l=null,u=null;for(t in void 0!==o&&(l=""+o),void 0!==r.key&&(l=""+r.key),void 0!==r.ref&&(u=r.ref),r)s.call(r,t)&&!c.hasOwnProperty(t)&&(a[t]=r[t]);if(e&&e.defaultProps)for(t in r=e.defaultProps)void 0===a[t]&&(a[t]=r[t]);return{$$typeof:n,type:e,key:l,ref:u,props:a,_owner:i.current}}r.jsx=l,r.jsxs=l},893:(e,r,o)=>{e.exports=o(251)},697:r=>{r.exports=e}},o={};function t(e){var n=o[e];if(void 0!==n)return n.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,t),a.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{t.r(n),t.d(n,{Hero:()=>d,ThemeProvider:()=>m,useTheme:()=>v});var e=t(893);function r(e){var o,t,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(o=0;o<e.length;o++)e[o]&&(t=r(e[o]))&&(n&&(n+=" "),n+=t);else for(o in e)e[o]&&(n&&(n+=" "),n+=o);return n}function o(){for(var e,o,t=0,n="";t<arguments.length;)(e=arguments[t++])&&(o=r(e))&&(n&&(n+=" "),n+=o);return n}const a={Hero:"Hero-module__Hero___-LIGB","Hero--align-start":"Hero-module__Hero--align-start___+ux3o","Hero--align-center":"Hero-module__Hero--align-center___L5ing","Hero-heading":"Hero-module__Hero-heading___Ns+oe","Hero-description":"Hero-module__Hero-description___5DYuI","Hero-actions":"Hero-module__Hero-actions___TSUhJ"};var i=t(697),s=t.n(i);function c({className:r,expanded:t=!1}){return(0,e.jsxs)("svg",{className:o("ExpandableArrow-module__ExpandableArrow___Zzb6R",t&&"ExpandableArrow-module__ExpandableArrow--expanded___02I33",r),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[(0,e.jsx)("path",{fill:"currentColor",d:"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"}),(0,e.jsx)("path",{className:o("ExpandableArrow-module__ExpandableArrow-stem___o-Z1H",t&&"ExpandableArrow-module__ExpandableArrow-stem--expanded___omLNO"),stroke:"currentColor",d:"M1.75 8H11",strokeWidth:"1.5",strokeLinecap:"round"})]})}const l={LinkButton:"LinkButton-module__LinkButton___73d6V","LinkButton-arrow":"LinkButton-module__LinkButton-arrow___bd7ZC","LinkButton--primary":"LinkButton-module__LinkButton--primary___5T51r","LinkButton--secondary":"LinkButton-module__LinkButton--secondary___Oc3L1"};function u({variant:r="secondary",className:t,children:n,onMouseEnter:a,onMouseLeave:i,onFocus:u,onBlur:d,..._}){const[f,p]=s().useState(!1),[m,h]=s().useState(!1);return(0,e.jsxs)("a",{className:o(l.LinkButton,l[`LinkButton--${r}`],t),onMouseEnter:e=>{p(!0),a?.(e)},onMouseLeave:e=>{p(!1),i?.(e)},onFocus:e=>{h(!0),u?.(e)},onBlur:e=>{h(!1),d?.(e)},..._,children:[n,(0,e.jsx)(c,{className:l["LinkButton-arrow"],expanded:f||m})]})}function d({heading:r,description:t,primaryAction:n,secondaryAction:i,align:s="start"}){return(0,e.jsxs)("div",{className:o(a.Hero,a[`Hero--align-${s}`]),children:[(0,e.jsx)("h1",{className:a["Hero-heading"],children:r}),t?(0,e.jsx)("p",{className:a["Hero-description"],children:t}):null,(0,e.jsxs)("div",{className:a["Hero-actions"],children:[(0,e.jsx)(u,{variant:"primary",href:n.href,children:n.text}),i?(0,e.jsx)(u,{variant:"secondary",href:i.href,children:i.text}):null]})]})}var _;!function(e){e.LIGHT="light",e.DARK="dark",e.AUTO="auto"}(_||(_={}));const f=_.LIGHT,p=(0,i.createContext)({colorMode:f});function m({colorMode:r=f,children:o}){const[t,n]=(0,i.useState)(r);return(0,i.useEffect)((()=>(r===_.AUTO?n(y()):t!==r&&n(r),b(n))),[r,t,n]),(0,e.jsx)(p.Provider,{value:{colorMode:t},children:(0,e.jsx)("div",{"data-color-mode":t,children:o})})}const h=()=>window.matchMedia(`(prefers-color-scheme: ${_.DARK})`),y=()=>h().matches?_.DARK:_.LIGHT,b=e=>{const r=h(),o=r=>e(r.matches?_.DARK:_.LIGHT);return r.addEventListener("change",o),()=>r.removeEventListener("change",o)},v=()=>(0,i.useContext)(p)})(),n})()}));
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define("@primer/react-brand",[],r):"object"==typeof exports?exports["@primer/react-brand"]=r(require("react")):e["@primer/react-brand"]=r(e.React)}(this,(function(e){return(()=>{"use strict";var r={418:e=>{var r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;function n(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var r={},o=0;o<10;o++)r["_"+String.fromCharCode(o)]=o;if("0123456789"!==Object.getOwnPropertyNames(r).map((function(e){return r[e]})).join(""))return!1;var t={};return"abcdefghijklmnopqrst".split("").forEach((function(e){t[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},t)).join("")}catch(e){return!1}}()?Object.assign:function(e,a){for(var i,s,c=n(e),l=1;l<arguments.length;l++){for(var u in i=Object(arguments[l]))o.call(i,u)&&(c[u]=i[u]);if(r){s=r(i);for(var d=0;d<s.length;d++)t.call(i,s[d])&&(c[s[d]]=i[s[d]])}}return c}},251:(e,r,o)=>{o(418);var t=o(697),n=60103;if("function"==typeof Symbol&&Symbol.for){var a=Symbol.for;n=a("react.element"),a("react.fragment")}var i=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s=Object.prototype.hasOwnProperty,c={key:!0,ref:!0,__self:!0,__source:!0};function l(e,r,o){var t,a={},l=null,u=null;for(t in void 0!==o&&(l=""+o),void 0!==r.key&&(l=""+r.key),void 0!==r.ref&&(u=r.ref),r)s.call(r,t)&&!c.hasOwnProperty(t)&&(a[t]=r[t]);if(e&&e.defaultProps)for(t in r=e.defaultProps)void 0===a[t]&&(a[t]=r[t]);return{$$typeof:n,type:e,key:l,ref:u,props:a,_owner:i.current}}r.jsx=l,r.jsxs=l},893:(e,r,o)=>{e.exports=o(251)},697:r=>{r.exports=e}},o={};function t(e){var n=o[e];if(void 0!==n)return n.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,t),a.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{t.r(n),t.d(n,{ColorModesEnum:()=>_,Hero:()=>d,ThemeContext:()=>p,ThemeProvider:()=>m,useTheme:()=>v});var e=t(893);function r(e){var o,t,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(o=0;o<e.length;o++)e[o]&&(t=r(e[o]))&&(n&&(n+=" "),n+=t);else for(o in e)e[o]&&(n&&(n+=" "),n+=o);return n}function o(){for(var e,o,t=0,n="";t<arguments.length;)(e=arguments[t++])&&(o=r(e))&&(n&&(n+=" "),n+=o);return n}const a={Hero:"Hero-module__Hero___-LIGB","Hero--align-start":"Hero-module__Hero--align-start___+ux3o","Hero--align-center":"Hero-module__Hero--align-center___L5ing","Hero-heading":"Hero-module__Hero-heading___Ns+oe","Hero-description":"Hero-module__Hero-description___5DYuI","Hero-actions":"Hero-module__Hero-actions___TSUhJ"};var i=t(697),s=t.n(i);function c({className:r,expanded:t=!1}){return(0,e.jsxs)("svg",{className:o("ExpandableArrow-module__ExpandableArrow___Zzb6R",t&&"ExpandableArrow-module__ExpandableArrow--expanded___02I33",r),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[(0,e.jsx)("path",{fill:"currentColor",d:"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"}),(0,e.jsx)("path",{className:o("ExpandableArrow-module__ExpandableArrow-stem___o-Z1H",t&&"ExpandableArrow-module__ExpandableArrow-stem--expanded___omLNO"),stroke:"currentColor",d:"M1.75 8H11",strokeWidth:"1.5",strokeLinecap:"round"})]})}const l={LinkButton:"LinkButton-module__LinkButton___73d6V","LinkButton-arrow":"LinkButton-module__LinkButton-arrow___bd7ZC","LinkButton--primary":"LinkButton-module__LinkButton--primary___5T51r","LinkButton--secondary":"LinkButton-module__LinkButton--secondary___Oc3L1"};function u({variant:r="secondary",className:t,children:n,onMouseEnter:a,onMouseLeave:i,onFocus:u,onBlur:d,..._}){const[f,p]=s().useState(!1),[m,h]=s().useState(!1);return(0,e.jsxs)("a",{className:o(l.LinkButton,l[`LinkButton--${r}`],t),onMouseEnter:e=>{p(!0),a?.(e)},onMouseLeave:e=>{p(!1),i?.(e)},onFocus:e=>{h(!0),u?.(e)},onBlur:e=>{h(!1),d?.(e)},..._,children:[n,(0,e.jsx)(c,{className:l["LinkButton-arrow"],expanded:f||m})]})}function d({heading:r,description:t,primaryAction:n,secondaryAction:i,align:s="start"}){return(0,e.jsxs)("div",{className:o(a.Hero,a[`Hero--align-${s}`]),children:[(0,e.jsx)("h1",{className:a["Hero-heading"],children:r}),t?(0,e.jsx)("p",{className:a["Hero-description"],children:t}):null,(0,e.jsxs)("div",{className:a["Hero-actions"],children:[(0,e.jsx)(u,{variant:"primary",href:n.href,children:n.text}),i?(0,e.jsx)(u,{variant:"secondary",href:i.href,children:i.text}):null]})]})}var _;!function(e){e.LIGHT="light",e.DARK="dark",e.AUTO="auto"}(_||(_={}));const f=_.LIGHT,p=(0,i.createContext)({colorMode:f,availableColorModes:Object.values(_)});function m({colorMode:r=f,children:o,...t}){const[n,a]=(0,i.useState)(r),s=(0,i.useMemo)((()=>Object.values(_)),[]);return(0,i.useEffect)((()=>(r===_.AUTO?a(b()):n!==r&&a(r),y(a))),[r,n,a]),(0,e.jsx)(p.Provider,{value:{colorMode:n,availableColorModes:s},children:(0,e.jsx)("div",{"data-color-mode":n,...t,children:o})})}const h=()=>window.matchMedia(`(prefers-color-scheme: ${_.DARK})`),b=()=>h().matches?_.DARK:_.LIGHT,y=e=>{const r=h(),o=r=>e(r.matches?_.DARK:_.LIGHT);return r.addEventListener("change",o),()=>r.removeEventListener("change",o)},v=()=>(0,i.useContext)(p)})(),n})()}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react-brand",
-  "version": "0.0.3",
+  "version": "0.0.4-rc.bd3f6de",
   "author": "GitHub, Inc.",
   "license": "MIT",
   "bugs": {
@@ -21,10 +21,11 @@
     "lib"
   ],
   "scripts": {
+    "build": "npm run clean && npm run build:css-types && npm run build:css-vars && webpack",
     "build:css-vars": "ts-node --skipIgnore ./scripts/build-css-variables.ts",
     "build:types": "tsc --project tsconfig.build.json",
-    "build": "npm run clean && npm run build:css-types && npm run build:css-vars && webpack",
-    "build:storybook": "npm run build && build-storybook",
+    "build:storybook": "scripts/build-storybook",
+    "build:docs": "scripts/build-docs",
     "build:css-types": "tcm -p 'src/**/*.css' .",
     "check": "tsc --noEmit",
     "clean": "rm -rf lib",
@@ -32,8 +33,11 @@
     "format:fix": "prettier --write '**/*.{js,jsx,ts,tsx,md,mdx,css,json}'",
     "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
+    "postinstall": "cd docs && npm i",
     "release": "npm run build && changeset publish",
-    "start": "npm run build &&  start-storybook -p 6006",
+    "start": "npm run build && npm run start:storybook & npm run start:docs",
+    "start:storybook": "start-storybook -p 6006",
+    "start:docs": "cd docs && npm run develop",
     "start:css-types": "tcm -w -p 'src/**/*.css' .",
     "test": "jest"
   },
@@ -69,6 +73,7 @@
     "@typescript-eslint/parser": "^5.17.0",
     "autoprefixer": "^9.8.8",
     "css-loader": "^5.2.7",
+    "cross-env": "7.0.2",
     "eslint": "^8.12.0",
     "eslint-plugin-github": "^4.3.6",
     "eslint-plugin-jsx-a11y": "^6.5.1",