@primer/react-brand 0.5.1-rc.b80c351 → 0.5.2-rc.77de013

package/package.json

@@ -1,17 +1,7 @@
 {
   "name": "@primer/react-brand",
+  "version": "0.5.2-rc.77de013",
   "description": "Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.",
-  "version": "0.5.1-rc.b80c351",
-  "author": "GitHub, Inc.",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/primer/brand/issues"
-  },
-  "homepage": "https://primer.style/brand",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/primer/brand.git"
-  },
   "keywords": [
     "primer",
     "react",
@@ -19,10 +9,16 @@
     "library",
     "design-system"
   ],
-  "engines": {
-    "npm": ">=8.0.0",
-    "node": ">=16.0.0"
+  "homepage": "https://primer.style/brand",
+  "bugs": {
+    "url": "https://github.com/primer/brand/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/primer/brand.git"
   },
+  "license": "MIT",
+  "author": "GitHub, Inc.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
@@ -30,53 +26,31 @@
     "fonts"
   ],
   "scripts": {
-    "build": "npm run clean && npm run build:css-types && npm run build:tokens && webpack",
+    "build": "npm run clean && npm run build:css-types && webpack && scripts/postbuild",
     "build:css-types": "tcm -p 'src/**/*.module.css' .",
-    "build:types": "tsc --project tsconfig.build.json",
-    "build:storybook": "scripts/build-storybook",
-    "build:storybook:preview": "scripts/build-storybook preview",
-    "build:docs": "scripts/build-docs",
-    "build:docs:preview": "scripts/build-docs preview",
     "build:tokens": "node scripts/build-tokens.js",
+    "build:types": "tsc --project tsconfig.build.json",
     "check": "tsc --noEmit",
     "clean": "rm -rf lib",
     "format": "prettier --check '**/*.{js,jsx,ts,tsx,md,mdx,css,json}'",
     "format:fix": "prettier --write '**/*.{js,jsx,ts,tsx,md,mdx,css,json}'",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --config ../../.eslintrc.js",
     "lint:fix": "npm run lint -- --fix",
     "release": "npm run build && changeset publish",
-    "start": "npm run build && npm run start:storybook & npm run start:docs",
-    "start:storybook": "start-storybook -p 6006",
-    "start:docs": "npm run build && cd docs && npm run develop",
+    "start": "npm run start:css-types",
     "start:css-types": "tcm -w -p 'src/**/*.css' .",
+    "start:docs": "npm run build && cd apps/docs && npm run develop",
     "test": "jest",
     "test:visual": "npx build-storybook && scripts/playwright/run-visual-tests",
     "test:visual:generate": "npm run build:docs && ts-node scripts/playwright/playwright.generate-tests.ts",
     "test:visual:update-snapshots": "npx build-storybook && scripts/playwright/update-visual-snapshots"
   },
-  "peerDependencies": {
-    "react": ">=17 <= 18",
-    "react-dom": ">=17 <= 18"
+  "dependencies": {
+    "clsx": "^1.1.1"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "^0.4.3",
-    "@changesets/cli": "^2.21.0",
-    "@github/prettier-config": "^0.0.4",
-    "@playwright/test": "^1.24.0",
     "@primer/octicons-react": "^17.3.0",
-    "@primer/primitives": "^7.9.0",
     "@reach/auto-id": "^0.17.0",
-    "@storybook/addon-a11y": "^6.5.9",
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/addon-interactions": "^6.5.12",
-    "@storybook/addon-links": "^6.5.6",
-    "@storybook/builder-webpack5": "^6.5.6",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack5": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@storybook/test-runner": "^0.5.0",
-    "@storybook/testing-library": "^0.0.11",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
@@ -86,46 +60,30 @@
     "@types/react": "^17.0.50",
     "@types/react-dom": "^17.0.11",
     "@types/webpack": "^4.41.25",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
     "autoprefixer": "^9.8.8",
     "axe-playwright": "^1.1.11",
     "color2k": "^2.0.0",
-    "cross-env": "7.0.2",
     "css-loader": "^6.7.1",
-    "eslint": "^8.12.0",
-    "eslint-import-resolver-typescript": "^2.7.0",
-    "eslint-plugin-github": "^4.3.6",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-mdx": "^1.17.0",
-    "eslint-plugin-primer-react": "^0.7.4",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
-    "eslint-plugin-storybook": "^0.5.12",
-    "fast-glob": "^3.2.11",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.5.1",
     "jest-axe": "^6.0.0",
     "mini-css-extract-plugin": "^2.6.0",
     "postcss": "^8.4.7",
     "postcss-loader": "^6.2.1",
     "postcss-preset-env": "^7.4.2",
-    "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "storybook-css-modules-preset": "^1.1.1",
     "style-dictionary": "^3.7.0",
     "style-loader": "^3.3.1",
-    "ts-jest": "^27.1.3",
     "ts-loader": "^9.2.7",
-    "ts-node": "^10.9.1",
     "typed-css-modules": "^0.7.0",
-    "typescript": "^4.6.3",
     "typescript-plugin-css-modules": "^3.4.0",
     "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2"
   },
-  "dependencies": {
-    "clsx": "^1.1.1"
+  "peerDependencies": {
+    "react": ">=17 <= 18",
+    "react-dom": ">=17 <= 18"
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
   }
 }

package/CHANGELOG.md

@@ -1,310 +0,0 @@
-# @primer/react-brand
-
-## 0.5.1
-
-### Patch Changes
-
-- [#87](https://github.com/primer/brand/pull/87) [`0a82cd4`](https://github.com/primer/brand/commit/0a82cd42e8eb4f001504345172d209a33e18a476) Thanks [@rezrah](https://github.com/rezrah)! - UI bugfixes for `SubdomainNavBar` and `Testimonial` components.
-
-  ## SubdomainNavBar
-
-  - Fix bug where a missing `SubdomainNavBar.Search` child would cause the `SubdomainNavBar` to render incorrectly, despite being optional.
-  - Fix bug where the overflow menu still appears when there are no items in the overflow menu.
-  - Fix bug where longer titles caused text wrapping and layout issues. Slightly longer titles are now accepted.
-
-  ## Testimonial
-
-  - Increase spacing beneath the quote visual to 48px from 45px.
-
-* [#89](https://github.com/primer/brand/pull/89) [`396734e`](https://github.com/primer/brand/commit/396734ecc4d4559c5ea7a63d009050b2b487d489) Thanks [@rezrah](https://github.com/rezrah)! - Add `titleHref` and `fullWidth` props for SubdomainNavBar
-
-  Usage example:
-
-  ```jsx
-  <SubdomainNavBar fullWidth={true} titleHref="/something-other-than-home" title="Subdomain">
-    {/* ... */}
-  </SubdomainNavBar>
-  ```
-
-## 0.5.0
-
-### Minor Changes
-
-- [#81](https://github.com/primer/brand/pull/81) [`88e2007`](https://github.com/primer/brand/commit/88e20076f797338b9ab6d7d2d932320094cda5d7) Thanks [@rezrah](https://github.com/rezrah)! - Added `SubdomainNavBar` component.
-
-  Usage example:
-
-  ```jsx
-  <SubdomainNavBar title="Subdomain">
-    <SubdomainNavBar.Link href="#">Collections</SubdomainNavBar.Link>
-    <SubdomainNavBar.Link href="#">Topics</SubdomainNavBar.Link>
-    <SubdomainNavBar.Link href="#">Articles</SubdomainNavBar.Link>
-    <SubdomainNavBar.Link href="#">Events</SubdomainNavBar.Link>
-    <SubdomainNavBar.Link href="#">Video</SubdomainNavBar.Link>
-    <SubdomainNavBar.Link href="#">Social</SubdomainNavBar.Link>
-    <SubdomainNavBar.Search ref={inputRef} onSubmit={handleSubmit} />
-    <SubdomainNavBar.PrimaryAction href="#">Primary CTA</SubdomainNavBar.PrimaryAction>
-    <SubdomainNavBar.SecondaryAction href="#">Secondary CTA</SubdomainNavBar.SecondaryAction>
-  </SubdomainNavBar>
-  ```
-
-  See the [documentation](https://primer.style/brand/components/SubdomainNavBar) and [Storybook](https://primer.style/brand/storybook/?path=/story/components-subdomainnavbar--playground) for more usage examples.
-
-* [#82](https://github.com/primer/brand/pull/82) [`afbab6c`](https://github.com/primer/brand/commit/afbab6c24b5a8fe08d6eea28dfebc4bde143bfd5) Thanks [@rezrah](https://github.com/rezrah)! - Added `Testimonial` component.
-
-  Usage example:
-
-  ```jsx
-  <Testimonial>
-    <Testimonial.Quote>
-      GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
-      of code we&apos;re writing.
-    </Testimonial.Quote>
-    <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
-    <Testimonial.Avatar
-      src="https://avatars.githubusercontent.com/u/92997159?v=4"
-      alt="Circular avatar from David Ross's GitHub profile"
-    />
-  </Testimonial>
-  ```
-
-  See the [documentation](https://primer.style/brand/components/Testimonial) or [Storybook](https://primer.style/brand/storybook/?path=/story/components-testimonial--playground) for more usage examples.
-
-- [#82](https://github.com/primer/brand/pull/82) [`afbab6c`](https://github.com/primer/brand/commit/afbab6c24b5a8fe08d6eea28dfebc4bde143bfd5) Thanks [@rezrah](https://github.com/rezrah)! - Added `Stack` component.
-
-  Usage example:
-
-  ```jsx
-  <Stack direction="horizontal" gap="spacious" padding="spacious">
-    <div>
-      <img
-        src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
-        alt="placeholder with gray background and no foreground text"
-      />
-    </div>
-    <div>
-      <img
-        src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
-        alt="placeholder with gray background and no foreground text"
-      />
-    </div>
-    <div>
-      <img
-        src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
-        alt="placeholder with gray background and no foreground text"
-      />
-    </div>
-  </Stack>
-  ```
-
-  See [Storybook](https://primer.style/brand/storybook/?path=/story/components-stack--playground) for more usage examples.
-
-## 0.4.0
-
-### Minor Changes
-
-- [#78](https://github.com/primer/brand/pull/78) [`487a9e7`](https://github.com/primer/brand/commit/487a9e7b03b6c196358e1f1146fd87e8c4fe44d4) Thanks [@JoshBowdenConcepts](https://github.com/JoshBowdenConcepts)! - Added a new `size` prop to `Button` and a `medium` sized variant, making the previous `large` size optional.
-
-  ⚠️ This update should be considered a breaking change, despite being issued in a `minor` release.
-
-  Selectable values: `medium` (default) and `large`.
-
-  **Upgrade steps:**
-
-  ```diff
-  - <Button>before</Button>
-  + <Button size="large">after</Button>
-  ```
-
-* [#69](https://github.com/primer/brand/pull/69) [`7838af5`](https://github.com/primer/brand/commit/7838af57ae2fdb94d07c188a142feebc0a4a605d) Thanks [@rezrah](https://github.com/rezrah)! - Added `FormControl`, `Checkbox`, `TextInput` and `Select` components.
-
-  **Read the Technical Previews for usage examples:**
-
-  [🔗 FormControl](https://primer.style/brand/components/FormControl)
-
-  [🔗 Checkbox](https://primer.style/brand/components/Checkbox)
-
-  [🔗 TextInput](https://primer.style/brand/components/TextInput)
-
-  [🔗 Select](https://primer.style/brand/components/Select)
-
-## 0.3.1
-
-### Patch Changes
-
-- [#59](https://github.com/primer/brand/pull/59) [`fdc731b`](https://github.com/primer/brand/commit/fdc731bda050aaef7041aafe6aaa7857c49ea03b) Thanks [@rezrah](https://github.com/rezrah)! - Added `fillMedia` prop to River.Visual
-
-  Previously, all image and video children were automatically styled to fit the parent elements dimensions.
-
-  This isn't ideal in all situations, so the ability to toggle-off this behaviour is now available through an `fillMedia` prop.
-
-## 0.3.0
-
-### Minor Changes
-
-- [`c8609a8`](https://github.com/primer/brand/commit/c8609a8d35ea80192d85e97794390207f4624e63) Thanks [@rezrah](https://github.com/rezrah)! - added an FAQ component, which displays a list of questions and answers relating to a particular subject.
-
-  [See usage examples](https://primer.style/brand/components/FAQ)
-
-* [#45](https://github.com/primer/brand/pull/45) [`2fb6924`](https://github.com/primer/brand/commit/2fb6924a834ddcbad34cfb97ecfc1659d54f4ed5) Thanks [@rezrah](https://github.com/rezrah)! - > **Warning**
-
-  > This is a breaking change, but as the library is a pre-v1 release we are publishing this update as a `minor` change.
-  > Please read the following instructions carefully before updating:
-
-  ### Updated references for "left" and "right" to "start" and "end"
-
-  For improved i18n support and closer alignment with our Figma naming conventions, we have updated the references for "left" and "right" to "start" and "end" respectively in `Hero` and `River` components.
-
-  ```diff
-  - <River align="left">
-  - <River align="right">
-  + <River align="start">
-  + <River align="end">
-  ```
-
-## 0.2.1
-
-### Patch Changes
-
-- [#38](https://github.com/primer/brand/pull/38) [`b0c9293`](https://github.com/primer/brand/commit/b0c929389d62f184e5ae447c0b00e351cb2d1c6e) Thanks [@rezrah](https://github.com/rezrah)! - updated `css-loader` to generate valid (escaped) class names
-
-## 0.2.0
-
-### Minor Changes
-
-- [#33](https://github.com/primer/brand/pull/33) [`662fcfc`](https://github.com/primer/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/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
-
-- [#19](https://github.com/primer/brand/pull/19) [`3b22e9e`](https://github.com/primer/brand/commit/3b22e9e0823401104d6e33b3c4f8664b755ea6ba) Thanks [@colebemis](https://github.com/colebemis)! - Add `size` prop to `Hero` component
-
-### Patch Changes
-
-- [#23](https://github.com/primer/brand/pull/23) [`77abf53`](https://github.com/primer/brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - add Text and Heading components
-
-* [#29](https://github.com/primer/brand/pull/29) [`144c7d7`](https://github.com/primer/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/brand/pull/23) [`77abf53`](https://github.com/primer/brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - forward className in Hero
-
-* [#25](https://github.com/primer/brand/pull/25) [`4b00b72`](https://github.com/primer/brand/commit/4b00b72f5dbf5e578351ea77e1e74cddc69833e7) Thanks [@rezrah](https://github.com/rezrah)! - adds baseline tokens
-
-- [#21](https://github.com/primer/brand/pull/21) [`ab06cce`](https://github.com/primer/brand/commit/ab06cceb6ed3b2eaca70f9738b9708343b4e6db9) Thanks [@rezrah](https://github.com/rezrah)! - Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.
-
-* [#27](https://github.com/primer/brand/pull/27) [`ca2d300`](https://github.com/primer/brand/commit/ca2d3002ba6f7ca9c719f80077c4d95246f33410) Thanks [@rezrah](https://github.com/rezrah)! - Updated Hero text appearance
-
-  - **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
-
-### Patch Changes
-
-- [#18](https://github.com/primer/brand/pull/18) [`0835830`](https://github.com/primer/brand/commit/0835830fc15c582e280ac692ff3d578d6bcf282e) Thanks [@rezrah](https://github.com/rezrah)! - Fixes for production bundles
-
-## 0.0.2
-
-### Patch Changes
-
-- [#2](https://github.com/primer/brand/pull/2) [`ab01a8a`](https://github.com/primer/brand/commit/ab01a8ad1dc504f7a2865213b6f41c0b0adba131) Thanks [@colebemis](https://github.com/colebemis)! - Initialize releases with [changesets](https://github.com/changesets/changesets)

package/README.md

@@ -1,56 +0,0 @@
-<p align="center">
-  <img width="300px" src="https://user-images.githubusercontent.com/4608155/127241386-f11da52d-00d9-4366-b01c-6f4c1ebcf7f2.png">
-</p>
-
-<h1 align="center">Primer Brand</h1>
-
-<p align="center"><strong>Primer Brand is a GitHub’s design system for creating one-off marketing websites and digital experiences.</strong>
-</p>
-
-<p align="center">The design system comprises a Figma library and corresponding React components.
-</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/brand/actions/workflows/ci.yml">
-    <img alt="" src="https://github.com/primer/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/brand/blob/main/LICENSE">
-    <img src="https://img.shields.io/github/license/primer/brand" alt="">
-  </a>
-</p>
-
-<p align="center">
-    <a href="https://primer.github.io/brand/" target="_blank">https://primer.style/brand</a>
-</p>
-
-## Documentation
-
-Our documentation site lives at [primer.style/brand](https://primer.style/brand). You'll be able to find detailed documentation on getting started, all of the components and more.
-
-## Install
-
-Primer Brand libraries are published to the [npm](https://www.npmjs.com/package/@primer/react-brand) registry. 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/brand/getting-started) for more information.
-
-## Contributing
-
-See [CONTRIBUTING.md](./CONTRIBUTING.md) for development and contribution guidelines.
-
-## Releasing (for GitHub staff)
-
-You can find docs about our release process in [RELEASING.md](RELEASING.md).
-
-## License
-
-[MIT](./LICENSE) &copy; [GitHub](https://github.com/)