@primer/css 0.0.0-1ea75fe → 0.0.0-202110100305

package/CODE_OF_CONDUCT.md

@@ -40,7 +40,7 @@ response to any instances of unacceptable behavior.
 Project maintainers have the right and responsibility to remove, edit, or
 reject comments, commits, code, wiki edits, issues, and other contributions
 that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
+permanently any contributor for any behavior that they deem inappropriate,
 threatening, offensive, or harmful.
 
 ## Scope

package/CONTRIBUTING.md

@@ -0,0 +1,85 @@
+## Contributing
+
+Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
+
+## Using the issue tracker
+
+The issue tracker is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following restrictions:
+
+* Please **do not** use the issue tracker for personal support requests.
+* Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others.
+
+## Bug reports
+
+A bug is a _demonstrable problem_ that is caused by the code in the repository. Good bug reports are extremely helpful, so thanks!
+
+Guidelines for bug reports:
+
+1. **Validate and lint your code** — [validate your HTML](http://html5.validator.nu) to ensure your problem isn't caused by a simple error in your own code.
+
+2. **Use the GitHub issue search** — check if the issue has already been reported.
+
+3. **Check if the issue has been fixed** — try to reproduce it using the latest `main` branch in the repository.
+
+4. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example.
+
+A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? Do other browsers show the bug differently? What would you expect to be the outcome? All these details will help people to fix any potential bugs.
+
+Example:
+
+> Short and descriptive example bug report title
+>
+> A summary of the issue and the browser/OS environment in which it occurs. If
+> suitable, include the steps required to reproduce the bug.
+>
+> 1. This is the first step
+> 2. This is the second step
+> 3. Further steps, etc.
+>
+> `<url>` - a link to the reduced test case
+>
+> Any other information you want to share that is relevant to the issue being reported. This might include the lines of code that you have identified as causing the bug, and potential solutions (and your opinions on their merits).
+
+## Feature requests
+
+Feature requests are welcome, but take a moment to find out whether your idea fits with the scope and aims of the project. It's up to *you* to make a strong case to convince the project's developers of the merits of this feature. Please provide as much detail and context as possible.
+
+## Pull requests
+
+Good pull requests—patches, improvements, new features—are a fantastic help. They should remain focused in scope and avoid containing unrelated commits.
+
+**Please ask first** before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project.
+
+### Updating Primer CSS
+
+Anyone can open a pull request on Primer CSS. You do not need to work at GitHub or be a member of the org to open a pull request.
+
+1. Fork and clone [this repository](https://github.com/primer/css).
+2. Configure and install the dependencies: `npm install`
+3. Create a new branch from main `git checkout -b my-branch-name`
+4. Make your changes and commit them.
+5. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/css-reviewers`.
+6. Wait for CI tests to finish.
+   - If the tests pass, you should see a status check telling you which alpha version of `@primer/css` you can install with npm to test your work in other projects.
+   - If the tests fail, review the logs and address any issues.
+   - If the builds fail for any other reason (as they occasionally do), they may need to be manually restarted.
+7. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff.
+8. Pat yourself on the back and wait for your pull request to be reviewed.
+
+Here are a few things you can do that will increase the likelihood of your pull request being accepted:
+
+- Keep your change as focused as possible. If there are multiple changes you would like to make that are not dependent upon each other, consider submitting them as separate pull requests.
+- Write a [good commit message](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html).
+
+## Releasing a new Primer CSS version
+See [RELEASING.md](RELEASING.md) for our release process.
+
+## Resources
+
+- [Contributing to Open Source on GitHub](https://guides.github.com/activities/contributing-to-open-source/)
+- [Using Pull Requests](https://help.github.com/articles/using-pull-requests/)
+- [GitHub Help](https://help.github.com)
+
+[fork]: https://github.com/primer/css/fork
+[pr]: https://github.com/primer/css/compare
+[style]: https://primer.style/css/principles

package/DEVELOP.md

@@ -22,99 +22,41 @@ Here's what you need to know about how the files are structured in both git and
 * 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`).
 
 
-## Workflow
-The typical Primer workflow looks something like this:
-
-1. `npm install` to install the development dependencies.
-1. [Start Storybook](#storybook)
-1. Navigate to the module you're working on and modify the SCSS and/or markdown files.
-1. Test your changes in Storybook.
-1. Push your work to a new branch.
-1. Request a review from one of the Primer "core" team members.
-
 ## Install
 Run `npm install` to install the npm dependencies.
 
 ## Docs site
-The Primer CSS docs are built with React using [Primer Components](https://primer.style/components) and automatically deployed on every push to this repo using our [primer/deploy action](/primer/deploy). You can run the server locally with:
+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:
 
 ```sh
 npm start
 ```
 
-Then visit http://localhost:3000/css to view the site.
-
-:rotating_light: **Warning:** Next.js has a [long-running issue](https://github.com/zeit/next.js/issues/1189) with trailing slashes in URLs. Avoid visiting `http://localhost:3000/` if possible, as this may cause your development server to fail in less-than-graceful ways.
-
-
-### Syncing the docs
-Both before and while the Next dev server runs, all of the Markdown files within the `src/` directory are synced to Next's `pages/` directory and rewritten to include useful metadata.
-
-If, for whatever reason, the dev server isn't syncing files from `src/` to `pages/`, you have two choices:
-
-1. Stop the server (`ctrl-C`) and restart it (`npm start`), which will re-sync the files and clear Next's cache.
-2. Run [script/sync](./script/sync) manually:
-
-    ```sh
-    # in the docs directory
-    script/sync
-    ```
-
-    **If you find yourself needing to do this often, please [file an issue](/primer/css/issues/new) and tag `@shawnbot`**. :bow:
-
-### The pages directory
-The [pages directory](./pages/) contains all of the files that map to URLs on the site. Because we host the site at `primer.style/css` (and because of the way that Now's path aliasing feature works), we nest all of our documentation under the [css subdirectory](./pages/css).
-
-The sync task maintains a list of files copied from `src/` in `pages/css/.gitignore`, which ensures that none of these generated files are checked into git.
-
-
-### URL tests
-We have a script that catches inadvertent URL changes caused by renaming or deleting Markdown docs:
-
-```sh
-npm run test-urls
-```
-
-This script includes some exceptions for URLs that have been intentionally moved or removed in the process of moving away from the [GitHub Style Guide](https://styleguide.github.com/primer/), and which you will need to modify if you rename or remove either Markdown docs or their `path` frontmatter. See [#641](https://github.com/primer/css/pull/641) for more information.
+Then visit http://localhost:8000 to view the site.
 
-## Storybook
-To borrow a [metaphor from Brad Frost](http://bradfrost.com/blog/post/the-workshop-and-the-storefront/), the [docs site](#docs-site) is Primer CSS's storefront, and [Storybook] is its workshop.
+### The docs directory
+The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
 
-Our Storybook setup allows you to view every HTML code block in Primer CSS's Markdown docs in isolation. To get started, run the Storybook server with:
-
-```sh
-npm run start-storybook
-```
-
-This should open up the site in your browser (if not, navigate to `http://localhost:8001`).
 
 ### Code blocks
 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).
 
-Note: At this time, we do not load any stories from `src/**/stories.js`.
-
 ## Scripts
-Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS, notably:
+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>`:
 
 * `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
 * `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
-* `lint` lints all of our SCSS source files.
-* `lint-js` lints the docs site and supporting scripts.
+* `stylelint` lints the CSS source files.
+* `eslint` lints the JavaScript source files.
 * `now-build` and `now-start` are run on [Now] to build and start the docs site server. `now-test` runs them both in order.
-* `sync` copies Markdown docs from `src/` to `pages/css/` and preps them for inclusion in the docs site.
-* `test-urls` compares a (pre-generated) list of paths from the [Primer Style Guide](https://styleguide.github.com/primer/) to files in `pages/css`, and lets us know if we've inadvertently deleted or renamed anything.
-* `test-migrate` tests the [`primer-migrate`](MIGRATING.md#primer-migrate) command line utility.
-* `watch` runs the sync script in watch mode, copying files as they're changed from `src/` to `pages/css/`.
+* `start` runs the documentation site locally (alias: `dev`).
+* `test` runs our test suite.
 
-You can list all of the available scripts with:
-
-```sh
-npm run
-```
+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.
 
 
 [@primer/css]: https://www.npmjs.com/package/@primer/css
 [run-scripts]: https://docs.npmjs.com/cli/run-script
-[storybook]: https://storybook.js.org/
+[now]: https://zeit.co/now
 [npm]: https://www.npmjs.com/
 [npx]: https://www.npmjs.com/package/npx

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 GitHub Inc.
+Copyright (c) 2021 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,5 +1,5 @@
 <p align="center">
-  <img width="300px" src="./static/readme.png">
+  <img width="300px" src="./docs/src/readme.png">
 </p>
 
 <h1 align="center">Primer CSS</h1>
@@ -10,28 +10,29 @@
   <a aria-label="npm package" href="https://www.npmjs.com/package/@primer/css">
     <img alt="" src="https://img.shields.io/npm/v/@primer/css.svg">
   </a>
+  <a aria-label="build status" href="https://github.com/primer/css/actions/workflows/ci.yml">
+    <img alt="" src="https://github.com/primer/css/actions/workflows/ci.yml/badge.svg">
+  </a>
   <a aria-label="contributors graph" href="https://github.com/primer/css/graphs/contributors">
     <img src="https://img.shields.io/github/contributors/primer/css.svg">
   </a>
-  <a aria-label="last commit" href="https://github.com/primer/css/commits/master">
+  <a aria-label="last commit" href="https://github.com/primer/css/commits/main">
     <img alt="" src="https://img.shields.io/github/last-commit/primer/css.svg">
   </a>
-  <a aria-label="join us in spectrum" href="https://spectrum.chat/primer">
-    <img alt="" src="https://withspectrum.github.io/badge/badge.svg">
-  </a>
-  <a aria-label="license" href="https://github.com/primer/css/blob/master/LICENSE">
+  <a aria-label="license" href="https://github.com/primer/css/blob/main/LICENSE">
     <img src="https://img.shields.io/github/license/primer/css.svg" alt="">
   </a>
 </p>
 
-## Migrating
-:rotating_light: **If you currently use the `primer` or `primer-`-prefixed npm packages, please read [the migration guide](MIGRATING.md)!**
+## Documentation
+
+Our documentation site lives at [primer.style/css](https://primer.style/css). You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.
 
 ## Install
 This repository is distributed with [npm]. After [installing npm][install-npm], you can install `@primer/css` with this command:
 
 ```sh
-$ npm install --save @primer/css
+npm install --save @primer/css
 ```
 
 ## Usage
@@ -50,13 +51,10 @@ You can import individual Primer modules directly from the `@primer/css` package
 ```
 
 ## Development
-See [DEVELOP.md](./DEVELOP.md) for development docs.
+See [DEVELOP.md](DEVELOP.md) for development docs.
 
 ## Releasing (for GitHub staff)
-You can find docs about our release process in [RELEASING.md](./RELEASING.md).
-
-## Documentation
-The [Primer CSS docs site](https://primer.style/css) is deployed from this repo with [primer/deploy](https://github.com/primer/deploy). See [the development docs](DEVELOP.md#docs-site) for more info.
+You can find docs about our release process in [RELEASING.md](RELEASING.md).
 
 ## License
 
@@ -65,5 +63,5 @@ The [Primer CSS docs site](https://primer.style/css) is deployed from this repo
 
 [install-npm]: https://docs.npmjs.com/getting-started/installing-node
 [npm]: https://www.npmjs.com/
-[primer]: https://primer.style
+[primer]: https://primer.style/
 [sass]: http://sass-lang.com/

package/RELEASING.md

@@ -2,62 +2,9 @@
 
 ## Prepare the release (in `primer/css`)
 
-1. Decide which [PRs](https://github.com/primer/css/pulls) should be part of the next release and if it will be a major, minor or patch `<version>`. You may also check the [release tracking project
-](https://github.com/primer/css/projects/2#column-4482699) or ask your team members in Slack.
-
-1. Create a new release branch from `master` and name it `release-<version>`.
-
-1. Start merging existing PRs into the release branch. Note: You have to change the base branch from `master` to the `release-<version>` branch before merging.
-
-1. Create a new PR for the `release-<version>` branch. Please use the following template for the PR description, linking to the relevant issues and/or pull requests for each change, removing irrelevant headings and checking off all of the boxes of the ship checklist:
-
-    ```md
-    # Primer CSS [Major|Minor|Patch] Release
-
-    Version: 📦 **0.0.0**
-    Approximate release date: 📆 DD/MM/YY
-
-    ### :boom: Breaking Change
-    - [ ] Description #
-
-    ### :rocket: Enhancement
-    - [ ] Description #
-
-    ### :bug: Bug Fix
-    - [ ] Description #
-
-    ### :nail_care: Polish
-    - [ ] Description #
-
-    ### :memo: Documentation
-    - [ ] Description #
-
-    ### :house: Internal
-    - [ ] Description #
-
-    ----
-
-    ### Ship checklist
-
-    - [ ] Update `CHANGELOG.md`
-    - [ ] Update the `version` field in `package.json`
-    - [ ] Test the release candidate version with `github/github`
-    - [ ] Merge this PR and [create a new release](https://github.com/primer/css/releases/new)
-    - [ ] Update `github/github`
-
-    For more details, see [RELEASING.md](https://github.com/primer/css/blob/master/RELEASING.md).
-
-    /cc @primer/ds-core
-    ```
-
-1. Update `CHANGELOG.md`
-
-1. Update the `version` field in `package.json` to match the release version. You may also run the `npm version v<version>` command.
-
-1. Wait for your checks to pass, and take note of the version that [primer/publish] lists in your status checks.
-
-    **ProTip:** The release candidate version will always be `<version>-rc.<sha>`, where `<version>` comes from the branch name and `<sha>` is the 7-character commit SHA.
+The release process is automated by [changesets]. After you familiarize yourself with how they work. We use an [action workflow integrated in ci](https://github.com/atlassian/changesets#integrating-with-ci).
 
+1. Visit the pull requests page and find the [latest Release tracking pr from primer-css](https://github.com/primer/css/pulls/primer-css). If there isn't one, we'll need to build the next release by merging in PRs with changeset files.
 
 ## Test the release candidate (in `github/github`):
 
@@ -82,13 +29,9 @@
 
 1. If the release PR got approved and you've done necessary testing, merge it.
 
-    After tests run, the docs site will be deployed and `@primer/css` will be published with your changes to the `latest` dist-tag. You can check [npm](https://www.npmjs.com/package/@primer/css?activeTab=versions) to see if [primer/publish] has finished.
-
-1. [Create a new release](https://github.com/primer/primer/releases/new) with tag `v<version>`.
+    After tests run, the docs site will be deployed and `@primer/css` will be published with your changes to the `latest` dist-tag. You can check [npm](https://www.npmjs.com/package/@primer/css?activeTab=versions) to see if actions has finished.
 
-1. Copy the changes from the [CHANGELOG] and paste them into the release notes.
-
-1. Publish 🎉
+2. done 🎉
 
 
 ## Update github.com (in `github/github`):
@@ -105,15 +48,5 @@
 
 1. Deploy! :rocket:
 
-
-### Publish the release
-
-1. [Create a new release](https://github.com/primer/css/releases/new) with tag `v<version>`.
-
-2. Copy the changes from the [CHANGELOG] and paste them into the release notes.
-
-3. Publish 🎉
-
-
 [changelog]: ../CHANGELOG.md
-[primer/publish]: https://github.com/primer/publish
+[changesets]: https://github.com/atlassian/changesets

package/actionlist/action-list-item-divider.scss

@@ -0,0 +1,42 @@
+// emtpy divider
+
+.ActionList-sectionDivider {
+  // has children
+  &:not(:empty) {
+    display: flex;
+    // stylelint-disable-next-line primer/spacing
+    padding: ($spacer-1 * 1.5) $spacer-2;
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    color: var(--color-fg-muted);
+    flex-direction: column;
+  }
+
+  // no children
+  &:empty {
+    height: 1px;
+    padding: 0;
+    // stylelint-disable-next-line primer/spacing
+    margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
+    list-style: none;
+    background: var(--color-action-list-item-inline-divider);
+    border: 0;
+  }
+}
+
+.ActionList-sectionDivider--filled {
+  margin: $spacer-2 ($spacer-2 * -1);
+  background: var(--color-canvas-subtle);
+  border-top: $border-width $border-style var(--color-action-list-item-inline-divider);
+  border-bottom: $border-width $border-style var(--color-action-list-item-inline-divider);
+
+  // if no children, treat as divider
+  &:empty {
+    height: $spacer-2;
+    box-sizing: border-box;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+}