mirror of
https://github.com/primer/css.git
synced 2024-12-02 07:53:06 +03:00
Merge remote-tracking branch 'origin/master' into tooltip
This commit is contained in:
Shawn Allen
commit
3dd48ca604
6
.browserslistrc
Normal file
6
.browserslistrc
Normal file
@ -0,0 +1,6 @@
|
||||
> 5%
|
||||
last 2 firefox versions
|
||||
last 2 chrome versions
|
||||
last 2 safari versions
|
||||
last 2 edge versions
|
||||
ie 11
|
||||
13
.eslintrc.json
Normal file
13
.eslintrc.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": [
|
||||
"plugin:github/es6",
|
||||
"plugin:github/recommended"
|
||||
],
|
||||
"env": {
|
||||
"es6": true,
|
||||
"node": true
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2017
|
||||
}
|
||||
}
|
||||
42
.github/main.workflow
vendored
Normal file
42
.github/main.workflow
vendored
Normal file
@ -0,0 +1,42 @@
|
||||
workflow "lint, test, deploy, publish" {
|
||||
on = "push"
|
||||
resolves = [
|
||||
"lint",
|
||||
"test",
|
||||
"publish",
|
||||
"deploy",
|
||||
]
|
||||
}
|
||||
|
||||
action "install" {
|
||||
uses = "actions/npm@v2.0.0"
|
||||
args = ["install", "--unsafe-perm"]
|
||||
}
|
||||
|
||||
action "lint" {
|
||||
needs = "install"
|
||||
uses = "actions/npm@v2.0.0"
|
||||
args = ["--unsafe-perm", "run", "lint"]
|
||||
}
|
||||
|
||||
action "test" {
|
||||
needs = "install"
|
||||
uses = "actions/npm@v2.0.0"
|
||||
args = ["--unsafe-perm", "test"]
|
||||
}
|
||||
|
||||
action "publish" {
|
||||
needs = ["lint", "test"]
|
||||
uses = "primer/publish@v1.0.0"
|
||||
args = ["--", "--unsafe-perm"]
|
||||
secrets = ["GITHUB_TOKEN", "NPM_AUTH_TOKEN"]
|
||||
}
|
||||
|
||||
action "deploy" {
|
||||
needs = "install"
|
||||
uses = "primer/deploy@v2.2.0"
|
||||
secrets = [
|
||||
"GITHUB_TOKEN",
|
||||
"NOW_TOKEN",
|
||||
]
|
||||
}
|
||||
6
.github/pull_request_template.md
vendored
6
.github/pull_request_template.md
vendored
@ -1,6 +1,8 @@
|
||||
- [ ] First, briefly describe your proposal in the title.
|
||||
First, briefly describe your proposal in the title and delete this line.
|
||||
|
||||
- [ ] Fixes: # (type an issue number after the # if applicable)
|
||||
If your proposal fixes any issues, please list them below, then delete this line:
|
||||
|
||||
- Fixes: # (type an issue number after the # if applicable)
|
||||
|
||||
Finally, tell us more about the change here, in the description.
|
||||
|
||||
|
||||
10
.gitignore
vendored
10
.gitignore
vendored
@ -1,10 +1,10 @@
|
||||
*.lerna_backup
|
||||
*.log
|
||||
*/*/package-lock.json
|
||||
*.tgz
|
||||
.DS_Store
|
||||
.changelog
|
||||
.next/
|
||||
.sass-cache
|
||||
_site
|
||||
build
|
||||
primer-version.txt
|
||||
node_modules
|
||||
build/
|
||||
dist/
|
||||
node_modules/
|
||||
|
||||
17
.npmignore
17
.npmignore
@ -1,2 +1,15 @@
|
||||
*.yml
|
||||
.postcss.json
|
||||
*.log
|
||||
.github/
|
||||
.next/
|
||||
.storybook/
|
||||
next.config.js
|
||||
now.json
|
||||
docs/
|
||||
docs-test/
|
||||
lib/
|
||||
pages/
|
||||
script/
|
||||
# we ignore this because everything in src/ is copied out in script/prepublish
|
||||
src/
|
||||
static/
|
||||
tests/
|
||||
|
||||
2
.npmrc
2
.npmrc
@ -1,3 +1,3 @@
|
||||
save=true
|
||||
save-exact=true
|
||||
no-package-lock=true
|
||||
git-tag-version=false
|
||||
|
||||
34
.travis.yml
34
.travis.yml
@ -1,34 +0,0 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 8
|
||||
|
||||
env:
|
||||
global:
|
||||
# github
|
||||
- secure: "J+1oWjvvXjyrwkY/4IFWKdN/weFmQcPwlRuFG4R0Gb3rYe4nqtC9l68sJvmS8asc8dQMhOhcUZCH6sjvo7l2WD4NuK4umPSbs+rJNUsfbvH4pZjStQIj/3ll1OfQelGDWAYQWhIfciYY4F3Bp0ZWTfKOppLQ2AVIYu1fPVXDdlo="
|
||||
# github changelog
|
||||
- secure: "KcGydAqL7ryDh2rTJJB4wU8NE5BRtnrRXDEcPBScSscO3zFsHXHBDvvO04B/9hFVatXzGYXmkn+FZ0P9QikhvebzdwwyqUG2SKFiHhMvbX0m0WtAhn5NqDuKU1r5qy5YQ18r/tiLfC9GSAlEpfLAH58pwpcn8srV3Mn/yKvlrfs="
|
||||
|
||||
script:
|
||||
- npm test
|
||||
- script/check-versions
|
||||
- script/selector-diff-report
|
||||
|
||||
before_deploy:
|
||||
# this will short-circuit the publish step if it fails to interpolate $NPM_API_KEY
|
||||
- npm config set "//registry.npmjs.org/:_authToken=\${NPM_API_KEY}"
|
||||
# copy the CHANGELOG.md primer for publishing
|
||||
- cp CHANGELOG.md modules/primer
|
||||
|
||||
deploy:
|
||||
# publish canary releases on all branches *except* master and release-*
|
||||
- provider: script
|
||||
script: script/deploy --yes
|
||||
skip_cleanup: true
|
||||
on:
|
||||
all_branches: true
|
||||
tags: false
|
||||
|
||||
notifications:
|
||||
slack:
|
||||
secure: W9lPRuuPMNwElkXZ8UZtu5phgUNleDCK0PgERa28dkh5b0Y9xzRpIQPRJfqVYAPtnMVXhfYcqryMzA4oj0E4fc7OxQsKmMeF1OcTuj5N4CM5xXR/qXDehOUTp6fpCToIX9d4hZ2H///PCExpul3TcfxYJe6EWQCHYd1n6zKRl8g=
|
||||
17
CHANGELOG.md
17
CHANGELOG.md
@ -1,3 +1,20 @@
|
||||
# 12.0.1
|
||||
|
||||
### :bug: Bug Fix
|
||||
- Add missing `h000-mktg` class [#667](https://github.com/primer/css/pull/667)
|
||||
- Fix UnderlineNav overflow issues [#684](https://github.com/primer/css/pull/684)
|
||||
- Fix double borders on Box-header [#686](https://github.com/primer/css/pull/686)
|
||||
|
||||
### :house: Internal
|
||||
- Add `postversion` npm script that commits `package.json` and `package-lock.json` with consistent commit messages (`chore: v<version>`)
|
||||
|
||||
# 12.0.0
|
||||
|
||||
:rotating_light: **Starting with version 12.0.0, the `primer` package is now known as `@primer/css`**. See [MIGRATING.md](https://github.com/primer/css/tree/master/MIGRATING.md) for more info.
|
||||
|
||||
#### :boom: Breaking Change
|
||||
* [#666](https://github.com/primer/css/pull/666) Reorganize into a single `@primer/css` package ([@shawnbot](https://github.com/shawnbot))
|
||||
|
||||
# 11.0.0
|
||||
|
||||
#### :boom: Breaking Change
|
||||
|
||||
146
DEVELOP.md
146
DEVELOP.md
@ -1,50 +1,107 @@
|
||||
# Primer Development
|
||||
|
||||
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'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).
|
||||
|
||||
## Structure
|
||||
The project is structured as a [monorepo] made up of lots of small npm modules, many of which depend on each other. We use [Lerna] to manage, version, and publish all of the packages together.
|
||||
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:
|
||||
|
||||
* **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
|
||||
* **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
|
||||
* **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.
|
||||
|
||||
### Paths
|
||||
Here's what you need to know about how the files are structured in both git and in the published npm module:
|
||||
|
||||
* In git, all of the SCSS source files live in the `src/` directory.
|
||||
* When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
|
||||
|
||||
```scss
|
||||
@import "@primer/css/utilities/index.scss";
|
||||
```
|
||||
|
||||
* 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`).
|
||||
|
||||
The top-level `package.json` is not published, but tracks common dependencies for developing Primer, and hosts some useful npm [run-scripts]. See the [scripts section](#scripts) for more info.
|
||||
|
||||
## Workflow
|
||||
The typical Primer workflow looks something like this:
|
||||
|
||||
1. [Install](#install)
|
||||
2. [Start Storybook](#storybook)
|
||||
3. Navigate to the module you're working on and modify the SCSS and/or markdown files.
|
||||
4. Test your changes in Storybook.
|
||||
5. Push your work to a new branch to test it on Travis and have it reviewed by the Primer "core" team.
|
||||
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 and automatically run link all of the local packages together with `npm run bootstrap`.
|
||||
Run `npm install` to install the npm dependencies.
|
||||
|
||||
### Troubleshooting install problems
|
||||
If you run into trouble installing, it's always best to ensure that you're starting from a clean slate by running the following from the repository root directory:
|
||||
## 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:
|
||||
|
||||
```sh
|
||||
npm run fresh
|
||||
npm start
|
||||
```
|
||||
|
||||
If _that_ gives you problems, then you can try manually deleting everything and starting over:
|
||||
Then visit http://localhost:3000/css to view the site.
|
||||
|
||||
```
|
||||
rm -rf node_modules
|
||||
rm -f package-lock.json */*/package-lock.json
|
||||
npm install
|
||||
```
|
||||
: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.
|
||||
|
||||
**You may need to do this whenever switching between branches with different dependencies, submodules, or versions of Node and/or npm.** The Primer core team generally uses the latest major version of Node (10 as of this writing), but our CI tests run Node 8 and npm 6. You can check which versions you're running with:
|
||||
|
||||
### 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/primer/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 plan to 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.
|
||||
|
||||
### Sync internals
|
||||
We use [Metalsmith] to sync the source docs to the `pages` directory and transform them in the following ways:
|
||||
|
||||
1. We filter the list of files to only Markdown documents (`**/*.md`).
|
||||
1. Many bundle `README.md`s wrap the actual documentation content in `<!-- %docs -->` HTML comments that usually include YAML frontmatter. In these instances, we extract the content that portion and reformat the frontmatter.
|
||||
1. We filter out any Markdown files that _don't_ include a `path` frontmatter key, and rename the destination file to match the `path` (e.g. `path: foo/bar` writes to `pages/css/foo/bar.md`).
|
||||
1. We set the `source` frontmatter key to a fully-qualified `github.com` URL for the source file so that we can link directly to it.
|
||||
1. We read the list of files from `pages/css/.gitignore` and delete them from the filesystem, then write the new list of paths so that they aren't committed to git.
|
||||
|
||||
All of the logic for syncing the source docs (and transforming them in transit) is controlled in [`lib/sync.js`](./lib/sync.js), and each "step" in the transformation (as well as the watching) is implemented as a Metalsmith plugin.
|
||||
|
||||
### URL tests
|
||||
We have a script that catches inadvertent URL changes caused by renaming or deleting Markdown docs:
|
||||
|
||||
```sh
|
||||
npm --version
|
||||
node --version
|
||||
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.
|
||||
|
||||
## Storybook
|
||||
Run `npm start` to start up [Storybook], then visit [localhost:3000](http://localhost:3000) to test your work. By default, all `html` code blocks of all `*.md` files in each module will be rendered as stories and listed under the module's name in the left-hand nav. File changes should trigger live reload automatically after a brief delay.
|
||||
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.
|
||||
|
||||
If the package you're working on has a `stories.js`, it probably includes a snippet like this:
|
||||
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
|
||||
```
|
||||
|
||||
Then visit http://localhost:8000 to test your work.
|
||||
|
||||
### 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).
|
||||
|
||||
If the bundle you're working on has a `stories.js`, it probably includes a snippet like this:
|
||||
|
||||
```js
|
||||
const stories = storiesOf('Module name', module)
|
||||
@ -55,34 +112,31 @@ storiesFromMarkdown(require.context('.', true, /\.md$/))
|
||||
})
|
||||
```
|
||||
|
||||
This is how we find all of the Markdown files in the package directory and generate stories from their code blocks. Storybook sections are labeled by the first argument to `storiesOf()` (in the above example, "Module name"), and individual stories get their titles from either the previous Markdown heading or the `title` attribute in the fenced code block. See the [`code-blocks` docs](https://npmjs.com/package/code-blocks) and the [`storiesFromMarkdown()` source](./.storybook/lib/storiesFromMarkdown.js) for more info.
|
||||
|
||||
## CSS packages
|
||||
All of the Primer CSS packages live in the [modules](./modules) subdirectory, including the [`primer`](./modules/package) omnibus package.
|
||||
|
||||
## Tools
|
||||
Many tools specific to development of Primer CSS live in the [tools](./tools) subdirectory.
|
||||
This is how we find all of the Markdown files in the bundle directory and generate stories from their code blocks. Storybook sections are labeled by the first argument to `storiesOf()` (in the above example, "Module name"), and individual stories get their titles from either the previous Markdown heading or the `title` attribute in the fenced code block. See the [`code-blocks` docs](https://npmjs.com/package/code-blocks) and the [`storiesFromMarkdown()` source](./.storybook/lib/storiesFromMarkdown.js) for more info.
|
||||
|
||||
## Scripts
|
||||
The [`script` directory](./script) houses a collection of scripts that we use to maintain, test, build, and publish packages. Some scripts of note:
|
||||
Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS, notably:
|
||||
|
||||
* `script/check-imports` compares the list of Primer npm dependencies for each package with SCSS `@import` statements in its source, and warns if any mismatches (dependencies without corresponding imports, or vice-versa) are found.
|
||||
* `script/compare-published` compares the latest published versions of each Primer CSS package with the `version` field in its local `package.json`, and reports any discrepancies.
|
||||
* `script/get-packages` lists all of the package subdirectories from both `modules` and `tools` directories, and is useful for iterating in shell scripts:
|
||||
* `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.
|
||||
* `now-build` and `now-start` are run on [Now] to build and start the docs site server.
|
||||
* `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/`.
|
||||
|
||||
```sh
|
||||
for pkg in $(script/get-packages); do
|
||||
echo $pkg
|
||||
done
|
||||
```
|
||||
|
||||
If you're looking for more detail, you can also run `npx lerna ls`, which will list the packages by name along with their versions.
|
||||
|
||||
Scripts like `lint-scss`, `notify`, and `test-docs` are called from individual packages to run specific common tasks; `npm-run` and `npm-run-all` are used more generally to run monorepo-installed npm utilities within the package directory, and can probably be refactored to simply run [npx].
|
||||
You can list all of the available scripts with:
|
||||
|
||||
```sh
|
||||
npm run
|
||||
```
|
||||
|
||||
|
||||
[monorepo]: https://github.com/babel/babel/blob/master/doc/design/monorepo.md
|
||||
[Lerna]: https://github.com/lerna/lerna
|
||||
[@primer/css]: https://www.npmjs.com/package/@primer/css
|
||||
[metalsmith]: https://metalsmith.io/
|
||||
[run-scripts]: https://docs.npmjs.com/cli/run-script
|
||||
[Storybook]: https://storybook.js.org/
|
||||
[storybook]: https://storybook.js.org/
|
||||
[npm]: https://www.npmjs.com/
|
||||
[npx]: https://www.npmjs.com/package/npx
|
||||
|
||||
70
MIGRATING.md
Normal file
70
MIGRATING.md
Normal file
@ -0,0 +1,70 @@
|
||||
# 12.0.0
|
||||
The v12 release marks a major transition from small, single-purpose npm packages (`primer-core`, `primer-marketing`, `primer-utilities`, etc.) to a single package — `@primer/css` — which contains all of the SCSS source files in subdirectories. Here's what you need to do to migrate different parts of your app:
|
||||
|
||||
## npm
|
||||
First, install the new package.
|
||||
|
||||
```sh
|
||||
npm install --save @primer/css
|
||||
```
|
||||
|
||||
If you use the `primer` package, all you'll need to do is:
|
||||
|
||||
```sh
|
||||
npm uninstall --save primer
|
||||
```
|
||||
|
||||
If you use other packages, such as `primer-utilities`, you will need to uninstall each one by name or use a command line tool like [jq](https://stedolan.github.io/jq/) to list them:
|
||||
|
||||
```sh
|
||||
jq -r '.dependencies | keys[] | select(.|startswith("primer"))' package.json
|
||||
```
|
||||
|
||||
And, if you're feeling saucy, uninstall them all by piping that to `xargs npm uninstall`. :sparkles:
|
||||
|
||||
## Sass
|
||||
There are a couple of things you'll need to change in your Sass setup when migrating to v12. This section is intentionally vague because environments vary wildly between text editors, Sass implementations, and application frameworks. When in doubt, consult the relevant documentation, and feel free to [file an issue][help] if you think that we can help.
|
||||
|
||||
### Sass imports
|
||||
Generally speaking, all of your Sass `@import` statements can be migrated with the following search-and-replace operations, **in the following order**:
|
||||
|
||||
* If you import `primer/index.scss` or `primer`, just replace `primer` with `@primer/css` and you're done!
|
||||
* Otherwise...
|
||||
1. Replace `primer-marketing-` with `@primer/css/marketing/`, e.g.
|
||||
* `primer-marketing-buttons/index.scss` becomes `@primer/css/marketing/buttons/index.scss`
|
||||
* `primer-marketing-utilities/index.scss` becomes `@primer/css/marketing/utilities/index.scss`
|
||||
1. Replace `primer-` with `@primer/css/`, e.g.
|
||||
* `primer-markdown/index.scss` becomes `@primer/css/markdown/index.scss`
|
||||
* `primer-utilities/index.scss` becomes `@primer/css/utilities/index.scss`
|
||||
1. Delete `lib/` from every Primer CSS path, e.g.
|
||||
* `primer-forms/lib/form-control.scss` becomes `@primer/css/forms/form-control.scss`
|
||||
* `primer-navigation/lib/subnav.scss` becomes `@primer/css/navigation/subnav.scss`
|
||||
|
||||
If your text editor supports search and replace regular expressions, the following patterns should work:
|
||||
|
||||
| find | replace |
|
||||
| :--- | :--- |
|
||||
| `primer-marketing-(\w+)(\/lib)?` | `@primer/css/marketing/$1` |
|
||||
| `primer-(\w+)(\/lib)?` | `@primer/css/$1` |
|
||||
| `primer\b` | `@primer/css`
|
||||
|
||||
#### `primer-migrate`
|
||||
You can also use the included [`primer-migrate` script](bin/primer-migrate):
|
||||
|
||||
```sh
|
||||
npx -p @primer/css primer-migrate path/to/**/*.scss
|
||||
```
|
||||
|
||||
### Sass include paths
|
||||
If you've installed Primer CSS with npm, you very likely already have `node_modules` listed in your Sass `includePaths` option, and you won't need to change anything. :tada:
|
||||
|
||||
If you've installed Primer CSS with something _other than_ npm, or you don't know how it was installed, consult the documentation for your setup first, then [let us know][help] if you still can't figure it out.
|
||||
|
||||
## Fonts
|
||||
The marketing-specific font files published in the [`fonts` directory](https://unpkg.com/primer-marketing-support@2.0.0/fonts/) of `primer-marketing-support@2.0.0` are published in the `fonts` directory of `@primer/css`. If you use these fonts, you'll need to do the following:
|
||||
|
||||
1. Update any scripts that copy the `.woff` font files from `node_modules/primer-marketing-support/fonts` into your application to look for them in `node_modules/@primer/css/fonts`.
|
||||
1. Update any webpack (or other bundler) resolution rules that look for fonts in `primer-marketing-support/fonts` to look for them in `@primer/css/fonts`.
|
||||
1. Customize the [`$marketing-font-path` variable](src/marketing/support/variables.scss#L1) to match the path from which they're served.
|
||||
|
||||
[help]: https://github.com/primer/css/issues/new?title=Help!&labels=v12,migration
|
||||
52
README.md
52
README.md
@ -1,66 +1,48 @@
|
||||
# Primer
|
||||
[](https://www.npmjs.org/package/@primer/css)
|
||||
|
||||
[](https://www.npmjs.org/package/primer)
|
||||
[](https://travis-ci.org/primer/primer)
|
||||
Primer CSS is the Sass implementation of [Primer], the design system that powers GitHub.
|
||||
|
||||
Primer is the design system that powers GitHub. Primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.
|
||||
|
||||
## Packages
|
||||
|
||||
The Primer repo is managed as a monorepo that is composed of many npm packages.
|
||||
|
||||
### Core Packages
|
||||
|
||||
| Package | Version |
|
||||
|---|---|
|
||||
| **[primer](/modules/primer)** <br />Includes all 23 packages | [](https://www.npmjs.com/package/primer) |
|
||||
| [primer-core](/modules/primer-core) | [](https://www.npmjs.com/package/primer-core) |
|
||||
| [primer-product](/modules/primer-product) | [](https://www.npmjs.com/package/primer-product) |
|
||||
| [primer-marketing](/modules/primer-marketing) | [](https://www.npmjs.com/package/primer-marketing) |
|
||||
## Migrating
|
||||
:rotating_light: **If you currently use the `primer` or `primer-`-prefixed npm packages, please read [the migration guide](MIGRATING.md)!**
|
||||
|
||||
## Install
|
||||
|
||||
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer` with this command.
|
||||
This repository is distributed with [npm]. After [installing npm][install-npm], you can install `@primer/css` with this command:
|
||||
|
||||
```sh
|
||||
$ npm install --save primer
|
||||
$ npm install --save @primer/css
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (SCSS). After [installing](#install) with npm, you can add your project's `node_modules` directory to your Sass [include paths](https://github.com/sass/node-sass#includepaths) (AKA [load paths](http://technology.customink.com/blog/2014/10/09/understanding-and-using-sass-load-paths/) in Ruby), then import it like this:
|
||||
The included source files are written in [Sass] using SCSS syntax. After [installing](#install) with npm, you can add your project's `node_modules` directory to your Sass [include paths](https://github.com/sass/node-sass#includepaths) (AKA [load paths](http://technology.customink.com/blog/2014/10/09/understanding-and-using-sass-load-paths/) in Ruby), then import it like this:
|
||||
|
||||
```scss
|
||||
@import "primer/index.scss";
|
||||
@import "@primer/css/index.scss";
|
||||
```
|
||||
|
||||
You can import individual Primer modules by installing them with npm, for instance:
|
||||
|
||||
```sh
|
||||
$ npm install --save primer-navigation
|
||||
```
|
||||
|
||||
Then, you would import the module with:
|
||||
You can import individual Primer modules directly from the `@primer/css` package:
|
||||
|
||||
```scss
|
||||
@import "primer-navigation/index.scss";
|
||||
@import "@primer/css/core/index.scss";
|
||||
@import "@primer/css/product/index.scss";
|
||||
@import "@primer/css/marketing/index.scss";
|
||||
```
|
||||
|
||||
## Development
|
||||
See [DEVELOP.md](./DEVELOP.md) for development docs.
|
||||
|
||||
## Releasing (Staff only)
|
||||
## Releasing (for GitHub staff)
|
||||
You can find docs about our release process in [RELEASING.md](./RELEASING.md).
|
||||
|
||||
## Documentation
|
||||
|
||||
Primer CSS documentation is published to the [GitHub Style Guide](https://styleguide.github.com/primer/).
|
||||
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.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/primer
|
||||
[npm]: https://www.npmjs.com/
|
||||
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[npm]: https://www.npmjs.com/
|
||||
[primer]: https://primer.style
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
78
RELEASING.md
78
RELEASING.md
@ -1,34 +1,15 @@
|
||||
## Releasing a new Primer version 🎉
|
||||
# Releasing a new version of Primer CSS 🎉
|
||||
|
||||
|
||||
### In `primer/primer`:
|
||||
## In this repo
|
||||
|
||||
1. Check off all of the boxes in your release PR.
|
||||
|
||||
1. Go through the tracking PR and make sure everything listed is merged in.
|
||||
1. Test your changes with the latest release candidate version [in github/github](#in-github-github).
|
||||
|
||||
2. To update the changelog for your release, click on the details links for the continuous-integration/travis-ci/push build. Expand the `Deploying application` output and copy the changelog content. Update the [CHANGELOG.md](https://github.com/primer/primer/blob/master/CHANGELOG.md) file with the changelog content from build
|
||||
1. Once the release PR is approved and you've done necessary testing, merge it. After tests run, the site will be deployed and `@primer/css` will be published with your changes.
|
||||
|
||||
**Note**: the CHANGELOG contents may be hidden within a collapsed section of the Travis logs under `Deploying the application`. Click the ▶ to the left of that section to expand it:
|
||||
|
||||
|
||||
|
||||
Then scroll to the bottom of the page, and copy all of the text between the `Unreleased (YYYY-MM-DD)` heading and the exit status message. You may need to copy _before_ releasing your mouse to prevent Travis from collapsing that section of the logs first:
|
||||
|
||||
|
||||
|
||||
3. Bump the package versions in your terminal:
|
||||
|
||||
```sh
|
||||
npm run bump
|
||||
```
|
||||
|
||||
4. Run `script/check-versions` to catch any cross-module version mismatches. (This will run on Travis, too.)
|
||||
|
||||
5. Test your changes with the latest release candidate version in the appropriate places (styleguide, storybook, github/github).
|
||||
|
||||
6. Once the release PR is approved and you've done necessary testing, merge to `master`. This will trigger publishing to npm.
|
||||
|
||||
7. Create a new release branch for the next release from `master` and name it `release-<version>`. Please use the following template for the PR description, linking to the relevant issues and/or pull requests for each change, and removing irrelevant headings:
|
||||
1. Create a new release branch for the next release from `master` and name it `release-<version>`. Please use the following template for the PR description, linking to the relevant issues and/or pull requests for each change, and removing irrelevant headings:
|
||||
|
||||
```md
|
||||
# Primer [Major|Minor|Patch] Release
|
||||
@ -59,39 +40,58 @@
|
||||
### Ship checklist
|
||||
|
||||
- [ ] Update `CHANGELOG.md`
|
||||
- [ ] Bump versions with `npm run bump`
|
||||
- [ ] [Create a new release](https://github.com/primer/primer/releases/new)
|
||||
- [ ] [Update github/github](https://github.com/primer/primer/blob/master/RELEASING.md#in-githubgithub)
|
||||
- [ ] [Update github/styleguide](https://github.com/github/styleguide/#adding-new-content-from-primer)
|
||||
- [ ] Update the version in `package.json` with `npm version <version>`
|
||||
- [ ] [Create a new release](https://github.com/primer/css/releases/new)
|
||||
- [ ] [Update github/github](https://github.com/primer/css/blob/master/RELEASING.md#in-githubgithub)
|
||||
- [ ] Create a new pull request for the next release
|
||||
|
||||
/cc @primer/ds-core
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
### In `github/github`:
|
||||
|
||||
1. Create a new branch
|
||||
1. Create a new branch.
|
||||
|
||||
2. Update the primer version in your terminal `bin/npm install primer@<version>`.
|
||||
1. Update the Primer CSS version to the published release candidate with:
|
||||
|
||||
3. Update `stylelint-config-primer` in your terminal to the appropriate version `bin/npm install stylelint-config-primer@latest`.
|
||||
```sh
|
||||
bin/npm install @primer/css@<version>-rc.<sha>
|
||||
```
|
||||
|
||||
4. If you need to make changes to github/github due to the Primer release, make a separate branch. When ready, merge that branch into your release branch.
|
||||
Then commit and push the changes to `package.json`, `package-lock.json`, and `vendor/npm`.
|
||||
|
||||
5. Add reviewers.
|
||||
1. If you need to make changes to github/github due to the Primer release, do them in a branch and merge _that_ into your release branch after testing.
|
||||
|
||||
6. Check that every deleted vendor file has an accompanying updated vendor file and that the version numbers look correct.
|
||||
1. Add or re-request reviewers and fix any breaking tests.
|
||||
|
||||
7. Test on review-lab.
|
||||
1. Test on review-lab.
|
||||
|
||||
8. When ready, merge! 🎉
|
||||
1. Publish `@primer/css` to the `latest` dist-tag by merging the release branch and waiting for [primer/publish] to finish.
|
||||
|
||||
1. Install the latest published version with:
|
||||
|
||||
```
|
||||
bin/npm install @primer/css@<version>
|
||||
```
|
||||
|
||||
Then commit and push the changes to `package.json`, `package-lock.json`, and `vendor/npm`.
|
||||
|
||||
1. Fix any breaking tests.
|
||||
|
||||
1. Deploy! :rocket:
|
||||
|
||||
|
||||
### Publish release tag
|
||||
### Publish the release
|
||||
|
||||
1. [Create a new release](https://github.com/primer/primer/releases/new) with tag `v<version>`.
|
||||
|
||||
2. Copy the changes from the [CHANGELOG](https://github.com/primer/primer/blob/master/CHANGELOG.md) and paste it into the release notes.
|
||||
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
|
||||
|
||||
86
bin/primer-migrate
Executable file
86
bin/primer-migrate
Executable file
@ -0,0 +1,86 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* XXX: we use Node.js native modules only here to avoid
|
||||
* requiring any runtime dependencies when folks install
|
||||
* @primer/css
|
||||
*/
|
||||
|
||||
const fs = require('fs')
|
||||
const {promisify} = require('util')
|
||||
const readFile = promisify(fs.readFile)
|
||||
const writeFile = promisify(fs.writeFile)
|
||||
const {dirname, join} = require('path')
|
||||
|
||||
const IMPORT_PATTERN = /\@import\s+['"]([^'"]+)['"]/g
|
||||
const replacements = [
|
||||
[/primer-marketing-(\w+)(\/lib)?/, '@primer/css/marketing/$1'],
|
||||
[/primer-(\w+)(\/lib)?/, '@primer/css/$1'],
|
||||
[/primer\b/, '@primer/css']
|
||||
]
|
||||
|
||||
const paths = process.argv.slice(2)
|
||||
const warn = (...args) => console.warn(...args)
|
||||
|
||||
if (paths.length) {
|
||||
Promise.all(
|
||||
paths.map(path => {
|
||||
return migrate(path).then(reps => report(reps, path))
|
||||
})
|
||||
).catch(die)
|
||||
} else {
|
||||
readFile('/dev/stdin', 'utf8')
|
||||
.then(input => {
|
||||
const [output, reps] = replace(input)
|
||||
report(reps, 'stdin')
|
||||
process.stdout.write(output)
|
||||
})
|
||||
.catch(die)
|
||||
}
|
||||
|
||||
function migrate(path) {
|
||||
return readFile(path, 'utf8').then(input => {
|
||||
if (!IMPORT_PATTERN.test(input)) {
|
||||
warn(`No SCSS imports found in ${path}`)
|
||||
return false
|
||||
}
|
||||
|
||||
const [output, reps] = replace(input)
|
||||
if (reps.length) {
|
||||
return writeFile(path, output, 'utf8').then(() => reps)
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function replace(input) {
|
||||
const reps = []
|
||||
const output = input.replace(IMPORT_PATTERN, (str, path) => {
|
||||
for (const [from, to] of replacements) {
|
||||
if (from.test(path)) {
|
||||
const replaced = str.replace(from, to)
|
||||
reps.push([path, path.replace(from, to)])
|
||||
return replaced
|
||||
}
|
||||
}
|
||||
return str
|
||||
})
|
||||
return [output, reps]
|
||||
}
|
||||
|
||||
function report(reps, path) {
|
||||
if (reps.length) {
|
||||
warn(`Replaced ${reps.length} imports in ${path}:`)
|
||||
for (const [i, [from, to]] of Object.entries(reps)) {
|
||||
warn(` ${Number(i) + 1}. (${from}) -> (${to})`)
|
||||
}
|
||||
} else {
|
||||
warn(`No legacy imports found in ${path}`)
|
||||
}
|
||||
}
|
||||
|
||||
function die(error) {
|
||||
console.error(error)
|
||||
process.exitCode = 1
|
||||
}
|
||||
@ -24,6 +24,7 @@ const exceptions = {
|
||||
'/components/tables': deprecated,
|
||||
'/getting_started': moved('/getting-started/contributing'),
|
||||
'/getting_started/contributing': moved('/getting-started/contributing'),
|
||||
'/packages': removed,
|
||||
'/packages/primer': removed,
|
||||
'/packages/primer-core': removed,
|
||||
'/packages/primer-marketing': removed,
|
||||
@ -1,15 +1,17 @@
|
||||
{
|
||||
"extends": [
|
||||
"plugin:github/es6",
|
||||
"plugin:github/react",
|
||||
"plugin:jsx-a11y/recommended"
|
||||
],
|
||||
"rules": {
|
||||
"import/no-namespace": 0,
|
||||
"no-unused-vars": ["error", {
|
||||
"ignoreRestSiblings": true
|
||||
}]
|
||||
},
|
||||
"settings": {
|
||||
"react": {
|
||||
"version": "^16.6"
|
||||
"version": "detect"
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"import/no-namespace": 0
|
||||
}
|
||||
}
|
||||
|
||||
2
docs/.gitignore
vendored
2
docs/.gitignore
vendored
@ -1,2 +0,0 @@
|
||||
.next/
|
||||
static/primer.css
|
||||
@ -4,8 +4,6 @@ import Measure from 'react-measure'
|
||||
import {BorderBox} from '@primer/components'
|
||||
import {assetPrefix} from './utils'
|
||||
|
||||
const DEFAULT_IFRAME_HEIGHT = 150
|
||||
|
||||
export default class Frame extends React.Component {
|
||||
static defaultProps = {
|
||||
border: 0,
|
||||
@ -57,7 +55,10 @@ export default class Frame extends React.Component {
|
||||
return (
|
||||
<BorderBox as="iframe" style={{height}} {...rest} ref={node => (this.iframe = node)}>
|
||||
{this.doc
|
||||
? [ReactDOM.createPortal(this.getHead(), this.doc.head), ReactDOM.createPortal(this.getBody(children), this.doc.body)]
|
||||
? [
|
||||
ReactDOM.createPortal(this.getHead(), this.doc.head),
|
||||
ReactDOM.createPortal(this.getBody(children), this.doc.body)
|
||||
]
|
||||
: null}
|
||||
</BorderBox>
|
||||
)
|
||||
@ -1,58 +0,0 @@
|
||||
# Primer CSS docs site
|
||||
This directory hosts a [Next] site that pulls in Primer CSS documentation from the [modules directory](../modules).
|
||||
|
||||
## Running the site
|
||||
First, make sure that you've bootstrapped the monorepo from the top-level directory. The `fresh` run-script will ensure that all `node_modules` or `package-lock.json` files are removed first:
|
||||
|
||||
```
|
||||
# in the repo root
|
||||
npm run fresh
|
||||
```
|
||||
|
||||
Then, navigate to this directory (`cd docs`) and run:
|
||||
|
||||
```sh
|
||||
# in the docs directory
|
||||
npm run dev
|
||||
```
|
||||
|
||||
This should start up the Next dev server and a background task that will keep the `pages` directory up-to-date whenever you change the source files in `modules/primer*`.
|
||||
|
||||
## Syncing the docs
|
||||
If, for whatever reason, the dev server isn't syncing files, you have two choices:
|
||||
|
||||
1. Stop the server (`ctrl-C`) and restart it (`npm run dev`), 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/primer/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 plan to 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 additional [css directory](./pages/css).
|
||||
|
||||
The sync task maintains a listing of files that it's copied from the modules directory in `pages/css/.gitignore`, which ensures that none of these files are checked into git.
|
||||
|
||||
If you find yourself editing a file,
|
||||
|
||||
## Sync internals
|
||||
|
||||
We use [Metalsmith] to sync the source docs to the `pages` directory and transform them in the following ways:
|
||||
|
||||
1. We filter the list of files to only Markdown documents and `package.json` files
|
||||
1. Many package `README.md`s wrap the actual documentation content in `<!-- %docs -->` HTML comments that usually include YAML frontmatter. In these instances, we extract the content that portion and reformat the frontmatter.
|
||||
1. We filter out any Markdown files that _don't_ include a `path` frontmatter key, and rename the destination file to match the `path` (e.g. `path: foo/bar` writes to `pages/css/foo/bar.md`).
|
||||
1. We set the `source` frontmatter key to a fully-qualified `github.com` URL for the source file so that we can link directly to it.
|
||||
1. A limited list of fields for all packages is extracted into a single file (`pages/css/packages.json`), which serves as a light-weight dependency graph.
|
||||
1. We read [the changelog](../CHANGELOG.md) and write it to `whats-new/changelog.md` with some additional frontmatter.
|
||||
1. We read the list of files from `pages/css/.gitignore` and delete them from the filesystem, then write the new list of paths so that they aren't committed to git.
|
||||
|
||||
All of the logic for syncing the source docs (and transforming them in transit) is controlled in [`lib/sync.js`](./lib/sync.js), and each "step" in the transformation (as well as the watching) is implemented as a Metalsmith plugin.
|
||||
|
||||
**Why [Metalsmith]?** We're glad you asked! `@shawnbot` likes the simplicity of Metalsmith's core and how easy it is to write powerful plugins.
|
||||
|
||||
[Metalsmith]: https://metalsmith.io/
|
||||
[Next]: https://github.com/zeit/next.js
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 812 B After Width: | Height: | Size: 812 B |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@ -111,20 +111,16 @@ function Image(props) {
|
||||
}
|
||||
}
|
||||
|
||||
export function PrimerPackageBox({data = {}, count, ...rest}) {
|
||||
export function PrimerPackageBox({count, ...rest}) {
|
||||
return (
|
||||
<Flex justifyContent="space-around" {...rest}>
|
||||
<BorderBox bg="gray.1" width="auto" px={6} py={3} my={4}>
|
||||
<Flex alignItems="center" justifyContent="space-around">
|
||||
<Text fontSize={3} fontWeight="bold" mb={2} textAlign="center">
|
||||
<Link href={packageSourceURL('primer')} color="inherit">
|
||||
<Link href={bundleSourceURL('primer')} color="inherit">
|
||||
Primer
|
||||
</Link>{' '}
|
||||
<Link href={packageURL('primer')}>{data.version}</Link>
|
||||
</Link>
|
||||
</Text>
|
||||
<Link href="https://travis-ci.org/primer/primer" mt={-1}>
|
||||
<img alt="Build Status" src="https://travis-ci.org/primer/primer.svg?branch=master" />
|
||||
</Link>
|
||||
</Flex>
|
||||
{count ? (
|
||||
<Text is="div" textAlign="center">
|
||||
@ -136,27 +132,32 @@ export function PrimerPackageBox({data = {}, count, ...rest}) {
|
||||
)
|
||||
}
|
||||
|
||||
export function MetaPackageBox({children, data = {}, title, ...rest}) {
|
||||
const deps = data.dependencies || []
|
||||
PrimerPackageBox.propTypes = {
|
||||
count: PropTypes.number
|
||||
}
|
||||
|
||||
export function MetaPackageBox({children, meta = {}, title, ...rest}) {
|
||||
const {name, imports = []} = meta
|
||||
const bundles = imports.filter(bundle => !/support/.test(bundle))
|
||||
return (
|
||||
<Flex.Item is={BorderBox} bg="white" maxWidth={220} {...rest}>
|
||||
<BorderBox bg="gray.1" border={0} borderBottom={1} borderRadius={0} px={3} py={2}>
|
||||
<Heading is="div" fontSize={2}>
|
||||
<Link href={packageSourceURL(data.name)} color="inherit">
|
||||
<Link href={bundleSourceURL(name)} color="inherit">
|
||||
{title}
|
||||
</Link>{' '}
|
||||
<Link href={packageURL(data.name)}>{data.version}</Link>
|
||||
</Link>
|
||||
</Heading>
|
||||
</BorderBox>
|
||||
<Text is="div" fontSize={1} p={3}>
|
||||
{children}
|
||||
<Text is="div" fontWeight="bold" mt={4} mb={2}>
|
||||
{deps.length} packages:
|
||||
{bundles.length} bundles:
|
||||
</Text>
|
||||
<ul className="list-style-none pl-0">
|
||||
{deps.map(dep => (
|
||||
<li key={dep}>
|
||||
<Link href={packageURL(dep)}>{dep}</Link>
|
||||
{bundles.map(bundle => (
|
||||
<li key={bundle}>
|
||||
{/* TODO: link to the actual page! */}
|
||||
<Link href={bundleURL(bundle)}>{bundle}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@ -165,11 +166,19 @@ export function MetaPackageBox({children, data = {}, title, ...rest}) {
|
||||
)
|
||||
}
|
||||
|
||||
function packageURL(name) {
|
||||
return `https://www.npmjs.com/package/${name}`
|
||||
MetaPackageBox.propTypes = {
|
||||
meta: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
imports: PropTypes.arrayOf(PropTypes.string)
|
||||
}),
|
||||
title: PropTypes.node
|
||||
}
|
||||
|
||||
function packageSourceURL(name, branch = 'master') {
|
||||
// TODO get this from Metalsmith or page metadata???
|
||||
return `https://github.com/primer/primer/blob/${branch}/modules/${name}`
|
||||
function bundleURL(name) {
|
||||
return `/css/bundle?name=${name}`
|
||||
}
|
||||
|
||||
function bundleSourceURL(name, branch = 'master') {
|
||||
// TODO get this from Metalsmith or page metadata???
|
||||
return `https://github.com/primer/css/blob/${branch}/src/${name}`
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
const {existsSync} = require('fs')
|
||||
const {dirname, join, resolve} = require('path')
|
||||
|
||||
const cache = {}
|
||||
|
||||
module.exports = function addPackageMeta(options = {}) {
|
||||
const {fields, namespace = 'data', log = noop} = options
|
||||
return (files, metal, done) => {
|
||||
const root = metal.source()
|
||||
for (const [path, file] of Object.entries(files)) {
|
||||
const pkg = getPackageRelativeTo(path, root)
|
||||
if (pkg) {
|
||||
file[namespace].package = fields ? pluck(pkg, fields) : pkg
|
||||
} else {
|
||||
log('no package.json found relative to', path)
|
||||
}
|
||||
}
|
||||
done()
|
||||
}
|
||||
}
|
||||
|
||||
function getPackageRelativeTo(file, root) {
|
||||
let dir = join(root, dirname(file))
|
||||
if (dir in cache) {
|
||||
return cache[dir]
|
||||
}
|
||||
while (dir !== root) {
|
||||
const pkgPath = join(dir, 'package.json')
|
||||
if (existsSync(pkgPath)) {
|
||||
return (cache[dir] = require(pkgPath))
|
||||
}
|
||||
dir = resolve(dir, '..')
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function pluck(data, fields) {
|
||||
return fields.reduce((out, field) => {
|
||||
out[field] = data[field]
|
||||
return out
|
||||
}, {})
|
||||
}
|
||||
|
||||
function noop() {}
|
||||
@ -1,44 +0,0 @@
|
||||
module.exports = {extractPackages, writePackagesJSON}
|
||||
|
||||
function extractPackages(options = {}) {
|
||||
return (files, metal, done) => {
|
||||
const packages = {}
|
||||
for (const key of Object.keys(files)) {
|
||||
if (key.endsWith('package.json')) {
|
||||
const file = files[key]
|
||||
const pkg = JSON.parse(String(file.contents))
|
||||
const plucked = pluck(pkg, [
|
||||
'name',
|
||||
'description',
|
||||
'version'
|
||||
])
|
||||
plucked.dependencies = pkg.dependencies
|
||||
? Object.keys(pkg.dependencies)
|
||||
: []
|
||||
packages[pkg.name] = plucked
|
||||
}
|
||||
}
|
||||
const meta = metal.metadata()
|
||||
Object.assign(meta, {packages})
|
||||
done()
|
||||
}
|
||||
}
|
||||
|
||||
function writePackagesJSON(options = {}) {
|
||||
const {path = 'packages.json'} = options
|
||||
return (files, metal, done) => {
|
||||
const {packages} = metal.metadata()
|
||||
files[path] = {
|
||||
contents: JSON.stringify(packages, null, 2)
|
||||
}
|
||||
done()
|
||||
}
|
||||
}
|
||||
|
||||
function pluck(obj, keys) {
|
||||
const plucked = {}
|
||||
for (const key of keys) {
|
||||
plucked[key] = obj[key]
|
||||
}
|
||||
return plucked
|
||||
}
|
||||
12767
docs/package-lock.json
generated
12767
docs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,73 +0,0 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "@primer/css-docs",
|
||||
"scripts": {
|
||||
"lint": "eslint pages src",
|
||||
"pretest": "npm run sync",
|
||||
"test": "node test/urls.js",
|
||||
"check-links": "script/check-links http://localhost:3000/css -v",
|
||||
"sync": "script/sync",
|
||||
"watch": "script/sync --watch",
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@githubprimer/octicons-react": "^8.1.3",
|
||||
"@mdx-js/mdx": "^0.16.6",
|
||||
"@mdx-js/tag": "0.15.0",
|
||||
"@primer/components": "^8.2.0-beta",
|
||||
"@svgr/webpack": "2.4.1",
|
||||
"@zeit/next-css": "^1.0.1",
|
||||
"@zeit/next-sass": "^1.0.1",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"broken-link-checker": "^0.7.8",
|
||||
"char-spinner": "^1.0.1",
|
||||
"chroma-js": "^1.4.1",
|
||||
"clipboard-copy-element": "^0.5.0",
|
||||
"colorette": "^1.0.7",
|
||||
"details-dialog-element": "^1.4.0",
|
||||
"eslint": "4.19.1",
|
||||
"eslint-plugin-github": "1.0.0",
|
||||
"eslint-plugin-prettier": "^3.0.0",
|
||||
"fs-extra": "^4.0.2",
|
||||
"gray-matter": "^4.0.1",
|
||||
"hast-util-to-html": "^5.0.0",
|
||||
"hast-util-to-string": "^1.0.1",
|
||||
"html-2-jsx": "^0.5.1-dev",
|
||||
"klaw": "^3.0.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
"mdx-constant": "^0.1.0",
|
||||
"mdx-live": "2.0.0-alpha.2",
|
||||
"metalsmith": "^2.3.0",
|
||||
"metalsmith-filter": "^1.0.2",
|
||||
"metalsmith-matters": "^1.2.0",
|
||||
"metalsmith-watch": "^1.0.3",
|
||||
"minimatch": "^3.0.4",
|
||||
"next": "7.0.2",
|
||||
"next-compose-plugins": "2.1.1",
|
||||
"node-sass": "^4.10.0",
|
||||
"now": "^12.1.8",
|
||||
"primer": "11.0.0",
|
||||
"primer-colors": "^1.0.1",
|
||||
"prism-github": "^1.1.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "16.6.1",
|
||||
"react-dom": "16.6.1",
|
||||
"react-measure": "^2.2.2",
|
||||
"refractor": "^2.6.2",
|
||||
"remark-emoji": "^2.0.2",
|
||||
"remark-images": "^0.16.1",
|
||||
"remark-parse": "^6.0.3",
|
||||
"remark-textr": "^3.0.3",
|
||||
"remark-toc": "^5.1.1",
|
||||
"styled-components": "^4.1.2",
|
||||
"title-case": "^2.1.1",
|
||||
"tree-model": "^1.0.7",
|
||||
"typographic-base": "^1.0.4",
|
||||
"unified": "^7.1.0",
|
||||
"unist-util-select": "^2.0.0",
|
||||
"unist-util-stringify-position": "^2.0.0",
|
||||
"unist-util-visit": "^1.4.0"
|
||||
}
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
import redirect from '../src/redirect'
|
||||
export default redirect('/css')
|
||||
@ -5,7 +5,7 @@ import Router from 'next/router'
|
||||
* and client-side:
|
||||
*
|
||||
* ```js
|
||||
* import {redirect} from '../src/utils'
|
||||
* import {redirect} from '../docs/utils'
|
||||
* export default redirect('/some/path')
|
||||
* ```
|
||||
*/
|
||||
22
lerna.json
22
lerna.json
@ -1,22 +0,0 @@
|
||||
{
|
||||
"lerna": "2.4.0",
|
||||
"version": "independent",
|
||||
"packages": [
|
||||
"docs",
|
||||
"modules/*",
|
||||
"tools/*"
|
||||
],
|
||||
"npmClientArgs": ["--no-package-lock"],
|
||||
"changelog": {
|
||||
"repo": "primer/primer",
|
||||
"labels": {
|
||||
"Tag: Breaking Change": ":boom: Breaking Change",
|
||||
"Tag: Enhancement": ":rocket: Enhancement",
|
||||
"Tag: Bug Fix": ":bug: Bug Fix",
|
||||
"Tag: Polish": ":nail_care: Polish",
|
||||
"Tag: Documentation": ":memo: Documentation",
|
||||
"Tag: Internal": ":house: Internal"
|
||||
},
|
||||
"cacheDir": ".changelog"
|
||||
}
|
||||
}
|
||||
38
lib/add-bundle-meta.js
Normal file
38
lib/add-bundle-meta.js
Normal file
@ -0,0 +1,38 @@
|
||||
const {existsSync} = require('fs')
|
||||
const {dirname, join, resolve} = require('path')
|
||||
|
||||
const cache = {}
|
||||
|
||||
module.exports = function addBundleMeta(options = {}) {
|
||||
const {namespace = 'data', log = noop} = options
|
||||
return (files, metal, done) => {
|
||||
const root = metal.source()
|
||||
for (const [path, file] of Object.entries(files)) {
|
||||
const bundle = getBundleRelativeTo(path, root)
|
||||
log(`[meta] ${path} bundle: "${bundle}"`)
|
||||
file[namespace].bundle = bundle
|
||||
}
|
||||
done()
|
||||
}
|
||||
}
|
||||
|
||||
function getBundleRelativeTo(file, root) {
|
||||
let dir = join(root, dirname(file))
|
||||
if (dir in cache) {
|
||||
return cache[dir]
|
||||
}
|
||||
while (dir !== root) {
|
||||
const indexPath = join(dir, 'index.scss')
|
||||
if (existsSync(indexPath)) {
|
||||
return (cache[dir] = getPathName(indexPath.substr(root.length + 1)))
|
||||
}
|
||||
dir = resolve(dir, '..')
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function getPathName(path) {
|
||||
return dirname(path).replace(/\//g, '-')
|
||||
}
|
||||
|
||||
function noop() {}
|
||||
@ -2,15 +2,15 @@ const each = require('./each')
|
||||
|
||||
module.exports = function addSource(options = {}) {
|
||||
const {namespace = 'data'} = options
|
||||
for (const key of ['branch', 'repo']) {
|
||||
for (const key of ['branch', 'repository']) {
|
||||
if (!options[key]) {
|
||||
throw new Error(`addSource() plugin requires options.${key} (got ${JSON.stringify(options[key])})`)
|
||||
}
|
||||
}
|
||||
const {branch, repo} = options
|
||||
const {branch, repository} = options
|
||||
return each((file, source) => {
|
||||
if (file[namespace]) {
|
||||
file[namespace].source = `https://github.com/${repo}/tree/${branch}/modules/${source}`
|
||||
file[namespace].source = `${repository}/tree/${branch}/modules/${source}`
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
/* eslint-disable no-console */
|
||||
const sync = require('./sync')
|
||||
const cssLoaderConfig = require('@zeit/next-css/css-loader-config')
|
||||
const {CI, NODE_ENV, NOW_URL} = process.env
|
||||
const {NODE_ENV, NOW_URL} = process.env
|
||||
|
||||
module.exports = (nextConfig = {}) => {
|
||||
const {assetPrefix = NOW_URL || ''} = nextConfig
|
||||
@ -12,10 +11,13 @@ module.exports = (nextConfig = {}) => {
|
||||
assetPrefix,
|
||||
pageExtensions: ['js', 'jsx', 'md', 'mdx'],
|
||||
|
||||
publicRuntimeConfig: Object.assign({
|
||||
assetPrefix,
|
||||
production: NODE_ENV === 'production'
|
||||
}, nextConfig.publicRuntimeConfig),
|
||||
publicRuntimeConfig: Object.assign(
|
||||
{
|
||||
assetPrefix,
|
||||
production: NODE_ENV === 'production'
|
||||
},
|
||||
nextConfig.publicRuntimeConfig
|
||||
),
|
||||
|
||||
webpack(config, options) {
|
||||
if (!options.defaultLoaders) {
|
||||
@ -24,27 +26,11 @@ module.exports = (nextConfig = {}) => {
|
||||
)
|
||||
}
|
||||
|
||||
const {dev, isServer} = options
|
||||
const {dev} = options
|
||||
|
||||
// only attempt to sync locally and in CI
|
||||
if (dev && !configured) {
|
||||
sync({watch: !CI})
|
||||
}
|
||||
|
||||
// in production, we don't need to compile Primer from SCSS; just inline
|
||||
// the CSS build!
|
||||
if (!dev) {
|
||||
config.resolve.alias['primer/index.scss$'] = require.resolve('primer/build/build.css')
|
||||
|
||||
const cssLoader = cssLoaderConfig(config, {
|
||||
dev,
|
||||
isServer
|
||||
})
|
||||
options.defaultLoaders.css = cssLoader
|
||||
config.module.rules.push({
|
||||
test: /\.css$/,
|
||||
loader: cssLoader
|
||||
})
|
||||
sync({watch: !NODE_ENV})
|
||||
}
|
||||
|
||||
config.module.rules.push({
|
||||
@ -54,10 +40,7 @@ module.exports = (nextConfig = {}) => {
|
||||
|
||||
config.module.rules.push({
|
||||
test: /\.mdx?$/,
|
||||
use: [
|
||||
options.defaultLoaders.babel,
|
||||
require.resolve('./mdx-loader')
|
||||
]
|
||||
use: [options.defaultLoaders.babel, require.resolve('./mdx-loader')]
|
||||
})
|
||||
|
||||
configured = true
|
||||
@ -24,9 +24,7 @@ module.exports = async function(source) {
|
||||
emoji,
|
||||
[textr, {plugins: [typographicBase]}]
|
||||
],
|
||||
hastPlugins: [
|
||||
rehypePrism
|
||||
],
|
||||
hastPlugins: [rehypePrism],
|
||||
compilers: [mdxExportJSONByDefault('frontMatter', data)]
|
||||
},
|
||||
getOptions(this),
|
||||
@ -39,11 +37,12 @@ module.exports = async function(source) {
|
||||
return callback(err)
|
||||
}
|
||||
|
||||
let code = `
|
||||
return callback(
|
||||
null,
|
||||
`
|
||||
import React from 'react'
|
||||
import {MDXTag} from '@mdx-js/tag'
|
||||
${result}
|
||||
`
|
||||
|
||||
return callback(null, code)
|
||||
)
|
||||
}
|
||||
@ -27,7 +27,7 @@ module.exports = options => {
|
||||
let result = node
|
||||
const source = nodeToString(node)
|
||||
try {
|
||||
parent.properties.className = (parent.properties.className || []).concat('language-' + lang)
|
||||
parent.properties.className = (parent.properties.className || []).concat(`language-${lang}`)
|
||||
result = refractor.highlight(source, lang)
|
||||
} catch (err) {
|
||||
if (/Unknown language/.test(err.message)) {
|
||||
@ -52,8 +52,8 @@ function getLanguage(node, aliases) {
|
||||
|
||||
for (const classListItem of className) {
|
||||
if (classListItem.slice(0, 9) === 'language-') {
|
||||
let language = classListItem.slice(9).replace(/{.*/, '')
|
||||
let alias = aliases[language]
|
||||
const language = classListItem.slice(9).replace(/{.*/, '')
|
||||
const alias = aliases[language]
|
||||
return alias || language
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,7 @@ module.exports = function rename(fn, options = {}) {
|
||||
const {log = noop} = options
|
||||
return (files, metal, done) => {
|
||||
for (const [key, file] of Object.entries(files)) {
|
||||
let dest = fn(file, key, files, metal)
|
||||
const dest = fn(file, key, files, metal)
|
||||
if (dest === true) {
|
||||
log(`[rename] keep: ${key}`)
|
||||
} else if (dest && dest !== key) {
|
||||
@ -3,8 +3,8 @@ const filter = require('metalsmith-filter')
|
||||
const frontmatter = require('metalsmith-matters')
|
||||
const watch = require('metalsmith-watch')
|
||||
|
||||
const addPackageMeta = require('./add-package-meta')
|
||||
const {extractPackages, writePackagesJSON} = require('./extract-packages-json')
|
||||
const {repository} = require('../package.json')
|
||||
const addBundleMeta = require('./add-bundle-meta')
|
||||
const addSource = require('./add-source')
|
||||
const filterBy = require('./filter-by')
|
||||
const parseDocComments = require('./parse-doc-comments')
|
||||
@ -23,39 +23,32 @@ module.exports = function sync(options = {}) {
|
||||
let files
|
||||
|
||||
const metal = Metalsmith(process.cwd())
|
||||
.source('../modules')
|
||||
.source('src')
|
||||
.destination('pages/css')
|
||||
.clean(false)
|
||||
.frontmatter(false)
|
||||
// ignore anything containing "node_modules" in its path
|
||||
.ignore(path => path.includes('node_modules'))
|
||||
// only match files that look like docs
|
||||
.use(filter(['*/README.md', '*/docs/*.md', '*/package.json']))
|
||||
.use(extractPackages())
|
||||
.use(filter(['**/*.md']))
|
||||
// convert <!-- %docs -->...<!-- %enddocs --> blocks into frontmatter
|
||||
.use(parseDocComments({log}))
|
||||
// parse frontmatter into "data" key of each file
|
||||
.use(frontmatter(metaOptions))
|
||||
// only match files that have a "path" key in their frontmatter
|
||||
.use(filterBy(file => file[ns].path))
|
||||
.use(writePackagesJSON({path: 'packages.json'}))
|
||||
// write the source frontmatter key to the relative source path
|
||||
.use(
|
||||
addSource({
|
||||
branch: 'master',
|
||||
repo: 'primer/primer',
|
||||
repository,
|
||||
log
|
||||
})
|
||||
)
|
||||
// copy a subset of fields from the nearest package.json
|
||||
.use(
|
||||
addPackageMeta({
|
||||
fields: ['name', 'description', 'version'],
|
||||
namespace: ns
|
||||
})
|
||||
)
|
||||
// add the "bundle" metadata so that we can redirect to those pages
|
||||
.use(addBundleMeta({namespace: ns}))
|
||||
// rename files with their "path" frontmatter key
|
||||
.use(rename(file => file[ns] ? `${file[ns].path}.md` : true), {log})
|
||||
.use(rename(file => (file[ns] ? `${file[ns].path}.md` : true)), {log})
|
||||
.use((_files, metal, done) => {
|
||||
files = _files
|
||||
done()
|
||||
@ -1,96 +0,0 @@
|
||||
const {basename, join, resolve} = require('path')
|
||||
const PromiseQueue = require('p-queue')
|
||||
const execa = require('execa')
|
||||
const globby = require('globby')
|
||||
const rootDir = resolve(__dirname, '../..')
|
||||
const lernaConfig = require(join(rootDir, 'lerna.json'))
|
||||
const modulesDir = join(rootDir, 'modules')
|
||||
require('console.table')
|
||||
|
||||
const unique = list => Array.from(new Set(list)).sort()
|
||||
|
||||
const matchAll = (pattern, text) => {
|
||||
const matches = []
|
||||
let match
|
||||
while (match = pattern.exec(text)) {
|
||||
matches.push(match)
|
||||
}
|
||||
return matches
|
||||
}
|
||||
|
||||
const checks = {
|
||||
'has stories': (module, key) => {
|
||||
return globby(join(module.path, '**/stories.js'))
|
||||
.then(files => ({
|
||||
[key]: files.length > 0 ? 'yes' : 'no'
|
||||
}))
|
||||
},
|
||||
'docs test': (module, key) => {
|
||||
return execa(join(rootDir, 'script/test-docs'), {
|
||||
cwd: module.path
|
||||
})
|
||||
.then(result => ({[key]: 'pass'}))
|
||||
.catch(({stderr}) => {
|
||||
const pattern = /("\.[-\w]+") is not documented/g
|
||||
const matches = matchAll(pattern, stderr)
|
||||
.map(match => match[1])
|
||||
let missing = matches ? Array.from(matches) : []
|
||||
const max = 5
|
||||
if (missing.length > max) {
|
||||
const more = missing.length - max
|
||||
missing = missing.slice(0, max).concat(`and ${more} more...`)
|
||||
}
|
||||
return {
|
||||
[key]: 'FAIL',
|
||||
'missing docs': unique(missing).join(', ')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const args = process.argv.slice(2)
|
||||
|
||||
const modules = args.length
|
||||
? Promise.resolve(args)
|
||||
: globby(join(modulesDir, 'primer-*'))
|
||||
|
||||
modules
|
||||
.then(moduleDirs => {
|
||||
console.log('Found %d module directories', moduleDirs.length)
|
||||
return moduleDirs
|
||||
.map(path => ({
|
||||
path,
|
||||
name: basename(path),
|
||||
pkg: require(join(path, 'package.json'))
|
||||
}))
|
||||
.filter(({pkg}) => pkg.primer.module_type !== 'meta')
|
||||
})
|
||||
.then(modules => {
|
||||
console.log('Filtered to %d modules (excluding meta-packages)', modules.length)
|
||||
|
||||
const queue = new PromiseQueue({concurrency: 3})
|
||||
|
||||
for (const module of modules) {
|
||||
module.checks = {}
|
||||
for (const [name, check] of Object.entries(checks)) {
|
||||
queue.add(() => {
|
||||
// console.warn(`? check: ${module.name} ${name}`)
|
||||
return check(module, name)
|
||||
.then(result => {
|
||||
Object.assign(module.checks, result)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
console.warn(`Running ${queue.size} checks...`)
|
||||
return queue.onIdle().then(() => modules)
|
||||
})
|
||||
.then(modules => {
|
||||
console.warn('ran tests on %d modules', modules.length)
|
||||
const rows = modules.map(({name, checks}) => {
|
||||
return Object.assign({'package': name}, checks)
|
||||
})
|
||||
console.table(rows)
|
||||
})
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "primer-scorecard",
|
||||
"scripts": {
|
||||
"test": "node index.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"console.table": "^0.10.0",
|
||||
"execa": "^0.10.0",
|
||||
"globby": "^6.1.0",
|
||||
"p-queue": "^2.4.2"
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
# Primer modules
|
||||
|
||||
Primer is monorepo composed of 23 packages which can be installed altogether or individually via npm. We group our packages into 3 meta-packages which you can install individually: [primer-core](primer-core), [primer-product](primer-product), and [primer-marketing](primer-marketing). Install [primer](primer) if you want to install all 23 packages.
|
||||
@ -1,2 +0,0 @@
|
||||
*.yml
|
||||
.github
|
||||
@ -1,21 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019 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
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1,3 +0,0 @@
|
||||
// support files
|
||||
@import "primer-support/index.scss";
|
||||
@import "./lib/flash.scss";
|
||||
@ -1,48 +0,0 @@
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"name": "primer-alerts",
|
||||
"description": "Flash messages, or alerts, inform users of successful or pending actions.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
"author": "GitHub, Inc.",
|
||||
"license": "MIT",
|
||||
"style": "build/build.css",
|
||||
"sass": "index.scss",
|
||||
"main": "build/index.js",
|
||||
"primer": {
|
||||
"category": "product",
|
||||
"module_type": "components",
|
||||
"class_whitelist": [
|
||||
"warning"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"index.scss",
|
||||
"lib",
|
||||
"build"
|
||||
],
|
||||
"repository": "https://github.com/primer/primer/tree/master/modules/primer-alerts",
|
||||
"bugs": {
|
||||
"url": "https://github.com/primer/primer/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "../../script/npm-run primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"lint": "../../script/lint-scss",
|
||||
"test": "../../script/npm-run-all build lint",
|
||||
"prepublishOnly": "../../script/notify pending",
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"alerts",
|
||||
"callouts",
|
||||
"css",
|
||||
"flash",
|
||||
"github",
|
||||
"primer",
|
||||
"design-system",
|
||||
"style"
|
||||
]
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
|
||||
storiesOf('Flash alerts', module)
|
||||
.add('flash', () => (
|
||||
<div className='p-4'>
|
||||
<div className='flash'>
|
||||
flash
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('flash-warn', () => (
|
||||
<div className='p-4'>
|
||||
<div className='flash flash-warn'>
|
||||
flash-warn
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('flash-error', () => (
|
||||
<div className='p-4'>
|
||||
<div className='flash flash-error'>
|
||||
flash-error
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('flash-success', () => (
|
||||
<div className='p-4'>
|
||||
<div className='flash flash-success'>
|
||||
flash-success
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('flash with action button', () => (
|
||||
<div className='p-4'>
|
||||
<div className="flash">
|
||||
<button type="submit" className="btn btn-sm primary flash-action">Complete action</button>
|
||||
Flash message with action here.
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('flash-full', () => (
|
||||
<div className='p-4'>
|
||||
<div className="container-lg">
|
||||
<div className="flash flash-full">
|
||||
Full width flash message.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
@ -1,2 +0,0 @@
|
||||
*.yml
|
||||
.github
|
||||
@ -1,21 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019 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
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1,7 +0,0 @@
|
||||
@import "primer-support/index.scss";
|
||||
|
||||
// Avatars
|
||||
@import "./lib/avatar.scss";
|
||||
@import "./lib/avatar-parent-child.scss";
|
||||
@import "./lib/avatar-stack.scss";
|
||||
@import "./lib/circle-badge.scss";
|
||||
@ -1,42 +0,0 @@
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"name": "primer-avatars",
|
||||
"description": "Basic styles for user profile avatars.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
"author": "GitHub, Inc.",
|
||||
"license": "MIT",
|
||||
"style": "build/build.css",
|
||||
"sass": "index.scss",
|
||||
"main": "build/index.js",
|
||||
"primer": {
|
||||
"category": "product",
|
||||
"module_type": "components"
|
||||
},
|
||||
"files": [
|
||||
"index.scss",
|
||||
"lib",
|
||||
"build"
|
||||
],
|
||||
"repository": "https://github.com/primer/primer/tree/master/modules/primer-avatars",
|
||||
"bugs": {
|
||||
"url": "https://github.com/primer/primer/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "../../script/npm-run primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"lint": "../../script/lint-scss",
|
||||
"test": "../../script/npm-run-all build lint",
|
||||
"prepublishOnly": "../../script/notify pending",
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"avatars",
|
||||
"primer",
|
||||
"css",
|
||||
"github",
|
||||
"design-system"
|
||||
]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
|
||||
|
||||
const stories = storiesOf('Avatars', module)
|
||||
|
||||
storiesFromMarkdown(require.context('.', true, /\.md$/))
|
||||
.forEach(({title, story}) => {
|
||||
stories.add(title, story)
|
||||
})
|
||||
@ -1,2 +0,0 @@
|
||||
*.yml
|
||||
.github
|
||||
@ -1,21 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019 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
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1,5 +0,0 @@
|
||||
@import "primer-support/index.scss";
|
||||
|
||||
@import "./lib/normalize.scss";
|
||||
@import "./lib/base.scss";
|
||||
@import "./lib/typography-base.scss";
|
||||
@ -1,48 +0,0 @@
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"name": "primer-base",
|
||||
"description": "CSS to reset the browsers default styles",
|
||||
"homepage": "http://primer.github.io/",
|
||||
"author": "GitHub, Inc.",
|
||||
"license": "MIT",
|
||||
"style": "build/build.css",
|
||||
"sass": "index.scss",
|
||||
"main": "build/index.js",
|
||||
"primer": {
|
||||
"category": "core",
|
||||
"module_type": "support",
|
||||
"class_whitelist": [
|
||||
"octicon",
|
||||
"rule"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"index.scss",
|
||||
"lib",
|
||||
"build"
|
||||
],
|
||||
"repository": "https://github.com/primer/primer/tree/master/modules/primer-base",
|
||||
"bugs": {
|
||||
"url": "https://github.com/primer/primer/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "../../script/npm-run primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"lint": "../../script/lint-scss",
|
||||
"test": "../../script/npm-run-all build lint",
|
||||
"prepublishOnly": "../../script/notify pending",
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
"css",
|
||||
"github",
|
||||
"design-system",
|
||||
"base",
|
||||
"reset",
|
||||
"normalize"
|
||||
]
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
|
||||
storiesOf('Base', module)
|
||||
.add('button', () => (
|
||||
<button>Button</button>
|
||||
))
|
||||
@ -1,2 +0,0 @@
|
||||
*.yml
|
||||
.github
|
||||
@ -1,21 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019 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
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1,3 +0,0 @@
|
||||
@import "primer-support/index.scss";
|
||||
|
||||
@import "./lib/blankslate.scss";
|
||||
@ -1,44 +0,0 @@
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"name": "primer-blankslate",
|
||||
"description": "Blankslates are for when there is a lack of content within a page or section.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
"author": "GitHub, Inc.",
|
||||
"license": "MIT",
|
||||
"style": "build/build.css",
|
||||
"sass": "index.scss",
|
||||
"main": "build/index.js",
|
||||
"primer": {
|
||||
"category": "product",
|
||||
"module_type": "components"
|
||||
},
|
||||
"files": [
|
||||
"index.scss",
|
||||
"lib",
|
||||
"build"
|
||||
],
|
||||
"repository": "https://github.com/primer/primer/tree/master/modules/primer-blankslate",
|
||||
"bugs": {
|
||||
"url": "https://github.com/primer/primer/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "../../script/npm-run primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"lint": "../../script/lint-scss",
|
||||
"test": "../../script/npm-run-all build lint",
|
||||
"prepublishOnly": "../../script/notify pending",
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
"css",
|
||||
"github",
|
||||
"design-system",
|
||||
"blankslate",
|
||||
"empty",
|
||||
"content"
|
||||
]
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
|
||||
storiesOf('Blankslate', module)
|
||||
.add('blankslate', () => (
|
||||
<div className='blankslate'>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
))
|
||||
.add('blankslate-narrow', () => (
|
||||
<div className='blankslate blankslate-narrow'>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
))
|
||||
.add('blankslate-large', () => (
|
||||
<div className='blankslate blankslate-large'>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
))
|
||||
.add('blankslate-spacious', () => (
|
||||
<div className='blankslate blankslate-spacious'>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
))
|
||||
.add('blankslate-capped', () => (
|
||||
<div className='blankslate blankslate-capped'>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
))
|
||||
.add('blankslate-clean-background', () => (
|
||||
<div className='blankslate blankslate-clean-background'>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
))
|
||||
@ -1,2 +0,0 @@
|
||||
*.yml
|
||||
.github
|
||||
@ -1,21 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019 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
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1,2 +0,0 @@
|
||||
@import "primer-support/index.scss";
|
||||
@import "./lib/box.scss";
|
||||
@ -1,41 +0,0 @@
|
||||
{
|
||||
"version": "3.0.0",
|
||||
"name": "primer-box",
|
||||
"description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
"author": "GitHub, Inc.",
|
||||
"license": "MIT",
|
||||
"style": "build/build.css",
|
||||
"sass": "index.scss",
|
||||
"main": "build/index.js",
|
||||
"primer": {
|
||||
"category": "core",
|
||||
"module_type": "components"
|
||||
},
|
||||
"files": [
|
||||
"index.scss",
|
||||
"lib",
|
||||
"build"
|
||||
],
|
||||
"repository": "https://github.com/primer/primer/tree/master/modules/primer-box",
|
||||
"bugs": {
|
||||
"url": "https://github.com/primer/primer/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "../../script/npm-run primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"lint": "../../script/lint-scss",
|
||||
"test": "../../script/npm-run-all build lint",
|
||||
"prepublishOnly": "../../script/notify pending",
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
"css",
|
||||
"github",
|
||||
"design-system"
|
||||
]
|
||||
}
|
||||
@ -1,213 +0,0 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
|
||||
storiesOf('Box', module)
|
||||
.add('Box', () => (
|
||||
<div className='Box'>
|
||||
Box
|
||||
</div>
|
||||
))
|
||||
.add('Box elements', () => (
|
||||
<div className='Box'>
|
||||
<div className='Box-header'>
|
||||
<h3 className='Box-title'>
|
||||
Box-title
|
||||
</h3>
|
||||
</div>
|
||||
<div className='Box-body'>
|
||||
Box-body
|
||||
</div>
|
||||
<div className='Box-footer'>
|
||||
Box-footer
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Box-row', () => (
|
||||
<div className='Box'>
|
||||
<ul>
|
||||
<li className='Box-row'>
|
||||
Box-row
|
||||
</li>
|
||||
<li className='Box-row'>
|
||||
Box-row
|
||||
</li>
|
||||
<li className='Box-row'>
|
||||
Box-row
|
||||
</li>
|
||||
<li className='Box-row'>
|
||||
Box-row
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
))
|
||||
.add('Box--condensed', () => (
|
||||
<div className='Box Box--condensed'>
|
||||
<div className='Box-header'>
|
||||
<h3 className='Box-title'>
|
||||
Box-title
|
||||
</h3>
|
||||
</div>
|
||||
<div className='Box-body'>
|
||||
Box-body
|
||||
</div>
|
||||
<ul>
|
||||
<li className='Box-row'>
|
||||
Box-row
|
||||
</li>
|
||||
<li className='Box-row'>
|
||||
Box-row
|
||||
</li>
|
||||
</ul>
|
||||
<div className='Box-footer'>
|
||||
Box-footer
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Box--spacious', () => (
|
||||
<div className='Box Box--spacious'>
|
||||
<div className='Box-header'>
|
||||
<h3 className='Box-title'>
|
||||
Box-title
|
||||
</h3>
|
||||
</div>
|
||||
<div className='Box-body'>
|
||||
Box-body
|
||||
</div>
|
||||
<ul>
|
||||
<li className='Box-row'>
|
||||
Box-row
|
||||
</li>
|
||||
<li className='Box-row'>
|
||||
Box-row
|
||||
</li>
|
||||
</ul>
|
||||
<div className='Box-footer'>
|
||||
Box-footer
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Box--blue', () => (
|
||||
<div className='Box Box--blue'>
|
||||
<div className='Box-header'>
|
||||
<h3 className='Box-title'>
|
||||
Box-title
|
||||
</h3>
|
||||
</div>
|
||||
<div className='Box-body'>
|
||||
Box-body
|
||||
</div>
|
||||
<ul>
|
||||
<li className='Box-row'>
|
||||
Box-row
|
||||
</li>
|
||||
<li className='Box-row'>
|
||||
Box-row
|
||||
</li>
|
||||
</ul>
|
||||
<div className='Box-footer'>
|
||||
Box-footer
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Box-header--blue', () => (
|
||||
<div className='Box'>
|
||||
<div className='Box-header Box-header--blue'>
|
||||
<h3 className='Box-title'>Box-title</h3>
|
||||
</div>
|
||||
<div className='Box-body'>
|
||||
Box-body
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Box--danger', () => (
|
||||
<div className='Box Box--danger'>
|
||||
<div className='Box-row'>
|
||||
Row one
|
||||
</div>
|
||||
<div className='Box-row'>
|
||||
Row two
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Box-row themes', () => (
|
||||
<div>
|
||||
<div className='Box mb-4'>
|
||||
<div className='Box-row Box-row--gray'>
|
||||
.Box-row--gray
|
||||
</div>
|
||||
<div className='Box-row Box-row--hover-gray'>
|
||||
.Box-row--hover-gray
|
||||
</div>
|
||||
<div className='Box-row Box-row--yellow'>
|
||||
.Box-row--yellow
|
||||
</div>
|
||||
<div className='Box-row Box-row--hover-blue'>
|
||||
.Box-row--hover-blue
|
||||
</div>
|
||||
<div className='Box-row Box-row--blue'>
|
||||
.Box-row--blue
|
||||
</div>
|
||||
</div>
|
||||
<div className='Box'>
|
||||
<div className='Box-row Box-row--focus-gray navigation-focus'>
|
||||
.Box-row--focus-gray and .navigation-focus
|
||||
</div>
|
||||
<div className='Box-row Box-row--focus-gray'>
|
||||
.Box-row--focus-gray
|
||||
</div>
|
||||
<div className='Box-row Box-row--focus-blue navigation-focus'>
|
||||
.Box-row--focus-blue and .navigation-focus
|
||||
</div>
|
||||
<div className='Box-row Box-row--focus-blue'>
|
||||
.Box-row--focus-blue
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Box-row--unread', () => (
|
||||
<div className='Box'>
|
||||
<div className='Box-row'>
|
||||
Box row
|
||||
</div>
|
||||
<div className='Box-row Box-row--unread'>
|
||||
Box row unread
|
||||
</div>
|
||||
<div className='Box-row'>
|
||||
Box row
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Box-row-link', () => (
|
||||
<div className='Box'>
|
||||
<div className='Box-row'>
|
||||
<a className='Box-row-link' href='#url'>Box row link</a>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Box border-dashed', () => (
|
||||
<div className='Box border-dashed p-2'>
|
||||
Box border-dashed
|
||||
</div>
|
||||
))
|
||||
.add('Box with flash-full', () => (
|
||||
<div className='Box'>
|
||||
<div className='Box-header'>
|
||||
Box-header
|
||||
</div>
|
||||
<div className='flash flash-full'>
|
||||
flash-full
|
||||
</div>
|
||||
<div className='flash flash-full flash-success'>
|
||||
flash-full flash-success
|
||||
</div>
|
||||
<div className='flash flash-full flash-warn'>
|
||||
flash-full flash-warn
|
||||
</div>
|
||||
<div className='flash flash-full flash-error'>
|
||||
flash-full flash-error
|
||||
</div>
|
||||
<div className='Box-body'>
|
||||
Box-body
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
@ -1,21 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019 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
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1,3 +0,0 @@
|
||||
// support files
|
||||
@import "primer-support/index.scss";
|
||||
@import "./lib/branch-name.scss";
|
||||
@ -1,41 +0,0 @@
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"name": "primer-branch-name",
|
||||
"description": "A nice, consistent way to display branch names.",
|
||||
"homepage": "http://primer.github.io/",
|
||||
"primer": {
|
||||
"category": "product",
|
||||
"module_type": "components"
|
||||
},
|
||||
"files": [
|
||||
"index.scss",
|
||||
"lib",
|
||||
"build"
|
||||
],
|
||||
"author": "GitHub, Inc.",
|
||||
"license": "MIT",
|
||||
"style": "index.scss",
|
||||
"sass": "index.scss",
|
||||
"main": "build/index.js",
|
||||
"repository": "https://github.com/primer/primer/tree/master/modules/primer-branch-name",
|
||||
"bugs": {
|
||||
"url": "https://github.com/primer/primer/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"test-docs": "../../script/test-docs",
|
||||
"build": "../../script/npm-run primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"lint": "../../script/lint-scss",
|
||||
"test": "../../script/npm-run-all build lint test-docs",
|
||||
"prepublishOnly": "../../script/notify pending",
|
||||
"postpublish": "../../script/notify success"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "5.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"github",
|
||||
"primer",
|
||||
"design-system"
|
||||
]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
|
||||
|
||||
const stories = storiesOf('Branch Name', module)
|
||||
|
||||
storiesFromMarkdown(require.context('.', true, /\.md$/))
|
||||
.forEach(({title, story}) => {
|
||||
stories.add(title, story)
|
||||
})
|
||||
@ -1,2 +0,0 @@
|
||||
*.yml
|
||||
.github
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user