From 46a17c9f83ab6b3bb85001dd66ada1c1b5087cae Mon Sep 17 00:00:00 2001 From: seanwlawrence Date: Sun, 5 Aug 2018 13:32:06 -0500 Subject: [PATCH] refactor(index.js): Changed function export name from bc to bulma The name `bulma` is more semantic and readable than `bc`, which follows this package's Guiding prinicples more closely. In addition, this commit adds nearly 100% code coverage, a Travis CI, Semantic versioning and Standardized Git commit messages with Commitizen BREAKING CHANGE: The function name is now `bulma` instead of `bc` docs(READE.md): Add description for `raw` Also update the path to the made_with_bulma.png logo docs(README.md, .travix.yml): Move logo, update Travis build version Move logo to bottom of README.md for better readability, remove unused .nvm file and add latest node version in .travis.yml file fix(.travis.yml): Remove codecov script Switch to coveralls, now codecov script is no longer needed ci(.travis.yml, package.json): Update Travis build scripts Change to yarn build script to run both tests and linting and update after success step to use semantic-release ci(.travis.yml): Remove deploy config ci(.travis.yml, package.json): Add NPM API key Now package will be published automatically on passing build with semantic-release ci(.travis.yml): Remove deploy: {tags: true} line --- .DS_Store | Bin 6148 -> 0 bytes .eslintrc.js | 39 ++- .gitignore | 9 +- .nvm | 0 .prettierrc.js | 17 +- .travis.yml | 31 ++- CHANGELOG.md | 11 + README.md | 333 +++++++++++++++---------- package.json | 24 +- src/index.js | 291 ++++++++++------------ src/index.spec.js | 121 +++++---- src/types.js | 620 +++++++++++++++++++++++----------------------- yarn.lock | 25 +- 13 files changed, 811 insertions(+), 710 deletions(-) delete mode 100644 .DS_Store delete mode 100644 .nvm create mode 100644 CHANGELOG.md diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index bdc9dc66c125c8354f72b58de8478c05ffa1782f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHKO>Pr06n<_(nFJ77AhpZcAhC#|1Oizgq>!eINPrN7U;(I|$wcjx={U+vh)M{` zhC2W^;3%AcgKz-&o^8-fQnpcr{384F&-?7>Z)7_rBGH?MEutC`IY^AQAR)-Po$^n!0NOUGuf ze-FlSlxEH553yA$U)sLxI8~>5t@_40mNPH&vuWD%C$G5n)X$CsQ+_UG{I~1}FQU=x zpmt+VCYc{4qlqF%;Rr6TUq(qNXFWMh!c>jp=?=%KIF*Ci?tFgt_Px5>YPT14ci!nV z>u&o_XR)X_J2zVo28X9-@8=&DAHS$&kidbZ?7G1}@D+u^BHwwFB$mk$+L=?PkRphc zKjsCs46|80qxN~Js}TygH9ULG=PD&6G5&}S;LW8e#i->ERm>$mt?|bA zghP6Z{0ROHIzfbzl9l;>uJ9`K43RygK0Q7^LiPDS=RSW4<4$N;99OM9?^U5QL^8o@ z8i-$VWJQKrd7gp5tZiBWvjvJ-~apne*YIqwq_Nu3j9|Jh;rZS_pl^$x2`RY?^+k>5Q&ZbmKqfWnYoTt gfv@6SBxUGxxd7}MTxvuM%>EHjGT6*2uu%nm103zT!2kdN diff --git a/.eslintrc.js b/.eslintrc.js index cc5b9fe..2c61cb6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,22 +1,21 @@ module.exports = { - env: { - browser: true, - commonjs: true, - es6: true, - jest: true, - }, - extends: ['eslint:recommended', 'plugin:flowtype/recommended'], - parser: 'babel-eslint', - plugins: ['flowtype', 'jest'], - rules: { - indent: ['error', 'tab'], - 'linebreak-style': ['error', 'unix'], - quotes: ['error', 'single'], - semi: ['error', 'always'], - 'jest/no-disabled-tests': 'warn', - 'jest/no-focused-tests': 'error', - 'jest/no-identical-title': 'error', - 'jest/prefer-to-have-length': 'warn', - 'jest/valid-expect': 'error', - }, + env: { + browser: true, + commonjs: true, + es6: true, + jest: true, + }, + extends: ['eslint:recommended', 'plugin:flowtype/recommended'], + parser: 'babel-eslint', + plugins: ['flowtype', 'jest'], + rules: { + 'linebreak-style': ['error', 'unix'], + quotes: ['warn', 'single'], + semi: ['error', 'always'], + 'jest/no-disabled-tests': 'warn', + 'jest/no-focused-tests': 'error', + 'jest/no-identical-title': 'error', + 'jest/prefer-to-have-length': 'warn', + 'jest/valid-expect': 'error', + }, }; diff --git a/.gitignore b/.gitignore index de5dee0..45326b6 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,11 @@ node_modules dist // ignore vs code settings -.vscode/ \ No newline at end of file +.vscode/ + +// ignore code coverage +coverage/ + +// ignore Mac settings +.DS_Store +assets/.DS_Store \ No newline at end of file diff --git a/.nvm b/.nvm deleted file mode 100644 index e69de29..0000000 diff --git a/.prettierrc.js b/.prettierrc.js index 35e4c2e..c0b3e9c 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,11 +1,10 @@ module.exports = { - bracketSpacing: true, - tabWidth: 2, - semi: true, - printWidth: 80, - singleQuote: true, - trailingComma: 'all', - arrowParens: 'always', - parser: 'flow', - useTabs: true, + bracketSpacing: true, + tabWidth: 2, + semi: true, + printWidth: 80, + singleQuote: true, + trailingComma: 'all', + arrowParens: 'always', + parser: 'flow', }; diff --git a/.travis.yml b/.travis.yml index b92ac1c..b7500b5 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,18 +1,31 @@ language: node_js +node_js: +- node +- lts/* cache: directories: - - ~/.npm + - "~/.npm" notifications: email: false -node_js: - - '10' - - '9' - - '8' - - '6' +install: yarn install --ignore-engines +jobs: + include: + - stage: Produce Coverage + node_js: node + script: jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js + && rm -rf ./coverage script: - - yarn test:single +- yarn build after_success: - - yarn travis-deploy-once "yarn semantic-release" +- yarn travis-deploy-once branches: except: - - /^v\d+\.\d+\.\d+$/ + - "/^v\\d+\\.\\d+\\.\\d+$/" +deploy: + provider: npm + email: sean.w.lawrence@gmail.com + api_key: + secure: 0BzGKWLbgP7vwKu/By4M756WiPc4Fcwoc5S9vBb3mtQ8AnZ8z+gQMT7vJJ/l30J2j7VZvvBEYNW1O3F/fehqwYgTeFGAR/43ZkP7XcqdLCjyuQZPUY7S7azMwihqRAhVucEthJr0QKjFh1XRbZm4TAz0+S3PhwKRRrT8RlSXbME7XhpucRdyA2kjHoOZhxFZ0rEHUjyOaPFPve+3dEd3O+R6anmfFQHVcqoZ6A9lHawZTJNhxgVSL/xFHG0wrpPTNrNGJgDC2qOinl1EYQpaok5CRqnzaA/4nbiAGafAlr4cRqp0wvZehfpTgziR2KAFdlnbBeFg5jfLEMeAD32gOWvdit/9Zh8rRuFI8fEfI6VxboBXycu6ti8Rym82cOfXdqPV5xGJmlyYqslTOb8Bt9xFOG5CgMaZqpe/ep12k04r+rlQCotxGUZ2WVhoUjKcRrV32JwcqUf/ROEpsIXFOK+u5qS/ogPH/3J1O/RgOmorX5tYEDyQTrN1Nr7qkqQVJKlvJeGl1frhoLb3ZyOLen3koFfX5jeja6QVYylgl+QhNPt+m9VuOYszB8lYaOOez9CAxCYeDIbBlcLGmmew0wYlI2F0TRftjTugNYdnqxWvN9YNBlOfbgKRXrpgIvYN8GmAoJ1ISvCNZ6yMqusjJJ1WWRGDuhADHMS9cTaJlp4= + on: + tags: false + repo: seanWLawrence/bulma-classnames diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..8f94c6b --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,11 @@ +# Changelog + +## v1.0 - BREAKING CHANGE: Update function name to `bulma` from `bc` + +If you still prefer to use the `bc` function name for any reason, simply import it like so: + +```javascript +import bulma as bc from 'bulma-classnames' +``` + +## v 0.0.1 Beta \ No newline at end of file diff --git a/README.md b/README.md index 95d27fc..a217467 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,19 @@

