From 552e5e798de6148f33b53efa1c915ac597eec572 Mon Sep 17 00:00:00 2001 From: Paul Melnikow Date: Mon, 4 Feb 2019 16:05:57 -0500 Subject: [PATCH] Add semantic color keywords and improve formatting of color examples (#2869) * Add semantic color keywords This is based on the list I proposed at https://github.com/badges/shields/issues/1522#issuecomment-456455618. As I started documenting `default` I realized it didn't feel quite right. It's not semantic in relation to the content the way the others are, and it's also not the default left color. I changed it to `disabled` which isn't perfect, but seems better. I'm open to other suggestions. I updated the documentation but the colors won't render correctly until this is deployed Close #1522 * Reformat the aliases * Pretty up the docs * Reset whitespace changes * Clean lint --- frontend/components/usage.js | 79 +++++++++++++++++++++++------------- gh-badges/README.md | 15 ++++++- gh-badges/lib/color.js | 29 +++++++++++-- gh-badges/lib/color.spec.js | 4 ++ 4 files changed, 92 insertions(+), 35 deletions(-) diff --git a/frontend/components/usage.js b/frontend/components/usage.js index 55cf369285..1b2122a188 100644 --- a/frontend/components/usage.js +++ b/frontend/components/usage.js @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react' +import React from 'react' import { Link } from 'react-router-dom' import PropTypes from 'prop-types' import styled from 'styled-components' @@ -63,38 +63,27 @@ EscapingConversion.propTypes = { rhs: PropTypes.element.isRequired, } +const ColorExamples = ({ baseUrl, colors }) => ( + + {colors.map((color, i) => ( + + ))} + +) +ColorExamples.propTypes = { + baseUrl: PropTypes.string.isRequired, + colors: PropTypes.array.isRequired, +} + export default class Usage extends React.PureComponent { static propTypes = { baseUrl: PropTypes.string.isRequired, } - renderColorExamples() { - const { baseUrl } = this.props - const colors = [ - 'brightgreen', - 'green', - 'yellowgreen', - 'yellow', - 'orange', - 'red', - 'lightgrey', - 'blue', - 'ff69b4', - ] - return ( -

- {colors.map((color, i) => ( - - - - ))} -

- ) - } - renderStyleExamples() { const { baseUrl } = this.props return ( @@ -192,7 +181,39 @@ export default class Usage extends React.PureComponent { />

{this.constructor.renderStaticBadgeEscapingRules()} - {this.renderColorExamples()} + +

Colors

+

+ +
+ +
+ +

Endpoint (Beta)

diff --git a/gh-badges/README.md b/gh-badges/README.md index 17a7f819a4..4142f81735 100644 --- a/gh-badges/README.md +++ b/gh-badges/README.md @@ -78,9 +78,15 @@ There are three ways to specify `color` and `labelColor`: - ![][grey] ![][gray] – the default `labelColor` - ![][lightgrey] ![][lightgray] – the default `color` +- ![][success] +- ![][important] +- ![][critical] +- ![][informational] +- ![][inactive] – the default `color` + 2. A three- or six-character hex color, optionally prefixed with `#`: -- ![][4c1] +- ![][9cf] - ![][#007fff] - etc. @@ -91,17 +97,22 @@ There are three ways to specify `color` and `labelColor`: - ![][aqua] ![][fuchsia] ![][lightslategray] etc. [brightgreen]: https://img.shields.io/badge/brightgreen-brightgreen.svg +[success]: https://img.shields.io/badge/success-success.svg [green]: https://img.shields.io/badge/green-green.svg [yellow]: https://img.shields.io/badge/yellow-yellow.svg [yellowgreen]: https://img.shields.io/badge/yellowgreen-yellowgreen.svg [orange]: https://img.shields.io/badge/orange-orange.svg +[important]: https://img.shields.io/badge/important-important.svg [red]: https://img.shields.io/badge/red-red.svg +[critical]: https://img.shields.io/badge/critical-critical.svg [blue]: https://img.shields.io/badge/blue-blue.svg +[informational]: https://img.shields.io/badge/informational-informational.svg [grey]: https://img.shields.io/badge/grey-grey.svg [gray]: https://img.shields.io/badge/gray-gray.svg [lightgrey]: https://img.shields.io/badge/lightgrey-lightgrey.svg [lightgray]: https://img.shields.io/badge/lightgray-lightgray.svg -[4c1]: https://img.shields.io/badge/4c1-4c1.svg +[inactive]: https://img.shields.io/badge/inactive-inactive.svg +[9cf]: https://img.shields.io/badge/9cf-9cf.svg [#007fff]: https://img.shields.io/badge/%23007fff-007fff.svg [aqua]: https://img.shields.io/badge/aqua-aqua.svg [fuchsia]: https://img.shields.io/badge/fuchsia-fuchsia.svg diff --git a/gh-badges/lib/color.js b/gh-badges/lib/color.js index db0d50d130..189bf71675 100644 --- a/gh-badges/lib/color.js +++ b/gh-badges/lib/color.js @@ -5,18 +5,31 @@ const isCSSColor = require('is-css-color') // When updating these, be sure also to update the list in `gh-badges/README.md`. const namedColors = { brightgreen: '#4c1', - green: '#97CA00', + green: '#97ca00', yellow: '#dfb317', yellowgreen: '#a4a61d', orange: '#fe7d37', red: '#e05d44', blue: '#007ec6', grey: '#555', - gray: '#555', lightgrey: '#9f9f9f', - lightgray: '#9f9f9f', } +const aliases = { + gray: 'grey', + lightgray: 'lightgrey', + critical: 'red', + important: 'orange', + success: 'brightgreen', + informational: 'blue', + inactive: 'lightgrey', +} + +const resolvedAliases = {} +Object.entries(aliases).forEach(([alias, original]) => { + resolvedAliases[alias] = namedColors[original] +}) + // This function returns false for `#ccc`. However `isCSSColor('#ccc')` is // true. const hexColorRegex = /^([\da-f]{3}){1,2}$/i @@ -29,6 +42,8 @@ function normalizeColor(color) { return undefined } else if (color in namedColors) { return color + } else if (color in aliases) { + return aliases[color] } else if (isHexColor(color)) { return `#${color.toLowerCase()}` } else if (isCSSColor(color)) { @@ -40,7 +55,13 @@ function normalizeColor(color) { function toSvgColor(color) { const normalized = normalizeColor(color) - return normalized in namedColors ? namedColors[color] : normalized + if (normalized in namedColors) { + return namedColors[normalized] + } else if (normalized in resolvedAliases) { + return resolvedAliases[normalized] + } else { + return normalized + } } module.exports = { diff --git a/gh-badges/lib/color.spec.js b/gh-badges/lib/color.spec.js index a8a84d40be..783b0bbe1f 100644 --- a/gh-badges/lib/color.spec.js +++ b/gh-badges/lib/color.spec.js @@ -20,6 +20,8 @@ test(normalizeColor, () => { forCases([given(''), given(undefined), given('not-a-color')]).expect( undefined ) + given('lightgray').expect('lightgrey') + given('informational').expect('blue') }) test(toSvgColor, () => { @@ -34,4 +36,6 @@ test(toSvgColor, () => { forCases([given(''), given(undefined), given('not-a-color')]).expect( undefined ) + given('lightgray').expect('#9f9f9f') + given('informational').expect('#007ec6') })