├── .babelrc ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── GETTING_STARTED.md ├── LICENSE ├── README.md ├── codecov.yml ├── docs ├── ArrowKeyNavigation │ └── index.html ├── Async │ └── index.html ├── Button │ └── index.html ├── CNAME ├── Checkbox │ └── index.html ├── CheckboxGroup │ └── index.html ├── Dialog │ └── index.html ├── FittedText │ └── index.html ├── Image │ └── index.html ├── Input │ └── index.html ├── Modal │ └── index.html ├── Pagination │ └── index.html ├── Popover │ └── index.html ├── Portal │ └── index.html ├── Progress │ └── index.html ├── ProgressiveDisclosure │ └── index.html ├── Radio │ └── index.html ├── SegmentedControl │ └── index.html ├── TokenizedInput │ └── index.html ├── Typeahead │ └── index.html ├── appcache │ ├── manifest.appcache │ └── manifest.html ├── assets │ ├── 0.41764f8304dbaa311566.js │ ├── 1.3df103b7fbd4b7760b6f.js │ ├── 10.03a21760451bb6f5a891.js │ ├── 11.daa5f3b281e8f4e017af.js │ ├── 12.4019d07048de936ec6bf.js │ ├── 13.7c48de3ca1ee7fa8da1d.js │ ├── 14.0155f94bde0606c20622.js │ ├── 15.8c177a50642aa839feea.js │ ├── 16.c0d36a297e6b1fa779ef.js │ ├── 17.8c95634430f8584a78ba.js │ ├── 18.5124e9c0c85081ff04a5.js │ ├── 19.c2dce256f1d9f1365923.js │ ├── 2.c79b5d7509744ca8213d.js │ ├── 20.ec70363c2f44bf0dd842.js │ ├── 21.80723313a499705a37bd.js │ ├── 22.1503289b953ae43265b5.js │ ├── 23.f76ab9a8fdf9cd68af66.js │ ├── 24.caf5e8879cc8f06cf05e.js │ ├── 25.f592a5f665fc2f3157a9.js │ ├── 26.5a3e39ae1625c641d1bc.js │ ├── 27.ab39b3fbe1af1decb2d9.js │ ├── 3.9ad1a6fcf806ee488072.js │ ├── 4.d0632336afa56180f5de.js │ ├── 5.0297f4e43093369a0cb2.js │ ├── 6.a1fcb56270930c1a0fb9.js │ ├── 7.f20e1db23a70b6c34000.js │ ├── 8.524823c4e644451c3edf.js │ ├── 9.a41cb6b5339cf0b3d503.js │ ├── fonts │ │ └── lab-grotesque │ │ │ ├── LabGrotesque-Bold.woff │ │ │ ├── LabGrotesque-Bold.woff2 │ │ │ ├── LabGrotesque-Italic.woff │ │ │ ├── LabGrotesque-Italic.woff2 │ │ │ ├── LabGrotesque-Light.woff │ │ │ ├── LabGrotesque-Light.woff2 │ │ │ ├── LabGrotesque-Medium.woff │ │ │ ├── LabGrotesque-Medium.woff2 │ │ │ ├── LabGrotesque-Regular.woff │ │ │ └── LabGrotesque-Regular.woff2 │ ├── main.c91acf6954d1ac9dca66.js │ ├── manifest.b4526284db1feb7cdde2.js │ ├── style.df240510a0cc90b2d90b6d98d6760a34.css │ └── vendor.72c5fc9a9b0b75903a9f.js ├── google807fc41fc49b08c5.html ├── googlede7fdedb6f21a3bc.html ├── index.html ├── kitchensink │ └── index.html ├── objectIntersection │ └── index.html ├── omitKeys │ └── index.html ├── quickstart │ └── index.html ├── sitemap.xml ├── sparkles.png ├── sw.js ├── transformProperty │ └── index.html ├── uuid │ └── index.html └── webNotification │ └── index.html ├── exports.js ├── exports.spec.js ├── lerna.json ├── package.json ├── packages ├── boundless-arrow-key-navigation │ ├── README.md │ ├── build │ │ └── index.js │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ └── package.json ├── boundless-async │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-button │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-checkbox-group │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-checkbox │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-dialog │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-fitted-text │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-image │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── error.svg │ │ ├── index.js │ │ ├── loader.gif │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-input │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ └── index.js │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-modal │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-pagination │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── fixture.json │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-popover │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-portal │ ├── README.md │ ├── build │ │ └── index.js │ ├── index.js │ ├── index.spec.js │ └── package.json ├── boundless-progress │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-progressive-disclosure │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-radio │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-segmented-control │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-tokenized-input │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-typeahead │ ├── README.md │ ├── build │ │ ├── index.js │ │ └── style.css │ ├── demo │ │ ├── index.js │ │ └── style.styl │ ├── index.js │ ├── index.spec.js │ ├── package.json │ └── style.styl ├── boundless-utils-object-intersection │ ├── README.md │ ├── build │ │ └── index.js │ ├── demo.js │ ├── index.js │ ├── index.spec.js │ └── package.json ├── boundless-utils-omit-keys │ ├── README.md │ ├── build │ │ └── index.js │ ├── demo.js │ ├── index.js │ ├── index.spec.js │ └── package.json ├── boundless-utils-test-helpers │ ├── index.js │ └── package.json ├── boundless-utils-transform-property │ ├── README.md │ ├── build │ │ └── index.js │ ├── demo.js │ ├── index.js │ └── package.json ├── boundless-utils-uuid │ ├── README.md │ ├── build │ │ └── index.js │ ├── demo.js │ ├── index.js │ ├── index.spec.js │ └── package.json └── boundless-utils-web-notification │ ├── README.md │ ├── build │ └── index.js │ ├── demo │ └── index.js │ ├── index.js │ ├── index.spec.js │ └── package.json ├── public ├── boundless.js ├── boundless.min.js ├── skin.css └── skin.min.css ├── scripts ├── build-indexes.js ├── build-master.js ├── build-packages.js ├── md-strip-top-loader.js ├── parallelize.sh ├── webpack.config.js ├── webpack.development.config.js └── webpack.release.config.js ├── site ├── boundless.styl ├── code.styl ├── demo.js ├── enhanced-link.js ├── index.js ├── index.template.ejs ├── linked-header-text.js ├── markdown.js ├── pascal-case.js ├── site.js ├── style.styl └── variables.styl ├── style.styl ├── variables.styl └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "test": { 4 | "compact": true, 5 | "comments": false, 6 | "plugins": [ 7 | "transform-class-properties", 8 | "transform-inline-environment-variables", 9 | ["transform-react-jsx", {"pragma": "createElement"}] 10 | ], 11 | "presets": [ 12 | "es2015", 13 | "react", 14 | "stage-2" 15 | ] 16 | }, 17 | 18 | "development": { 19 | "comments": false, 20 | "compact": true, 21 | "plugins": [ 22 | "lodash", 23 | "transform-class-properties", 24 | "transform-inline-environment-variables", 25 | ["transform-react-jsx", {"pragma": "createElement"}] 26 | ], 27 | "presets": [ 28 | ["es2015", {"modules": false}], 29 | "react", 30 | "stage-2" 31 | ] 32 | }, 33 | 34 | "production": { 35 | "compact": true, 36 | "comments": false, 37 | "plugins": [ 38 | "lodash", 39 | "transform-class-properties", 40 | "transform-react-remove-prop-types", 41 | "transform-inline-environment-variables", 42 | ["transform-react-jsx", {"pragma": "createElement"}] 43 | ], 44 | "presets": [ 45 | ["es2015", {"modules": false}], 46 | "react", 47 | "stage-2" 48 | ] 49 | }, 50 | 51 | "site-development": { 52 | "compact": true, 53 | "comments": false, 54 | "plugins": [ 55 | "lodash", 56 | "react-docgen", 57 | "transform-class-properties", 58 | "transform-inline-environment-variables", 59 | ["transform-react-jsx", {"pragma": "createElement"}] 60 | ], 61 | "presets": [ 62 | ["es2015", {"modules": false}], 63 | "react", 64 | "stage-2" 65 | ] 66 | }, 67 | 68 | "site-production": { 69 | "compact": true, 70 | "comments": false, 71 | "plugins": [ 72 | "lodash", 73 | "react-docgen", 74 | "transform-class-properties", 75 | ["transform-react-remove-prop-types", { 76 | "ignoreFilenames": [ 77 | "node_modules/react-router" 78 | ] 79 | }], 80 | "transform-inline-environment-variables", 81 | ["transform-react-jsx", {"pragma": "createElement"}] 82 | ], 83 | "presets": [ 84 | ["es2015", {"modules": false}], 85 | "react", 86 | "stage-2" 87 | ] 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/coverage 2 | **/public 3 | **/build 4 | **/node_modules 5 | **/docs 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # general things 2 | npm-debug.log 3 | .DS_Store 4 | node_modules/ 5 | .sass-cache/ 6 | 7 | # build things 8 | coverage/ 9 | packages/*/variables.styl 10 | lerna-debug.log 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | **/scripts 2 | **/site 3 | **/docs 4 | 5 | .eslint* 6 | .travis.yml 7 | codecov.yml 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | branches: 2 | only: master 3 | language: node_js 4 | node_js: '7' 5 | cache: 6 | directories: 7 | - node_modules 8 | script: 9 | - npm run lint 10 | - npm run bootstrap 11 | - npm run build:js:packages 12 | - npm run coverage -- --silent 13 | - node_modules/.bin/codecov 14 | env: 15 | global: 16 | secure: SBZljM0uFpHnutSYAjBqQcom/1x3dzzl84bR8vwJbdADhzbkt6KS9w+bDzT7OMl/ZERG7MzQCdiGAJi2iJfhRp9qS4NXsVdjMmrIe20UR8Pt6MO5OZgVqkA0dRPhuFcDftVvws+VBxweGZQDB0mA/Q6kwZXypDfaDRN0AEWJC+yf+N/9kPZ+oK9vxcjFS6F0RIo3bukZ14ZW3Hv4k4pDocuuKktjXpQ1o4skya6i/Tdku55iRSUluWFDPZto5FkpJItX+dJsP7OjbRjF8dDLOnd0526S7z3MCALRkU9m907K2g96KSNuH8UwEOsOxeMujcyHgmJxcEeFfN51570CM/lp0tzISdNTUctzlPb25UVxHTJpemf82EY9mcz8yVl+F9xHQhr0mv7WAr1OdlDaLh2CNeAoEd/1BF+I2M6hOY0RRMuyYWD0bonx1XsHJ0LoLBIve5AnAIG6G6bGKsavLJ7z2zQNeyUhP86CCmwW3QRulx75jy4FTI1NFD6GuATa9HS0Ip5SNXHVqRFr461ga5ruyBxWpDrwZTBSukOCJxgYveGxU6oZSrxsGNEvodjEgF8Wb9GkdA5l8QhFiS7r+JjozcF4uYjF/QXg9+pBw6F8Bm7MJtIKh/TFgS/8hD9F9wKYGxEjToaqy2egyniEgFt6edfpkjbm4wKKu1cLs/w= 17 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | See [Github releases](https://github.com/enigma-io/boundless/releases). 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributor Policy 2 | 3 | 1. [Development Process](#development-process) 4 | 1. [Bug Reporting](#bug-reporting) 5 | 1. [What is considered a bug?](#what-is-considered-a-bug) 6 | 1. [How do I report a bug?](#how-do-i-report-a-bug) 7 | 1. [How quickly will my bug be fixed?](#how-quickly-will-my-bug-be-fixed) 8 | 1. [Feature Requests](#feature-requests) 9 | 1. [Pull Requests](#pull-requests) 10 | 1. [Commit Message Format](#commit-message-format) 11 | 1. [Code Syntax and Guidelines](#code-syntax-and-guidelines) 12 | 13 | ## Development Process 14 | 15 | Boundless is primarily developed by [Evan Scott](https://github.com/yaycmyk) and Enigma's FE team. The CHANGELOG will be updated with each release and a git tag will be created. 16 | 17 | ## Bug Reporting 18 | ### What is considered a bug? 19 | 20 | If a component deviates from the spec outlined in its documentation (README.md), then that errant behavior is a bug. 21 | 22 | ### How do I report a bug? 23 | 24 | Create a new entry in the repository [issue tracker](https://github.com/enigma-io/boundless/issues). 25 | 26 | ### How quickly will my bug be fixed? 27 | 28 | The Boundless team is committed to fixing verified bugs as soon as possible. Depending on the complexity of the issue, a release to address it could be cut the same day, but time must be allowed to add regression testing and verify the fix in all supported browsers. 29 | 30 | ## Feature Requests 31 | 32 | Boundless addresses a specific need: to normalize behavior in common UI patterns and provide easily-composable components that do not require significant rewriting or tweaking for every new project. 33 | 34 | If you have an idea for functionality or a new component to be added to the kit, we welcome such requests in our [issue tracker](https://github.com/enigma-io/boundless/issues). If the request is too specific to your project's implementation, it will likely be rejected. 35 | 36 | ## Pull Requests 37 | 38 | Community pull requests (PRs) will only be considered for bug fixes and performance-related improvements. 39 | 40 | At this time, we are not accepting PRs for new components or functionality. Instead, follow the feature request procedure and, if it makes sense, we will include it in our roadmap. 41 | 42 | ### Commit Message Format 43 | 44 | Commit messages should be written in present tense. For example, "Replace Foo with Bar" instead of "Replaced Foo with Bar". 45 | 46 | Adhere to the 70/120 rule when writing commit messages: 47 | 48 | 1. The title line should be no more than 70 characters 49 | 1. Separate the title and body with an empty newline 50 | 1. The commit message body can be as long as you want, hard-wrapped at 120 characters per line 51 | 52 | Example: 53 | 54 | ```text 55 | Site / README updates 56 | 57 | Adding User Interface Guideline suggestions (thanks Eris!) and tweaking 58 | some of the styles and demos. 59 | ``` 60 | 61 | ### Code Syntax and Guidelines 62 | 63 | Boundless follows a variant of the AirBnB JS style guide. Lint your submission via `npm run lint` to ensure that you are in compliance before sending a PR. 64 | -------------------------------------------------------------------------------- /GETTING_STARTED.md: -------------------------------------------------------------------------------- 1 | # Getting started with Boundless 2 | __A guide to creating a Boundless-ready React web app__ 3 | 4 | > __Starting from scratch?__ 5 | > Enigma's [React webapp generator for Yeoman](https://github.com/enigma-io/generator-enigma) is a nifty tool that allows you to generate a boilerplate React web app built to official Enigma standards (more detailed usage instructions are available in that repo). 6 | 7 | ## Install Boundless 8 | 9 | Since Boundless is modular, you can use as little or as much of the library as you desire. We recommend starting out with all the components: 10 | 11 | ```bash 12 | npm install --save boundless 13 | ``` 14 | 15 | The `--save` option updates `package.json` automatically. 16 | 17 | Later on if you wish to only use a few specific components, they can easily be installed separately: 18 | 19 | ```bash 20 | npm install --save boundless-button boundless-popover 21 | ``` 22 | 23 | ## Add the Boundless CSS skin 24 | 25 | Boundless has default styles which can be imported into your CSS build tool of choice (we recommend [Stylus](http://stylus-lang.com/).) 26 | 27 | ### If you're using Stylus 28 | 29 | ```stylus 30 | // inside your main style.styl 31 | @import "node_modules/boundless/style.styl" 32 | ``` 33 | 34 | If you want to do any custom theming, feel free to redeclare variables present in [style.styl](https://github.com/enigma-io/boundless/blob/master/style.styl) above where you are importing it, like: 35 | 36 | ```stylus 37 | color-accent = royalblue 38 | 39 | @import "node_modules/boundless/style.styl" 40 | ``` 41 | 42 | The above will automatically recolor the component styles to match your app's accent color. 43 | 44 | ### If you're not using Stylus 45 | 46 | A precompiled version of the default styles is available at `node_modules/boundless/public/skin.css` or `node_modules/boundless/public/skin.css` (minified) for easy drop-in to your project. 47 | 48 | ## Try it out 49 | 50 | Here's an example of using the Boundless "Button" component. First, import [Button](/Button) into your desired React file: 51 | 52 | ```js 53 | import {Button} from 'boundless'; 54 | ``` 55 | 56 | Based on the [Button props](/Button#props), we know we can give it children of our choice and hook into the "pressed" event by supplying an `onPressed` callback. Here's a minimal functional example: 57 | 58 | ```jsx 59 | import React from 'react'; 60 | import {Button} from 'boundless'; 61 | 62 | export default () => ( 63 | 66 | ) 67 | ``` 68 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2015-present Enigma Technologies Inc 2 | 3 | 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: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | 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. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Boundless 2 | 3 | [![NPM version](https://img.shields.io/npm/v/boundless.svg)](https://www.npmjs.com/package/boundless) [![Build Status](https://travis-ci.org/enigma-io/boundless.svg?branch=master)](https://travis-ci.org/enigma-io/boundless) [![codecov](https://codecov.io/gh/enigma-io/boundless/branch/master/graph/badge.svg?token=p755jHqDqi)](https://codecov.io/gh/enigma-io/boundless) 4 | 5 | 6 | ## Installation 7 | 8 | ```bash 9 | # the whole library 10 | npm i boundless --save 11 | 12 | # or just a part of it 13 | npm i boundless-button --save 14 | ``` 15 | 16 | Boundless currently supports IE10+ (needs a [Promise polyfill](https://cdnjs.com/libraries/es6-promise)) and all other modern browsers. 17 | 18 | ## Philosophy 19 | 20 | Boundless is a UI toolkit that was conceived to abstract away difficult interface patterns. It follows three main guidelines: 21 | 22 | 1. Performance is mandatory, not a nice-to-have. 23 | 2. Components should be as customizable as possible. 24 | 3. Components should be as accessible as possible (falling back to WAI-ARIA attributes when necessary.) 25 | 26 | The general idea of this library is to provide ready-to-go solutions for things you really wouldn't want to build yourself, not because they're hard... but because they're hard to design _right_. We are always open to suggestions and strive to keep Boundless as concise and useful as possible. 27 | 28 | ## Reference styles 29 | 30 | A precompiled base "skin" is available to use as a base when customizing Boundless for your own project. Some of the components do rely on the reference layout in their styles to function properly. It is designed to be very unopinionated. 31 | 32 | You can find the compiled CSS at `/public/skin.css`. There is a minified version available as well: `/public/skin.min.css`. 33 | 34 | The Boundless website is based on this skin with branding colors, etc. 35 | 36 | ## Branding Boundless 37 | 38 | Thanks to the modular nature of [Stylus](http://stylus-lang.com/), injecting your own customization to things like accent color(s) is extremely simple. 39 | 40 | In your own project's `.styl` file, define any variable overrides (see [variables.styl](https://github.com/enigma-io/boundless/blob/master/variables.styl) for what variables can be overridden), then import Boundless's master styl file: 41 | 42 | ```stylus 43 | // first, pull in the variables 44 | @require "node_modules/boundless/variables"; 45 | 46 | // do overrides as desired... 47 | color-accent = red; 48 | 49 | // then pull in the rest of the styles 50 | @require "node_modules/boundless/style"; 51 | ``` 52 | 53 | Next time your project's CSS is built, Boundless's CSS will automatically be compiled with the appropriate changes and included in your stylesheet. 54 | 55 | ## Developing Boundless 56 | 57 | ```bash 58 | git clone git@github.com:enigma-io/boundless.git boundless 59 | cd boundless 60 | 61 | npm i 62 | npm start # runs the development server so you can make changes live ✨ 63 | ``` 64 | 65 | [MIT License](https://github.com/enigma-io/boundless/blob/master/LICENSE) 66 | -------------------------------------------------------------------------------- /codecov.yml: -------------------------------------------------------------------------------- 1 | codecov: 2 | bot: "enigma-bot" 3 | 4 | coverage: 5 | ignore: 6 | - "__tests__/*" 7 | - "*.spec.js" 8 | -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | boundless.js.org 2 | -------------------------------------------------------------------------------- /docs/appcache/manifest.appcache: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | #ver:6/6/2017, 12:45:52 AM 3 | #plugin:4.8.1 4 | 5 | CACHE: 6 | ../assets/0.41764f8304dbaa311566.js 7 | ../assets/1.3df103b7fbd4b7760b6f.js 8 | ../assets/2.c79b5d7509744ca8213d.js 9 | ../assets/3.9ad1a6fcf806ee488072.js 10 | ../assets/4.d0632336afa56180f5de.js 11 | ../assets/5.0297f4e43093369a0cb2.js 12 | ../assets/6.a1fcb56270930c1a0fb9.js 13 | ../assets/7.f20e1db23a70b6c34000.js 14 | ../assets/8.524823c4e644451c3edf.js 15 | ../assets/9.a41cb6b5339cf0b3d503.js 16 | ../assets/10.03a21760451bb6f5a891.js 17 | ../assets/11.daa5f3b281e8f4e017af.js 18 | ../assets/12.4019d07048de936ec6bf.js 19 | ../assets/13.7c48de3ca1ee7fa8da1d.js 20 | ../assets/14.0155f94bde0606c20622.js 21 | ../assets/15.8c177a50642aa839feea.js 22 | ../assets/16.c0d36a297e6b1fa779ef.js 23 | ../assets/17.8c95634430f8584a78ba.js 24 | ../assets/18.5124e9c0c85081ff04a5.js 25 | ../assets/19.c2dce256f1d9f1365923.js 26 | ../assets/20.ec70363c2f44bf0dd842.js 27 | ../assets/21.80723313a499705a37bd.js 28 | ../assets/22.1503289b953ae43265b5.js 29 | ../assets/23.f76ab9a8fdf9cd68af66.js 30 | ../assets/24.caf5e8879cc8f06cf05e.js 31 | ../assets/25.f592a5f665fc2f3157a9.js 32 | ../assets/26.5a3e39ae1625c641d1bc.js 33 | ../assets/27.ab39b3fbe1af1decb2d9.js 34 | ../assets/vendor.72c5fc9a9b0b75903a9f.js 35 | ../assets/main.c91acf6954d1ac9dca66.js 36 | ../assets/manifest.b4526284db1feb7cdde2.js 37 | ../assets/style.df240510a0cc90b2d90b6d98d6760a34.css 38 | ../sparkles.png 39 | ../ 40 | 41 | NETWORK: 42 | * -------------------------------------------------------------------------------- /docs/appcache/manifest.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/assets/10.03a21760451bb6f5a891.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([10],{511:function(n,e){n.exports="\x3c!---\nTHIS IS AN AUTOGENERATED FILE. EDIT PACKAGES/BOUNDLESS-UTILS-OMIT-KEYS/INDEX.JS INSTEAD.\n--\x3e\n\nReturns a modified version of the supplied object without the given keys.\n\n## Installation\n\n```bash\nnpm i boundless-utils-omit-keys --save\n```\n\nThen use it like:\n```jsx\n/** @jsx createElement */\n\nimport omitKeys from 'boundless-utils-omit-keys';\n\nomitKeys({ foo: 'bar', bar: 'baz' }, [ 'bar' ]); // returns `{foo: 'bar'}`\n```"}}); -------------------------------------------------------------------------------- /docs/assets/11.daa5f3b281e8f4e017af.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([11],{510:function(n,e){n.exports="\x3c!---\nTHIS IS AN AUTOGENERATED FILE. EDIT PACKAGES/BOUNDLESS-UTILS-OBJECT-INTERSECTION/INDEX.JS INSTEAD.\n--\x3e\n\nReturns an intersection of the first argument against the second argument's keys.\n\n## Installation\n\n```bash\nnpm i boundless-utils-object-intersection --save\n```\n\nThen use it like:\n```jsx\n/** @jsx createElement */\n\nimport intersect from 'boundless-utils-object-intersection';\n\nconst obj1 = { foo: 'bar', bar: 'baz', baz: 'fizz' };\nconst obj2 = { bar: 'x' };\n\nintersect(obj1, obj2); // returns `{bar: 'baz'}`\n```"}}); -------------------------------------------------------------------------------- /docs/assets/12.4019d07048de936ec6bf.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([12],{509:function(e,n){e.exports="## Installation\n\n```bash\n\nnpm i boundless --save\nnpm i boundless-button --save\n```\n\nBoundless currently supports IE10+ (needs a [Promise polyfill](https://cdnjs.com/libraries/es6-promise)) and all other modern browsers.\n\n## Philosophy\n\nBoundless is a UI toolkit that was conceived to abstract away difficult interface patterns. It follows three main guidelines:\n\n1. Performance is mandatory, not a nice-to-have.\n2. Components should be as customizable as possible.\n3. Components should be as accessible as possible (falling back to WAI-ARIA attributes when necessary.)\n\nThe general idea of this library is to provide ready-to-go solutions for things you really wouldn't want to build yourself, not because they're hard... but because they're hard to design _right_. We are always open to suggestions and strive to keep Boundless as concise and useful as possible.\n\n## Reference styles\n\nA precompiled base \"skin\" is available to use as a base when customizing Boundless for your own project. Some of the components do rely on the reference layout in their styles to function properly. It is designed to be very unopinionated.\n\nYou can find the compiled CSS at `/public/skin.css`. There is a minified version available as well: `/public/skin.min.css`.\n\nThe Boundless website is based on this skin with branding colors, etc.\n\n## Branding Boundless\n\nThanks to the modular nature of [Stylus](http://stylus-lang.com/), injecting your own customization to things like accent color(s) is extremely simple.\n\nIn your own project's `.styl` file, define any variable overrides (see [variables.styl](https://github.com/enigma-io/boundless/blob/master/variables.styl) for what variables can be overridden), then import Boundless's master styl file:\n\n```stylus\n// first, pull in the variables\n@require \"node_modules/boundless/variables\";\n\n// do overrides as desired...\ncolor-accent = red;\n\n// then pull in the rest of the styles\n@require \"node_modules/boundless/style\";\n```\n\nNext time your project's CSS is built, Boundless's CSS will automatically be compiled with the appropriate changes and included in your stylesheet.\n\n## Developing Boundless\n\n```bash\ngit clone git@github.com:enigma-io/boundless.git boundless\ncd boundless\n\nnpm i\nnpm start # runs the development server so you can make changes live ✨\n```\n\n[MIT License](https://github.com/enigma-io/boundless/blob/master/LICENSE)"}}); -------------------------------------------------------------------------------- /docs/assets/13.7c48de3ca1ee7fa8da1d.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([13],{508:function(n,e){n.exports="__A guide to creating a Boundless-ready React web app__\n\n> __Starting from scratch?__\n> Enigma's [React webapp generator for Yeoman](https://github.com/enigma-io/generator-enigma) is a nifty tool that allows you to generate a boilerplate React web app built to official Enigma standards (more detailed usage instructions are available in that repo).\n\n## Install Boundless\n\nSince Boundless is modular, you can use as little or as much of the library as you desire. We recommend starting out with all the components:\n\n```bash\nnpm install --save boundless\n```\n\nThe `--save` option updates `package.json` automatically.\n\nLater on if you wish to only use a few specific components, they can easily be installed separately:\n\n```bash\nnpm install --save boundless-button boundless-popover\n```\n\n## Add the Boundless CSS skin\n\nBoundless has default styles which can be imported into your CSS build tool of choice (we recommend [Stylus](http://stylus-lang.com/).)\n\n### If you're using Stylus\n\n```stylus\n// inside your main style.styl\n@import \"node_modules/boundless/style.styl\"\n```\n\nIf you want to do any custom theming, feel free to redeclare variables present in [style.styl](https://github.com/enigma-io/boundless/blob/master/style.styl) above where you are importing it, like:\n\n```stylus\ncolor-accent = royalblue\n\n@import \"node_modules/boundless/style.styl\"\n```\n\nThe above will automatically recolor the component styles to match your app's accent color.\n\n### If you're not using Stylus\n\nA precompiled version of the default styles is available at `node_modules/boundless/public/skin.css` or `node_modules/boundless/public/skin.css` (minified) for easy drop-in to your project.\n\n## Try it out\n\nHere's an example of using the Boundless \"Button\" component. First, import [Button](/Button) into your desired React file:\n\n```js\nimport {Button} from 'boundless';\n```\n\nBased on the [Button props](/Button#props), we know we can give it children of our choice and hook into the \"pressed\" event by supplying an `onPressed` callback. Here's a minimal functional example:\n\n```jsx\nimport React from 'react';\nimport {Button} from 'boundless';\n\nexport default () => (\n \n)\n```"}}); -------------------------------------------------------------------------------- /docs/assets/14.0155f94bde0606c20622.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([14],{485:function(i,n,t){"use strict";function o(){return new Promise(function(i,n){f.requestPermission(function(t){"granted"===t&&i(),n(c.DISABLED)})})}function e(){return new Promise(function(i,n){if(!f)return n(c.NOT_AVAILABLE);if("permission"in f){switch(f.permission){case"granted":return i();case"denied":return n(c.DISABLED)}o().then(i,n)}})}function r(i){return new Promise(function(n,t){return void 0===i?t(c.CONFIG_MISSING):"[object Object]"!==Object.prototype.toString.call(i)?t(c.CONFIG_TYPE):void 0===i.body?t(c.BODY_MISSING):!1===u(i.body)?t(c.BODY_TYPE):void 0===i.header?t(c.HEADER_MISSING):!1===u(i.header)?t(c.HEADER_TYPE):void 0!==i.icon&&!1===u(i.icon)?t(c.ICON_TYPE):void 0!==i.onClick&&!1===a(i.onClick)?t(c.ONCLICK_TYPE):void e().then(function(){var t=new f(i.header,{body:i.body,icon:i.icon});i.onClick&&t.addEventListener("click",i.onClick),n(t)},function(i){return t(i)})})}Object.defineProperty(n,"__esModule",{value:!0}),t.d(n,"errors",function(){return c}),n.default=r;var c={DISABLED:"webNotification: web notifications are currently disabled by user settings.",NOT_AVAILABLE:"webNotification: web notifications are not supported on this platform.",CONFIG_TYPE:"webNotification: passed a non-object as configuration.",CONFIG_MISSING:"webNotification: no configuration was passed.",BODY_TYPE:"webNotification: `body` must be a string.",BODY_MISSING:"webNotification: `body` was omitted from the configuration object.",HEADER_TYPE:"webNotification: `header` must be a string.",HEADER_MISSING:"webNotification: `header` was omitted from the configuration object.",ICON_TYPE:"webNotification: `icon` must be a URL string.",ONCLICK_TYPE:"webNotification: `onClick` must be a function."},a=function(i){return"function"==typeof i},u=function(i){return"string"==typeof i},f=function(){return!!window.Notification&&window.Notification}()}}); -------------------------------------------------------------------------------- /docs/assets/16.c0d36a297e6b1fa779ef.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([16],{501:function(t,e,c){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function n(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var o=c(178),i=c.n(o),s=c(188),l=c.n(s),p=c(0),f=(c.n(p),c(60)),u=c(92),d=Object.assign||function(t){for(var e=1;e {\n notify(this.template(this.state.n + 1)).catch((error) => console.warn(error));\n\n this.setState({ n: this.state.n + 1 });\n }\n\n template(index) {\n return {\n header: `Notification #${index}`,\n body: 'I can support up to two lines of text.',\n icon: 'http://icons.iconarchive.com/icons/icons8/ios7/128/Astrology-Winter-icon.png',\n onClick: () => window.open('http://www.epa.gov/'),\n };\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n}\n```"}}); -------------------------------------------------------------------------------- /docs/assets/8.524823c4e644451c3edf.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([8],{513:function(n,s){n.exports="\x3c!---\nTHIS IS AN AUTOGENERATED FILE. EDIT PACKAGES/BOUNDLESS-UTILS-UUID/INDEX.JS INSTEAD.\n--\x3e\n\nGenerates a unique ID. Adds a prefix so it is suitable for use as an HTML ID.\n\nBased on [this algorithm](https://gist.github.com/jed/982883).\n\n## Installation\n\n```bash\nnpm i boundless-utils-uuid --save\n```\n\nThen use it like:\n```jsx\n/** @jsx createElement */\n\nimport uuid from 'boundless-utils-uuid';\n\nuuid(); // b-1f2cd27f-0754-4344-9d20-436a201b2f80\n```"}}); -------------------------------------------------------------------------------- /docs/assets/9.a41cb6b5339cf0b3d503.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([9],{512:function(n,r){n.exports="\x3c!---\nTHIS IS AN AUTOGENERATED FILE. EDIT PACKAGES/BOUNDLESS-UTILS-TRANSFORM-PROPERTY/INDEX.JS INSTEAD.\n--\x3e\n\nReturns the appropriate vendor-prefixed property for use in programmatic transform style manipulation.\n\n## Installation\n\n```bash\nnpm i boundless-utils-transform-property --save\n```\n\nThen use it like:\n```jsx\n/** @jsx createElement */\n\nimport transformProperty from 'boundless-utils-transform-property';\n\ndocument.querySelector('.foo').style[transformProperty] = 'translateY(0)';\n```"}}); -------------------------------------------------------------------------------- /docs/assets/fonts/lab-grotesque/LabGrotesque-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enigma-io/boundless/0db516a4319a1fae6ff7df602d7a121dc5997b6c/docs/assets/fonts/lab-grotesque/LabGrotesque-Bold.woff -------------------------------------------------------------------------------- /docs/assets/fonts/lab-grotesque/LabGrotesque-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enigma-io/boundless/0db516a4319a1fae6ff7df602d7a121dc5997b6c/docs/assets/fonts/lab-grotesque/LabGrotesque-Bold.woff2 -------------------------------------------------------------------------------- /docs/assets/fonts/lab-grotesque/LabGrotesque-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enigma-io/boundless/0db516a4319a1fae6ff7df602d7a121dc5997b6c/docs/assets/fonts/lab-grotesque/LabGrotesque-Italic.woff -------------------------------------------------------------------------------- /docs/assets/fonts/lab-grotesque/LabGrotesque-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enigma-io/boundless/0db516a4319a1fae6ff7df602d7a121dc5997b6c/docs/assets/fonts/lab-grotesque/LabGrotesque-Italic.woff2 -------------------------------------------------------------------------------- /docs/assets/fonts/lab-grotesque/LabGrotesque-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enigma-io/boundless/0db516a4319a1fae6ff7df602d7a121dc5997b6c/docs/assets/fonts/lab-grotesque/LabGrotesque-Light.woff -------------------------------------------------------------------------------- /docs/assets/fonts/lab-grotesque/LabGrotesque-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enigma-io/boundless/0db516a4319a1fae6ff7df602d7a121dc5997b6c/docs/assets/fonts/lab-grotesque/LabGrotesque-Light.woff2 -------------------------------------------------------------------------------- /docs/assets/fonts/lab-grotesque/LabGrotesque-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enigma-io/boundless/0db516a4319a1fae6ff7df602d7a121dc5997b6c/docs/assets/fonts/lab-grotesque/LabGrotesque-Medium.woff -------------------------------------------------------------------------------- /docs/assets/fonts/lab-grotesque/LabGrotesque-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enigma-io/boundless/0db516a4319a1fae6ff7df602d7a121dc5997b6c/docs/assets/fonts/lab-grotesque/LabGrotesque-Medium.woff2 -------------------------------------------------------------------------------- /docs/assets/fonts/lab-grotesque/LabGrotesque-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enigma-io/boundless/0db516a4319a1fae6ff7df602d7a121dc5997b6c/docs/assets/fonts/lab-grotesque/LabGrotesque-Regular.woff -------------------------------------------------------------------------------- /docs/assets/fonts/lab-grotesque/LabGrotesque-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enigma-io/boundless/0db516a4319a1fae6ff7df602d7a121dc5997b6c/docs/assets/fonts/lab-grotesque/LabGrotesque-Regular.woff2 -------------------------------------------------------------------------------- /docs/assets/manifest.b4526284db1feb7cdde2.js: -------------------------------------------------------------------------------- 1 | !function(e){function a(c){if(f[c])return f[c].exports;var n=f[c]={i:c,l:!1,exports:{}};return e[c].call(n.exports,n,n.exports,a),n.l=!0,n.exports}var c=window.webpackJsonp;window.webpackJsonp=function(f,r,t){for(var o,d,b,u=0,i=[];u { 8 | it('does not have any undefined keys (if failed, the require is probably wrong)', () => { 9 | Object.keys(Boundless).forEach((key) => expect(Boundless[key]).not.toBeUndefined()); 10 | }); 11 | 12 | it('has as many keys as there are component folders (except utils)', () => { 13 | const folders = fs.readdirSync('packages').filter((name) => /^boundless-(?!utils)/.test(name)); 14 | 15 | folders.forEach((name) => { 16 | const exportName = _.pascalCase(name.replace('boundless-', '')); 17 | 18 | expect(Boundless[exportName]).not.toBeUndefined(); 19 | }); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.0.0-beta.37", 3 | "version": "1.1.0", 4 | "packages": [ 5 | "packages/*" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/boundless-arrow-key-navigation/demo/index.js: -------------------------------------------------------------------------------- 1 | import { createElement, PureComponent } from 'react'; 2 | import ArrowKeyNavigation from '../'; 3 | 4 | export default class ArrowKeyNavigationDemo extends PureComponent { 5 | state = { 6 | items: [ 'lorem', 'ipsum', 'dolor' ], 7 | } 8 | 9 | render() { 10 | return ( 11 |
12 |
13 |
Horizontal-only
14 | 15 | {this.state.items.map((item) => {item})} 16 | 17 |
18 | 19 |
20 |
Vertical-only
21 | 22 | {this.state.items.map((item) =>
  • {item}
    • )} 23 |     24 |
    25 | 26 |
    27 |
    Both directions
    28 | 29 | {this.state.items.map((item) =>
  • {item}
    • )} 30 |     31 |
    32 | 33 |
    34 |
    Second child active by default
    35 | 36 | {this.state.items.map((item) =>
  • {item}
    • )} 37 |     38 |
    39 | 40 |
    41 |
    Ignored child (horizontal rule)
    42 | 43 |
    lorem
    44 |
    45 |
    dolor
    46 |     47 |
    48 |
    49 | ); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/boundless-arrow-key-navigation/demo/style.styl: -------------------------------------------------------------------------------- 1 | // Demo-specific styles go here. Skin-specific styles go in ../style.styl. 2 | 3 | .demo-loose-list { 4 | > *:not(:last-child)::after { 5 | content: ', '; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/boundless-arrow-key-navigation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "boundless-arrow-key-navigation", 3 | "version": "1.1.0", 4 | "description": "A higher-order component for arrow key navigation on a grouping of children.", 5 | "main": "build/index.js", 6 | "module": "index.js", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/enigma-io/boundless.git" 10 | }, 11 | "keywords": [ 12 | "react", 13 | "hoc", 14 | "keyboard", 15 | "boundless" 16 | ], 17 | "contributors": [ 18 | "Evan Scott (http://yaycmyk.com)", 19 | "Abe Rubenstein ", 20 | "Jenn Creighton " 21 | ], 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/enigma-io/boundless/issues" 25 | }, 26 | "homepage": "https://boundless.js.org/ArrowKeyNavigation", 27 | "dependencies": { 28 | "boundless-utils-omit-keys": "^1.1.0", 29 | "boundless-utils-uuid": "^1.1.0" 30 | }, 31 | "peerDependencies": { 32 | "react": ">= 15.3", 33 | "react-dom": ">= 15.3" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/boundless-async/build/style.css: -------------------------------------------------------------------------------- 1 | .b-async-pending { 2 | position: relative; 3 | } 4 | .b-async-pending::before, 5 | .b-async-pending::after { 6 | content: ''; 7 | position: absolute; 8 | top: 50%; 9 | margin-top: -5px; 10 | left: 50%; 11 | margin-left: -5px; 12 | height: 10px; 13 | width: 10px; 14 | border-radius: 100%; 15 | background: #111; 16 | } 17 | .b-async-pending::before { 18 | animation: loaderBefore 0.7s ease-in-out alternate infinite; 19 | } 20 | .b-async-pending::after { 21 | animation: loaderAfter 0.7s ease-in-out alternate infinite; 22 | } 23 | @-moz-keyframes loaderBefore { 24 | from { 25 | left: 50%; 26 | } 27 | to { 28 | left: 49%; 29 | } 30 | } 31 | @-webkit-keyframes loaderBefore { 32 | from { 33 | left: 50%; 34 | } 35 | to { 36 | left: 49%; 37 | } 38 | } 39 | @-o-keyframes loaderBefore { 40 | from { 41 | left: 50%; 42 | } 43 | to { 44 | left: 49%; 45 | } 46 | } 47 | @keyframes loaderBefore { 48 | from { 49 | left: 50%; 50 | } 51 | to { 52 | left: 49%; 53 | } 54 | } 55 | @-moz-keyframes loaderAfter { 56 | from { 57 | left: 50%; 58 | } 59 | to { 60 | left: 51%; 61 | } 62 | } 63 | @-webkit-keyframes loaderAfter { 64 | from { 65 | left: 50%; 66 | } 67 | to { 68 | left: 51%; 69 | } 70 | } 71 | @-o-keyframes loaderAfter { 72 | from { 73 | left: 50%; 74 | } 75 | to { 76 | left: 51%; 77 | } 78 | } 79 | @keyframes loaderAfter { 80 | from { 81 | left: 50%; 82 | } 83 | to { 84 | left: 51%; 85 | } 86 | } 87 | /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhY2thZ2VzL2JvdW5kbGVzcy1hc3luYy9zdHlsZS5zdHlsIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCQTtFQUNJLFVBQVUsU0FBVjs7QUFHSjtBQUF5QjtFQUVyQixTQUFTLEdBQVQ7RUFDQSxVQUFVLFNBQVY7RUFDQSxLQUFLLElBQUw7RUFDQSxZQUFZLEtBQVo7RUFDQSxNQUFNLElBQU47RUFDQSxhQUFhLEtBQWI7RUFDQSxRQUFRLEtBQVI7RUFDQSxPQUFPLEtBQVA7RUFDQSxlQUFlLEtBQWY7RUFDQSxZQUFZLEtBQVo7O0FBR0o7RUFDSSxXQUFXLGlEQUFYOztBQUdKO0VBQ0ksV0FBVyxnREFBWDs7QUEzQ21CO0FBQ25CO0lBQ0ksTUFBTSxJQUFOOztBQUdKO0lBQ0ksTUFBTSxJQUFOOzs7QUFOZTtBQUNuQjtJQUNJLE1BQU0sSUFBTjs7QUFHSjtJQUNJLE1BQU0sSUFBTjs7O0FBTmU7QUFDbkI7SUFDSSxNQUFNLElBQU47O0FBR0o7SUFDSSxNQUFNLElBQU47OztBQU5lO0FBQ25CO0lBQ0ksTUFBTSxJQUFOOztBQUdKO0lBQ0ksTUFBTSxJQUFOOzs7QUFJYztBQUNsQjtJQUNJLE1BQU0sSUFBTjs7QUFHSjtJQUNJLE1BQU0sSUFBTjs7O0FBTmM7QUFDbEI7SUFDSSxNQUFNLElBQU47O0FBR0o7SUFDSSxNQUFNLElBQU47OztBQU5jO0FBQ2xCO0lBQ0ksTUFBTSxJQUFOOztBQUdKO0lBQ0ksTUFBTSxJQUFOOzs7QUFOYztBQUNsQjtJQUNJLE1BQU0sSUFBTjs7QUFHSjtJQUNJLE1BQU0sSUFBTiIsImZpbGUiOiJzdHlsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAcmVxdWlyZSBcInZhcmlhYmxlc1wiXG5cbkBrZXlmcmFtZXMgbG9hZGVyQmVmb3JlIHtcbiAgICBmcm9tIHtcbiAgICAgICAgbGVmdDogNTAlO1xuICAgIH1cblxuICAgIHRvIHtcbiAgICAgICAgbGVmdDogNDklO1xuICAgIH1cbn1cblxuQGtleWZyYW1lcyBsb2FkZXJBZnRlciB7XG4gICAgZnJvbSB7XG4gICAgICAgIGxlZnQ6IDUwJTtcbiAgICB9XG5cbiAgICB0byB7XG4gICAgICAgIGxlZnQ6IDUxJTtcbiAgICB9XG59XG5cbi5iLWFzeW5jLXBlbmRpbmcge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cblxuLmItYXN5bmMtcGVuZGluZzo6YmVmb3JlLFxuLmItYXN5bmMtcGVuZGluZzo6YWZ0ZXIge1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDUwJTtcbiAgICBtYXJnaW4tdG9wOiAtNXB4O1xuICAgIGxlZnQ6IDUwJTtcbiAgICBtYXJnaW4tbGVmdDogLTVweDtcbiAgICBoZWlnaHQ6IDEwcHg7XG4gICAgd2lkdGg6IDEwcHg7XG4gICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICBiYWNrZ3JvdW5kOiBBc3luYy1iYWNrZ3JvdW5kQ29sb3ItcGVuZGluZztcbn1cblxuLmItYXN5bmMtcGVuZGluZzo6YmVmb3JlIHtcbiAgICBhbmltYXRpb246IGxvYWRlckJlZm9yZSAwLjdzIGVhc2UtaW4tb3V0IGFsdGVybmF0ZSBpbmZpbml0ZTtcbn1cblxuLmItYXN5bmMtcGVuZGluZzo6YWZ0ZXIge1xuICAgIGFuaW1hdGlvbjogbG9hZGVyQWZ0ZXIgMC43cyBlYXNlLWluLW91dCBhbHRlcm5hdGUgaW5maW5pdGU7XG59XG4iXX0= */ -------------------------------------------------------------------------------- /packages/boundless-async/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "boundless-async", 3 | "version": "1.1.0", 4 | "description": "A higher-order component for rendering data that isn't ready yet.", 5 | "author": "Evan Scott (http://yaycmyk.com) (http://yaycmyk.com)", 6 | "main": "build/index.js", 7 | "module": "index.js", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/enigma-io/boundless.git" 11 | }, 12 | "keywords": [ 13 | "react", 14 | "hoc", 15 | "async", 16 | "boundless" 17 | ], 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/enigma-io/boundless/issues" 21 | }, 22 | "homepage": "https://boundless.js.org/Async", 23 | "dependencies": { 24 | "boundless-utils-omit-keys": "^1.1.0", 25 | "classnames": "^2.1.5" 26 | }, 27 | "peerDependencies": { 28 | "react": ">= 15.3", 29 | "react-dom": ">= 15.3" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/boundless-async/style.styl: -------------------------------------------------------------------------------- 1 | @require "variables" 2 | 3 | @keyframes loaderBefore { 4 | from { 5 | left: 50%; 6 | } 7 | 8 | to { 9 | left: 49%; 10 | } 11 | } 12 | 13 | @keyframes loaderAfter { 14 | from { 15 | left: 50%; 16 | } 17 | 18 | to { 19 | left: 51%; 20 | } 21 | } 22 | 23 | .b-async-pending { 24 | position: relative; 25 | } 26 | 27 | .b-async-pending::before, 28 | .b-async-pending::after { 29 | content: ''; 30 | position: absolute; 31 | top: 50%; 32 | margin-top: -5px; 33 | left: 50%; 34 | margin-left: -5px; 35 | height: 10px; 36 | width: 10px; 37 | border-radius: 100%; 38 | background: Async-backgroundColor-pending; 39 | } 40 | 41 | .b-async-pending::before { 42 | animation: loaderBefore 0.7s ease-in-out alternate infinite; 43 | } 44 | 45 | .b-async-pending::after { 46 | animation: loaderAfter 0.7s ease-in-out alternate infinite; 47 | } 48 | -------------------------------------------------------------------------------- /packages/boundless-button/demo/index.js: -------------------------------------------------------------------------------- 1 | import { createElement, PureComponent } from 'react'; 2 | import Button from '../'; 3 | 4 | export default class ButtonDemo extends PureComponent { 5 | state = { 6 | pressed: false, 7 | } 8 | 9 | handleClick = () => { 10 | // eslint-disable-next-line no-alert 11 | alert('A single-click was detected.'); 12 | } 13 | 14 | handlePressed = () => { 15 | this.setState({ pressed: true }); 16 | } 17 | 18 | handleUnpressed = () => { 19 | this.setState({ pressed: false }); 20 | } 21 | 22 | render() { 23 | return ( 24 |
    25 | 28 | 29 | 35 | 36 | 41 |
    42 | ); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/boundless-button/demo/style.styl: -------------------------------------------------------------------------------- 1 | // Demo-specific styles go here. Skin-specific styles go in ../style.styl. 2 | 3 | .tall-button { 4 | height: 50px; 5 | } 6 | -------------------------------------------------------------------------------- /packages/boundless-button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "boundless-button", 3 | "version": "1.1.0", 4 | "description": "A control with \"pressed\" state support.", 5 | "main": "build/index.js", 6 | "module": "index.js", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/enigma-io/boundless.git" 10 | }, 11 | "keywords": [ 12 | "react", 13 | "hoc", 14 | "button", 15 | "pressable", 16 | "boundless" 17 | ], 18 | "contributors": [ 19 | "Evan Scott (http://yaycmyk.com)", 20 | "Abe Rubenstein ", 21 | "Jenn Creighton " 22 | ], 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/enigma-io/boundless/issues" 26 | }, 27 | "homepage": "https://boundless.js.org/Button", 28 | "dependencies": { 29 | "classnames": "^2.1.5", 30 | "boundless-utils-omit-keys": "^1.1.0" 31 | }, 32 | "peerDependencies": { 33 | "react": ">= 15.3", 34 | "react-dom": ">= 15.3" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/boundless-button/style.styl: -------------------------------------------------------------------------------- 1 | @require "variables" 2 | 3 | // Skin-specific styles go here. Demo-specific styles go in demo/style.styl. 4 | 5 | .b-button { 6 | appearance: none; 7 | background: Button-backgroundColor; 8 | border: 1px solid Button-borderColor; 9 | border-radius: borderRadius; 10 | color: Button-color; 11 | cursor: pointer; 12 | font-size: 14px; 13 | margin: 0; 14 | overflow: hidden; 15 | padding: 0.5rem 0.75rem; 16 | text-decoration: none; 17 | vertical-align: middle; 18 | white-space: nowrap; 19 | 20 | transition: all 200ms ease; 21 | 22 | &[disabled], 23 | &[disabled]:active, 24 | &[disabled]:focus, 25 | &[disabled]:hover { 26 | background: Button-backgroundColor-disabled; 27 | border-color: Button-borderColor-disabled; 28 | color: Button-color-disabled; 29 | cursor: not-allowed; 30 | opacity: Button-opacity-disabled; 31 | } 32 | 33 | &:active { 34 | background: Button-backgroundColor-active; 35 | border-color: Button-borderColor-active; 36 | color: Button-color-active; 37 | } 38 | 39 | &:focus { 40 | background: Button-backgroundColor-focus; 41 | border-color: Button-borderColor-focus; 42 | color: Button-color-focus; 43 | } 44 | 45 | &:hover { 46 | background: Button-backgroundColor-hover; 47 | border-color: Button-borderColor-hover; 48 | color: Button-color-hover; 49 | } 50 | } 51 | 52 | .b-button + .b-button { 53 | margin-left: 15px; 54 | } 55 | -------------------------------------------------------------------------------- /packages/boundless-checkbox-group/build/style.css: -------------------------------------------------------------------------------- 1 | .b-checkbox-group .b-checkbox-wrapper:not(:last-child) { 2 | margin-bottom: 0.5em; 3 | } 4 | /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhY2thZ2VzL2JvdW5kbGVzcy1jaGVja2JveC1ncm91cC9zdHlsZS5zdHlsIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVFBO0VBQ0ksZUFBZSxNQUFmIiwiZmlsZSI6InN0eWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkByZXF1aXJlIFwidmFyaWFibGVzXCJcblxudW5sZXNzIGZsYXQtYnVpbGQge1xuICAgIEByZXF1aXJlIFwibm9kZV9tb2R1bGVzL2JvdW5kbGVzcy1jaGVja2JveC9zdHlsZVwiXG59XG5cbi8vIFNraW4tc3BlY2lmaWMgc3R5bGVzIGdvIGhlcmUuIERlbW8tc3BlY2lmaWMgc3R5bGVzIGdvIGluIGRlbW8vc3R5bGUuc3R5bC5cblxuLmItY2hlY2tib3gtZ3JvdXAgLmItY2hlY2tib3gtd3JhcHBlcjpub3QoOmxhc3QtY2hpbGQpIHtcbiAgICBtYXJnaW4tYm90dG9tOiAwLjVlbTtcbn1cbiJdfQ== */ -------------------------------------------------------------------------------- /packages/boundless-checkbox-group/demo/index.js: -------------------------------------------------------------------------------- 1 | import { createElement, PureComponent } from 'react'; 2 | import CheckboxGroup from '../'; 3 | import { filter, map, merge, some } from 'lodash'; 4 | 5 | export default class CheckboxGroupDemo extends PureComponent { 6 | state = { 7 | items: [ { 8 | inputProps: { 9 | checked: false, 10 | name: 'likes-science', 11 | }, 12 | label: 'Science', 13 | }, { 14 | inputProps: { 15 | checked: false, 16 | name: 'likes-math', 17 | }, 18 | label: 'Mathematics', 19 | }, { 20 | inputProps: { 21 | checked: false, 22 | name: 'likes-tech', 23 | }, 24 | label: 'Technology', 25 | }, { 26 | inputProps: { 27 | checked: false, 28 | name: 'likes-art', 29 | }, 30 | label: 'Art', 31 | }, { 32 | inputProps: { 33 | checked: false, 34 | name: 'likes-sports', 35 | }, 36 | label: 'Sports', 37 | } ], 38 | } 39 | 40 | mutateAll(delta) { 41 | this.setState({ 42 | items: map(this.state.items, function transformer(item) { 43 | return merge({}, item, delta); 44 | }), 45 | }); 46 | } 47 | 48 | mutateOne(name, delta) { 49 | this.setState({ 50 | items: map(this.state.items, function transformer(item) { 51 | if (item.inputProps.name !== name) { 52 | return item; 53 | } 54 | 55 | return merge({}, item, delta); 56 | }), 57 | }); 58 | } 59 | 60 | handleAllChecked = () => { 61 | this.mutateAll({ inputProps: { checked: true } }); 62 | } 63 | 64 | handleAllUnchecked = () => { 65 | this.mutateAll({ inputProps: { checked: false } }); 66 | } 67 | 68 | handleChildChecked = (name) => { 69 | this.mutateOne(name, { inputProps: { checked: true } }); 70 | } 71 | 72 | handleChildUnchecked = (name) => { 73 | this.mutateOne(name, { inputProps: { checked: false } }); 74 | } 75 | 76 | renderFeedback() { 77 | if (some(this.state.items, { inputProps: { checked: true } })) { 78 | const liked = map(filter(this.state.items, { inputProps: { checked: true } }), 'label'); 79 | const lastIndex = liked.length - 1; 80 | 81 | return ( 82 |

    You said you like: {liked.length === 1 ? liked[0] : [ liked.slice(0, lastIndex).join(', '), 'and', liked.slice(lastIndex) ].join(' ')}.

    83 | ); 84 | } 85 | } 86 | 87 | render() { 88 | return ( 89 |
    90 |

    What subjects are you interested in?

    91 | 100 |
    101 | {this.renderFeedback()} 102 |
    103 | ); 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /packages/boundless-checkbox-group/demo/style.styl: -------------------------------------------------------------------------------- 1 | // Demo-specific styles go here. Skin-specific styles go in ../style.styl. 2 | 3 | .checkbox-group-demo { 4 | columns: 3; 5 | } 6 | 7 | @media all and (max-width: 600px) { 8 | .checkbox-group-demo { 9 | columns: 2; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/boundless-checkbox-group/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "boundless-checkbox-group", 3 | "version": "1.1.0", 4 | "description": "A controller view for managing the aggregate state of multiple, related checkboxes.", 5 | "main": "build/index.js", 6 | "module": "index.js", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/enigma-io/boundless.git" 10 | }, 11 | "keywords": [ 12 | "react", 13 | "hoc", 14 | "checkbox", 15 | "checkbox group", 16 | "select all", 17 | "boundless" 18 | ], 19 | "contributors": [ 20 | "Evan Scott (http://yaycmyk.com)", 21 | "Abe Rubenstein ", 22 | "Jenn Creighton " 23 | ], 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/enigma-io/boundless/issues" 27 | }, 28 | "homepage": "https://boundless.js.org/CheckboxGroup", 29 | "dependencies": { 30 | "boundless-checkbox": "^1.1.0", 31 | "boundless-utils-omit-keys": "^1.1.0", 32 | "boundless-utils-uuid": "^1.1.0", 33 | "classnames": "^2.1.5" 34 | }, 35 | "peerDependencies": { 36 | "react": ">= 15.3", 37 | "react-dom": ">= 15.3" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/boundless-checkbox-group/style.styl: -------------------------------------------------------------------------------- 1 | @require "variables" 2 | 3 | unless flat-build { 4 | @require "node_modules/boundless-checkbox/style" 5 | } 6 | 7 | // Skin-specific styles go here. Demo-specific styles go in demo/style.styl. 8 | 9 | .b-checkbox-group .b-checkbox-wrapper:not(:last-child) { 10 | margin-bottom: 0.5em; 11 | } 12 | -------------------------------------------------------------------------------- /packages/boundless-checkbox/demo/index.js: -------------------------------------------------------------------------------- 1 | import { createElement, PureComponent } from 'react'; 2 | import Checkbox from '../'; 3 | 4 | export default class CheckboxDemo extends PureComponent { 5 | state = { 6 | checkboxes: [ { 7 | checked: false, 8 | indeterminate: false, 9 | label: 'An unchecked checkbox', 10 | name: 'box1', 11 | }, { 12 | checked: true, 13 | indeterminate: false, 14 | label: 'A checked checkbox', 15 | name: 'box2', 16 | }, { 17 | checked: false, 18 | indeterminate: true, 19 | label: 'An indeterminate (mixed) checkbox', 20 | name: 'box3', 21 | } ], 22 | } 23 | 24 | handleInteraction(event) { 25 | // eslint-disable-next-line no-alert 26 | alert(`${event.target.name} ${event.target.checked ? 'checked' : 'unchecked'}!\n\nThe input will now revert to its previous state because this demo does not persist model changes.`); 27 | } 28 | 29 | render() { 30 | return ( 31 |
    32 | {this.state.checkboxes.map((definition) => { 33 | return ( 34 | 39 | ); 40 | })} 41 |
    42 | ); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/boundless-checkbox/demo/style.styl: -------------------------------------------------------------------------------- 1 | // Demo-specific styles go here. Skin-specific styles go in ../style.styl. 2 | 3 | .b-checkbox:focus { 4 | outline: 0; 5 | } 6 | -------------------------------------------------------------------------------- /packages/boundless-checkbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "boundless-checkbox", 3 | "version": "1.1.0", 4 | "description": "An accessible checkbox with indeterminate support.", 5 | "main": "build/index.js", 6 | "module": "index.js", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/enigma-io/boundless.git" 10 | }, 11 | "keywords": [ 12 | "react", 13 | "checkbox", 14 | "boundless" 15 | ], 16 | "contributors": [ 17 | "Evan Scott (http://yaycmyk.com)", 18 | "Abe Rubenstein ", 19 | "Jenn Creighton " 20 | ], 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/enigma-io/boundless/issues" 24 | }, 25 | "homepage": "https://boundless.js.org/Checkbox", 26 | "dependencies": { 27 | "classnames": "^2.1.5", 28 | "boundless-utils-omit-keys": "^1.1.0", 29 | "boundless-utils-uuid": "^1.1.0" 30 | }, 31 | "peerDependencies": { 32 | "react": ">= 15.3", 33 | "react-dom": ">= 15.3" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/boundless-dialog/build/style.css: -------------------------------------------------------------------------------- 1 | .b-dialog-wrapper { 2 | line-height: 0; 3 | position: absolute; 4 | top: 0; 5 | left: 0; 6 | z-index: 9999; 7 | } 8 | .b-dialog { 9 | background: #fff; 10 | border: 1px solid #e6e6e6; 11 | border-radius: 2px; 12 | box-shadow: 1px 2px 3px #e6e6e6; 13 | color: #111; 14 | line-height: 1.5; 15 | padding: 1.5rem; 16 | } 17 | .b-dialog *:last-child { 18 | margin-bottom: 0; 19 | } 20 | /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhY2thZ2VzL2JvdW5kbGVzcy1kaWFsb2cvc3R5bGUuc3R5bCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJQTtFQUNJLGFBQWEsRUFBYjtFQUNBLFVBQVUsU0FBVjtFQUNBLEtBQUssRUFBTDtFQUNBLE1BQU0sRUFBTjtFQUNBLFNBQVMsS0FBVDs7QUFHSjtFQUNJLFlBQVksS0FBWjtFQUNBLFFBQVEsa0JBQVI7RUFDQSxlQUFlLElBQWY7RUFDQSxZQUFZLG9CQUFaO0VBQ0EsT0FBTyxLQUFQO0VBQ0EsYUFBYSxJQUFiO0VBQ0EsU0FBUyxPQUFUOztBQUVBO0VBQ0ksZUFBZSxFQUFmIiwiZmlsZSI6InN0eWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkByZXF1aXJlIFwidmFyaWFibGVzXCJcblxuLy8gU2tpbi1zcGVjaWZpYyBzdHlsZXMgZ28gaGVyZS4gRGVtby1zcGVjaWZpYyBzdHlsZXMgZ28gaW4gZGVtby9zdHlsZS5zdHlsLlxuXG4uYi1kaWFsb2ctd3JhcHBlciB7XG4gICAgbGluZS1oZWlnaHQ6IDA7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHotaW5kZXg6IDk5OTk7XG59XG5cbi5iLWRpYWxvZyB7XG4gICAgYmFja2dyb3VuZDogRGlhbG9nLWJhY2tncm91bmRDb2xvcjtcbiAgICBib3JkZXI6IDFweCBzb2xpZCBEaWFsb2ctYm9yZGVyQ29sb3I7XG4gICAgYm9yZGVyLXJhZGl1czogYm9yZGVyUmFkaXVzO1xuICAgIGJveC1zaGFkb3c6IDFweCAycHggM3B4IERpYWxvZy1ib3hTaGFkb3dDb2xvcjtcbiAgICBjb2xvcjogRGlhbG9nLWNvbG9yO1xuICAgIGxpbmUtaGVpZ2h0OiAxLjU7XG4gICAgcGFkZGluZzogMS41cmVtO1xuXG4gICAgKjpsYXN0LWNoaWxkIHtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICB9XG59XG4iXX0= */ -------------------------------------------------------------------------------- /packages/boundless-dialog/demo/index.js: -------------------------------------------------------------------------------- 1 | import { createElement, PureComponent } from 'react'; 2 | import { findDOMNode } from 'react-dom'; 3 | import Button from '../../boundless-button/index'; 4 | import Dialog from '../'; 5 | 6 | export default class DialogDemo extends PureComponent { 7 | state = { 8 | showDialog: false, 9 | } 10 | 11 | componentDidMount() { 12 | const node = findDOMNode(this.refs.trigger); 13 | 14 | this.setState({ 15 | leftPosition: node.offsetLeft + node.offsetWidth + 10 + 'px', 16 | topPosition: node.offsetTop + 'px', 17 | }); 18 | } 19 | 20 | toggleDialog = () => { 21 | this.setState({ showDialog: !this.state.showDialog }); 22 | } 23 | 24 | renderDialog() { 25 | if (this.state.showDialog) { 26 | return ( 27 | 35 |