diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md new file mode 100644 index 0000000000..156a0ee60a --- /dev/null +++ b/.github/CONTRIBUTING.md @@ -0,0 +1,79 @@ +## Contributing + +[fork]: https://github.com/github/primer/fork +[pr]: https://github.com/github/primer/compare +[style]: http://primercss.io/guidelines/ + +Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great. + +Before you do, would you mind reading [this license agreement](CLA.md)? If you open a PR, we'll assume you agree to it. If you have any hesitation or disagreement, please do open a PR still, but note your concerns as well. + +## 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. +* Please **do not** open issues or pull requests regarding the code in [`Normalize`](https://github.com/necolas/normalize.css) (open them in their respective repositories). + +## 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: + +0. **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. + +1. **Use the GitHub issue search** — check if the issue has already been reported. + +2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository. + +3. **Isolate the problem** — ideally create a [reduced test case](http://css-tricks.com/6263-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. +> +> `` - 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. + +Adhering to the following process is the best way to get your work included in the project: + +1. Fork and clone the repository +2. Configure and install the dependencies: `bower install` +3. Create a new branch: `git checkout -b my-branch-name` +4. Make your change, add tests, and make sure the tests still pass +5. Push to your fork and [submit a pull request][pr] +6. Pat your self on the back and wait for your pull request to be reviewed and merged. + +Here are a few things you can do that will increase the likelihood of your pull request being accepted: + +- Follow the [style guide][style]. +- 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). + +## 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) diff --git a/.gitignore b/.gitignore index d97f5f3a14..437a8f4a75 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ .DS_Store .sass-cache node_modules +*.log build _site docs diff --git a/.travis.yml b/.travis.yml index c6443c5f82..143df7b415 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,32 @@ language: node_js node_js: - '7' +env: + - TEST_DIR=packages/primer-css + - TEST_DIR=packages/primer-core + - TEST_DIR=packages/primer-product + - TEST_DIR=packages/primer-marketing + - TEST_DIR=packages/primer-alerts + - TEST_DIR=packages/primer-base + - TEST_DIR=packages/primer-blankslate + - TEST_DIR=packages/primer-box + - TEST_DIR=packages/primer-breadcrumb + - TEST_DIR=packages/primer-buttons + - TEST_DIR=packages/primer-cards + - TEST_DIR=packages/primer-forms + - TEST_DIR=packages/primer-labels + - TEST_DIR=packages/primer-layout + - TEST_DIR=packages/primer-markdown + - TEST_DIR=packages/primer-marketing + - TEST_DIR=packages/primer-marketing-type + - TEST_DIR=packages/primer-marketing-utilities + - TEST_DIR=packages/primer-navigation + - TEST_DIR=packages/primer-page-headers + - TEST_DIR=packages/primer-page-sections + - TEST_DIR=packages/primer-support + - TEST_DIR=packages/primer-table-object + - TEST_DIR=packages/primer-tables + - TEST_DIR=packages/primer-tooltips + - TEST_DIR=packages/primer-truncate + - TEST_DIR=packages/primer-utilities +script: cd $TEST_DIR && npm install && npm test diff --git a/README.md b/README.md index da7c31fad2..c9b7de75ab 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,22 @@ # Primer CSS -[![NPM version](http://img.shields.io/npm/v/primer-css.svg)](https://www.npmjs.org/package/primer-css) +[![npm version](http://img.shields.io/npm/v/primer-css.svg)](https://www.npmjs.org/package/primer-css) [![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) -> Primer is the CSS toolkit that powers GitHub's front-end design. It's purposefully limited to common components to provide our developers with the most flexibility, and to keep GitHub uniquely *GitHubby*. It's built with SCSS and available via NPM, so it's easy to include all or part of it within your own project. +Primer is the CSS framework that powers GitHub's front-end design. Primer CSS 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. -This repository is a compilation of [several CSS modules](https://github.com/primer). +## Packages + +The Primer CSS repo is managed as a monorepo that is composed of many npm packages. + +### Core Packages + +| Package | Version | +|---|---| +| **[primer-css](/packages/primer-css)**
Includes all 23 packages | [![npm](http://img.shields.io/npm/v/primer-css.svg)](https://www.npmjs.com/package/primer-css) | +| [primer-core](/packages/primer-core) | [![npm](http://img.shields.io/npm/v/primer-core.svg)](https://www.npmjs.com/package/primer-core) | +| [primer-product](/packages/primer-product) | [![npm](http://img.shields.io/npm/v/primer-product.svg)](https://www.npmjs.com/package/primer-product) | +| [primer-marketing](/packages/primer-marketing) | [![npm](http://img.shields.io/npm/v/primer-marketing.svg)](https://www.npmjs.com/package/primer-marketing) | ## Install @@ -27,7 +38,7 @@ You can also import specific portions of the module by importing those partials ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. +For a compiled **CSS** version of this module, a npm script is included that will output a CSS version to `build/build.css` The built CSS file is also included in the npm package. ``` $ npm run build diff --git a/lerna.json b/lerna.json new file mode 100644 index 0000000000..f2a41ae974 --- /dev/null +++ b/lerna.json @@ -0,0 +1,7 @@ +{ + "lerna": "2.0.0-rc.2", + "packages": [ + "packages/*" + ], + "version": "independent" +} diff --git a/package.json b/package.json index faa7e1efc5..431dfc95da 100644 --- a/package.json +++ b/package.json @@ -1,37 +1,11 @@ { - "version": "6.0.0", - "name": "primer-css", - "description": "Primer is the CSS toolkit that powers GitHub's front-end design. It's purposefully limited to common components to provide our developers with the most flexibility, and to keep GitHub uniquely *GitHubby*. It's built with SCSS, so it's easy to include all or part of it within your own project.", - "homepage": "http://primercss.io/", - "author": "GitHub, Inc.", - "license": "MIT", - "style": "build/build.css", - "files": [ - "index.scss", - "lib", - "build" - ], - "repository": "https://github.com/primer/primer.git", - "bugs": { - "url": "https://github.com/primer/primer/issues" - }, + "private": true, "scripts": { - "build": "primer-module-build index.scss", - "prepublish": "npm run build", - "test": "npm run build" + "bootstrap": "lerna bootstrap", + "publish": "lerna publish", + "updated": "lerna updated" }, "dependencies": { - "primer-core": "^3.0.0", - "primer-marketing": "^3.0.0", - "primer-product": "^3.0.0" - }, - "devDependencies": { - "primer-module-build": "*" - }, - "keywords": [ - "primer", - "css", - "github", - "primercss" - ] + "lerna": "^2.0.0-rc.2" + } } diff --git a/packages/README.md b/packages/README.md new file mode 100644 index 0000000000..4b22c24608 --- /dev/null +++ b/packages/README.md @@ -0,0 +1,3 @@ +# Primer modules + +Primer CSS 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-css](primer-css) if you want to install all 23 packages. diff --git a/packages/primer-alerts/.gitignore b/packages/primer-alerts/.gitignore new file mode 100644 index 0000000000..01a5e93c12 --- /dev/null +++ b/packages/primer-alerts/.gitignore @@ -0,0 +1,3 @@ +node_modules +build +*.log diff --git a/packages/primer-alerts/.npmignore b/packages/primer-alerts/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/packages/primer-alerts/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/packages/primer-alerts/.postcss.json b/packages/primer-alerts/.postcss.json new file mode 100644 index 0000000000..0d882f47f2 --- /dev/null +++ b/packages/primer-alerts/.postcss.json @@ -0,0 +1,6 @@ +{ + "use": ["autoprefixer"], + "autoprefixer": { + "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11" + } +} diff --git a/packages/primer-alerts/.stylelintrc.json b/packages/primer-alerts/.stylelintrc.json new file mode 100644 index 0000000000..19028f9885 --- /dev/null +++ b/packages/primer-alerts/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "stylelint-config-primer" + ] +} diff --git a/packages/primer-alerts/CHANGELOG.md b/packages/primer-alerts/CHANGELOG.md new file mode 100644 index 0000000000..b6cb3433b4 --- /dev/null +++ b/packages/primer-alerts/CHANGELOG.md @@ -0,0 +1,95 @@ +# v1.1.2 + + * patch bump - broccolini [github/github@3c26562](https://github.com/github/github/commit/3c26562) + +# v1.1.1 + + * Bump all the version numbers for readme - Mu-An Chiou [github/github@a9d152f](https://github.com/github/github/commit/a9d152f) + +# v1.1.0 + + * update version numbers in primer-product - broccolini [github/github@5301936](https://github.com/github/github/commit/5301936) + * missed a yellow in flash alerts: - broccolini [github/github@8725991](https://github.com/github/github/commit/8725991) + * update flash red variables - broccolini [github/github@2945319](https://github.com/github/github/commit/2945319) + * yellow flash warn variables - broccolini [github/github@5b64376](https://github.com/github/github/commit/5b64376) + * new flash green variables - broccolini [github/github@80401a0](https://github.com/github/github/commit/80401a0) + * update blues: - broccolini [github/github@9b191b6](https://github.com/github/github/commit/9b191b6) + +# v1.0.2 + + * update version numbers for primer package with bold update - broccolini [github/github@5d3e089](https://github.com/github/github/commit/5d3e089) + +# v1.0.1 + + * More versions - Jon Rohan [github/github@e12ba2e](https://github.com/github/github/commit/e12ba2e) + * Pointing main js file to build - Jon Rohan [github/github@3575651](https://github.com/github/github/commit/3575651) + +# v1.0.0 + + * updating versions after running version script - broccolini [github/github@61b8c6f](https://github.com/github/github/commit/61b8c6f) + * Some updates based on feedback - Jon Rohan [github/github@8a4919d](https://github.com/github/github/commit/8a4919d) + +# v0.4.0 + + * Cutting new versions of primer modules - Jon Rohan [github/github@157f5ab](https://github.com/github/github/commit/157f5ab) + * Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) + * Separating out modules into primer-core and primer-product - Jon Rohan [github/github@ddf698c](https://github.com/github/github/commit/ddf698c) + +# v0.3.1 + + * Updating version - Jon Rohan [github/github@6bf5fe5](https://github.com/github/github/commit/6bf5fe5) + * Updating link to real primer-css repository - Jon Rohan [github/github@bbaedda](https://github.com/github/github/commit/bbaedda) + * Updating the modules stylelint - Jon Rohan [github/github@389609f](https://github.com/github/github/commit/389609f) + * Make sure the modules build without error before publishing - Jon Rohan [github/github@57ac5e6](https://github.com/github/github/commit/57ac5e6) + * Adding documentation status to most of the modules - Jon Rohan [github/github@b97695c](https://github.com/github/github/commit/b97695c) + +# v0.3.0 + + * Publishing a new version - Jon Rohan [github/github@eed0e96](https://github.com/github/github/commit/eed0e96) + * Updating octicons to deprecate the use of :symbol - Jon Rohan [github/github@9eb0c63](https://github.com/github/github/commit/9eb0c63) + * Lots of refactoring and tests written - Jon Rohan [github/github@6e3ac10](https://github.com/github/github/commit/6e3ac10) + * Removing some unnecessary lint plugins and using native - Jon Rohan [github/github@2ae0070](https://github.com/github/github/commit/2ae0070) + * including no-utility lint plugin - Jon Rohan [github/github@5cb86ed](https://github.com/github/github/commit/5cb86ed) + * Adding lint plugins for new config - Jon Rohan [github/github@7fb9613](https://github.com/github/github/commit/7fb9613) + * Mentioning the build file - Jon Rohan [github/github@64ca4a7](https://github.com/github/github/commit/64ca4a7) + +# v0.2.6 + + * Including build in files - Jon Rohan [github/github@817ee23](https://github.com/github/github/commit/817ee23) + +# v0.2.5 + + * skipping cleanup - Jon Rohan [github/github@d6b3678](https://github.com/github/github/commit/d6b3678) + +# v0.2.4 + + * Bump version, and including build/build.css in npm package - Jon Rohan [github/github@09cb3a3](https://github.com/github/github/commit/09cb3a3) + * setup unless installed - Jon Rohan [github/github@a798fb0](https://github.com/github/github/commit/a798fb0) + * Using a simplier script setup - Jon Rohan [github/github@be103f4](https://github.com/github/github/commit/be103f4) + * Renaming to compile - Jon Rohan [github/github@196d7ef](https://github.com/github/github/commit/196d7ef) + * Updating modules to run on prepublish to include build.css in distribution - Jon Rohan [github/github@5b573a0](https://github.com/github/github/commit/5b573a0) + * Re-ordering the docs to the bottom of the readme - Jon Rohan [github/github@9c1f291](https://github.com/github/github/commit/9c1f291) + * Updating the link - Jon Rohan [github/github@f67684b](https://github.com/github/github/commit/f67684b) + +# v0.2.1 + + * Bumping version to include postcss.json in npm - Jon Rohan [github/github@9e560ba](https://github.com/github/github/commit/9e560ba) + * Using stylelint to lint the modules instead of scss_lint - Jon Rohan [github/github@cb0b8fd](https://github.com/github/github/commit/cb0b8fd) + * Updating for stylelint instead of scss_lint - Jon Rohan [github/github@87a2c68](https://github.com/github/github/commit/87a2c68) + +# v0.2.0 + + * Cutting new version 0.2.0 - Jon Rohan [github/github@a6f6586](https://github.com/github/github/commit/a6f6586) + * Don't link requirements - Jon Rohan [github/github@7740e81](https://github.com/github/github/commit/7740e81) + * Updating the README with more detailed instructions - Jon Rohan [github/github@5dd7c34](https://github.com/github/github/commit/5dd7c34) + * Reorganize the module folders into a more flexible organization - Jon Rohan [github/github@5a07101](https://github.com/github/github/commit/5a07101) + * Remove partial underscore from name - Jon Rohan [github/github@e463779](https://github.com/github/github/commit/e463779) + * Some cleanup on the readme - Jon Rohan [github/github@74850d5](https://github.com/github/github/commit/74850d5) + * cleaning up the package.json files - Jon Rohan [github/github@77763a1](https://github.com/github/github/commit/77763a1) + * Adding npm version badges to readme - Jon Rohan [github/github@90b1871](https://github.com/github/github/commit/90b1871) + * Adding tavisci build badges to the readmes - Jon Rohan [github/github@1a6126f](https://github.com/github/github/commit/1a6126f) + +# v0.1.0 + + * Updating support dependency versions - Jon Rohan [github/github@76d97ec](https://github.com/github/github/commit/76d97ec) + * Moving primer/primer alerts to a module - Jon Rohan [github/github@1f434c1](https://github.com/github/github/commit/1f434c1) \ No newline at end of file diff --git a/packages/primer-alerts/LICENSE b/packages/primer-alerts/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-alerts/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-alerts/README.md b/packages/primer-alerts/README.md new file mode 100644 index 0000000000..a2688aa800 --- /dev/null +++ b/packages/primer-alerts/README.md @@ -0,0 +1,151 @@ +# Primer CSS Alerts + +[![npm version](http://img.shields.io/npm/v/primer-alerts.svg)](https://www.npmjs.org/package/primer-alerts) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time. + +This repository is a module of the full [primer-css][primer-css] repository. + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-alerts` with this command. + +``` +$ npm install --save primer-alerts +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-alerts/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. + +``` +$ npm run build +``` + +## Documentation + + + +Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time. + +## Default + +Flash messages start off looking decently neutral—they're just light blue rounded rectangles. + +```html +
+ Flash message goes here. +
+``` + +You can put multiple paragraphs of text in a flash message—the last paragraph's bottom `margin` will be automatically override. + +```html +
+

This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more text, it'll eventually wrap to a new line.

+

And this is another paragraph.

+
+``` + +Should the need arise, you can quickly space out your flash message from surrounding content with a `.flash-messages` wrapper. *Note the extra top and bottom margin in the example below.* + +```html +
+
+ Flash message goes here. +
+
+``` + +## Variations + +Add `.flash-warn`, `.flash-error`, or `.flash-success` to the flash message to make it yellow, red, or green, respectively. + +```html +
+ Flash message goes here. +
+``` + +```html +
+ Flash message goes here. +
+``` + +```html +
+ Flash message goes here. +
+``` + +## With icon + +Add an icon to the left of the flash message to give it some funky fresh attention. + +```html +
+ <%= octicon "alert" %> + Flash message with an icon goes here. +
+``` + +## With dismiss + +Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any flash message. + +```html +
+ + Dismissable flash message goes here. +
+``` + +## With action button + +A flash message with an action button. + +```html +
+ + Flash message with action here. +
+``` + +## Full width flash + +A flash message that is full width and removes border and border radius. + +```html +
+
+ Full width flash message. +
+
+``` + + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-alerts/index.scss b/packages/primer-alerts/index.scss new file mode 100644 index 0000000000..6f60ab3321 --- /dev/null +++ b/packages/primer-alerts/index.scss @@ -0,0 +1,3 @@ +// support files +@import "primer-support/index.scss"; +@import "./lib/flash.scss"; diff --git a/packages/primer-alerts/lib/flash.scss b/packages/primer-alerts/lib/flash.scss new file mode 100644 index 0000000000..2a19b71927 --- /dev/null +++ b/packages/primer-alerts/lib/flash.scss @@ -0,0 +1,80 @@ +// Default flash +// stylelint-disable selector-no-type +.flash { + position: relative; + padding: $spacer-3; + color: $blue-800; + background-color: $blue-100; + border: 1px solid $border-black-fade; + border-radius: 3px; + + p:last-child { + margin-bottom: 0; + } +} + +// Contain the flash messages +.flash-messages { + margin-bottom: $spacer-4; +} + +// Close button +.flash-close { + float: right; + padding: $spacer-3; + margin: -$spacer-3; + color: inherit; + text-align: center; + cursor: pointer; + // Undo ` + Flash message with close button. + +
+ <%= octicon("check") %> Flash success with an icon. +
+
+ <%= octicon("alert") %> Flash warning with an icon. +
+
+ Flash error inside a Box. +
+
+ Box body +
+ +``` + +## Boxes with icons +Use `Box-btn-octicon` with `btn-octicon` when you want the icon to maintain the same padding as other box elements. This selector offsets margin to ensure it lines up on the left and right sides of the box so you may need to add padding neighboring elements. + +```html +
+
+ Box body + +
+
+``` + +It's common to want to float icons to the far left or right and stop the `Box-title`from wrapping underneath. To do this you'll need to create a media object with utilities. Add `clearfix` to the surrounding div (this could be the header, body, or rows), add `overflow-hidden` to the title (or other text element), and float the icons as desired. + +```html +
+
+ +

A very long title that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's right

+
+
+ Box body +
+
+``` + +```html +
+
+ +

A very long paragraph that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's left

+
+
+``` + +## Box headers with counters +Use a counter with a background that works against the contrast of the box header. The default counter colors do not stand out well against the header background so we suggest using one of the following styles: + +Use `Counter--gray` for a counter with a gray background and dark gray text. + +```html +
+
+

+ Box title + 12 +

+
+
+ Box body +
+
+``` + +Use `Counter--gray-dark` for a counter with a dark gray background and white text. + +```html +
+
+

+ Box title + 12 +

+
+
+ Box body +
+
+``` + +## Form elements and buttons in boxes +To achieve different layouts when adding buttons or form elements to boxes we suggest you use utilities to achieve the layout you want. Here's some common examples: + +Use [flexbox utilities](../utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right. + +```html +
+
+

+ Box title +

+ +
+
+ Box body +
+
+``` + +A similar approach can be used for buttons with multiple lines of text within a row. + +```html +
+
+
+ Row title +
+ Description +
+
+ +
+
+
+ Row title +
+ Description +
+
+ +
+
+
+ Row title +
+ Description +
+
+ +
+
+``` +Using flexbox along with form, button, and link styles, you can create more complex box headers for things like bulk actions and sorting. + +```html +
+
+
+ +
+ +
+
+ Box body +
+
+``` + +You can put forms in boxes. Often form submission buttons are aligned to the bottom right of the form which you can do with `text-right` instead of using floats. + +```html +
+
+

+ Example form title +

+
+
+
+
+
+
+
+
+ +
+
+
+ + +
+
+
+``` + +When a box is all by itself centered on a page you can use [column widths](/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](../utilities/typography) instead of the built in box title styles. + +```html +
+
+
+

+ Example form +

+
+
+
+
+ +
+
+
+``` + +Box patterns can also be made with, and modified with [border utilities](../utilities/borders). + + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-box/index.scss b/packages/primer-box/index.scss new file mode 100644 index 0000000000..94a6fe4178 --- /dev/null +++ b/packages/primer-box/index.scss @@ -0,0 +1,2 @@ +@import "primer-support/index.scss"; +@import "./lib/box.scss"; diff --git a/packages/primer-box/lib/box.scss b/packages/primer-box/lib/box.scss new file mode 100644 index 0000000000..38e794c9b3 --- /dev/null +++ b/packages/primer-box/lib/box.scss @@ -0,0 +1,284 @@ +// Box +// Intended to replace simple-box, boxed-group, and table-list + +.Box { + background-color: $white; + border: $border-width $border-style $border-gray-dark; + border-radius: $border-radius; +} + +// Box padding density options +.Box--condensed { + line-height: $lh-condensed; + + .Box-header { + padding: $spacer-2 $spacer-3; + } + + .Box-body { + padding: $spacer-2 $spacer-3; + } + + .Box-footer { + padding: $spacer-2 $spacer-3; + } + + .Box-btn-octicon { + &.btn-octicon { + padding: $spacer-2 $spacer-3; + margin: (-$spacer-2) (-$spacer-3); + line-height: $lh-condensed; + } + } + + .Box-row { + padding: $spacer-2 $spacer-3; + } + +} + +.Box--spacious { + .Box-header { + padding: $spacer-4; + line-height: $lh-condensed; + } + + .Box-title { + font-size: $h3-size; + } + + .Box-body { + padding: $spacer-4; + } + + .Box-footer { + padding: $spacer-4; + } + + .Box-btn-octicon { + &.btn-octicon { + padding: $spacer-4; + margin: (-$spacer-4) (-$spacer-4); + } + } + + .Box-row { + padding: $spacer-4; + } + +} + +.Box-header { + padding: $spacer-3; + margin: -1px -1px 0 -1px; + background-color: $bg-gray; + border-color: $border-gray-dark; + border-style: $border-style; + border-width: $border-width; + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; +} + +.Box-title { + font-size: $body-font-size; + font-weight: $font-weight-bold; +} + +.Box-body { + padding: $spacer-3; + border-bottom: $border-width $border-style $border-gray; + + // Ensures bottom-border doesn't poke out when .Box-body used without box-footer + &:last-of-type { + margin-bottom: -1px; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; + } +} + +// Box rows +.Box-row { + padding: $spacer-3; + margin-top: -1px; + list-style-type: none; // To account for applying Box component to a list + border-top: $border-width $border-style $border-gray; + + &:first-of-type { + border-top-color: transparent; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + + &:last-of-type { + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; + } + + // Adds a blue vertical line to the left of the row + // For indicating a row item is unread + &.Box-row--unread, + // .unread to be deprecated with .Box-row-unread + &.unread { + box-shadow: 2px 0 0 $blue inset; + } + + &.navigation-focus { + // Focus styles for when drag icon + .Box-row--drag-button { + color: $text-blue; + cursor: grab; + opacity: 100; + } + + // Grabbing while row is dragged + &.is-dragging .Box-row--drag-button { + cursor: grabbing; + } + + // Row dragging styles + &.sortable-chosen { + background-color: $bg-gray-light; + } + + // Makes dragging row background gray + &.sortable-ghost { + background-color: $bg-gray; + + // Hides contents of row while dragging so row looks solid gray + .Box-row--drag-hide { + opacity: 0; + } + } + + } +} + +.Box-row--focus-gray { + &.navigation-focus { + background-color: $bg-gray; + } +} + +.Box-row--focus-blue { + &.navigation-focus { + background-color: $bg-blue-light; + } +} + +.Box-row--hover-gray { + &:hover { + background-color: $bg-gray; + } +} + +.Box-row--hover-blue { + &:hover { + background-color: $bg-blue-light; + } +} + +// Optional link style +// Makes links on mobile blue since they don't have hover state, +// and links are dark-gray with blue hover on desktop. +.Box-row-link { + @include breakpoint(md) { + + color: $text-gray-dark; + text-decoration: none; + + &:hover { + color: $text-blue; + text-decoration: none; + } + + } +} + +// Optional drag icon styles for reordering items +// Focus styles included in .Box-row above +.Box-row--drag-button { + opacity: 0; +} + +.Box-footer { + padding: $spacer-3; + margin-top: -1px; // prevents double border when used with .Box-body + border-top: $border-width $border-style $border-gray; +} + +// Option for a box with scrolling content +.Box--scrollable { + max-height: 324px; + overflow: scroll; +} + +// Box themes + +.Box--blue { + border-color: $border-blue-light; + + .Box-header { + background-color: $bg-blue-light; + border-color: $border-blue-light; + } + + .Box-body { + border-color: $border-blue-light; + } + + .Box-row { + border-color: $border-blue-light; + } + + .Box-footer { + border-color: $border-blue-light; + } +} + +// Applies and red border to the outside of the box, +// but not to the border separating rows. +.Box--danger { + border-color: $border-red; + + .Box-row { + &:first-of-type { + border-color: $border-red; + } + } + + .Box-body { + &:last-of-type { + border-color: $border-red; + } + } +} + +.Box-header--blue { + background-color: $bg-blue-light; + border-color: $border-blue-light; +} + +// Box row highlight themes + +.Box-row--yellow { + background-color: $yellow-100; +} + +.Box-row--blue { + background-color: $bg-blue-light; +} + +.Box-row--gray { + background-color: $bg-gray; +} + +//Box with btn-octicon +.Box-btn-octicon { + + // Increase specificity when btn-octicon is used because comes after .Box in the cascade + &.btn-octicon { + padding: $spacer-3 $spacer-3; + margin: (-$spacer-3) (-$spacer-3); + line-height: $lh-default; // override btn-octicon line-height + } +} diff --git a/packages/primer-box/package.json b/packages/primer-box/package.json new file mode 100644 index 0000000000..2a0c2d78a5 --- /dev/null +++ b/packages/primer-box/package.json @@ -0,0 +1,38 @@ +{ + "version": "2.1.4", + "name": "primer-box", + "description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "index.scss", + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-box", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss" + }, + "dependencies": { + "primer-support": "^4.0.3" + }, + "devDependencies": { + "primer-module-build": "*", + "stylelint": "*", + "stylelint-config-primer": "*" + }, + "keywords": [ + "primer", + "css", + "github", + "primercss" + ] +} diff --git a/packages/primer-breadcrumb/.gitignore b/packages/primer-breadcrumb/.gitignore new file mode 100644 index 0000000000..01a5e93c12 --- /dev/null +++ b/packages/primer-breadcrumb/.gitignore @@ -0,0 +1,3 @@ +node_modules +build +*.log diff --git a/packages/primer-breadcrumb/.npmignore b/packages/primer-breadcrumb/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/packages/primer-breadcrumb/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/packages/primer-breadcrumb/.postcss.json b/packages/primer-breadcrumb/.postcss.json new file mode 100644 index 0000000000..0d882f47f2 --- /dev/null +++ b/packages/primer-breadcrumb/.postcss.json @@ -0,0 +1,6 @@ +{ + "use": ["autoprefixer"], + "autoprefixer": { + "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11" + } +} diff --git a/packages/primer-breadcrumb/.stylelintrc.json b/packages/primer-breadcrumb/.stylelintrc.json new file mode 100644 index 0000000000..19028f9885 --- /dev/null +++ b/packages/primer-breadcrumb/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "stylelint-config-primer" + ] +} diff --git a/packages/primer-breadcrumb/CHANGELOG.md b/packages/primer-breadcrumb/CHANGELOG.md new file mode 100644 index 0000000000..246aec2ea2 --- /dev/null +++ b/packages/primer-breadcrumb/CHANGELOG.md @@ -0,0 +1,30 @@ +# v0.1.1 + + * bumping the version - Jon Rohan [github/github@4a72b25](https://github.com/github/github/commit/4a72b25) + * Pointing main js file to build - Jon Rohan [github/github@3575651](https://github.com/github/github/commit/3575651) + * don't change the versions yet - Jon Rohan [github/github@6bebcff](https://github.com/github/github/commit/6bebcff) + * Mark breadcrumbs as navigation ref: http://w3c.github.io/aria-practices/examples/breadcrumb/index.html - Mu-An Chiou [github/github@697312d](https://github.com/github/github/commit/697312d) + * Bumping version - Jon Rohan [github/github@df8b91c](https://github.com/github/github/commit/df8b91c) + * Cleaning up devDependencies versions and simplifying npm scripts - Jon Rohan [github/github@2c42571](https://github.com/github/github/commit/2c42571) + * Sorting and table objects. We also don't need homepage - Jon Rohan [github/github@798629d](https://github.com/github/github/commit/798629d) + * Removing duplicate headers - Jon Rohan [github/github@225cee1](https://github.com/github/github/commit/225cee1) + +# v0.1.0 + + * Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) + * update example markdown - Patrick Marsceill [github/github@601fe9d](https://github.com/github/github/commit/601fe9d) + * Clean this up - Patrick Marsceill [github/github@c858d66](https://github.com/github/github/commit/c858d66) + * refactor breadcrumb to be better - Patrick Marsceill [github/github@30b6eaa](https://github.com/github/github/commit/30b6eaa) + * Update the names in the README files - Patrick Marsceill [github/github@75fed58](https://github.com/github/github/commit/75fed58) + * Update names for npm publising - Patrick Marsceill [github/github@451f97a](https://github.com/github/github/commit/451f97a) + * Fix import path across all scss files - Patrick Marsceill [github/github@a566f31](https://github.com/github/github/commit/a566f31) + * Smart quote :( - Patrick Marsceill [github/github@3e116ad](https://github.com/github/github/commit/3e116ad) + * Breadcrumb docs - Patrick Marsceill [github/github@9547e46](https://github.com/github/github/commit/9547e46) + * Tweak breadcrumb spacing - Patrick Marsceill [github/github@b32a8b1](https://github.com/github/github/commit/b32a8b1) + * Add breadcrumb docs - Patrick Marsceill [github/github@40a1743](https://github.com/github/github/commit/40a1743) + * Tweak breadcrumb spacing and color - Patrick Marsceill [github/github@57fd94b](https://github.com/github/github/commit/57fd94b) + * Test data for breadcrumb docs - Patrick Marsceill [github/github@9db2182](https://github.com/github/github/commit/9db2182) + * Fix variable collisions and add basecoat to site to test sass compilation errors - Patrick Marsceill [github/github@c73eee3](https://github.com/github/github/commit/c73eee3) + * Remove basecoat - Patrick Marsceill [github/github@1b1503d](https://github.com/github/github/commit/1b1503d) + * prefix bc => marketing - Patrick Marsceill [github/github@04d509a](https://github.com/github/github/commit/04d509a) + * Add breadcrumbs - Patrick Marsceill [github/github@7edec21](https://github.com/github/github/commit/7edec21) \ No newline at end of file diff --git a/packages/primer-breadcrumb/LICENSE b/packages/primer-breadcrumb/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-breadcrumb/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-breadcrumb/README.md b/packages/primer-breadcrumb/README.md new file mode 100644 index 0000000000..0563466146 --- /dev/null +++ b/packages/primer-breadcrumb/README.md @@ -0,0 +1,47 @@ +# Primer Marketing CSS Breadcrumb Navigation + +[![npm version](http://img.shields.io/npm/v/primer-breadcrumb.svg)](https://www.npmjs.org/package/primer-breadcrumb) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Breadcrumb navigation for GitHub's marketing pages with parents / grandparents. + +This repository is a module of the full [primer-css][primer] repository. + +## Documentation + + + +Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that: + +- Are many levels deep on a site +- Do not have a section-level navigation +- May need the ability to quickly go back to the previous (parent) page + +#### Usage + +```html + +``` + + + +## License + +MIT © [GitHub](https://github.com/) + +[primer]: https://github.com/primer/primer +[primer-support]: https://github.com/primer/primer-support +[support]: https://github.com/primer/primer-support +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-breadcrumb/index.scss b/packages/primer-breadcrumb/index.scss new file mode 100644 index 0000000000..2ddf84da7b --- /dev/null +++ b/packages/primer-breadcrumb/index.scss @@ -0,0 +1,4 @@ +// support files +@import "primer-support/index.scss"; +@import "primer-marketing-support/index.scss"; +@import "./lib/breadcrumb.scss"; diff --git a/packages/primer-breadcrumb/lib/breadcrumb.scss b/packages/primer-breadcrumb/lib/breadcrumb.scss new file mode 100644 index 0000000000..0159e0156c --- /dev/null +++ b/packages/primer-breadcrumb/lib/breadcrumb.scss @@ -0,0 +1,19 @@ +.breadcrumb-item { + display: inline-block; + margin-left: -4px; + white-space: nowrap; + list-style: none; + + &::after { + padding-right: 0.5em; + padding-left: 0.5em; + color: $border-gray; + content: "/"; + } +} + +.breadcrumb-item-selected { + &::after { + content: none; + } +} diff --git a/packages/primer-breadcrumb/package.json b/packages/primer-breadcrumb/package.json new file mode 100644 index 0000000000..dace464ab0 --- /dev/null +++ b/packages/primer-breadcrumb/package.json @@ -0,0 +1,42 @@ +{ + "version": "0.1.3", + "name": "primer-breadcrumb", + "description": "Breadcrumb navigation for pages with parents / grandparents.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "build/build.css", + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-breadcrumb", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss" + }, + "dependencies": { + "primer-marketing-support": "^0.5.2", + "primer-support": "^4.0.3" + }, + "devDependencies": { + "primer-module-build": "*", + "stylelint": "*", + "stylelint-config-primer": "*" + }, + "keywords": [ + "breadcrumb", + "css", + "github", + "navigation", + "primer", + "primercss", + "style" + ] +} diff --git a/packages/primer-buttons/.gitignore b/packages/primer-buttons/.gitignore new file mode 100644 index 0000000000..01a5e93c12 --- /dev/null +++ b/packages/primer-buttons/.gitignore @@ -0,0 +1,3 @@ +node_modules +build +*.log diff --git a/packages/primer-buttons/.npmignore b/packages/primer-buttons/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/packages/primer-buttons/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/packages/primer-buttons/.postcss.json b/packages/primer-buttons/.postcss.json new file mode 100644 index 0000000000..0d882f47f2 --- /dev/null +++ b/packages/primer-buttons/.postcss.json @@ -0,0 +1,6 @@ +{ + "use": ["autoprefixer"], + "autoprefixer": { + "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11" + } +} diff --git a/packages/primer-buttons/.stylelintrc.json b/packages/primer-buttons/.stylelintrc.json new file mode 100644 index 0000000000..19028f9885 --- /dev/null +++ b/packages/primer-buttons/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "stylelint-config-primer" + ] +} diff --git a/packages/primer-buttons/CHANGELOG.md b/packages/primer-buttons/CHANGELOG.md new file mode 100644 index 0000000000..a9c45d5e67 --- /dev/null +++ b/packages/primer-buttons/CHANGELOG.md @@ -0,0 +1,104 @@ +# v1.0.0 + + * remove btn-outline-red - broccolini [github/github@0bebf02](https://github.com/github/github/commit/0bebf02) + * fix lint errors - broccolini [github/github@c520fa4](https://github.com/github/github/commit/c520fa4) + * update primer-core version number - broccolini [github/github@6846743](https://github.com/github/github/commit/6846743) + * more docs examples, restore gradients from @broccolini and then add additional overrides to prevent hover gradient from bleeding into active state - Mark Otto [github/github@c637891](https://github.com/github/github/commit/c637891) + * One more button redux - Mark Otto [github/github@0b7323a](https://github.com/github/github/commit/0b7323a) + * add inverse mixin for red button hover styles - broccolini [github/github@764c417](https://github.com/github/github/commit/764c417) + * btn fixes: - broccolini [github/github@d5c2110](https://github.com/github/github/commit/d5c2110) + * use variables for hidden text expander and other btn styles - broccolini [github/github@7706f4b](https://github.com/github/github/commit/7706f4b) + * Redo hover and disabled states - Mark Otto [github/github@10a29cf](https://github.com/github/github/commit/10a29cf) + * correct the mixin logic for the default button, and rematch some border styles - Mark Otto [github/github@37d1a95](https://github.com/github/github/commit/37d1a95) + * less electric blue - broccolini [github/github@5cbc253](https://github.com/github/github/commit/5cbc253) + * lighten border and darken gradient on default buttons - broccolini [github/github@9cfb1ed](https://github.com/github/github/commit/9cfb1ed) + * more grassy green - broccolini [github/github@44f8da5](https://github.com/github/github/commit/44f8da5) + * brighter blues - broccolini [github/github@ed1fa13](https://github.com/github/github/commit/ed1fa13) + * social count border - broccolini [github/github@bfccd55](https://github.com/github/github/commit/bfccd55) + * improve button styles: - broccolini [github/github@7a11abe](https://github.com/github/github/commit/7a11abe) + * remove line - Mark Otto [github/github@1c614af](https://github.com/github/github/commit/1c614af) + * ugh, move this to the other bundle - Mark Otto [github/github@b20f41d](https://github.com/github/github/commit/b20f41d) + * linting - Mark Otto [github/github@fe072d1](https://github.com/github/github/commit/fe072d1) + * try another disabled state - Mark Otto [github/github@95ea411](https://github.com/github/github/commit/95ea411) + * more linting - Mark Otto [github/github@9172515](https://github.com/github/github/commit/9172515) + * more simplification and cleanup of button styles - Mark Otto [github/github@a18b600](https://github.com/github/github/commit/a18b600) + * tighten up examples - Mark Otto [github/github@183559e](https://github.com/github/github/commit/183559e) + * rip out old code - Mark Otto [github/github@45cfc22](https://github.com/github/github/commit/45cfc22) + * more linting - Mark Otto [github/github@56fe624](https://github.com/github/github/commit/56fe624) + * rip out .btn-shadowed since it's unused - Mark Otto [github/github@9860c76](https://github.com/github/github/commit/9860c76) + * add a shorthand docs example - Mark Otto [github/github@b61ee2b](https://github.com/github/github/commit/b61ee2b) + * linting - Mark Otto [github/github@e198d03](https://github.com/github/github/commit/e198d03) + * tweak colors, tweak button focus/active styles - Mark Otto [github/github@a57e89e](https://github.com/github/github/commit/a57e89e) + * first pass at redoing buttons - Mark Otto [github/github@32bf290](https://github.com/github/github/commit/32bf290) + +# v0.4.2 + + * update version numbers for primer package with bold update - broccolini [github/github@5d3e089](https://github.com/github/github/commit/5d3e089) + +# v0.4.1 + + * More versions - Jon Rohan [github/github@e12ba2e](https://github.com/github/github/commit/e12ba2e) + * Pointing main js file to build - Jon Rohan [github/github@3575651](https://github.com/github/github/commit/3575651) + +# v0.4.0 + + * Removing needless disables - Jon Rohan [github/github@6233c40](https://github.com/github/github/commit/6233c40) + * update buttons version number - broccolini [github/github@6504e09](https://github.com/github/github/commit/6504e09) + * Make all href #url - Mu-An Chiou [github/github@27ba40c](https://github.com/github/github/commit/27ba40c) + * Add placeholder URL and aria-expanded - Mu-An Chiou [github/github@8f6b03d](https://github.com/github/github/commit/8f6b03d) + * Make sure :disabled state is different from normal state on .btn-link - Mu-An Chiou [github/github@3e17fe6](https://github.com/github/github/commit/3e17fe6) + * bump padding on social-count - broccolini [github/github@f12bd30](https://github.com/github/github/commit/f12bd30) + * Make padding on btn-large more normal - Patrick Marsceill [github/github@6db7bbe](https://github.com/github/github/commit/6db7bbe) + * Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) + * Separating out modules into primer-core and primer-product - Jon Rohan [github/github@ddf698c](https://github.com/github/github/commit/ddf698c) + +# v0.3.1 + + * Updating version - Jon Rohan [github/github@6bf5fe5](https://github.com/github/github/commit/6bf5fe5) + * Updating link to real primer-css repository - Jon Rohan [github/github@bbaedda](https://github.com/github/github/commit/bbaedda) + * Updating the modules stylelint - Jon Rohan [github/github@389609f](https://github.com/github/github/commit/389609f) + +# v0.3.0 + + * Bumping to a new version - Jon Rohan [github/github@ff32813](https://github.com/github/github/commit/ff32813) + * Make sure the modules build without error before publishing - Jon Rohan [github/github@57ac5e6](https://github.com/github/github/commit/57ac5e6) + * First part of genpopping all system font changes: remove typographic overrides for font-size, line-height, etc on global components - Mark Otto [github/github@6c50e2d](https://github.com/github/github/commit/6c50e2d) + * Adding documentation status to most of the modules - Jon Rohan [github/github@b97695c](https://github.com/github/github/commit/b97695c) + +# v0.2.3 + + * Publishing a new version - Jon Rohan [github/github@eed0e96](https://github.com/github/github/commit/eed0e96) + * Updating octicons to deprecate the use of :symbol - Jon Rohan [github/github@9eb0c63](https://github.com/github/github/commit/9eb0c63) + * Adding link to homepage in readme docs - Jon Rohan [github/github@633f421](https://github.com/github/github/commit/633f421) + * Removing some unnecessary lint plugins and using native - Jon Rohan [github/github@2ae0070](https://github.com/github/github/commit/2ae0070) + * including no-utility lint plugin - Jon Rohan [github/github@5cb86ed](https://github.com/github/github/commit/5cb86ed) + * Adding lint plugins for new config - Jon Rohan [github/github@7fb9613](https://github.com/github/github/commit/7fb9613) + +# v0.2.2 + + * Mentioning the build file - Jon Rohan [github/github@64ca4a7](https://github.com/github/github/commit/64ca4a7) + * Including build/build.css in distributed npm module - Jon Rohan [github/github@e4effbf](https://github.com/github/github/commit/e4effbf) + * Updating modules to run on prepublish to include build.css in distribution - Jon Rohan [github/github@5b573a0](https://github.com/github/github/commit/5b573a0) + * Re-ordering the docs to the bottom of the readme - Jon Rohan [github/github@9c1f291](https://github.com/github/github/commit/9c1f291) + * Updating the link - Jon Rohan [github/github@f67684b](https://github.com/github/github/commit/f67684b) + +# v0.2.1 + + * Bumping version to include postcss.json in npm - Jon Rohan [github/github@9e560ba](https://github.com/github/github/commit/9e560ba) + * Using stylelint to lint the modules instead of scss_lint - Jon Rohan [github/github@cb0b8fd](https://github.com/github/github/commit/cb0b8fd) + * Updating for stylelint instead of scss_lint - Jon Rohan [github/github@87a2c68](https://github.com/github/github/commit/87a2c68) + +# v0.2.0 + + * Cutting new version 0.2.0 - Jon Rohan [github/github@a6f6586](https://github.com/github/github/commit/a6f6586) + * Don't link requirements - Jon Rohan [github/github@7740e81](https://github.com/github/github/commit/7740e81) + * Updating the README with more detailed instructions - Jon Rohan [github/github@5dd7c34](https://github.com/github/github/commit/5dd7c34) + * Reorganize the module folders into a more flexible organization - Jon Rohan [github/github@5a07101](https://github.com/github/github/commit/5a07101) + * cleaning up the package.json files - Jon Rohan [github/github@77763a1](https://github.com/github/github/commit/77763a1) + * Adding npm version badges to readme - Jon Rohan [github/github@90b1871](https://github.com/github/github/commit/90b1871) + * Adding tavisci build badges to the readmes - Jon Rohan [github/github@1a6126f](https://github.com/github/github/commit/1a6126f) + +# v0.1.0 + + * Fixing sort lint - Jon Rohan [github/github@ba9ce3d](https://github.com/github/github/commit/ba9ce3d) + * Moving primer/primer buttons to a css module - Jon Rohan [github/github@39c07f3](https://github.com/github/github/commit/39c07f3) \ No newline at end of file diff --git a/packages/primer-buttons/LICENSE b/packages/primer-buttons/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-buttons/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-buttons/README.md b/packages/primer-buttons/README.md new file mode 100644 index 0000000000..f14e0f2155 --- /dev/null +++ b/packages/primer-buttons/README.md @@ -0,0 +1,258 @@ +# Primer CSS Buttons + +[![npm version](http://img.shields.io/npm/v/primer-buttons.svg)](https://www.npmjs.org/package/primer-buttons) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another. + +This repository is a module of the full [primer-css][primer-css] repository. + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-buttons` with this command. + +``` +$ npm install --save primer-buttons +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-buttons/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. + +``` +$ npm run build +``` + +## Documentation + + + +Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another. + +#### Buttons + +```html + + + + + +
+ + + + + +
+ + + + + +
+ + + + + +
+ + + + + +``` + +#### Default buttons + +Use the standard—yet classy—`.btn` for form actions and primary page actions. These are used extensively around the site. + +When using a ` +Link button +``` + +You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`. + +```html + + +``` + +#### Primary + +Primary buttons are green and are used to indicate the *primary* action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`. + +```html + + +``` + +#### Danger + +Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`. + +```html + + +``` + +#### Outline + +Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go. + +```html + + +``` + +#### Disabled state + +Disable ` +Disabled button +``` + +Similar styles are applied to primary, danger, and outline buttons: + +```html + +Disabled button +``` + +```html + +Disabled button +``` + +```html + +Disabled button +``` + +#### Block buttons + +Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text. + +```html +

+

+``` + +#### With counts + +You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button. + +**Be sure to clear the float added by the additional class.** + +```html +
+ + <%= octicon "eye" %> + Watch + + +
+``` + +You can also use the [counter](../../product/components/labels) component within buttons: + +```html + + + + + + + +``` + +#### Button groups + +Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically. + +```html +
+ + + +
+ +
+ + + +
+ +
+ + + +
+``` + +Add `.BtnGroup-form` to `
`s within `.BtnGroup`s for proper spacing and rounded corners. + +```html +
+ + + + + + +
+``` + +#### Hidden text button + +Use `.hidden-text-expander` to indicate and toggle hidden text. + +```html + + + +``` + +You can also make the expander appear inline by adding `.inline`. + + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-buttons/index.scss b/packages/primer-buttons/index.scss new file mode 100644 index 0000000000..7d70202deb --- /dev/null +++ b/packages/primer-buttons/index.scss @@ -0,0 +1,3 @@ +@import "primer-support/index.scss"; +@import "./lib/button.scss"; +@import "./lib/button-group.scss"; diff --git a/packages/primer-buttons/lib/button-group.scss b/packages/primer-buttons/lib/button-group.scss new file mode 100644 index 0000000000..cd69a3a50a --- /dev/null +++ b/packages/primer-buttons/lib/button-group.scss @@ -0,0 +1,79 @@ +// Button group +// +// A button group is a series of buttons laid out next to each other, all part +// of one visual button, but separated by rules to be separate. +.BtnGroup { + display: inline-block; + vertical-align: middle; + @include clearfix(); + + // Proper spacing for multiple button groups (a la, gollum editor) + + .BtnGroup, + + .btn { + margin-left: 5px; + } +} + +.BtnGroup-item { + position: relative; + float: left; + border-right-width: 0; + border-radius: 0; + + &:first-child { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + + &:last-child { + border-right-width: 1px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + + &.selected, + &:focus, + &:active, + &:hover { + border-right-width: 1px; + + + .BtnGroup-item, + + .BtnGroup-form .BtnGroup-item { + border-left-width: 0; + } + } +} + +.BtnGroup-form { + float: left; + + &:first-child .BtnGroup-item { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + + &:last-child .BtnGroup-item { + border-right-width: 1px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + + .BtnGroup-item { + border-right-width: 0; + border-radius: 0; + } + + &.selected, + &:focus, + &:active, + &:hover { + .BtnGroup-item { + border-right-width: 1px; + } + + + .BtnGroup-item, + + .BtnGroup-form .BtnGroup-item { + border-left-width: 0; + } + } +} diff --git a/packages/primer-buttons/lib/button.scss b/packages/primer-buttons/lib/button.scss new file mode 100644 index 0000000000..5b49316e05 --- /dev/null +++ b/packages/primer-buttons/lib/button.scss @@ -0,0 +1,204 @@ +// stylelint-disable selector-no-type, block-opening-brace-space-before, no-duplicate-selectors + +// Base button styles +.btn { + position: relative; + display: inline-block; + padding: 6px 12px; + font-size: $body-font-size; + font-weight: $font-weight-bold; + line-height: 20px; // Specifically not inherit our `` default + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + user-select: none; + background-repeat: repeat-x; + background-position: -1px -1px; + background-size: 110% 110%; + border: 1px solid transparentize($black, 0.8); + border-radius: 0.25em; + appearance: none; // Corrects inability to style clickable `input` types in iOS. + + i { + font-style: normal; + font-weight: 500; + opacity: 0.6; + } + + .octicon { + vertical-align: text-top; + } + + // Darken for just a tad more contrast against the button background + .Counter { + color: $gray-600; + text-shadow: none; + background-color: rgba($black, 0.1); + } + + &:hover { + text-decoration: none; + background-repeat: repeat-x; + } + + &:focus { + outline: 0; + } + + &:disabled, + &.disabled { + cursor: default; + // Repeat `background-position` because `:hover` + background-position: 0 0; + } + + &:active, + &.selected { + background-image: none; + } +} + +.btn { @include btn-solid($text-gray-dark, $gray-000, darken($gray-100, 2%)); } +.btn-primary { @include btn-solid($text-white, $green-400, $green-500); } +.btn-purple { @include btn-solid($text-white, lighten($purple-500, 5%), darken($purple-500, 5%)); } +.btn-blue { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); } +.btn-danger { @include btn-inverse($red-600, $gray-000, darken($gray-100, 2%)); } + +// Outline button +// +// For when we need a linky-action that's not too heavy in busier +// areas like conversation timelines. +.btn-outline { + @include btn-outline($text-blue); +} + +// Social button count +.btn-with-count { + float: left; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +// Minibutton overrides +// +// Tweak `line-height` to make them smaller. +.btn-sm { + padding: 3px 10px; + font-size: $font-size-small; + line-height: 20px; +} + +// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g,

+.btn-large { + padding: 0.75em 1.25em; + font-size: inherit; + border-radius: 6px; +} + +// Hidden text button +// +// Use `.hidden-text-expander` to indicate and expand hidden text. +.hidden-text-expander { + display: block; + + &.inline { + position: relative; + top: -1px; + display: inline-block; + margin-left: 5px; + line-height: 0; + } +} + +.hidden-text-expander a, +.ellipsis-expander { + display: inline-block; + height: 12px; + padding: 0 5px 5px; + font-size: 12px; + font-weight: $font-weight-bold; + line-height: 6px; + color: $gray-700; + text-decoration: none; + vertical-align: middle; + background: lighten($gray-300, 5%); + border: 0; + border-radius: 1px; + + &:hover { + text-decoration: none; + background-color: darken($gray-300, 4%); + } + + &:active { + color: $text-white; + background-color: $blue-400; + } +} + +// Social count bubble +// +// A container that is used for social bubbles counts. +.social-count { + float: left; + padding: 3px 10px; + font-size: $font-size-small; + font-weight: $font-weight-bold; + line-height: 20px; + color: $text-gray-dark; + vertical-align: middle; + background-color: $bg-white; + border: 1px solid transparentize($black, 0.8); // match with .btn + border-left: 0; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + + &:hover, + &:active { + text-decoration: none; + } + + &:hover { + color: $text-blue; + cursor: pointer; + } +} + +// Full-width button +// +// These buttons expand to the full width of their parent container +.btn-block { + display: block; + width: 100%; + text-align: center; +} + +// Radio buttons +// +// Buttons backed by radio or checkbox control. Requires the use of `.hidden` +// on the `input` to properly hide it. +.btn-link { + display: inline-block; + padding: 0; + font-size: inherit; + color: $text-blue; + text-decoration: none; + white-space: nowrap; + cursor: pointer; + user-select: none; + background-color: transparent; + border: 0; + appearance: none; // Corrects inability to style clickable `input` types in iOS. + + &:hover { + text-decoration: underline; + } + + &:disabled { + &, + &:hover { + color: rgba($gray-600, 0.5); + cursor: default; + } + } +} diff --git a/packages/primer-buttons/package.json b/packages/primer-buttons/package.json new file mode 100644 index 0000000000..f36b6f0ea7 --- /dev/null +++ b/packages/primer-buttons/package.json @@ -0,0 +1,40 @@ +{ + "version": "2.0.2", + "name": "primer-buttons", + "description": "A collection of buttons used for primary and secondary actions.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "index.scss", + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-buttons", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss" + }, + "dependencies": { + "primer-support": "^4.0.3" + }, + "devDependencies": { + "primer-module-build": "*", + "stylelint": "*", + "stylelint-config-primer": "*" + }, + "keywords": [ + "primer", + "css", + "github", + "primercss", + "buttons", + "styles" + ] +} diff --git a/packages/primer-cards/.gitignore b/packages/primer-cards/.gitignore new file mode 100644 index 0000000000..01a5e93c12 --- /dev/null +++ b/packages/primer-cards/.gitignore @@ -0,0 +1,3 @@ +node_modules +build +*.log diff --git a/packages/primer-cards/.npmignore b/packages/primer-cards/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/packages/primer-cards/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/packages/primer-cards/.postcss.json b/packages/primer-cards/.postcss.json new file mode 100644 index 0000000000..0d882f47f2 --- /dev/null +++ b/packages/primer-cards/.postcss.json @@ -0,0 +1,6 @@ +{ + "use": ["autoprefixer"], + "autoprefixer": { + "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11" + } +} diff --git a/packages/primer-cards/.stylelintrc.json b/packages/primer-cards/.stylelintrc.json new file mode 100644 index 0000000000..19028f9885 --- /dev/null +++ b/packages/primer-cards/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "stylelint-config-primer" + ] +} diff --git a/packages/primer-cards/CHANGELOG.md b/packages/primer-cards/CHANGELOG.md new file mode 100644 index 0000000000..f4eb8107c0 --- /dev/null +++ b/packages/primer-cards/CHANGELOG.md @@ -0,0 +1,31 @@ +# v0.1.2 + + * Bump all the version numbers for readme - Mu-An Chiou [github/github@a9d152f](https://github.com/github/github/commit/a9d152f) + * Fix all the travis badge URL - Mu-An Chiou [github/github@9cd6d84](https://github.com/github/github/commit/9cd6d84) + +# v0.1.1 + + * bumping the version - Jon Rohan [github/github@4a72b25](https://github.com/github/github/commit/4a72b25) + * Pointing main js file to build - Jon Rohan [github/github@3575651](https://github.com/github/github/commit/3575651) + * don't change the versions yet - Jon Rohan [github/github@6bebcff](https://github.com/github/github/commit/6bebcff) + * Bumping version - Jon Rohan [github/github@df8b91c](https://github.com/github/github/commit/df8b91c) + * Cleaning up devDependencies versions and simplifying npm scripts - Jon Rohan [github/github@2c42571](https://github.com/github/github/commit/2c42571) + * Sorting and table objects. We also don't need homepage - Jon Rohan [github/github@798629d](https://github.com/github/github/commit/798629d) + * Removing duplicate headers - Jon Rohan [github/github@225cee1](https://github.com/github/github/commit/225cee1) + +# v0.1.0 + + * Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) + * Update border radius for cards because it is not the same as box. - Patrick Marsceill [github/github@9dc19b3](https://github.com/github/github/commit/9dc19b3) + * fix a typo - Patrick Marsceill [github/github@24acfeb](https://github.com/github/github/commit/24acfeb) + * Update the names in the README files - Patrick Marsceill [github/github@75fed58](https://github.com/github/github/commit/75fed58) + * Update pathing on cards README - Patrick Marsceill [github/github@443f2e2](https://github.com/github/github/commit/443f2e2) + * Update names for npm publising - Patrick Marsceill [github/github@451f97a](https://github.com/github/github/commit/451f97a) + * Fix import path across all scss files - Patrick Marsceill [github/github@a566f31](https://github.com/github/github/commit/a566f31) + * RIP unused styles - Patrick Marsceill [github/github@31dc325](https://github.com/github/github/commit/31dc325) + * fix cards - Patrick Marsceill [github/github@a6beedf](https://github.com/github/github/commit/a6beedf) + * Add cards to docs - Sophie Shepherd [github/github@b421a08](https://github.com/github/github/commit/b421a08) + * Fix variable collisions and add basecoat to site to test sass compilation errors - Patrick Marsceill [github/github@c73eee3](https://github.com/github/github/commit/c73eee3) + * Remove basecoat - Patrick Marsceill [github/github@1b1503d](https://github.com/github/github/commit/1b1503d) + * prefix bc => marketing - Patrick Marsceill [github/github@04d509a](https://github.com/github/github/commit/04d509a) + * Cards - Patrick Marsceill [github/github@306cbfc](https://github.com/github/github/commit/306cbfc) \ No newline at end of file diff --git a/packages/primer-cards/LICENSE b/packages/primer-cards/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-cards/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-cards/README.md b/packages/primer-cards/README.md new file mode 100644 index 0000000000..1cdc843ea6 --- /dev/null +++ b/packages/primer-cards/README.md @@ -0,0 +1,58 @@ +# Primer Marketing CSS Cards + +[![npm version](http://img.shields.io/npm/v/primer-cards.svg)](https://www.npmjs.org/package/primer-cards) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Card-like containers to group semantically related content together on marketing websites at GitHub. + +This repository is a module of the full [primer-css][primer] repository. + +## Documentation + + + +Documentation & refactor coming very soon + + + + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-cards` with this command. + +``` +$ npm install --save primer-cards +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-cards/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` + +``` +$ npm run build +``` + +## License + +MIT © [GitHub](https://github.com/) + +[primer]: https://github.com/primer/primer +[primer-support]: https://github.com/primer/primer-support +[support]: https://github.com/primer/primer-support +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-cards/index.scss b/packages/primer-cards/index.scss new file mode 100644 index 0000000000..d5f037cb74 --- /dev/null +++ b/packages/primer-cards/index.scss @@ -0,0 +1,4 @@ +// support files +@import "primer-support/index.scss"; +@import "primer-marketing-support/index.scss"; +@import "./lib/cards.scss"; diff --git a/packages/primer-cards/lib/cards.scss b/packages/primer-cards/lib/cards.scss new file mode 100644 index 0000000000..269be5629a --- /dev/null +++ b/packages/primer-cards/lib/cards.scss @@ -0,0 +1,6 @@ +.card { + background-color: $white; + border: $border; + border-radius: 6px; + box-shadow: $box-shadow; +} diff --git a/packages/primer-cards/package.json b/packages/primer-cards/package.json new file mode 100644 index 0000000000..9a7ad6a0a6 --- /dev/null +++ b/packages/primer-cards/package.json @@ -0,0 +1,41 @@ +{ + "version": "0.1.4", + "name": "primer-cards", + "description": "Card-like containers to group semantically related content together on marketing websites at GitHub.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "build/build.css", + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-cards", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss" + }, + "dependencies": { + "primer-marketing-support": "^0.5.2", + "primer-support": "^4.0.3" + }, + "devDependencies": { + "primer-module-build": "*", + "stylelint": "*", + "stylelint-config-primer": "*" + }, + "keywords": [ + "cards", + "css", + "github", + "primer", + "primercss", + "style" + ] +} diff --git a/packages/primer-core/.gitignore b/packages/primer-core/.gitignore new file mode 100644 index 0000000000..0efecbd407 --- /dev/null +++ b/packages/primer-core/.gitignore @@ -0,0 +1,5 @@ +.DS_Store +.sass-cache +node_modules +build +*.log diff --git a/packages/primer-core/.npmignore b/packages/primer-core/.npmignore new file mode 100644 index 0000000000..1cda54be93 --- /dev/null +++ b/packages/primer-core/.npmignore @@ -0,0 +1 @@ +*.yml diff --git a/packages/primer-core/CHANGELOG.md b/packages/primer-core/CHANGELOG.md new file mode 100644 index 0000000000..02a171b798 --- /dev/null +++ b/packages/primer-core/CHANGELOG.md @@ -0,0 +1,3 @@ +# 1.0.0 + +- Grouping primer modules into core diff --git a/packages/primer-core/LICENSE b/packages/primer-core/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-core/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-core/README.md b/packages/primer-core/README.md new file mode 100644 index 0000000000..238e3c1113 --- /dev/null +++ b/packages/primer-core/README.md @@ -0,0 +1,48 @@ +# Primer Core + +[![npm version](http://img.shields.io/npm/v/primer-core.svg)](https://www.npmjs.org/package/primer-core) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Primer core is one of 3 meta-packages that belong to the Primer CSS framework. Primer core contains packages that are shared between GitHub product and marketing websites. + +This repository is a compilation of [several CSS packages](https://github.com/primer/primer-css). You can break it down into smaller sections using npm. + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-css` with this command. **You must have npm >=3.0 installed to be able to satisfy the dependency paths** + +``` +$ npm install --save primer-core +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-core/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **CSS** version of this module, an npm script is included that will output a CSS version to `build/build.css` The built CSS file is also included in the npm package. + +``` +$ npm run build +``` + +## Documentation + +You can read more about primer in the [docs][docs]. + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-core/index.scss b/packages/primer-core/index.scss new file mode 100644 index 0000000000..7ac466d611 --- /dev/null +++ b/packages/primer-core/index.scss @@ -0,0 +1,25 @@ +/*! + * Primer-core + * http://primercss.io + * + * Released under MIT license. Copyright 2015 GitHub, Inc. + */ + +// Primer master file +// +// Imports all Primer files in their intended order for easy mass-inclusion. +// Should you need specific files, you can easily use separate `@import`s. + +// Global requirements +@import "primer-support/index.scss"; +@import "primer-base/index.scss"; +@import "primer-utilities/index.scss"; + +@import "primer-tooltips/index.scss"; +@import "primer-box/index.scss"; +@import "primer-buttons/index.scss"; +@import "primer-forms/index.scss"; +@import "primer-layout/index.scss"; +@import "primer-navigation/index.scss"; +@import "primer-table-object/index.scss"; +@import "primer-truncate/index.scss"; diff --git a/packages/primer-core/package.json b/packages/primer-core/package.json new file mode 100644 index 0000000000..df3403d4d8 --- /dev/null +++ b/packages/primer-core/package.json @@ -0,0 +1,39 @@ +{ + "version": "4.0.1", + "name": "primer-core", + "description": "Primer CSS's core modules", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "build/build.css", + "main": "build/index.js", + "files": [ + "index.scss", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-core", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build" + }, + "dependencies": { + "primer-base": "^0.4.0", + "primer-box": "^2.1.4", + "primer-buttons": "^2.0.2", + "primer-forms": "^1.0.9", + "primer-layout": "^1.0.1", + "primer-navigation": "^1.0.2", + "primer-support": "^4.0.3", + "primer-table-object": "^1.0.5", + "primer-tooltips": "^0.5.6", + "primer-truncate": "^0.3.4", + "primer-utilities": "^4.3.1" + }, + "devDependencies": { + "primer-module-build": "*" + } +} diff --git a/packages/primer-css/CHANGELOG.md b/packages/primer-css/CHANGELOG.md new file mode 100644 index 0000000000..79a8e622e2 --- /dev/null +++ b/packages/primer-css/CHANGELOG.md @@ -0,0 +1,26 @@ +# HEAD + +# 4.4.0 + +- Adding primer-marketing module to primer + +# 4.3.0 + +- Using primer-core and primer-product modules + +# 4.1.0 + +- Added: [primer-markdown](https://github.com/primer/markdown) to the build +- Fixes: Pointing "style" package.json to `build/build.css` file. + +# 4.0.2 + +- Added npm build scripts to add `build/build.css` to the npm package + +# 4.0.1 + +- Fixed: missing primer-layout from build + +# 4.0.0 + +- Whole new npm build system, pulling in the code from separate component repos diff --git a/packages/primer-css/LICENSE b/packages/primer-css/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-css/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-css/README.md b/packages/primer-css/README.md new file mode 100644 index 0000000000..3af90c9335 --- /dev/null +++ b/packages/primer-css/README.md @@ -0,0 +1,48 @@ +# Primer CSS + +[![npm version](http://img.shields.io/npm/v/primer-css.svg)](https://www.npmjs.org/package/primer-css) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Primer is the CSS framework that powers GitHub's front-end design. Primer CSS 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. + +This repository is a compilation of [several CSS modules](https://github.com/primer). + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `Primer-CSS` with this command. + +``` +$ npm install --save primer-css +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-css/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **CSS** version of this module, a npm script is included that will output a CSS version to `build/build.css` The built CSS file is also included in the npm package. + +``` +$ npm run build +``` + +## Documentation + +You can read more about primer in the [docs][docs]. + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/index.scss b/packages/primer-css/index.scss similarity index 100% rename from index.scss rename to packages/primer-css/index.scss diff --git a/packages/primer-css/package.json b/packages/primer-css/package.json new file mode 100644 index 0000000000..6b9d40bba5 --- /dev/null +++ b/packages/primer-css/package.json @@ -0,0 +1,61 @@ +{ + "version": "7.0.0-rc.2", + "name": "primer-css", + "description": "Primer is the CSS framework that powers GitHub's front-end design. Primer-css 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.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "build/build.css", + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-css", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build" + }, + "dependencies": { + "primer-alerts": "^1.1.4", + "primer-avatars": "^0.4.8", + "primer-base": "^0.4.0", + "primer-blankslate": "^0.3.7", + "primer-box": "^2.1.4", + "primer-breadcrumb": "^0.1.3", + "primer-buttons": "^2.0.2", + "primer-cards": "^0.1.4", + "primer-core": "^4.0.1", + "primer-forms": "^1.0.9", + "primer-labels": "^1.1.2", + "primer-layout": "^1.0.1", + "primer-markdown": "^3.3.9", + "primer-marketing": "^4.0.1", + "primer-marketing-support": "^0.5.2", + "primer-marketing-type": "^0.2.2", + "primer-marketing-utilities": "^0.1.6", + "primer-navigation": "^1.0.2", + "primer-page-headers": "^0.1.3", + "primer-page-sections": "^0.1.3", + "primer-product": "^4.0.1", + "primer-support": "^4.0.3", + "primer-table-object": "^1.0.5", + "primer-tables": "^0.1.4", + "primer-tooltips": "^0.5.6", + "primer-truncate": "^0.3.4", + "primer-utilities": "^4.3.1" + }, + "devDependencies": { + "primer-module-build": "*" + }, + "keywords": [ + "primer", + "css", + "github", + "primercss" + ] +} diff --git a/packages/primer-forms/.gitignore b/packages/primer-forms/.gitignore new file mode 100644 index 0000000000..01a5e93c12 --- /dev/null +++ b/packages/primer-forms/.gitignore @@ -0,0 +1,3 @@ +node_modules +build +*.log diff --git a/packages/primer-forms/.npmignore b/packages/primer-forms/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/packages/primer-forms/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/packages/primer-forms/.postcss.json b/packages/primer-forms/.postcss.json new file mode 100644 index 0000000000..0d882f47f2 --- /dev/null +++ b/packages/primer-forms/.postcss.json @@ -0,0 +1,6 @@ +{ + "use": ["autoprefixer"], + "autoprefixer": { + "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11" + } +} diff --git a/packages/primer-forms/.stylelintrc.json b/packages/primer-forms/.stylelintrc.json new file mode 100644 index 0000000000..19028f9885 --- /dev/null +++ b/packages/primer-forms/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "stylelint-config-primer" + ] +} diff --git a/packages/primer-forms/CHANGELOG.md b/packages/primer-forms/CHANGELOG.md new file mode 100644 index 0000000000..b96fa3b889 --- /dev/null +++ b/packages/primer-forms/CHANGELOG.md @@ -0,0 +1,123 @@ +# v1.0.6 + + * Bump all the version numbers for readme - Mu-An Chiou [github/github@a9d152f](https://github.com/github/github/commit/a9d152f) + * Fix all the travis badge URL - Mu-An Chiou [github/github@9cd6d84](https://github.com/github/github/commit/9cd6d84) + +# v1.0.5 + + * @muan review on changelog and package.json - pifafu [github/github@96e78ad](https://github.com/github/github/commit/96e78ad) + +# v1.0.4 + + * Bump version again - Mu-An Chiou [github/github@026744a](https://github.com/github/github/commit/026744a) + +# v1.0.3 + + * update variables in forms and bump version - broccolini [github/github@bd52621](https://github.com/github/github/commit/bd52621) + +# v1.0.2 + + * update variable name and bump version - broccolini [github/github@2777e1e](https://github.com/github/github/commit/2777e1e) + * update border names in form group - broccolini [github/github@c5ed399](https://github.com/github/github/commit/c5ed399)2 + +# v1.0.1 + + +# v1.0.0 + + * remove unrelated changes - Mark Otto [github/github@40855c4](https://github.com/github/github/commit/40855c4) + * update primer-core version number - broccolini [github/github@6846743](https://github.com/github/github/commit/6846743) + * update form validation color variables - broccolini [github/github@c0ce84b](https://github.com/github/github/commit/c0ce84b) + * replace instances of #ddd with variable in primer-core - broccolini [github/github@4a95523](https://github.com/github/github/commit/4a95523) + * update border variable - broccolini [github/github@2fb7a3e](https://github.com/github/github/commit/2fb7a3e) + * update new repo colors - broccolini [github/github@40aeda5](https://github.com/github/github/commit/40aeda5) + * redo focus of comment styles - Mark Otto [github/github@3f1c99c](https://github.com/github/github/commit/3f1c99c) + * deprecate flash-text variable - broccolini [github/github@b2ae205](https://github.com/github/github/commit/b2ae205) + * replace light gray hex refs with new variable - broccolini [github/github@8d5acdc](https://github.com/github/github/commit/8d5acdc) + * update yellows everywhere - broccolini [github/github@eef13c9](https://github.com/github/github/commit/eef13c9) + +# v0.7.3 + + * Rev package number - Patrick Marsceill [github/github@a0ec34d](https://github.com/github/github/commit/a0ec34d) + * Add aria-live for accessability and update docs - Patrick Marsceill [github/github@913473c](https://github.com/github/github/commit/913473c) + * Make form-radio-details -> form-checkbox-details to match existing - Patrick Marsceill [github/github@5be1795](https://github.com/github/github/commit/5be1795) + +# v0.7.2 + + * update version numbers for primer package with bold update - broccolini [github/github@5d3e089](https://github.com/github/github/commit/5d3e089) + +# v0.7.1 + + * More versions - Jon Rohan [github/github@e12ba2e](https://github.com/github/github/commit/e12ba2e) + * Pointing main js file to build - Jon Rohan [github/github@3575651](https://github.com/github/github/commit/3575651) + +# v0.7.0 + + * updating versions after running version script - broccolini [github/github@61b8c6f](https://github.com/github/github/commit/61b8c6f) + * Fix alignment of features box in repo settings - pifafu [github/github@499abb6](https://github.com/github/github/commit/499abb6) + * Add many label and ids and aria to form controls - Mu-An Chiou [github/github@9bcb1dc](https://github.com/github/github/commit/9bcb1dc) + +# v0.6.0 + + * Cutting new versions of primer modules - Jon Rohan [github/github@157f5ab](https://github.com/github/github/commit/157f5ab) + * Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) + * Separating out modules into primer-core and primer-product - Jon Rohan [github/github@ddf698c](https://github.com/github/github/commit/ddf698c) + +# v0.5.0 + + * Updating version - Jon Rohan [github/github@6bf5fe5](https://github.com/github/github/commit/6bf5fe5) + * Updating link to real primer-css repository - Jon Rohan [github/github@bbaedda](https://github.com/github/github/commit/bbaedda) + * Updating the modules stylelint - Jon Rohan [github/github@389609f](https://github.com/github/github/commit/389609f) + * move over the form-checkbox input alignment change - Mark Otto [github/github@962e653](https://github.com/github/github/commit/962e653) + * revert these changes - Jon Rohan [github/github@5ad3478](https://github.com/github/github/commit/5ad3478) + * dropping some browser hacks - Jon Rohan [github/github@2969e8a](https://github.com/github/github/commit/2969e8a) + +# v0.4.0 + + * Bumping to a new version - Jon Rohan [github/github@ff32813](https://github.com/github/github/commit/ff32813) + * Make sure the modules build without error before publishing - Jon Rohan [github/github@57ac5e6](https://github.com/github/github/commit/57ac5e6) + * Rename spacer variables - Sophie Shepherd [github/github@e5ffa47](https://github.com/github/github/commit/e5ffa47) + * First part of genpopping all system font changes: remove typographic overrides for font-size, line-height, etc on global components - Mark Otto [github/github@6c50e2d](https://github.com/github/github/commit/6c50e2d) + * Adding documentation status to most of the modules - Jon Rohan [github/github@b97695c](https://github.com/github/github/commit/b97695c) + * update forms docs to include kitchen sink examples for testing - Mark Otto [github/github@80a7094](https://github.com/github/github/commit/80a7094) + +# v0.3.0 + + * Publishing a new version - Jon Rohan [github/github@eed0e96](https://github.com/github/github/commit/eed0e96) + * Updating octicons to deprecate the use of :symbol - Jon Rohan [github/github@9eb0c63](https://github.com/github/github/commit/9eb0c63) + * It should be on the desktop site - Pat Nakajima [github/github@5080f9d](https://github.com/github/github/commit/5080f9d) + * Adding link to homepage in readme docs - Jon Rohan [github/github@633f421](https://github.com/github/github/commit/633f421) + * Removing some unnecessary lint plugins and using native - Jon Rohan [github/github@2ae0070](https://github.com/github/github/commit/2ae0070) + * including no-utility lint plugin - Jon Rohan [github/github@5cb86ed](https://github.com/github/github/commit/5cb86ed) + * Adding lint plugins for new config - Jon Rohan [github/github@7fb9613](https://github.com/github/github/commit/7fb9613) + +# v0.2.2 + + * Mentioning the build file - Jon Rohan [github/github@64ca4a7](https://github.com/github/github/commit/64ca4a7) + * Including build/build.css in distributed npm module - Jon Rohan [github/github@e4effbf](https://github.com/github/github/commit/e4effbf) + * Updating modules to run on prepublish to include build.css in distribution - Jon Rohan [github/github@5b573a0](https://github.com/github/github/commit/5b573a0) + * Re-ordering the docs to the bottom of the readme - Jon Rohan [github/github@9c1f291](https://github.com/github/github/commit/9c1f291) + * Updating the link - Jon Rohan [github/github@f67684b](https://github.com/github/github/commit/f67684b) + +# v0.2.1 + + * Bumping version to include postcss.json in npm - Jon Rohan [github/github@9e560ba](https://github.com/github/github/commit/9e560ba) + * Using stylelint to lint the modules instead of scss_lint - Jon Rohan [github/github@cb0b8fd](https://github.com/github/github/commit/cb0b8fd) + * Updating for stylelint instead of scss_lint - Jon Rohan [github/github@87a2c68](https://github.com/github/github/commit/87a2c68) + +# v0.2.0 + + * Cutting new version 0.2.0 - Jon Rohan [github/github@a6f6586](https://github.com/github/github/commit/a6f6586) + * Don't link requirements - Jon Rohan [github/github@7740e81](https://github.com/github/github/commit/7740e81) + * Updating the README with more detailed instructions - Jon Rohan [github/github@5dd7c34](https://github.com/github/github/commit/5dd7c34) + * Reorganize the module folders into a more flexible organization - Jon Rohan [github/github@5a07101](https://github.com/github/github/commit/5a07101) + * cleaning up the package.json files - Jon Rohan [github/github@77763a1](https://github.com/github/github/commit/77763a1) + * Adding npm version badges to readme - Jon Rohan [github/github@90b1871](https://github.com/github/github/commit/90b1871) + * Adding tavisci build badges to the readmes - Jon Rohan [github/github@1a6126f](https://github.com/github/github/commit/1a6126f) + +# v0.1.0 + + * Updating support dependency versions - Jon Rohan [github/github@76d97ec](https://github.com/github/github/commit/76d97ec) + * Disable lint - Jon Rohan [github/github@877f9e7](https://github.com/github/github/commit/877f9e7) + * Adding form-validation from old modules in github/github - Jon Rohan [github/github@aa4fcbf](https://github.com/github/github/commit/aa4fcbf) + * Moving forms from primer/primer - Jon Rohan [github/github@edd4f62](https://github.com/github/github/commit/edd4f62) \ No newline at end of file diff --git a/packages/primer-forms/LICENSE b/packages/primer-forms/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-forms/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-forms/README.md b/packages/primer-forms/README.md new file mode 100644 index 0000000000..8ff8b153a9 --- /dev/null +++ b/packages/primer-forms/README.md @@ -0,0 +1,347 @@ +# Primer CSS Forms + +[![npm version](http://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Style individual form controls and utilize common layouts. + +This repository is a module of the full [primer-css][primer-css] repository. + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command. + +``` +$ npm install --save primer-forms +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-forms/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. + +``` +$ npm run build +``` + +## Documentation + + + +Style individual form controls and utilize common layouts. + +- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `
`s, WebKit validation bubbles, and most textual ``s. +- Specific types of textual ``s are styled automatically, but `.form-control` is available should you need it. +- Always declare a `type` on your ` + + + + +

+ +

+ + + + +

+``` + +#### Example form + +Form controls in Primer currently have no basic layout specified (this is by design). You'll need to use `
`s, `
`s, or other elements and styles to rearrange them. + +```html +
+ + + + + + + + + + + + +
+``` + +#### Form contrast + +Textual form controls have a white background by default. You can change this to a light gray with `.input-contrast`. + +```html +
+ + +
+``` + +#### Sizing + +Make inputs smaller, larger, or full-width with an additional class. + +##### Small + +```html +
+ +
+``` + +##### Large + +```html +
+ +
+``` + +##### Block + +```html +
+ +
+``` + +##### Hide webkit's contact info autofill icon +Webkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon. + +```html +
+ +
+``` + +#### Selects + +Primer adds light `height` and `vertical-align` styles to ` + + + + + + + + + +``` + +##### Small + +Use the `.select-sm` class to resize both default and custom ` + + + + + + + + + + +``` + +#### Form groups + +```html +
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+
+``` + +#### Form group validation + +Convey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `
` to start. Then, house your error messaging in an additional `
` with either `.error` or `.warning`. + +```html +
+
+
+
+
This example input has an error.
+
+
+
+
+
+
This example input has a warning.
+
+
+``` + +#### Checkboxes and radios + +Utilities to spice up the alignment and styling of checkbox and radio controls. + +```html +
+
+ +

+ This will do insanely awesome and amazing things! +

+
+
+``` + +You may also add emphasis to the label: + +```html +
+
+ +
+
+``` + +##### Show / hide content based on a checkbox or radio button state + +Content that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live="polite"` attribute on the parent label for added content to be announced when displayed. + +```html +
+
+ +
+
+ +
+
+``` + +#### Input group + +Attached an input and button to one another. + +```html +
+
+ + + + +
+
+``` + +#### Form actions + +Align buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you. + +```html +
+ + +
+``` + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-forms/index.scss b/packages/primer-forms/index.scss new file mode 100644 index 0000000000..540674802d --- /dev/null +++ b/packages/primer-forms/index.scss @@ -0,0 +1,5 @@ +@import "primer-support/index.scss"; +@import "./lib/form-control.scss"; +@import "./lib/form-select.scss"; +@import "./lib/form-group.scss"; +@import "./lib/form-validation.scss"; diff --git a/packages/primer-forms/lib/form-control.scss b/packages/primer-forms/lib/form-control.scss new file mode 100644 index 0000000000..ee1a71ab59 --- /dev/null +++ b/packages/primer-forms/lib/form-control.scss @@ -0,0 +1,211 @@ +// Needs refactoring +// stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors +// stylelint-disable selector-no-type +// Base form controls +// +// Overrides for common inputs for easier styling. + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +label { + font-weight: $font-weight-bold; +} + +.form-control, +.form-select { + min-height: 34px; + padding: 6px 8px; + font-size: $body-font-size; + line-height: 20px; + color: $text-gray-dark; + vertical-align: middle; + background-color: $bg-white; + background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc) + background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically. + border: 1px solid $border-gray-dark; + border-radius: 3px; + outline: none; + box-shadow: $form-control-shadow; + + &.focus, + &:focus { + border-color: $blue-400; + outline: none; + box-shadow: $form-control-shadow, $btn-input-focus-shadow; + } +} + +// Inputs with contrast for easy light gray backgrounds against white. +.input-contrast { + background-color: $bg-gray-light; + + &:focus { background-color: $bg-white; } +} + +// Custom styling for HTML5 validation bubbles (WebKit only) +::placeholder { + color: $text-gray-light; +} + +// Mini inputs, to match .minibutton +.input-sm { + min-height: 28px; + padding-top: 3px; + padding-bottom: 3px; + font-size: $font-size-small; + line-height: 20px; +} + +// Large inputs +.input-lg { + padding: 4px 10px; + font-size: 16px; +} + +// Full-width inputs +.input-block { + display: block; + width: 100%; +} + +// Inputs with monospace text +.input-monospace { + font-family: $mono-font; +} + +// Hide the icon that tries to autofill contact info in webkit +.input-hide-webkit-autofill { + &::-webkit-contacts-auto-fill-button { + position: absolute; + right: 0; + display: none !important; + pointer-events: none; + visibility: hidden; + } +} + +// Checkboxes and Radiobuttons +// +// For checkboxes and radio button selections. +.form-checkbox { + padding-left: 20px; + margin: 15px 0; + vertical-align: middle; + + label { + em.highlight { + position: relative; + left: -4px; + padding: 2px 4px; + font-style: normal; + background: $yellow-100; + border-radius: 3px; + } + } + + input[type=checkbox], + input[type=radio] { + float: left; + margin: 5px 0 0 -20px; + vertical-align: middle; + } + + .note { + display: block; + margin: 0; + font-size: 12px; + font-weight: normal; + color: $gray-600; + } +} + +.form-checkbox-details { + display: none; +} + +.form-checkbox-details-trigger { + &:checked { + ~ * .form-checkbox-details, // child of sibling + ~ .form-checkbox-details { // or sibling + display: block; + } + } +} + +// Field groups +// +// Wrap field groups in `` to lay them out horizontally - great for +// the top of pages with autosave. +.hfields { + margin: 15px 0; + @include clearfix; + + .form-group { + float: left; + margin: 0 30px 0 0; + + dt { + label { + display: inline-block; + margin: 5px 0 0; + color: $gray-600; + } + + img { + position: relative; + top: -2px; + } + } + } + + .btn { + float: left; + margin: 28px 25px 0 -20px; + } + + .form-select { margin-top: 5px; } +} + +// Hide the up/down buttons in in the login form, the +// input is used for two-factor auth codes, type="number" makes it more usable +// on phones +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + margin: 0; + appearance: none; +} + +// Input groups + +.form-actions { + @include clearfix; + + .btn { + float: right; + + + .btn { + margin-right: 5px; + } + } +} + +.form-warning { + padding: 8px 10px; + margin: 10px 0; + font-size: 14px; + color: $yellow-900; + background: $yellow-100; + border: 1px solid $border-yellow; + border-radius: 3px; + + p { + margin: 0; + line-height: 1.5; + } + + a { font-weight: $font-weight-bold; } +} diff --git a/packages/primer-forms/lib/form-group.scss b/packages/primer-forms/lib/form-group.scss new file mode 100644 index 0000000000..b37bbb2fa6 --- /dev/null +++ b/packages/primer-forms/lib/form-group.scss @@ -0,0 +1,215 @@ +// Form groups +// +// Typical form groups - `` with a `
` containing the label and +// `
containing the form elements. +// stylelint-disable selector-max-compound-selectors +// stylelint-disable selector-no-type +.form-group { + margin: 15px 0; + + // Text fields + .form-control { + width: 440px; + max-width: 100%; + margin-right: 5px; + background-color: $bg-gray-light; + + &:focus { + background-color: $bg-white; + } + + &.shorter { width: 130px; } + + &.short { width: 250px; } + + &.long { width: 100%; } + } + + // Textarea + // stylelint-disable selector-no-qualifying-type + textarea.form-control { + width: 100%; + height: 200px; + min-height: 200px; + + &.short { + height: 50px; + min-height: 50px; + } + } + // stylelint-enable selector-no-qualifying-type + + // The Label + dt { + margin: 0 0 6px; + } + + label { + position: relative; + } + + &.flattened dt { + float: left; + margin: 0; + line-height: 32px; + } + + &.flattened dd { + line-height: 32px; + } + + // + // Form Elements + // + // stylelint-disable selector-no-qualifying-type + dd { + h4 { + margin: 4px 0 0; + + &.is-error { color: $text-red; } + + &.is-success { color: $text-green; } + + + .note { + margin-top: 0; + } + } + } + // stylelint-enable selector-no-qualifying-type + + // + // Variants + // + + &.required { + dt label::after { + padding-left: 5px; + color: $text-red; + content: "*"; + } + } + + // Form AJAX states + // + // Form fields that need feedback for AJAX loading, success + // states and errored states. + .success, + .error, + .indicator { + display: none; + font-size: 12px; + font-weight: $font-weight-bold; + } + + &.loading { + opacity: 0.5; + + .indicator { + display: inline; + } + + .spinner { + display: inline-block; + vertical-align: middle; + } + } + + &.successful { + .success { + display: inline; + color: $text-green; + } + } + + // Form validation + // + // Our inline errors + + &.warn, + &.errored { + .warning, + .error { + position: absolute; + z-index: 10; + display: block; // Show up in errored/warn state + max-width: 450px; // Keep our long errors readable + padding: 5px 8px; + margin: $spacer-1 0 0; + font-size: 13px; + font-weight: normal; + border-style: solid; + border-width: 1px; + border-radius: 3px; + + &::after, + &::before { + position: absolute; + bottom: 100%; + left: 10px; + z-index: 15; + width: 0; + height: 0; + pointer-events: none; + content: " "; + border: solid transparent; + } + + &::after { + border-width: 5px; + } + + &::before { + margin-left: -1px; + border-width: 6px; + } + } + } + + &.warn { + .warning { + color: $yellow-900; + background-color: $yellow-100; + border-color: $border-yellow; + + &::after { + border-bottom-color: $yellow-100; + } + + &::before { + border-bottom-color: $border-yellow; + } + } + } + + &.errored { + label { + color: $text-red; + } + + .error { + color: $red-900; + background-color: $bg-red-light; + border-color: $border-red-light; + + &::after { + border-bottom-color: $bg-red-light; + } + + &::before { + border-bottom-color: $border-red-light; + } + } + } +} + +.note { + min-height: 17px; + margin: 4px 0 2px; + font-size: 12px; + color: $text-gray; + + .spinner { + margin-right: 3px; + vertical-align: middle; + } +} diff --git a/packages/primer-forms/lib/form-select.scss b/packages/primer-forms/lib/form-select.scss new file mode 100644 index 0000000000..2f43d8df65 --- /dev/null +++ b/packages/primer-forms/lib/form-select.scss @@ -0,0 +1,38 @@ +// Custom select +// +// Apply `.select` to any ` + <%= octicon "search", :class => "subnav-search-icon" %> +
+ +``` + + +You can also use a `subnav-search-context` to display search help in a select menu. + +```html +
+ +
+ + +
+
+ + <%= octicon "search", :class => "subnav-search-icon" %> +
+
+``` + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-navigation/index.scss b/packages/primer-navigation/index.scss new file mode 100644 index 0000000000..7f9db61939 --- /dev/null +++ b/packages/primer-navigation/index.scss @@ -0,0 +1,6 @@ +@import "primer-support/index.scss"; +// Navigation +@import "./lib/menu.scss"; +@import "./lib/tabnav.scss"; +@import "./lib/filter-list.scss"; +@import "./lib/subnav.scss"; diff --git a/packages/primer-navigation/lib/filter-list.scss b/packages/primer-navigation/lib/filter-list.scss new file mode 100644 index 0000000000..6bdb8b1054 --- /dev/null +++ b/packages/primer-navigation/lib/filter-list.scss @@ -0,0 +1,62 @@ +// Filters list +// +// A vertical list of filters. +.filter-list { + list-style-type: none; + + &.small .filter-item { + padding: 4px 10px; + margin: 0 0 2px; + font-size: 12px; + } + + &.pjax-active .filter-item { + color: $text-gray; + background-color: transparent; + + &.pjax-active { + color: $text-white; + background-color: $bg-blue; + } + } +} + +.filter-item { + position: relative; + display: block; + padding: 8px 10px; + margin-bottom: 5px; + overflow: hidden; + font-size: 14px; + color: $text-gray; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; + border-radius: 3px; + + &:hover { + text-decoration: none; + background-color: lighten($gray-200, 3%); + } + + &.selected { + color: $text-white; + background-color: $bg-blue; + } + + .count { + float: right; + font-weight: $font-weight-bold; + } + + .bar { + position: absolute; + top: 2px; + right: 0; + bottom: 2px; + z-index: -1; + display: inline-block; + background-color: darken($gray-100, 2%); + } +} diff --git a/packages/primer-navigation/lib/menu.scss b/packages/primer-navigation/lib/menu.scss new file mode 100644 index 0000000000..c0e7e8d29a --- /dev/null +++ b/packages/primer-navigation/lib/menu.scss @@ -0,0 +1,112 @@ +// Side menu +// +// A menu on the side of a page, defaults to left side. e.g. github.com/about + +.menu { + margin-bottom: 15px; + list-style: none; + background-color: $bg-white; + border: 1px solid $gray-300; + border-radius: 3px; +} + +.menu-item { + position: relative; + display: block; + padding: 8px 10px; + border-bottom: 1px solid $gray-200; + + &:first-child { + border-top: 0; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + + &::before { border-top-left-radius: 2px; } + } + + &:last-child { + border-bottom: 0; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; + + &::before { border-bottom-left-radius: 2px; } + } + + &:hover { + text-decoration: none; + background-color: $gray-100; + } + + &.selected { + font-weight: $font-weight-bold; + color: $text-gray-dark; + cursor: default; + background-color: $bg-white; + + &::before { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 2px; + content: ""; + background-color: $orange-600; + } + } + + .octicon { + width: 16px; + margin-right: 5px; + color: $text-gray-dark; + text-align: center; + } + + .Counter { + float: right; + margin-left: 5px; + } + + .menu-warning { + float: right; + color: $red-900; + } + + .avatar { + float: left; + margin-right: 5px; + } + + &.alert { + .Counter { + color: $text-red; + } + } +} + +.menu-heading { + display: block; + padding: 8px 10px; + margin-top: 0; + margin-bottom: 0; + font-size: 13px; + font-weight: $font-weight-bold; + line-height: 20px; + color: $gray-600; + background-color: darken($gray-100, 1%); + border-bottom: 1px solid $gray-200; + + &:hover { + text-decoration: none; + } + + &:first-child { + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + + &:last-child { + border-bottom: 0; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; + } +} diff --git a/packages/primer-navigation/lib/subnav.scss b/packages/primer-navigation/lib/subnav.scss new file mode 100644 index 0000000000..bf5258814c --- /dev/null +++ b/packages/primer-navigation/lib/subnav.scss @@ -0,0 +1,120 @@ +// Needs refactoring +// Sub nav +.subnav { + margin-bottom: 20px; + + @include clearfix(); +} + +.subnav-bordered { + padding-bottom: 20px; + border-bottom: 1px solid lighten($gray-200, 3%); +} + +.subnav-flush { + margin-bottom: 0; +} + +.subnav-item { + position: relative; + float: left; + padding: 6px 14px; + font-weight: $font-weight-bold; + line-height: 20px; + color: $gray-600; + border: 1px solid $gray-200; + + + .subnav-item { + margin-left: -1px; + } + + &:hover, + &:focus { + text-decoration: none; + background-color: $gray-100; + } + + &.selected, + &.selected:hover, + &.selected:focus { + z-index: 2; + color: $text-white; + background-color: $bg-blue; + border-color: $blue; + } + + &:first-child { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + + &:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } +} + +.subnav-search { + position: relative; + margin-left: 10px; +} + +.subnav-search-input { + width: 320px; + padding-left: 30px; + color: $text-gray; +} + +.subnav-search-input-wide { + width: 500px; +} + +.subnav-search-icon { + position: absolute; + top: 9px; + left: 8px; + display: block; + color: darken($gray-300, 4%); + text-align: center; + pointer-events: none; +} + +.subnav-search-context { + .btn { + color: $gray-700; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + &:hover, + &:focus, + &:active, + &.selected { + z-index: 2; + } + } + + + .subnav-search { + margin-left: -1px; + + .subnav-search-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + + .select-menu-modal-holder { + z-index: 30; + } + + .select-menu-modal { + width: 220px; + } + + .select-menu-item-icon { + color: inherit; + } +} + +.subnav-spacer-right { + padding-right: 10px; +} diff --git a/packages/primer-navigation/lib/tabnav.scss b/packages/primer-navigation/lib/tabnav.scss new file mode 100644 index 0000000000..2a8d356eef --- /dev/null +++ b/packages/primer-navigation/lib/tabnav.scss @@ -0,0 +1,74 @@ +// Outer wrapper +// stylelint-disable selector-no-type +.tabnav { + margin-top: 0; + margin-bottom: 15px; + border-bottom: 1px solid $gray-300; + + .Counter { + margin-left: 5px; + } +} + +.tabnav-tabs { + margin-bottom: -1px; +} + +.tabnav-tab { + display: inline-block; + padding: 8px 12px; + font-size: 14px; + line-height: 20px; + color: $gray-600; + text-decoration: none; + background-color: transparent; + border: 1px solid transparent; + border-bottom: 0; + + &.selected { + color: $text-gray-dark; + background-color: $bg-white; + border-color: $gray-300; + border-radius: 3px 3px 0 0; + } + + &:hover, + &:focus { + color: $text-gray-dark; + text-decoration: none; + } +} + +// Tabnav extras +// +// Tabnav extras are non-tab elements that sit in the tabnav. Usually they're +// inline text or links. + +.tabnav-extra { + display: inline-block; + padding-top: 10px; + margin-left: 10px; + font-size: 12px; + color: $gray-600; + + > .octicon { + margin-right: 2px; + } +} + +// When tabnav-extra are anchors +// stylelint-disable selector-no-qualifying-type +a.tabnav-extra:hover { + color: $text-blue; + text-decoration: none; +} +// stylelint-enable selector-no-qualifying-type + +// Tabnav buttons +// +// For when there are multiple buttons, space them out appropriately. Requires +// the buttons to be floated or inline-block. + +.tabnav-btn { + margin-left: 10px; +} diff --git a/packages/primer-navigation/package.json b/packages/primer-navigation/package.json new file mode 100644 index 0000000000..ed956d8263 --- /dev/null +++ b/packages/primer-navigation/package.json @@ -0,0 +1,40 @@ +{ + "version": "1.0.2", + "name": "primer-navigation", + "description": "Singular purpose and flexible navigation elements.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "index.scss", + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-navigation", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss" + }, + "dependencies": { + "primer-support": "^4.0.3" + }, + "devDependencies": { + "primer-module-build": "*", + "stylelint": "*", + "stylelint-config-primer": "*" + }, + "keywords": [ + "primer", + "css", + "github", + "primercss", + "nav", + "navigation" + ] +} diff --git a/packages/primer-page-headers/.gitignore b/packages/primer-page-headers/.gitignore new file mode 100644 index 0000000000..01a5e93c12 --- /dev/null +++ b/packages/primer-page-headers/.gitignore @@ -0,0 +1,3 @@ +node_modules +build +*.log diff --git a/packages/primer-page-headers/.npmignore b/packages/primer-page-headers/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/packages/primer-page-headers/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/packages/primer-page-headers/.postcss.json b/packages/primer-page-headers/.postcss.json new file mode 100644 index 0000000000..0d882f47f2 --- /dev/null +++ b/packages/primer-page-headers/.postcss.json @@ -0,0 +1,6 @@ +{ + "use": ["autoprefixer"], + "autoprefixer": { + "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11" + } +} diff --git a/packages/primer-page-headers/.stylelintrc.json b/packages/primer-page-headers/.stylelintrc.json new file mode 100644 index 0000000000..19028f9885 --- /dev/null +++ b/packages/primer-page-headers/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "stylelint-config-primer" + ] +} diff --git a/packages/primer-page-headers/CHANGELOG.md b/packages/primer-page-headers/CHANGELOG.md new file mode 100644 index 0000000000..eef67ebb90 --- /dev/null +++ b/packages/primer-page-headers/CHANGELOG.md @@ -0,0 +1,23 @@ +# v0.1.1 + + * bumping the version - Jon Rohan [github/github@4a72b25](https://github.com/github/github/commit/4a72b25) + * Pointing main js file to build - Jon Rohan [github/github@3575651](https://github.com/github/github/commit/3575651) + * don't change the versions yet - Jon Rohan [github/github@6bebcff](https://github.com/github/github/commit/6bebcff) + * Bumping version - Jon Rohan [github/github@df8b91c](https://github.com/github/github/commit/df8b91c) + * Cleaning up devDependencies versions and simplifying npm scripts - Jon Rohan [github/github@2c42571](https://github.com/github/github/commit/2c42571) + * Sorting and table objects. We also don't need homepage - Jon Rohan [github/github@798629d](https://github.com/github/github/commit/798629d) + * Removing duplicate headers - Jon Rohan [github/github@225cee1](https://github.com/github/github/commit/225cee1) + +# v0.1.0 + + * Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) + * Getting rid of as much as possible - Sophie Shepherd [github/github@e2e5de4](https://github.com/github/github/commit/e2e5de4) + * Clean up more type css - Sophie Shepherd [github/github@cbf356a](https://github.com/github/github/commit/cbf356a) + * Update the names in the README files - Patrick Marsceill [github/github@75fed58](https://github.com/github/github/commit/75fed58) + * Update names for npm publising - Patrick Marsceill [github/github@451f97a](https://github.com/github/github/commit/451f97a) + * Fix import path across all scss files - Patrick Marsceill [github/github@a566f31](https://github.com/github/github/commit/a566f31) + * Add page headers section - Sophie Shepherd [github/github@6b6ff9d](https://github.com/github/github/commit/6b6ff9d) + * Fix variable collisions and add basecoat to site to test sass compilation errors - Patrick Marsceill [github/github@c73eee3](https://github.com/github/github/commit/c73eee3) + * Remove basecoat - Patrick Marsceill [github/github@1b1503d](https://github.com/github/github/commit/1b1503d) + * prefix bc => marketing - Patrick Marsceill [github/github@04d509a](https://github.com/github/github/commit/04d509a) + * pull in ye olde basecoat files from branch - Patrick Marsceill [github/github@09d47e9](https://github.com/github/github/commit/09d47e9) \ No newline at end of file diff --git a/packages/primer-page-headers/LICENSE b/packages/primer-page-headers/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-page-headers/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-page-headers/README.md b/packages/primer-page-headers/README.md new file mode 100644 index 0000000000..89d24bd8a7 --- /dev/null +++ b/packages/primer-page-headers/README.md @@ -0,0 +1,58 @@ +# Primer Marketing CSS Page Headers + +[![npm version](http://img.shields.io/npm/v/primer-page-headers.svg)](https://www.npmjs.org/package/primer-page-headers) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Jumbotrons, heroes, and featured content sections for marketing websites at GitHub. + +This repository is a module of the full [primer-css][primer] repository. + +## Documentation + + + +Documentation & refactor coming very soon + + + + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-page-headers` with this command. + +``` +$ npm install --save primer-page-headers +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-page-headers/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` + +``` +$ npm run build +``` + +## License + +MIT © [GitHub](https://github.com/) + +[primer]: https://github.com/primer/primer +[primer-support]: https://github.com/primer/primer-support +[support]: https://github.com/primer/primer-support +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-page-headers/index.scss b/packages/primer-page-headers/index.scss new file mode 100644 index 0000000000..f833d588af --- /dev/null +++ b/packages/primer-page-headers/index.scss @@ -0,0 +1,4 @@ +// support files +@import "primer-support/index.scss"; +@import "primer-marketing-support/index.scss"; +@import "./lib/headers.scss"; diff --git a/packages/primer-page-headers/lib/headers.scss b/packages/primer-page-headers/lib/headers.scss new file mode 100644 index 0000000000..607569b0e4 --- /dev/null +++ b/packages/primer-page-headers/lib/headers.scss @@ -0,0 +1,68 @@ +.jumbotron { + position: relative; + padding-top: $spacer-6; + padding-bottom: $spacer-6; + + @include breakpoint(sm) { + padding-top: $spacer-6 * 1.5; + padding-bottom: $spacer-6 * 1.5; + } + + @include breakpoint(xl) { + padding-top: $spacer-6 * 3; + padding-bottom: $spacer-6 * 3; + } +} + +.jumbotron-supertron { + @include breakpoint(lg) { + height: 45vw; + min-height: 590px; + max-height: 55vh; + padding-top: $spacer-6 + $spacer-6; + padding-bottom: $spacer-6 + $spacer-6; + } +} + +.jumbotron-minitron { + padding-top: $spacer-4; + padding-bottom: $spacer-4; + + @include breakpoint(sm) { + padding-top: $spacer-5; + padding-bottom: $spacer-5; + } +} + +.jumbotron-shadow { + // Shadow + &::after { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 30px; + content: " "; + background-color: transparent; + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); + background-repeat: repeat-x; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05); + } +} + +.jumbotron-photo { + position: relative; + background-color: $gray-dark; + background-size: cover; + + &::before { + position: absolute; + bottom: 0; + left: 0; + display: block; + width: 100%; + height: 100%; + content: ""; + background-color: rgba(0, 0, 0, 0.25); + } +} diff --git a/packages/primer-page-headers/package.json b/packages/primer-page-headers/package.json new file mode 100644 index 0000000000..afcfccd7ef --- /dev/null +++ b/packages/primer-page-headers/package.json @@ -0,0 +1,43 @@ +{ + "version": "0.1.3", + "name": "primer-page-headers", + "description": "Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "build/build.css", + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-page-headers", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss" + }, + "dependencies": { + "primer-marketing-support": "^0.5.2", + "primer-support": "^4.0.3" + }, + "devDependencies": { + "primer-module-build": "*", + "stylelint": "*", + "stylelint-config-primer": "*" + }, + "keywords": [ + "css", + "flash", + "github", + "hero", + "jumbotron", + "primer", + "primercss", + "style" + ] +} diff --git a/packages/primer-page-sections/.gitignore b/packages/primer-page-sections/.gitignore new file mode 100644 index 0000000000..01a5e93c12 --- /dev/null +++ b/packages/primer-page-sections/.gitignore @@ -0,0 +1,3 @@ +node_modules +build +*.log diff --git a/packages/primer-page-sections/.npmignore b/packages/primer-page-sections/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/packages/primer-page-sections/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/packages/primer-page-sections/.postcss.json b/packages/primer-page-sections/.postcss.json new file mode 100644 index 0000000000..0d882f47f2 --- /dev/null +++ b/packages/primer-page-sections/.postcss.json @@ -0,0 +1,6 @@ +{ + "use": ["autoprefixer"], + "autoprefixer": { + "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11" + } +} diff --git a/packages/primer-page-sections/.stylelintrc.json b/packages/primer-page-sections/.stylelintrc.json new file mode 100644 index 0000000000..19028f9885 --- /dev/null +++ b/packages/primer-page-sections/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "stylelint-config-primer" + ] +} diff --git a/packages/primer-page-sections/CHANGELOG.md b/packages/primer-page-sections/CHANGELOG.md new file mode 100644 index 0000000000..546e7ea4a6 --- /dev/null +++ b/packages/primer-page-sections/CHANGELOG.md @@ -0,0 +1,21 @@ +# v0.1.1 + + * bumping the version - Jon Rohan [github/github@4a72b25](https://github.com/github/github/commit/4a72b25) + * Pointing main js file to build - Jon Rohan [github/github@3575651](https://github.com/github/github/commit/3575651) + * don't change the versions yet - Jon Rohan [github/github@6bebcff](https://github.com/github/github/commit/6bebcff) + * Bumping version - Jon Rohan [github/github@df8b91c](https://github.com/github/github/commit/df8b91c) + * Cleaning up devDependencies versions and simplifying npm scripts - Jon Rohan [github/github@2c42571](https://github.com/github/github/commit/2c42571) + * Sorting and table objects. We also don't need homepage - Jon Rohan [github/github@798629d](https://github.com/github/github/commit/798629d) + * Removing duplicate headers - Jon Rohan [github/github@225cee1](https://github.com/github/github/commit/225cee1) + +# v0.1.0 + + * Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) + * Fix broken paths - Patrick Marsceill [github/github@b5dc395](https://github.com/github/github/commit/b5dc395) + * Update the names in the README files - Patrick Marsceill [github/github@75fed58](https://github.com/github/github/commit/75fed58) + * Update names for npm publising - Patrick Marsceill [github/github@451f97a](https://github.com/github/github/commit/451f97a) + * Fix import path across all scss files - Patrick Marsceill [github/github@a566f31](https://github.com/github/github/commit/a566f31) + * Add page sections to docs - Sophie Shepherd [github/github@667d1e7](https://github.com/github/github/commit/667d1e7) + * Fix variable collisions and add basecoat to site to test sass compilation errors - Patrick Marsceill [github/github@c73eee3](https://github.com/github/github/commit/c73eee3) + * Remove basecoat - Patrick Marsceill [github/github@1b1503d](https://github.com/github/github/commit/1b1503d) + * section => page-section - Patrick Marsceill [github/github@a789873](https://github.com/github/github/commit/a789873) \ No newline at end of file diff --git a/packages/primer-page-sections/LICENSE b/packages/primer-page-sections/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-page-sections/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-page-sections/README.md b/packages/primer-page-sections/README.md new file mode 100644 index 0000000000..7d7fcee5ee --- /dev/null +++ b/packages/primer-page-sections/README.md @@ -0,0 +1,57 @@ +# Primer CSS Page Sections + +[![npm version](http://img.shields.io/npm/v/primer-page-sections.svg)](https://www.npmjs.org/package/primer-page-sections) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time. + +This repository is a module of the full [primer-css][primer] repository. + +## Documentation + + + +Documentation & refactor coming very soon + + + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-page-sections` with this command. + +``` +$ npm install --save primer-page-sections +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-page-sections/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` + +``` +$ npm run build +``` + +## License + +MIT © [GitHub](https://github.com/) + +[primer]: https://github.com/primer/primer +[primer-support]: https://github.com/primer/primer-support +[support]: https://github.com/primer/primer-support +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-page-sections/index.scss b/packages/primer-page-sections/index.scss new file mode 100644 index 0000000000..78b9de46f9 --- /dev/null +++ b/packages/primer-page-sections/index.scss @@ -0,0 +1,4 @@ +// support files +@import "primer-support/index.scss"; +@import "primer-marketing-support/index.scss"; +@import "./lib/page-section.scss"; diff --git a/packages/primer-page-sections/lib/page-section.scss b/packages/primer-page-sections/lib/page-section.scss new file mode 100644 index 0000000000..1908d7dd9c --- /dev/null +++ b/packages/primer-page-sections/lib/page-section.scss @@ -0,0 +1,18 @@ +// Styles for page sections +.page-section { + padding: $spacer-5 0; + margin-top: 0; + + @include breakpoint(md) { + padding: $spacer-6 + $spacer-3 0; + } +} + +// Adds a little extra headroom for sections linked to via in-page anchor links +.page-section-jumplink:target { + padding-top: ($spacer-6 * 2) + $spacer-5; + + @include breakpoint(md) { + padding-top: $spacer-6 * 2; + } +} diff --git a/packages/primer-page-sections/package.json b/packages/primer-page-sections/package.json new file mode 100644 index 0000000000..322e0b4a5f --- /dev/null +++ b/packages/primer-page-sections/package.json @@ -0,0 +1,42 @@ +{ + "version": "0.1.3", + "name": "primer-page-sections", + "description": "Styles to create distinct sections of marketing pages at GitHub.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "build/build.css", + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-page-sections", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss" + }, + "dependencies": { + "primer-marketing-support": "^0.5.2", + "primer-support": "^4.0.3" + }, + "devDependencies": { + "primer-module-build": "*", + "stylelint": "*", + "stylelint-config-primer": "*" + }, + "keywords": [ + "css", + "github", + "page sections", + "primer", + "primercss", + "sections", + "style" + ] +} diff --git a/packages/primer-product/.gitignore b/packages/primer-product/.gitignore new file mode 100644 index 0000000000..0efecbd407 --- /dev/null +++ b/packages/primer-product/.gitignore @@ -0,0 +1,5 @@ +.DS_Store +.sass-cache +node_modules +build +*.log diff --git a/packages/primer-product/.npmignore b/packages/primer-product/.npmignore new file mode 100644 index 0000000000..6919fd6923 --- /dev/null +++ b/packages/primer-product/.npmignore @@ -0,0 +1,2 @@ +*.yml +.postcss.json diff --git a/packages/primer-product/CHANGELOG.md b/packages/primer-product/CHANGELOG.md new file mode 100644 index 0000000000..501422462b --- /dev/null +++ b/packages/primer-product/CHANGELOG.md @@ -0,0 +1,3 @@ +# 1.0.0 + +- Grouping primer modules into product diff --git a/packages/primer-product/LICENSE b/packages/primer-product/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-product/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-product/README.md b/packages/primer-product/README.md new file mode 100644 index 0000000000..9d3495fe22 --- /dev/null +++ b/packages/primer-product/README.md @@ -0,0 +1,48 @@ +# Primer product + +[![npm version](http://img.shields.io/npm/v/primer-product.svg)](https://www.npmjs.org/package/primer-product) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Primer product is one of 3 meta-packages that belong to the Primer CSS framework. Primer product contains packages that are used on GitHub product websites. + +This repository is a compilation of [several CSS packages](https://github.com/primer/primer-css). You can break it down into smaller sections using npm. + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-css` with this command. **You must have npm >=3.0 installed to be able to satisfy the dependency paths** + +``` +$ npm install --save primer-core +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-core/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **CSS** version of this module, a npm script is included that will output a CSS version to `build/build.css` The built CSS file is also included in the npm package. + +``` +$ npm run build +``` + +## Documentation + +You can read more about primer in the [docs][docs]. + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-product/index.scss b/packages/primer-product/index.scss new file mode 100644 index 0000000000..86bc734bc5 --- /dev/null +++ b/packages/primer-product/index.scss @@ -0,0 +1,21 @@ +/*! + * Primer-product + * http://primercss.io + * + * Released under MIT license. Copyright 2015 GitHub, Inc. + */ + +// Primer master file +// +// Imports all Primer files in their intended order for easy mass-inclusion. +// Should you need specific files, you can easily use separate `@import`s. + +// Global requirements +@import "primer-support/index.scss"; + +// Product specific css modules +@import "primer-alerts/index.scss"; +@import "primer-avatars/index.scss"; +@import "primer-blankslate/index.scss"; +@import "primer-markdown/index.scss"; +@import "primer-labels/index.scss"; diff --git a/packages/primer-product/package.json b/packages/primer-product/package.json new file mode 100644 index 0000000000..b4d9dfa98d --- /dev/null +++ b/packages/primer-product/package.json @@ -0,0 +1,34 @@ +{ + "version": "4.0.1", + "name": "primer-product", + "description": "Primer CSS's product modules", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "build/build.css", + "main": "build/index.js", + "files": [ + "index.scss", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-product", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build" + }, + "dependencies": { + "primer-alerts": "^1.1.4", + "primer-avatars": "^0.4.8", + "primer-blankslate": "^0.3.7", + "primer-labels": "^1.1.2", + "primer-markdown": "^3.3.9", + "primer-support": "^4.0.3" + }, + "devDependencies": { + "primer-module-build": "*" + } +} diff --git a/packages/primer-support/.gitignore b/packages/primer-support/.gitignore new file mode 100644 index 0000000000..01a5e93c12 --- /dev/null +++ b/packages/primer-support/.gitignore @@ -0,0 +1,3 @@ +node_modules +build +*.log diff --git a/packages/primer-support/.npmignore b/packages/primer-support/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/packages/primer-support/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/packages/primer-support/.postcss.json b/packages/primer-support/.postcss.json new file mode 100644 index 0000000000..0d882f47f2 --- /dev/null +++ b/packages/primer-support/.postcss.json @@ -0,0 +1,6 @@ +{ + "use": ["autoprefixer"], + "autoprefixer": { + "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11" + } +} diff --git a/packages/primer-support/.stylelintrc.json b/packages/primer-support/.stylelintrc.json new file mode 100644 index 0000000000..19028f9885 --- /dev/null +++ b/packages/primer-support/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "stylelint-config-primer" + ] +} diff --git a/packages/primer-support/CHANGELOG.md b/packages/primer-support/CHANGELOG.md new file mode 100644 index 0000000000..ba833e6cd4 --- /dev/null +++ b/packages/primer-support/CHANGELOG.md @@ -0,0 +1,151 @@ +# v3.0.2 + + * Bump all the version numbers for readme - Mu-An Chiou [github/github@a9d152f](https://github.com/github/github/commit/a9d152f) + * Fix all the travis badge URL - Mu-An Chiou [github/github@9cd6d84](https://github.com/github/github/commit/9cd6d84) + +# v3.0.1 + + * bump version after adding variable - broccolini [github/github@7eeeed5](https://github.com/github/github/commit/7eeeed5) + * add yellow border variable to replace old flash border variable - broccolini [github/github@6eb26ee](https://github.com/github/github/commit/6eb26ee) + +# v3.0.0 + + * bump major version due to renaming in support and utils - broccolini [github/github@85b48ab](https://github.com/github/github/commit/85b48ab) + * rename border variables - broccolini [github/github@0a580d5](https://github.com/github/github/commit/0a580d5) + +# v2.1.0 + + * versions - Sophie Shepherd [github/github@703a904](https://github.com/github/github/commit/703a904) + * @broccolini's feedback - Sophie Shepherd [github/github@f9699ef](https://github.com/github/github/commit/f9699ef) + +# v2.0.0 + + * Fix lint - Mu-An Chiou [github/github@5a4b3cb](https://github.com/github/github/commit/5a4b3cb) + * Change border-color back to default for -000 .btn as well - Mu-An Chiou [github/github@bf725a2](https://github.com/github/github/commit/bf725a2) + * fix lint errors - broccolini [github/github@c520fa4](https://github.com/github/github/commit/c520fa4) + * fix lints and add defaults to color system variables - broccolini [github/github@b7f5ed5](https://github.com/github/github/commit/b7f5ed5) + * update primer-core version number - broccolini [github/github@6846743](https://github.com/github/github/commit/6846743) + * more docs examples, restore gradients from @broccolini and then add additional overrides to prevent hover gradient from bleeding into active state - Mark Otto [github/github@c637891](https://github.com/github/github/commit/c637891) + * One more button redux - Mark Otto [github/github@0b7323a](https://github.com/github/github/commit/0b7323a) + * use one yellow for now for status-pending: - broccolini [github/github@9f3bd48](https://github.com/github/github/commit/9f3bd48) + * darken danger button border on hover - broccolini [github/github@74b68b1](https://github.com/github/github/commit/74b68b1) + * add inverse mixin for red button hover styles - broccolini [github/github@764c417](https://github.com/github/github/commit/764c417) + * fix default btn style selected state - broccolini [github/github@fa5706a](https://github.com/github/github/commit/fa5706a) + * btn fixes: - broccolini [github/github@d5c2110](https://github.com/github/github/commit/d5c2110) + * update commit css with new variables - broccolini [github/github@198d897](https://github.com/github/github/commit/198d897) + * lighten yellow-100 just a tiny little bit - broccolini [github/github@0c7f3c5](https://github.com/github/github/commit/0c7f3c5) + * make purple more blue and less yahoo - ba boom tish! - broccolini [github/github@2fa35bd](https://github.com/github/github/commit/2fa35bd) + * update border light utility to be darker: - broccolini [github/github@3711ba9](https://github.com/github/github/commit/3711ba9) + * update orange variables and docs - broccolini [github/github@ab6f263](https://github.com/github/github/commit/ab6f263) + * update status pending colors - broccolini [github/github@849b34e](https://github.com/github/github/commit/849b34e) + * replace instances of #ddd with variable in primer-core - broccolini [github/github@4a95523](https://github.com/github/github/commit/4a95523) + * update red variables in topics: - broccolini [github/github@33ea9b0](https://github.com/github/github/commit/33ea9b0) + * remove unused variables - broccolini [github/github@a4ca9e4](https://github.com/github/github/commit/a4ca9e4) + * update default gray variables with new variables - broccolini [github/github@db4e635](https://github.com/github/github/commit/db4e635) + * update form color variables to use black variable - broccolini [github/github@af4ab27](https://github.com/github/github/commit/af4ab27) + * make gray match blue hue - broccolini [github/github@e53fff7](https://github.com/github/github/commit/e53fff7) + * sneak in that sf mono life - Mark Otto [github/github@778a9e6](https://github.com/github/github/commit/778a9e6) + +# v1.2.2 + + * update version numbers for primer package with bold update - broccolini [github/github@5d3e089](https://github.com/github/github/commit/5d3e089) + +# v1.2.1 + + * More versions - Jon Rohan [github/github@e12ba2e](https://github.com/github/github/commit/e12ba2e) + +# v1.2.0 + + * Revving this per @jonrohan - Patrick Marsceill [github/github@331f0b1](https://github.com/github/github/commit/331f0b1) + * Consolidate variables - Patrick Marsceill [github/github@37ea8ac](https://github.com/github/github/commit/37ea8ac) + * Make shadow vars - Patrick Marsceill [github/github@93b2e11](https://github.com/github/github/commit/93b2e11) + * update bg-yellow variables - broccolini [github/github@79701f2](https://github.com/github/github/commit/79701f2) + * Moving - Jon Rohan [github/github@34d0849](https://github.com/github/github/commit/34d0849) + * Updates based on feedback - Jon Rohan [github/github@d3528f1](https://github.com/github/github/commit/d3528f1) + * Documenting current color utilities - Jon Rohan [github/github@46b5f85](https://github.com/github/github/commit/46b5f85) + * add border color variables - broccolini [github/github@42f0fc0](https://github.com/github/github/commit/42f0fc0) + +# v1.1.0 + + * updating the version number - Jon Rohan [github/github@db462e6](https://github.com/github/github/commit/db462e6) + * Updating spacer-6 from 48px to 40px - Jon Rohan [github/github@ae380d1](https://github.com/github/github/commit/ae380d1) + * updating lg breakpoint for use with new spacer-3 - Jon Rohan [github/github@f5baf52](https://github.com/github/github/commit/f5baf52) + +# v1.0.0 + + * Fix counter color on primary button - Patrick Marsceill [github/github@9089145](https://github.com/github/github/commit/9089145) + * Cutting new versions of primer modules - Jon Rohan [github/github@157f5ab](https://github.com/github/github/commit/157f5ab) + * remove old comment - Patrick Marsceill [github/github@794502e](https://github.com/github/github/commit/794502e) + * Defaulting variables to new formula, with hardcoded old values - Jon Rohan [github/github@1f12c54](https://github.com/github/github/commit/1f12c54) + * Updating spacer-2 to 8px - Jon Rohan [github/github@3f7fbaf](https://github.com/github/github/commit/3f7fbaf) + * Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) + * Getting rid of as much as possible - Sophie Shepherd [github/github@e2e5de4](https://github.com/github/github/commit/e2e5de4) + * Make default box shadow a var and apply it to .box-shadow utility - Patrick Marsceill [github/github@bda03be](https://github.com/github/github/commit/bda03be) + * Separating out modules into primer-core and primer-product - Jon Rohan [github/github@ddf698c](https://github.com/github/github/commit/ddf698c) + +# v0.6.0 + + * Updating version - Jon Rohan [github/github@6bf5fe5](https://github.com/github/github/commit/6bf5fe5) + * use variables in breakpoints and update containers - broccolini [github/github@b615663](https://github.com/github/github/commit/b615663)8 + * Updating the modules stylelint - Jon Rohan [github/github@389609f](https://github.com/github/github/commit/389609f) + * comment for @connors - Mark Otto [github/github@b3e2922](https://github.com/github/github/commit/b3e2922) + * Move stats switcher vars over and update the height for reals - Mark Otto [github/github@9695fa0](https://github.com/github/github/commit/9695fa0) + +# v0.5.0 + + * Bumping to a new version - Jon Rohan [github/github@ff32813](https://github.com/github/github/commit/ff32813) + * Rename spacer variables - Sophie Shepherd [github/github@e5ffa47](https://github.com/github/github/commit/e5ffa47) + * default it - Mark Otto [github/github@6c895dd](https://github.com/github/github/commit/6c895dd) + * slightly different stack - Mark Otto [github/github@4e3882d](https://github.com/github/github/commit/4e3882d) + * nuke linux fonts - Mark Otto [github/github@534c790](https://github.com/github/github/commit/534c790) + * Change variable order - Mark Otto [github/github@42bceda](https://github.com/github/github/commit/42bceda) + * First part of genpopping all system font changes: remove typographic overrides for font-size, line-height, etc on global components - Mark Otto [github/github@6c50e2d](https://github.com/github/github/commit/6c50e2d) + +# v0.4.0 + + * Publishing a new version - Jon Rohan [github/github@eed0e96](https://github.com/github/github/commit/eed0e96) + * New line-height variables - Mark Otto [github/github@b15b1ea](https://github.com/github/github/commit/b15b1ea) + * Revert variables breakup back to single file - Jon Rohan [github/github@3397db7](https://github.com/github/github/commit/3397db7) + * Organize the variables and mixins into better files - Jon Rohan [github/github@9383dc2](https://github.com/github/github/commit/9383dc2) + * Removing some unnecessary lint plugins and using native - Jon Rohan [github/github@2ae0070](https://github.com/github/github/commit/2ae0070) + * including no-utility lint plugin - Jon Rohan [github/github@5cb86ed](https://github.com/github/github/commit/5cb86ed) + * Adding lint plugins for new config - Jon Rohan [github/github@7fb9613](https://github.com/github/github/commit/7fb9613) + * add font-weight to heading mixins - broccolini [github/github@585098e](https://github.com/github/github/commit/585098e) + * reoganizing the docs section - Jon Rohan [github/github@8cb4556](https://github.com/github/github/commit/8cb4556) + * disabling some lints - Jon Rohan [github/github@3d70154](https://github.com/github/github/commit/3d70154) + * Adding callouts to alerts module - Jon Rohan [github/github@355fe6c](https://github.com/github/github/commit/355fe6c) + +# v0.3.2 + + * Bumping version to include postcss.json in npm - Jon Rohan [github/github@9e560ba](https://github.com/github/github/commit/9e560ba) + +# v0.3.1 + + * Using stylelint to lint the modules instead of scss_lint - Jon Rohan [github/github@cb0b8fd](https://github.com/github/github/commit/cb0b8fd) + +# v0.3.0 + + * Don't link requirements - Jon Rohan [github/github@7740e81](https://github.com/github/github/commit/7740e81) + * Updating the README with more detailed instructions - Jon Rohan [github/github@5dd7c34](https://github.com/github/github/commit/5dd7c34) + * Bumping the version - Jon Rohan [github/github@01e7c4e](https://github.com/github/github/commit/01e7c4e) + * Reorganize the module folders into a more flexible organization - Jon Rohan [github/github@5a07101](https://github.com/github/github/commit/5a07101) + +# v0.2.0 + + * v0.2.0 - Jon Rohan [github/github@75201c5](https://github.com/github/github/commit/75201c5) + * Updating support to use travis-ci - Jon Rohan [github/github@707ad54](https://github.com/github/github/commit/707ad54) + * Adding support variables and mixins from primer/primer - Jon Rohan [github/github@b9e6118](https://github.com/github/github/commit/b9e6118) + * Fix -down scoping - Joshua Peek [github/github@87a37bf](https://github.com/github/github/commit/87a37bf) + * Moving variables to _variables and creating linter - Jon Rohan [github/github@f689536](https://github.com/github/github/commit/f689536) + * Tracking disabled scss-lint rules in graphite - Jon Rohan [github/github@356112f](https://github.com/github/github/commit/356112f) + * renaming the mixin - Jon Rohan [github/github@db06b9a](https://github.com/github/github/commit/db06b9a) + * dropping speed variables - Jon Rohan [github/github@0610ffe](https://github.com/github/github/commit/0610ffe) + * no timing variables for now - Jon Rohan [github/github@4c018f1](https://github.com/github/github/commit/4c018f1) + * Refactoring animations into reusable animiation classes - Jon Rohan [github/github@084863e](https://github.com/github/github/commit/084863e) + * Using a retina mixin for repetable code - Jon Rohan [github/github@408bb72](https://github.com/github/github/commit/408bb72) + * Updating copy on readmes - Jon Rohan [github/github@38d5dbc](https://github.com/github/github/commit/38d5dbc) + * Updating the folders with feedback and writing some readmes - Jon Rohan [github/github@fc81a30](https://github.com/github/github/commit/fc81a30) + * cleanup some dupe utility classes - Jon Rohan [github/github@c2dfad7](https://github.com/github/github/commit/c2dfad7) + * Some updates for the imports - Jon Rohan [github/github@345dd82](https://github.com/github/github/commit/345dd82) + * Hella refactoring and moving files to modules - Jon Rohan [github/github@556cc0d](https://github.com/github/github/commit/556cc0d) + * Moving all these files - Jon Rohan [github/github@9c8d0f5](https://github.com/github/github/commit/9c8d0f5) \ No newline at end of file diff --git a/packages/primer-support/LICENSE b/packages/primer-support/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-support/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-support/README.md b/packages/primer-support/README.md new file mode 100644 index 0000000000..6aa88a8045 --- /dev/null +++ b/packages/primer-support/README.md @@ -0,0 +1,42 @@ +# Primer CSS Support + +[![npm version](http://img.shields.io/npm/v/primer-support.svg)](https://www.npmjs.org/package/primer-support) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Support files are Sass variables, mixins, and functions that we import into different bases for use across components, objects, and utilities. Sharing these common properties across GitHub sites helps us to keep our styles more consistent. +> +> Most of the time to include these you'll only need to add `@import "support/support";` to the top of your bundle. If you want only a specific partial you can import them separately. + +This repository is a module of the full [primer-css][primer] repository. + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-support` with this command. + +``` +$ npm install --save primer-support +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-support/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Documentation + +You can read more about support in the [docs][docs]. + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-support/index.scss b/packages/primer-support/index.scss new file mode 100644 index 0000000000..1b5abdd808 --- /dev/null +++ b/packages/primer-support/index.scss @@ -0,0 +1,11 @@ +// variables +@import "./lib/variables/typography.scss"; +@import "./lib/variables/colors.scss"; +@import "./lib/variables/layout.scss"; +@import "./lib/variables/misc.scss"; + +// mixins +@import "./lib/mixins/typography.scss"; +@import "./lib/mixins/layout.scss"; +@import "./lib/mixins/buttons.scss"; +@import "./lib/mixins/misc.scss"; diff --git a/packages/primer-support/lib/mixins/buttons.scss b/packages/primer-support/lib/mixins/buttons.scss new file mode 100644 index 0000000000..a4f47d3d76 --- /dev/null +++ b/packages/primer-support/lib/mixins/buttons.scss @@ -0,0 +1,156 @@ +// stylelint-disable block-closing-brace-newline-after + +// Button color generator for primary and themed buttons + +// New button hotness +@mixin btn-solid($color, $bg, $bg2) { + color: $color; + background-color: $bg2; + background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%); + + @if $bg == $gray-000 { + &:focus, + &.focus { + box-shadow: $btn-input-focus-shadow; + } + + &:hover, + &.hover { + background-color: darken($bg2, 3%); + background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%); + background-position: 0 -0.5em; + border-color: rgba($black, 0.35); + } + + &:active, + &.selected { + background-color: darken(desaturate($bg, 10%), 6%); + background-image: none; + border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button + box-shadow: $btn-active-shadow; + } + + &:disabled, + &.disabled { + color: rgba($color, 0.4); + background-color: $bg2; + background-image: none; + border-color: transparentize($black, 0.8); // back to default .btn + box-shadow: none; + } + + } @else { + &:focus, + &.focus { + box-shadow: 0 0 0 0.2em rgba($bg, 0.3); + } + + &:hover, + &.hover { + background-color: darken($bg2, 2%); + background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%); + background-position: 0 -0.5em; + border-color: $black-fade-50; + } + + &:active, + &.selected { + background-color: darken(mix($bg, $bg2, 50%), 7%); + background-image: none; + border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button + box-shadow: $btn-active-shadow; + } + + &:disabled, + &.disabled { + color: rgba($color, 0.75); + background-color: mix($bg2, $white, 50%); + background-image: none; + border-color: transparentize($black, 0.8); // repeat .btn default to avoid shift on click-drag off of button + box-shadow: none; + } + + .Counter { + color: darken($bg, 8%); + background-color: $white; + } + } +} + +// Inverse button hover style +@mixin btn-inverse($color, $bg, $bg2) { + color: $color; + background-color: $bg; + background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%); + + &:focus { + box-shadow: 0 0 0 0.2em rgba($color, 0.3); + } + + &:hover { + color: $text-white; + background-color: $color; + background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%); + border-color: $black-fade-50; + + .Counter { + color: $text-white; + } + } + + &:active, + &.selected { + color: $text-white; + background-color: darken($color, 5%); + background-image: none; + border-color: $black-fade-50; + box-shadow: $btn-active-shadow; + } + + &:disabled, + &.disabled { + color: rgba($color, 0.4); + background-color: $bg2; + background-image: none; + border-color: transparentize($black, 0.8); // back to default .btn + box-shadow: none; + } +} + +// Outline color generator for btn-outline to make the hover state inverse the text and bg colors. +@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) { + color: $text-color; + background-color: $bg-color; + background-image: none; + + .Counter { + background-color: rgba($black, 0.07); + } + + &:hover, + &:active, + &.selected { + color: $bg-color; + background-color: $text-color; + background-image: none; + border-color: $text-color; + + .Counter { + color: $text-color; + background-color: $bg-color; + } + } + + &:focus { + border-color: $text-color; + box-shadow: 0 0 0 0.2em rgba($text-color, 0.3); + } + + &:disabled, + &.disabled { + color: $black-fade-30; + background-color: $bg-white; + border-color: $black-fade-15; + box-shadow: none; + } +} diff --git a/packages/primer-support/lib/mixins/layout.scss b/packages/primer-support/lib/mixins/layout.scss new file mode 100644 index 0000000000..ec319d4f54 --- /dev/null +++ b/packages/primer-support/lib/mixins/layout.scss @@ -0,0 +1,52 @@ +// Responsive media queries + +@mixin breakpoint($breakpoint) { + // Retrieves the value from the key + $value: map-get($breakpoints, $breakpoint); + + // If the key exists in the map + @if $value != null { + // Prints a media query based on the value + @media (min-width: $value) { + @content; + } + } + + // If the key doesn't exist in the map + @else { + @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + + "Please make sure it is defined in `$breakpoints` map."; + } +} + +// Retina media query + +@mixin retina-media-query { + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and (min--moz-device-pixel-ratio: 2), + only screen and (-moz-min-device-pixel-ratio: 2), + only screen and (-o-min-device-pixel-ratio: 2/1), + only screen and (min-device-pixel-ratio: 2), + only screen and (min-resolution: 192dpi), + only screen and (min-resolution: 2dppx) { + @content; + } +} + +// Clearfix +// +// Clears floats via mixin. + +@mixin clearfix { + &::before { + display: table; + content: ""; + } + + &::after { + display: table; + clear: both; + content: ""; + } +} diff --git a/packages/primer-support/lib/mixins/misc.scss b/packages/primer-support/lib/mixins/misc.scss new file mode 100644 index 0000000000..ebdd32d046 --- /dev/null +++ b/packages/primer-support/lib/mixins/misc.scss @@ -0,0 +1,29 @@ +// Generate a two-color caret for any element. +@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) { + &::after, + &::before { + position: absolute; + top: 11px; + right: 100%; + left: -16px; + display: block; + width: 0; + height: 0; + pointer-events: none; + content: " "; + border-color: transparent; + border-style: solid solid outset; + } + + &::after { + margin-top: 1px; + margin-left: 2px; + border-width: 7px; + border-right-color: $foreground; + } + + &::before { + border-width: 8px; + border-right-color: $background; + } +} diff --git a/packages/primer-support/lib/mixins/typography.scss b/packages/primer-support/lib/mixins/typography.scss new file mode 100644 index 0000000000..d39aa44c1f --- /dev/null +++ b/packages/primer-support/lib/mixins/typography.scss @@ -0,0 +1,84 @@ +// Text hiding for image based text replacement. +// Higher performance than -9999px because it only renders +// the size of the actual text, not a full 9999px box. +@mixin hide-text() { + overflow: hidden; + text-indent: 100%; + white-space: nowrap; +} + +// Heading mixins for use within components +// These match heading utilities in utilities/typography +@mixin h1 { + font-size: $h1-size; + font-weight: $font-weight-bold; +} + +@mixin h2 { + font-size: $h2-size; + font-weight: $font-weight-bold; +} + +@mixin h3 { + font-size: $h3-size; + font-weight: $font-weight-bold; +} + +@mixin h4 { + font-size: $h4-size; + font-weight: $font-weight-bold; +} + +@mixin h5 { + font-size: $h5-size; + font-weight: $font-weight-bold; +} + +@mixin h6 { + font-size: $h6-size; + font-weight: $font-weight-bold; +} + +// Responsive heading mixins +// There are no responsive mixins for h4—h6 because they are small +// and don't need to be smaller on mobile. +@mixin f1-responsive { + font-size: $h1-size-mobile; + + // 32px on desktop + @include breakpoint(md) { font-size: $h1-size; } + +} + +@mixin f2-responsive { + font-size: $h2-size-mobile; + + // 24px on desktop + @include breakpoint(md) { font-size: $h2-size; } +} + +@mixin f3-responsive { + font-size: $h3-size-mobile; + + // 20px on desktop + @include breakpoint(md) { font-size: $h3-size; } + +} + +// These use the mixins from above for responsive heading sizes. +// The following mixins can be used where it's convenient or necessary to +// couple the responsive font-size with the font-weight. +@mixin h1-responsive { + @include f1-responsive; + font-weight: $font-weight-bold; +} + +@mixin h2-responsive { + @include f2-responsive; + font-weight: $font-weight-bold; +} + +@mixin h3-responsive { + @include f3-responsive; + font-weight: $font-weight-bold; +} diff --git a/packages/primer-support/lib/variables/color-system.scss b/packages/primer-support/lib/variables/color-system.scss new file mode 100644 index 0000000000..0ea1a7116c --- /dev/null +++ b/packages/primer-support/lib/variables/color-system.scss @@ -0,0 +1,114 @@ +// +// +// -------- Grays -------- +$gray-000: #fafbfc !default; +$gray-100: #f6f8fa !default; +$gray-200: #e1e4e8 !default; +$gray-300: #d1d5da !default; +$gray-400: #959da5 !default; +$gray-500: #6a737d !default; +$gray-600: #586069 !default; +$gray-700: #444d56 !default; +$gray-800: #2f363d !default; +$gray-900: #24292e !default; // body font color + +// -------- Blue -------- +$blue-000: #f1f8ff !default; +$blue-100: #dbedff !default; +$blue-200: #c8e1ff !default; +$blue-300: #79b8ff !default; +$blue-400: #2188ff !default; +$blue-500: #0366d6 !default; // Default: Passes AA with #fff +$blue-600: #005cc5 !default; +$blue-700: #044289 !default; +$blue-800: #032f62 !default; +$blue-900: #05264c !default; // Passes with 1/2/300 blues + +// -------- Green -------- +$green-000: #f0fff4 !default; +$green-100: #dcffe4 !default; +$green-200: #bef5cb !default; +$green-300: #85e89d !default; +$green-400: #34d058 !default; +$green-500: #28a745 !default; // Default. passes AA Large +$green-600: #22863a !default; // Text green, passes AA on #fff +$green-700: #176f2c !default; +$green-800: #165c26 !default; +$green-900: #144620 !default; + +// -------- Yellow -------- +$yellow-000: #fffdef !default; +$yellow-100: #fffbdd !default; +$yellow-200: #fff5b1 !default; +$yellow-300: #ffea7f !default; +$yellow-400: #ffdf5d !default; +$yellow-500: #ffd33d !default; +$yellow-600: #f9c513 !default; +$yellow-700: #dbab09 !default; +$yellow-800: #b08800 !default; +$yellow-900: #735c0f !default; + +// -------- Orange -------- +$orange-000: #fff8f2 !default; +$orange-100: #ffebda !default; +$orange-200: #ffd1ac !default; +$orange-300: #ffab70 !default; +$orange-400: #fb8532 !default; +$orange-500: #f66a0a !default; // Default. passes AA Large with #fff +$orange-600: #e36209 !default; +$orange-700: #d15704 !default; +$orange-800: #c24e00 !default; +$orange-900: #a04100 !default; + +// -------- Red -------- +$red-000: #ffeef0 !default; +$red-100: #ffdce0 !default; +$red-200: #fdaeb7 !default; +$red-300: #f97583 !default; +$red-400: #ea4a5a !default; +$red-500: #d73a49 !default; // Default. passes AA +$red-600: #cb2431 !default; +$red-700: #b31d28 !default; +$red-800: #9e1c23 !default; +$red-900: #86181d !default; + +// -------- Purple -------- +$purple-000: #f5f0ff !default; +$purple-100: #e6dcfd !default; +$purple-200: #d1bcf9 !default; +$purple-300: #b392f0 !default; +$purple-400: #8a63d2 !default; +$purple-500: #6f42c1 !default; // passes AA with #fff +$purple-600: #5a32a3 !default; +$purple-700: #4c2889 !default; +$purple-800: #3a1d6e !default; +$purple-900: #29134e !default; + +// -------- Fades -------- +// Black based on same hue as $gray-900 +$black: #1b1f23 !default; +$white: #fff !default; + +$black-fade-15: rgba($black, 0.15) !default; +$black-fade-30: rgba($black, 0.3) !default; +$black-fade-50: rgba($black, 0.5) !default; +$black-fade-70: rgba($black, 0.7) !default; +$black-fade-85: rgba($black, 0.85) !default; + +$white-fade-15: rgba($white, 0.15) !default; +$white-fade-30: rgba($white, 0.3) !default; +$white-fade-50: rgba($white, 0.5) !default; +$white-fade-70: rgba($white, 0.7) !default; +$white-fade-85: rgba($white, 0.85) !default; + +// -------- Color defaults -------- +$red: $red-500 !default; +$purple: $purple-500 !default; +$blue: $blue-500 !default; +$green: $green-500 !default; +$yellow: $yellow-500 !default; +$orange: $orange-500 !default; + +$gray-dark: $gray-900 !default; +$gray-light: $gray-400 !default; +$gray: $gray-500 !default; diff --git a/packages/primer-support/lib/variables/colors.scss b/packages/primer-support/lib/variables/colors.scss new file mode 100644 index 0000000000..36dc3c8a74 --- /dev/null +++ b/packages/primer-support/lib/variables/colors.scss @@ -0,0 +1,67 @@ +@import "color-system.scss"; +// Color variables +// stylelint-disable declaration-bang-space-before + +// State indicators. +$status-pending: desaturate($yellow-700, 15%) !default; + +// Repository type colors +// Should be able to deprecate these in future +$repo-private-text: $black-fade-70 !default; +$repo-private-bg: $yellow-000 !default; +$repo-private-icon: transparentize($yellow-900, 0.5) !default; + +// Highlight used for things like search +$highlight-yellow: rgba(255, 247, 140, 0.5); + +// Border colors +$border-black-fade: $black-fade-15 !default; + +$border-blue: $blue-500 !default; +$border-blue-light: $blue-200 !default; + +$border-green: $green-400 !default; +$border-green-light: desaturate($green-300, 40%) !default; + +$border-purple: $purple !default; + +$border-red: $red !default; +$border-red-light: desaturate($red-300, 60%) !default; + +$border-purple: $purple !default; + +$border-yellow: desaturate($yellow-300, 60%) !default; + +$border-gray-dark: $gray-300 !default; +$border-gray-darker: $gray-700 !default; +$border-gray-light: lighten($gray-200, 3%) !default; +$border-gray: $gray-200 !default; + +// Background colors +$bg-blue-light: $blue-000 !default; +$bg-blue: $blue-500 !default; +$bg-gray-dark: $gray-900 !default; +$bg-gray-light: $gray-000 !default; +$bg-gray: $gray-100 !default; +$bg-green: $green-500 !default; +$bg-green-light: $green-100 !default; +$bg-orange: $orange-700 !default; +$bg-purple: $purple-500 !default; +$bg-purple-light: $purple-000 !default; +$bg-red: $red-500 !default; +$bg-red-light: $red-100 !default; +$bg-white: $white !default; +$bg-yellow: $yellow-500 !default; +$bg-yellow-light: $yellow-200 !default; + +// Text colors +$text-blue: $blue-500 !default; +$text-gray-dark: $gray-900 !default; +$text-gray-light: $gray-500 !default; +$text-gray: $gray-600 !default; +$text-green: $green-500 !default; +$text-orange: $orange-900 !default; +$text-orange-light: $orange-600 !default; +$text-purple: $purple !default; +$text-red: $red-600 !default; +$text-white: $white !default; diff --git a/packages/primer-support/lib/variables/layout.scss b/packages/primer-support/lib/variables/layout.scss new file mode 100644 index 0000000000..8532570de3 --- /dev/null +++ b/packages/primer-support/lib/variables/layout.scss @@ -0,0 +1,58 @@ +// Layout variables +// stylelint-disable declaration-bang-space-before + +// These are our margin and padding utility spacers. The default step size we +// use is 8px. This gives us a key of: +// 0 => 0px +// 1 => 4px +// 2 => 8px +// 3 => 16px +// 4 => 24px +// 5 => 32px +// 6 => 40px +$spacer: 8px !default; +$spacers: ( + 0, + round($spacer / 2), + $spacer, + $spacer * 2, + $spacer * 3, + $spacer * 4, + $spacer * 5 +) !default; + +// Aliases for easy use +$spacer-1: nth($spacers, 2) !default; // 4px +$spacer-2: nth($spacers, 3) !default; // 8px +$spacer-3: nth($spacers, 4) !default; // 12px +$spacer-4: nth($spacers, 5) !default; // 24px +$spacer-5: nth($spacers, 6) !default; // 32px +$spacer-6: nth($spacers, 7) !default; // 40px + +// Fixed-width container variables +$container-width: 980px !default; +$grid-gutter: 10px !default; + +// Breakpoint widths +$width-xs: 0; +$width-sm: 544px; +$width-md: 768px; +$width-lg: 1012px; +$width-xl: 1280px; + +// Responsive container widths +$container-md: $width-md !default; +$container-lg: $width-lg !default; +$container-xl: $width-xl !default; + +// Breakpoints +$breakpoints: ( + // Small screen / phone + sm: $width-sm, + // Medium screen / tablet + md: $width-md, + // Large screen / desktop (980 + (12 * 2)) <= container + gutters + lg: $width-lg, + // Extra large screen / wide desktop + xl: $width-xl +) !default; diff --git a/packages/primer-support/lib/variables/misc.scss b/packages/primer-support/lib/variables/misc.scss new file mode 100644 index 0000000000..ceca69eacf --- /dev/null +++ b/packages/primer-support/lib/variables/misc.scss @@ -0,0 +1,40 @@ +// Miscellaneous variables +// stylelint-disable declaration-bang-space-before + +// Border size +$border-width: 1px !default; +$border-color: $border-gray !default; +$border-style: solid !default; +$border: $border-width $border-color $border-style !default; +$border-radius: 3px !default; + +// Custom explore grid border +$exploregrid-item-border-radius: 4px; + +// Box shadow +$box-shadow: 0 1px 1px rgba($black, 0.1) !default; +$box-shadow-medium: 0 1px 5px $black-fade-15 !default; +$box-shadow-large: 0 1px 15px $black-fade-15 !default; +$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default; + +// Tooltips +$tooltip-max-width: 250px !default; +$tooltip-background-color: rgba($black, 0.8) !default; +$tooltip-text-color: $white !default; +$tooltip-delay: 0.4s !default; +$tooltip-duration: 0.1s !default; + +// Should be moved into custom github css +$stats-switcher-py: 10px; +// Future proof this `height` value by finding the computed line-height, then +// adding the total value of the vertical padding. This var is used to toggle +// between the stats bar and language breakdown. +$stats-viewport-height: ($body-font-size * $body-line-height) + ($stats-switcher-py * 2); + +$min_tab_size: 1; +$max_tab_size: 12; + +// Button and form variables +$form-control-shadow: inset 0 1px 2px rgba($black, 0.075); +$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3); +$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15; diff --git a/packages/primer-support/lib/variables/typography.scss b/packages/primer-support/lib/variables/typography.scss new file mode 100644 index 0000000000..c3d857317a --- /dev/null +++ b/packages/primer-support/lib/variables/typography.scss @@ -0,0 +1,43 @@ +// Typography variables +// stylelint-disable declaration-bang-space-before + +// Heading sizes - mobile +// h4—h6 remain the same size on both mobile & desktop +$h00-size-mobile: 40px !default; +$h0-size-mobile: 32px !default; +$h1-size-mobile: 26px !default; +$h2-size-mobile: 22px !default; +$h3-size-mobile: 18px !default; + +// Heading sizes - desktop +$h00-size: 48px !default; +$h0-size: 40px !default; +$h1-size: 32px !default; +$h2-size: 24px !default; +$h3-size: 20px !default; +$h4-size: 16px !default; +$h5-size: 14px !default; +$h6-size: 12px !default; + +$font-size-small: 12px !default; + +// Font weights +$font-weight-bold: 600 !default; +$font-weight-semibold: 500 !default; +$font-weight-normal: 400 !default; +$font-weight-light: 300 !default; + +// Line heights +$lh-condensed-ultra: 1 !default; +$lh-condensed: 1.25 !default; +$lh-default: 1.5 !default; + +// Font stacks +$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; + +// Monospace font stack +$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default; + +// The base body size +$body-font-size: 14px !default; +$body-line-height: $lh-default !default; diff --git a/packages/primer-support/package.json b/packages/primer-support/package.json new file mode 100644 index 0000000000..3208544525 --- /dev/null +++ b/packages/primer-support/package.json @@ -0,0 +1,34 @@ +{ + "version": "4.0.3", + "name": "primer-support", + "description": "Sass variables, mixins, and functions for use in our components.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "index.scss", + "files": [ + "index.scss", + "lib" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-support", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "test": "stylelint **/*.scss -c .stylelintrc.json -s scss" + }, + "devDependencies": { + "stylelint": "*", + "stylelint-config-primer": "*" + }, + "keywords": [ + "primer", + "css", + "github", + "primercss", + "mixins", + "functions", + "variables", + "scss" + ] +} diff --git a/packages/primer-table-object/.gitignore b/packages/primer-table-object/.gitignore new file mode 100644 index 0000000000..01a5e93c12 --- /dev/null +++ b/packages/primer-table-object/.gitignore @@ -0,0 +1,3 @@ +node_modules +build +*.log diff --git a/packages/primer-table-object/.npmignore b/packages/primer-table-object/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/packages/primer-table-object/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/packages/primer-table-object/.postcss.json b/packages/primer-table-object/.postcss.json new file mode 100644 index 0000000000..0d882f47f2 --- /dev/null +++ b/packages/primer-table-object/.postcss.json @@ -0,0 +1,6 @@ +{ + "use": ["autoprefixer"], + "autoprefixer": { + "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11" + } +} diff --git a/packages/primer-table-object/.stylelintrc.json b/packages/primer-table-object/.stylelintrc.json new file mode 100644 index 0000000000..19028f9885 --- /dev/null +++ b/packages/primer-table-object/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "stylelint-config-primer" + ] +} diff --git a/packages/primer-table-object/CHANGELOG.md b/packages/primer-table-object/CHANGELOG.md new file mode 100644 index 0000000000..584528565d --- /dev/null +++ b/packages/primer-table-object/CHANGELOG.md @@ -0,0 +1,64 @@ +# v1.0.3 + + * Bump all the version numbers for readme - Mu-An Chiou [github/github@a9d152f](https://github.com/github/github/commit/a9d152f) + * Fix all the travis badge URL - Mu-An Chiou [github/github@9cd6d84](https://github.com/github/github/commit/9cd6d84) + +# v1.0.2 + + * More versions - Jon Rohan [github/github@e12ba2e](https://github.com/github/github/commit/e12ba2e) + * bumping the version - Jon Rohan [github/github@4a72b25](https://github.com/github/github/commit/4a72b25) + * Pointing main js file to build - Jon Rohan [github/github@3575651](https://github.com/github/github/commit/3575651) + * don't change the versions yet - Jon Rohan [github/github@6bebcff](https://github.com/github/github/commit/6bebcff) + * Removing needless disables - Jon Rohan [github/github@6233c40](https://github.com/github/github/commit/6233c40) + * Add aria-label to input and spacing for button - Mu-An Chiou [github/github@59cabaa](https://github.com/github/github/commit/59cabaa) + * Sorting and table objects. We also don't need homepage - Jon Rohan [github/github@798629d](https://github.com/github/github/commit/798629d) + * Removing duplicate headers - Jon Rohan [github/github@225cee1](https://github.com/github/github/commit/225cee1) + +# v1.0.0 + + * Copy chnages - Caleb Winters [github/github@7ac71e6](https://github.com/github/github/commit/7ac71e6) + * Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) + * Separating out modules into primer-core and primer-product - Jon Rohan [github/github@ddf698c](https://github.com/github/github/commit/ddf698c) + +# v0.2.4 + + * Updating version - Jon Rohan [github/github@6bf5fe5](https://github.com/github/github/commit/6bf5fe5) + * Updating link to real primer-css repository - Jon Rohan [github/github@bbaedda](https://github.com/github/github/commit/bbaedda) + * Updating the modules stylelint - Jon Rohan [github/github@389609f](https://github.com/github/github/commit/389609f) + * Make sure the modules build without error before publishing - Jon Rohan [github/github@57ac5e6](https://github.com/github/github/commit/57ac5e6) + * Adding documentation status to most of the modules - Jon Rohan [github/github@b97695c](https://github.com/github/github/commit/b97695c) + +# v0.2.3 + + * Publishing a new version - Jon Rohan [github/github@eed0e96](https://github.com/github/github/commit/eed0e96) + * Adding link to homepage in readme docs - Jon Rohan [github/github@633f421](https://github.com/github/github/commit/633f421) + * Removing some unnecessary lint plugins and using native - Jon Rohan [github/github@2ae0070](https://github.com/github/github/commit/2ae0070) + * including no-utility lint plugin - Jon Rohan [github/github@5cb86ed](https://github.com/github/github/commit/5cb86ed) + * Adding lint plugins for new config - Jon Rohan [github/github@7fb9613](https://github.com/github/github/commit/7fb9613) + +# v0.2.2 + + * Mentioning the build file - Jon Rohan [github/github@64ca4a7](https://github.com/github/github/commit/64ca4a7) + * Including build/build.css in distributed npm module - Jon Rohan [github/github@e4effbf](https://github.com/github/github/commit/e4effbf) + * Updating modules to run on prepublish to include build.css in distribution - Jon Rohan [github/github@5b573a0](https://github.com/github/github/commit/5b573a0) + * Re-ordering the docs to the bottom of the readme - Jon Rohan [github/github@9c1f291](https://github.com/github/github/commit/9c1f291) + * Updating the link - Jon Rohan [github/github@f67684b](https://github.com/github/github/commit/f67684b) + +# v0.2.1 + + * Bumping version to include postcss.json in npm - Jon Rohan [github/github@9e560ba](https://github.com/github/github/commit/9e560ba) + * Using stylelint to lint the modules instead of scss_lint - Jon Rohan [github/github@cb0b8fd](https://github.com/github/github/commit/cb0b8fd) + +# v0.2.0 + + * Cutting new version 0.2.0 - Jon Rohan [github/github@a6f6586](https://github.com/github/github/commit/a6f6586) + * Don't link requirements - Jon Rohan [github/github@7740e81](https://github.com/github/github/commit/7740e81) + * Updating the README with more detailed instructions - Jon Rohan [github/github@5dd7c34](https://github.com/github/github/commit/5dd7c34) + * Reorganize the module folders into a more flexible organization - Jon Rohan [github/github@5a07101](https://github.com/github/github/commit/5a07101) + * cleaning up the package.json files - Jon Rohan [github/github@77763a1](https://github.com/github/github/commit/77763a1) + * Adding npm version badges to readme - Jon Rohan [github/github@90b1871](https://github.com/github/github/commit/90b1871) + * Adding tavisci build badges to the readmes - Jon Rohan [github/github@1a6126f](https://github.com/github/github/commit/1a6126f) + +# v0.1.0 + + * Creating the final css modules, and removing npm primer-css - Jon Rohan [github/github@fb3fa3b](https://github.com/github/github/commit/fb3fa3b) \ No newline at end of file diff --git a/packages/primer-table-object/LICENSE b/packages/primer-table-object/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-table-object/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-table-object/README.md b/packages/primer-table-object/README.md new file mode 100644 index 0000000000..43d5996c1e --- /dev/null +++ b/packages/primer-table-object/README.md @@ -0,0 +1,69 @@ +# Primer CSS table object + +[![npm version](http://img.shields.io/npm/v/primer-table-object.svg)](https://www.npmjs.org/package/primer-table-object) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Table object is a module for creating dynamically resizable elements that always sit on the same horizontal line (e.g., they never break to a new line). Using table styles in our CSS means it’s cross browser friendly back to at least IE9. + +This repository is a module of the full [primer-css][primer-css] repository. + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-table-object` with this command. + +``` +$ npm install --save primer-table-object +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-table-object/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. + +``` +$ npm run build +``` + +## Documentation + + + +The table object is a module for creating dynamically resizable elements that always sit on the same horizontal line (e.g., they never break to a new line). Using table styles in our CSS means it's cross browser friendly back to at least IE9. + +Additional `margin` or `padding` may be required to properly space content. + +```html +
+
+ +
+
+ +
+
+``` + + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-table-object/index.scss b/packages/primer-table-object/index.scss new file mode 100644 index 0000000000..2adb46283b --- /dev/null +++ b/packages/primer-table-object/index.scss @@ -0,0 +1 @@ +@import "./lib/table-object.scss"; diff --git a/packages/primer-table-object/lib/table-object.scss b/packages/primer-table-object/lib/table-object.scss new file mode 100644 index 0000000000..353c7328ca --- /dev/null +++ b/packages/primer-table-object/lib/table-object.scss @@ -0,0 +1,20 @@ +// TableObject is a module for creating dynamically resizable elements that +// always sit on the same horizontal line (e.g., they never wrap). Using +// tables means it's cross browser friendly. + +.TableObject { + display: table; +} + +// Place this on every "cell" +.TableObject-item { + display: table-cell; + width: 1%; + white-space: nowrap; + vertical-align: middle; +} + +// Place this on the largest or most important "cell" +.TableObject-item--primary { + width: 99%; +} diff --git a/packages/primer-table-object/package.json b/packages/primer-table-object/package.json new file mode 100644 index 0000000000..324f42cd0b --- /dev/null +++ b/packages/primer-table-object/package.json @@ -0,0 +1,38 @@ +{ + "version": "1.0.5", + "name": "primer-table-object", + "description": "A module for creating dynamically resizable elements that always sit on the same horizontal line.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "index.scss", + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-table-object", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss" + }, + "dependencies": { + "primer-support": "^4.0.3" + }, + "devDependencies": { + "primer-module-build": "*", + "stylelint": "*", + "stylelint-config-primer": "*" + }, + "keywords": [ + "primer", + "css", + "github", + "primercss" + ] +} diff --git a/packages/primer-tables/.gitignore b/packages/primer-tables/.gitignore new file mode 100644 index 0000000000..01a5e93c12 --- /dev/null +++ b/packages/primer-tables/.gitignore @@ -0,0 +1,3 @@ +node_modules +build +*.log diff --git a/packages/primer-tables/.npmignore b/packages/primer-tables/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/packages/primer-tables/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/packages/primer-tables/.postcss.json b/packages/primer-tables/.postcss.json new file mode 100644 index 0000000000..0d882f47f2 --- /dev/null +++ b/packages/primer-tables/.postcss.json @@ -0,0 +1,6 @@ +{ + "use": ["autoprefixer"], + "autoprefixer": { + "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11" + } +} diff --git a/packages/primer-tables/.stylelintrc.json b/packages/primer-tables/.stylelintrc.json new file mode 100644 index 0000000000..19028f9885 --- /dev/null +++ b/packages/primer-tables/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "stylelint-config-primer" + ] +} diff --git a/packages/primer-tables/CHANGELOG.md b/packages/primer-tables/CHANGELOG.md new file mode 100644 index 0000000000..2e300ee787 --- /dev/null +++ b/packages/primer-tables/CHANGELOG.md @@ -0,0 +1,29 @@ +# v0.1.2 + + * update package version for marketing tables after variable updates - broccolini [github/github@382f55f](https://github.com/github/github/commit/382f55f) + * @broccolini's feedback - Sophie Shepherd [github/github@f9699ef](https://github.com/github/github/commit/f9699ef) + * delete all the marketing color variables, start working on buttons! woo! - Sophie Shepherd [github/github@3719e3c](https://github.com/github/github/commit/3719e3c) + +# v0.1.1 + + * bumping the version - Jon Rohan [github/github@4a72b25](https://github.com/github/github/commit/4a72b25) + * Pointing main js file to build - Jon Rohan [github/github@3575651](https://github.com/github/github/commit/3575651) + * don't change the versions yet - Jon Rohan [github/github@6bebcff](https://github.com/github/github/commit/6bebcff) + * Bumping version - Jon Rohan [github/github@df8b91c](https://github.com/github/github/commit/df8b91c) + * Cleaning up devDependencies versions and simplifying npm scripts - Jon Rohan [github/github@2c42571](https://github.com/github/github/commit/2c42571) + * Sorting and table objects. We also don't need homepage - Jon Rohan [github/github@798629d](https://github.com/github/github/commit/798629d) + * Removing duplicate headers - Jon Rohan [github/github@225cee1](https://github.com/github/github/commit/225cee1) + +# v0.1.0 + + * Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) + * Fix broken paths - Patrick Marsceill [github/github@b5dc395](https://github.com/github/github/commit/b5dc395) + * Update the names in the README files - Patrick Marsceill [github/github@75fed58](https://github.com/github/github/commit/75fed58) + * Update names for npm publising - Patrick Marsceill [github/github@451f97a](https://github.com/github/github/commit/451f97a) + * Fix import path across all scss files - Patrick Marsceill [github/github@a566f31](https://github.com/github/github/commit/a566f31) + * Linting - Patrick Marsceill [github/github@987f2ad](https://github.com/github/github/commit/987f2ad) + * Add type & tables to docs - Sophie Shepherd [github/github@31ff53f](https://github.com/github/github/commit/31ff53f) + * Fix variable collisions and add basecoat to site to test sass compilation errors - Patrick Marsceill [github/github@c73eee3](https://github.com/github/github/commit/c73eee3) + * Remove basecoat - Patrick Marsceill [github/github@1b1503d](https://github.com/github/github/commit/1b1503d) + * prefix bc => marketing - Patrick Marsceill [github/github@04d509a](https://github.com/github/github/commit/04d509a) + * pull in ye olde basecoat files from branch - Patrick Marsceill [github/github@09d47e9](https://github.com/github/github/commit/09d47e9) \ No newline at end of file diff --git a/packages/primer-tables/LICENSE b/packages/primer-tables/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-tables/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-tables/README.md b/packages/primer-tables/README.md new file mode 100644 index 0000000000..c1a990e42b --- /dev/null +++ b/packages/primer-tables/README.md @@ -0,0 +1,57 @@ +# Primer Marketing CSS Tables + +[![npm version](http://img.shields.io/npm/v/primer-tables.svg)](https://www.npmjs.org/package/primer-tables) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Styles to display tabular data for marketing websites at GitHub. + +This repository is a module of the full [primer-css][primer] repository. + +## Documentation + + + +Documentation & refactor coming very soon + + + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-tables` with this command. + +``` +$ npm install --save primer-tables +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-tables/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` + +``` +$ npm run build +``` + +## License + +MIT © [GitHub](https://github.com/) + +[primer]: https://github.com/primer/primer +[primer-support]: https://github.com/primer/primer-support +[support]: https://github.com/primer/primer-support +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-tables/index.scss b/packages/primer-tables/index.scss new file mode 100644 index 0000000000..1505afe54a --- /dev/null +++ b/packages/primer-tables/index.scss @@ -0,0 +1,4 @@ +// support files +@import "primer-support/index.scss"; +@import "primer-marketing-support/index.scss"; +@import "./lib/tables.scss"; diff --git a/packages/primer-tables/lib/tables.scss b/packages/primer-tables/lib/tables.scss new file mode 100644 index 0000000000..68293d4c76 --- /dev/null +++ b/packages/primer-tables/lib/tables.scss @@ -0,0 +1,39 @@ +// stylelint-disable selector-no-type, selector-max-compound-selectors + +.data-table { + width: 100%; + margin-top: $spacer-3; + border-collapse: collapse; + border: $border; + box-shadow: 0 1px 1px rgba($black, 0.05); + + th { + font-weight: 400; + text-align: left; + } + + td, + th { + padding: $spacer-3; + border-right: $border; + border-bottom: $border; + } + + tbody { + th { + width: 25%; + } + + th, + td { + border-bottom-color: $border-gray; + } + + tr:last-child { + th, + td { + border-bottom: $border; + } + } + } +} diff --git a/packages/primer-tables/package.json b/packages/primer-tables/package.json new file mode 100644 index 0000000000..c50eb33a48 --- /dev/null +++ b/packages/primer-tables/package.json @@ -0,0 +1,41 @@ +{ + "version": "0.1.4", + "name": "primer-tables", + "description": "Styles to display tabular data for marketing websites at GitHub.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "build/build.css", + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-tables", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss" + }, + "dependencies": { + "primer-marketing-support": "^0.5.2", + "primer-support": "^4.0.3" + }, + "devDependencies": { + "primer-module-build": "*", + "stylelint": "*", + "stylelint-config-primer": "*" + }, + "keywords": [ + "css", + "github", + "primer", + "primercss", + "style", + "tables" + ] +} diff --git a/packages/primer-tooltips/.gitignore b/packages/primer-tooltips/.gitignore new file mode 100644 index 0000000000..01a5e93c12 --- /dev/null +++ b/packages/primer-tooltips/.gitignore @@ -0,0 +1,3 @@ +node_modules +build +*.log diff --git a/packages/primer-tooltips/.npmignore b/packages/primer-tooltips/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/packages/primer-tooltips/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/packages/primer-tooltips/.postcss.json b/packages/primer-tooltips/.postcss.json new file mode 100644 index 0000000000..0d882f47f2 --- /dev/null +++ b/packages/primer-tooltips/.postcss.json @@ -0,0 +1,6 @@ +{ + "use": ["autoprefixer"], + "autoprefixer": { + "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11" + } +} diff --git a/packages/primer-tooltips/.stylelintrc.json b/packages/primer-tooltips/.stylelintrc.json new file mode 100644 index 0000000000..19028f9885 --- /dev/null +++ b/packages/primer-tooltips/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "stylelint-config-primer" + ] +} diff --git a/packages/primer-tooltips/CHANGELOG.md b/packages/primer-tooltips/CHANGELOG.md new file mode 100644 index 0000000000..995c81985e --- /dev/null +++ b/packages/primer-tooltips/CHANGELOG.md @@ -0,0 +1,79 @@ +# v0.5.4 + + * Bump version and update changelog - Mu-An Chiou [github/github@8bed463](https://github.com/github/github/commit/8bed463)7ff6 + * Remove word-break and use word-wrap instead - Mu-An Chiou [github/github@35f9c6b](https://github.com/github/github/commit/35f9c6b)6ad8 + +# v0.5.3 + + * Bump all the version numbers for readme - Mu-An Chiou [github/github@a9d152f](https://github.com/github/github/commit/a9d152f) + * Fix all the travis badge URL - Mu-An Chiou [github/github@9cd6d84](https://github.com/github/github/commit/9cd6d84) + +# v0.5.2 + + * bumping the version - Jon Rohan [github/github@4a72b25](https://github.com/github/github/commit/4a72b25) + * Pointing main js file to build - Jon Rohan [github/github@3575651](https://github.com/github/github/commit/3575651) + * don't change the versions yet - Jon Rohan [github/github@6bebcff](https://github.com/github/github/commit/6bebcff) + * Add note on aria-label and reminder to tooltip responsibly - Mu-An Chiou [github/github@44adee6](https://github.com/github/github/commit/44adee6) + +# v0.5.1 + + * add docs for multi-line tooltips - broccolini [github/github@9524337](https://github.com/github/github/commit/9524337) + * patch version - Jon Rohan [github/github@97acc55](https://github.com/github/github/commit/97acc55) + * typo - Jon Rohan [github/github@eb0773b](https://github.com/github/github/commit/eb0773b) + +# v0.5.0 + + * Cutting new versions of primer modules - Jon Rohan [github/github@157f5ab](https://github.com/github/github/commit/157f5ab) + * Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) + * Separating out modules into primer-core and primer-product - Jon Rohan [github/github@ddf698c](https://github.com/github/github/commit/ddf698c) + +# v0.4.0 + + * Updating to major new version - Jon Rohan [github/github@f0df999](https://github.com/github/github/commit/f0df999) + * finding more left/right - Jon Rohan [github/github@c80b828](https://github.com/github/github/commit/c80b828) + +# v0.3.0 + + * Updating version - Jon Rohan [github/github@6bf5fe5](https://github.com/github/github/commit/6bf5fe5) + * Updating link to real primer-css repository - Jon Rohan [github/github@bbaedda](https://github.com/github/github/commit/bbaedda) + * Updating the modules stylelint - Jon Rohan [github/github@389609f](https://github.com/github/github/commit/389609f) + * Add back tooltip multiline bug - Jon Rohan [github/github@4a32708](https://github.com/github/github/commit/4a32708) + * dropping some browser hacks - Jon Rohan [github/github@2969e8a](https://github.com/github/github/commit/2969e8a) + * Make sure the modules build without error before publishing - Jon Rohan [github/github@57ac5e6](https://github.com/github/github/commit/57ac5e6) + * Adding documentation status to most of the modules - Jon Rohan [github/github@b97695c](https://github.com/github/github/commit/b97695c) + +# v0.2.3 + + * Publishing a new version - Jon Rohan [github/github@eed0e96](https://github.com/github/github/commit/eed0e96) + * Adding link to homepage in readme docs - Jon Rohan [github/github@633f421](https://github.com/github/github/commit/633f421) + * Removing some unnecessary lint plugins and using native - Jon Rohan [github/github@2ae0070](https://github.com/github/github/commit/2ae0070) + * including no-utility lint plugin - Jon Rohan [github/github@5cb86ed](https://github.com/github/github/commit/5cb86ed) + * Adding lint plugins for new config - Jon Rohan [github/github@7fb9613](https://github.com/github/github/commit/7fb9613) + +# v0.2.2 + + * Mentioning the build file - Jon Rohan [github/github@64ca4a7](https://github.com/github/github/commit/64ca4a7) + * Including build/build.css in distributed npm module - Jon Rohan [github/github@e4effbf](https://github.com/github/github/commit/e4effbf) + * Updating modules to run on prepublish to include build.css in distribution - Jon Rohan [github/github@5b573a0](https://github.com/github/github/commit/5b573a0) + * Re-ordering the docs to the bottom of the readme - Jon Rohan [github/github@9c1f291](https://github.com/github/github/commit/9c1f291) + * Updating the link - Jon Rohan [github/github@f67684b](https://github.com/github/github/commit/f67684b) + +# v0.2.1 + + * Bumping version to include postcss.json in npm - Jon Rohan [github/github@9e560ba](https://github.com/github/github/commit/9e560ba) + * Using stylelint to lint the modules instead of scss_lint - Jon Rohan [github/github@cb0b8fd](https://github.com/github/github/commit/cb0b8fd) + +# v0.2.0 + + * Cutting new version 0.2.0 - Jon Rohan [github/github@a6f6586](https://github.com/github/github/commit/a6f6586) + * Don't link requirements - Jon Rohan [github/github@7740e81](https://github.com/github/github/commit/7740e81) + * Updating the README with more detailed instructions - Jon Rohan [github/github@5dd7c34](https://github.com/github/github/commit/5dd7c34) + * Reorganize the module folders into a more flexible organization - Jon Rohan [github/github@5a07101](https://github.com/github/github/commit/5a07101) + * cleaning up the package.json files - Jon Rohan [github/github@77763a1](https://github.com/github/github/commit/77763a1) + * Adding npm version badges to readme - Jon Rohan [github/github@90b1871](https://github.com/github/github/commit/90b1871) + * Adding tavisci build badges to the readmes - Jon Rohan [github/github@1a6126f](https://github.com/github/github/commit/1a6126f) + +# v0.1.0 + + * Updating support dependency versions - Jon Rohan [github/github@76d97ec](https://github.com/github/github/commit/76d97ec) + * Moving tooltips from primer/primer to a module - Jon Rohan [github/github@3d28acb](https://github.com/github/github/commit/3d28acb) \ No newline at end of file diff --git a/packages/primer-tooltips/LICENSE b/packages/primer-tooltips/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-tooltips/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-tooltips/README.md b/packages/primer-tooltips/README.md new file mode 100644 index 0000000000..148c532f62 --- /dev/null +++ b/packages/primer-tooltips/README.md @@ -0,0 +1,117 @@ +# Primer CSS Tooltips + +[![npm version](http://img.shields.io/npm/v/primer-tooltips.svg)](https://www.npmjs.org/package/primer-tooltips) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an aria-label attribute. + +This repository is a module of the full [primer-css][primer-css] repository. + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-tooltips` with this command. + +``` +$ npm install --save primer-tooltips +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-tooltips/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. + +``` +$ npm run build +``` + +## Documentation + + + +Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an `aria-label` attribute. + +**Attention**: we use `aria-label` for tooltips instead of something like `data-tooltip` because it is crucial that the tooltip content is available for screen reader users as well. However, `aria-label` **replaces** the text content of an element for screen reader users, so only use tooltip if there is no better way to present the information, or consider using `title` for supplement information. + +In addition, you'll want to specify a direction: + +- `.tooltipped-n` +- `.tooltipped-ne` +- `.tooltipped-e` +- `.tooltipped-se` +- `.tooltipped-s` +- `.tooltipped-sw` +- `.tooltipped-w` +- `.tooltipped-nw` + +Tooltip classes will conflict with Octicon classes, and as such, must go on a parent element instead of the icon. + +```html + + Tooltip North + + + Tooltip North East + + + Tooltip East + + + Tooltip South East + + + Tooltip South + + + Tooltip South West + + + Tooltip West + + + Tooltip North West + +``` + +#### Tooltips with multiple lines +Use `.tooltipped-multiline` when you have long content. This style has some limitations: you cannot pre-format the text with newlines, and tooltips are limited to a max-width of `250px`. + + +```html + + Tooltip with multiple lines + +``` + +#### Tooltips No Delay + +By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a modifier class you can use to override this. `.tooltipped-no-delay` + +```html + + Tooltip no delay + +``` + + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-tooltips/index.scss b/packages/primer-tooltips/index.scss new file mode 100644 index 0000000000..688f6f56e9 --- /dev/null +++ b/packages/primer-tooltips/index.scss @@ -0,0 +1,2 @@ +@import "primer-support/index.scss"; +@import "./lib/tooltips.scss"; diff --git a/packages/primer-tooltips/lib/tooltips.scss b/packages/primer-tooltips/lib/tooltips.scss new file mode 100644 index 0000000000..6d9eb072d9 --- /dev/null +++ b/packages/primer-tooltips/lib/tooltips.scss @@ -0,0 +1,280 @@ +.tooltipped { + position: relative; +} + +// This is the tooltip bubble +.tooltipped::after { + position: absolute; + z-index: 1000000; + display: none; + padding: 5px 8px; + font: normal normal 11px/1.5 $body-font; + -webkit-font-smoothing: subpixel-antialiased; + color: $tooltip-text-color; + text-align: center; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-wrap: break-word; + white-space: pre; + pointer-events: none; + content: attr(aria-label); + background: $tooltip-background-color; + border-radius: 3px; + opacity: 0; +} + +// This is the tooltip arrow +.tooltipped::before { + position: absolute; + z-index: 1000001; + display: none; + width: 0; + height: 0; + color: $tooltip-background-color; + pointer-events: none; + content: ""; + border: 5px solid transparent; + opacity: 0; +} + +// delay animation for tooltip +@keyframes tooltip-appear { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +// This will indicate when we'll activate the tooltip +.tooltipped:hover, +.tooltipped:active, +.tooltipped:focus { + &::before, + &::after { + display: inline-block; + text-decoration: none; + animation-name: tooltip-appear; + animation-duration: $tooltip-duration; + animation-fill-mode: forwards; + animation-timing-function: ease-in; + animation-delay: $tooltip-delay; + } +} + +.tooltipped-no-delay:hover, +.tooltipped-no-delay:active, +.tooltipped-no-delay:focus { + &::before, + &::after { + opacity: 1; + animation: none; + } +} + +.tooltipped-multiline:hover, +.tooltipped-multiline:active, +.tooltipped-multiline:focus { + &::after { + display: table-cell; + } +} + +// Tooltipped south +.tooltipped-s, +.tooltipped-se, +.tooltipped-sw { + &::after { + top: 100%; + right: 50%; + margin-top: 5px; + } + + &::before { + top: auto; + right: 50%; + bottom: -5px; + margin-right: -5px; + border-bottom-color: $tooltip-background-color; + } +} + +.tooltipped-se { + &::after { + right: auto; + left: 50%; + margin-left: -15px; + } +} + +.tooltipped-sw::after { + margin-right: -15px; +} + +// Tooltips above the object +.tooltipped-n, +.tooltipped-ne, +.tooltipped-nw { + &::after { + right: 50%; + bottom: 100%; + margin-bottom: 5px; + } + + &::before { + top: -5px; + right: 50%; + bottom: auto; + margin-right: -5px; + border-top-color: $tooltip-background-color; + } +} + +.tooltipped-ne { + &::after { + right: auto; + left: 50%; + margin-left: -15px; + } +} + +.tooltipped-nw::after { + margin-right: -15px; +} + +// Move the tooltip body to the center of the object. +.tooltipped-s::after, +.tooltipped-n::after { + transform: translateX(50%); +} + +// Tooltipped to the left +.tooltipped-w { + &::after { + right: 100%; + bottom: 50%; + margin-right: 5px; + transform: translateY(50%); + } + + &::before { + top: 50%; + bottom: 50%; + left: -5px; + margin-top: -5px; + border-left-color: $tooltip-background-color; + } +} + +// tooltipped to the right +.tooltipped-e { + &::after { + bottom: 50%; + left: 100%; + margin-left: 5px; + transform: translateY(50%); + } + + &::before { + top: 50%; + right: -5px; + bottom: 50%; + margin-top: -5px; + border-right-color: $tooltip-background-color; + } +} + +// Multiline tooltips +// +// `.tooltipped-multiline` Add this class when you have long content. +// The downside is you cannot preformat the text with newlines and `[w,e]` +// are always `$tooltip-max-width` wide. +.tooltipped-multiline { + &::after { + width: max-content; + max-width: $tooltip-max-width; + word-wrap: break-word; + white-space: pre-line; + border-collapse: separate; + } + + &.tooltipped-s::after, + &.tooltipped-n::after { + right: auto; + left: 50%; + transform: translateX(-50%); + } + + &.tooltipped-w::after, + &.tooltipped-e::after { + right: 100%; + } +} + +@media screen and (min-width: 0\0) { + // IE11 + .tooltipped-multiline::after { + width: $tooltip-max-width; + } +} + +// Sticky tooltips +// +// Always show the tooltip. +.tooltipped-sticky { + &::before, + &::after { + display: inline-block; + } + + &.tooltipped-multiline { + &::after { + display: table-cell; + } + } +} + +// Alert tooltips +// +// Colors for different alert states. +@mixin colorizeTooltip($text-color, $background-color) { + &::after { + color: $text-color; + background: $background-color; + } + + &.tooltipped-s, + &.tooltipped-se, + &.tooltipped-sw { + &::before { + border-bottom-color: $background-color; + } + } + + &.tooltipped-n, + &.tooltipped-ne, + &.tooltipped-nw { + &::before { + border-top-color: $background-color; + } + } + + &.tooltipped-e::before { + border-right-color: $background-color; + } + + &.tooltipped-w::before { + border-left-color: $background-color; + } +} + +@include retina-media-query { + .tooltipped-w::after { + // weird bug on retina + margin-right: 4.5px; + } +} diff --git a/packages/primer-tooltips/package.json b/packages/primer-tooltips/package.json new file mode 100644 index 0000000000..3ca3900ba0 --- /dev/null +++ b/packages/primer-tooltips/package.json @@ -0,0 +1,38 @@ +{ + "version": "0.5.6", + "name": "primer-tooltips", + "description": "Add tooltips built entirely in CSS to nearly any element.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "index.scss", + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-tooltips", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss" + }, + "dependencies": { + "primer-support": "^4.0.3" + }, + "devDependencies": { + "primer-module-build": "*", + "stylelint": "*", + "stylelint-config-primer": "*" + }, + "keywords": [ + "primer", + "css", + "github", + "primercss" + ] +} diff --git a/packages/primer-truncate/.gitignore b/packages/primer-truncate/.gitignore new file mode 100644 index 0000000000..01a5e93c12 --- /dev/null +++ b/packages/primer-truncate/.gitignore @@ -0,0 +1,3 @@ +node_modules +build +*.log diff --git a/packages/primer-truncate/.npmignore b/packages/primer-truncate/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/packages/primer-truncate/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/packages/primer-truncate/.postcss.json b/packages/primer-truncate/.postcss.json new file mode 100644 index 0000000000..0d882f47f2 --- /dev/null +++ b/packages/primer-truncate/.postcss.json @@ -0,0 +1,6 @@ +{ + "use": ["autoprefixer"], + "autoprefixer": { + "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11" + } +} diff --git a/packages/primer-truncate/.stylelintrc.json b/packages/primer-truncate/.stylelintrc.json new file mode 100644 index 0000000000..19028f9885 --- /dev/null +++ b/packages/primer-truncate/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "stylelint-config-primer" + ] +} diff --git a/packages/primer-truncate/CHANGELOG.md b/packages/primer-truncate/CHANGELOG.md new file mode 100644 index 0000000000..87892e13b3 --- /dev/null +++ b/packages/primer-truncate/CHANGELOG.md @@ -0,0 +1,60 @@ +# v0.3.2 + + * Bump all the version numbers for readme - Mu-An Chiou [github/github@a9d152f](https://github.com/github/github/commit/a9d152f) + * Fix all the travis badge URL - Mu-An Chiou [github/github@9cd6d84](https://github.com/github/github/commit/9cd6d84) + +# v0.3.1 + + * bumping the version - Jon Rohan [github/github@4a72b25](https://github.com/github/github/commit/4a72b25) + * Pointing main js file to build - Jon Rohan [github/github@3575651](https://github.com/github/github/commit/3575651) + * don't change the versions yet - Jon Rohan [github/github@6bebcff](https://github.com/github/github/commit/6bebcff) + * Add note about so text is still accessible - Mu-An Chiou [github/github@3aad0d2](https://github.com/github/github/commit/3aad0d2) + +# v0.3.0 + + * Cutting new versions of primer modules - Jon Rohan [github/github@157f5ab](https://github.com/github/github/commit/157f5ab) + * Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) + * Separating out modules into primer-core and primer-product - Jon Rohan [github/github@ddf698c](https://github.com/github/github/commit/ddf698c) + +# v0.2.4 + + * Updating version - Jon Rohan [github/github@6bf5fe5](https://github.com/github/github/commit/6bf5fe5) + * Updating link to real primer-css repository - Jon Rohan [github/github@bbaedda](https://github.com/github/github/commit/bbaedda) + * Updating the modules stylelint - Jon Rohan [github/github@389609f](https://github.com/github/github/commit/389609f) + * Make sure the modules build without error before publishing - Jon Rohan [github/github@57ac5e6](https://github.com/github/github/commit/57ac5e6) + * Adding documentation status to most of the modules - Jon Rohan [github/github@b97695c](https://github.com/github/github/commit/b97695c) + +# v0.2.3 + + * Publishing a new version - Jon Rohan [github/github@eed0e96](https://github.com/github/github/commit/eed0e96) + * Adding link to homepage in readme docs - Jon Rohan [github/github@633f421](https://github.com/github/github/commit/633f421) + * Removing some unnecessary lint plugins and using native - Jon Rohan [github/github@2ae0070](https://github.com/github/github/commit/2ae0070) + * including no-utility lint plugin - Jon Rohan [github/github@5cb86ed](https://github.com/github/github/commit/5cb86ed) + * Adding lint plugins for new config - Jon Rohan [github/github@7fb9613](https://github.com/github/github/commit/7fb9613) + +# v0.2.2 + + * Mentioning the build file - Jon Rohan [github/github@64ca4a7](https://github.com/github/github/commit/64ca4a7) + * Including build/build.css in distributed npm module - Jon Rohan [github/github@e4effbf](https://github.com/github/github/commit/e4effbf) + * Updating modules to run on prepublish to include build.css in distribution - Jon Rohan [github/github@5b573a0](https://github.com/github/github/commit/5b573a0) + * Re-ordering the docs to the bottom of the readme - Jon Rohan [github/github@9c1f291](https://github.com/github/github/commit/9c1f291) + * Updating the link - Jon Rohan [github/github@f67684b](https://github.com/github/github/commit/f67684b) + +# v0.2.1 + + * Bumping version to include postcss.json in npm - Jon Rohan [github/github@9e560ba](https://github.com/github/github/commit/9e560ba) + * Using stylelint to lint the modules instead of scss_lint - Jon Rohan [github/github@cb0b8fd](https://github.com/github/github/commit/cb0b8fd) + +# v0.2.0 + + * Cutting new version 0.2.0 - Jon Rohan [github/github@a6f6586](https://github.com/github/github/commit/a6f6586) + * Don't link requirements - Jon Rohan [github/github@7740e81](https://github.com/github/github/commit/7740e81) + * Updating the README with more detailed instructions - Jon Rohan [github/github@5dd7c34](https://github.com/github/github/commit/5dd7c34) + * Reorganize the module folders into a more flexible organization - Jon Rohan [github/github@5a07101](https://github.com/github/github/commit/5a07101) + * cleaning up the package.json files - Jon Rohan [github/github@77763a1](https://github.com/github/github/commit/77763a1) + * Adding npm version badges to readme - Jon Rohan [github/github@90b1871](https://github.com/github/github/commit/90b1871) + * Adding tavisci build badges to the readmes - Jon Rohan [github/github@1a6126f](https://github.com/github/github/commit/1a6126f) + +# v0.1.0 + + * Moving truncate from primer/primer to github - Jon Rohan [github/github@e5e4a90](https://github.com/github/github/commit/e5e4a90) \ No newline at end of file diff --git a/packages/primer-truncate/LICENSE b/packages/primer-truncate/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-truncate/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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. diff --git a/packages/primer-truncate/README.md b/packages/primer-truncate/README.md new file mode 100644 index 0000000000..a679ce6578 --- /dev/null +++ b/packages/primer-truncate/README.md @@ -0,0 +1,68 @@ +# Primer CSS Truncate + +[![npm version](http://img.shields.io/npm/v/primer-truncate.svg)](https://www.npmjs.org/package/primer-truncate) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> .css-truncate will shorten text with an ellipsis. The maximum width of the truncated text can be changed by overriding the max-width of the .css-truncate-target. + +This repository is a module of the full [primer-css][primer-css] repository. + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-truncate` with this command. + +``` +$ npm install --save primer-truncate +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-truncate/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. + +``` +$ npm run build +``` + +## Documentation + + + +`.css-truncate` will shorten text with an ellipsis. The maximum width of the truncated text can be changed by overriding the max-width of `.css-truncate-target`. Unless the full text is so long that it affects performace, always add `title` to the truncated element so the full text can still be seen. + +```html + + really-long-branch-name + +``` + +You can reveal the entire string on hover with the addition of `.expandable`. + +```html + +``` + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-truncate/index.scss b/packages/primer-truncate/index.scss new file mode 100644 index 0000000000..61e518ace4 --- /dev/null +++ b/packages/primer-truncate/index.scss @@ -0,0 +1 @@ +@import "./lib/truncate.scss"; diff --git a/packages/primer-truncate/lib/truncate.scss b/packages/primer-truncate/lib/truncate.scss new file mode 100644 index 0000000000..7e38d828c6 --- /dev/null +++ b/packages/primer-truncate/lib/truncate.scss @@ -0,0 +1,27 @@ +// Truncate +// +// css-truncate will shorten text with an ellipsis. + +.css-truncate { + // Truncate double target + // + // css-truncate will shorten text with an ellipsis. The maximum width + // of the truncated text can be changed by overriding the max-width + // of the .css-truncate-target + &.css-truncate-target, + .css-truncate-target { + display: inline-block; + max-width: 125px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: top; + } + + &.expandable.zeroclipboard-is-hover .css-truncate-target, + &.expandable.zeroclipboard-is-hover.css-truncate-target, + &.expandable:hover .css-truncate-target, + &.expandable:hover.css-truncate-target { + max-width: 10000px !important; + } +} diff --git a/packages/primer-truncate/package.json b/packages/primer-truncate/package.json new file mode 100644 index 0000000000..7f10092670 --- /dev/null +++ b/packages/primer-truncate/package.json @@ -0,0 +1,41 @@ +{ + "version": "0.3.4", + "name": "primer-truncate", + "description": "Shorten text with an ellipsis.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "index.scss", + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-truncate", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss" + }, + "dependencies": { + "primer-support": "^4.0.3" + }, + "devDependencies": { + "primer-module-build": "*", + "stylelint": "*", + "stylelint-config-primer": "*" + }, + "keywords": [ + "primer", + "css", + "github", + "primercss", + "truncate", + "ellipsis", + "text" + ] +} diff --git a/packages/primer-utilities/.gitignore b/packages/primer-utilities/.gitignore new file mode 100644 index 0000000000..01a5e93c12 --- /dev/null +++ b/packages/primer-utilities/.gitignore @@ -0,0 +1,3 @@ +node_modules +build +*.log diff --git a/packages/primer-utilities/.npmignore b/packages/primer-utilities/.npmignore new file mode 100644 index 0000000000..dd51a98b42 --- /dev/null +++ b/packages/primer-utilities/.npmignore @@ -0,0 +1,2 @@ +*.yml +.github diff --git a/packages/primer-utilities/.postcss.json b/packages/primer-utilities/.postcss.json new file mode 100644 index 0000000000..0d882f47f2 --- /dev/null +++ b/packages/primer-utilities/.postcss.json @@ -0,0 +1,6 @@ +{ + "use": ["autoprefixer"], + "autoprefixer": { + "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11" + } +} diff --git a/packages/primer-utilities/.stylelintrc.json b/packages/primer-utilities/.stylelintrc.json new file mode 100644 index 0000000000..19028f9885 --- /dev/null +++ b/packages/primer-utilities/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "stylelint-config-primer" + ] +} diff --git a/packages/primer-utilities/CHANGELOG.md b/packages/primer-utilities/CHANGELOG.md new file mode 100644 index 0000000000..45e84fe81d --- /dev/null +++ b/packages/primer-utilities/CHANGELOG.md @@ -0,0 +1,245 @@ +# v4.2.4 + + * update versions for primer-core suppor and utilities - broccolini [github/github@167ed79](https://github.com/github/github/commit/167ed79) + +# v4.2.3 + + * incorporate @broccolini's feedback - Sophie Shepherd [github/github@d7335bb](https://github.com/github/github/commit/d7335bb)fe4e + * Add .border-purple - Sophie Shepherd [github/github@f55ebaa](https://github.com/github/github/commit/f55ebaa)0fe1 + * damn atom auto finisher - Sophie Shepherd [github/github@cb8eb80](https://github.com/github/github/commit/cb8eb80)04c6 + * remove css from core and add docs for dashed border - Sophie Shepherd [github/github@35ca2d1](https://github.com/github/github/commit/35ca2d1)5966 + * remove the docs i added in core - Sophie Shepherd [github/github@7705905](https://github.com/github/github/commit/7705905)352c + * oops i forgot borders should go in primer-marketing - Sophie Shepherd [github/github@b010e2c](https://github.com/github/github/commit/b010e2c)4d15 + * responsive borders - Sophie Shepherd [github/github@e48b7a2](https://github.com/github/github/commit/e48b7a2)023d + * Add docs for text alignment - Sophie Shepherd [github/github@94d0a2a](https://github.com/github/github/commit/94d0a2a)c745 + * Update docs for normal ws util - Patrick Marsceill [github/github@b0f0920](https://github.com/github/github/commit/b0f0920)fe7a + * Add a white space util for normal - Patrick Marsceill [github/github@f360d0b](https://github.com/github/github/commit/f360d0b)aad0 + +# v4.1.2 + + * bump package version - broccolini [github/github@2034aeb](https://github.com/github/github/commit/2034aeb) + +# v4.1.1 + + * Bump all the version numbers for readme - Mu-An Chiou [github/github@a9d152f](https://github.com/github/github/commit/a9d152f) + * Fix all the travis badge URL - Mu-An Chiou [github/github@9cd6d84](https://github.com/github/github/commit/9cd6d84) + +# v4.1.0 + + +# v4.0.3 + + * make work as expected - Sophie Shepherd [github/github@6c85845](https://github.com/github/github/commit/6c85845) + * primer version & CHANGELOG - Sophie Shepherd [github/github@9011d3b](https://github.com/github/github/commit/9011d3b) + * clean up usage of shade-gradient - Sophie Shepherd [github/github@4097cbd](https://github.com/github/github/commit/4097cbd) + * Add border utility and update primer - Mu-An Chiou [github/github@6870d3f](https://github.com/github/github/commit/6870d3f) + +# v4.0.1 + + * add border utility - broccolini [github/github@026d0dc](https://github.com/github/github/commit/026d0dc) + +# v4.0.0 + + * bump major version due to renaming in support and utils - broccolini [github/github@85b48ab](https://github.com/github/github/commit/85b48ab) + * update and re-order docs - broccolini [github/github@17fd96f](https://github.com/github/github/commit/17fd96f) + * add black alpha transparent border utility - broccolini [github/github@56d224a](https://github.com/github/github/commit/56d224a) + * update border names in docs - broccolini [github/github@dc33e97](https://github.com/github/github/commit/dc33e97) + * rename border utilities to match variables - broccolini [github/github@d0fdfb3](https://github.com/github/github/commit/d0fdfb3) + * Bump version number and update changelog - Mu-An Chiou [github/github@050549f](https://github.com/github/github/commit/050549f) + * Remove negative margin it's causing scrollbar problem and we don't actually need it - Mu-An Chiou [github/github@d813007](https://github.com/github/github/commit/d813007) + * fix border blue colors - broccolini [github/github@957c87a](https://github.com/github/github/commit/957c87a) + +# v3.7.1 + + * @broccolini's feedback - Sophie Shepherd [github/github@f9699ef](https://github.com/github/github/commit/f9699ef) + * mdo's notes - Sophie Shepherd [github/github@bf6304c](https://github.com/github/github/commit/bf6304c) + * bump version numbers - broccolini [github/github@34165ea](https://github.com/github/github/commit/34165ea) + * decouple bg & text status pending colors and improve text contrast - broccolini [github/github@c541dca](https://github.com/github/github/commit/c541dca) + +# v3.7.0 + + * update primer-core version number - broccolini [github/github@6846743](https://github.com/github/github/commit/6846743) + * use one yellow for now for status-pending: - broccolini [github/github@9f3bd48](https://github.com/github/github/commit/9f3bd48) + * bump version number on color utilities - broccolini [github/github@a52c6c2](https://github.com/github/github/commit/a52c6c2) + * separate bg and text pending color - broccolini [github/github@2c285b7](https://github.com/github/github/commit/2c285b7) + * update shade-gradient to use variable - broccolini [github/github@c63acfd](https://github.com/github/github/commit/c63acfd) + * move this before responsive variants so we can override it by breakpoint - Mark Otto [github/github@e38f773](https://github.com/github/github/commit/e38f773) + +# v3.5.0 + + * package version bump and update changelog for styleguide - Mark Otto [github/github@84ffd6d](https://github.com/github/github/commit/84ffd6d) + * update comment for @pmarsceill - Mark Otto [github/github@b446760](https://github.com/github/github/commit/b446760) + * colors, buttons, and more - Mark Otto [github/github@307d8ce](https://github.com/github/github/commit/307d8ce) + * Bump version and update CHANGELOG - Mu-An Chiou [github/github@b4de751](https://github.com/github/github/commit/b4de751) + * Add focus guide button - Mu-An Chiou [github/github@2101e25](https://github.com/github/github/commit/2101e25) + * Add title and change button activation copy - Mu-An Chiou [github/github@35af0e4](https://github.com/github/github/commit/35af0e4) + * initial docs - Caleb Winters [github/github@7a576e5](https://github.com/github/github/commit/7a576e5) + * Add .sr-only doc - Mu-An Chiou [github/github@2068b05](https://github.com/github/github/commit/2068b05) + * Move .sr-only to to cored utility and add sr-only logout button - Mu-An Chiou [github/github@0c1a73f](https://github.com/github/github/commit/0c1a73f) + +# v3.3.1 + + * bumping the version - Jon Rohan [github/github@4a72b25](https://github.com/github/github/commit/4a72b25) + * flexbug copy tweak - broccolini [github/github@6a4a4d2](https://github.com/github/github/commit/6a4a4d2) + +# v3.3.0 + + * Docs update - Patrick Marsceill [github/github@3acfa8e](https://github.com/github/github/commit/3acfa8e) + * Comma splice - Patrick Marsceill [github/github@754ae36](https://github.com/github/github/commit/754ae36) + * rip out box-shadows and use TOC not hard coded links - Patrick Marsceill [github/github@ba64689](https://github.com/github/github/commit/ba64689) + * Makd small default - Patrick Marsceill [github/github@fcebabb](https://github.com/github/github/commit/fcebabb) + * Tidy up the docs - Patrick Marsceill [github/github@04a5a9e](https://github.com/github/github/commit/04a5a9e) + * Update old classname in docs - Patrick Marsceill [github/github@9a905ba](https://github.com/github/github/commit/9a905ba) + * Use Box not utils for example - Patrick Marsceill [github/github@d10cba8](https://github.com/github/github/commit/d10cba8) + * Update page heading levels for toc - Patrick Marsceill [github/github@8ffa7ab](https://github.com/github/github/commit/8ffa7ab) + * Bump package version number - Patrick Marsceill [github/github@72e938a](https://github.com/github/github/commit/72e938a) + * Update docs - Patrick Marsceill [github/github@36be95e](https://github.com/github/github/commit/36be95e) + * Consolidate box-shadow styles - Patrick Marsceill [github/github@35cdd34](https://github.com/github/github/commit/35cdd34) + * Implement shadow vars - Patrick Marsceill [github/github@8f8aaf0](https://github.com/github/github/commit/8f8aaf0) + * add docs for flexbox bug - broccolini [github/github@ce472fc](https://github.com/github/github/commit/ce472fc) + * add flex-shrink utility to review status - broccolini [github/github@2ac6ae8](https://github.com/github/github/commit/2ac6ae8) + * bump version number - broccolini [github/github@903297b](https://github.com/github/github/commit/903297b) + * add imports for new partials - broccolini [github/github@bdfb45c](https://github.com/github/github/commit/bdfb45c) + * move flexbox styles into their own partial - broccolini [github/github@a82b8f3](https://github.com/github/github/commit/a82b8f3) + * move display and visibility utilities into separate partial - broccolini [github/github@bcb21b0](https://github.com/github/github/commit/bcb21b0) + * Disable selector-no-utility because this is the utility - Patrick Marsceill [github/github@d6871fb](https://github.com/github/github/commit/d6871fb) + * add new docs - Patrick Marsceill [github/github@704fd67](https://github.com/github/github/commit/704fd67) + * remove old documentation - Patrick Marsceill [github/github@449fb2a](https://github.com/github/github/commit/449fb2a) + * Move legacy box-shadow to new scss partial - Patrick Marsceill [github/github@89bca94](https://github.com/github/github/commit/89bca94) + * refactor numbering to include old box-shadow - Patrick Marsceill [github/github@414fd6a](https://github.com/github/github/commit/414fd6a) + * depricate old box-shadow-large - Patrick Marsceill [github/github@73effa4](https://github.com/github/github/commit/73effa4) + * Discrete box-shadow utils - Patrick Marsceill [github/github@d430697](https://github.com/github/github/commit/d430697) + * Removing needless disables - Jon Rohan [github/github@6233c40](https://github.com/github/github/commit/6233c40) + * Making updates to wording cc @broccolini - Jon Rohan [github/github@d2bf29f](https://github.com/github/github/commit/d2bf29f) + * Make all href #url - Mu-An Chiou [github/github@27ba40c](https://github.com/github/github/commit/27ba40c) + * Add wb-break-all to docs - Jason Long [github/github@169f2da](https://github.com/github/github/commit/169f2da) + * adding text-gray-dark and more acurately mentioning standards - Jon Rohan [github/github@55de600](https://github.com/github/github/commit/55de600) + * Bump version - Jason Long [github/github@2404538](https://github.com/github/github/commit/2404538) + * Update typography.scss - Jason Long [github/github@ad36e9b](https://github.com/github/github/commit/ad36e9b) + * update bg-yellow variables - broccolini [github/github@79701f2](https://github.com/github/github/commit/79701f2) + * Remove trailing line break which confuses guide.rb - Mu-An Chiou [github/github@9028863](https://github.com/github/github/commit/9028863) + * Improve code samples - Add URL to - Add aria-label to - Add type to