bulma-classnames

-goat - -

Simple utility for creating declarative classnames in JSX for bulma.css using JavaScript objects.

+

Simple utility for creating declarative classnames in JSX for bulma.css using JavaScript objects

-
- -[![Build Status][build-badge]][build] -[![Code Coverage][coverage-badge]][coverage] -[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends] -[![MIT License][license-badge]][license] - -[![All Contributors](https://img.shields.io/badge/all_contributors-47-orange.svg?style=flat-square)](#contributors) -[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc] -[![Join the community on Spectrum][spectrum-badge]][spectrum] - -[![Watch on GitHub][github-watch-badge]][github-watch] -[![Star on GitHub][github-star-badge]][github-star] -[![Tweet][twitter-badge]][twitter] +[![npm](https://img.shields.io/npm/v/bulma-classnames.svg?style=flat-square&colorB=blue)](https://www.npmjs.com/package/bulma-classnames) +[![Travis (.org)](https://img.shields.io/travis/seanWLawrence/bulma-classnames.svg?style=flat-square)](https://travis-ci.org/seanWLawrence/bulma-classnames) +[![Coveralls github branch](https://img.shields.io/coveralls/github/seanWLawrence/bulma-classnames/master.svg?style=flat-square&colorB=brightgreen)](https://coveralls.io/github/seanWLawrence/bulma-classnames) +[![GitHub last commit](https://img.shields.io/github/last-commit/seanwlawrence/bulma-classnames.svg?style=flat-square)](https://github.com/seanwlawrence/bulma-classnames/commits/master) +![GitHub issues](https://img.shields.io/github/issues-raw/seanwlawrence/bulma-classnames.svg?style=flat-square) +![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/bulma-classnames.svg?style=flat-square) +[![GitHub](https://img.shields.io/github/license/seanwlawrence/bulma-classnames.svg?style=flat-square)](https://github.com/seanWLawrence/bulma-classnames/blob/master/LICENSE.md) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) +[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-blue.svg?style=flat-square)](http://commitizen.github.io/cz-cli/) ## The problem @@ -33,7 +27,7 @@ This problem gets even worse when you start to nest components and have a giant ```html

- Hello, + Hello, world! @@ -89,8 +83,25 @@ So much better, right?! - [Single values](#single-values) - [Multiple values](#multiple-values) - [Is, has, and raw](#is-has-and-raw) + - [Raw](#raw) - [API](#api) - - [`backgroundColor: string` - adds "is-background-" to the front of the string](#backgroundcolor-string---adds-%22is-background-%22-to-the-front-of-the-string) + - [`backgroundColor`](#backgroundcolor) + - [`color`](#color) + - [`column`](#column) + - [`offset`](#offset) + - [`flex`](#flex) + - [`inlineFlex`](#inlineflex) + - [`block`](#block) + - [`inlineBlock`](#inlineblock) + - [`inline`](#inline) + - [`textColor`](#textcolor) + - [`textSize`](#textsize) + - [`textWeight`](#textweight) + - [`textTransformation`](#texttransformation) + - [`textAlign`](#textalign) + - [`is`](#is) + - [`has`](#has) + - [`raw`](#raw) - [Learning Material](#learning-material) - [FAQ](#faq) - [Guiding Principles](#guiding-principles) @@ -104,7 +115,7 @@ So much better, right?! ## Installation -This module is distributed via [npm][npm] which is bundled with [node][node] and +This module is distributed via [npm](https://npmjs.com) which is bundled with [node](https://nodejs.org) and should be installed as one of your project's `dependencies`: ```sh @@ -269,210 +280,297 @@ let styles = bulma({ // 'is-capitalized has-text-right-mobile has-text-left-desktop' ``` +### Raw + +`raw` is a simple way to add extra classnames without formatting them. Any string that you add in `raw` will be added to the end of the classname string. + +```jsx +let styles = bulma({ + color: 'primary', + raw: 'extra-classname another-classname' +}) + +// 'is-primary extra-classname another-classname' +``` + ## API Here's a list of all the accepted keys and their types. -### `backgroundColor: string` - adds "is-background-" to the front of the string +### `backgroundColor` + +`string` - adds "is-background-" to the front of the string ```javascript bulma({ backgroundColor: 'primary' -}) +}) + // => 'is-background-primary' ``` -**color:** ```string``` - adds "is-" to the front of the string +### `color` + +`string` - adds "is-" to the front of the string + ```javascript bulma({ color: 'primary' -}) +}) + // => 'is-primary ``` -**column:** ```string | string[]``` - adds "is-" to the front of each string and "column" to the end +### `column` + +`string | string[]` - adds "is-" to the front of each string and "column" to the end + ```javascript bulma({ column: '10-mobile' -}) +}) + // => 'is-10-mobile column' bulma({ column: [ '10-mobile', '11-desktop', '12-widescreen'] -}) +}) // => 'is-10-mobile is-11-desktop is-12-widescreen column' ``` -**offset:** ```string | string[]``` - adds "is-offset-" to the front of each string +### `offset` + +`string | string[]` - adds "is-offset-" to the front of each string + ```javascript bulma({ offset: '10-mobile' -}) +}) + // => 'is-offset-10-mobile' bulma({ offset: [ '10-mobile', '11-desktop', '12-widescreen'] -}) +}) + // => 'is-offset-10-mobile is-offset-11-desktop is-offset-12-widescreen' ``` -**flex:** ```string | string[]``` - adds "is-flex" to the front of each string +### `flex` + +`string | string[]` - adds "is-flex" to the front of each string + ```javascript bulma({ flex: 'mobile' -}) +}) + // => 'is-flex-mobile' bulma({ flex: [ 'mobile', 'desktop', 'widescreen'] -}) +}) + // => 'is-flex-mobile is-flex-desktop is-flex-widescreen' ``` -**inlineFlex:** ```string | string[]``` - adds "is-inline-flex" to the front of each string +### `inlineFlex` + +`string | string[]` - adds "is-inline-flex" to the front of each string + ```javascript bulma({ inlineFlex: 'mobile' -}) +}) + // => 'is-inline-flex-mobile' bulma({ inlineFlex: [ 'mobile', 'desktop', 'widescreen'] -}) +}) + // => 'is-inline-flex-mobile is-inline-flex-desktop is-inline-flex-widescreen' ``` -**block:** ```string | string[]``` - adds "is-block" to the front of each string +### `block` + +`string | string[]` - adds "is-block" to the front of each string + ```javascript bulma({ block: 'mobile' -}) +}) + // => 'is-block-mobile' bulma({ block: [ 'mobile', 'desktop', 'widescreen'] -}) +}) + // => 'is-block-mobile is-block-desktop is-block-widescreen' ``` -**inlineBlock:** ```string | string[]``` - adds "is-inline-block" to the front of each string +### `inlineBlock` + +`string | string[]` - adds "is-inline-block" to the front of each string + ```javascript bulma({ inlineBlock: 'mobile' -}) +}) + // => 'is-inline-block-mobile' bulma({ inlineBlock: [ 'mobile', 'desktop', 'widescreen'] -}) +}) + // => 'is-inline-block-mobile is-inline-block-desktop is-inline-block-widescreen' ``` -**inline:** ```string | string[]``` - adds "is-inline" to the front of each string +### `inline` + +`string | string[]` - adds "is-inline" to the front of each string + ```javascript bulma({ inline: 'mobile' -}) +}) + // => 'is-inline-mobile' bulma({ inline: [ 'mobile', 'desktop', 'widescreen'] -}) +}) + // => 'is-inline-mobile is-inline-desktop is-inline-widescreen' ``` -**textColor:** ```string``` - adds "has-text-color" to the front of the string +### `textColor` + +`string` - adds "has-text-color" to the front of the string + ```javascript bulma({ textColor: 'primary' -}) +}) + // => 'has-text-color-primary ``` -**textSize:** ```string | string[]``` - adds "is-size-" to the front of the string +### `textSize` + +`string | string[]` - adds "is-size-" to the front of the string + ```javascript bulma({ textSize: '6' -}) +}) + // => 'is-size-6' bulma({ textSize: ['5-mobile', '6-desktop', '7-widescreen'] -}) +}) + // => 'is-size-5-mobile is-size-6-desktop is-size-7-widescreen' ``` -**textWeight:** ```string``` - adds "has-text-weight" to the front of the string +### `textWeight` + +`string` - adds "has-text-weight" to the front of the string + ```javascript bulma({ textWeight: 'bold' -}) +}) + // => 'has-text-weight-bold' ``` -**textTransformation:** ``` string | string[]``` - adds "is-" to the front of the string (for better semantics than using ```is:``` +### `textTransformation` + +`string | string[]` - adds "is-" to the front of the string + ```javascript bulma({ textTransformation: 'capitalized' -}) +}) + // => 'is-capitalized' bulma({ textTransformation: ['capitalized', 'italic'] -}) +}) + // => 'is-capitalized is-italic' ``` -**textAlign:** ``` string | string[]``` - adds "has-text-" to the front of the string +### `textAlign` + +` string | string[]``` - adds "has-text-" to the front of the string + ```javascript bulma({ textAlign: 'left' -}) +}) + // => 'has-text-left' bulma({ textAlign: ['left-mobile', 'right-desktop', 'center-widescreen'] -}) +}) + // => 'has-text-left-mobile has-text-right-desktop has-text-center-widescreen' ``` -**is:** ```string | string[]``` - adds "is-" to the front of each string +### `is` + +`string | string[]` - adds "is-" to the front of each string. Designed as an escape hatch, or for misc. helpers like `is-marginless` ```javascript bulma({ - is: 'primary' -}) -// => 'is-primary' + is: 'marginless' +}) -bulma({ - is: ['primary', 'capitalized'] -}) +// => 'is-marginless' -// => 'is-primary is-capitalized' +bulma({ + is: ['marginless', 'pulled-left'] +}) +// => 'is-marginless is-pulled-left' ``` -**has:** ```string | string[]``` - adds "has-" to the front of each string +### `has` + +`string | string[]` - adds "has-" to the front of each string. Designed as an escape hatch, or for misc. helpers like `has-addons` ```javascript bulma({ - has: 'text-weight-bold' -}) + has: 'addons' +}) + // => 'has-text-weight-bold' bulma({ - has: ['text-weight-bold', 'text-color-danger'] -}) + has: ['addons', 'addons-right'] +}) -// => 'has-text-weight-bold has-text-color-danger' +// => 'has-addons has-addons-right' ``` -**raw:** ```string``` - outputs the exact same string that is passed, no formatting is added + +### `raw` + +`string` - outputs the exact same string that is passed, no formatting is added. Useful to pass extra classnames that either don't start with `is` or `has` o aren't related to Bulma in the same object + ```javascript bulma({ raw: 'column' -}) +}) + // => 'column' ``` @@ -486,29 +584,25 @@ Feel free to contribute more!
-Which get method should I use? - -Based on [the Guiding Principles](#guiding-principles), your test should -resemble how your code (component, page, etc.) is used as much as possible. With -this in mind, we recommend this order of priority: - -1. `getByLabelText`: Only really good for form fields, but this is the number 1 - method a user finds those elements, so it should be your top preference. -2. `getByPlaceholderText`: - [A placeholder is not a substitute for a label](https://www.nngroup.com/articles/form-design-placeholders/). - But if that's all you have, then it's better than alternatives. -3. `getByText`: Not useful for forms, but this is the number 1 method a user - finds other elements (like buttons to click), so it should be your top - preference for non-form elements. -4. `getByAltText`: If your element is one which supports `alt` text (`img`, - `area`, and `input`), then you can use this to find that element. -5. `getByTestId`: The user cannot see (or hear) these, so this is only - recommended for cases where you can't match by text or it doesn't make sense - (the text is dynamic). - -Other than that, you can also use the `container` to query the rendered -component as well (using the regular -[`querySelector` API](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)). +Are there Flow and TypeScript types available? + +Not yet, but I'm working on them and expect to have them finished soon. You can [see my progress](https://github.com/seanWLawrence/bulma-classnames/blob/master/src/types.js) and contribute if you like! + +
+ +
+ +What is Bulma.css? + +[Bulma.css](https://bulma.io "Bulma.css home") is a beautiful stylesheet with helpers and components already pre-designed for you, like Bootstrap or Foundation. It uses classnames to reference the styles and is great for developers new to styling websites, or anyone that wants to use a battle-tested stylesheet to get going fast on a project. I used it heavily in my other project [Sushi Commerce](https://sushi-commerce.netlify.com "Sushi Commerce static e-commerce website generator") and it drove me to create this package to save hours of time and make my code much prettier to look at and reason about. + +
+ +
+ +What if I hate CSS-in-JS? + +Then this might still be great for you, because you're still doing the same thing as standard CSS - add classnames to an HTML object. But you're doing it more declaratively and modern. t still might feel weird putting your styles in an object at first though, and that's ok.
@@ -522,7 +616,7 @@ This package is a single function that formats the object with a class that has ## Roadmap -- Flow types and TypeScript support +- Flow and TypeScript typings ## Contributors @@ -530,7 +624,7 @@ This package is a single function that formats the object with a class that has ## Issues -Looking to contribute? Check out our roadmap and [raise an issue](https://github.com/seanwlawrence/bulma-classnames/issues/new) on what you'd like to help with! +Looking to contribute? Check out our [roadmap](#roadmap) and [raise an issue](https://github.com/seanwlawrence/bulma-classnames/issues/new) on what you'd like to help with! ### 🐛 Bugs @@ -549,41 +643,6 @@ Please [raise an issue](https://github.com/seanwlawrence/bulma-classnames/issues MIT -[npm]: https://www.npmjs.com/ -[node]: https://nodejs.org -[build-badge]: https://img.shields.io/travis/kentcdodds/react-testing-library.svg?style=flat-square -[build]: https://travis-ci.org/kentcdodds/react-testing-library -[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/react-testing-library.svg?style=flat-square -[coverage]: https://codecov.io/github/kentcdodds/react-testing-library -[version-badge]: https://img.shields.io/npm/v/react-testing-library.svg?style=flat-square -[package]: https://www.npmjs.com/package/react-testing-library -[downloads-badge]: https://img.shields.io/npm/dm/react-testing-library.svg?style=flat-square -[npmtrends]: http://www.npmtrends.com/react-testing-library -[spectrum-badge]: https://withspectrum.github.io/badge/badge.svg -[spectrum]: https://spectrum.chat/react-testing-library -[license-badge]: https://img.shields.io/npm/l/react-testing-library.svg?style=flat-square -[license]: https://github.com/kentcdodds/react-testing-library/blob/master/LICENSE -[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square -[prs]: http://makeapullrequest.com -[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square -[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square -[coc]: https://github.com/kentcdodds/react-testing-library/blob/master/CODE_OF_CONDUCT.md -[github-watch-badge]: https://img.shields.io/github/watchers/kentcdodds/react-testing-library.svg?style=social -[github-watch]: https://github.com/kentcdodds/react-testing-library/watchers -[github-star-badge]: https://img.shields.io/github/stars/kentcdodds/react-testing-library.svg?style=social -[github-star]: https://github.com/kentcdodds/react-testing-library/stargazers -[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-testing-library%20by%20%40kentcdodds%20https%3A%2F%2Fgithub.com%2Fkentcdodds%2Freact-testing-library%20%F0%9F%91%8D -[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/kentcdodds/react-testing-library.svg?style=social -[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key -[all-contributors]: https://github.com/kentcdodds/all-contributors -[set-immediate]: https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate -[guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106 -[data-testid-blog-post]: https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269 -[dom-testing-lib-textmatch]: https://github.com/kentcdodds/dom-testing-library#textmatch -[bugs]: https://github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc -[requests]: https://github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen -[good-first-issue]: https://github.com/kentcdodds/react-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+ -[reactiflux]: https://www.reactiflux.com/ -[stackoverflow]: https://stackoverflow.com/questions/tagged/react-testing-library - - \ No newline at end of file + + +Made for bulma logo \ No newline at end of file diff --git a/package.json b/package.json index 5d4a6b8..cd73263 100644 --- a/package.json +++ b/package.json @@ -12,23 +12,24 @@ "private": false, "scripts": { "develop": "microbundle watch", - "test": "jest --watch", - "test:single": "jest && flow", + "flow": "flow", + "flow:stop": "flow stop", + "test": "jest", + "test:watch": "jest --watch", + "test:ci": "yarn flow:stop && yarn flow && yarn test", "lint": "prettier-eslint --config .prettierrc.js --eslint-config-path .eslintrc.js --write \"src/*.js\"", - "prepublish": "yarn test:single && yarn lint", - "build": "yarn prepublish && microbundle", - "commit": "git-cz", + "prepare": "yarn test:ci && yarn lint", + "build": "yarn prepare && microbundle", + "commit": "yarn test:ci && git-cz", "semantic-release": "semantic-release", - "setup": "semantic-release-cli setup", - "travis-deploy-once": "travis-deploy-once" + "travis-deploy-once": "travis-deploy-once \"yarn semantic-release\"" }, "jest": { - "testEnvironment": "node" + "testEnvironment": "node", + "coverageDirectory": "./coverage/", + "collectCoverage": true }, "config": { - "ghooks": { - "pre-commit": "yarn test:single" - }, "commitizen": { "path": "node_modules/cz-conventional-changelog" } @@ -41,6 +42,7 @@ "babel-preset-env": "^1.7.0", "babel-preset-flow": "^6.23.0", "commitizen": "^2.10.1", + "coveralls": "^3.0.2", "cz-conventional-changelog": "^2.1.0", "eslint": "^5.2.0", "eslint-plugin-flowtype": "^2.50.0", diff --git a/src/index.js b/src/index.js index ebeabee..fe708b5 100644 --- a/src/index.js +++ b/src/index.js @@ -3,176 +3,149 @@ import type { Classnames, Entry } from './types'; // class with all formatting methods class BulmaClassname { - // object with keys and values from the API - classnames: Classnames; + // object with keys and values from the API + classnames: Classnames; - // initialize contructor - constructor(classnames: Classnames) { - this.classnames = classnames; - } + // initialize contructor + constructor(classnames: Classnames) { + this.classnames = classnames; + } - // formats single string values - formatString(selector: string, value: string = ''): string { - // check to see if the key (selector) matches the API, if so, return the formatted string, if not, return an empty string - switch (selector) { - case 'backgroundColor': - return `has-background-${value}`; - case 'textColor': - return `has-text-${value}`; - case 'textSize': - return `is-size-${value}`; - case 'textWeight': - return `has-text-weight-${value}`; - case 'textTransformation': - return `is-${value}`; - case 'textAlign': - return `has-text-${value}`; - case 'color': - return `is-color-${value}`; - case 'flex': - return `is-flex-${value}`; - case 'inlineFlex': - return `is-inline-flex-${value}`; - case 'block': - return `is-block-${value}`; - case 'inlineBlock': - return `is-inline-block-${value}`; - case 'inline': - return `is-inline-${value}`; - case 'columns': - return `columns ${value}`; - case 'column': - return `column is-${value}`; - case 'offset': - return `is-offset-${value}`; - case 'image': - return `image is-${value}`; - case 'is': - return `is-${value}`; - case 'has': - return `has-${value}`; - case 'raw': - return value; - default: - if (process.env.NODE_ENV === 'development') { - // if in development mode, log a simple warning to the console - console.warn( - 'An incorrect key was passed to bulmaclassnames. Refer to the API for a list of p' + - 'ossible keys and values.', - ); - } - // returns an empty string if key does not match the API - return ''; - } - } + // formats single string values + formatString(selector: string, value: string = ''): string { + // check to see if the key (selector) matches the API, if so, return the formatted string, if not, return an empty string + switch (selector) { + case 'backgroundColor': + return `has-background-${value}`; + case 'textColor': + return `has-text-${value}`; + case 'textSize': + return `is-size-${value}`; + case 'textWeight': + return `has-text-weight-${value}`; + case 'textTransformation': + return `is-${value}`; + case 'textAlign': + return `has-text-${value}`; + case 'color': + return `is-color-${value}`; + case 'flex': + return `is-flex-${value}`; + case 'inlineFlex': + return `is-inline-flex-${value}`; + case 'block': + return `is-block-${value}`; + case 'inlineBlock': + return `is-inline-block-${value}`; + case 'inline': + return `is-inline-${value}`; + case 'column': + return `column is-${value}`; + case 'offset': + return `is-offset-${value}`; + case 'image': + return `image is-${value}`; + case 'is': + return `is-${value}`; + case 'has': + return `has-${value}`; + case 'raw': + return value; + default: + // returns an empty string if key does not match the API + return ''; + } + } - // formats array values - formatArray(selector: string, value: string[]): string { - // adds a prefix to each item in the array - let addPrefixToAllValues = (prefix: string): string => { - return value.reduce((acc: string, next: string) => { - // reduces the array into a single string with the prefix added to the front of each work - return acc.concat(` ${prefix}-${next}`).trim(); - }, ''); - }; + // formats array values + formatArray(selector: string, value: string[]): string { + // adds a prefix to each item in the array + let addPrefixToAllValues = (prefix: string): string => { + return value.reduce((acc: string, next: string) => { + // reduces the array into a single string with the prefix added to the front of each work + return acc.concat(` ${prefix}-${next}`).trim(); + }, ''); + }; - // check to see if the key (selector) matches the API, if so, return the formatted string, if not, return an empty string - switch (selector) { - case 'column': - return `column ${addPrefixToAllValues('is')}`; - case 'offset': - return addPrefixToAllValues('is-offset'); - case 'flex': - return addPrefixToAllValues('is-flex'); - case 'inlineFlex': - return addPrefixToAllValues('is-inline-flex'); - case 'block': - return addPrefixToAllValues('is-block'); - case 'inlineBlock': - return addPrefixToAllValues('is-inline-block'); - case 'inline': - return addPrefixToAllValues('is-inline'); - case 'is': - return addPrefixToAllValues('is'); - case 'has': - return addPrefixToAllValues('has'); - default: - if (process.env.NODE_ENV === 'development') { - // if in development mode, log a simple warning to the console - console.warn( - 'An incorrect key was passed to bulmaclassnames. Refer to the API for a list of p' + - 'ossible keys and values.', - ); - } - // returns an empty string if key does not match the API - return ''; - } - } + // check to see if the key (selector) matches the API, if so, return the formatted string, if not, return an empty string + switch (selector) { + case 'column': + return `column ${addPrefixToAllValues('is')}`; + case 'offset': + return addPrefixToAllValues('is-offset'); + case 'flex': + return addPrefixToAllValues('is-flex'); + case 'inlineFlex': + return addPrefixToAllValues('is-inline-flex'); + case 'block': + return addPrefixToAllValues('is-block'); + case 'inlineBlock': + return addPrefixToAllValues('is-inline-block'); + case 'inline': + return addPrefixToAllValues('is-inline'); + case 'is': + return addPrefixToAllValues('is'); + case 'has': + return addPrefixToAllValues('has'); + default: + // returns an empty string if key does not match the API + return ''; + } + } - // controls whether the formatString or formatARray method should be called based on the value - formatClassname(selector: string, value: string | string[] = ''): string { - // if value is a string, pass it into the formatString method - if (typeof value === 'string') { - return this.formatString(selector, value); - } - // if value is an array of only strings, pass it into the formatArray method - else if ( - Array.isArray(value) && - value.map((entry) => typeof entry === 'string') - ) { - return this.formatArray(selector, value); - } - // if value if neither of the above, log a warning to the console and return an empty string - else if (process.env.NODE_ENV === 'development') { - // if in development mode, log a simple warning to the console - console.warn( - 'Invalid value has been passed to bulmaclassnames. Values can only be a string or' + - ' and array of strings', - ); - } - // value is not a string or an array of only strings, return an empty string - return ''; - } + // controls whether the formatString or formatARray method should be called based on the value + formatClassname(selector: string, value: string | string[] = ''): string { + // if value is a string, pass it into the formatString method + if (typeof value === 'string') { + return this.formatString(selector, value); + } + // if value is an array of only strings, pass it into the formatArray method + else if ( + Array.isArray(value) && + value.map((entry) => typeof entry === 'string') + ) { + return this.formatArray(selector, value); + } + // if value if neither of the above, return an empty string + return ''; + } - // applies the formatClassname method to all of the entries passed in to the classnames object - main(): string { - // imperative version of Object.entries to pass type checks with Flow - let result = Object.keys(this.classnames) - .map((key) => { - return [key, this.classnames[key]]; - }) - // run each key:value pair into the formatClassname ethod - .map((entry) => { - // destructure the key (selector) and value (value) to pass into formatClassname - const [ - selector: string, - value: [string, string] | [string, string[]], - ] = entry; + // applies the formatClassname method to all of the entries passed in to the classnames object + main(): string { + // imperative version of Object.entries to pass type checks with Flow + let result = Object.keys(this.classnames) + .map((key) => { + return [key, this.classnames[key]]; + }) + // run each key:value pair into the formatClassname ethod + .map((entry) => { + // destructure the key (selector) and value (value) to pass into formatClassname + const [selector: string, value: Entry] = entry; - // return formattedClassName - return this.formatClassname(selector, value); - }); + // return formattedClassName + return this.formatClassname(selector, value); + }); - // if there is at least one key:value pair passed, then reduce all values into a single string - if (Object.keys(this.classnames).length !== 0) { - result = result.reduce((acc, next) => { - return acc.concat(` ${next}`).trim(); - }); - } + // if there is at least one key:value pair passed, then reduce all values into a single string + if (Object.keys(this.classnames).length !== 0) { + result = result.reduce((acc, next) => { + return acc.concat(` ${next}`).trim(); + }); + } - // check that result is a non-empty string, and return it if so or an empty string if not - return typeof result === 'string' && result.length > 1 ? result : ''; - } + // check that result is a non-empty string, and return it if so or an empty string if not + return typeof result === 'string' && result.length > 1 ? result : ''; + } - // run the main method as a getter - get result(): string { - return this.main(); - } + // run the main method as a getter + get result(): string { + return this.main(); + } } // pass in the object of classnames and export the formatted string -const bc = (classnames: Classnames): string => - new BulmaClassname(classnames).result; +const bulma = (classnames: Classnames): string => + new BulmaClassname(classnames).result; -// default export so it can be imported like `import bc from 'bulma-classnames'` -export default bc; +// default export so it can be imported like `import bulma from 'bulma-classnames'` +export default bulma; diff --git a/src/index.spec.js b/src/index.spec.js index 13a619a..4184ee3 100644 --- a/src/index.spec.js +++ b/src/index.spec.js @@ -1,87 +1,102 @@ -import bc from './index.js'; +import bulma from './index.js'; // object with only single string values const testStringValues = { - is: 'clearfix', - has: 'text-white', - backgroundColor: 'primary', - textColor: 'primary', - textSize: '7', - textWeight: 'bold', - textTransformation: 'uppercase', - textAlign: 'left', - color: 'primary', - column: '11-mobile', - offset: '1-mobile', - flex: 'mobile', - inlineFlex: 'mobile', - block: 'mobile', - inlineBlock: 'mobile', - inline: 'mobile', - image: 'half', - raw: 'is-primary', + is: 'clearfix', + has: 'text-white', + backgroundColor: 'primary', + textColor: 'primary', + textSize: '7', + textWeight: 'bold', + textTransformation: 'uppercase', + textAlign: 'left', + color: 'primary', + column: '11-mobile', + offset: '1-mobile', + flex: 'mobile', + inlineFlex: 'mobile', + block: 'mobile', + inlineBlock: 'mobile', + inline: 'mobile', + image: 'half', + raw: 'is-primary', }; // object with only array values const testArrayValues = { - is: ['clearfix', 'marginless'], - has: ['text-white', 'background-white'], - column: ['11-mobile', '10-tablet', '9-desktop'], - offset: ['11-mobile', '10-tablet', '9-desktop'], - flex: ['mobile', 'tablet', 'desktop'], - inlineFlex: ['mobile', 'tablet', 'desktop'], - block: ['mobile', 'tablet', 'desktop'], - inlineBlock: ['mobile', 'tablet', 'desktop'], - inline: ['mobile', 'tablet', 'desktop'], + is: ['clearfix', 'marginless'], + has: ['text-white', 'background-white'], + column: ['11-mobile', '10-tablet', '9-desktop'], + offset: ['11-mobile', '10-tablet', '9-desktop'], + flex: ['mobile', 'tablet', 'desktop'], + inlineFlex: ['mobile', 'tablet', 'desktop'], + block: ['mobile', 'tablet', 'desktop'], + inlineBlock: ['mobile', 'tablet', 'desktop'], + inline: ['mobile', 'tablet', 'desktop'], }; // object with array values, where only a string should be passed const testStringOnlyValues = { - backgroundColor: ['primary', 'link'], - textColor: ['primary', 'link'], - textSize: ['7', '5'], - textWeight: ['bold', 'semibold'], - textTransformation: ['uppercase', 'lowercase'], - textAlign: ['left', 'right'], - color: ['primary', 'link'], - image: ['half', 'two-thirds'], - raw: ['is-primary', 'is-link'], + backgroundColor: ['primary', 'link'], + textColor: ['primary', 'link'], + textSize: ['7', '5'], + textWeight: ['bold', 'semibold'], + textTransformation: ['uppercase', 'lowercase'], + textAlign: ['left', 'right'], + color: ['primary', 'link'], + image: ['half', 'two-thirds'], + raw: ['is-primary', 'is-link'], }; test('formats a string value', () => { - const result = bc(testStringValues); + const result = bulma(testStringValues); - expect(result).toBe( - 'is-clearfix has-text-white has-background-primary has-text-primary is-size-7 has-text-weight-bold is-uppercase has-text-left is-color-primary column is-11-mobile is-offset-1-mobile is-flex-mobile is-inline-flex-mobile is-block-mobile is-inline-block-mobile is-inline-mobile image is-half is-primary', - ); + expect(result).toBe( + 'is-clearfix has-text-white has-background-primary has-text-primary is-size-7 has-text-weight-bold is-uppercase has-text-left is-color-primary column is-11-mobile is-offset-1-mobile is-flex-mobile is-inline-flex-mobile is-block-mobile is-inline-block-mobile is-inline-mobile image is-half is-primary', + ); }); test('formats an array value', () => { - const result = bc(testArrayValues); + const result = bulma(testArrayValues); - expect(result).toBe( - 'is-clearfix is-marginless has-text-white has-background-white column is-11-mobile is-10-tablet is-9-desktop is-offset-11-mobile is-offset-10-tablet is-offset-9-desktop is-flex-mobile is-flex-tablet is-flex-desktop is-inline-flex-mobile is-inline-flex-tablet is-inline-flex-desktop is-block-mobile is-block-tablet is-block-desktop is-inline-block-mobile is-inline-block-tablet is-inline-block-desktop is-inline-mobile is-inline-tablet is-inline-desktop', - ); + expect(result).toBe( + 'is-clearfix is-marginless has-text-white has-background-white column is-11-mobile is-10-tablet is-9-desktop is-offset-11-mobile is-offset-10-tablet is-offset-9-desktop is-flex-mobile is-flex-tablet is-flex-desktop is-inline-flex-mobile is-inline-flex-tablet is-inline-flex-desktop is-block-mobile is-block-tablet is-block-desktop is-inline-block-mobile is-inline-block-tablet is-inline-block-desktop is-inline-mobile is-inline-tablet is-inline-desktop', + ); }); test('returns empty string on keys that don\'t accept array values', () => { - const result = bc(testStringOnlyValues); - expect(result).toBe(''); + const result = bulma(testStringOnlyValues); + expect(result).toBe(''); }); test('returns empty string on empty objects', () => { - const result = bc({}); - expect(result).toBe(''); + const result = bulma({}); + expect(result).toBe(''); +}); + +test('returns empty string on wrong keys', () => { + const result = bulma({ yo: 'yo' }); + expect(result).toBe(''); +}); + +test('returns empty string on a value that is not a string or array of strings', () => { + const resultWithObjectValue = bulma({ yo: {} }); + const resultWithArrayOfNumbersValue = bulma({ yo: [1, 2, 3] }); + const resultWithArrayOfObjectsValue = bulma({ yo: [{}, {}] }); + + expect(resultWithObjectValue).toBe(''); + expect(resultWithArrayOfNumbersValue).toBe(''); + expect(resultWithArrayOfObjectsValue).toBe(''); }); test('formats string properly with a single key:value pair', () => { - const result = bc({ is: 'color-primary' }); + const result = bulma({ is: 'color-primary' }); - expect(result).toBe('is-color-primary'); + expect(result).toBe('is-color-primary'); }); test('formats string properly with a more than one key:value pair', () => { - const result = bc({ is: 'color-primary', has: 'text-white' }); + const result = bulma({ is: 'color-primary', has: 'text-white' }); - expect(result).toBe('is-color-primary has-text-white'); + expect(result).toBe('is-color-primary has-text-white'); }); diff --git a/src/types.js b/src/types.js index 79482ba..7d41c20 100644 --- a/src/types.js +++ b/src/types.js @@ -3,184 +3,184 @@ // Colors // ---------------------------- type ColorValuesMain = - | 'primary' - | 'link' - | 'info' - | 'success' - | 'warning' - | 'danger'; + | 'primary' + | 'link' + | 'info' + | 'success' + | 'warning' + | 'danger'; type ColorValuesSecondary = - | 'white' - | 'white-ter' - | 'white-bis' - | 'grey-lighter' - | 'grey-light' - | 'grey' - | 'grey-dark' - | 'grey-darker' - | 'black' - | 'black-ter' - | 'black-bis'; + | 'white' + | 'white-ter' + | 'white-bis' + | 'grey-lighter' + | 'grey-light' + | 'grey' + | 'grey-dark' + | 'grey-darker' + | 'black' + | 'black-ter' + | 'black-bis'; type ButtonColorValues = - | 'white' - | 'light' - | 'dark' - | 'black' - | 'text' - | ColorValuesMain; + | 'white' + | 'light' + | 'dark' + | 'black' + | 'text' + | ColorValuesMain; type TextColors = - | 'text-primary' - | 'text-link' - | 'text-info' - | 'text-success' - | 'text-warning' - | 'text-danger' - | 'text-white' - | 'text-white-ter' - | 'text-white-bis' - | 'text-grey-lighter' - | 'text-grey-light' - | 'text-grey' - | 'text-grey-dark' - | 'text-grey-darker' - | 'text-black' - | 'text-black-ter' - | 'text-black-bis'; + | 'text-primary' + | 'text-link' + | 'text-info' + | 'text-success' + | 'text-warning' + | 'text-danger' + | 'text-white' + | 'text-white-ter' + | 'text-white-bis' + | 'text-grey-lighter' + | 'text-grey-light' + | 'text-grey' + | 'text-grey-dark' + | 'text-grey-darker' + | 'text-black' + | 'text-black-ter' + | 'text-black-bis'; type TextAlign = - | 'centered' - | 'justified' - | 'left' - | 'right' - | 'centered' - | 'justified' - | 'left' - | 'right' - | 'centered' - | 'justified' - | 'left' - | 'right' - | 'centered' - | 'justified' - | 'left' - | 'right' - | 'centered' - | 'justified' - | 'left' - | 'right' - | 'centered' - | 'justified' - | 'left' - | 'right'; + | 'centered' + | 'justified' + | 'left' + | 'right' + | 'centered' + | 'justified' + | 'left' + | 'right' + | 'centered' + | 'justified' + | 'left' + | 'right' + | 'centered' + | 'justified' + | 'left' + | 'right' + | 'centered' + | 'justified' + | 'left' + | 'right' + | 'centered' + | 'justified' + | 'left' + | 'right'; type ResponsiveTypes = - | 'block' - | 'flex' - | 'inline' - | 'inline-block' - | 'inline-flex' - | 'block-mobile' - | 'block-tablet-only' - | 'block-desktop-only' - | 'block-widescreen-only' - | 'block-touch' - | 'block-tablet' - | 'block-desktop' - | 'block-widescreen' - | 'block-fullhd' - | 'inline-block-mobile' - | 'inline-block-tablet-only' - | 'inline-block-desktop-only' - | 'inline-block-widescreen-only' - | 'inline-block-touch' - | 'inline-block-tablet' - | 'inline-block-desktop' - | 'inline-block-widescreen' - | 'inline-block-fullhd' - | 'inline-mobile' - | 'inline-tablet-only' - | 'inline-desktop-only' - | 'inline-widescreen-only' - | 'inline-touch' - | 'inline-tablet' - | 'inline-desktop' - | 'inline-widescreen' - | 'inline-fullhd' - | 'flex-mobile' - | 'flex-tablet-only' - | 'flex-desktop-only' - | 'flex-widescreen-only' - | 'flex-touch' - | 'flex-tablet' - | 'flex-desktop' - | 'flex-widescreen' - | 'flex-fullhd' - | 'inline-flex-mobile' - | 'inline-flex-tablet-only' - | 'inline-flex-desktop-only' - | 'inline-flex-widescreen-only' - | 'inline-flex-touch' - | 'inline-flex-tablet' - | 'inline-flex-desktop' - | 'inline-flex-widescreen' - | 'inline-flex-fullhd'; + | 'block' + | 'flex' + | 'inline' + | 'inline-block' + | 'inline-flex' + | 'block-mobile' + | 'block-tablet-only' + | 'block-desktop-only' + | 'block-widescreen-only' + | 'block-touch' + | 'block-tablet' + | 'block-desktop' + | 'block-widescreen' + | 'block-fullhd' + | 'inline-block-mobile' + | 'inline-block-tablet-only' + | 'inline-block-desktop-only' + | 'inline-block-widescreen-only' + | 'inline-block-touch' + | 'inline-block-tablet' + | 'inline-block-desktop' + | 'inline-block-widescreen' + | 'inline-block-fullhd' + | 'inline-mobile' + | 'inline-tablet-only' + | 'inline-desktop-only' + | 'inline-widescreen-only' + | 'inline-touch' + | 'inline-tablet' + | 'inline-desktop' + | 'inline-widescreen' + | 'inline-fullhd' + | 'flex-mobile' + | 'flex-tablet-only' + | 'flex-desktop-only' + | 'flex-widescreen-only' + | 'flex-touch' + | 'flex-tablet' + | 'flex-desktop' + | 'flex-widescreen' + | 'flex-fullhd' + | 'inline-flex-mobile' + | 'inline-flex-tablet-only' + | 'inline-flex-desktop-only' + | 'inline-flex-widescreen-only' + | 'inline-flex-touch' + | 'inline-flex-tablet' + | 'inline-flex-desktop' + | 'inline-flex-widescreen' + | 'inline-flex-fullhd'; type ResponsiveBreakpoints = - | 'mobile' - | 'tablet-only' - | 'desktop-only' - | 'widescreen-only' - | 'touch' - | 'tablet' - | 'desktop' - | 'widescreen' - | 'fullhd'; + | 'mobile' + | 'tablet-only' + | 'desktop-only' + | 'widescreen-only' + | 'touch' + | 'tablet' + | 'desktop' + | 'widescreen' + | 'fullhd'; type Helpers = - | 'clearfix' - | 'pulled-left' - | 'pulled-right' - | 'marginless' - | 'paddingless' - | 'overlay' - | 'clipped' - | 'radiusless' - | 'shadowless' - | 'unselectable' - | 'invisible' - | 'sr-only'; + | 'clearfix' + | 'pulled-left' + | 'pulled-right' + | 'marginless' + | 'paddingless' + | 'overlay' + | 'clipped' + | 'radiusless' + | 'shadowless' + | 'unselectable' + | 'invisible' + | 'sr-only'; type HeroModifiers = 'bold' | 'medium' | 'large' | 'fullheight'; type TileModifiers = 'ancestor' | 'parent' | 'child' | 'vertical'; type FormIsModifiers = - | 'expanded' - | 'full-width' - | 'grouped' - | 'grouped-centered' - | 'grouped-right' - | 'grouped-multiline' - | 'small' - | 'medium' - | 'large'; + | 'expanded' + | 'full-width' + | 'grouped' + | 'grouped-centered' + | 'grouped-right' + | 'grouped-multiline' + | 'small' + | 'medium' + | 'large'; type FormHasModifiers = 'addons' | 'addons-centered' | 'addons-right'; type ButtonIsModifiers = - | 'left' - | 'right' - | 'rounded' - | 'hovered' - | 'focused' - | 'loading' - | 'static' - | 'active' - | 'outlined' - | 'inverted'; + | 'left' + | 'right' + | 'rounded' + | 'hovered' + | 'focused' + | 'loading' + | 'static' + | 'active' + | 'outlined' + | 'inverted'; type ButtonHasModifiers = 'icons-left' | 'icons-right'; @@ -188,176 +188,176 @@ type ButtonHasModifiers = 'icons-left' | 'icons-right'; // ------------------------- type ImageSizes = - | '16x16' - | '24x24' - | '32x32' - | '48x48' - | '64x64' - | '96x96' - | '128x128' - | 'square' - | '1by1' - | '5by4' - | '4by3' - | '3by2' - | '5by3' - | '16by9' - | '2by1' - | '3by1' - | '4by5' - | '3by4' - | '2by3' - | '3by5' - | '9by16' - | '1by2' - | '1by3'; + | '16x16' + | '24x24' + | '32x32' + | '48x48' + | '64x64' + | '96x96' + | '128x128' + | 'square' + | '1by1' + | '5by4' + | '4by3' + | '3by2' + | '5by3' + | '16by9' + | '2by1' + | '3by1' + | '4by5' + | '3by4' + | '2by3' + | '3by5' + | '9by16' + | '1by2' + | '1by3'; type ColumnSizes = - | 'three-quarters' - | 'two-thirds' - | 'two-fifths' - | 'half' - | 'one-third' - | 'one-quarter' - | 'four-fifths' - | 'three-fifths' - | 'two-fifths' - | 'one-fifth' - | '0' - | '1' - | '2' - | '3' - | '4' - | '5' - | '6' - | '7' - | '8' - | '9' - | '10' - | '11'; + | 'three-quarters' + | 'two-thirds' + | 'two-fifths' + | 'half' + | 'one-third' + | 'one-quarter' + | 'four-fifths' + | 'three-fifths' + | 'two-fifths' + | 'one-fifth' + | '0' + | '1' + | '2' + | '3' + | '4' + | '5' + | '6' + | '7' + | '8' + | '9' + | '10' + | '11'; type TextSizes = - | 'size-1' - | 'size-2' - | 'size-3' - | 'size-4' - | 'size-5' - | 'size-6' - | 'size-7' - | 'size-1-mobile' - | 'size-2-mobile' - | 'size-3-mobile' - | 'size-4-mobile' - | 'size-5-mobile' - | 'size-6-mobile' - | 'size-7-mobile' - | 'size-1-tablet' - | 'size-2-tablet' - | 'size-3-tablet' - | 'size-4-tablet' - | 'size-5-tablet' - | 'size-6-tablet' - | 'size-7-tablet' - | 'size-1-touch' - | 'size-2-touch' - | 'size-3-touch' - | 'size-4-touch' - | 'size-5-touch' - | 'size-6-touch' - | 'size-7-touch' - | 'size-1-desktop' - | 'size-2-desktop' - | 'size-3-desktop' - | 'size-4-desktop' - | 'size-5-desktop' - | 'size-6-desktop' - | 'size-7-desktop' - | 'size-1-widescreen' - | 'size-2-widescreen' - | 'size-3-widescreen' - | 'size-4-widescreen' - | 'size-5-widescreen' - | 'size-6-widescreen' - | 'size-7-widescreen' - | 'size-1-fullhd' - | 'size-2-fullhd' - | 'size-3-fullhd' - | 'size-4-fullhd' - | 'size-5-fullhd' - | 'size-6-fullhd' - | 'size-7-fullhd'; + | 'size-1' + | 'size-2' + | 'size-3' + | 'size-4' + | 'size-5' + | 'size-6' + | 'size-7' + | 'size-1-mobile' + | 'size-2-mobile' + | 'size-3-mobile' + | 'size-4-mobile' + | 'size-5-mobile' + | 'size-6-mobile' + | 'size-7-mobile' + | 'size-1-tablet' + | 'size-2-tablet' + | 'size-3-tablet' + | 'size-4-tablet' + | 'size-5-tablet' + | 'size-6-tablet' + | 'size-7-tablet' + | 'size-1-touch' + | 'size-2-touch' + | 'size-3-touch' + | 'size-4-touch' + | 'size-5-touch' + | 'size-6-touch' + | 'size-7-touch' + | 'size-1-desktop' + | 'size-2-desktop' + | 'size-3-desktop' + | 'size-4-desktop' + | 'size-5-desktop' + | 'size-6-desktop' + | 'size-7-desktop' + | 'size-1-widescreen' + | 'size-2-widescreen' + | 'size-3-widescreen' + | 'size-4-widescreen' + | 'size-5-widescreen' + | 'size-6-widescreen' + | 'size-7-widescreen' + | 'size-1-fullhd' + | 'size-2-fullhd' + | 'size-3-fullhd' + | 'size-4-fullhd' + | 'size-5-fullhd' + | 'size-6-fullhd' + | 'size-7-fullhd'; type IsValues = - | Helpers - | 'mobile' - | 'narrow' - | 'gapless' - | 'multiline' - | 'centered' - | 'delete' - | 'multiple' - | 'selected' - | 'spaced' - | 'grouped-multiline' - | 'transparent' - | 'fixed-top' - | 'fixed-bottom' - | 'up' - | 'hoverable' - | 'boxed' - | 'toggle' - | TextSizes - | 'toggle-rounded' - | TileModifiers - | HeroModifiers - | Helpers - | ResponsiveBreakpoints - | ResponsiveTypes - | ButtonIsModifiers - | FormIsModifiers - | ColumnSizes - | ImageSizes - | ColorValuesMain - | ColorValuesSecondary - | ButtonColorValues - | HeroModifiers - | TileModifiers; + | Helpers + | 'mobile' + | 'narrow' + | 'gapless' + | 'multiline' + | 'centered' + | 'delete' + | 'multiple' + | 'selected' + | 'spaced' + | 'grouped-multiline' + | 'transparent' + | 'fixed-top' + | 'fixed-bottom' + | 'up' + | 'hoverable' + | 'boxed' + | 'toggle' + | TextSizes + | 'toggle-rounded' + | TileModifiers + | HeroModifiers + | Helpers + | ResponsiveBreakpoints + | ResponsiveTypes + | ButtonIsModifiers + | FormIsModifiers + | ColumnSizes + | ImageSizes + | ColorValuesMain + | ColorValuesSecondary + | ButtonColorValues + | HeroModifiers + | TileModifiers; type HasValues = - | TextColors - | TextAlign - | 'arrow-separator' - | 'bullet-separator' - | 'dot-separator' - | 'dropdown' - | 'dropdown-up' - | 'succeeds-separator' - | FormHasModifiers - | ButtonHasModifiers; + | TextColors + | TextAlign + | 'arrow-separator' + | 'bullet-separator' + | 'dot-separator' + | 'dropdown' + | 'dropdown-up' + | 'succeeds-separator' + | FormHasModifiers + | ButtonHasModifiers; /** * Enums for possible key:value pairs that are accepted in the API **/ export type Classnames = { - is?: IsValues | string | string[], - has?: HasValues | string | string[], - backgroundColor?: string, - textColor?: string, - textSize?: string, - textWeight?: string, - textTransformation?: string, - textAlign?: string, - color?: string, - column?: string | string[], - offset?: string | string[], - flex?: string | string[], - inlineFlex?: string | string[], - block?: string | string[], - inlineBlock?: string | string[], - inline?: string | string[], - image?: string, - raw?: string, + is?: IsValues | string | string[], + has?: HasValues | string | string[], + backgroundColor?: string, + textColor?: string, + textSize?: string, + textWeight?: string, + textTransformation?: string, + textAlign?: string, + color?: string, + column?: string | string[], + offset?: string | string[], + flex?: string | string[], + inlineFlex?: string | string[], + block?: string | string[], + inlineBlock?: string | string[], + inline?: string | string[], + image?: string, + raw?: string, }; /** diff --git a/yarn.lock b/yarn.lock index 020f228..a2e4ee5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1683,6 +1683,17 @@ cosmiconfig@^5.0.1: js-yaml "^3.9.0" parse-json "^4.0.0" +coveralls@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-3.0.2.tgz#f5a0bcd90ca4e64e088b710fa8dda640aea4884f" + dependencies: + growl "~> 1.10.0" + js-yaml "^3.11.0" + lcov-parse "^0.0.10" + log-driver "^1.2.7" + minimist "^1.2.0" + request "^2.85.0" + create-error-class@^3.0.0: version "3.0.2" resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6" @@ -2895,6 +2906,10 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9: version "4.1.11" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658" +"growl@~> 1.10.0": + version "1.10.5" + resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e" + growly@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" @@ -4074,6 +4089,10 @@ lcid@^1.0.0: dependencies: invert-kv "^1.0.0" +lcov-parse@^0.0.10: + version "0.0.10" + resolved "https://registry.yarnpkg.com/lcov-parse/-/lcov-parse-0.0.10.tgz#1b0b8ff9ac9c7889250582b70b71315d9da6d9a3" + left-pad@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e" @@ -4199,6 +4218,10 @@ lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, version "4.17.10" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7" +log-driver@^1.2.7: + version "1.2.7" + resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8" + loglevel-colored-level-prefix@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/loglevel-colored-level-prefix/-/loglevel-colored-level-prefix-1.0.0.tgz#6a40218fdc7ae15fc76c3d0f3e676c465388603e" @@ -5725,7 +5748,7 @@ request-promise-native@^1.0.5: stealthy-require "^1.1.0" tough-cookie ">=2.3.3" -request@^2.87.0: +request@^2.85.0, request@^2.87.0: version "2.87.0" resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e" dependencies: