Skip to content

Commit 5251269

Browse files
langermanklangermank
authored
Merge branch 'main' into global-focus-styles
2 parents d19fd5d + 40b9e16 commit 5251269

24 files changed

+854
-729
lines changed

‎.github/workflows/axe.yml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
name: axe
2+
on:
3+
push:
4+
branches:
5+
- main
6+
pull_request:
7+
branches:
8+
- main
9+
jobs:
10+
axe:
11+
runs-on: ubuntu-latest
12+
steps:
13+
- uses: actions/checkout@v2
14+
with:
15+
fetch-depth: 0
16+
- name: Get changed files
17+
id: changed-files
18+
uses: tj-actions/changed-files@v18.6
19+
with:
20+
files: |
21+
docs/content/components/**/*.md
22+
docs/content/utilities/**/*.md
23+
files_ignore: |
24+
docs/content/components/index.md
25+
docs/content/utilities/index.md
26+
- name: Save changed files
27+
run: |
28+
echo "STRING_OF_PATHS_WE_CARE_ABOUT=${{ steps.changed-files.outputs.all_changed_files }}" >> $GITHUB_ENV
29+
- name: Use Node.js
30+
if: steps.changed-files.outputs.any_changed == 'true'
31+
uses: actions/setup-node@v3
32+
with:
33+
node-version: 14
34+
- run: yarn
35+
if: steps.changed-files.outputs.any_changed == 'true'
36+
- run: yarn dist
37+
if: steps.changed-files.outputs.any_changed == 'true'
38+
- name: Run docs site
39+
if: steps.changed-files.outputs.any_changed == 'true'
40+
run: |
41+
npm run dev & npx wait-on http://localhost:8000
42+
- name: Run axe script
43+
if: steps.changed-files.outputs.any_changed == 'true'
44+
run: |
45+
script/axe-docs $STRING_OF_PATHS_WE_CARE_ABOUT

‎.github/workflows/ci.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ jobs:
88
stylelint:
99
runs-on: ubuntu-latest
1010
steps:
11-
- uses: actions/checkout@v2
11+
- uses: actions/checkout@v3
1212
- uses: actions/setup-node@v3
1313
with:
1414
node-version: 14
@@ -44,7 +44,7 @@ jobs:
4444
eslint:
4545
runs-on: ubuntu-latest
4646
steps:
47-
- uses: actions/checkout@v2
47+
- uses: actions/checkout@v3
4848
- uses: actions/setup-node@v3
4949
with:
5050
node-version: 14
@@ -55,7 +55,7 @@ jobs:
5555
test:
5656
runs-on: ubuntu-latest
5757
steps:
58-
- uses: actions/checkout@v2
58+
- uses: actions/checkout@v3
5959
- uses: actions/setup-node@v3
6060
with:
6161
node-version: 14

‎.github/workflows/deploy_preview.yml‎

Lines changed: 31 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,57 @@
11
name: Deploy
22
on:
3-
push:
4-
branches-ignore:
5-
- 'main'
6-
paths:
7-
- 'src/**'
8-
- 'docs/**'
9-
- '.github/workflows/deploy*.yml'
10-
- 'package.json'
3+
pull_request:
4+
5+
permissions:
6+
contents: write
7+
pages: write
8+
id-token: write
9+
deployments: write
10+
issues: write
11+
statuses: write
12+
checks: write
13+
1114
jobs:
12-
deploy-preview:
15+
deploy:
1316
if: ${{ github.repository == 'primer/css' }}
14-
name: Preview
17+
uses: primer/.github/.github/workflows/deploy_preview.yml@rezrah/add-outputs
18+
name: Deploy preview
19+
with:
20+
node_version: 14
21+
install: yarn
22+
build: yarn build:docs:preview
23+
output_dir: docs/public
24+
25+
deploy-storybook:
26+
if: ${{ github.repository == 'primer/css' }}
27+
name: Preview Storybook
1528
runs-on: ubuntu-latest
29+
needs: deploy
1630
steps:
17-
- uses: actions/checkout@v2
18-
- uses: chrnorm/deployment-action@v1.2.0
19-
name: Create GitHub deployment
20-
id: deployment
21-
with:
22-
token: ${{ secrets.GITHUB_TOKEN }}
23-
environment: Preview
31+
- uses: actions/checkout@v3
32+
2433
- uses: chrnorm/deployment-action@v1.2.0
2534
name: Create GitHub deployment for storybook
2635
id: storybook
2736
with:
2837
token: ${{ secrets.GITHUB_TOKEN }}
2938
environment: Storybook Preview
39+
target_url: '${{ needs.deploy.outputs.deployment_url }}/storybook'
3040

31-
- name: Vercel Action
32-
uses: amondnet/vercel-action@v20
33-
id: vercel-action
34-
with:
35-
github-token: ${{ secrets.GITHUB_TOKEN }}
36-
vercel-token: ${{ secrets.VERCEL_TOKEN_SHARED }}
37-
github-comment: false
38-
vercel-org-id: ${{ secrets.VERCEL_ORG_ID_SHARED }}
39-
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
40-
41-
- name: Update deployment status (success)
42-
if: success()
43-
uses: chrnorm/deployment-status@v1.0.0
44-
with:
45-
token: ${{ secrets.GITHUB_TOKEN }}
46-
environment_url: ${{ steps.vercel-action.outputs.preview-url }}
47-
state: "success"
48-
deployment_id: ${{ steps.deployment.outputs.deployment_id }}
49-
5041
- name: Update storybook deployment status (success)
5142
if: success()
5243
uses: chrnorm/deployment-status@v1.0.0
5344
with:
5445
token: ${{ secrets.GITHUB_TOKEN }}
55-
environment_url: '${{ steps.vercel-action.outputs.preview-url }}/css/storybook'
56-
state: "success"
46+
environment_url: '${{ needs.deploy.outputs.deployment_url }}/storybook'
47+
target_url: '${{ needs.deploy.outputs.deployment_url }}/storybook'
48+
state: 'success'
5749
deployment_id: ${{ steps.storybook.outputs.deployment_id }}
5850

59-
- name: Update deployment status (failure)
60-
if: failure()
61-
uses: chrnorm/deployment-status@v1.0.0
62-
with:
63-
token: ${{ secrets.GITHUB_TOKEN }}
64-
state: "failure"
65-
deployment_id: ${{ steps.deployment.outputs.deployment_id }}
66-
6751
- name: Update storybook deployment status (failure)
6852
if: failure()
6953
uses: chrnorm/deployment-status@v1.0.0
7054
with:
7155
token: ${{ secrets.GITHUB_TOKEN }}
72-
state: "failure"
56+
state: 'failure'
7357
deployment_id: ${{ steps.storybook.outputs.deployment_id }}
74-

‎.github/workflows/deploy_production.yml‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,40 @@ on:
88
- 'docs/**'
99
- '.github/workflows/deploy*.yml'
1010
- 'package.json'
11+
12+
permissions:
13+
contents: read
14+
pages: write
15+
id-token: write
16+
1117
jobs:
12-
deploy:
13-
if: ${{ github.repository == 'primer/css' }}
14-
name: Production
18+
guard:
19+
name: Guard
1520
runs-on: ubuntu-latest
21+
outputs:
22+
# To avoid deploying documentation for unrelease changes, we check the number of changeset files.
23+
# If it's 0, we deploy.
24+
should_deploy: ${{ steps.changeset-count.outputs.change_count == 0 }}
1625
steps:
1726
- uses: actions/checkout@v2
1827

19-
# Check the number of changeset files, if it's 0 we deploy
2028
- id: changeset-count
21-
run: echo "::set-output name=CHANGE_COUNT::$(ls .changeset/*.md | grep -v README | wc -l | xargs)"
29+
run: echo "::set-output name=change_count::$(ls .changeset/*.md | grep -v README | wc -l | xargs)"
2230

23-
- if: ${{ steps.changeset-count.outputs.CHANGE_COUNT == 0 }}
24-
name: Vercel Action
25-
uses: amondnet/vercel-action@v20
26-
id: vercel-action
27-
with:
28-
github-token: ${{ secrets.GITHUB_TOKEN }}
29-
vercel-token: ${{ secrets.VERCEL_TOKEN_SHARED }}
30-
vercel-args: '--prod'
31-
github-comment: false
32-
vercel-org-id: ${{ secrets.VERCEL_ORG_ID_SHARED }}
33-
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
31+
# Log changeset count for debugging purposes
32+
- name: Log changeset count
33+
run: echo ${{ steps.changeset-count.outputs.change_count }}
34+
35+
# Log guard output for debugging purposes
36+
- name: Log guard output
37+
run: echo ${{ needs.guard.outputs.should_deploy }}
38+
deploy:
39+
if: ${{ github.repository == 'primer/css' && needs.guard.outputs.should_deploy == true }}
40+
name: Production
41+
needs: [guard]
42+
uses: primer/.github/.github/workflows/deploy_preview.yml@main
43+
with:
44+
node_version: 14
45+
install: yarn
46+
build: yarn build:docs
47+
output_dir: docs/public

‎.github/workflows/release.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ jobs:
1212
runs-on: ubuntu-latest
1313
steps:
1414
- name: Checkout repository
15-
uses: actions/checkout@v2
15+
uses: actions/checkout@v3
1616
with:
1717
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
1818
fetch-depth: 0

‎.github/workflows/release_candidate.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ jobs:
1212
runs-on: ubuntu-latest
1313
steps:
1414
- name: Checkout repository
15-
uses: actions/checkout@v2
15+
uses: actions/checkout@v3
1616
with:
1717
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
1818
fetch-depth: 0

‎.github/workflows/welcome.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ jobs:
88
runs-on: ubuntu-latest
99
steps:
1010
- name: Checkout repository
11-
uses: actions/checkout@v2
11+
uses: actions/checkout@v3
1212

1313
- name: Set up Node.js
1414
uses: actions/setup-node@v3
@@ -42,7 +42,7 @@ jobs:
4242
needs: release-template
4343
runs-on: ubuntu-latest
4444
steps:
45-
- uses: actions/checkout@v2
45+
- uses: actions/checkout@v3
4646
- uses: actions/setup-node@v3
4747
with:
4848
node-version: 14

‎DEVELOP.md‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,32 @@
33
If you've made it this far, **thank you**! We appreciate your contribution, and hope that this document helps you along the way. If you have any questions or problems, don't hesitate to [file an issue](https://github.com/primer/css/issues/new).
44

55
## Structure
6+
67
Primer CSS is published to [npm] as [@primer/css]. Each of Primer CSS's "modules" lives in a subfolder under `src/` with an `index.scss` in it. Generally speaking, the styles are divided into three primary themes:
78

8-
* **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
9-
* **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
10-
* **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
9+
- **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
10+
- **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
11+
- **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
1112

1213
### Paths
13-
Here's what you need to know about how the files are structured in both git and in the published npm module:
1414

15-
* In git, all of the SCSS source files live in the `src/` directory.
16-
* When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
15+
Here's what you need to know about how the files are structured in both git and in the published npm module:
1716

18-
```scss
19-
@import "@primer/css/utilities/index.scss";
20-
```
17+
- In git, all of the SCSS source files live in the `src/` directory.
18+
- When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
2119

22-
* All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
20+
```scss
21+
@import '@primer/css/utilities/index.scss';
22+
```
2323

24+
- All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
2425

2526
## Install
27+
2628
Run `npm install` to install the npm dependencies.
2729

2830
## Docs site
31+
2932
The Primer CSS docs are built with React using [Doctocat](https://primer.style/doctocat) and automatically deployed on every push to this repo with [Now]. You can run the server locally with:
3033

3134
```sh
@@ -35,41 +38,43 @@ npm start
3538
Then visit http://localhost:8000 to view the site.
3639

3740
### The docs directory
38-
The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
3941

42+
The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
4043

4144
### Code blocks
45+
4246
All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and listed under the relevant module's name in the left-hand nav. File changes should trigger a live reload automatically (after a brief delay).
4347

4448
## Storybook
4549

46-
Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic.
50+
Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic.
4751

4852
```sh
4953
npm run storybook
5054
```
5155

5256
### The Storybook directory
57+
5358
Storybook configuration files live in [.storybook](../docs/.storybook). Addons and additional global config can be added to [main.js](../docs/.storybook/main.js) or [preview.js](../docs/.storybook/preview.js)
5459

5560
### Stories
61+
5662
Stories are individual `.jsx` or `.mdx` files that contain component HTML for prototyping, typically showcasing all possible variations of a component. Stories can be found in the [stories directory](../docs/src/stories/components) and are organized by component. Storybook will build and deploy a preview on any open Pull Request.
5763

5864
## Scripts
65+
5966
Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS. Run `npm run <script>` with any of the following values for `<script>`:
6067

61-
* `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
62-
* `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
63-
* `stylelint` lints the CSS source files.
64-
* `eslint` lints the JavaScript source files.
65-
* `now-build` and `now-start` are run on [Now] to build and start the docs site server. `now-test` runs them both in order.
66-
* `start` runs the documentation site locally (alias: `dev`).
67-
* `test` runs our test suite.
68-
* `storybook` runs storybook local development server.
68+
- `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
69+
- `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
70+
- `stylelint` lints the CSS source files.
71+
- `eslint` lints the JavaScript source files.
72+
- `start` runs the documentation site locally (alias: `dev`).
73+
- `test` runs our test suite.
74+
- `storybook` runs storybook local development server.
6975

7076
The above list may not always be up-to-date. You can list all of the available scripts by calling `npm run` with no other arguments.
7177

72-
7378
[@primer/css]: https://www.npmjs.com/package/@primer/css
7479
[run-scripts]: https://docs.npmjs.com/cli/run-script
7580
[now]: https://zeit.co/now

‎docs/.storybook/manager-head.html‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

0 commit comments

Comments
 (0)