├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitattributes
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── config
    ├── postcss.config.js
    ├── styleguide.config.js
    ├── webpack.analyze.config.js
    ├── webpack.analyze.index.config.js
    ├── webpack.config.js
    └── webpack.index.config.js
├── docs
    ├── CODE_OF_CONDUCT.md
    ├── CONTRIBUTING.md
    ├── PUBLISH.md
    ├── STYLEGUIDE.md
    └── images
    │   ├── logo_full.png
    │   ├── logo_full_300.png
    │   ├── logo_medium.png
    │   └── logo_small.png
├── package-lock.json
├── package.json
├── scripts
    ├── enzymeConfig.js
    ├── gh-pages.js
    └── setup.js
└── src
    ├── Accordion
        ├── Accordion.css
        ├── Accordion.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── accordion.test.js.snap
        │   └── accordion.test.js
        └── index.js
    ├── AccordionPanel
        ├── AccordionPanel.css
        ├── AccordionPanel.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── accordionPanel.test.js.snap
        │   └── accordionPanel.test.js
        └── index.js
    ├── Alert
        ├── Alert.css
        ├── Alert.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── alert.test.js.snap
        │   └── alert.test.js
        └── index.js
    ├── Avatar
        ├── Avatar.css
        ├── Avatar.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── avatar.test.js.snap
        │   └── avatar.test.js
        └── index.js
    ├── Breadcrumb
        ├── Breadcrumb.css
        ├── Breadcrumb.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── breadcrumb.test.js.snap
        │   └── breadcrumb.test.js
        └── index.js
    ├── BreadcrumbItem
        ├── BreadcrumbItem.css
        ├── BreadcrumbItem.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── breadcrumbItem.test.js.snap
        │   └── breadcrumbItem.test.js
        └── index.js
    ├── Button
        ├── Button.css
        ├── Button.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── button.test.js.snap
        │   └── button.test.js
        └── index.js
    ├── Card
        ├── Card.css
        ├── Card.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── card.test.js.snap
        │   └── card.test.js
        └── index.js
    ├── Checkbox
        ├── Checkbox.css
        ├── Checkbox.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── checkbox.test.js.snap
        │   └── checkbox.test.js
        └── index.js
    ├── CheckboxGroup
        ├── CheckboxGroup.css
        ├── CheckboxGroup.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── checkboxGroup.test.js.snap
        │   └── checkboxGroup.test.js
        └── index.js
    ├── Dialog
        ├── Dialog.css
        ├── Dialog.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── dialog.test.js.snap
        │   └── dialog.test.js
        └── index.js
    ├── Dropdown
        ├── Dropdown.css
        ├── Dropdown.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── dropdown.test.js.snap
        │   └── dropdown.test.js
        └── index.js
    ├── FileUpload
        ├── FileUpload.js
        ├── README.md
        ├── __tests__
        │   └── fileUpload.test.js
        ├── fileupload.css
        └── index.js
    ├── Form
        ├── Form.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── form.test.js.snap
        │   └── form.test.js
        └── index.js
    ├── Hint
        ├── Hint.css
        ├── Hint.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── hint.test.js.snap
        │   └── hint.test.js
        └── index.js
    ├── Icon
        ├── Icon.css
        ├── Icon.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── icon.test.js.snap
        │   └── icon.test.js
        └── index.js
    ├── Label
        ├── Label.css
        ├── Label.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── label.test.js.snap
        │   └── label.test.js
        └── index.js
    ├── List
        ├── List.css
        ├── List.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── list.test.js.snap
        │   └── list.test.js
        └── index.js
    ├── ListGroup
        ├── ListGroup.css
        ├── ListGroup.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── listGroup.test.js.snap
        │   └── listGroup.test.js
        └── index.js
    ├── ListItem
        ├── ListItem.css
        ├── ListItem.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── listItem.test.js.snap
        │   └── listItem.test.js
        └── index.js
    ├── Modal
        ├── Modal.css
        ├── Modal.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── modal.test.js.snap
        │   └── modal.test.js
        └── index.js
    ├── Nav
        ├── Nav.css
        ├── Nav.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── nav.test.js.snap
        │   ├── data.json
        │   └── nav.test.js
        └── index.js
    ├── NavItem
        ├── NavItem.css
        ├── NavItem.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── navItem.test.js.snap
        │   └── navItem.test.js
        └── index.js
    ├── Option
        ├── Option.css
        ├── Option.js
        ├── README.md
        └── index.js
    ├── Overlay
        ├── Overlay.css
        ├── Overlay.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── overlay.test.js.snap
        │   └── overlay.test.js
        └── index.js
    ├── Portal
        ├── Portal.css
        ├── Portal.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── portal.test.js.snap
        │   └── portal.test.js
        └── index.js
    ├── ProgressBar
        ├── ProgressBar.css
        ├── ProgressBar.js
        ├── README.md
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── progressBar.test.js.snap
        │   └── progressBar.test.js
        └── index.js
    ├── Radio
        ├── README.md
        ├── Radio.css
        ├── Radio.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── radio.test.js.snap
        │   └── radio.test.js
        └── index.js
    ├── RadioGroup
        ├── README.md
        ├── RadioGroup.css
        ├── RadioGroup.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── radioGroup.test.js.snap
        │   └── radioGroup.test.js
        └── index.js
    ├── Switch
        ├── README.md
        ├── Switch.css
        ├── Switch.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── switch.test.js.snap
        │   └── switch.test.js
        └── index.js
    ├── Tab
        ├── README.md
        ├── Tab.css
        ├── Tab.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── tab.test.js.snap
        │   └── tab.test.js
        └── index.js
    ├── TabList
        ├── README.md
        ├── TabList.css
        ├── TabList.js
        └── index.js
    ├── TabPanel
        ├── README.md
        ├── TabPanel.css
        ├── TabPanel.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── tabPanel.test.js.snap
        │   └── tabPanel.test.js
        └── index.js
    ├── Table
        ├── README.md
        ├── Table.css
        ├── Table.js
        └── index.js
    ├── TableHeader
        ├── README.md
        ├── TableHeader.css
        ├── TableHeader.js
        └── index.js
    ├── Tabs
        ├── README.md
        ├── Tabs.css
        ├── Tabs.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── tabs.test.js.snap
        │   └── tabs.test.js
        └── index.js
    ├── Task
        ├── README.md
        ├── Task.css
        ├── Task.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── task.test.js.snap
        │   └── task.test.js
        └── index.js
    ├── Taskbar
        ├── README.md
        ├── Taskbar.css
        ├── Taskbar.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── taskbar.test.js.snap
        │   └── taskbar.test.js
        └── index.js
    ├── Text
        ├── README.md
        ├── Text.css
        ├── Text.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── text.test.js.snap
        │   └── text.test.js
        └── index.js
    ├── TextArea
        ├── README.md
        ├── TextArea.css
        ├── TextArea.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── textArea.test.js.snap
        │   └── textArea.test.js
        └── index.js
    ├── TextField
        ├── README.md
        ├── TextField.css
        ├── TextField.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── textField.test.js.snap
        │   └── textField.test.js
        └── index.js
    ├── Timer
        ├── README.md
        ├── Timer.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── timer.test.js.snap
        │   └── timer.test.js
        └── index.js
    ├── Tooltip
        ├── README.md
        ├── Tooltip.css
        ├── Tooltip.js
        ├── __tests__
        │   ├── __snapshots__
        │   │   └── tooltip.test.js.snap
        │   └── tooltip.test.js
        └── index.js
    ├── constants.js
    ├── index.js
    ├── styles.css
    ├── styles
        ├── borders.css
        ├── colors.css
        ├── layout.css
        ├── miscellaneous.css
        ├── typography.css
        └── variables.css
    └── utils
        ├── __tests__
            ├── events.test.js
            ├── prefixer.test.js
            ├── propsVerification.test.js
            └── utils.test.js
        ├── events.js
        ├── index.js
        ├── messages.js
        ├── polyfills.js
        ├── prefixer.js
        ├── propsVerification.js
        └── utils.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": [
3 |       "react", "env"
4 |     ],
5 |     "plugins": ["transform-class-properties", "transform-object-rest-spread"]
6 |   }


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | styleguide
3 | docAssets
4 | lib
5 | wiki


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "node": true,
 5 |     "mocha": true,
 6 |     "es6": true,
 7 |     "jest": true
 8 |   },
 9 | 
10 |   "parser": "babel-eslint",
11 | 
12 |   "globals": {
13 |     "React": true,
14 |     "Overlay": true
15 |   },
16 | 
17 |   "plugins": ["babel", "react"],
18 |   "extends": [
19 |     "eslint:recommended",
20 |     "plugin:react/recommended",
21 |     "eslint-config-prettier"
22 |   ],
23 |   "rules": {
24 |     "no-console": 1
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | packages/react-atlas/src/assets/* linguist-vendored


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | build
 2 | lib
 3 | node_modules
 4 | npm-debug.log
 5 | .idea
 6 | .vscode
 7 | styleguide
 8 | .npmrc
 9 | jsconfig.json
10 | lerna-debug.log
11 | coverage
12 | atlas.config.js
13 | *reports/
14 | *.DS_Store
15 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .*rc
 2 | .eslintignore
 3 | .editorconfig
 4 | karma.conf.js
 5 | tests.webpack.js
 6 | webpack.config.*
 7 | jsconfig.json
 8 | CONTRIBUTING.md
 9 | CODE_OF_CONDUCT.md
10 | docs
11 | spec
12 | tools
13 | wiki
14 | styleguide
15 | docsConfig.js
16 | temp.css
17 | coverage
18 | src
19 | config
20 | 
21 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | sudo: false
 3 | node_js:
 4 | - '6'
 5 | install:
 6 | - npm install
 7 | script:
 8 | - npm run build:prd
 9 | - npm run lint
10 | - npm run test


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Digital River
 4 | Copyright (c) 2015 React Toolbox Team
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE.
23 | 
24 | 


--------------------------------------------------------------------------------
/config/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     "postcss-import": {},
4 |     "postcss-cssnext": {
5 |       browsers: ["last 2 versions", "> 5%"]
6 |     }
7 |   }
8 | };
9 | 


--------------------------------------------------------------------------------
/config/webpack.analyze.config.js:
--------------------------------------------------------------------------------
1 | let config = require(__dirname + "/webpack.config.js");
2 | let BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
3 |   .BundleAnalyzerPlugin;
4 | 
5 | config.plugins.push(new BundleAnalyzerPlugin());
6 | 
7 | module.exports = config;
8 | 


--------------------------------------------------------------------------------
/config/webpack.analyze.index.config.js:
--------------------------------------------------------------------------------
1 | let config = require(__dirname + "/webpack.index.config.js");
2 | let BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
3 |   .BundleAnalyzerPlugin;
4 | 
5 | config.plugins.push(new BundleAnalyzerPlugin());
6 | 
7 | module.exports = config;
8 | 


--------------------------------------------------------------------------------
/config/webpack.index.config.js:
--------------------------------------------------------------------------------
  1 | let path = require("path");
  2 | let webpack = require("webpack");
  3 | const ExtractTextPlugin = require("extract-text-webpack-plugin");
  4 | 
  5 | let config = {
  6 |   entry: {
  7 |     index: "./src/index.js"
  8 |   },
  9 |   output: {
 10 |     path: path.join(__dirname, "../lib"),
 11 |     filename: "index.js",
 12 |     libraryTarget: "umd"
 13 |   },
 14 |   externals: [
 15 |     {
 16 |       react: {
 17 |         root: "React",
 18 |         commonjs2: "react",
 19 |         commonjs: "react",
 20 |         amd: "react"
 21 |       }
 22 |     },
 23 |     {
 24 |       "react-dom": {
 25 |         root: "ReactDOM",
 26 |         commonjs2: "react-dom",
 27 |         commonjs: "react-dom",
 28 |         amd: "react-dom"
 29 |       }
 30 |     }
 31 |   ],
 32 |   module: {
 33 |     rules: [
 34 |       {
 35 |         test: /.js?$/,
 36 |         loader: "babel-loader",
 37 |         exclude: /node_modules/
 38 |       }
 39 |     ]
 40 |   },
 41 |   plugins: [
 42 |     new webpack.DefinePlugin({
 43 |       "process.env": {
 44 |         NODE_ENV: JSON.stringify(process.env.NODE_ENV)
 45 |       }
 46 |     })
 47 |   ]
 48 | };
 49 | 
 50 | if (process.env.NODE_ENV === "development") {
 51 |   config.devtool = "source-map";
 52 | }
 53 | 
 54 | if (process.env.NODE_ENV === "production") {
 55 |   config.module.rules.push({
 56 |     test: /\.css$/,
 57 |     loader: ExtractTextPlugin.extract({
 58 |       fallback: "style-loader",
 59 |       use: [
 60 |         {
 61 |           loader: "css-loader",
 62 |           query: {
 63 |             modules: true,
 64 |             importLoaders: 1,
 65 |             localIdentName: "ra_[name]__[local]",
 66 |             minimize: true
 67 |           }
 68 |         },
 69 |         {
 70 |           loader: "postcss-loader",
 71 |           options: {
 72 |             config: {
 73 |               path: "config/postcss.config.js"
 74 |             }
 75 |           }
 76 |         }
 77 |       ]
 78 |     })
 79 |   });
 80 |   config.plugins.push(new ExtractTextPlugin("atlasThemes.min.css"));
 81 | } else {
 82 |   config.module.rules.push({
 83 |     test: /\.css$/,
 84 |     loaders: [
 85 |       "style-loader?sourceMap",
 86 |       "css-loader?modules&importLoaders=1&localIdentName=ra_[name]__[local]",
 87 |       {
 88 |         loader: "postcss-loader",
 89 |         options: {
 90 |           config: {
 91 |             path: "config/postcss.config.js"
 92 |           }
 93 |         }
 94 |       }
 95 |     ]
 96 |   });
 97 | }
 98 | 
 99 | module.exports = config;
100 | 


--------------------------------------------------------------------------------
/docs/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Code of Conduct
 2 | 
 3 | As contributors and maintainers of this project, and in the interest of
 4 | fostering an open and welcoming community, we pledge to respect all people who
 5 | contribute through reporting issues, posting feature requests, updating
 6 | documentation, submitting pull requests or patches, and other activities.
 7 | 
 8 | We are committed to making participation in this project a harassment-free
 9 | experience for everyone, regardless of level of experience, gender, gender
10 | identity and expression, sexual orientation, disability, personal appearance,
11 | body size, race, ethnicity, age, religion, or nationality.
12 | 
13 | Examples of unacceptable behavior by participants include:
14 | 
15 | * The use of sexualized language or imagery
16 | * Personal attacks
17 | * Trolling or insulting/derogatory comments
18 | * Public or private harassment
19 | * Publishing other's private information, such as physical or electronic
20 |   addresses, without explicit permission
21 | * Other unethical or unprofessional conduct
22 | 
23 | Project maintainers have the right and responsibility to remove, edit, or
24 | reject comments, commits, code, wiki edits, issues, and other contributions
25 | that are not aligned to this Code of Conduct, or to ban temporarily or
26 | permanently any contributor for other behaviors that they deem inappropriate,
27 | threatening, offensive, or harmful.
28 | 
29 | By adopting this Code of Conduct, project maintainers commit themselves to
30 | fairly and consistently applying these principles to every aspect of managing
31 | this project. Project maintainers who do not follow or enforce the Code of
32 | Conduct may be permanently removed from the project team.
33 | 
34 | This Code of Conduct applies both within project spaces and in public spaces
35 | when an individual is representing the project or its community.
36 | 
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
38 | reported by contacting a project maintainer. All
39 | complaints will be reviewed and investigated and will result in a response that
40 | is deemed necessary and appropriate to the circumstances. Maintainers are
41 | obligated to maintain confidentiality with regard to the reporter of an
42 | incident.
43 | 
44 | 
45 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
46 | version 1.3.0, available at
47 | [http://contributor-covenant.org/version/1/3/0/][version]
48 | 
49 | [homepage]: http://contributor-covenant.org
50 | [version]: http://contributor-covenant.org/version/1/3/0/
51 | 


--------------------------------------------------------------------------------
/docs/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | React-Atlas Contributing Guidelines
 2 | 
 3 | Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
 4 | External Contributors
 5 | 
 6 | Fork repo to your personal profile.
 7 | Clone your forked repo to your machine.
 8 | Go inside newly cloned directory and:
 9 | 
10 |     git remote add upstream https://github.com/DigitalRiver/react-atlas.git             # to add the ability to fetch the most recent code from React-Atlas master branch
11 |     npm install                                                                         # to install node modules
12 |     npm run bootstrap:dev                                                               # to have lerna install and setup the different packages as well as generate atlas code
13 |     npm run docs:dev                                                                    # to start a local docs server at port 6060
14 | Write tests & code in ES6 goodness :-) and then run the test suite:
15 |     npm run test
16 | 
17 | If any snapshot tests need to be updated, run the following command:
18 |     npm run updateSnapshot
19 | 
20 |  Confirm that there were no errors in the test results. Commit your changes. A pre-commit hook will run Prettier and Eslint on your changes. Fix any errors found, then commit again. Rebase your branch to upstream/master and squash any unhelpful commits. Push your branch to your personal fork. Create a PR back into DigitalRiver/react-atlas or the appropriate release candidate branch. If this is your first PR into React-Atlas you will be asked to sign a Contributor's License Agreement online Wait patiently :-)
21 | 
22 | 
23 | Internal Contributor Rules/Expectations
24 | 
25 |     Only branches that are release candidates or will be contributed to by multiple developers should be pushed to DigitalRiver/React-Atlas.
26 |     Any branch pushed to DigitalRiver/React-Atlas must have an associated issue and reference that issue in a commit message. The issues should have a list of expected changes, and the commit messages should reference which changes have been completed so that  another developer could assist with that development effort.
27 |     Experimental branches or feature branches that will only be contributed to by one developer should be pushed to a private fork to keep the master repository as clean as possible.
28 |     PRs can contain more than one commit, but each commit must solve an issue, be releasable on its own, and contain a helpful message.
29 | 
30 | 


--------------------------------------------------------------------------------
/docs/PUBLISH.md:
--------------------------------------------------------------------------------
1 | ## Publishing to your own github page
2 | To publish your own build of react-atlas to your own fork, run the following commands:
3 | 
4 | ```bash
5 | $ npm run docs:build
6 | $ npm run gh-pages:publish
7 | ```
8 | 


--------------------------------------------------------------------------------
/docs/images/logo_full.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/docs/images/logo_full.png


--------------------------------------------------------------------------------
/docs/images/logo_full_300.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/docs/images/logo_full_300.png


--------------------------------------------------------------------------------
/docs/images/logo_medium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/docs/images/logo_medium.png


--------------------------------------------------------------------------------
/docs/images/logo_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/docs/images/logo_small.png


--------------------------------------------------------------------------------
/scripts/enzymeConfig.js:
--------------------------------------------------------------------------------
1 | import { configure } from "enzyme";
2 | import Adapter from "enzyme-adapter-react-16";
3 | 
4 | configure({ adapter: new Adapter() });
5 | 


--------------------------------------------------------------------------------
/scripts/gh-pages.js:
--------------------------------------------------------------------------------
 1 | let ghpages = require("gh-pages");
 2 | let pjson = require("../package.json");
 3 | 
 4 | ghpages.publish(
 5 |   "config/styleguide",
 6 |   {
 7 |     remote: "origin",
 8 |     message: "Auto-generated commit for React Atlas version: " + pjson.version
 9 |   },
10 |   function(err) {
11 |     console.warn("Error publishing Styleguide: ", err);
12 |   }
13 | );
14 | 


--------------------------------------------------------------------------------
/src/Accordion/Accordion.css:
--------------------------------------------------------------------------------
 1 | .accordion {
 2 |     composes: default-border from '../styles.css';
 3 |     composes: border-bottom-none from '../styles.css';
 4 |     composes: bg-white from '../styles.css';
 5 |     composes: default-text from '../styles.css';
 6 |     composes: default-font from '../styles.css';
 7 |     cursor: default;
 8 |     width: 100%;
 9 | }
10 | .disabled {
11 |     composes: cursor-not-allowed from '../styles.css';
12 |     opacity: 0.6;
13 | }
14 | .accordion_header {
15 |     composes: marg-0  from '../styles.css';
16 |     composes: cursor-pointer from '../styles.css';
17 |     composes: default-border-bottom from '../styles.css';
18 |     composes: border-left-none from '../styles.css';
19 |     composes: border-top-none from '../styles.css';
20 |     composes: border-right-none from '../styles.css';
21 |     composes: header-font from '../styles.css';
22 |     composes: pad-h-2 from '../styles.css';
23 |     line-height: 1.5rem;
24 |     vertical-align: middle;
25 |     text-align: left;
26 | }
27 | .rightAlign {
28 |     text-align: right;
29 |     composes: pad-h-2 from '../styles.css';
30 | }
31 | .centerAlign {
32 |     text-align: center;
33 | }
34 | .header-active {
35 |     composes: bg-primary from '../styles.css';
36 |     composes: white from '../styles.css';
37 | }
38 | .header-inactive {
39 |     composes: bg-silver from '../styles.css';
40 | }
41 | .hover {
42 |     composes: bg-gray from '../styles.css' !important;
43 |     composes: white from '../styles.css';
44 | }
45 | .panel {
46 |     display: none;
47 |     padding-left: 0rem;
48 |     padding-right: 0rem;
49 | }
50 | .active {
51 |     border-top: none;
52 |     border-left: none;
53 |     border-right: none;
54 |     border-bottom: 1px solid #ccc;
55 |     max-height: 100%;
56 |     opacity: 1;
57 |     padding: 1rem 0rem 1rem 0rem;
58 |     -moz-transition: .25s;
59 |     -ms-transition: .25s;
60 |     -o-transition: .25s;
61 |     -webkit-transition: .25s;
62 |     transition: .25s;
63 |     transition-timing-function: ease-in;
64 | }
65 | .active .panel {
66 |     display: block;
67 |     padding-left: 1rem;
68 |     padding-right: 1rem;
69 | }
70 | 
71 | .inactive {
72 |     max-height: 0;
73 |     padding: 0rem;
74 |     opacity: 0;
75 |     -moz-transition: .1s;
76 |     -ms-transition: .1s;
77 |     -o-transition: .1s;
78 |     -webkit-transition: .1s;
79 |     transition: .1s;
80 | }
81 | 
82 | .expandAll {
83 |     composes: marg-b-1 from '../styles.css';
84 |     composes: primary-text from '../styles.css';
85 |     composes: default-font from '../styles.css';
86 |     cursor: pointer;
87 | }
88 | .expandAll:hover {
89 |     text-decoration: underline;
90 | }


--------------------------------------------------------------------------------
/src/Accordion/__tests__/__snapshots__/accordion.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Accordion component Test render correctly 1`] = `
 4 | <div
 5 |   className=""
 6 |   style={undefined}
 7 | >
 8 |   <div
 9 |     className="accordion"
10 |   >
11 |     <div>
12 |       <div
13 |         className="accordion_header header-active"
14 |         onClick={[Function]}
15 |         onMouseEnter={[Function]}
16 |         onMouseLeave={[Function]}
17 |       />
18 |       <div
19 |         className="active"
20 |       >
21 |         <div
22 |           className="panel"
23 |         >
24 |           <div
25 |             expanded="true"
26 |             id={true}
27 |           >
28 |             Text for first accordion item.
29 |           </div>
30 |         </div>
31 |       </div>
32 |     </div>
33 |     <div>
34 |       <div
35 |         className="accordion_header header-active"
36 |         onClick={[Function]}
37 |         onMouseEnter={[Function]}
38 |         onMouseLeave={[Function]}
39 |       />
40 |       <div
41 |         className="active"
42 |       >
43 |         <div
44 |           className="panel"
45 |         >
46 |           <div
47 |             expanded="true"
48 |           >
49 |             Text for second accordion item
50 |           </div>
51 |         </div>
52 |       </div>
53 |     </div>
54 |     <div>
55 |       <div
56 |         className="accordion_header header-active"
57 |         onClick={[Function]}
58 |         onMouseEnter={[Function]}
59 |         onMouseLeave={[Function]}
60 |       />
61 |       <div
62 |         className="active"
63 |       >
64 |         <div
65 |           className="panel"
66 |         >
67 |           <div
68 |             expanded="true"
69 |           >
70 |             Text for third accordion item
71 |           </div>
72 |         </div>
73 |       </div>
74 |     </div>
75 |   </div>
76 | </div>
77 | `;
78 | 


--------------------------------------------------------------------------------
/src/Accordion/index.js:
--------------------------------------------------------------------------------
1 | import Accordion from "./Accordion.js";
2 | export { Accordion };
3 | 


--------------------------------------------------------------------------------
/src/AccordionPanel/AccordionPanel.css:
--------------------------------------------------------------------------------
1 | .accordionPanel {    
2 |     composes: default-text from '../styles.css';
3 |     composes: default-font from '../styles.css';
4 | }


--------------------------------------------------------------------------------
/src/AccordionPanel/AccordionPanel.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import CSSModules from "react-css-modules";
 5 | import styles from "./AccordionPanel.css";
 6 | 
 7 | export class AccordionPanel extends React.PureComponent {
 8 |   constructor(props) {
 9 |     super(props);
10 |   }
11 |   render() {
12 |     const panelStyles = cx({
13 |       accordionPanel: true
14 |     });
15 |     const { className, children, style } = this.props;
16 |     return (
17 |       <div style={style} className={cx(className)} styleName={panelStyles}>
18 |         {children}
19 |       </div>
20 |     );
21 |   }
22 | }
23 | 
24 | AccordionPanel.propTypes = {
25 |   /**
26 |    * Text, any HTML element, or React Component.
27 |    */
28 |   children: PropTypes.node,
29 | 
30 |   /** An object, array, or string of CSS classes to apply to Panel.*/
31 |   className: PropTypes.oneOfType([
32 |     PropTypes.string,
33 |     PropTypes.object,
34 |     PropTypes.array
35 |   ]),
36 |   /**
37 |    * Accordion will use the expanded prop from each child to determine if the child will be expanded on load.
38 |    * @examples <Accordion><div>value 1</div><div expanded="true">value 2</div></Accordion>
39 |    */
40 |   expanded: PropTypes.bool,
41 |   /**
42 |    * Pass inline styling here.
43 |    */
44 |   style: PropTypes.object,
45 |   /**
46 |    * Accordion will use title prop from each child as the title for that child's header.
47 |    * @examples <AccordionPanel title={title 1}>value 1</div><div title={title 2}>value 2</AccordionPanel>
48 |    */
49 |   title: PropTypes.string
50 | };
51 | 
52 | AccordionPanel.defaultProps = {
53 |   expanded: false
54 | };
55 | 
56 | export default CSSModules(AccordionPanel, styles, { allowMultiple: true });
57 | 


--------------------------------------------------------------------------------
/src/AccordionPanel/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/src/AccordionPanel/README.md


--------------------------------------------------------------------------------
/src/AccordionPanel/__tests__/__snapshots__/accordionPanel.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Accordion Panel component Test render correctly 1`] = `
 4 | <div
 5 |   className="accordionPanel"
 6 |   style={undefined}
 7 | >
 8 |   Some content for the first panel
 9 | </div>
10 | `;
11 | 


--------------------------------------------------------------------------------
/src/AccordionPanel/index.js:
--------------------------------------------------------------------------------
1 | import AccordionPanel from "./AccordionPanel.js";
2 | export { AccordionPanel };
3 | 


--------------------------------------------------------------------------------
/src/Alert/Alert.css:
--------------------------------------------------------------------------------
 1 | @import '../styles/variables.css';
 2 | 
 3 | .alert {
 4 | 	composes: default-text from '../styles.css';
 5 |   	composes: default-font from '../styles.css';
 6 |     composes: primary-gray-border from '../styles.css';
 7 |     composes: rounded from '../styles.css';
 8 |     composes: pad-2 from '../styles.css';
 9 |     composes: bg-body from '../styles.css';
10 |     border-left: 5px solid var(--info);
11 |     display: flex;
12 |     white-space: pre-wrap;
13 |     align-items: center;
14 |     word-break: break-all;
15 | }
16 | 
17 | .success {
18 |     border-left-color: var(--success);
19 | }
20 | 
21 | .warning {
22 |     border-left-color: var(--warning);
23 | }
24 | 
25 | .danger {
26 |     border-left-color: var(--error);
27 | }
28 | 
29 | .close {
30 |     composes: bold from '../styles.css';
31 |     composes: bg-transparent from '../styles.css';
32 |     composes: pad-0 from '../styles.css';
33 |     composes: cursor-pointer from '../styles.css';
34 |     composes: border-none from '../styles.css';
35 |     display: inline-block;
36 |     font-size: 2.2rem;
37 |     opacity: .2;
38 |     filter: alpha(opacity=20);
39 |     margin-left: auto;
40 |     -webkit-appearance:none;
41 | }
42 | 
43 | .close:hover {
44 | 	opacity: 1;
45 |     filter: alpha(opacity=100);
46 | }
47 | 
48 | .hidden {
49 |     display: none;
50 | }


--------------------------------------------------------------------------------
/src/Alert/Alert.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import PropTypes from "prop-types";
  3 | import cx from "classnames";
  4 | import styles from "./Alert.css";
  5 | import CSSModules from "react-css-modules";
  6 | 
  7 | export class Alert extends React.PureComponent {
  8 |   constructor(props) {
  9 |     super(props);
 10 | 
 11 |     // component state
 12 |     this.state = {
 13 |       visible: true
 14 |     };
 15 |   }
 16 | 
 17 |   _closeAlert = event => {
 18 |     if (this.props.onDismiss) {
 19 |       this.props.onDismiss(event);
 20 |     }
 21 |     this.setState({
 22 |       visible: false
 23 |     });
 24 |   };
 25 | 
 26 |   render() {
 27 |     let { hidden, children, dismissible, type, className, style } = this.props;
 28 |     const alertClasses = cx({
 29 |       alert: true,
 30 |       success: type === "success",
 31 |       warning: type === "warning",
 32 |       danger: type === "danger",
 33 |       hidden
 34 |     });
 35 |     return (
 36 |       <React.Fragment>
 37 |         {this.state.visible && (
 38 |           <div className={cx(className)} style={style} styleName={alertClasses}>
 39 |             {children}
 40 |             {dismissible && (
 41 |               <div
 42 |                 onClick={this._closeAlert}
 43 |                 type="button"
 44 |                 styleName="close"
 45 |                 data-dismiss="alert"
 46 |                 aria-label="Close"
 47 |               >
 48 |                 <span aria-hidden="true">×</span>
 49 |               </div>
 50 |             )}
 51 |           </div>
 52 |         )}
 53 |       </React.Fragment>
 54 |     );
 55 |   }
 56 | }
 57 | 
 58 | Alert.propTypes = {
 59 |   /**
 60 |    * Any HTML element or React Component.
 61 |    */
 62 |   children: PropTypes.node.isRequired,
 63 | 
 64 |   /**
 65 |    * An object, array, or string of CSS classes to apply to Button.
 66 |    */
 67 |   className: PropTypes.oneOfType([
 68 |     PropTypes.string,
 69 |     PropTypes.object,
 70 |     PropTypes.array
 71 |   ]),
 72 | 
 73 |   /**
 74 |    * When true, the Alert can be dismissed.
 75 |    */
 76 |   dismissible: PropTypes.bool,
 77 | 
 78 |   /**
 79 |    * A boolean to hide or show the alert component.
 80 |    */
 81 |   hidden: PropTypes.bool,
 82 | 
 83 |   /**
 84 |    * Function that will be executed on dismiss.
 85 |    */
 86 |   onDismiss: PropTypes.func,
 87 | 
 88 |   /**
 89 |    * Pass inline styles here.
 90 |    */
 91 |   style: PropTypes.object,
 92 | 
 93 |   /**
 94 |    * Will set the Alert's style.  One of: 'info', 'success', 'warning', 'danger'
 95 |    */
 96 |   type: PropTypes.string
 97 | };
 98 | 
 99 | Alert.defaultProps = {
100 |   type: "info"
101 | };
102 | 
103 | export default CSSModules(Alert, styles, { allowMultiple: true });
104 | 


--------------------------------------------------------------------------------
/src/Alert/README.md:
--------------------------------------------------------------------------------
 1 | Alert:
 2 |     
 3 |     <Alert>
 4 |         This is a default Alert!
 5 |     </Alert>
 6 | 
 7 | Alert with multiple inline text elements:
 8 |     
 9 |     <Alert>
10 |         <Text>
11 |         	<Text as="strong">Success!</Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat nisi non odio pretium imperdiet. Praesent eget quam egestas, mattis orci sit amet, faucibus ipsum. Aliquam viverra vulputate porttitor. Suspendisse potenti. Nullam sit amet massa non nulla rhoncus dictum in ac ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras suscipit luctus tellus, nec finibus justo dignissim ac. Aliquam iaculis libero turpis, quis imperdiet elit consequat eget. In hac habitasse platea dictumst. Aliquam volutpat, nisi eget tincidunt accumsan, eros magna tincidunt tellus, quis accumsan enim turpis sit amet ex. Morbi accumsan, felis sed ultricies molestie, massa odio tristique est, sed eleifend sapien massa in massa. Vestibulum gravida maximus varius. Vivamus a elit consectetur, ornare est in, gravida turpis.
12 |         </Text>
13 |     </Alert>
14 | 
15 | Alert with children:
16 | 
17 | 	<Alert>
18 | 		<Avatar>
19 | 		    <Icon icon={"fa fa-github"}/>
20 | 		</Avatar>
21 | 		<a href="https://github.com/DigitalRiver/react-atlas" target="_blank">
22 | 			<Button link>React-Atlas on Git-Hub</Button>
23 | 		</a>
24 | 	</Alert>
25 | 
26 | Alert types:
27 | 
28 | 	<div>
29 | 
30 | 		<Alert type="success">
31 |         	<Text as="strong">Success!</Text> This alert box indicates a successful or positive action.
32 | 	    </Alert>
33 | 	    <br />
34 | 
35 | 	    <Alert type="info">
36 | 	        <Text as="strong">Info!</Text> This alert box indicates a neutral informative change or action.
37 | 	    </Alert>
38 | 	    <br />
39 | 
40 | 	    <Alert type="warning">
41 | 	        <Text as="strong">Warning!</Text> This alert box indicates a warning that might need attention.
42 | 	    </Alert>
43 | 	    <br />
44 | 
45 | 	    <Alert type="danger">
46 | 	        <Text as="strong">Danger!</Text> This alert box indicates a dangerous or potentially negative action.
47 | 	    </Alert>
48 | 	</div>
49 | 
50 | Dismissible Alerts:
51 | 
52 | 	<div>	
53 | 		<Alert type="success" dismissible>
54 | 	        <Text as="strong">Success!</Text> This alert box indicates a successful or positive action.
55 | 	    </Alert>
56 | 	    <br />
57 | 
58 | 	    <Alert type="info" dismissible>
59 | 	        <Text as="strong">Info!</Text> This alert box indicates a neutral informative change or action.
60 | 	    </Alert>
61 | 	    <br />
62 | 
63 | 	    <Alert type="warning" dismissible>
64 | 	        <Text as="strong">Warning!</Text> This alert box indicates a warning that might need attention.
65 | 	    </Alert>
66 | 	    <br />
67 | 
68 | 	    <Alert type="danger" dismissible>
69 | 	        <Text as="strong">Danger!</Text> This alert box indicates a dangerous or potentially negative action.
70 | 	    </Alert>
71 | 	</div>
72 | 
73 | onDismiss callback:
74 | 
75 | 	<Alert dismissible onDismiss={function(){alert('The alert has been dismissed.');}}>
76 |         <strong>Success!</strong> This alert box will trigger a callback function when dismissed.
77 |     </Alert>


--------------------------------------------------------------------------------
/src/Alert/__tests__/__snapshots__/alert.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Alert component Test renders correctly 1`] = `
 4 | <div
 5 |   className="alert success"
 6 |   style={undefined}
 7 | >
 8 |   <strong>
 9 |     Success!
10 |   </strong>
11 |    This alert box indicates a successful or positive action.
12 | </div>
13 | `;
14 | 


--------------------------------------------------------------------------------
/src/Alert/index.js:
--------------------------------------------------------------------------------
1 | import Alert from "./Alert.js";
2 | export { Alert };
3 | 


--------------------------------------------------------------------------------
/src/Avatar/Avatar.css:
--------------------------------------------------------------------------------
 1 | .avatar {
 2 |   composes: circle from '../styles.css';
 3 |   composes: white from '../styles.css';
 4 |   composes: bg-silver from '../styles.css';
 5 |   composes: default-border from '../styles.css';
 6 |   composes: default-font from '../styles.css';
 7 |   position: relative;
 8 |   display: inline-block;
 9 |   overflow: hidden;
10 |   text-align: center;
11 |   width: 3rem;
12 |   height: 3rem;
13 |   font-size: 1.9rem;
14 | }
15 | 
16 | .avatar > :global(svg),
17 | .avatar > :global(i) {
18 |   width: 2rem;
19 |   height: 3rem;
20 |   line-height: 3rem;
21 |   fill: currentColor;
22 | }
23 | 
24 | .avatar > :global(img) {
25 |   width: 100%;
26 |   height: 100%;
27 | }
28 | 
29 | .image {
30 |   composes: circle from '../styles.css';
31 |   composes: bg-transparent from '../styles.css';
32 |   position: absolute;
33 |   display: block;
34 |   width: 100%;
35 |   height: 100%;
36 |   background-position: center;
37 |   background-size: cover;
38 | }
39 | 
40 | .letter {
41 |   display: block;
42 |   width: 100%;
43 |   line-height: 3rem;
44 |   cursor: default;
45 | }
46 | 


--------------------------------------------------------------------------------
/src/Avatar/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | Title prop gets truncated to 1st letter:
 3 | 
 4 |     <Avatar title="Nathan" />
 5 | 
 6 | Icon takes precedence over title:
 7 | 
 8 |     <Avatar title="Nathan" icon="fab fa-github" />
 9 | 
10 | Image takes precedence over icon:
11 | 
12 |     <Avatar
13 |         icon={"fab fa-github"}
14 |         image="https://upload.wikimedia.org/wikipedia/commons/c/cf/3818_-_Riffelberg_-_Matterhorn_viewed_from_Gornergratbahn.JPG"
15 |         title="Matterhorn"
16 |     />
17 | 
18 | Image takes precedence over title:
19 | 
20 |     <Avatar title="Javier" image="https://i.ytimg.com/vi/cNycdfFEgBc/maxresdefault.jpg" />
21 | 
22 | Child takes precedence over parameters:
23 | 
24 |     <div>
25 |       <Avatar title="Nathan" image="https://octodex.github.com/images/codercat.jpg">
26 |         <i className="fab fa-github"></i>
27 |       </Avatar>
28 | 
29 |       <Avatar title="Nathan" icon="fa fa-github">
30 |         <img title="Nathan" src="http://www.lettherebelightfineart.com/wp-content/uploads/2014/03/01_Minneapolis_Skyline_Photography_Stone_Arch_Bridge.jpg"/>
31 |       </Avatar>
32 |     </div>
33 | 
34 | Image takes precedence over fallbackImage:
35 | 
36 |     <Avatar title="Nathan" image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGNZh4ycC0G2UbBGDVgJ56hYbZ0j1mU9J05xLg9O5ZazV1GJTT" fallbackImage="https://octodex.github.com/images/codercat.jpg" />
37 | 
38 | fallbackImage takes precedence over title:
39 | 
40 |     <Avatar title="Javier" fallbackImage="https://timeincsecure-a.akamaihd.net/rtmp_uds/293884104/201703/2681/293884104_5360456295001_5360434467001-vs.jpg?pubId=293884104&videoId=5360434467001" />
41 | 
42 | fallbackImage will replace an image that fails to load:
43 | 
44 |     <Avatar title="Fryxell" image="badImage.jpg" fallbackImage="http://wikitravel.org/upload/shared//thumb/e/ea/Lake_Fryxell.jpg/510px-Lake_Fryxell.jpg" />
45 | 
46 | Update Avatar options via state after initial render:
47 | 
48 |     initialState = {image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGNZh4ycC0G2UbBGDVgJ56hYbZ0j1mU9J05xLg9O5ZazV1GJTT"}
49 |     handleToggle = () => {
50 |         setState({image: "https://octodex.github.com/images/codercat.jpg"})
51 |     };
52 |     <div> 
53 |       <Avatar title="Nathan" image={state.image} />
54 |       <br />
55 |       <Button primary onClick={handleToggle}>Update State</Button>
56 |       <br /><br />
57 |       <Text>Image path: {state.image}</Text>
58 |     </div>


--------------------------------------------------------------------------------
/src/Avatar/__tests__/__snapshots__/avatar.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test correct render Test correct render 1`] = `
 4 | <div
 5 |   className="avatar"
 6 |   style={undefined}
 7 |   title="testTitle"
 8 | >
 9 |   <img
10 |     className="image"
11 |     onError={[Function]}
12 |     src="picture.jpg"
13 |     title="testTitle"
14 |   />
15 | </div>
16 | `;
17 | 


--------------------------------------------------------------------------------
/src/Avatar/index.js:
--------------------------------------------------------------------------------
1 | import Avatar from "./Avatar";
2 | export { Avatar };
3 | 


--------------------------------------------------------------------------------
/src/Breadcrumb/Breadcrumb.css:
--------------------------------------------------------------------------------
1 | .breadcrumb {
2 |     composes: default-font from '../styles.css';
3 |     padding: 8px 15px;
4 |     display: inline-flex;
5 |     align-items: center;
6 | }


--------------------------------------------------------------------------------
/src/Breadcrumb/Breadcrumb.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import CSSModules from "react-css-modules";
 5 | import styles from "./Breadcrumb.css";
 6 | 
 7 | export class Breadcrumb extends React.PureComponent {
 8 |   constructor(props) {
 9 |     super(props);
10 |   }
11 | 
12 |   render() {
13 |     const { className, style, children } = this.props;
14 | 
15 |     return (
16 |       <ol
17 |         styleName="breadcrumb"
18 |         className={cx(className)}
19 |         style={style}
20 |         role="navigation"
21 |         aria-label="breadcrumbs"
22 |       >
23 |         {children}
24 |       </ol>
25 |     );
26 |   }
27 | }
28 | 
29 | Breadcrumb.propTypes = {
30 |   /** An object, array, or string of CSS classes to apply to Breadcrumb.*/
31 |   className: PropTypes.oneOfType([
32 |     PropTypes.string,
33 |     PropTypes.object,
34 |     PropTypes.array
35 |   ]),
36 | 
37 |   /**
38 |    * Pass inline styles here.
39 |    */
40 |   style: PropTypes.object,
41 |   /**
42 |    * BreadcrumbItem instances.
43 |    */
44 |   children: PropTypes.node
45 | };
46 | 
47 | Breadcrumb.defaultProps = {
48 |   className: ""
49 | };
50 | 
51 | export default CSSModules(Breadcrumb, styles, { allowMultiple: true });
52 | 


--------------------------------------------------------------------------------
/src/Breadcrumb/README.md:
--------------------------------------------------------------------------------
 1 | Breadcrumb:
 2 | 
 3 |     <Breadcrumb>
 4 |         <BreadcrumbItem>
 5 |             <Text as="a" href="#">Atlas</Text>
 6 |         </BreadcrumbItem>
 7 |         <BreadcrumbItem>
 8 |             <Text as="a" href="#breadcrumb">Breadcrumb</Text>
 9 |         </BreadcrumbItem>
10 |         <BreadcrumbItem active>
11 |             <Text>Breadcrumb Example</Text>
12 |         </BreadcrumbItem>
13 |     </Breadcrumb>
14 | 
15 | 
16 | Breadcrumb with icon:
17 | 
18 |     <Breadcrumb>
19 |         <BreadcrumbItem>
20 |             <Avatar title="Cat" image="https://i.ytimg.com/vi/cNycdfFEgBc/maxresdefault.jpg" />
21 |             <Text as="a" href="#">Cat</Text>
22 |         </BreadcrumbItem>
23 |         <BreadcrumbItem>
24 |             <i className="fab fa-github" style={{paddingRight:'5px'}}></i>
25 |             <Text as="a" href="http://www.github.com">GitHub</Text>
26 |         </BreadcrumbItem>
27 |         <BreadcrumbItem active>
28 |             <Text>I am Here</Text>
29 |         </BreadcrumbItem>
30 |     </Breadcrumb>


--------------------------------------------------------------------------------
/src/Breadcrumb/__tests__/__snapshots__/breadcrumb.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Breadcrumb component Test correct render 1`] = `
 4 | <ol
 5 |   aria-label="breadcrumbs"
 6 |   className="breadcrumb"
 7 |   role="navigation"
 8 |   style={undefined}
 9 | >
10 |   <li
11 |     className="breadcrumbItem"
12 |     style={undefined}
13 |   >
14 |     <a
15 |       className="defaultFont link"
16 |       href="#"
17 |     >
18 |       Atlas
19 |     </a>
20 |   </li>
21 |   <li
22 |     className="breadcrumbItem"
23 |     style={undefined}
24 |   >
25 |     <a
26 |       className="defaultFont link"
27 |       href="#breadcrumb"
28 |     >
29 |       Breadcrumb
30 |     </a>
31 |   </li>
32 |   <li
33 |     className="breadcrumbItem active"
34 |     style={undefined}
35 |   >
36 |     <span
37 |       className="defaultFont"
38 |     >
39 |       Breadcrumb Example
40 |     </span>
41 |   </li>
42 | </ol>
43 | `;
44 | 


--------------------------------------------------------------------------------
/src/Breadcrumb/__tests__/breadcrumb.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { Breadcrumb } from "../index";
 4 | import { BreadcrumbItem } from "../../BreadcrumbItem/index";
 5 | import { Text } from "../../Text/index";
 6 | 
 7 | import renderer from "react-test-renderer";
 8 | 
 9 | describe("Test Breadcrumb component", () => {
10 |   it("Test correct render", function() {
11 |     const tree = renderer
12 |       .create(
13 |         <Breadcrumb>
14 |           <BreadcrumbItem>
15 |             <Text as="a" href="#">
16 |               Atlas
17 |             </Text>
18 |           </BreadcrumbItem>
19 |           <BreadcrumbItem>
20 |             <Text as="a" href="#breadcrumb">
21 |               Breadcrumb
22 |             </Text>
23 |           </BreadcrumbItem>
24 |           <BreadcrumbItem active>
25 |             <Text>Breadcrumb Example</Text>
26 |           </BreadcrumbItem>
27 |         </Breadcrumb>
28 |       )
29 |       .toJSON();
30 |     expect(tree).toMatchSnapshot();
31 |   });
32 | });
33 | 
34 | describe("Testing Breadcrumb component: Basic Tests", () => {
35 |   const brdcrmb = mount(
36 |     <Breadcrumb>
37 |       <BreadcrumbItem>
38 |         <Text as="a" href="#">
39 |           Atlas
40 |         </Text>
41 |       </BreadcrumbItem>
42 |       <BreadcrumbItem>
43 |         <Text as="a" href="#breadcrumb">
44 |           Breadcrumb
45 |         </Text>
46 |       </BreadcrumbItem>
47 |       <BreadcrumbItem active>
48 |         <Text>Breadcrumb Example</Text>
49 |       </BreadcrumbItem>
50 |     </Breadcrumb>
51 |   );
52 | 
53 |   it("Basic Breadcrumb", () => {
54 |     expect(brdcrmb.exists(<Breadcrumb />)).toBe(true);
55 |   });
56 | 
57 |   it("Contains No Child", () => {
58 |     const breadcrumb = mount(<Breadcrumb />);
59 | 
60 |     expect(breadcrumb.props().children).toBeUndefined();
61 |   });
62 | 
63 |   it("Contains Child", () => {
64 |     expect(brdcrmb.props()).toHaveProperty("children");
65 |   });
66 | 
67 |   it("Basic Breadcrumb with BreadcrumbItem child", () => {
68 |     expect(
69 |       brdcrmb.contains(
70 |         <BreadcrumbItem>
71 |           <Text as="a" href="#">
72 |             Atlas
73 |           </Text>
74 |         </BreadcrumbItem>
75 |       )
76 |     ).toBeTruthy();
77 |   });
78 | });
79 | 


--------------------------------------------------------------------------------
/src/Breadcrumb/index.js:
--------------------------------------------------------------------------------
1 | import Breadcrumb from "./Breadcrumb.js";
2 | export { Breadcrumb };
3 | 


--------------------------------------------------------------------------------
/src/BreadcrumbItem/BreadcrumbItem.css:
--------------------------------------------------------------------------------
 1 | .breadcrumbItem {
 2 |     display: inline-flex;
 3 |     align-items: center;
 4 | }
 5 | 
 6 | .breadcrumbItem + .breadcrumbItem:before {
 7 |     content: "/ ";
 8 |     padding: 0 5px;
 9 |     color: #ccc;
10 | }
11 | 
12 | .breadcrumbItem.active {
13 |     color: #777;
14 | }


--------------------------------------------------------------------------------
/src/BreadcrumbItem/BreadcrumbItem.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import CSSModules from "react-css-modules";
 5 | import styles from "./BreadcrumbItem.css";
 6 | 
 7 | export class BreadcrumbItem extends React.PureComponent {
 8 |   constructor(props) {
 9 |     super(props);
10 |   }
11 | 
12 |   render() {
13 |     const { className, style, active, children } = this.props;
14 |     const styleName = cx("breadcrumbItem", { active });
15 |     return (
16 |       <li styleName={styleName} className={cx(className)} style={style}>
17 |         {children}
18 |       </li>
19 |     );
20 |   }
21 | }
22 | 
23 | BreadcrumbItem.propTypes = {
24 |   /** An object, array, or string of CSS classes to apply to BreadcrumbItem.*/
25 |   className: PropTypes.oneOfType([
26 |     PropTypes.string,
27 |     PropTypes.object,
28 |     PropTypes.array
29 |   ]),
30 | 
31 |   /**
32 |    * Pass inline styles here.
33 |    */
34 |   style: PropTypes.object,
35 |   /**
36 |    * Text, any HTML element, or React Component.
37 |    */
38 |   children: PropTypes.node,
39 |   /**
40 |    * Render active item style
41 |    */
42 |   active: PropTypes.bool
43 | };
44 | 
45 | BreadcrumbItem.defaultProps = {
46 |   className: "",
47 |   active: false
48 | };
49 | 
50 | export default CSSModules(BreadcrumbItem, styles, { allowMultiple: true });
51 | 


--------------------------------------------------------------------------------
/src/BreadcrumbItem/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/src/BreadcrumbItem/README.md


--------------------------------------------------------------------------------
/src/BreadcrumbItem/__tests__/__snapshots__/breadcrumbItem.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test BreadcrumbItem component Test correct render 1`] = `
 4 | <li
 5 |   className="breadcrumbItem"
 6 |   style={undefined}
 7 | >
 8 |   <a
 9 |     className="defaultFont link"
10 |     href="#"
11 |   >
12 |     Atlas
13 |   </a>
14 | </li>
15 | `;
16 | 


--------------------------------------------------------------------------------
/src/BreadcrumbItem/__tests__/breadcrumbItem.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { BreadcrumbItem } from "../index";
 4 | import { Text } from "../../Text/index";
 5 | 
 6 | import renderer from "react-test-renderer";
 7 | 
 8 | describe("Test BreadcrumbItem component", () => {
 9 |   it("Test correct render", function() {
10 |     const tree = renderer
11 |       .create(
12 |         <BreadcrumbItem>
13 |           <Text as="a" href="#">
14 |             Atlas
15 |           </Text>
16 |         </BreadcrumbItem>
17 |       )
18 |       .toJSON();
19 |     expect(tree).toMatchSnapshot();
20 |   });
21 | });
22 | 
23 | describe("Testing BreadcrumbItem component: Basic Tests", () => {
24 |   const brdcrmbItm = mount(
25 |     <BreadcrumbItem>
26 |       <Text as="a" href="#">
27 |         Atlas
28 |       </Text>
29 |     </BreadcrumbItem>
30 |   );
31 | 
32 |   it("Basic BreadcrumbItem", () => {
33 |     expect(brdcrmbItm.exists(<BreadcrumbItem />)).toBe(true);
34 |   });
35 | 
36 |   it("Contains No Child", () => {
37 |     const breadcrumbitem = mount(<BreadcrumbItem />);
38 | 
39 |     expect(breadcrumbitem.props().children).toBeUndefined();
40 |   });
41 | 
42 |   it("Contains Child", () => {
43 |     expect(brdcrmbItm.props()).toHaveProperty("children");
44 |   });
45 | });
46 | 


--------------------------------------------------------------------------------
/src/BreadcrumbItem/index.js:
--------------------------------------------------------------------------------
1 | import BreadcrumbItem from "./BreadcrumbItem.js";
2 | export { BreadcrumbItem };
3 | 


--------------------------------------------------------------------------------
/src/Button/README.md:
--------------------------------------------------------------------------------
 1 | Primary Button:
 2 | 
 3 | 	<Button primary>Primary</Button>
 4 | 
 5 | Secondary Button:
 6 | 
 7 | 	<Button secondary>Secondary</Button>
 8 | 
 9 | Warning Button:
10 | 
11 | 	<Button warning>Warning</Button>
12 | 
13 | Error Button:
14 | 
15 | 	<Button error>Error</Button>
16 | 
17 | Default Button:
18 | 
19 |     <Button>Default</Button>
20 | 
21 | Disabled Buttons:
22 | 	<div>
23 | 	  <Button disabled>Disabled</Button>
24 | 	  <Button disabled primary>Primary</Button>
25 |     <Button disabled secondary>Secondary</Button>
26 |     <Button disabled warning>Warning</Button>
27 |     <Button disabled error>Error</Button> 
28 |     </div>
29 | 
30 | Link style Button with href:
31 | 
32 |     <Button link href="http://www.github.com">Link</Button>
33 | 
34 | Outlined Buttons:
35 |     <div>
36 |     <Button outline primary>Primary</Button>
37 |     <Button outline secondary>Secondary</Button>
38 |     <Button outline warning>Warning</Button>
39 |     <Button outline error>Error</Button>
40 |     <Button outline>Default</Button>
41 |     </div>
42 | 
43 | Small Buttons:
44 |     <div>
45 |     <Button small>Small</Button>
46 |     <Button small primary>Primary</Button>
47 |     <Button small secondary>Secondary</Button>
48 |     <Button small warning>Warning</Button>
49 |     <Button small error>Error</Button>
50 |     </div>
51 | 
52 | Large Buttons:
53 | 	<div>
54 | 	  <Button large>Large</Button>
55 | 	  <Button large primary>Primary</Button>
56 |     <Button large secondary>Secondary</Button>
57 |     <Button large warning>Warning</Button>
58 |     <Button large error>Error</Button>
59 |     </div> 
60 | 
61 | Button with icon and text:
62 | 
63 |     <Button icon={"fa fa-id-card"}>Text</Button>
64 | 
65 | Button with icon:
66 | 
67 |     <Button icon={"fa fa-id-card"}></Button>


--------------------------------------------------------------------------------
/src/Button/__tests__/__snapshots__/button.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Button render Test correct render 1`] = `
 4 | <a
 5 |   href="http://www.google.com.are"
 6 | >
 7 |   <button
 8 |     className="aClass button uppercase default_btn default_btn_hover"
 9 |     href="http://www.google.com.are"
10 |     id={undefined}
11 |     name={undefined}
12 |     onClick={undefined}
13 |     style="Style"
14 |     tabIndex={0}
15 |     type="button"
16 |   >
17 |     Default Button
18 |   </button>
19 | </a>
20 | `;
21 | 


--------------------------------------------------------------------------------
/src/Button/index.js:
--------------------------------------------------------------------------------
1 | import Button from "./Button.js";
2 | export { Button };
3 | 


--------------------------------------------------------------------------------
/src/Card/Card.css:
--------------------------------------------------------------------------------
 1 | .card {
 2 | 	composes: marg-b-2 from '../styles.css';
 3 | 	composes: rounded from '../styles.css';
 4 | 	composes: bg-white from '../styles.css';
 5 | 	composes: default-border from '../styles.css';
 6 | 	composes: default-text from '../styles.css';
 7 | }
 8 | 
 9 | .legend {
10 | 	composes: header-font from '../styles.css';
11 | }
12 | 
13 | .image {
14 |   display: block;
15 |   width: 100%;
16 |   background-position: center;
17 |   background-size: cover;
18 | }
19 | 
20 | .title {
21 | 	composes: header-font from '../styles.css';
22 | 	composes: secondary-text from '../styles.css';
23 | 	composes: marg-t-2 from '../styles.css';
24 | 	composes: pad-h-2 from '../styles.css';
25 | 	word-wrap: break-word;
26 | }
27 | 
28 | .cardBody {
29 | 	composes: default-font from '../styles.css';
30 | 	composes: default-text from '../styles.css';
31 | 	composes: pad-h-2 from '../styles.css';
32 | 	composes: marg-b-2 from '../styles.css';
33 | 	word-wrap: break-word;
34 | }
35 | 
36 | 


--------------------------------------------------------------------------------
/src/Card/Card.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import PropTypes from "prop-types";
  3 | import cx from "classnames";
  4 | import CSSModules from "react-css-modules";
  5 | import styles from "./Card.css";
  6 | 
  7 | /**
  8 |  * Simple Card component that wraps a div around content with card styling.
  9 |  */
 10 | export class Card extends React.PureComponent {
 11 |   constructor(props) {
 12 |     super(props);
 13 |   }
 14 |   render() {
 15 |     const {
 16 |       children,
 17 |       className,
 18 |       legend,
 19 |       style,
 20 |       standardFieldset,
 21 |       image,
 22 |       title
 23 |     } = this.props;
 24 |     let cardBody = children ? (
 25 |       <div styleName={"cardBody"}>{children}</div>
 26 |     ) : null;
 27 | 
 28 |     let isFieldset = standardFieldset ? (
 29 |       <fieldset style={style} styleName={"card"} className={cx(className)}>
 30 |         {legend && <legend styleName={"legend"}>{legend}</legend>}
 31 |         {children}
 32 |       </fieldset>
 33 |     ) : null;
 34 | 
 35 |     let useImage = image ? <img src={image} styleName={"image"} /> : null;
 36 | 
 37 |     let Title = title ? <div styleName={"title"}>{title}</div> : null;
 38 | 
 39 |     let card = !standardFieldset ? (
 40 |       <div style={style} styleName={"card"} className={cx(className)}>
 41 |         {useImage}
 42 |         {Title}
 43 |         {cardBody}
 44 |       </div>
 45 |     ) : null;
 46 | 
 47 |     return (
 48 |       <React.Fragment>
 49 |         {isFieldset}
 50 |         {card}
 51 |       </React.Fragment>
 52 |     );
 53 |   }
 54 | }
 55 | 
 56 | Card.propTypes = {
 57 |   /**
 58 |    * Any HTML element or React Component.
 59 |    * @examples <p>Some Text.</p>
 60 |    */
 61 |   children: PropTypes.node.isRequired,
 62 | 
 63 |   /** An object, array, or string of CSS classes to apply to card.*/
 64 |   className: PropTypes.oneOfType([
 65 |     PropTypes.string,
 66 |     PropTypes.object,
 67 |     PropTypes.array
 68 |   ]),
 69 | 
 70 |   /**
 71 |    * Path to an image that will be displayed in Card.
 72 |    * @examples "http://path.to/an/image.jpg"
 73 |    */
 74 |   image: PropTypes.string,
 75 | 
 76 |   /**
 77 |    * Legend that will be displayed on Card when standardFieldset prop is true.
 78 |    */
 79 |   legend: PropTypes.string,
 80 | 
 81 |   /**
 82 |    * When true, will generate a fieldset Card.
 83 |    * @example <Card standardFieldset>{children}</Card>
 84 |    */
 85 |   standardFieldset: PropTypes.bool,
 86 | 
 87 |   /**
 88 |    * Pass inline styles here.
 89 |    */
 90 |   style: PropTypes.object,
 91 | 
 92 |   /**
 93 |    * Title that will be displayed inside Cards that do not have the standardFieldset prop.
 94 |    * @examples "Title Words" will output "Title Words"
 95 |    */
 96 |   title: PropTypes.string
 97 | };
 98 | 
 99 | export default CSSModules(Card, styles, { allowMultiple: true });
100 | 


--------------------------------------------------------------------------------
/src/Card/README.md:
--------------------------------------------------------------------------------
 1 | Basic Fieldset Card:
 2 | 
 3 | 	<Card legend="Card Example" standardFieldset>
 4 | 		<CheckboxGroup title="Checkbox Group" name="checkboxGroup">
 5 | 			<Checkbox label="Checkbox 1" checked />
 6 | 			<Checkbox label="Checkbox 2" />
 7 | 			<Checkbox label="Checkbox 3" />
 8 | 		</CheckboxGroup>
 9 | 	</Card>
10 | 
11 | Card with Image: 
12 | 	
13 | 	<Card title="Standard Card" image="https://static1.squarespace.com/static/5369465be4b0507a1fd05af0/5397d14be4b06a5454f5633c/5397d15ae4b06a5454f56351/1404441173879/neo_001126-02.jpg?format=1500w"> 
14 | 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
15 | 
16 | 		<Button primary>Button</Button>
17 | 	</Card>
18 | 
19 | Card with Image and restricted width: 
20 | 	
21 |     <Card title="Standard Card" image="http://pets-and-home.com/wp-content/uploads/2017/05/110-yoram-yasur-curiosities-sea-turtles-400x225.jpg" style={{width: "200px"}}> 
22 |         <p>Lorem-ipsum-dolor-sit-amet-consectetuer</p>
23 |         <Button primary>Button</Button>
24 |     </Card>
25 | 
26 | 


--------------------------------------------------------------------------------
/src/Card/__tests__/__snapshots__/card.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 | 
3 | exports[`Test Card component renders correctly 1`] = `
4 | <div
5 |   className="name card"
6 |   style={undefined}
7 | />
8 | `;
9 | 


--------------------------------------------------------------------------------
/src/Card/__tests__/card.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { Card } from "../index";
 4 | import { Checkbox } from "../../Checkbox/Checkbox";
 5 | import { CheckboxGroup } from "../../CheckboxGroup/CheckboxGroup";
 6 | import { verifyPropsDefaultValue } from "../../utils/propsVerification";
 7 | 
 8 | import renderer from "react-test-renderer";
 9 | 
10 | describe("Test Card component", () => {
11 |   it("renders correctly", () => {
12 |     const tree = renderer
13 |       .create(<Card className={"name"} legend={"lalala"} />)
14 |       .toJSON();
15 |     expect(tree).toMatchSnapshot();
16 |   });
17 | });
18 | 
19 | describe("Test Card component: Basic Tests", () => {
20 |   let cardComponent = null;
21 | 
22 |   it("Card - Basic properties test", function() {
23 |     cardComponent = mount(<Card className={"name"} legend={"lalala"} />);
24 |     const expected = new Map([["className", "name"], ["legend", "lalala"]]);
25 |     expect(verifyPropsDefaultValue(cardComponent, expected)).toEqual(true);
26 |   });
27 | 
28 |   it("Basic Accordion", () => {
29 |     expect(
30 |       cardComponent.exists(
31 |         <Card>
32 |           <div>Child</div>
33 |         </Card>
34 |       )
35 |     ).toBe(true);
36 |   });
37 | 
38 |   it("Contains No Child", () => {
39 |     cardComponent = mount(<Card />);
40 |     expect(cardComponent.props().children).toBeUndefined();
41 |   });
42 | 
43 |   it("Card - Children test", function() {
44 |     cardComponent = mount(
45 |       <Card className={"name"} legend={"lalala"}>
46 |         <div>Card Test</div>
47 |       </Card>
48 |     );
49 |     expect(cardComponent.props()).toHaveProperty("children");
50 |   });
51 | 
52 |   it("Test Standard Fieldset", function() {
53 |     cardComponent = mount(
54 |       <Card legend="Fieldset Example" standardFieldset>
55 |         <CheckboxGroup title="Checkbox Group" name="checkboxGroup">
56 |           <Checkbox label="Checkbox 1" checked />
57 |           <Checkbox label="Checkbox 2" />
58 |           <Checkbox label="Checkbox 3" />
59 |         </CheckboxGroup>
60 |       </Card>
61 |     );
62 |     expect(cardComponent.props().standardFieldset).toBe(true);
63 |   });
64 | 
65 |   it("Card - Image prop test", function() {
66 |     cardComponent = mount(
67 |       <Card image="https://static1.squarespace.com/static/5369465be4b0507a1fd05af0/5397d14be4b06a5454f5633c/5397d15ae4b06a5454f56351/1404441173879/neo_001126-02.jpg?format=1500w" />
68 |     );
69 |     expect(cardComponent.props().image).toBe(
70 |       "https://static1.squarespace.com/static/5369465be4b0507a1fd05af0/5397d14be4b06a5454f5633c/5397d15ae4b06a5454f56351/1404441173879/neo_001126-02.jpg?format=1500w"
71 |     );
72 |   });
73 | 
74 |   it("Test Title prop", () => {
75 |     cardComponent = mount(<Card title="first">first</Card>);
76 |     expect(cardComponent.props().title).toBe("first");
77 |   });
78 | });
79 | 


--------------------------------------------------------------------------------
/src/Card/index.js:
--------------------------------------------------------------------------------
1 | import Card from "./Card.js";
2 | export { Card };
3 | 


--------------------------------------------------------------------------------
/src/Checkbox/Checkbox.css:
--------------------------------------------------------------------------------
  1 | @import '../styles/variables.css';
  2 | 
  3 | .disabled {
  4 |     composes: default-text from '../styles.css';
  5 | }
  6 | 
  7 | .relative {
  8 |     position:relative;
  9 | }
 10 | 
 11 | .padding {
 12 |     padding-bottom: 5px;
 13 | }
 14 | 
 15 | .input {
 16 |     composes: relative;
 17 |     top: 1px;
 18 | }
 19 | 
 20 | .checkbox {
 21 |   composes: rounded from '../styles.css';
 22 |   composes: default-border from "../styles.css";
 23 |   composes: relative;
 24 |   position: absolute;
 25 |   top: 0px;
 26 |   width: 16px;
 27 |   height: 16px;
 28 |   cursor: pointer;
 29 | }
 30 | 
 31 | .disabled {
 32 |   opacity: 0.65;
 33 |   composes: cursor-not-allowed from '../styles.css'; 
 34 |   pointer-events: none;
 35 | }
 36 | 
 37 | .checked {
 38 |   composes: checkbox;
 39 |   composes: bg-primary from '../styles.css';
 40 | }
 41 | 
 42 | .hidden {
 43 |   display: none;
 44 |   visibility: hidden;
 45 | }
 46 | 
 47 | .focus {
 48 |   box-shadow: 0 0 6px var(--primary)
 49 | }
 50 | 
 51 | .checkmark {
 52 |   composes: relative;
 53 |   top: 0px;
 54 |   left: 4px;
 55 |   width: 4px;
 56 |   height: 10px;
 57 |   transform: rotate(45deg);
 58 |   border: solid var(--white);
 59 |   border-width: 0 3px 3px 0;    
 60 | }
 61 | 
 62 | .error {
 63 |   border: solid 1px var(--error);
 64 | }
 65 | 
 66 | /* Display checkbox with out the checkbox selected.  */
 67 | .not_checked {
 68 |   composes: checkbox;
 69 |   background: -webkit-linear-gradient(#fff, #e6e6e6); /* For Safari 5.1 to 6.0 */
 70 |   background: -o-linear-gradient(#fff, #e6e6e6); /* For Opera 11.1 to 12.0 */
 71 |   background: -moz-linear-gradient(#fff, #e6e6e6); /* For Firefox 3.6 to 15 */
 72 |   background: linear-gradient(#fff, #e6e6e6); /* Standard syntax */
 73 | }
 74 | 
 75 | .label {
 76 |   composes: default-font from '../styles.css';
 77 |   cursor: pointer;
 78 |   white-space: nowrap;
 79 |   padding-right:5px;
 80 | }
 81 | 
 82 | /* label text */
 83 | .label_left {
 84 |   composes: label;
 85 |   padding-right: 2px;
 86 |   margin-left: 0px;
 87 | }
 88 | 
 89 | .error_text {
 90 |   composes: default-font from '../styles.css';
 91 |   composes: error-text from '../styles.css';
 92 | }
 93 | 
 94 | .error_message {
 95 |   composes: error_text;
 96 |   margin-left:23px;
 97 | }
 98 | 
 99 | .inline_block {
100 |   display: inline-block;
101 | }
102 | 
103 | .checkbox_padding {
104 |   padding: 10px 10px 0 0;
105 | }
106 | 
107 | .inline_padding {
108 |   padding: 2px 10px 0 0;
109 | }
110 | 
111 | .float_left {
112 |   float:left;
113 |   padding-right: 3px;
114 | }
115 | 
116 | .float_right {
117 |   float:right;
118 |   padding-left: 3px;
119 |   position: relative;
120 | }
121 | 
122 | .opacity {
123 |   /*this needs to stay here to avoid display issues with those modules in IE*/
124 |   opacity: 0;
125 | }
126 | 
127 | .required {
128 |   composes: secondary-text from '../styles.css';
129 | }
130 | 
131 | .required_error {
132 |   composes: error-text from '../styles.css';
133 | }


--------------------------------------------------------------------------------
/src/Checkbox/README.md:
--------------------------------------------------------------------------------
 1 | Checkbox:
 2 | 
 3 |     <Checkbox
 4 | 	    label="Checkbox"
 5 | 	  />
 6 | 
 7 | Checked:	  
 8 | 
 9 |       <Checkbox
10 |         label="Checkbox Checked"
11 |         checked
12 |       />
13 | 
14 | Disabled:
15 | 
16 |       <Checkbox
17 |         disabled
18 |         label="Checkbox Disabled"
19 |       />
20 | 
21 | Left label:
22 | 
23 |       <Checkbox
24 |         label="Checkbox Left Label"
25 |         labelPosition="left"
26 |         checked
27 |       />
28 | 
29 | Custom onClick method:
30 | 
31 |       {}
32 | 
33 |       <Checkbox
34 |         label="Checkbox onClick"
35 |         value="Bat"
36 |         onClick={function(data) { console.log(data.value, data.status, data.checked); }}
37 |       />
38 | 
39 | onChange callback:
40 | 
41 |     <Checkbox
42 |       label="Checkbox onChange"
43 |       value="Duck"
44 |       onChange={function(data) { console.log(data.value, data.status, data.checked); }}
45 |       />
46 | 
47 | No label:
48 | 
49 |       <Checkbox
50 |       />
51 | 
52 | No label and checked:
53 | 
54 |       <Checkbox
55 |         checked
56 |       />
57 | 
58 | Required:
59 | 
60 | 	  <Checkbox
61 | 	  	label="Required Example"
62 | 	  	required
63 | 	  />
64 | 
65 | Custom validation:
66 | 
67 | 	  <Checkbox
68 | 	  	label="Required Example"
69 | 	  	required="Custom Validation Example"
70 | 	  	valid={ function(event, checked){ return {status: checked ? null : "error", message: "Checkbox is required"} } }
71 | 	  />
72 | 
73 | Custom function before change:
74 | 
75 |       <Checkbox
76 |       	label="Checkbox onBeforeChange"
77 |       	onBeforeChange={ function(value){ if (!value) { let accept = confirm("Do you want to check this?"); return accept; } return true; } }
78 |       />
79 |       
80 | Label and ID:	  
81 | 
82 |     <Checkbox
83 |       label="Checkbox"
84 |       id="my-checkbox"
85 |     />
86 | 


--------------------------------------------------------------------------------
/src/Checkbox/__tests__/__snapshots__/checkbox.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test checkbox component renders correctly 1`] = `
 4 | <div
 5 |   className="checkbox_padding"
 6 |   onClick={[Function]}
 7 |   style={undefined}
 8 | >
 9 |   <div
10 |     className="inline_block relative padding"
11 |   >
12 |     <label
13 |       className="label"
14 |       htmlFor={undefined}
15 |       title="labelText"
16 |     >
17 |       labelText
18 |     </label>
19 |     <div
20 |       className="float_left"
21 |     >
22 |       <input
23 |         checked={false}
24 |         className="opacity"
25 |         disabled={false}
26 |         hidden={undefined}
27 |         id={undefined}
28 |         label="labelText"
29 |         onChange={[Function]}
30 |         required={false}
31 |         type="checkbox"
32 |       />
33 |       <div
34 |         className="not_checked"
35 |       />
36 |     </div>
37 |   </div>
38 | </div>
39 | `;
40 | 


--------------------------------------------------------------------------------
/src/Checkbox/index.js:
--------------------------------------------------------------------------------
1 | import Checkbox from "./Checkbox.js";
2 | export { Checkbox };
3 | 


--------------------------------------------------------------------------------
/src/CheckboxGroup/CheckboxGroup.css:
--------------------------------------------------------------------------------
 1 | .checkboxGroup {
 2 | 	composes: marg-0 from '../styles.css';
 3 | }
 4 | 
 5 | .header {
 6 | 	padding-bottom: 5px;
 7 | }
 8 | 
 9 | .headerFont {
10 | 	composes: header-font from '../styles.css';
11 | }
12 | 
13 | .block {
14 | 	composes: marg-b-1 from '../styles.css';
15 | 	display: block;
16 | 	line-height: 30px;
17 | }
18 | 
19 | .inline {
20 | 	composes: marg-r-2 from '../styles.css';
21 | 	display: inline-block;
22 | }
23 | 
24 | .disabled {
25 | 	composes: default-text from '../styles.css';
26 | }
27 | 
28 | .error_message {
29 |   composes: default-font from '../styles.css';
30 |   composes: error-text from '../styles.css';
31 |   padding-left: 5px;
32 | }


--------------------------------------------------------------------------------
/src/CheckboxGroup/README.md:
--------------------------------------------------------------------------------
 1 | CheckboxGroup
 2 | 
 3 | 	<CheckboxGroup title="Checkbox Group" name="checkboxGroup" onChange={(value, event, isValid, checked) => { console.log(value, event, isValid, checked)}}>
 4 | 		<Checkbox label="Checkbox 1" value="first" checked />
 5 | 		<Checkbox label="Checkbox 2" value="second" />
 6 | 		<Checkbox label="Checkbox 3" value="third" />
 7 | 	</CheckboxGroup>
 8 | 
 9 | Inline CheckboxGroup
10 | 
11 | 	<div>
12 | 		<CheckboxGroup inline title="Inline Checkbox Group" name="inlineGroup">
13 | 			<Checkbox
14 | 				label="Checkbox Inline"
15 | 			/>
16 | 			<Checkbox
17 | 				label="Checkbox Inline Checked"
18 | 				checked
19 | 			/>
20 | 	    </CheckboxGroup>
21 | 	    <CheckboxGroup inline title="Inline Checkbox Group Two" name="inlineGroup2">
22 | 			<Checkbox
23 | 				label="Checkbox Inline"
24 | 			/>
25 | 			<Checkbox
26 | 				label="Checkbox Inline Checked"
27 | 				checked
28 | 			/>
29 | 	    </CheckboxGroup>
30 | 	</div>
31 | 
32 | CheckboxGroup with inline children
33 | 
34 | 	<CheckboxGroup inlineChildren title="Inline Checkbox Group" name="inlineGroup">
35 | 		<Checkbox
36 | 			label="Checkbox Inline"
37 | 		/>
38 | 		<Checkbox
39 | 			label="Checkbox Inline Checked"
40 | 			checked
41 | 		/>
42 | 	</CheckboxGroup>
43 | 
44 | CheckboxGroup with checked minimum
45 | 
46 | 	<CheckboxGroup inline title="Checkbox Group: Select at least one" name="inlineGroup" min={1} limitMessage="This is a custom message. Please select at least {0} checkboxes below.">
47 | 		<Checkbox
48 | 			label="Checkbox"
49 | 		/>
50 | 		<Checkbox
51 | 			label="Checkbox"
52 | 		/>
53 |     </CheckboxGroup>
54 | 
55 | CheckboxGroup with checked maximum
56 | 
57 | 	<CheckboxGroup inline title="Checkbox Group: Select no more than one" name="inlineGroup" max={1} limitMessage="This is a custom message. Please select no more than {0} checkboxes below.">
58 | 		<Checkbox
59 | 			label="Checkbox"
60 | 		/>
61 | 		<Checkbox
62 | 			label="Checkbox Checked"
63 | 			checked
64 | 		/>
65 |     </CheckboxGroup>
66 | 


--------------------------------------------------------------------------------
/src/CheckboxGroup/index.js:
--------------------------------------------------------------------------------
1 | import CheckboxGroup from "./CheckboxGroup";
2 | export { CheckboxGroup };
3 | 


--------------------------------------------------------------------------------
/src/Dialog/Dialog.css:
--------------------------------------------------------------------------------
 1 | @import '../styles/variables.css';
 2 | 
 3 | .dialog {
 4 | 	composes: default-font from '../styles.css';
 5 | 	display: inline-block;
 6 | }
 7 | 
 8 | .buttons {
 9 | 	float: right;
10 | 	margin-top: 9px;
11 | }
12 | 
13 | .buttons button {
14 | 	margin: 3px;
15 | }
16 | 
17 | .warning h3 {
18 | 	color: var(--warning);
19 | }
20 | 


--------------------------------------------------------------------------------
/src/Dialog/README.md:
--------------------------------------------------------------------------------
 1 | INFO Dialog:
 2 | 
 3 |     initialState = {active: false}
 4 |     handleToggle = () => {
 5 |         setState({ active: !state.active })
 6 |     };
 7 |     handleOk = () => {
 8 |         setState({ active: !state.active })
 9 |     };
10 |     <div> 
11 |         <Button primary onClick={handleToggle}>Open Info Dialog</Button>
12 |         <Dialog 
13 |             active={state.active} 
14 |             onOk={handleOk}
15 |             onOverlayClick={handleOk}
16 |             title="INFO"
17 |             overlay
18 |             info
19 |         >
20 |             <div>This is Dialog example<br/>Any child components could be put here.</div>
21 |         </Dialog>
22 | 	</div> 
23 | 	
24 | CONFIRM Dialog:
25 | 
26 |     initialState = {active: false}
27 |     handleToggle = () => {
28 |         setState({ active: !state.active })
29 |     };
30 |     handleCancel = () => {
31 |         alert('Cancel callback');
32 |         setState({ active: !state.active })
33 |     };
34 |     handleOk = () => {
35 |         alert('OK callback');
36 |         setState({ active: !state.active })
37 |     };
38 |     <div> 
39 |         <Button primary onClick={handleToggle}>Open Confirm Dialog</Button>
40 |         <Dialog 
41 |             active={state.active} 
42 |             onOk={handleOk}
43 |             onCancel={handleCancel} 
44 |             title="CONFIRM"
45 |             confirm
46 |         >
47 |             <div>This is Dialog example<br/>Any child components could be put here.</div>
48 |         </Dialog>
49 |     </div> 
50 |     
51 | WARNING Dialog:
52 | 
53 |     initialState = {active: false}
54 |     handleToggle = () => {
55 |         setState({ active: !state.active })
56 |     };
57 |     
58 |     handleCancel = () => {
59 |         setState({ active: !state.active })
60 |     };
61 |     
62 |     handleOk = () => {
63 |         setState({ active: !state.active })
64 |     };
65 |     <div> 
66 |         <Button warning onClick={handleToggle}>Open Warning Dialog</Button>
67 |         <Dialog 
68 |             active={state.active} 
69 |             onOk={handleOk}
70 |             onCancel={handleCancel} 
71 |             title="WARNING"
72 |             warning
73 |         >
74 |             <div>This is Dialog example<br/>Any child components could be put here.</div>
75 |         </Dialog>
76 |     </div> 


--------------------------------------------------------------------------------
/src/Dialog/__tests__/__snapshots__/dialog.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 | 
3 | exports[`Test Dialog component Test render correctly 1`] = `null`;
4 | 


--------------------------------------------------------------------------------
/src/Dialog/__tests__/dialog.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { Dialog } from "../index";
 4 | import renderer from "react-test-renderer";
 5 | 
 6 | describe("Test Dialog component", () => {
 7 |   it("Test render correctly", () => {
 8 |     const comp = 
 9 |       <Dialog>
10 |         <div>
11 |           This is Dialog example<br />Any child components could be put here.
12 |         </div>
13 |       </Dialog>
14 |     ;
15 |     const tree = renderer.create(comp).toJSON();
16 |     expect(tree).toMatchSnapshot();
17 |   });
18 | });
19 | 
20 | describe("Dialog component - Basic test", () => {
21 |   it("Dialog component(info) - Basic test", function() {
22 |     const dial = mount(
23 |       <Dialog>
24 |         <div>
25 |           This is Dialog example<br />Any child components could be put here.
26 |         </div>
27 |       </Dialog>
28 |     );
29 |     expect(dial.props().active).toEqual(false);
30 |   });
31 | 
32 |   it("Dialog component(confirm) - Basic test", function() {
33 |     const handleToggle = jest.fn();
34 |     const handleOk = jest.fn();
35 |     const handleCancel = jest.fn();
36 |     const dial = mount(
37 |       <div>
38 |         <button onClick={handleToggle}>Open</button>
39 |         <Dialog
40 |           active
41 |           onOk={handleOk}
42 |           onCancel={handleCancel}
43 |           title="Confirm"
44 |           overlay
45 |           confirm
46 |           className={"dialogClass"}
47 |         >
48 |           <div>
49 |             This is Dialog example<br />Any child components could be put here.
50 |           </div>
51 |         </Dialog>
52 |       </div>
53 |     );
54 |     dial.find("button").simulate("click");
55 |     expect(
56 |       dial
57 |         .find(".dialogClass")
58 |         .children()
59 |         .first()
60 |         .props().active
61 |     ).toBe(true);
62 |   });
63 | 
64 |   it("Dialog component(warning) - Basic test", function() {
65 |     const handleToggle = jest.fn();
66 |     const handleOk = jest.fn();
67 |     const handleCancel = jest.fn();
68 |     const dial = mount(
69 |       <div>
70 |         <button onClick={handleToggle}>Open</button>
71 |         <Dialog
72 |           active
73 |           onOk={handleOk}
74 |           onCancel={handleCancel}
75 |           title="Warning"
76 |           overlay
77 |           warning
78 |         >
79 |           <div>
80 |             This is Dialog example<br />Any child components could be put here.
81 |           </div>
82 |         </Dialog>
83 |       </div>
84 |     );
85 |     expect(dial.find("Dialog").props().warning).toBe(true);
86 |   });
87 | });
88 | 


--------------------------------------------------------------------------------
/src/Dialog/index.js:
--------------------------------------------------------------------------------
1 | import Dialog from "./Dialog.js";
2 | export { Dialog };
3 | 


--------------------------------------------------------------------------------
/src/Dropdown/Dropdown.css:
--------------------------------------------------------------------------------
 1 | @import '../styles/variables.css';
 2 | 
 3 | .dropdown {
 4 |   width: 100%;
 5 |   position: relative;
 6 | }
 7 | 
 8 | .hidden {
 9 |   display:none;
10 | }
11 | 
12 | .options {
13 |   box-sizing: border-box;
14 |   width: 100%;
15 |   border-radius: 0 0 2px 2px;
16 |   border: solid var(--gray);
17 |   border-width: 0 1px 1px 1px;
18 |   margin: -.25rem .25rem .25rem 0;
19 |   position: absolute;
20 |   top: calc(1.96rem);
21 |   z-index: 9998;
22 |   max-height: 250px;
23 |   overflow-y: scroll;
24 |   composes: bg-white from '../styles.css';
25 | }
26 | 
27 | .leftLabel {
28 |   white-space: nowrap;
29 | }
30 | 
31 | .fillInput {
32 |   flex: 1;
33 | }
34 | 
35 | .pointer {
36 |   cursor: pointer;
37 | }
38 | 
39 | .inline {
40 |   display: inline-block;
41 |   margin-right: 1rem;
42 | }
43 | 
44 | .arrow {
45 |   width: 0;
46 |   height: 0;
47 |   border-style: solid;
48 |   border-width: 6px 4px 0 4px;
49 |   border-color: var(--black) transparent transparent transparent;
50 |   float: right;
51 |   margin-top: 0.25rem;
52 |   margin-left: 0.25rem;
53 |   position: absolute;
54 |   right: 0.5rem;
55 |   top: 0.5rem;
56 | }
57 | 
58 | .setWidth {
59 |   width: inherit;
60 |   display: inline-block;
61 | }
62 | 
63 | .arrowUp {
64 |   -webkit-transform: rotate(180deg);
65 |   -moz-transform: rotate(180deg);
66 |   -o-transform: rotate(180deg);
67 |   -ms-transform: rotate(180deg);
68 |   transform: rotate(180deg);
69 | }


--------------------------------------------------------------------------------
/src/Dropdown/index.js:
--------------------------------------------------------------------------------
1 | import Dropdown from "./Dropdown.js";
2 | export { Dropdown };
3 | 


--------------------------------------------------------------------------------
/src/FileUpload/FileUpload.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import Dropzone from "react-dropzone";
 4 | import cx from "classnames";
 5 | import CSSModules from "react-css-modules";
 6 | import styles from "./fileupload.css";
 7 | 
 8 | export class FileUpload extends React.PureComponent {
 9 |   constructor(props) {
10 |     super(props);
11 |   }
12 | 
13 |   onDropHandler = files => {
14 |     if (typeof this.props.onChange !== "undefined") {
15 |       this.props.onChange(files);
16 |     }
17 |   };
18 | 
19 |   render() {
20 |     const { className, text, accept, style, inputRef } = this.props;
21 |     let textClass = cx({
22 |       text: true
23 |     });
24 |     return (
25 |       <Dropzone
26 |         style={style}
27 |         className={cx(className)}
28 |         accept={accept}
29 |         onDrop={this.onDropHandler}
30 |         ref={inputRef}
31 |       >
32 |         <div styleName={textClass}>{text}</div>
33 |       </Dropzone>
34 |     );
35 |   }
36 | }
37 | 
38 | FileUpload.propTypes = {
39 |   /**
40 |    * The MIME type of files that are accepted. */
41 |   accept: PropTypes.string,
42 | 
43 |   /** An object, array, or string of CSS classes to apply to FileUpload.*/
44 |   className: PropTypes.oneOfType([
45 |     PropTypes.string,
46 |     PropTypes.object,
47 |     PropTypes.array
48 |   ]),
49 | 
50 |   /** Function that will be called when a file is uploaded.
51 |    * Returns an array of uploaded files. */
52 |   onChange: PropTypes.func,
53 | 
54 |   /**
55 |    * Text that will be displayed on the FileUpload component.
56 |    */
57 |   text: PropTypes.string,
58 | 
59 |   /**
60 |    * Pass inline styling here.
61 |    */
62 |   style: PropTypes.object,
63 | 
64 |   /**
65 |    * Ref for Dropzone element
66 |    */
67 |   inputRef: PropTypes.func
68 | };
69 | 
70 | export default CSSModules(FileUpload, styles, { allowMultiple: true });
71 | 


--------------------------------------------------------------------------------
/src/FileUpload/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | Basic example:
 3 | 
 4 |     <FileUpload text="Click or drag a file to be uploaded"/>
 5 | 
 6 | onChange example:
 7 | 
 8 |     <FileUpload onChange={function(files) {console.log("files: ", files)}}/>
 9 | 
10 | Accept example:
11 | 
12 |     <FileUpload accept={"application/pdf"}/>
13 | 
14 | Open File Dialog via external Button:
15 | 
16 |     <div style={{display:"flex", flexDirection:"column", width:200, justifyContent:"space-between", alignItems:"center", height:250 }}>
17 |         <FileUpload text="Click or drag a file to be uploaded" inputRef={el => inputElement = el}/>
18 |         <Button primary onClick={() => inputElement.open()}>Open File Dialog</Button>
19 |     </div>
20 | 
21 | 


--------------------------------------------------------------------------------
/src/FileUpload/__tests__/fileUpload.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { FileUpload } from "../index";
 4 | 
 5 | /*
 6 | describe("Test correct render", () => {
 7 |   it("Test correct render", function() {
 8 | 		const tree = renderer.create(<FileUpload text={'Upload zone'} accept={"application/pdf"} onChange={()=> console.log('onChange triggered') }/>).toJSON();
 9 | 		expect(tree).toMatchSnapshot(); 
10 |   });
11 | });
12 | */
13 | 
14 | describe("Testing File Upload component", () => {
15 |   it("File Upload - Simulate drop event", function() {
16 |     const fileU = mount(
17 |       <FileUpload
18 |         text={"Upload zone"}
19 |         onChange={function(files) {
20 |           console.log("files: ", files);
21 |         }}
22 |       />
23 |     );
24 |     fileU.simulate("drop", ["/blahblah.pdf"]);
25 |   });
26 | 
27 |   it("File Upload - Simulate drop event(withou onChange func)", function() {
28 |     const fileU = mount(
29 |       <FileUpload text={"Upload zone"} accept={"application/pdf"} />
30 |     );
31 |     fileU.simulate("drop");
32 |   });
33 | });
34 | 


--------------------------------------------------------------------------------
/src/FileUpload/fileupload.css:
--------------------------------------------------------------------------------
 1 | .text {
 2 |     composes: default-text from '../styles.css';
 3 |     composes: default-font from '../styles.css';
 4 |     composes: marg-1 from '../styles.css';
 5 |     display: flex;
 6 |     justify-content: center; /* align horizontal */
 7 |     align-items: center; /* align vertical */
 8 |     height:100%;
 9 |     text-align:center;
10 | }


--------------------------------------------------------------------------------
/src/FileUpload/index.js:
--------------------------------------------------------------------------------
1 | import FileUpload from "./FileUpload.js";
2 | export { FileUpload };
3 | 


--------------------------------------------------------------------------------
/src/Form/index.js:
--------------------------------------------------------------------------------
1 | import Form from "./Form.js";
2 | export { Form };
3 | 


--------------------------------------------------------------------------------
/src/Hint/Hint.css:
--------------------------------------------------------------------------------
1 | .hintLabel {
2 |   	composes: default-font from '../styles.css';
3 | 	composes: dark-gray from '../styles.css';
4 | 	composes: font-size-6 from '../styles.css';
5 | }


--------------------------------------------------------------------------------
/src/Hint/Hint.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import CSSModules from "react-css-modules";
 5 | import styles from "./Hint.css";
 6 | 
 7 | export class Hint extends React.PureComponent {
 8 |   constructor(props) {
 9 |     super(props);
10 |   }
11 | 
12 |   render() {
13 |     const { className, children, text, style, ...others } = this.props;
14 | 
15 |     const hintContent = text || children;
16 | 
17 |     return (
18 |       <span
19 |         style={style}
20 |         className={cx(className)}
21 |         styleName={"hintLabel"}
22 |         {...others}
23 |       >
24 |         {hintContent}
25 |       </span>
26 |     );
27 |   }
28 | }
29 | 
30 | Hint.propTypes = {
31 |   /**
32 |    * Text to be displayed can be passed as a child.
33 |    * @examples '<Hint>This is a text hint</Hint>'
34 |    */
35 |   children: PropTypes.node,
36 |   /** An object, array, or string of CSS classes to apply to Hint.*/
37 |   className: PropTypes.oneOfType([
38 |     PropTypes.string,
39 |     PropTypes.object,
40 |     PropTypes.array
41 |   ]),
42 |   /**
43 |    * Content that will be displayed (will override children if passed).
44 |    * @examples '<Hint text="This is a text hint"/>' or '<Hint text={<div><Icon icon={"fab fa-github"}/> Your GitHub account ID</div>} />'
45 |    */
46 |   text: PropTypes.node,
47 | 
48 |   /**
49 |    * Pass inline styling here.
50 |    */
51 |   style: PropTypes.object
52 | };
53 | 
54 | Hint.defaultProps = {
55 |   className: ""
56 | };
57 | 
58 | export default CSSModules(Hint, styles, { allowMultiple: true });
59 | 


--------------------------------------------------------------------------------
/src/Hint/README.md:
--------------------------------------------------------------------------------
 1 | ###### Default Hint:
 2 |     <div>
 3 |         <TextField label="Phone Number:"/>
 4 |         <Hint>10 digit number including area code</Hint>
 5 |     </div>
 6 | 
 7 | ###### Passing text as prop:
 8 |     <div>
 9 |         <TextField label="CVV Code:"/>
10 | 	    <Hint text="The 3 or 4 digit number on the back of your card" />
11 |     </div>
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/src/Hint/__tests__/__snapshots__/hint.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Hint component render Render correctly 1`] = `
 4 | <span
 5 |   className="hintLabel"
 6 |   style={undefined}
 7 | >
 8 |   Some text
 9 | </span>
10 | `;
11 | 


--------------------------------------------------------------------------------
/src/Hint/__tests__/hint.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Hint } from "../index";
 3 | import renderer from "react-test-renderer";
 4 | 
 5 | describe("Test Hint component render", () => {
 6 |   it("Render correctly", () => {
 7 |     const tree = renderer.create(<Hint text="Some text" />).toJSON();
 8 |     expect(tree).toMatchSnapshot();
 9 |   });
10 | });
11 | 


--------------------------------------------------------------------------------
/src/Hint/index.js:
--------------------------------------------------------------------------------
1 | import Hint from "./Hint.js";
2 | export { Hint };
3 | 


--------------------------------------------------------------------------------
/src/Icon/Icon.css:
--------------------------------------------------------------------------------
1 | .large {
2 |   font-size: 2rem;
3 | }
4 | .small {
5 |   font-size: .85rem;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/Icon/Icon.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import CSSModules from "react-css-modules";
 5 | import styles from "./Icon.css";
 6 | 
 7 | /**
 8 |  * Master Icon component. Used as a stand alone component or in conjunction with button and avatar
 9 |  */
10 | export class Icon extends React.PureComponent {
11 |   constructor(props) {
12 |     super(props);
13 | 
14 |     if (!this.props.icon) {
15 |       console.warn(
16 |         "You are attempting to use an icon without passing in an icon property."
17 |       );
18 |     }
19 |   }
20 | 
21 |   render() {
22 |     const { className, small, large, style, onClick, icon } = this.props;
23 | 
24 |     let iconClasses = cx({
25 |       large: large,
26 |       small: small
27 |     });
28 | 
29 |     return (
30 |       <i
31 |         className={cx(className, icon)}
32 |         onClick={onClick}
33 |         styleName={iconClasses}
34 |         style={style}
35 |       />
36 |     );
37 |   }
38 | }
39 | 
40 | Icon.propTypes = {
41 |   /** An Object, array, or string of CSS classes to apply to Input.*/
42 |   className: PropTypes.oneOfType([
43 |     PropTypes.string,
44 |     PropTypes.object,
45 |     PropTypes.array
46 |   ]),
47 |   /**
48 |    * Defines an icon for the icon.
49 |    * @examples '<Icon icon={"fa fa-id-card"}/>'
50 |    */
51 |   icon: PropTypes.string,
52 |   /**
53 |    * Defines a large sized icon element.
54 |    * @examples '<Icon large icon={"fa fa-id-card"}/>'
55 |    */
56 |   large: PropTypes.bool,
57 |   /**
58 |    * Defines an onclick for the icon.
59 |    * @examples '<Icon onClick={ () => this._handleClick } icon={"fa fa-id-card"}/>'
60 |    */
61 |   onClick: PropTypes.func,
62 |   /**
63 |    * Defines a small sized icon element.
64 |    * @examples '<Icon small icon={"fa fa-id-card"}/>'
65 |    */
66 |   small: PropTypes.bool,
67 |   /**
68 |    * Pass inline styling here.
69 |    */
70 |   style: PropTypes.object
71 | };
72 | 
73 | export default CSSModules(Icon, styles, { allowMultiple: true });
74 | 


--------------------------------------------------------------------------------
/src/Icon/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ###### Default Icon:
 3 | 
 4 |     <Icon icon={"fa fa-github"}/>
 5 | 
 6 | ###### Icon within Button:
 7 | 
 8 |     <Button large icon={"fa fa-github"}/>
 9 | 
10 | ###### Icon within Avatar:
11 | 
12 |     <Avatar>
13 |       <Icon icon={"fa fa-github"}/>
14 |     </Avatar>
15 | 
16 | ###### Using large Icon property :
17 | 
18 |     <Icon large icon={"fa fa-github"}/>
19 | 
20 | ###### Using small Icon property :
21 | 
22 |     <Icon small icon={"fa fa-github"}/>


--------------------------------------------------------------------------------
/src/Icon/__tests__/__snapshots__/icon.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test correct render Test correct render 1`] = `
 4 | <i
 5 |   className="icon={<i className=\\"fa fa-github\\"></i>}"
 6 |   onClick={undefined}
 7 |   style={undefined}
 8 | />
 9 | `;
10 | 


--------------------------------------------------------------------------------
/src/Icon/__tests__/icon.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { Icon } from "../index";
 4 | 
 5 | import renderer from "react-test-renderer";
 6 | 
 7 | let icon = 'icon={<i className="fa fa-github"></i>}';
 8 | 
 9 | describe("Test correct render", () => {
10 |   it("Test correct render", function() {
11 |     const tree = renderer.create(<Icon icon={icon} />).toJSON();
12 |     expect(tree).toMatchSnapshot();
13 |   });
14 | });
15 | 
16 | describe("Testing Icon component", () => {
17 |   it("Set props should match what was passed in", function() {
18 |     const result = mount(<Icon icon={icon} />);
19 |     expect(result.props().icon).toBe(icon);
20 |   });
21 | 
22 |   it("Should warn when no icon prop is passed", function() {
23 |     global.console = { warn: jest.fn() }; //eslint-disable-line
24 |     mount(<Icon />);
25 |     expect(console.warn).toBeCalled();
26 |   });
27 | });
28 | 


--------------------------------------------------------------------------------
/src/Icon/index.js:
--------------------------------------------------------------------------------
1 | import Icon from "./Icon.js";
2 | export { Icon };
3 | 


--------------------------------------------------------------------------------
/src/Label/Label.css:
--------------------------------------------------------------------------------
 1 | .label {
 2 | 	display: inline-block;
 3 | 	composes: header-font from '../styles.css';
 4 | }
 5 | 
 6 | .labelSpacing {
 7 | 	margin-bottom: 0.35rem;
 8 | }
 9 | 
10 | .labelContainer {
11 | 	display: flex;
12 | 	align-items: center;
13 | }
14 | 
15 | .tooltipRight {
16 | 	justify-content: space-between;
17 | }
18 | 
19 | .verticalPadding {
20 | 	padding-top: 10px;
21 | 	padding-bottom: 5px;
22 | }
23 | 
24 | .horizontalPadding {
25 | 	padding-right: 1rem;
26 | }
27 | 
28 | .required {
29 | 	composes: secondary-text from '../styles.css';
30 | }
31 | 
32 | .required_error {
33 | 	composes: error-text from '../styles.css';
34 | }
35 | 
36 | .inline {
37 | 	display: inline-block;
38 | }


--------------------------------------------------------------------------------
/src/Label/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/src/Label/README.md


--------------------------------------------------------------------------------
/src/Label/__tests__/__snapshots__/label.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Label component Test render correctly 1`] = `
 4 | <div
 5 |   className="tooltipRight labelContainer"
 6 | >
 7 |   <div
 8 |     className="verticalPadding horizontalPadding"
 9 |   >
10 |     <label
11 |       className="labelSpacing label label"
12 |       htmlFor="someField"
13 |       style={undefined}
14 |     >
15 |       Some Field:
16 |     </label>
17 |     <span
18 |       className="required"
19 |     >
20 |        
21 |       <span
22 |         className="defaultFont"
23 |       >
24 |         *
25 |       </span>
26 |     </span>
27 |   </div>
28 | </div>
29 | `;
30 | 


--------------------------------------------------------------------------------
/src/Label/__tests__/label.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { Label } from "../index";
 4 | import renderer from "react-test-renderer";
 5 | 
 6 | describe("Test Label component", () => {
 7 |   it("Test render correctly", () => {
 8 |     const comp = <Label htmlFor="someField" label="Some Field:" required />;
 9 |     const tree = renderer.create(comp).toJSON();
10 |     expect(tree).toMatchSnapshot();
11 |   });
12 | 
13 |   it("htmlFor renders for attribute", () => {
14 |     const label = mount(<Label htmlFor="someField" label="Some Field:" />);
15 | 
16 |     expect(label.props().htmlFor).toBe("someField");
17 |     expect(
18 |       label
19 |         .find("label")
20 |         .find('[htmlFor="someField"]')
21 |         .exists()
22 |     ).toBe(true);
23 |   });
24 | 
25 |   it("inline && leftLabel renders with inline css classes", () => {
26 |     const label = mount(
27 |       <Label htmlFor="someField" label="Some Field:" inline leftLabel />
28 |     );
29 | 
30 |     expect(label.find(".inline").exists()).toBe(true);
31 |   });
32 | 
33 |   it("renders label text", () => {
34 |     const label = mount(
35 |       <Label htmlFor="someField" label="Some Field:" inline />
36 |     );
37 | 
38 |     expect(label.find("label").text()).toEqual("Some Field:");
39 |   });
40 | 
41 |   it("leftLabel omits unneeded css classes", () => {
42 |     const label = mount(
43 |       <Label htmlFor="someField" label="Some Field:" leftLabel />
44 |     );
45 | 
46 |     expect(label.find(".labelSpacing").exists()).toBe(false);
47 |     expect(label.find(".verticalPadding").exists()).toBe(false);
48 |   });
49 | 
50 |   it("renders * by default for required", () => {
51 |     const label = mount(
52 |       <Label htmlFor="someField" label="Some Field:" required />
53 |     );
54 | 
55 |     expect(label.find(".required").html()).toContain("*");
56 |   });
57 | 
58 |   it("renders text if supplied for required", () => {
59 |     const label = mount(
60 |       <Label
61 |         htmlFor="someField"
62 |         label="Some Field:"
63 |         required="this field is required"
64 |       />
65 |     );
66 | 
67 |     expect(label.find(".required").html()).toContain("this field is required");
68 |   });
69 | 
70 |   it("renders text if supplied for required", () => {
71 |     const label = mount(
72 |       <Label
73 |         htmlFor="someField"
74 |         label="Some Field:"
75 |         required="this field is required"
76 |       />
77 |     );
78 | 
79 |     expect(label.find(".required").html()).toContain("this field is required");
80 |   });
81 | 
82 |   it("applies error css class if status is error and required is true", () => {
83 |     const label = mount(
84 |       <Label htmlFor="someField" label="Some Field:" status="error" required />
85 |     );
86 | 
87 |     expect(label.find(".required_error").exists()).toBe(true);
88 |   });
89 | });
90 | 


--------------------------------------------------------------------------------
/src/Label/index.js:
--------------------------------------------------------------------------------
1 | import Label from "./Label.js";
2 | export { Label };
3 | 


--------------------------------------------------------------------------------
/src/List/List.css:
--------------------------------------------------------------------------------
 1 | .list {
 2 | 	composes: marg-b-2 from '../styles.css';
 3 | 	composes: pad-1 from '../styles.css';
 4 | 	composes: rounded from '../styles.css';
 5 | 	display: table;
 6 | }
 7 | 
 8 | .border {
 9 | 	composes: default-border from '../styles.css';
10 | }


--------------------------------------------------------------------------------
/src/List/List.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import CSSModules from "react-css-modules";
 5 | import styles from "./List.css";
 6 | 
 7 | export class List extends React.PureComponent {
 8 |   constructor(props) {
 9 |     super(props);
10 |   }
11 | 
12 |   render() {
13 |     const { border, children, className, id, style } = this.props;
14 | 
15 |     const listStyles = cx({
16 |       list: true,
17 |       border
18 |     });
19 | 
20 |     return (
21 |       <div id={id} style={style} className={className} styleName={listStyles}>
22 |         {children}
23 |       </div>
24 |     );
25 |   }
26 | }
27 | 
28 | List.propTypes = {
29 |   /** When true, List will display an outer border. */
30 |   border: PropTypes.bool,
31 |   /**
32 |    * Text, any HTML element, or React Component.
33 |    */
34 |   children: PropTypes.node,
35 |   /** An object, array, or string of CSS classes to apply to Input. */
36 |   className: PropTypes.oneOfType([
37 |     PropTypes.string,
38 |     PropTypes.object,
39 |     PropTypes.array
40 |   ]),
41 |   /**
42 |    * Will set the html "id" property for List.
43 |    */
44 |   id: PropTypes.string,
45 |   /** Pass inline styling here. */
46 |   style: PropTypes.object
47 | };
48 | 
49 | List.defaultProps = {
50 |   border: false
51 | };
52 | 
53 | export default CSSModules(List, styles, { allowMultiple: true });
54 | 


--------------------------------------------------------------------------------
/src/List/__tests__/list.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { List } from "../index";
 3 | import { ListGroup } from "../../ListGroup/index";
 4 | import { ListItem } from "../../ListItem/index";
 5 | import { Avatar } from "../../Avatar/index";
 6 | import { Switch } from "../../Switch/index";
 7 | import { Button } from "../../Button/index";
 8 | import renderer from "react-test-renderer";
 9 | 
10 | describe("Test List component", () => {
11 |   it("renders correctly", () => {
12 |     const tree = renderer
13 |       .create(
14 |         <List border>
15 |           <ListGroup title="Dinosaurs">
16 |             <ListItem leftItem={<Avatar title="Blue" />} rightItem={<Switch />}>
17 |               <Button link>Blue</Button>
18 |             </ListItem>
19 |             <ListItem leftItem={<Avatar title="Earl" />} rightItem={<Switch />}>
20 |               <Button link>Earl Sinclair</Button>
21 |             </ListItem>
22 |           </ListGroup>
23 |         </List>
24 |       )
25 |       .toJSON();
26 |     expect(tree).toMatchSnapshot();
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/src/List/index.js:
--------------------------------------------------------------------------------
1 | import List from "./List.js";
2 | export { List };
3 | 


--------------------------------------------------------------------------------
/src/ListGroup/ListGroup.css:
--------------------------------------------------------------------------------
1 | .divider {
2 | 	composes: border-bottom from '../styles.css';
3 | }
4 | 
5 | .groupTitle {
6 | 	composes: pad-v-1 from '../styles.css';
7 | 	composes: header-font from '../styles.css';
8 | }


--------------------------------------------------------------------------------
/src/ListGroup/ListGroup.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import CSSModules from "react-css-modules";
 5 | import styles from "./ListGroup.css";
 6 | 
 7 | export class ListGroup extends React.PureComponent {
 8 |   constructor(props) {
 9 |     super(props);
10 |   }
11 | 
12 |   render() {
13 |     const { children, className, divider, id, style, title } = this.props;
14 | 
15 |     const groupStyles = cx({
16 |       divider
17 |     });
18 | 
19 |     return (
20 |       <div id={id} style={style} className={className} styleName={groupStyles}>
21 |         <div styleName="groupTitle">{title}</div>
22 |         {children}
23 |       </div>
24 |     );
25 |   }
26 | }
27 | 
28 | ListGroup.propTypes = {
29 |   /**
30 |    * Text, any HTML element, or React Component.
31 |    */
32 |   children: PropTypes.node,
33 |   /** An object, array, or string of CSS classes to apply to Input. */
34 |   className: PropTypes.oneOfType([
35 |     PropTypes.string,
36 |     PropTypes.object,
37 |     PropTypes.array
38 |   ]),
39 |   /** When true, will add a horizontal rule between the ListGroup and subsequent children. */
40 |   divider: PropTypes.bool,
41 |   /**
42 |    * Will set the html "id" property for ListGroup.
43 |    */
44 |   id: PropTypes.string,
45 |   /** Pass inline styling here. */
46 |   style: PropTypes.object,
47 |   /** Will add a title to the ListGroup. */
48 |   title: PropTypes.string
49 | };
50 | 
51 | ListGroup.defaultProps = {
52 |   divider: true
53 | };
54 | 
55 | export default CSSModules(ListGroup, styles, { allowMultiple: true });
56 | 


--------------------------------------------------------------------------------
/src/ListGroup/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/src/ListGroup/README.md


--------------------------------------------------------------------------------
/src/ListGroup/__tests__/__snapshots__/listGroup.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test ListGroup component Test render correctly 1`] = `
 4 | <div
 5 |   className="divider"
 6 |   id={undefined}
 7 |   style={undefined}
 8 | >
 9 |   <div
10 |     className="groupTitle"
11 |   />
12 |   <div>
13 |     Item 1
14 |   </div>
15 |   <div>
16 |     Item 2
17 |   </div>
18 |   <div>
19 |     Item 3
20 |   </div>
21 | </div>
22 | `;
23 | 


--------------------------------------------------------------------------------
/src/ListGroup/index.js:
--------------------------------------------------------------------------------
1 | import ListGroup from "./ListGroup.js";
2 | export { ListGroup };
3 | 


--------------------------------------------------------------------------------
/src/ListItem/ListItem.css:
--------------------------------------------------------------------------------
 1 | .listItem {
 2 | 	display: flex;
 3 |     flex-direction: row;
 4 |     align-items: center; 
 5 | }
 6 | .inlineBlock {
 7 | 	display: inline-block;
 8 | }
 9 | .rightItem {
10 | 	composes: inlineBlock;
11 | 	margin-left: auto;
12 | }


--------------------------------------------------------------------------------
/src/ListItem/ListItem.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import CSSModules from "react-css-modules";
 4 | import styles from "./ListItem.css";
 5 | 
 6 | export class ListItem extends React.PureComponent {
 7 |   constructor(props) {
 8 |     super(props);
 9 |   }
10 | 
11 |   render() {
12 |     const {
13 |       children,
14 |       className,
15 |       id,
16 |       leftItem,
17 |       onClick,
18 |       rightItem,
19 |       style
20 |     } = this.props;
21 | 
22 |     return (
23 |       <div
24 |         id={id}
25 |         style={style}
26 |         className={className}
27 |         styleName="listItem"
28 |         onClick={onClick}
29 |       >
30 |         {leftItem && <div styleName="inlineBlock">{leftItem}</div>}
31 |         <div styleName="inlineBlock">{children}</div>
32 |         {rightItem && <div styleName="rightItem">{rightItem}</div>}
33 |       </div>
34 |     );
35 |   }
36 | }
37 | 
38 | ListItem.propTypes = {
39 |   /**
40 |    * Text, any HTML element, or React Component.
41 |    */
42 |   children: PropTypes.node,
43 |   /** An object, array, or string of CSS classes to apply to Input. */
44 |   className: PropTypes.oneOfType([
45 |     PropTypes.string,
46 |     PropTypes.object,
47 |     PropTypes.array
48 |   ]),
49 |   /**
50 |    * Will set the html "id" property for ListItem.
51 |    */
52 |   id: PropTypes.string,
53 |   /** Text, any HTML element, or React Component. */
54 |   leftItem: PropTypes.node,
55 |   /** Click event handler for the ListItem. */
56 |   onClick: PropTypes.func,
57 |   /** Text, any HTML element, or React Component. */
58 |   rightItem: PropTypes.node,
59 |   /** Pass inline styling here. */
60 |   style: PropTypes.object
61 | };
62 | 
63 | export default CSSModules(ListItem, styles, { allowMultiple: true });
64 | 


--------------------------------------------------------------------------------
/src/ListItem/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/src/ListItem/README.md


--------------------------------------------------------------------------------
/src/ListItem/__tests__/__snapshots__/listItem.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test ListItem component Test render correctly 1`] = `
 4 | <div
 5 |   className="listItem"
 6 |   id={undefined}
 7 |   onClick={undefined}
 8 |   style={undefined}
 9 | >
10 |   <div
11 |     className="inlineBlock"
12 |   >
13 |     Item one
14 |   </div>
15 | </div>
16 | `;
17 | 


--------------------------------------------------------------------------------
/src/ListItem/__tests__/listItem.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { ListItem } from "../index";
 4 | import renderer from "react-test-renderer";
 5 | 
 6 | describe("Test ListItem component", () => {
 7 |   it("Test render correctly", () => {
 8 |     const comp = <ListItem>Item one</ListItem>;
 9 |     const tree = renderer.create(comp).toJSON();
10 |     expect(tree).toMatchSnapshot();
11 |   });
12 | 
13 |   it("renders children", () => {
14 |     const li = mount(<ListItem>Item one</ListItem>);
15 |     expect(li.text()).toBe("Item one");
16 |   });
17 | 
18 |   it("renders className", () => {
19 |     const li = mount(<ListItem className="myClass">Item one</ListItem>);
20 |     expect(
21 |       li
22 |         .children()
23 |         .first()
24 |         .html()
25 |     ).toContain("myClass");
26 |     expect(li.find(".myClass").exists()).toBe(true);
27 |   });
28 | 
29 |   it("sets id attribute", () => {
30 |     const li = mount(
31 |       <ListItem className="myClass" id="itemOne">
32 |         Item one
33 |       </ListItem>
34 |     );
35 | 
36 |     expect(li.find('[id="itemOne"]').exists()).toBe(true);
37 |   });
38 | 
39 |   it("renders leftItem", () => {
40 |     const leftItem = `<div id="myLeftItem">left</div>`;
41 |     const li = mount(
42 |       <ListItem className="myClass" id="itemOne" leftItem={leftItem}>
43 |         Item one
44 |       </ListItem>
45 |     );
46 | 
47 |     expect(li.html()).toContain("myLeftItem");
48 |   });
49 | 
50 |   it("handles click", () => {
51 |     const handleClick = jest.fn();
52 |     const li = mount(
53 |       <ListItem className="myClass" id="itemOne" onClick={handleClick}>
54 |         Item one
55 |       </ListItem>
56 |     );
57 | 
58 |     li.simulate("click");
59 |     expect(handleClick).toBeCalled();
60 |   });
61 | 
62 |   it("renders rightItem", () => {
63 |     const rightItem = `<div id="myRightItem">left</div>`;
64 |     const li = mount(
65 |       <ListItem className="myClass" id="itemOne" rightItem={rightItem}>
66 |         Item one
67 |       </ListItem>
68 |     );
69 | 
70 |     expect(li.html()).toContain("myRightItem");
71 |   });
72 | 
73 |   it("sets inline style", () => {
74 |     const li = mount(
75 |       <ListItem className="myClass" id="itemOne" style={{ "color": "red" }}>
76 |         Item one
77 |       </ListItem>
78 |     );
79 | 
80 |     expect(
81 |       li
82 |         .children()
83 |         .first()
84 |         .html()
85 |     ).toContain('style="color: red;"');
86 |   });
87 | });
88 | 


--------------------------------------------------------------------------------
/src/ListItem/index.js:
--------------------------------------------------------------------------------
1 | import ListItem from "./ListItem.js";
2 | export { ListItem };
3 | 


--------------------------------------------------------------------------------
/src/Modal/Modal.css:
--------------------------------------------------------------------------------
 1 | @import '../styles/variables.css';
 2 | 
 3 | .modal {
 4 |     composes: default-font from '../styles.css';
 5 | }
 6 | .active {
 7 |     background-color: var(--white);
 8 |     box-shadow: 0 19px 60px rgba(0, 0, 0, .3), 0 15px 20px rgba(0, 0, 0, .22);
 9 |     border-radius: 5px;
10 |     padding: var(--space-3) var(--space-4);
11 |     border-top: solid 5px var(--secondary);
12 | }
13 | 
14 | .title {
15 |     composes: header-font from '../styles.css';
16 |     composes: marg-0 from '../styles.css';
17 |     composes: font-size-2 from '../styles.css';
18 |     padding-bottom: var(--space-2);
19 | }
20 | 
21 | .dialogWrapper{
22 |     display: block;
23 |     top:0;
24 |     right: 0;
25 |     bottom: 0;
26 |     left: 0;
27 |     height: 100%;
28 | }
29 | 
30 | .dialog{
31 |     position:relative;
32 |     margin:15% auto;
33 |     margin-bottom:43px;
34 |     z-index:1050;
35 | }
36 | 
37 | .overlayClass {
38 |     z-index: 1040;
39 |    
40 | }
41 | 
42 | .overlayLeftStyle{
43 |     left:-16px !important;
44 | }
45 | 


--------------------------------------------------------------------------------
/src/Modal/README.md:
--------------------------------------------------------------------------------
 1 | Modal with title, overlay, onOverlayClick, and onEscKeyDown:
 2 | 
 3 |     initialState = {active: false}
 4 |     handleToggle = () => {
 5 |         setState({ active: !state.active })
 6 |     };
 7 |     <div> 
 8 |         <Button primary onClick={handleToggle}>Open Modal</Button>
 9 |         <Modal 
10 |             overlay
11 |             active={state.active} 
12 |             onOverlayClick={handleToggle} 
13 |             onEscKeyDown={handleToggle}
14 |             title="Modal Example Title"
15 |         >
16 |             <div style={{'marginBottom':'20px'}}>
17 |                 <Text>This is Modal example<br/>Any child components could be put here.</Text>
18 |             </div>
19 | 
20 |             <Button raised primary onClick={handleToggle}>Close!</Button>
21 |         </Modal>
22 | 	</div>


--------------------------------------------------------------------------------
/src/Modal/__tests__/__snapshots__/modal.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 | 
3 | exports[`Test correct render Test correct render 1`] = `null`;
4 | 


--------------------------------------------------------------------------------
/src/Modal/index.js:
--------------------------------------------------------------------------------
1 | import Modal from "./Modal.js";
2 | export { Modal };
3 | 


--------------------------------------------------------------------------------
/src/Nav/Nav.css:
--------------------------------------------------------------------------------
 1 | .nav {
 2 |     padding-left: 0;
 3 |     margin-bottom: 0;
 4 |     margin-top: 0;
 5 |     list-style: none;
 6 |     height: auto;
 7 | }
 8 | 
 9 | .nav a {
10 |     text-decoration: none;
11 | }


--------------------------------------------------------------------------------
/src/Nav/__tests__/__snapshots__/nav.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`Test Nav component render Render correctly 1`] = `
  4 | <ul
  5 |   className="nav"
  6 |   style={undefined}
  7 | >
  8 |   <li
  9 |     className="navItem"
 10 |     role="presentation"
 11 |     style={undefined}
 12 |   >
 13 |     <button
 14 |       className="link button link link_hover"
 15 |       href={undefined}
 16 |       id={undefined}
 17 |       name={undefined}
 18 |       onClick={[Function]}
 19 |       style={undefined}
 20 |       tabIndex={0}
 21 |       type="button"
 22 |     >
 23 |       HOME
 24 |       <i />
 25 |     </button>
 26 |   </li>
 27 |   <li
 28 |     className="navItem"
 29 |     role="presentation"
 30 |     style={undefined}
 31 |   >
 32 |     <button
 33 |       className="link button link link_hover"
 34 |       href={undefined}
 35 |       id={undefined}
 36 |       name={undefined}
 37 |       onClick={[Function]}
 38 |       style={undefined}
 39 |       tabIndex={0}
 40 |       type="button"
 41 |     >
 42 |       Catalog
 43 |       <i />
 44 |     </button>
 45 |   </li>
 46 |   <li
 47 |     className="navItem"
 48 |     role="presentation"
 49 |     style={undefined}
 50 |   >
 51 |     <button
 52 |       className="link button link link_hover"
 53 |       href={undefined}
 54 |       id={undefined}
 55 |       name={undefined}
 56 |       onClick={[Function]}
 57 |       style={undefined}
 58 |       tabIndex={0}
 59 |       type="button"
 60 |     >
 61 |       Customer Service
 62 |       <i />
 63 |     </button>
 64 |   </li>
 65 |   <li
 66 |     className="navItem"
 67 |     role="presentation"
 68 |     style={undefined}
 69 |   >
 70 |     <button
 71 |       className="link button link link_hover"
 72 |       href={undefined}
 73 |       id={undefined}
 74 |       name={undefined}
 75 |       onClick={[Function]}
 76 |       style={undefined}
 77 |       tabIndex={0}
 78 |       type="button"
 79 |     >
 80 |       Administration
 81 |       <i />
 82 |     </button>
 83 |   </li>
 84 |   <li
 85 |     className="navItem"
 86 |     role="presentation"
 87 |     style={undefined}
 88 |   >
 89 |     <button
 90 |       className="link button link link_hover"
 91 |       href={undefined}
 92 |       id={undefined}
 93 |       name={undefined}
 94 |       onClick={[Function]}
 95 |       style={undefined}
 96 |       tabIndex={0}
 97 |       type="button"
 98 |     >
 99 |       Support
100 |       <i />
101 |     </button>
102 |   </li>
103 | </ul>
104 | `;
105 | 


--------------------------------------------------------------------------------
/src/Nav/__tests__/data.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "navKey": 0,
 4 |     "title": "Home"
 5 |   },
 6 |   {
 7 |     "navKey": 1,
 8 |     "title": "Catalog"
 9 |   },
10 |   {
11 |     "navKey": 2,
12 |     "title": "Customer Service"
13 |   },
14 |   {
15 |     "navKey": 3,
16 |     "title": "Reports",
17 |     "collapsed": true,
18 |     "subNav": [
19 |       {
20 |         "navKey": 3.1,
21 |         "title": "Create a Report"
22 |       },
23 |       {
24 |         "navKey": 3.2,
25 |         "title": "Remove Report"
26 |       }
27 |     ]
28 |   },
29 |   {
30 |     "navKey": 4,
31 |     "title": "Administration"
32 |   }
33 | ]


--------------------------------------------------------------------------------
/src/Nav/index.js:
--------------------------------------------------------------------------------
1 | import Nav from "./Nav.js";
2 | export { Nav };
3 | 


--------------------------------------------------------------------------------
/src/NavItem/NavItem.css:
--------------------------------------------------------------------------------
 1 | @import '../Button/Button.css';
 2 | @import '../styles/variables.css';
 3 | 
 4 | .base {
 5 |     border-style: none;
 6 |     border-top: 1px solid #eee !important; /* Important designation needed to overwrite Button styling in prod build */
 7 | }
 8 | 
 9 | .subNav {
10 |     height: 40px;
11 |     transition: height .3s ease-in-out;
12 | }
13 | 
14 | .subNav.collapsed {
15 |     height: 0;
16 | }
17 | 
18 | .navItem button {
19 |     width: 100%;
20 |     border-color: var(--silver);
21 |     border-left: solid 5px transparent;
22 |     position: relative;
23 |     display: block;
24 |     padding: 10px 15px;
25 |     text-align: left;
26 |     color: var(--dark-gray);
27 |     background-color: var(--white);
28 | }
29 | 
30 | .subNav button {
31 |     padding-left: 38px;
32 | }
33 | 
34 | .subNav.collapsed button {
35 |     display: none;
36 | }
37 | 
38 | .navItem button:hover {
39 |     background-color: var(--silver);
40 |     color: var(--dark-gray);
41 | }
42 | 
43 | .navItem button:focus {
44 |     outline: none;
45 | }
46 | 
47 | .active > button, .active > a > button {
48 |     border-left-color: var(--blue);
49 |     background-color: var(--silver);
50 |     color: var(--blue);
51 | }
52 | 
53 | .caret::before {
54 |     content: "";
55 |     border: solid var(--blue);
56 |     border-width: 0 2px 2px 0;
57 |     display: inline-block;
58 |     padding: 5px;
59 |     transform: rotate(45deg);
60 |     position: absolute;
61 |     top: -5px;
62 |     left: 5px;
63 | }
64 | 
65 | .caret {
66 |     position: relative;
67 |     width: 18px;
68 |     height: 10px;
69 |     vertical-align: middle;
70 |     float: right;
71 |     clear: right;
72 |     border-color: var(--dark-gray);
73 |     transform: none;
74 |     margin: 5px 0 0;
75 |     transition: transform .3s;
76 |     top: -2px;
77 | }
78 | 
79 | 
80 | .collapsed .caret {
81 |     transform: rotate(90deg);
82 | }


--------------------------------------------------------------------------------
/src/NavItem/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/src/NavItem/README.md


--------------------------------------------------------------------------------
/src/NavItem/__tests__/__snapshots__/navItem.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test correct render Test correct render 1`] = `
 4 | <li
 5 |   className="navItem"
 6 |   role="presentation"
 7 |   style={undefined}
 8 | >
 9 |   <button
10 |     className="link button link link_hover"
11 |     href={undefined}
12 |     id={undefined}
13 |     name={undefined}
14 |     onClick={[Function]}
15 |     style={undefined}
16 |     tabIndex={0}
17 |     type="button"
18 |   >
19 |     HOME
20 |     <i />
21 |   </button>
22 | </li>
23 | `;
24 | 


--------------------------------------------------------------------------------
/src/NavItem/index.js:
--------------------------------------------------------------------------------
1 | import NavItem from "./NavItem.js";
2 | export { NavItem };
3 | 


--------------------------------------------------------------------------------
/src/Option/Option.css:
--------------------------------------------------------------------------------
 1 | .optionWrapper {
 2 |   padding: 5px;
 3 | }
 4 | 
 5 | .option {
 6 |   overflow: hidden;
 7 |   text-overflow: ellipsis;
 8 | }
 9 | 
10 | .selected {
11 |   composes: bg-gray from '../styles.css';
12 | }
13 | 
14 | .hover {
15 |  composes: bg-silver from '../styles.css';
16 | }


--------------------------------------------------------------------------------
/src/Option/Option.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import { Text } from "../Text";
 5 | import CSSModules from "react-css-modules";
 6 | import styles from "./Option.css";
 7 | import blacklist from "blacklist";
 8 | 
 9 | export class Option extends React.PureComponent {
10 |   constructor(props) {
11 |     super(props);
12 |     this.optionDivRef = React.createRef();
13 |   }
14 |   _handleHover = e => {
15 |     this.props.optionHover(e, this.props.index);
16 |   };
17 | 
18 |   _clickHandler = e => {
19 |     this.props.optionClick(e, this.props.value, this.props.index);
20 |   };
21 | 
22 |   render() {
23 |     const { hover, selected, text, value, ...others } = this.props;
24 | 
25 |     // Declaring the following variables so they don't get passed to the option element through the prop spread.
26 |     const othersFiltered = blacklist(others, "optionClick", "optionHover");
27 | 
28 |     const optionWrapper = cx({
29 |       optionWrapper: true,
30 |       hover: hover && !selected,
31 |       selected: selected
32 |     });
33 | 
34 |     return (
35 |       <div
36 |         onMouseOver={this._handleHover}
37 |         onMouseDown={this._clickHandler}
38 |         styleName={optionWrapper}
39 |         ref={hover ? this.optionDivRef : null}
40 |         {...othersFiltered}
41 |       >
42 |         <Text title={text} styleName={cx("option")} value={value}>
43 |           {text}
44 |         </Text>
45 |       </div>
46 |     );
47 |   }
48 | }
49 | 
50 | Option.propTypes = {
51 |   /** Define whether or not the Option should get hover styling.*/
52 |   hover: PropTypes.bool,
53 |   /** Define an index for the Option.*/
54 |   index: PropTypes.number,
55 |   /** Sets a handler function to be executed when onClick event occurs.*/
56 |   optionClick: PropTypes.func,
57 |   /** Sets a handler function to be executed when onMouseOver event occurs.*/
58 |   optionHover: PropTypes.func,
59 |   /** Define whether or not the Option should get selected styling.*/
60 |   selected: PropTypes.bool,
61 |   /** Define display text for the Option.*/
62 |   text: PropTypes.string,
63 |   /** Define a value for the Option.*/
64 |   value: PropTypes.string
65 | };
66 | 
67 | Option.defaultProps = {};
68 | 
69 | export default CSSModules(Option, styles, { allowMultiple: true });
70 | 


--------------------------------------------------------------------------------
/src/Option/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/src/Option/README.md


--------------------------------------------------------------------------------
/src/Option/index.js:
--------------------------------------------------------------------------------
1 | import Option from "./Option.js";
2 | export { Option };
3 | 


--------------------------------------------------------------------------------
/src/Overlay/Overlay.css:
--------------------------------------------------------------------------------
 1 | .overlay {
 2 | 	composes: bg-black from '../styles.css';
 3 | 	left: 0;
 4 | 	opacity: 0;
 5 | 	position: fixed;
 6 | 	top: 0;
 7 | 	width: 100%;
 8 | 	height: 100%;
 9 | 	z-index: -1;
10 | }
11 | 
12 | .overlay.active {
13 | 	opacity: 0.6;
14 | 	pointer-events: all;
15 | }


--------------------------------------------------------------------------------
/src/Overlay/Overlay.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import PropTypes from "prop-types";
  3 | import cx from "classnames";
  4 | import CSSModules from "react-css-modules";
  5 | import styles from "./Overlay.css";
  6 | 
  7 | export class Overlay extends React.PureComponent {
  8 |   componentDidMount() {
  9 |     const { active, lockScroll, onEscKeyDown } = this.props;
 10 |     if (onEscKeyDown) {
 11 |       document.body.addEventListener("keydown", this.handleEscKey);
 12 |     }
 13 |     if (active && lockScroll) {
 14 |       document.body.style.overflow = "hidden";
 15 |     }
 16 |   }
 17 | 
 18 |   componentWillUnmount() {
 19 |     const { active, lockScroll, onEscKeyDown } = this.props;
 20 |     if (active && lockScroll) {
 21 |       document.body.style.overflow = "";
 22 |     }
 23 | 
 24 |     if (onEscKeyDown) {
 25 |       document.body.removeEventListener("keydown", this.handleEscKey);
 26 |     }
 27 |   }
 28 | 
 29 |   handleEscKey = e => {
 30 |     const { active, onEscKeyDown } = this.props;
 31 |     if (active && onEscKeyDown && e.which === 27) {
 32 |       onEscKeyDown(e);
 33 |     }
 34 |   };
 35 | 
 36 |   handleClick = event => {
 37 |     event.preventDefault();
 38 |     event.stopPropagation();
 39 |     if (this.props.onClick) {
 40 |       this.props.onClick(event);
 41 |     }
 42 |   };
 43 | 
 44 |   render() {
 45 |     const { active, className, style } = this.props;
 46 |     const overlayStyles = cx("overlay", {
 47 |       active
 48 |     });
 49 |     return (
 50 |       <div
 51 |         style={style}
 52 |         onClick={this.handleClick}
 53 |         styleName={overlayStyles}
 54 |         className={cx(className)}
 55 |       />
 56 |     );
 57 |   }
 58 | }
 59 | 
 60 | Overlay.propTypes = {
 61 |   /**
 62 |    * When true, Overlay will display
 63 |    */
 64 |   active: PropTypes.bool,
 65 | 
 66 |   /** An object, array, or string of CSS classes to apply to Overlay.*/
 67 |   className: PropTypes.oneOfType([
 68 |     PropTypes.string,
 69 |     PropTypes.object,
 70 |     PropTypes.array
 71 |   ]),
 72 | 
 73 |   /**
 74 |    * Determines to hide page scroll
 75 |    */
 76 |   lockScroll: PropTypes.bool,
 77 | 
 78 |   /**
 79 |    * Event handler for esc key down
 80 |    */
 81 |   onEscKeyDown: PropTypes.func,
 82 | 
 83 |   /**
 84 |    * Click event handler.
 85 |    */
 86 |   onClick: PropTypes.func,
 87 | 
 88 |   /**
 89 |    * Pass inline styling here.
 90 |    */
 91 |   style: PropTypes.object
 92 | };
 93 | 
 94 | Overlay.defaultProps = {
 95 |   active: false,
 96 |   className: "",
 97 |   lockScroll: false
 98 | };
 99 | 
100 | export default CSSModules(Overlay, styles, { allowMultiple: true });
101 | 


--------------------------------------------------------------------------------
/src/Overlay/__tests__/__snapshots__/overlay.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test correct render Test correct render 1`] = `
 4 | <div
 5 |   className="overlay active"
 6 |   onClick={[Function]}
 7 |   style={undefined}
 8 | />
 9 | `;
10 | 


--------------------------------------------------------------------------------
/src/Overlay/__tests__/overlay.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { Overlay } from "../index";
 4 | 
 5 | import renderer from "react-test-renderer";
 6 | 
 7 | describe("Test correct render", () => {
 8 |   it("Test correct render", function() {
 9 |     const tree = renderer
10 |       .create(<Overlay active lockScroll onEscKeyDown={jest.fn()} />)
11 |       .toJSON();
12 |     expect(tree).toMatchSnapshot();
13 |   });
14 | });
15 | 
16 | describe("Testing Overlay component", () => {
17 |   it("unmount removes element", function() {
18 |     const overlay = mount(<Overlay />);
19 |     overlay.unmount();
20 |     expect(overlay.html()).toBe(null);
21 |   });
22 | 
23 |   it("unmount cleans up", function() {
24 |     const overlay = mount(
25 |       <Overlay active lockScroll onEscKeyDown={jest.fn()} />
26 |     );
27 |     expect(document.body.style.overflow).toBe("hidden");
28 |     overlay.unmount();
29 |     expect(document.body.style.overflow).toBe("");
30 |   });
31 | 
32 |   it("handles click", function() {
33 |     const handleClick = jest.fn();
34 |     const event = {
35 |       "preventDefault": jest.fn(),
36 |       "stopPropagation": jest.fn()
37 |     };
38 |     const overlay = mount(<Overlay onClick={handleClick} />);
39 |     overlay.simulate("click", event);
40 |     expect(handleClick).toBeCalled();
41 |     expect(event.preventDefault).toBeCalled();
42 |     expect(event.stopPropagation).toBeCalled();
43 |   });
44 | 
45 |   it("stops defaults and propagation on click when onClick is not defined", function() {
46 |     const handleClick = jest.fn();
47 |     const event = {
48 |       "preventDefault": jest.fn(),
49 |       "stopPropagation": jest.fn()
50 |     };
51 |     const overlay = mount(<Overlay />);
52 |     overlay.simulate("click", event);
53 |     expect(handleClick).not.toBeCalled();
54 |     expect(event.preventDefault).toBeCalled();
55 |     expect(event.stopPropagation).toBeCalled();
56 |   });
57 | 
58 |   it("handles onEscKeyDown", function() {
59 |     const handleEsc = jest.fn();
60 |     const overlay = mount(<Overlay active onEscKeyDown={handleEsc} />); //eslint-disable-line no-unused-vars
61 | 
62 |     document.body.dispatchEvent(new KeyboardEvent("keydown", { "which": "27" }));
63 |     expect(handleEsc).toBeCalled();
64 |   });
65 | 
66 |   it("does not onEscKeyDown when a different key is pressed", function() {
67 |     const handleEsc = jest.fn();
68 |     const overlay = mount(<Overlay active onEscKeyDown={handleEsc} />); //eslint-disable-line no-unused-vars
69 | 
70 |     document.body.dispatchEvent(new KeyboardEvent("keydown", { "which": "28" }));
71 |     expect(handleEsc).not.toBeCalled();
72 |   });
73 | });
74 | 


--------------------------------------------------------------------------------
/src/Overlay/index.js:
--------------------------------------------------------------------------------
1 | import Overlay from "./Overlay.js";
2 | export { Overlay };
3 | 


--------------------------------------------------------------------------------
/src/Portal/Portal.css:
--------------------------------------------------------------------------------
 1 | .portal {
 2 | 	align-items: center;
 3 | 	justify-content: center;
 4 | 	display: flex;
 5 | 	position: fixed;
 6 | 	top: 0;
 7 | 	width: 100%;
 8 | 	height: 100%;
 9 | 	z-index: 999;
10 | 	overflow-x: hidden;
11 | 	overflow-y: auto;
12 | }


--------------------------------------------------------------------------------
/src/Portal/Portal.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import PropTypes from "prop-types";
  3 | import ReactDOM from "react-dom";
  4 | import cx from "classnames";
  5 | import CSSModules from "react-css-modules";
  6 | import styles from "./Portal.css";
  7 | 
  8 | export class Portal extends Component {
  9 |   componentDidMount() {
 10 |     this._renderOverlay();
 11 |   }
 12 | 
 13 |   componentDidUpdate() {
 14 |     this._renderOverlay();
 15 |   }
 16 | 
 17 |   componentWillUnmount() {
 18 |     this._unrenderOverlay();
 19 |     this._unmountOverlayTarget();
 20 |   }
 21 | 
 22 |   _getOverlay() {
 23 |     if (!this.props.children) {
 24 |       return null;
 25 |     }
 26 |     return (
 27 |       <div className={cx("ra_Portal__portal", this.props.className)}>
 28 |         {this.props.children}
 29 |       </div>
 30 |     );
 31 |   }
 32 | 
 33 |   _renderOverlay() {
 34 |     const overlay = this._getOverlay();
 35 |     if (overlay !== null) {
 36 |       this._mountOverlayTarget();
 37 |       this._overlayInstance = ReactDOM.unstable_renderSubtreeIntoContainer(
 38 |         this,
 39 |         overlay,
 40 |         this._overlayTarget
 41 |       );
 42 |     } else {
 43 |       this._unrenderOverlay();
 44 |       this._unmountOverlayTarget();
 45 |     }
 46 |   }
 47 | 
 48 |   _unrenderOverlay() {
 49 |     if (this._overlayTarget) {
 50 |       ReactDOM.unmountComponentAtNode(this._overlayTarget);
 51 |       this._overlayInstance = null;
 52 |     }
 53 |   }
 54 | 
 55 |   _mountOverlayTarget() {
 56 |     if (!this._overlayTarget) {
 57 |       this._overlayTarget = document.createElement("div");
 58 |       this._portalContainerNode = document.body;
 59 |       this._portalContainerNode.appendChild(this._overlayTarget);
 60 |     }
 61 |   }
 62 | 
 63 |   _unmountOverlayTarget() {
 64 |     if (this._overlayTarget) {
 65 |       this._portalContainerNode.removeChild(this._overlayTarget);
 66 |       this._overlayTarget = null;
 67 |     }
 68 |     this._portalContainerNode = null;
 69 |   }
 70 | 
 71 |   render() {
 72 |     return null;
 73 |   }
 74 | }
 75 | 
 76 | Portal.propTypes = {
 77 |   /**
 78 |    * Text, any HTML element, or React Component.
 79 |    */
 80 |   children: PropTypes.node,
 81 | 
 82 |   /** An object, array, or string of CSS classes to apply to Portal.*/
 83 |   className: PropTypes.oneOfType([
 84 |     PropTypes.string,
 85 |     PropTypes.object,
 86 |     PropTypes.array
 87 |   ]),
 88 | 
 89 |   /**
 90 |    * Pass inline styling here.
 91 |    */
 92 |   style: PropTypes.object
 93 | };
 94 | 
 95 | Portal.defaultProps = {
 96 |   className: ""
 97 | };
 98 | 
 99 | export default CSSModules(Portal, styles, { allowMultiple: true });
100 | 


--------------------------------------------------------------------------------
/src/Portal/__tests__/__snapshots__/portal.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 | 
3 | exports[`Test correct render Test correct render 1`] = `null`;
4 | 


--------------------------------------------------------------------------------
/src/Portal/__tests__/portal.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { Portal } from "../index";
 4 | 
 5 | import renderer from "react-test-renderer";
 6 | 
 7 | beforeEach(() => {
 8 |   document.body.innerHTML = "";
 9 | });
10 | 
11 | describe("Test correct render", () => {
12 |   it("Test correct render", function() {
13 |     const tree = renderer.create(<Portal />).toJSON();
14 |     expect(tree).toMatchSnapshot();
15 |   });
16 | });
17 | 
18 | describe("Testing Portal component", () => {
19 |   it("applies props correctly", function() {
20 |     mount(
21 |       <Portal className="myClass">
22 |         <div>foo</div>
23 |       </Portal>
24 |     );
25 |     expect(document.body.querySelector(".ra_Portal__portal").className).toBe(
26 |       "ra_Portal__portal myClass"
27 |     );
28 |   });
29 | 
30 |   it("applies default props correctly", function() {
31 |     mount(
32 |       <Portal>
33 |         <div>foo</div>
34 |       </Portal>
35 |     );
36 |     expect(document.body.querySelector(".ra_Portal__portal").className).toBe(
37 |       "ra_Portal__portal"
38 |     );
39 |   });
40 | 
41 |   it("unmount removes element", function() {
42 |     const portal = mount(
43 |       <Portal>
44 |         <div>foo</div>
45 |       </Portal>
46 |     );
47 |     portal.unmount();
48 |     expect(document.body.innerHTML).toBe("");
49 |   });
50 | 
51 |   it("rerenders appropriately with new props", function() {
52 |     let className = "myClass";
53 |     const portal = mount(
54 |       <Portal className={className}>
55 |         <div>foo</div>
56 |       </Portal>
57 |     );
58 |     portal.setProps({ className: "myNewClass" });
59 |     expect(document.body.querySelectorAll(".myNewClass").length).toBe(1);
60 |   });
61 | });
62 | 


--------------------------------------------------------------------------------
/src/Portal/index.js:
--------------------------------------------------------------------------------
1 | import Portal from "./Portal.js";
2 | export { Portal };
3 | 


--------------------------------------------------------------------------------
/src/ProgressBar/ProgressBar.css:
--------------------------------------------------------------------------------
  1 | @import '../styles/variables.css';
  2 | 
  3 | .linear {
  4 |   position: relative;
  5 |   overflow: hidden;
  6 |   width: 100%;
  7 |   background: var(--silver) none repeat scroll 0% 0%;
  8 |   height: .4rem;
  9 | }
 10 | .linear.indeterminate .value {
 11 |   transform-origin: center center;
 12 |   animation: linear-indeterminate-bar 1s linear infinite;
 13 | }
 14 | 
 15 | .buffer {
 16 |   
 17 | }
 18 | 
 19 | .value, .buffer {
 20 |   position: absolute;
 21 |   top: 0;
 22 |   right: 0;
 23 |   bottom: 0;
 24 |   left: 0;
 25 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /*$animation-curve-default;*/
 26 |   transform: scaleX(0);
 27 |   transform-origin: left center;
 28 | }
 29 | 
 30 | .value {
 31 |   composes: bg-primary from "../styles.css"
 32 | }
 33 | .buffer {
 34 |   background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)),
 35 |     linear-gradient(to right, var(--primary), var(--primary));
 36 | 
 37 | }
 38 | 
 39 | .circular {
 40 |   position: relative;
 41 |   display: inline-block;
 42 |   width: 60px;
 43 |   height: 60px;
 44 |   transform: rotate(-90deg);
 45 | }
 46 | .circular.indeterminate .circle {
 47 |   animation: circular-indeterminate-bar-rotate 2s linear infinite;
 48 | }
 49 | .circular.indeterminate .path {
 50 |   animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
 51 |   stroke-dasharray: 1.25, 250;
 52 |   stroke-dashoffset: 0;
 53 | }
 54 | .circular.multicolor .path {
 55 |   animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite,
 56 |   colors (1.5s * 4) ease-in-out infinite;
 57 | }
 58 | 
 59 | .circle {
 60 |   width: 100%;
 61 |   height: 100%;
 62 | }
 63 | 
 64 | .path {
 65 |   transition: stroke-dasharray .35s cubic-bezier(0.4, 0, 0.2, 1);
 66 |   fill: none;
 67 |   stroke-dasharray: 0, 500;
 68 |   stroke-dashoffset: 0;
 69 |   stroke-linecap: round;
 70 |   stroke-miterlimit: 20;
 71 |   stroke-width: 4;
 72 |   stroke: var(--primary);
 73 | }
 74 | 
 75 | .indeterminate {
 76 | 
 77 | }
 78 | 
 79 | .determinate {
 80 |   
 81 | }
 82 | 
 83 | @keyframes linear-indeterminate-bar {
 84 |   0% {
 85 |     transform: translate(-50%) scaleX(0);
 86 |   }
 87 | 
 88 |   50% {
 89 |     transform: translate(-0%) scaleX(.3);
 90 |   }
 91 | 
 92 |   100% {
 93 |     transform: translate(50%) scaleX(0);
 94 |   }
 95 | }
 96 | 
 97 | @keyframes circular-indeterminate-bar-rotate {
 98 |   100% {
 99 |     transform: rotate(360deg);
100 |   }
101 | }
102 | 
103 | @keyframes circular-indeterminate-bar-dash {
104 |   0% {
105 |     stroke-dasharray: 1.25, 250;
106 |     stroke-dashoffset: 0;
107 |   }
108 | 
109 |   50% {
110 |     stroke-dasharray: 111.25, 250;
111 |     stroke-dashoffset: -43.75;
112 |   }
113 | 
114 |   100% {
115 |     stroke-dasharray: 111.25, 250;
116 |     stroke-dashoffset: -155;
117 |   }
118 | }
119 | 
120 | @keyframes colors {
121 |   0% {
122 |     stroke: #4285f4;
123 |   }
124 | 
125 |   25% {
126 |     stroke: #de3e35;
127 |   }
128 | 
129 |   50% {
130 |     stroke: #f7c223;
131 |   }
132 | 
133 |   75% {
134 |     stroke: #1b9a59;
135 |   }
136 | 
137 |   100% {
138 |     stroke: #4285f4;
139 |   }
140 | }


--------------------------------------------------------------------------------
/src/ProgressBar/README.md:
--------------------------------------------------------------------------------
 1 | Basic ProgressBar:
 2 | 
 3 | 	<ProgressBar/>
 4 | 
 5 | Basic ProgressBar with custom color:
 6 | 
 7 |     <ProgressBar color="red"/>
 8 | 
 9 | Determinate ProgressBar:
10 |     
11 |     initialState = {value: 30}
12 |     increase = () => {
13 |         setState((prevState) => { 
14 |             return {value: prevState.value + 5}
15 |         });
16 |     }
17 |     decrease = () => {
18 |             setState((prevState) => { 
19 |                 return {value: prevState.value - 5}
20 |             });
21 |         }
22 |     <div>
23 |         <ProgressBar mode="determinate" value={state.value}/>
24 |         <br />
25 |         <Button primary onClick={decrease} style={{marginRight: "3px"}}>Decrease</Button>
26 |         <Button primary onClick={increase} style={{marginRight: "3px"}}>Increase</Button>
27 |         <br />
28 |         <br />
29 |         <Text>Progress: {state.value}%</Text>
30 |     </div>
31 | 
32 | ProgressBar with buffer:
33 | 
34 |     <ProgressBar mode="determinate" value={60} buffer={80}/>
35 | 
36 | Circular ProgressBar:
37 | 
38 |     <ProgressBar type="circular"/>
39 | 
40 | Circular determinate ProgressBar with custom color and style:
41 | 
42 |     initialState = {value: 30}
43 |     increase = () => {
44 |         setState((prevState) => { 
45 |             return {value: prevState.value + 10}
46 |         });
47 |     }
48 |     decrease = () => {
49 |         setState((prevState) => { 
50 |             return {value: prevState.value - 10}
51 |         });
52 |     }
53 | 
54 |     <div>
55 |         <ProgressBar type="circular" mode="determinate" value={state.value} color="#4da547" style={{height:175, width:175}}/>
56 |         <br/>
57 |         <Button primary small onClick={decrease} style={{marginRight: "3px"}}>Decrease</Button>
58 |         <Button primary small onClick={increase} style={{marginRight: "3px"}}>Increase</Button>
59 |     </div>
60 | 
61 | 


--------------------------------------------------------------------------------
/src/ProgressBar/__tests__/__snapshots__/progressBar.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test correct render Test correct render circular 1`] = `
 4 | <div
 5 |   aria-valuemax={100}
 6 |   aria-valuemin={0}
 7 |   aria-valuenow={0}
 8 |   className="circular indeterminate"
 9 |   style={undefined}
10 | >
11 |   <svg
12 |     className="circle"
13 |     viewBox="0 0 60 60"
14 |   >
15 |     <circle
16 |       className="path"
17 |       cx="30"
18 |       cy="30"
19 |       r="25"
20 |       style={
21 |         Object {
22 |           "stroke": undefined,
23 |         }
24 |       }
25 |     />
26 |   </svg>
27 | </div>
28 | `;
29 | 
30 | exports[`Test correct render Test correct render default linear 1`] = `
31 | <div
32 |   aria-valuemax={100}
33 |   aria-valuemin={0}
34 |   aria-valuenow={0}
35 |   className="linear indeterminate"
36 |   style={undefined}
37 | >
38 |   <div>
39 |     <span
40 |       className="buffer"
41 |       data-ref="buffer"
42 |       style={undefined}
43 |     />
44 |     <span
45 |       className="value"
46 |       data-ref="value"
47 |       style={
48 |         Object {
49 |           "backgroundColor": undefined,
50 |         }
51 |       }
52 |     />
53 |   </div>
54 | </div>
55 | `;
56 | 


--------------------------------------------------------------------------------
/src/ProgressBar/index.js:
--------------------------------------------------------------------------------
1 | import ProgressBar from "./ProgressBar.js";
2 | export { ProgressBar };
3 | 


--------------------------------------------------------------------------------
/src/Radio/README.md:
--------------------------------------------------------------------------------
 1 | The Radio component is a controlled component that must be used within the RadioGroup component. For more examples view the RadioGroup examples.
 2 | 
 3 | ###### Default Radio:
 4 | 
 5 |     <RadioGroup name="radioTest">
 6 | 			<Radio label="Option 1" value="first"/>
 7 | 			<Radio label="Option 2" value="second"/>
 8 | 		</RadioGroup>
 9 | 
10 | ###### Disabled Radio:
11 | 
12 |     <RadioGroup name="disabledTest">
13 | 			<Radio label="Option 1" value="first"/>
14 | 			<Radio label="Option 2" value="second" disabled/>
15 | 			<Radio label="Option 3" value="third"/>
16 | 		</RadioGroup>
17 | 
18 | ###### Hidden Radio:
19 | 
20 |     <RadioGroup name="hiddenTest">
21 | 			<Radio label="Option 1" value="first"/>
22 | 			<Radio label="Option 2" value="second" hidden/>
23 | 			<Radio label="Option 3" value="third"/>
24 | 		</RadioGroup>
25 | 
26 | ###### Radio with left-positioned label:
27 | 
28 |     <RadioGroup name="leftLabelTest">
29 | 			<Radio label="Option 1" labelPosition="left" value="first"/>
30 | 			<Radio label="Option 2" value="second"/>
31 | 		</RadioGroup>
32 | 
33 | ###### Custom onClick method:
34 | 
35 |     <RadioGroup name="onClickTest">
36 | 			<Radio label="Custom onClick" value="first" onClick={ (e, data) => { console.log(data.index, data.value) } }/>
37 | 			<Radio label="Normal Radio" value="second"/>
38 | 		</RadioGroup>
39 | 
40 | ###### Custom onChange method:
41 | 
42 |     <RadioGroup name="onChangeTest">
43 | 			<Radio label="Custom onChange" value="first" onChange={ (data) => { console.log(data.checked, data.value) } }/>
44 | 			<Radio label="Normal Radio" value="second"/>
45 | 		</RadioGroup>
46 | 
47 | ###### Custom function before change:
48 | 
49 |     <RadioGroup name="onBeforeChangeTest">
50 | 			<Radio 
51 | 				label="Custom onBeforeChange"
52 | 				value="first" 
53 | 				onBeforeChange={ function(e, data){ if (!data.checked) { let accept = confirm("Do you want to check this?"); return accept; } return true; } }/>
54 | 			<Radio label="Normal Radio" value="second"/>
55 | 		</RadioGroup>
56 | 


--------------------------------------------------------------------------------
/src/Radio/Radio.css:
--------------------------------------------------------------------------------
  1 | @import '../styles/variables.css';
  2 | 
  3 | .disabled {
  4 |     composes: default-text from '../styles.css';
  5 | }
  6 | 
  7 | .relative {
  8 |     position: relative;
  9 | }
 10 | 
 11 | .padding {
 12 |     padding-bottom: 5px;
 13 | }
 14 | 
 15 | .input {
 16 |     composes: relative;
 17 |     top: 1px;
 18 | }
 19 | 
 20 | .radio {
 21 |     position: absolute;
 22 |     top: 0;
 23 |     left: 0;
 24 |     height: 16px;
 25 |     width: 16px;
 26 |     display: inline-block;
 27 |     composes: cursor-pointer from '../styles.css';
 28 |     composes: default-border from '../styles.css';
 29 |     composes: circle from '../styles.css';
 30 |     background: -webkit-linear-gradient(#fff, #e6e6e6); /* For Safari 5.1 to 6.0 */
 31 |     background: -o-linear-gradient(#fff, #e6e6e6); /* For Opera 11.1 to 12.0 */
 32 |     background: -moz-linear-gradient(#fff, #e6e6e6); /* For Firefox 3.6 to 15 */
 33 |     background: linear-gradient(#fff, #e6e6e6); /* Standard syntax */
 34 | }
 35 | 
 36 | .disabled {
 37 |     opacity: 0.65;
 38 |     composes: cursor-not-allowed from '../styles.css';
 39 |     pointer-events: none;
 40 | }
 41 | 
 42 | .hidden {
 43 |     display: none;
 44 |     visibility: hidden;
 45 | }
 46 | 
 47 | .checked {
 48 |     composes: radio;
 49 |     composes: white-inset-shadow from '../styles.css';
 50 |     background: var(--primary);
 51 | }
 52 | 
 53 | .focus {
 54 |     box-shadow: 0 0 6px rgba(35, 173, 255, 1);
 55 | }
 56 | 
 57 | .checkmark {
 58 |     composes: relative;
 59 |     top: 0px;
 60 | }
 61 | 
 62 | .error {
 63 |     border: solid 1px var(--error);
 64 | }
 65 | 
 66 | .label {
 67 |     composes: default-font from '../styles.css';
 68 |     cursor: pointer;
 69 |     white-space: nowrap;
 70 |     padding-right: 5px;
 71 |     margin-left: 5px;
 72 | }
 73 | 
 74 | .label_left {
 75 |     composes: label;
 76 |     padding-right: 5px;
 77 |     margin-left: 0;
 78 |     margin-right: 5px;
 79 | }
 80 | 
 81 | .inline_block {
 82 |     display: inline-block;
 83 | }
 84 | 
 85 | .radio_padding {
 86 |     padding: 7px 10px 0 0;
 87 | }
 88 | 
 89 | .float_left {
 90 |     float: left;
 91 |     padding-right: 3px;
 92 | }
 93 | 
 94 | .float_right {
 95 |     float: right;
 96 |     padding-left: 3px;
 97 |     position: relative;
 98 | }
 99 | 
100 | .input_style {
101 |     opacity: 0; /*this needs to stay here to avoid display issues in IE*/
102 | }


--------------------------------------------------------------------------------
/src/Radio/__tests__/__snapshots__/radio.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Radio component render Render correctly 1`] = `
 4 | <div
 5 |   className="inline_block radio_padding"
 6 |   onClick={[Function]}
 7 |   style={undefined}
 8 | >
 9 |   <div
10 |     className="inline_block relative padding"
11 |   >
12 |     <label
13 |       className="class label"
14 |       htmlFor={undefined}
15 |       title="TITLE"
16 |     >
17 |       Checked Radio
18 |     </label>
19 |     <div
20 |       className="float_left"
21 |     >
22 |       <input
23 |         checked={undefined}
24 |         className="input_style"
25 |         defaultChecked={true}
26 |         disabled={false}
27 |         hidden={false}
28 |         id={undefined}
29 |         name="Mr radio"
30 |         onChange={[Function]}
31 |         type="radio"
32 |         value="checkedRadio"
33 |       />
34 |       <div
35 |         className="radio"
36 |       />
37 |     </div>
38 |   </div>
39 | </div>
40 | `;
41 | 


--------------------------------------------------------------------------------
/src/Radio/index.js:
--------------------------------------------------------------------------------
1 | import Radio from "./Radio.js";
2 | export { Radio };
3 | 


--------------------------------------------------------------------------------
/src/RadioGroup/README.md:
--------------------------------------------------------------------------------
 1 | RadioGroup:
 2 | 
 3 |     <RadioGroup inline name="radioGroupTest" title="Radio Group">
 4 | 			<Radio label="Option 1" value="first"/>
 5 | 			<Radio label="Option 2" value="second"/>
 6 | 		</RadioGroup>
 7 | 
 8 | RadioGroup with selected Radio:
 9 | 
10 |     <RadioGroup inline name="selectedRadioGroupTest" title="Radio Group" selectedIndex={1}>
11 | 			<Radio label="Option 1" value="first"/>
12 | 			<Radio label="Option 2" value="second"/>
13 | 		</RadioGroup>
14 | 
15 | Inline RadioGroup:
16 | 
17 | 		<div>    
18 | 	    <RadioGroup title="Radio Group One" inline name="inlineRadioGroupTest">
19 | 				<Radio label="Option 1" value="first"/>
20 | 				<Radio label="Option 2" value="second"/>
21 | 			</RadioGroup>
22 | 			<RadioGroup title="Radio Group Two" inline name="inlineRadioGroupTest2">
23 | 				<Radio label="Option 1" value="first"/>
24 | 				<Radio label="Option 2" value="second"/>
25 | 			</RadioGroup>
26 | 		</div>
27 | 
28 | RadioGroup with inline Children:
29 | 
30 |     <RadioGroup title="Radio Group" inlineChildren name="inlineChildrenRadioGroupTest">
31 | 			<Radio label="Option 1" value="first"/>
32 | 			<Radio label="Option 2" value="second"/>
33 | 		</RadioGroup>
34 | 
35 | RadioGroup with custom onChange event:
36 | 
37 |     <RadioGroup inline name="onChangeradioGroupTest" title="Radio Group" onChange={ (e, index) => { console.log(index) } }>
38 | 			<Radio label="Option 1" value="first"/>
39 | 			<Radio label="Option 2" value="second"/>
40 | 		</RadioGroup>
41 | 


--------------------------------------------------------------------------------
/src/RadioGroup/RadioGroup.css:
--------------------------------------------------------------------------------
 1 | .radioGroup {
 2 | 	composes: marg-0 from '../styles.css';
 3 | }
 4 | 
 5 | .header {
 6 | 	padding-bottom: 5px;
 7 | }
 8 | 
 9 | .headerFont {
10 | 	composes: header-font from '../styles.css';
11 | }
12 | 
13 | .block {
14 | 	composes: marg-b-1 from '../styles.css';
15 | 	display: block;
16 | 	line-height: 30px;
17 | }
18 | 
19 | .inline {
20 | 	composes: marg-r-2 from '../styles.css';
21 | 	display: inline-block;
22 | }
23 | 
24 | .disabled {
25 | 	composes: default-text from '../styles.css';
26 | }


--------------------------------------------------------------------------------
/src/RadioGroup/__tests__/radioGroup.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { Radio } from "../../Radio/index";
 4 | import { RadioGroup } from "../index";
 5 | 
 6 | import renderer from "react-test-renderer";
 7 | 
 8 | describe("Test RadioGroup component render", () => {
 9 |   it("Render correctly", () => {
10 |     const tree = renderer
11 |       .create(
12 |         <RadioGroup inline name="test">
13 |           <Radio label="Option 1" value="first" />
14 |           <Radio label="Option 2" value="second" />
15 |           <Radio label="Option 3" value="third" />
16 |           <Radio label="Option 4" value="fourth" />
17 |           <Radio label="Option 5" value="fifth" />
18 |           <Radio label="Option 6" value="sixth" />
19 |         </RadioGroup>
20 |       )
21 |       .toJSON();
22 |     expect(tree).toMatchSnapshot();
23 |   });
24 | });
25 | 
26 | describe("Testing radio component", () => {
27 |   it("RadioGroup - Basic test", function() {
28 |     mount(
29 |       <RadioGroup inline name="test" title="Title" classname="Class">
30 |         <Radio label="Option 1" value="first" />
31 |         <Radio label="Option 2" value="second" />
32 |       </RadioGroup>
33 |     );
34 |   });
35 | 
36 |   it("RadioGroup - Change selection test", function() {
37 |     const result = mount(
38 |       <RadioGroup inline name="test">
39 |         <Radio label="Option 1" value="first" />
40 |         <Radio label="Option 2" value="second" />
41 |         <Radio label="Option 3" value="third" />
42 |         <Radio label="Option 4" value="fourth" />
43 |         <Radio label="Option 5" value="fifth" />
44 |         <Radio label="Option 6" value="sixth" />
45 |       </RadioGroup>
46 |     );
47 |     expect(result.state().checkedRadio).toEqual(0);
48 | 
49 |     result
50 |       .find(Radio)
51 |       .last()
52 |       .simulate("click");
53 |     expect(result.state().checkedRadio).toEqual(5);
54 | 
55 |     result
56 |       .find(Radio)
57 |       .first()
58 |       .simulate("click");
59 |     expect(result.state().checkedRadio).toEqual(0);
60 |   });
61 | 
62 |   it("RadioGroup - Change props ", function() {
63 |     const result = mount(
64 |       <RadioGroup inline name="test">
65 |         <Radio label="Option 1" value="first" />
66 |         <Radio label="Option 2" value="second" />
67 |         <Radio label="Option 3" value="third" />
68 |         <Radio label="Option 4" value="fourth" />
69 |         <Radio label="Option 5" value="fifth" />
70 |         <Radio label="Option 6" value="sixth" />
71 |       </RadioGroup>
72 |     );
73 |     result.setProps({ "name": "Name" });
74 | 
75 |     result
76 |       .find(Radio)
77 |       .last()
78 |       .simulate("click");
79 |     expect(result.state().checkedRadio).toEqual(5);
80 | 
81 |     result.setProps({ "selectedIndex": 1 });
82 |     expect(result.state().checkedRadio).toEqual(1);
83 |   });
84 | });
85 | 


--------------------------------------------------------------------------------
/src/RadioGroup/index.js:
--------------------------------------------------------------------------------
1 | import RadioGroup from "./RadioGroup.js";
2 | export { RadioGroup };
3 | 


--------------------------------------------------------------------------------
/src/Switch/README.md:
--------------------------------------------------------------------------------
 1 | ###### Default Switch:
 2 |     <Switch/>
 3 | 
 4 | ###### Default Switch with label:
 5 | 
 6 |     <Switch label="This is a Switch"/>
 7 | 
 8 | ###### Default Switch with label to left:
 9 | 
10 |     <Switch label="This is a Switch" leftLabel/>
11 | 
12 | ###### Different sized Switches:
13 | 
14 |     <div>
15 |       <Switch small/>
16 |       <Switch medium/>
17 |       <Switch large/>
18 |     </div>
19 | 
20 | ###### Multiple Switches tied to same behavior (name prop):
21 | 
22 |     <div>
23 |       <Switch name="customFeature"/>
24 |       <Switch name="customFeature"/>
25 |       <Switch name="customFeature"/>
26 |     </div>
27 | 
28 | ###### Switch with custom colors and styles:
29 | 
30 |     <div>
31 |       <Switch onColor="#00bbaa" style={{display:"inline-block"}}/>
32 |       <Switch onColor="#f46542" style={{display:"inline-block"}}/>
33 |     </div>
34 | 
35 | ###### Disabled and hidden Switches:
36 | 
37 |     <div>
38 |       <Switch disabled/>
39 |       <Switch hidden/>
40 |     </div>
41 | 
42 | ###### Switch with onClick:
43 | 
44 |     function customSwitchClick() {
45 |         console.info("onClick event!");
46 |     }
47 | 
48 |     <Switch onClick={customSwitchClick}/>
49 | 
50 | ###### Switch with onChange:
51 | 
52 |     function customSwitchChange() {
53 |         console.info("onChange event!");
54 |     }
55 | 
56 |     <Switch onChange={customSwitchChange}/>
57 | 
58 | ###### Make checks before changing component's state (onbeforechange). It receives a value with current checked state:
59 | 
60 |     function customSwitchBeforeChange(value) {
61 |         if(!value) {
62 |           let accept = confirm("Do you want to check this?");
63 |           return accept;
64 |         }
65 | 
66 |         return true;
67 |     }
68 | 
69 |     <Switch onBeforeChange={customSwitchBeforeChange}/>
70 | 
71 | This method should return true or false, allowing or not the onChange handler to be fired. If undefined, will prevent it.
72 | 
73 | 
74 | 


--------------------------------------------------------------------------------
/src/Switch/__tests__/__snapshots__/switch.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test switch component render Render correctly 1`] = `
 4 | <div
 5 |   className="Class switch"
 6 | >
 7 |   <div
 8 |     className="sliderMedium sliderEnabledOffColor"
 9 |     onClick={[Function]}
10 |     style={undefined}
11 |   >
12 |     <input
13 |       checked={false}
14 |       className="inputMedium"
15 |       disabled={false}
16 |       hidden={false}
17 |       id="ID"
18 |       name="Name"
19 |       onChange={[Function]}
20 |       onClick={[Function]}
21 |       type="checkbox"
22 |     />
23 |     <div
24 |       className="handleMedium handleEnabledColor"
25 |       style={
26 |         Object {
27 |           "background": "grey",
28 |         }
29 |       }
30 |     />
31 |     <div
32 |       className="onColorMedium"
33 |       style={
34 |         Object {
35 |           "background": "black",
36 |         }
37 |       }
38 |     />
39 |   </div>
40 | </div>
41 | `;
42 | 


--------------------------------------------------------------------------------
/src/Switch/index.js:
--------------------------------------------------------------------------------
1 | import Switch from "./Switch.js";
2 | export { Switch };
3 | 


--------------------------------------------------------------------------------
/src/Tab/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/src/Tab/README.md


--------------------------------------------------------------------------------
/src/Tab/Tab.css:
--------------------------------------------------------------------------------
 1 | @import '../styles/variables.css';
 2 | 
 3 | .tab {
 4 |   composes: bg-silver from '../styles.css';
 5 |   composes: sky-blue from '../styles.css';
 6 |   composes: border-colorless from '../styles.css';
 7 |   composes: border-transparent from '../styles.css';
 8 |   composes: border-bottom-none from '../styles.css';
 9 |   composes: marg-r-half from '../styles.css';
10 |   composes: pad-v-1 from '../styles.css';
11 |   composes: pad-h-2 from '../styles.css';
12 |   composes: cursor-pointer from '../styles.css';
13 |   border-top: 1px solid var(--white);
14 |   display: inline-block;
15 |   position: relative;
16 |   list-style: none;
17 | }
18 | 
19 | .vTab {
20 |   composes: bg-silver from '../styles.css';
21 |   composes: sky-blue from '../styles.css';
22 |   composes: border-colorless from '../styles.css';
23 |   composes: border-transparent from '../styles.css';
24 |   composes: border-right-none from '../styles.css';
25 |   composes: marg-b-half from '../styles.css';
26 |   composes: pad-v-2 from '../styles.css';
27 |   composes: pad-h-1 from '../styles.css';
28 |   composes: cursor-pointer from '../styles.css';
29 |   border-left: 1px solid var(--white);
30 |   display: block;
31 |   position: relative;
32 |   list-style: none;
33 | }
34 | 
35 | .selected {
36 |   composes: bg-white from '../styles.css';
37 |   composes: dark-gray from '../styles.css';
38 |   border-color: var(--gray) !important; /* Important designation added for production build */
39 |   bottom: -1px;
40 | }
41 | 
42 | .vSelected {
43 |   composes: bg-white from '../styles.css';
44 |   composes: dark-gray from '../styles.css';
45 |   border-color: var(--gray) !important; /* Important designation added for production build */
46 |   right: -1px;
47 | }
48 | 
49 | .disabled {
50 |   composes: bg-white from '../styles.css';
51 |   composes: cursor-default from '../styles.css';
52 |   composes: dark-gray from '../styles.css';
53 | }
54 | 
55 | .icon-left {
56 |   margin-right: 0.25rem;
57 | }


--------------------------------------------------------------------------------
/src/Tab/Tab.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import PropTypes from "prop-types";
  3 | import cx from "classnames";
  4 | import CSSModules from "react-css-modules";
  5 | import styles from "./Tab.css";
  6 | 
  7 | /**
  8 |  * Tab component
  9 |  */
 10 | export class Tab extends React.PureComponent {
 11 |   constructor(props) {
 12 |     super(props);
 13 | 
 14 |     // Initial state
 15 |     this.state = {
 16 |       selected: this.props.selected,
 17 |       disabled: this.props.disabled
 18 |     };
 19 |   }
 20 | 
 21 |   UNSAFE_componentWillReceiveProps = nextProps => {
 22 |     if (nextProps.selected !== this.props.selected) {
 23 |       this.setState({ selected: nextProps.selected });
 24 |     }
 25 |   };
 26 | 
 27 |   _handleClick = event => {
 28 |     let selected = this.props.tabIndex;
 29 | 
 30 |     if (!this.state.disabled) {
 31 |       this.props.setSelectedTab(selected, event);
 32 |     }
 33 |   };
 34 | 
 35 |   render() {
 36 |     const { className, children, vertical, icon, style } = this.props;
 37 | 
 38 |     let tabClasses = cx({
 39 |       tab: !vertical,
 40 |       vTab: vertical,
 41 |       selected: this.state.selected && !vertical,
 42 |       vSelected: this.state.selected && vertical,
 43 |       disabled: this.state.disabled
 44 |     });
 45 | 
 46 |     return (
 47 |       <li
 48 |         className={cx(className)}
 49 |         styleName={tabClasses}
 50 |         style={style}
 51 |         onClick={this._handleClick}
 52 |       >
 53 |         {icon ? <i className={cx(icon, "ra_Tab__icon-left")} /> : null}
 54 |         {children}
 55 |       </li>
 56 |     );
 57 |   }
 58 | }
 59 | 
 60 | Tab.propTypes = {
 61 |   /**
 62 |    * Child components or elements to be displayed as the title on Tab.
 63 |    */
 64 |   children: PropTypes.node,
 65 | 
 66 |   /**
 67 |    * An object, array, or string of CSS classes to apply to Tab.
 68 |    */
 69 |   className: PropTypes.oneOfType([
 70 |     PropTypes.string,
 71 |     PropTypes.object,
 72 |     PropTypes.array
 73 |   ]),
 74 | 
 75 |   /**
 76 |    * When true, Tab sill be disabled.
 77 |    */
 78 |   disabled: PropTypes.bool,
 79 | 
 80 |   /**
 81 |    * The CSS class name for the icon that will be displayed on Tab.
 82 |    */
 83 |   icon: PropTypes.string,
 84 | 
 85 |   /**
 86 |    * When true, Tab will be selected.
 87 |    */
 88 |   selected: PropTypes.bool,
 89 | 
 90 |   /**
 91 |    * Function to be executed when a Tab is selected.
 92 |    */
 93 |   setSelectedTab: PropTypes.func,
 94 | 
 95 |   /**
 96 |    * Pass inline styling here.
 97 |    */
 98 |   style: PropTypes.object,
 99 | 
100 |   /**
101 |    * Tab index.
102 |    */
103 |   tabIndex: PropTypes.number,
104 | 
105 |   /**
106 |    * When true, Tabs will display vertically.
107 |    */
108 |   vertical: PropTypes.bool
109 | };
110 | 
111 | Tab.defaultProps = {
112 |   selected: false,
113 |   disabled: false
114 | };
115 | 
116 | export default CSSModules(Tab, styles, { allowMultiple: true });
117 | 


--------------------------------------------------------------------------------
/src/Tab/__tests__/__snapshots__/tab.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Tab component Test render correctly 1`] = `
 4 | <li
 5 |   className="tab"
 6 |   onClick={[Function]}
 7 |   style={undefined}
 8 | >
 9 |   My Tab
10 | </li>
11 | `;
12 | 


--------------------------------------------------------------------------------
/src/Tab/__tests__/tab.test.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { mount } from "enzyme";
  3 | import { Tab } from "../index";
  4 | import renderer from "react-test-renderer";
  5 | 
  6 | describe("Test Tab component", () => {
  7 |   it("Test render correctly", () => {
  8 |     const comp = <Tab>My Tab</Tab>;
  9 |     const tree = renderer.create(comp).toJSON();
 10 |     expect(tree).toMatchSnapshot();
 11 |   });
 12 | 
 13 |   it("applies className", () => {
 14 |     const tab = mount(<Tab className="myClass">My Tab</Tab>);
 15 | 
 16 |     expect(tab.find(".myClass").exists()).toBe(true);
 17 |   });
 18 | 
 19 |   it("sets defaults", () => {
 20 |     const tab = mount(<Tab>My Tab</Tab>);
 21 | 
 22 |     expect(tab.state().selected).toBe(false);
 23 |     expect(tab.state().disabled).toBe(false);
 24 |     expect(tab.props().selected).toBe(false);
 25 |     expect(tab.props().disabled).toBe(false);
 26 |   });
 27 | 
 28 |   it("applies disabled", () => {
 29 |     const tab = mount(<Tab disabled>My Tab</Tab>);
 30 | 
 31 |     expect(tab.state().disabled).toBe(true);
 32 |     expect(tab.props().disabled).toBe(true);
 33 |   });
 34 | 
 35 |   it("applies icon", () => {
 36 |     const tab = mount(<Tab icon="fa fa-github">My Tab</Tab>);
 37 | 
 38 |     expect(tab.find("i.fa.fa-github").exists()).toBe(true);
 39 |   });
 40 | 
 41 |   it("applies selected", () => {
 42 |     const tab = mount(<Tab selected>My Tab</Tab>);
 43 | 
 44 |     expect(tab.state().selected).toBe(true);
 45 |     expect(tab.props().selected).toBe(true);
 46 |   });
 47 | 
 48 |   it("handles setSelectedTab", () => {
 49 |     const handleSelect = jest.fn();
 50 |     const tab = mount(<Tab setSelectedTab={handleSelect}>My Tab</Tab>);
 51 | 
 52 |     tab.simulate("click");
 53 |     expect(handleSelect).toBeCalled();
 54 |   });
 55 | 
 56 |   it("does not call setSelectedTab when disabled", () => {
 57 |     const handleSelect = jest.fn();
 58 |     const tab = mount(
 59 |       <Tab disabled setSelectedTab={handleSelect}>
 60 |         My Tab
 61 |       </Tab>
 62 |     );
 63 | 
 64 |     tab.simulate("click");
 65 |     expect(handleSelect).not.toBeCalled();
 66 |   });
 67 | 
 68 |   it("applies style", () => {
 69 |     const tab = mount(<Tab style={{ color: "red" }}>My Tab</Tab>);
 70 | 
 71 |     expect(tab.find("li").props().style).toEqual({ color: "red" });
 72 |   });
 73 | 
 74 |   it("applies vertical", () => {
 75 |     const tab = mount(
 76 |       <Tab vertical selected>
 77 |         My Tab
 78 |       </Tab>
 79 |     );
 80 | 
 81 |     expect(tab.find(".vTab").exists()).toBe(true);
 82 |     expect(tab.find(".vSelected").exists()).toBe(true);
 83 |   });
 84 | 
 85 |   it("CWRP updates selected", () => {
 86 |     const tab = mount(
 87 |       <Tab vertical selected>
 88 |         My Tab
 89 |       </Tab>
 90 |     );
 91 |     //starting true to catch else branch
 92 |     expect(tab.state().selected).toBe(true);
 93 |     tab.setProps({ selected: true });
 94 |     expect(tab.state().selected).toBe(true);
 95 |     tab.setProps({ selected: false });
 96 |     expect(tab.state().selected).toBe(false);
 97 |     tab.setProps({ selected: true });
 98 |     expect(tab.state().selected).toBe(true);
 99 |   });
100 | });
101 | 


--------------------------------------------------------------------------------
/src/Tab/index.js:
--------------------------------------------------------------------------------
1 | import Tab from "./Tab.js";
2 | export { Tab };
3 | 


--------------------------------------------------------------------------------
/src/TabList/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/src/TabList/README.md


--------------------------------------------------------------------------------
/src/TabList/TabList.css:
--------------------------------------------------------------------------------
 1 | @import '../styles/variables.css';
 2 | 
 3 | .tabList {
 4 |   composes: marg-0 from '../styles.css';
 5 |   composes: pad-0 from '../styles.css';
 6 |   border-bottom: 1px solid var(--gray);
 7 | }
 8 | 
 9 | .vertical {
10 |   flex-grow: 1;
11 |   border-bottom: none;
12 |   border-right: 1px solid var(--gray);
13 | }


--------------------------------------------------------------------------------
/src/TabList/TabList.js:
--------------------------------------------------------------------------------
  1 | import React, { cloneElement } from "react";
  2 | import PropTypes from "prop-types";
  3 | import cx from "classnames";
  4 | import CSSModules from "react-css-modules";
  5 | import styles from "./TabList.css";
  6 | 
  7 | /**
  8 |  * TabList component
  9 |  */
 10 | export class TabList extends React.PureComponent {
 11 |   constructor(props) {
 12 |     super(props);
 13 | 
 14 |     // Initial state
 15 |     this.state = {
 16 |       selectedTab: this.props.selectedTab || 0
 17 |     };
 18 |   }
 19 | 
 20 |   UNSAFE_componentWillReceiveProps(nextProps) {
 21 |     if (nextProps.selectedTab !== this.props.selectedTab) {
 22 |       this.setState({ selectedTab: nextProps.selectedTab });
 23 |     }
 24 |   }
 25 | 
 26 |   _setSelectedTab = (index, event) => {
 27 |     this.setState({ selectedTab: index });
 28 |     this.props.setSelectedIndex(index, event);
 29 |   };
 30 | 
 31 |   render() {
 32 |     const { className, children, vertical, style } = this.props;
 33 | 
 34 |     const tabs = React.Children.map(children, (child, index) => {
 35 |       child = cloneElement(child, {
 36 |         tabIndex: index,
 37 |         selected: this.state.selectedTab === index,
 38 |         setSelectedTab: this._setSelectedTab,
 39 |         vertical: vertical
 40 |       });
 41 | 
 42 |       return child;
 43 |     });
 44 | 
 45 |     let tabListClasses = cx(
 46 |       {
 47 |         vertical
 48 |       },
 49 |       "tabList"
 50 |     );
 51 | 
 52 |     return (
 53 |       <ul className={cx(className)} styleName={tabListClasses} style={style}>
 54 |         {tabs}
 55 |       </ul>
 56 |     );
 57 |   }
 58 | }
 59 | 
 60 | TabList.propTypes = {
 61 |   /**
 62 |    * Will be automatically set when bordered prop is passed to Tabs component.
 63 |    *
 64 |    * @ignore
 65 |    */
 66 |   bordered: PropTypes.bool,
 67 | 
 68 |   /**
 69 |    * An object, array, or string of CSS classes to apply to TabPanel.
 70 |    */
 71 |   className: PropTypes.oneOfType([
 72 |     PropTypes.string,
 73 |     PropTypes.object,
 74 |     PropTypes.array
 75 |   ]),
 76 | 
 77 |   /**
 78 |    * Tab components that will be displayed in TabList.
 79 |    */
 80 |   children: PropTypes.node.isRequired,
 81 | 
 82 |   /**
 83 |    * Selected tab index (default 0 - first tab).
 84 |    */
 85 |   selectedTab: PropTypes.number,
 86 | 
 87 |   /**
 88 |    * Handler to execute when a tab is selected, in Tabs component.
 89 |    */
 90 |   setSelectedIndex: PropTypes.func,
 91 | 
 92 |   /**
 93 |    * Pass inline styling here.
 94 |    */
 95 |   style: PropTypes.object,
 96 | 
 97 |   /**
 98 |    * Will be automatically set when vertical prop is passed to Tabs component.
 99 |    */
100 |   vertical: PropTypes.bool
101 | };
102 | 
103 | export default CSSModules(TabList, styles, { allowMultiple: true });
104 | 


--------------------------------------------------------------------------------
/src/TabList/index.js:
--------------------------------------------------------------------------------
1 | import TabList from "./TabList.js";
2 | export { TabList };
3 | 


--------------------------------------------------------------------------------
/src/TabPanel/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/src/TabPanel/README.md


--------------------------------------------------------------------------------
/src/TabPanel/TabPanel.css:
--------------------------------------------------------------------------------
 1 | @import '../styles/variables.css';
 2 | 
 3 | .tabPanel {
 4 |   display: none;
 5 | }
 6 | 
 7 | .selected {
 8 |   display: block;
 9 | }
10 | 
11 | .bordered {
12 |   border: 1px solid var(--gray);
13 |   border-top: none;
14 |   padding: 1rem;
15 | }
16 | 
17 | .vertical {
18 |   flex-grow: 8;
19 |   border: 1px solid var(--gray);
20 |   border-left: none;
21 |   padding: 1rem;
22 | }


--------------------------------------------------------------------------------
/src/TabPanel/TabPanel.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import CSSModules from "react-css-modules";
 5 | import styles from "./TabPanel.css";
 6 | 
 7 | /**
 8 |  * TabPanel component
 9 |  */
10 | export class TabPanel extends React.PureComponent {
11 |   constructor(props) {
12 |     super(props);
13 | 
14 |     // Initial state
15 |     this.state = {
16 |       selected: this.props.selected || false
17 |     };
18 |   }
19 | 
20 |   UNSAFE_componentWillReceiveProps = nextProps => {
21 |     if (nextProps.selected !== this.props.selected) {
22 |       this.setState({ selected: nextProps.selected });
23 |     }
24 |   };
25 | 
26 |   render() {
27 |     const { className, children, bordered, vertical, style } = this.props;
28 | 
29 |     let tabPanelClasses = cx(
30 |       {
31 |         selected: this.state.selected,
32 |         bordered,
33 |         vertical
34 |       },
35 |       "tabPanel"
36 |     );
37 | 
38 |     return (
39 |       <div className={cx(className)} styleName={tabPanelClasses} style={style}>
40 |         {children}
41 |       </div>
42 |     );
43 |   }
44 | }
45 | 
46 | TabPanel.propTypes = {
47 |   /**
48 |    * Will be automatically set when bordered prop is passed to Tabs component.
49 |    */
50 |   bordered: PropTypes.bool,
51 | 
52 |   /**
53 |    * Text, components or elements that will be displayed as TabPanel content.
54 |    */
55 |   children: PropTypes.node,
56 | 
57 |   /**
58 |    * An object, array, or string of CSS classes to apply to TabPanel.
59 |    */
60 |   className: PropTypes.oneOfType([
61 |     PropTypes.string,
62 |     PropTypes.object,
63 |     PropTypes.array
64 |   ]),
65 | 
66 |   /**
67 |    * When true, TabPanel is selected.
68 |    */
69 |   selected: PropTypes.bool,
70 | 
71 |   /**
72 |    * Pass inline styling here.
73 |    */
74 |   style: PropTypes.object,
75 | 
76 |   /**
77 |    * Will be automatically set when vertical prop is passed to Tabs component.
78 |    */
79 |   vertical: PropTypes.bool
80 | };
81 | 
82 | export default CSSModules(TabPanel, styles, { allowMultiple: true });
83 | 


--------------------------------------------------------------------------------
/src/TabPanel/__tests__/__snapshots__/tabPanel.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test dropdown component Test render correctly 1`] = `
 4 | <div
 5 |   className="tabPanel"
 6 |   style={undefined}
 7 | >
 8 |   <h2>
 9 |     Content 1
10 |   </h2>
11 |   <p>
12 |     Tab content here
13 |   </p>
14 | </div>
15 | `;
16 | 


--------------------------------------------------------------------------------
/src/TabPanel/__tests__/tabPanel.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { TabPanel } from "../index";
 4 | import renderer from "react-test-renderer";
 5 | 
 6 | describe("Test dropdown component", () => {
 7 |   it("Test render correctly", () => {
 8 |     const comp = (
 9 |       <TabPanel>
10 |         <h2>Content 1</h2>
11 |         <p>Tab content here</p>
12 |       </TabPanel>
13 |     );
14 |     const tree = renderer.create(comp).toJSON();
15 |     expect(tree).toMatchSnapshot();
16 |   });
17 | 
18 |   it("renders border", () => {
19 |     const tp = mount(
20 |       <TabPanel bordered>
21 |         <h2>Content 1</h2>
22 |         <p>Tab content here</p>
23 |       </TabPanel>
24 |     );
25 | 
26 |     expect(tp.find(".bordered").exists()).toBe(true);
27 |   });
28 | 
29 |   it("renders vertical", () => {
30 |     const tp = mount(
31 |       <TabPanel vertical>
32 |         <h2>Content 1</h2>
33 |         <p>Tab content here</p>
34 |       </TabPanel>
35 |     );
36 | 
37 |     expect(tp.find(".vertical").exists()).toBe(true);
38 |   });
39 | 
40 |   it("applies className", () => {
41 |     const tp = mount(
42 |       <TabPanel className="myClass">
43 |         <h2>Content 1</h2>
44 |         <p>Tab content here</p>
45 |       </TabPanel>
46 |     );
47 | 
48 |     expect(tp.find(".myClass").exists()).toBe(true);
49 |   });
50 | 
51 |   it("applies style", () => {
52 |     const tp = mount(
53 |       <TabPanel className="myClass" style={{ color: "red" }}>
54 |         <h2>Content 1</h2>
55 |         <p>Tab content here</p>
56 |       </TabPanel>
57 |     );
58 |     expect(tp.find("div.myClass").props().style).toEqual({ color: "red" });
59 |   });
60 | 
61 |   it("handles defaults", () => {
62 |     const tp = mount(
63 |       <TabPanel>
64 |         <h2>Content 1</h2>
65 |         <p>Tab content here</p>
66 |       </TabPanel>
67 |     );
68 | 
69 |     expect(tp.find(".bordered").exists()).not.toBe(true);
70 |     expect(tp.find(".vertical").exists()).not.toBe(true);
71 |     expect(tp.state().selected).toBe(false);
72 |   });
73 | 
74 |   it("CWRP updates selected", () => {
75 |     const tp = mount(
76 |       <TabPanel>
77 |         <h2>Content 1</h2>
78 |         <p>Tab content here</p>
79 |       </TabPanel>
80 |     );
81 | 
82 |     expect(tp.state().selected).toBe(false);
83 |     tp.setProps({ selected: true });
84 |     expect(tp.state().selected).toBe(true);
85 |     tp.setProps({ selected: false });
86 |     expect(tp.state().selected).toBe(false);
87 |     //again to get the else branch
88 |     tp.setProps({ selected: false });
89 |     expect(tp.state().selected).toBe(false);
90 |   });
91 | });
92 | 


--------------------------------------------------------------------------------
/src/TabPanel/index.js:
--------------------------------------------------------------------------------
1 | import TabPanel from "./TabPanel.js";
2 | export { TabPanel };
3 | 


--------------------------------------------------------------------------------
/src/Table/Table.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import { BootstrapTable } from "react-bootstrap-table";
 5 | import CSSModules from "react-css-modules";
 6 | import styles from "./Table.css";
 7 | 
 8 | /**
 9 |  * The most common Table props are documented below. Documentation for the other props can be found at: https://github.com/AllenFang/react-bootstrap-table
10 |  */
11 | export class Table extends React.PureComponent {
12 |   render() {
13 |     const {
14 |       className,
15 |       children,
16 |       data,
17 |       options,
18 |       maxHeight,
19 |       search,
20 |       pagination,
21 |       style,
22 |       ...props
23 |     } = this.props;
24 | 
25 |     return (
26 |       <BootstrapTable
27 |         style={style}
28 |         {...props}
29 |         search={search}
30 |         data={data}
31 |         options={options}
32 |         pagination={pagination}
33 |         maxHeight={maxHeight}
34 |         className={cx(className)}
35 |         containerClass={"ra_Table__react-bs-table-container"}
36 |         tableContainerClass={"ra_Table__react-bs-table"}
37 |         headerContainerClass={"ra_Table__react-bs-container-header"}
38 |         bodyContainerClass={"ra_Table__react-bs-container-body"}
39 |       >
40 |         {children}
41 |       </BootstrapTable>
42 |     );
43 |   }
44 | }
45 | 
46 | Table.propTypes = {
47 |   search: PropTypes.bool,
48 |   children: PropTypes.any.isRequired,
49 |   data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
50 |   pagination: PropTypes.bool,
51 |   options: PropTypes.shape({
52 |     defaultSortName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
53 |     defaultSortOrder: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
54 |   }),
55 |   /** An Object, array, or string of CSS classes to apply to Table.*/
56 |   className: PropTypes.oneOfType([
57 |     PropTypes.string,
58 |     PropTypes.object,
59 |     PropTypes.array
60 |   ]),
61 |   maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
62 |   /**
63 |    * Pass inline styling here.
64 |    */
65 |   style: PropTypes.object
66 | };
67 | 
68 | Table.defaultProps = {
69 |   pagination: false,
70 |   options: {
71 |     defaultSortName: "",
72 |     defaultSortOrder: ""
73 |   }
74 | };
75 | 
76 | export default CSSModules(Table, styles, { allowMultiple: true });
77 | 


--------------------------------------------------------------------------------
/src/Table/index.js:
--------------------------------------------------------------------------------
1 | import Table from "./Table.js";
2 | export { Table };
3 | 


--------------------------------------------------------------------------------
/src/TableHeader/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/src/TableHeader/README.md


--------------------------------------------------------------------------------
/src/TableHeader/TableHeader.css:
--------------------------------------------------------------------------------
1 | @import '../styles/variables.css';
2 | .column:hover {
3 |   background-color: var(--silver);
4 | }
5 | 


--------------------------------------------------------------------------------
/src/TableHeader/TableHeader.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import { TableHeaderColumn } from "react-bootstrap-table";
 5 | import CSSModules from "react-css-modules";
 6 | import styles from "./TableHeader.css";
 7 | 
 8 | export class TableHeader extends React.PureComponent {
 9 |   render() {
10 |     const {
11 |       className,
12 |       children,
13 |       dataSort,
14 |       isKey,
15 |       searchable,
16 |       style,
17 |       ...props
18 |     } = this.props;
19 |     return (
20 |       <TableHeaderColumn
21 |         style={style}
22 |         dataSort={dataSort}
23 |         isKey={isKey}
24 |         searchable={searchable}
25 |         className={cx(className)}
26 |         tableHeaderClass={"row-hover"}
27 |         {...props}
28 |       >
29 |         {children}
30 |       </TableHeaderColumn>
31 |     );
32 |   }
33 | }
34 | 
35 | TableHeader.propTypes = {
36 |   dataField: PropTypes.string,
37 |   isKey: PropTypes.bool,
38 |   dataSort: PropTypes.bool,
39 |   searchable: PropTypes.bool,
40 |   /** Pass inline styling here. */
41 |   style: PropTypes.object,
42 |   /** An Object, array, or string of CSS classes to apply to TableHeader.*/
43 |   className: PropTypes.oneOfType([
44 |     PropTypes.string,
45 |     PropTypes.object,
46 |     PropTypes.array
47 |   ]),
48 |   children: PropTypes.any
49 | };
50 | 
51 | TableHeader.defaultProps = {
52 |   isKey: false,
53 |   dataSort: false,
54 |   searchable: true
55 | };
56 | 
57 | export default CSSModules(TableHeader, styles, { allowMultiple: true });
58 | 


--------------------------------------------------------------------------------
/src/TableHeader/index.js:
--------------------------------------------------------------------------------
1 | import TableHeader from "./TableHeader.js";
2 | export { TableHeader };
3 | 


--------------------------------------------------------------------------------
/src/Tabs/Tabs.css:
--------------------------------------------------------------------------------
1 | .tabs {
2 |     composes: default-font from '../styles.css';
3 |     font-size: 1rem;
4 | }
5 | 
6 | .vertical {
7 |     display: flex;
8 |     flex: 0 0 100%;
9 | }


--------------------------------------------------------------------------------
/src/Tabs/__tests__/__snapshots__/tabs.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`Test dropdown component Test render correctly 1`] = `
  4 | <div
  5 |   className="tabs"
  6 |   style={undefined}
  7 | >
  8 |   <ul
  9 |     className="tabList"
 10 |     style={undefined}
 11 |   >
 12 |     <li
 13 |       className="tab selected"
 14 |       onClick={[Function]}
 15 |       style={undefined}
 16 |     >
 17 |       Tab 1
 18 |     </li>
 19 |     <li
 20 |       className="tab"
 21 |       onClick={[Function]}
 22 |       style={undefined}
 23 |     >
 24 |       Tab 2
 25 |     </li>
 26 |     <li
 27 |       className="tab"
 28 |       onClick={[Function]}
 29 |       style={undefined}
 30 |     >
 31 |       Tab 3
 32 |     </li>
 33 |     <li
 34 |       className="tab"
 35 |       onClick={[Function]}
 36 |       style={undefined}
 37 |     >
 38 |       Tab 4
 39 |     </li>
 40 |     <li
 41 |       className="tab"
 42 |       onClick={[Function]}
 43 |       style={undefined}
 44 |     >
 45 |       Tab 5
 46 |     </li>
 47 |   </ul>
 48 |   <div
 49 |     className="selected tabPanel"
 50 |     style={undefined}
 51 |   >
 52 |     <h2>
 53 |       Content 1
 54 |     </h2>
 55 |     <p>
 56 |       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet lorem sit amet finibus rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada
 57 |        
 58 |       <a
 59 |         href="http://lipsum.com"
 60 |       >
 61 |         fames ac turpis egestas
 62 |       </a>
 63 |        et siem.
 64 |     </p>
 65 |   </div>
 66 |   <div
 67 |     className="tabPanel"
 68 |     style={undefined}
 69 |   >
 70 |     <h2>
 71 |       Content 2
 72 |     </h2>
 73 |     <p>
 74 |       Tab content here
 75 |     </p>
 76 |   </div>
 77 |   <div
 78 |     className="tabPanel"
 79 |     style={undefined}
 80 |   >
 81 |     <h2>
 82 |       Content 3
 83 |     </h2>
 84 |     <p>
 85 |       Tab content here
 86 |     </p>
 87 |   </div>
 88 |   <div
 89 |     className="tabPanel"
 90 |     style={undefined}
 91 |   >
 92 |     <h2>
 93 |       Content 4
 94 |     </h2>
 95 |     <p>
 96 |       Tab content here
 97 |     </p>
 98 |   </div>
 99 |   <div
100 |     className="tabPanel"
101 |     style={undefined}
102 |   >
103 |     <h2>
104 |       Content 5
105 |     </h2>
106 |     <p>
107 |       Tab content here
108 |     </p>
109 |   </div>
110 | </div>
111 | `;
112 | 


--------------------------------------------------------------------------------
/src/Tabs/index.js:
--------------------------------------------------------------------------------
1 | import Tabs from "./Tabs.js";
2 | export { Tabs };
3 | 


--------------------------------------------------------------------------------
/src/Task/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DigitalRiver/react-atlas/000cec1fb24dfcec99060529baf7185ff4382a27/src/Task/README.md


--------------------------------------------------------------------------------
/src/Task/Task.css:
--------------------------------------------------------------------------------
 1 | @import '../styles/variables.css';
 2 | .task {
 3 | 	display: inline-block;
 4 | 	text-align: center;
 5 | 	position: relative;
 6 | }
 7 | 
 8 | .taskLink {
 9 | 	composes: default-font from '../styles.css';
10 | 	composes: dark-gray from '../styles.css';
11 |   	font-size: 19px;
12 | 	line-height: 27px;
13 | 	text-decoration:none;
14 | 	padding-right: 45px;
15 | 	padding-left: 45px;
16 | 	padding-top: 11.5px;
17 | 	padding-bottom: 11.5px;
18 | 	display: inline-block;
19 | 	cursor: pointer;
20 | 	text-align: center;
21 | 	position: relative;
22 | }
23 | 
24 | .taskLink:hover {
25 | 	color: var(--primary);
26 | }
27 | 
28 | .selected {
29 | 	composes: primary from '../styles.css';
30 | 	cursor: default;
31 | }
32 | 
33 | .borderTop {
34 | 	composes: taskbar-border-top from '../styles.css';
35 | }
36 | 
37 | .icon-left {
38 |   	margin-right: 0.25rem;
39 |   	vertical-align: middle;
40 | }


--------------------------------------------------------------------------------
/src/Task/Task.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import CSSModules from "react-css-modules";
 5 | import styles from "./Task.css";
 6 | 
 7 | export class Task extends React.PureComponent {
 8 |   constructor(props) {
 9 |     super(props);
10 |   }
11 | 
12 |   render() {
13 |     const {
14 |       className,
15 |       icon,
16 |       id,
17 |       index,
18 |       onClick,
19 |       selected,
20 |       style,
21 |       title
22 |     } = this.props;
23 | 
24 |     const taskLinkClasses = cx({
25 |       taskLink: true,
26 |       selected: selected
27 |     });
28 | 
29 |     return (
30 |       <span
31 |         id={id}
32 |         style={style}
33 |         className={cx(className)}
34 |         styleName={taskLinkClasses}
35 |         onClick={e => {
36 |           if (onClick) {
37 |             onClick(e, id, index);
38 |           }
39 |         }}
40 |       >
41 |         {icon ? <i styleName="icon-left" className={icon} /> : null}
42 |         {title}
43 |       </span>
44 |     );
45 |   }
46 | }
47 | 
48 | Task.propTypes = {
49 |   /** An Object, array, or string of CSS classes to apply to Task.*/
50 |   className: PropTypes.oneOfType([
51 |     PropTypes.string,
52 |     PropTypes.object,
53 |     PropTypes.array
54 |   ]),
55 |   /**
56 |    * Adds font-awesome icon to left of title
57 |    */
58 |   icon: PropTypes.string,
59 |   /**
60 |    * Will set the html "id" property on the Task.
61 |    */
62 |   id: PropTypes.string,
63 |   /**
64 |    * The index of the Task within the parent Taskbar.
65 |    */
66 |   index: PropTypes.number,
67 |   /**
68 |    * Function that will be executed on click.
69 |    */
70 |   onClick: PropTypes.func,
71 |   /**
72 |    * Adds selected class if true
73 |    */
74 |   selected: PropTypes.bool,
75 |   /** Pass inline styling here. */
76 |   style: PropTypes.object,
77 |   /**
78 |    * Text for task
79 |    * @examples 'Item One'
80 |    */
81 |   title: PropTypes.string
82 | };
83 | 
84 | Task.defaultProps = {
85 |   title: "Item One"
86 | };
87 | 
88 | export default CSSModules(Task, styles, { allowMultiple: true });
89 | 


--------------------------------------------------------------------------------
/src/Task/__tests__/__snapshots__/task.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test correct render Test correct render 1`] = `
 4 | <span
 5 |   className="taskLink selected"
 6 |   id={undefined}
 7 |   onClick={[Function]}
 8 |   style={undefined}
 9 | >
10 |   <i
11 |     className="fa fa-id-card icon-left"
12 |   />
13 |   Item One
14 | </span>
15 | `;
16 | 


--------------------------------------------------------------------------------
/src/Task/__tests__/task.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { Task } from "../index";
 4 | 
 5 | import renderer from "react-test-renderer";
 6 | 
 7 | describe("Test correct render", () => {
 8 |   it("Test correct render", function() {
 9 |     const tree = renderer
10 |       .create(<Task icon={"fa fa-id-card"} title="Item One" selected />)
11 |       .toJSON();
12 |     expect(tree).toMatchSnapshot();
13 |   });
14 | });
15 | 
16 | describe("Test Task component", () => {
17 |   it("applies css classes supplied in className prop", function() {
18 |     const task = mount(<Task className="myClass anotherClass" />);
19 |     expect(task.props().className).toBe("myClass anotherClass");
20 |     expect(task.find("span").html()).toContain("myClass anotherClass");
21 |   });
22 |   it("applies icon supplied in icon prop", function() {
23 |     const task = mount(<Task icon="fa fa-github" />);
24 |     expect(task.find("i").exists()).toBe(true);
25 |     expect(task.find("i").html()).toContain("fa fa-github");
26 |   });
27 |   it("applies id prop", function() {
28 |     const task = mount(<Task id="myId" />);
29 |     expect(task.props().id).toBe("myId");
30 |     expect(task.find("span").html()).toContain('id="myId');
31 |   });
32 |   it("applies onClick prop", function() {
33 |     const clickHandler = jest.fn();
34 |     const task = mount(<Task onClick={clickHandler} />);
35 |     task.simulate("click");
36 |     expect(clickHandler).toBeCalled();
37 |   });
38 |   it("does not apply onClick prop", function() {
39 |     const clickHandler = jest.fn();
40 |     const task = mount(<Task />);
41 |     task.simulate("click");
42 |     expect(clickHandler).not.toBeCalled();
43 |   });
44 |   it("applies selected CSS class if true", function() {
45 |     const task = mount(<Task selected />);
46 |     expect(task.props().selected).toBe(true);
47 |     expect(task.find("span").html()).toContain("selected");
48 |   });
49 | });
50 | 


--------------------------------------------------------------------------------
/src/Task/index.js:
--------------------------------------------------------------------------------
1 | import Task from "./Task.js";
2 | export { Task };
3 | 


--------------------------------------------------------------------------------
/src/Taskbar/README.md:
--------------------------------------------------------------------------------
 1 | Basic Taskbar:
 2 | 	
 3 | 	<Taskbar>
 4 | 		<Task icon={"fa fa-id-card"} title="Item One" selected />
 5 | 		<Task title="Item Two"/>
 6 | 		<Task title="Item Three" />
 7 | 	</Taskbar>
 8 | 
 9 | Taskbar with an onClick function which gets passed down to each child Task:
10 | 	
11 | 	<Taskbar onClick={ function(e, id, index){ console.log("Click: ", index) }}>
12 | 		<Task icon={"fa fa-id-card"} title="Item One" selected />
13 | 		<Task title="Item Two"/>
14 | 		<Task title="Item Three" />
15 | 	</Taskbar>
16 | 
17 | Taskbar with an onClick function set to only one child Task:
18 | 	
19 | 	<Taskbar>
20 | 		<Task icon={"fa fa-id-card"} title="Item One" selected />
21 | 		<Task title="Item Two" id="Item2" onClick={ function(e, id, index){ console.log("Click: ", id, index) }} />
22 | 		<Task title="Item Three" />
23 | 	</Taskbar>


--------------------------------------------------------------------------------
/src/Taskbar/Taskbar.css:
--------------------------------------------------------------------------------
 1 | .taskbar {
 2 | 	composes: taskbar-border-top from '../styles.css'; 
 3 | 	composes: taskbar-border-bottom from '../styles.css'; 
 4 | 	width: 100%;
 5 | 	border-radius: 2px;
 6 | 	min-height: 50px;
 7 | 	margin-bottom: 27px;
 8 | }
 9 | 
10 | .taskbarContainer {
11 | 	padding: 0 20px;
12 | }
13 | 
14 | .center {
15 | 	text-align: center;
16 | }


--------------------------------------------------------------------------------
/src/Taskbar/Taskbar.js:
--------------------------------------------------------------------------------
 1 | import React, { cloneElement } from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import CSSModules from "react-css-modules";
 5 | import styles from "./Taskbar.css";
 6 | 
 7 | export class Taskbar extends React.PureComponent {
 8 |   constructor(props) {
 9 |     super(props);
10 |   }
11 | 
12 |   render() {
13 |     const { center, children, className, onClick, style } = this.props;
14 |     const taskbarContainerClasses = cx({
15 |       taskbarContainer: true,
16 |       center: center
17 |     });
18 | 
19 |     return (
20 |       <div styleName={"taskbar"} style={style} className={cx(className)}>
21 |         <div styleName={taskbarContainerClasses}>
22 |           {React.Children.map(children, (child, index) => {
23 |             child = cloneElement(child, {
24 |               index: index,
25 |               onClick: child.props.onClick || onClick // Child Task onClick overwrites Taskbar onClick
26 |             });
27 |             return child;
28 |           })}
29 |         </div>
30 |       </div>
31 |     );
32 |   }
33 | }
34 | 
35 | Taskbar.propTypes = {
36 |   /** Determines if the Taskbar children should be centered */
37 |   center: PropTypes.bool,
38 |   /**
39 |    * Any HTML element or React Component.
40 |    * @examples <p>Some Text.</p>
41 |    */
42 |   children: PropTypes.node.isRequired,
43 |   /** An Object, array, or string of CSS classes to apply to CheckboxGroup.*/
44 |   className: PropTypes.oneOfType([
45 |     PropTypes.string,
46 |     PropTypes.object,
47 |     PropTypes.array
48 |   ]),
49 |   /**
50 |    * Function that will be executed on click.
51 |    */
52 |   onClick: PropTypes.func,
53 |   /** Pass inline styling here. */
54 |   style: PropTypes.object
55 | };
56 | 
57 | export default CSSModules(Taskbar, styles, { allowMultiple: true });
58 | 


--------------------------------------------------------------------------------
/src/Taskbar/__tests__/__snapshots__/taskbar.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Taskbar component Test render correctly 1`] = `
 4 | <div
 5 |   className="taskbar"
 6 |   style={undefined}
 7 | >
 8 |   <div
 9 |     className="taskbarContainer"
10 |   >
11 |     <span
12 |       className="taskLink selected"
13 |       id={undefined}
14 |       onClick={[Function]}
15 |       style={undefined}
16 |     >
17 |       <i
18 |         className="fa fa-id-card icon-left"
19 |       />
20 |       Item One
21 |     </span>
22 |     <span
23 |       className="taskLink"
24 |       id={undefined}
25 |       onClick={[Function]}
26 |       style={undefined}
27 |     >
28 |       Item Two
29 |     </span>
30 |     <span
31 |       className="taskLink"
32 |       id={undefined}
33 |       onClick={[Function]}
34 |       style={undefined}
35 |     >
36 |       Item Three
37 |     </span>
38 |   </div>
39 | </div>
40 | `;
41 | 


--------------------------------------------------------------------------------
/src/Taskbar/__tests__/taskbar.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { Taskbar } from "../index";
 4 | import { Task } from "../../Task/index";
 5 | import renderer from "react-test-renderer";
 6 | 
 7 | describe("Test Taskbar component", () => {
 8 |   it("Test render correctly", () => {
 9 |     const comp = (
10 |       <Taskbar>
11 |         <Task icon={"fa fa-id-card"} title="Item One" selected />
12 |         <Task title="Item Two" />
13 |         <Task title="Item Three" />
14 |       </Taskbar>
15 |     );
16 |     const tree = renderer.create(comp).toJSON();
17 |     expect(tree).toMatchSnapshot();
18 |   });
19 | 
20 |   it("centers", () => {
21 |     const taskbar = mount(
22 |       <Taskbar center>
23 |         <Task icon={"fa fa-id-card"} title="Item One" selected />
24 |         <Task title="Item Two" />
25 |         <Task title="Item Three" />
26 |       </Taskbar>
27 |     );
28 | 
29 |     expect(taskbar.find(".taskbarContainer.center").exists()).toBe(true);
30 |   });
31 | 
32 |   it("applies className", () => {
33 |     const taskbar = mount(
34 |       <Taskbar className="myClass">
35 |         <Task icon={"fa fa-id-card"} title="Item One" selected />
36 |         <Task title="Item Two" />
37 |         <Task title="Item Three" />
38 |       </Taskbar>
39 |     );
40 | 
41 |     expect(taskbar.find(".myClass.taskbar").exists()).toBe(true);
42 |   });
43 | 
44 |   it("applies style", () => {
45 |     const taskbar = mount(
46 |       <Taskbar className="myClass" style={{ color: "red" }}>
47 |         <Task icon={"fa fa-id-card"} title="Item One" selected />
48 |         <Task title="Item Two" />
49 |         <Task title="Item Three" />
50 |       </Taskbar>
51 |     );
52 | 
53 |     expect(taskbar.find(".myClass.taskbar").props().style).toEqual({
54 |       color: "red"
55 |     });
56 |   });
57 | 
58 |   it("passes onClick to children", () => {
59 |     const handleClick = jest.fn();
60 |     const taskbar = mount(
61 |       <Taskbar onClick={handleClick}>
62 |         <Task icon={"fa fa-id-card"} title="Item One" selected />
63 |         <Task title="Item Two" />
64 |         <Task title="Item Three" />
65 |       </Taskbar>
66 |     );
67 | 
68 |     taskbar
69 |       .find("Task")
70 |       .first()
71 |       .simulate("click");
72 |     expect(handleClick).toBeCalled();
73 |   });
74 | });
75 | 


--------------------------------------------------------------------------------
/src/Taskbar/index.js:
--------------------------------------------------------------------------------
1 | import Taskbar from "./Taskbar.js";
2 | export { Taskbar };
3 | 


--------------------------------------------------------------------------------
/src/Text/README.md:
--------------------------------------------------------------------------------
 1 | ###### Default Text component:
 2 | 
 3 |     <Text>Hello World</Text>
 4 | 
 5 | ###### Nested Text components:
 6 | 
 7 |     <Text>Hello <Text style={{color: "red"}}>World</Text></Text>
 8 | 
 9 | ###### Nested view components:
10 | 
11 |     <Text>There is a Button <Button>Hello</Button> inside my Text.</Text>
12 | 
13 | ###### Default Text for body copy:
14 | 
15 |     <Text body>Hello World</Text>
16 | 
17 | ###### Input label:
18 | 
19 |     <div>
20 | 	  <Text as="label" htmlFor="inputId">Input Label</Text>
21 | 	  <TextField id="inputId" />
22 | 	</div>
23 | 
24 | ###### Headers and Sub-Headers:
25 | 
26 |     <div>
27 | 	    <Text as="h1">h1 Heading <Text as="small">Secondary text</Text></Text>
28 | 	    <Text as="h2">h2 Heading <Text as="small">Secondary text</Text></Text>
29 | 	    <Text as="h3">h3 Heading <Text as="small">Secondary text</Text></Text>
30 | 	    <Text as="h4">h4 Heading <Text as="small">Secondary text</Text></Text>
31 | 	    <Text as="h5">h5 Heading <Text as="small">Secondary text</Text></Text>
32 | 	    <Text as="h6">h6 Heading <Text as="small">Secondary text</Text></Text>
33 | 	</div>
34 | 
35 | ###### Paragraph Text:
36 | 
37 |     <div>
38 |     	<Text as="p">Parapraph One</Text>
39 |     	<Text as="p">Paragraph Two</Text>
40 |     </div>
41 | 
42 | ###### Bold text:
43 | 
44 |     <Text as="b">Hello World</Text>
45 | 
46 | ###### Important text:
47 | 
48 |     <Text as="strong">Hello World</Text>
49 | 
50 | ###### Italic text:
51 | 
52 |     <Text as="i">Hello World</Text>
53 | 
54 | ###### Emphasized text:
55 | 
56 |     <Text as="em">Hello World</Text>
57 | 
58 | ###### Deleted text:
59 | 
60 |     <Text as="del">Hello World</Text>
61 | 
62 | ###### Inserted text:
63 | 
64 |     <Text as="ins">Hello World</Text>
65 | 
66 | ###### Marked text:
67 | 
68 |     <Text as="mark">Hello World</Text>
69 | 
70 | ###### Small text (must be used within another Text component):
71 | 
72 |     <Text>Hello <Text as="small">World</Text></Text>
73 | 
74 | ###### Subscript text:
75 | 
76 |     <Text>Hello <Text as="sub">World</Text></Text>
77 | 
78 | ###### Superscript text:
79 | 
80 |     <Text>Hello <Text as="sup">World</Text></Text>
81 | 
82 | ###### Code text:
83 | 
84 |     <Text>Sample Code: <Text as="code">Hello World</Text></Text>
85 | 
86 | ###### Blockquote text:
87 | 
88 |     <Text as="blockquote">Hello World</Text>
89 | 
90 | ###### Link text:
91 | 
92 |     <Text as="a" href="#">Hello World</Text>
93 | 
94 | 


--------------------------------------------------------------------------------
/src/Text/Text.css:
--------------------------------------------------------------------------------
 1 | @import '../styles/variables.css';
 2 | 
 3 | .label {
 4 | 	composes: header-font from '../styles.css';
 5 | }
 6 | 
 7 | .defaultFont {
 8 | 	composes: default-font from '../styles.css';
 9 | }
10 | 
11 | .bodyFont {
12 | 	composes: body-font from '../styles.css';
13 | }
14 | 
15 | .header {
16 | 	composes: header-font from '../styles.css';
17 | 	font-weight: 500;
18 | 	line-height: 1;
19 | 	display: block;
20 | }
21 | 
22 | .h1 {
23 | 	composes: header;
24 | 	font-size: 52px;
25 | 	margin: 0 0 13.5px;
26 | }
27 | 
28 | .h2 {
29 | 	composes: header;
30 | 	font-size: 42px;
31 | 	margin: 0 0 13.5px;
32 | }
33 | 
34 | .h3 {
35 | 	composes: header;
36 | 	font-size: 35px;
37 | 	margin: 0 0 13.5px;
38 | }
39 | 
40 | .h4 {
41 | 	composes: header;
42 | 	font-size: 26px;
43 | 	margin: 0 0 6.75px;
44 | }
45 | 
46 | .h5 {
47 | 	composes: header;
48 | 	font-size: 21px;
49 | 	margin: 0 0 6.75px;
50 | }
51 | 
52 | .h6 {
53 | 	composes: header;
54 | 	font-size: 19px;
55 | 	margin: 0 0 6.75px;
56 | }
57 | 
58 | .small {
59 | 	composes: dark-gray from '../styles.css';
60 | 	font-size:65%;
61 | }
62 | 
63 | .link {
64 | 	composes: sky-blue from '../styles.css';
65 | 	text-decoration: none;
66 | }
67 | 
68 | .link:hover {
69 |   color: var(--secondary);
70 | }
71 | 
72 | .code {
73 | 	composes: red from '../styles.css';
74 |     composes: bg-silver from '../styles.css';
75 |     composes: pad-h-0-25 from '../styles.css';
76 | }
77 | 
78 | .blockquote {
79 | 	padding: var(--space-1-1) var(--space-2);
80 | 	composes: pad-v-1 from '../styles.css';
81 | 	composes: pad-h-2 from '../styles.css';
82 |     margin: 0 0 var(--space-2);
83 |     font-size: var(--header-font-size);
84 |     border-left: 5px solid var(--silver);
85 | }


--------------------------------------------------------------------------------
/src/Text/Text.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import cx from "classnames";
 4 | import CSSModules from "react-css-modules";
 5 | import styles from "./Text.css";
 6 | 
 7 | export class Text extends React.PureComponent {
 8 |   constructor(props) {
 9 |     super(props);
10 |   }
11 | 
12 |   render() {
13 |     const { as, body, children, className, ...other } = this.props;
14 | 
15 |     // Not all available elements are included below, only the ones needing custom styling.
16 |     const textStyles = cx({
17 |       blockquote: as === "blockquote",
18 |       bodyFont: body,
19 |       code: as === "code",
20 |       defaultFont: !body && as !== "label",
21 |       h1: as === "h1",
22 |       h2: as === "h2",
23 |       h3: as === "h3",
24 |       h4: as === "h4",
25 |       h5: as === "h5",
26 |       h6: as === "h6",
27 |       label: as === "label",
28 |       link: as === "a",
29 |       small: as === "small"
30 |     });
31 | 
32 |     const TextElement = `${this.props.as}`;
33 | 
34 |     let element = (
35 |       <TextElement className={cx(className)} styleName={textStyles} {...other}>
36 |         {children}
37 |       </TextElement>
38 |     );
39 | 
40 |     return element;
41 |   }
42 | }
43 | 
44 | Text.propTypes = {
45 |   /** Defines what HTML element to render the Text component as. Possibilities include, but are not limited to b, body, del, em, h1, h2, h3, h4, h5, h6, i, ins, label, mark, p, small, strong, sub, and sup. */
46 |   as: PropTypes.string,
47 |   /** Allows theme to differentiate font-family between default font and body copy in variables.css */
48 |   body: PropTypes.bool,
49 |   /**
50 |    * Text, any HTML element, or React Component.
51 |    */
52 |   children: PropTypes.node,
53 |   /** An Object, array, or string of CSS classes to apply to Input. */
54 |   className: PropTypes.oneOfType([
55 |     PropTypes.string,
56 |     PropTypes.object,
57 |     PropTypes.array
58 |   ])
59 | };
60 | 
61 | Text.defaultProps = {
62 |   as: "span"
63 | };
64 | 
65 | export default CSSModules(Text, styles, { allowMultiple: true });
66 | 


--------------------------------------------------------------------------------
/src/Text/__tests__/__snapshots__/text.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Text component renders correctly 1`] = `
 4 | <span
 5 |   className="defaultFont"
 6 | >
 7 |   Hello World!
 8 | </span>
 9 | `;
10 | 


--------------------------------------------------------------------------------
/src/Text/__tests__/text.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { Text } from "../index";
 4 | import renderer from "react-test-renderer";
 5 | 
 6 | describe("Test Text component", () => {
 7 |   it("renders correctly", () => {
 8 |     const tree = renderer.create(<Text>Hello World!</Text>).toJSON();
 9 |     expect(tree).toMatchSnapshot();
10 |   });
11 | 
12 |   it("Text component - Body Text", function() {
13 |     const comp = mount(<Text body>Body Text</Text>);
14 |     expect(comp.props().body).toBe(true);
15 |     expect(comp.props().as).toEqual("span");
16 |   });
17 | });
18 | 


--------------------------------------------------------------------------------
/src/Text/index.js:
--------------------------------------------------------------------------------
1 | import Text from "./Text.js";
2 | export { Text };
3 | 


--------------------------------------------------------------------------------
/src/TextArea/README.md:
--------------------------------------------------------------------------------
 1 | ###### Default textarea:
 2 | 
 3 |     <TextArea/>
 4 | 
 5 | ###### Non-resizable textarea:
 6 | 
 7 | 	<TextArea placeholder="Enter text here..." resizable={false}/>
 8 | 
 9 | ###### Textarea with label above:
10 | 
11 |     <TextArea label="This is a TextArea"/>
12 | 
13 | ###### Placeholder text:
14 | 
15 |     <TextArea placeholder="Enter product details here..."/>
16 | 
17 | ###### Disabled textarea:
18 | 
19 |     <TextArea disabled="true" />
20 | 
21 | ###### Required validation:
22 | 
23 |     <TextArea required label="Description"/>
24 | 
25 | ###### Maximum length validation:
26 | 
27 |     <TextArea maxLength={20}/>
28 | 
29 | ###### Both validations at the same time:
30 | 
31 |     <TextArea required maxLength={20}/>
32 |     
33 | ###### TextArea event handlers:
34 | 
35 |     <TextArea 
36 |         onChange={ (event, data) => { console.log('onChange: ', event, data); } }
37 |         onBlur={ (event, data) => { console.log('onBlur: ', event, data); } }
38 |         onFocus={ (event, data) => { console.log('onFocus: ', event, data); } }
39 |     />
40 | 
41 | ###### TextArea onChange handler:
42 | 
43 |     <TextArea onChange={ () => { alert('onChange executed!'); } }/>
44 | 
45 | ###### TextArea onBeforeChange:
46 | 
47 |     <TextArea 
48 |         onBeforeChange={ (event, data) => { let accept = confirm(`Are you sure you want to change the value to ${data.value}?`); return accept; } }
49 |     />
50 | 
51 | 
52 | ###### TextArea Tooltip requires label:
53 | 
54 |     <TextArea label="tooltip label" tooltip={<Tooltip text="Example"/>} />
55 |     
56 | ###### TextArea tooltipPosition set to left:
57 | 
58 |     <TextArea label="tooltip label" tooltip={<Tooltip text="Example"/>} tooltipPosition="left" />
59 | 


--------------------------------------------------------------------------------
/src/TextArea/__tests__/__snapshots__/textArea.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Text component renders correctly 1`] = `
 4 | <div
 5 |   className="textareaWrapper"
 6 | >
 7 |   <textarea
 8 |     className="textarea textareaWidth"
 9 |     disabled={undefined}
10 |     id={undefined}
11 |     onBlur={[Function]}
12 |     onChange={[Function]}
13 |     onFocus={[Function]}
14 |     required={undefined}
15 |     style={undefined}
16 |     type="text"
17 |     value=""
18 |   />
19 | </div>
20 | `;
21 | 


--------------------------------------------------------------------------------
/src/TextArea/index.js:
--------------------------------------------------------------------------------
1 | import TextArea from "./TextArea.js";
2 | export { TextArea };
3 | 


--------------------------------------------------------------------------------
/src/TextField/TextField.css:
--------------------------------------------------------------------------------
 1 | .textfield {
 2 | 	composes: primary-gray-border from '../styles.css';
 3 | 	composes: default-font from '../styles.css';
 4 | 	padding: 5px !important; /* !important designation added for conflict with legacy DR UI library styles */
 5 | 	composes: default-font from '../styles.css';
 6 | 	composes: pad-1 from '../styles.css';
 7 | 	width: 100%;
 8 | 	box-sizing: border-box;
 9 | 	border-radius: 2px;
10 | 	height: 1.77rem;
11 | 	outline: none;
12 | }
13 | 
14 | .textfield:-moz-ui-invalid { /* fixes red border on required fields in FF */
15 | 	box-shadow: none;
16 | }
17 | 
18 | .textfieldWrapper {
19 | 	composes: default-font from '../styles.css';
20 | 	width: 100%;
21 | }
22 | 
23 | .setWidth {
24 | 	width: inherit;
25 | 	display: inline-block;
26 |   }
27 | 
28 | .leftLabel {
29 | 	display: flex;
30 | 	white-space: nowrap;
31 | }
32 | 
33 | .fillInput {
34 |   flex: 1;
35 | }
36 | 
37 | .inline {
38 |   display: inline-block;
39 |   margin-right: 1rem;
40 | }
41 | 
42 | .disabled {
43 | 	composes: cursor-not-allowed from '../styles.css';
44 | }
45 | 
46 | .active {
47 | 	composes: text-input-active from '../styles.css';
48 | }
49 | 
50 | .hidden {
51 | 	display: none;
52 | }
53 | 
54 | .success {
55 | 	composes: text-input-valid from '../styles.css';
56 | 	composes: marg-b-half from '../styles.css';
57 | }
58 | 
59 | .error {
60 | 	composes: text-input-invalid from '../styles.css';
61 | 	composes: marg-b-half from '../styles.css';
62 | }
63 | 
64 | .warning {
65 | 	composes: text-input-warning from '../styles.css';
66 | 	composes: marg-b-half from '../styles.css';
67 | }
68 | 
69 | .success_message {
70 | 	composes: success-text from '../styles.css';
71 | }
72 | 
73 | .error_message {
74 | 	composes: error-text from '../styles.css';
75 | }
76 | 
77 | .warning_message {
78 | 	composes: warning-text from '../styles.css';
79 | }


--------------------------------------------------------------------------------
/src/TextField/__tests__/__snapshots__/textField.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Input component render Render correctly 1`] = `
 4 | <div
 5 |   className="textfieldWrapper"
 6 | >
 7 |   <input
 8 |     className="class textfield disabled"
 9 |     disabled="false"
10 |     hidden={false}
11 |     id="ID"
12 |     maxLength={15}
13 |     name="InputName"
14 |     onBlur={[Function]}
15 |     onChange={[Function]}
16 |     onClick={[Function]}
17 |     onFocus={[Function]}
18 |     onKeyDown={[Function]}
19 |     onKeyPress={[Function]}
20 |     onPaste={[Function]}
21 |     placeholder="Text here"
22 |     required={true}
23 |     style={undefined}
24 |     type="text"
25 |     value="Value"
26 |   />
27 | </div>
28 | `;
29 | 


--------------------------------------------------------------------------------
/src/TextField/index.js:
--------------------------------------------------------------------------------
1 | import TextField from "./TextField.js";
2 | export { TextField };
3 | 


--------------------------------------------------------------------------------
/src/Timer/README.md:
--------------------------------------------------------------------------------
 1 | Timer with render prop:
 2 | 
 3 |     initialState = { time: 0 }
 4 |     addTime = () => {
 5 |         setState((prevState) => { 
 6 |             return { time: prevState.time + 10 }
 7 |         });
 8 |     }
 9 |     <div>
10 |         <Button onClick={addTime}>Add 10 seconds</Button>
11 |         <Timer time={state.time} render={remaining => (remaining) ? <Text>{remaining} second(s) remaining</Text> : null}/>
12 |     </div>
13 | 
14 | Timer with callbacks:
15 | 
16 |     initialState = { time: 0 }
17 |     addTime = () => {
18 |         setState((prevState) => { 
19 |             return { time: prevState.time + 10 }
20 |         });
21 |     }
22 |     <div>
23 |         <Button onClick={addTime}>Add 10 seconds</Button>
24 |         <Timer
25 |             time={state.time} 
26 |             onTick={(remaining, elapsed) => console.log(`onTick: ${elapsed} second(s) have passed. ${remaining} second(s) left.`)}
27 |             onZero={() => console.log('Timer reached zero.')}
28 |         />
29 |     </div>
30 | 
31 | 


--------------------------------------------------------------------------------
/src/Timer/__tests__/__snapshots__/timer.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Timer Component Supports render prop 1`] = `
 4 | <span>
 5 |   You have 
 6 |   10
 7 |    second(s) left
 8 | </span>
 9 | `;
10 | 


--------------------------------------------------------------------------------
/src/Timer/index.js:
--------------------------------------------------------------------------------
1 | import Timer from "./Timer.js";
2 | export { Timer };
3 | 


--------------------------------------------------------------------------------
/src/Tooltip/README.md:
--------------------------------------------------------------------------------
 1 | ###### Default tooltip:
 2 | 
 3 |     <Tooltip text="default"/>
 4 | 
 5 | ###### Default tooltip with bottom position set:
 6 | 
 7 | 
 8 |     <Tooltip text="Bottom tooltip position" position="bottom"/>
 9 | 
10 | ###### Top tooltip:
11 | 
12 |     <Tooltip text="Top tooltip position" position="top"/>
13 | 
14 | ###### Left tooltip:
15 | 
16 |     <Tooltip text="Left tooltip position" position="left"/>
17 | 
18 | ###### Right tooltip:
19 | 
20 |     <Tooltip text="Right tooltip position" position="right"/>
21 | 
22 | ###### Custom icon prop tooltip:
23 | 
24 |     <Tooltip text="Custom icon prop" icon="fa fa-question-circle"/>
25 | 
26 | ###### Icon child tooltip:
27 | 
28 |     <Tooltip text="Icon child"><i className="fa fa-question"></i></Tooltip>
29 | 
30 | ###### Tooltip with child element:
31 | 
32 |     <Tooltip text="Tooltip with child element"><Button primary small>Button</Button></Tooltip>
33 | 
34 | ###### Tooltip with delay:
35 | 
36 |     <Tooltip text="Delayed" delay={1000}/>
37 | 


--------------------------------------------------------------------------------
/src/Tooltip/__tests__/__snapshots__/tooltip.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Test Tooltip component render Render correctly 1`] = `
 4 | <div
 5 |   className="class block tooltip tooltip-top"
 6 |   data-tooltip=""
 7 |   onMouseEnter={[Function]}
 8 |   onMouseLeave={[Function]}
 9 |   role="tooltip"
10 |   style={undefined}
11 | >
12 |   <i
13 |     className="<i class='fa fa-github'></i>"
14 |   />
15 |   
16 | </div>
17 | `;
18 | 


--------------------------------------------------------------------------------
/src/Tooltip/__tests__/tooltip.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { Tooltip } from "../index";
 4 | 
 5 | import { verifyPropsDefaultValue } from "../../utils/propsVerification";
 6 | 
 7 | import renderer from "react-test-renderer";
 8 | 
 9 | describe("Test Tooltip component render", () => {
10 |   it("Render correctly", () => {
11 |     const tree = renderer
12 |       .create(
13 |         <Tooltip
14 |           tooltip={"Hey I'm a tooltip"}
15 |           position={"top"}
16 |           icon={"<i class='fa fa-github'></i>"}
17 |           tooltipDelay={3000}
18 |           active={false}
19 |           className={"class"}
20 |         />
21 |       )
22 |       .toJSON();
23 |     expect(tree).toMatchSnapshot();
24 |   });
25 | });
26 | 
27 | describe("Testing Tooltip component", () => {
28 |   it("Tooltip component - Properties basic test", function() {
29 |     const comp = mount(
30 |       <Tooltip
31 |         tooltip={"Hey I'm a tooltip"}
32 |         position={"top"}
33 |         icon={"<i class='fa fa-github'></i>"}
34 |         tooltipDelay={3000}
35 |         active={false}
36 |         className={"class"}
37 |       />
38 |     );
39 |     const expectedProps = new Map([
40 |       ["tooltip", "Hey I'm a tooltip"],
41 |       ["position", "top"],
42 |       ["tooltipDelay", 3000],
43 |       ["active", false],
44 |       ["className", "class"]
45 |     ]);
46 | 
47 |     expect(verifyPropsDefaultValue(comp, expectedProps)).toEqual(true);
48 |   });
49 | 
50 |   it("Tooltip component - Mouse in with delays", function() {
51 |     const comp = mount(<Tooltip tooltip={"Hey I'm a tooltip"} delay={1000} />);
52 |     jest.useFakeTimers();
53 |     expect(comp.state().active).toEqual(false);
54 |     comp.simulate("mouseEnter");
55 |     jest.runAllTimers();
56 |     expect(comp.state().active).toEqual(true);
57 |   });
58 | 
59 |   it("Tooltip component - Mouse in without delays", function() {
60 |     const comp = mount(<Tooltip tooltip={"Hey I'm a tooltip"} />);
61 |     jest.useFakeTimers();
62 |     expect(comp.state().active).toEqual(false);
63 |     comp.simulate("mouseEnter");
64 |     jest.runAllTimers();
65 |     expect(comp.state().active).toEqual(true);
66 |   });
67 | 
68 |   it("Tooltip component - Mouse in/out", function() {
69 |     const comp = mount(<Tooltip tooltip={"Hey I'm a tooltip"} />);
70 | 
71 |     comp.simulate("mouseEnter");
72 |     expect(comp.state().active).toEqual(true);
73 | 
74 |     comp.simulate("mouseLeave");
75 |     expect(comp.state().active).toEqual(false);
76 |   });
77 | 
78 |   it("Tooltip children overwrite icon", function() {
79 |     const comp = mount(
80 |       <Tooltip tooltip={"Hey I'm a tooltip"} icon="fa fa-github">
81 |         {" "}
82 |         <span>foo</span>
83 |       </Tooltip>
84 |     );
85 |     expect(comp.find("i").exists()).toBe(false);
86 |   });
87 | });
88 | 


--------------------------------------------------------------------------------
/src/Tooltip/index.js:
--------------------------------------------------------------------------------
1 | import Tooltip from "./Tooltip.js";
2 | export { Tooltip };
3 | 


--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
 1 | /** constants.js taken from Elemental UI.
 2 |  * mainly used for Grid functionality, Col & Row components
 3 |  * Copyright (c) 2016 Thinkmill Pty Ltd
 4 |  */
 5 | let canUseDOM = !!(
 6 |   typeof window !== "undefined" &&
 7 |   window.document &&
 8 |   window.document.createElement
 9 | );
10 | 
11 | exports.canUseDOM = canUseDOM;
12 | 
13 | // breakpoints
14 | exports.breakpoint = {
15 |   "xs": 480,
16 |   "sm": 768,
17 |   "md": 992,
18 |   "lg": 1200
19 | };
20 | 
21 | // border radii
22 | exports.borderRadius = {
23 |   "xs": 2,
24 |   "sm": 4,
25 |   "md": 8,
26 |   "lg": 16,
27 |   "xl": 32
28 | };
29 | 
30 | // spacing
31 | exports.spacing = {
32 |   "xs": 5,
33 |   "sm": 10,
34 |   "md": 20,
35 |   "lg": 40,
36 |   "xl": 80
37 | };
38 | 
39 | // widths
40 | exports.width = {
41 |   "container": 1170,
42 |   "gutter": 20
43 | };
44 | 
45 | // fractions (for col widths)
46 | 
47 | function perc(n) {
48 |   return n * 100 + "%";
49 | }
50 | 
51 | function denominators(n) {
52 |   for (let d = 2; d <= 20; d++) {
53 |     if (n < d) {
54 |       exports.fractions[n + "/" + d] = perc(n / d);
55 |     }
56 |   }
57 | }
58 | 
59 | exports.fractions = {
60 |   "1": "100%"
61 | };
62 | 
63 | for (let numerator = 1; numerator <= 19; numerator++) {
64 |   denominators(numerator);
65 | }
66 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { Accordion } from "./Accordion";
 2 | export { Accordion };
 3 | import { AccordionPanel } from "./AccordionPanel";
 4 | export { AccordionPanel };
 5 | import { Alert } from "./Alert";
 6 | export { Alert };
 7 | import { Avatar } from "./Avatar";
 8 | export { Avatar };
 9 | import { Breadcrumb } from "./Breadcrumb";
10 | export { Breadcrumb };
11 | import { BreadcrumbItem } from "./BreadcrumbItem";
12 | export { BreadcrumbItem };
13 | import { Button } from "./Button";
14 | export { Button };
15 | import { Card } from "./Card";
16 | export { Card };
17 | import { Checkbox } from "./Checkbox";
18 | export { Checkbox };
19 | import { CheckboxGroup } from "./CheckboxGroup";
20 | export { CheckboxGroup };
21 | import { Dialog } from "./Dialog";
22 | export { Dialog };
23 | import { Dropdown } from "./Dropdown";
24 | export { Dropdown };
25 | import { FileUpload } from "./FileUpload";
26 | export { FileUpload };
27 | import { Form } from "./Form";
28 | export { Form };
29 | import { Hint } from "./Hint";
30 | export { Hint };
31 | import { Icon } from "./Icon";
32 | export { Icon };
33 | import { Label } from "./Label";
34 | export { Label };
35 | import { List } from "./List";
36 | export { List };
37 | import { ListGroup } from "./ListGroup";
38 | export { ListGroup };
39 | import { ListItem } from "./ListItem";
40 | export { ListItem };
41 | import { Modal } from "./Modal";
42 | export { Modal };
43 | import { Nav } from "./Nav";
44 | export { Nav };
45 | import { NavItem } from "./NavItem";
46 | export { NavItem };
47 | import { Option } from "./Option";
48 | export { Option };
49 | import { Overlay } from "./Overlay";
50 | export { Overlay };
51 | import { Portal } from "./Portal";
52 | export { Portal };
53 | import { ProgressBar } from "./ProgressBar";
54 | export { ProgressBar };
55 | import { Radio } from "./Radio";
56 | export { Radio };
57 | import { RadioGroup } from "./RadioGroup";
58 | export { RadioGroup };
59 | import { Switch } from "./Switch";
60 | export { Switch };
61 | import { Tab } from "./Tab";
62 | export { Tab };
63 | import { Table } from "./Table";
64 | export { Table };
65 | import { TableHeader } from "./TableHeader";
66 | export { TableHeader };
67 | import { TabList } from "./TabList";
68 | export { TabList };
69 | import { TabPanel } from "./TabPanel";
70 | export { TabPanel };
71 | import { Tabs } from "./Tabs";
72 | export { Tabs };
73 | import { Task } from "./Task";
74 | export { Task };
75 | import { Taskbar } from "./Taskbar";
76 | export { Taskbar };
77 | import { Text } from "./Text";
78 | export { Text };
79 | import { TextArea } from "./TextArea";
80 | export { TextArea };
81 | import { TextField } from "./TextField";
82 | export { TextField };
83 | import { Timer } from "./Timer";
84 | export { Timer };
85 | import { Tooltip } from "./Tooltip";
86 | export { Tooltip };
87 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | @import './styles/layout.css';
2 | @import './styles/borders.css';
3 | @import './styles/typography.css';
4 | @import './styles/colors.css';
5 | @import './styles/miscellaneous.css';
6 | 
7 | 


--------------------------------------------------------------------------------
/src/styles/miscellaneous.css:
--------------------------------------------------------------------------------
 1 | @import './variables.css';
 2 | 
 3 | /* Cursor Options */
 4 | .cursor-pointer { cursor: pointer }
 5 | .cursor-default { cursor: default }
 6 | .cursor-not-allowed { cursor: not-allowed }
 7 | 
 8 | .opacity-0 { opacity: 0;-moz-opacity: 0;-webkit-opacity: 0;-o-opacity: 0; }
 9 | 
10 | .text-input-active {
11 | 	border: 1.6px solid var(--info);
12 | 	outline: none; 
13 | }
14 | 
15 | .text-input-invalid {
16 | 	border: 1px solid var(--error);
17 | }
18 | 
19 | .text-input-valid {
20 | 	border: 1px solid var(--success);
21 | }
22 | 
23 | .text-input-warning {
24 | 	border: 1px solid var(--warning);
25 | }
26 | 
27 | .silver-to-white-gradient {
28 | 	background: white;
29 | 	background: -webkit-linear-gradient(#ffffff, #e6e6e6);
30 | 	background: -o-linear-gradient(#ffffff, #e6e6e6);
31 | 	background: -moz-linear-gradient(#ffffff, #e6e6e6);
32 | 	background: linear-gradient(#ffffff, #e6e6e6);
33 | }
34 | 
35 | .white-inset-shadow {
36 | 	box-shadow: inset 0px 0px 0px 3px white;
37 | 	-webkit-box-shadow: inset 0px 0px 0px 3px white;
38 | 	-moz-box-shadow: inset 0px 0px 0px 3px white;
39 | 	-o-box-shadow: inset 0px 0px 0px 3px white;
40 | }


--------------------------------------------------------------------------------
/src/styles/typography.css:
--------------------------------------------------------------------------------
 1 | @import './variables.css';
 2 | /* Utility Typography */
 3 | .default-font { 
 4 | 	font-family: var(--font-family);
 5 | 	font-size: var(--font-size);
 6 |  }
 7 | .body-font {
 8 | 	font-family: var(--body-font-family);
 9 | 	font-size: var(--font-size);
10 | }
11 | .header-font { 
12 | 	font-family: var(--heading-font-family);
13 | 	font-size: var(--header-font-size);
14 | 	font-weight: var(--heading-font-weight);
15 | 	color: var(--secondary);
16 | }
17 | .bold    { font-weight: var(--bold-font-weight, bold) }
18 | .regular { font-weight: normal }
19 | .italic  { font-style: italic }
20 | .caps    { text-transform: uppercase; letter-spacing: .2em; }
21 | 
22 | 
23 | /* Font-size Utility */
24 | .font-size-1 { font-size: var(--h1, 2rem) }
25 | .font-size-2 { font-size: var(--h2, 1.5rem) }
26 | .font-size-3 { font-size: var(--h3, 1.25rem) }
27 | .font-size-4 { font-size: var(--h4, 1rem)}
28 | .font-size-5 { font-size: var(--h5, .875rem) }
29 | .font-size-6 { font-size: var(--h6, .75rem) }
30 | .font-size-7 { font-size: .5rem }
31 | .font-size-8 { font-size: .25rem }


--------------------------------------------------------------------------------
/src/utils/__tests__/prefixer.test.js:
--------------------------------------------------------------------------------
 1 | import prefixer from "../../utils/prefixer";
 2 | 
 3 | describe("Testing prefixer", () => {
 4 |   it("Test prefixer()", function() {
 5 |     const style = {
 6 |       "color": "red",
 7 |       "transform": "scaleX(0.6)"
 8 |     };
 9 | 
10 |     const expectedStyle = {
11 |       color: "red", //eslint-disable-line quote-props
12 |       transform: "scaleX(0.6)", //eslint-disable-line quote-props
13 |       WebkitTransform: "scaleX(0.6)", //eslint-disable-line quote-props
14 |       MsTransform: "scaleX(0.6)" //eslint-disable-line quote-props
15 |     };
16 | 
17 |     let prefixedStyle = prefixer(style);
18 |     expect(typeof prefixer).toBe("function");
19 |     expect(prefixedStyle).toEqual(expectedStyle);
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/utils/__tests__/propsVerification.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { mount } from "enzyme";
 3 | import { Button } from "../../Button/index";
 4 | import { verifyPropsDefaultValue } from "../propsVerification";
 5 | 
 6 | describe("Testing propsVerification", () => {
 7 |   it("Test verifyPropsDefaultValue() returns true when props are correct", function() {
 8 |     const comp = mount(<Button />);
 9 |     const expected = new Map([
10 |       ["children", "Default Button"],
11 |       ["outline", false],
12 |       ["primary", false],
13 |       ["secondary", false],
14 |       ["warning", false],
15 |       ["error", false],
16 |       ["link", false],
17 |       ["large", false],
18 |       ["small", false],
19 |       ["disabled", false]
20 |     ]);
21 |     expect(verifyPropsDefaultValue(comp, expected)).toEqual(true);
22 |   });
23 | 
24 |   it("Test verifyPropsDefaultValue() returns false when props are incorrect", function() {
25 |     const comp = mount(<Button />);
26 |     const expected = new Map([
27 |       ["children", "Default Button"],
28 |       ["outline", true],
29 |       ["primary", true],
30 |       ["secondary", true],
31 |       ["warning", true],
32 |       ["error", true],
33 |       ["link", true],
34 |       ["large", true],
35 |       ["small", true],
36 |       ["disabled", true]
37 |     ]);
38 |     expect(verifyPropsDefaultValue(comp, expected)).toEqual(false);
39 |   });
40 | });
41 | 


--------------------------------------------------------------------------------
/src/utils/events.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   getMousePosition(event) {
 3 |     return {
 4 |       x: event.pageX,
 5 |       y: event.pageY
 6 |     };
 7 |   },
 8 |   getTouchPosition(event) {
 9 |     return {
10 |       x: event.touches[0].pageX,
11 |       y: event.touches[0].pageY
12 |     };
13 |   },
14 |   pauseEvent(event) {
15 |     event.stopPropagation();
16 |     event.preventDefault();
17 |     event.returnValue = false;
18 |     event.cancelBubble = true;
19 |   },
20 |   addEventsToDocument(eventMap) {
21 |     for (const key in eventMap) {
22 |       document.addEventListener(key, eventMap[key], false);
23 |     }
24 |   },
25 |   removeEventsFromDocument(eventMap) {
26 |     for (const key in eventMap) {
27 |       document.removeEventListener(key, eventMap[key], false);
28 |     }
29 |   },
30 |   targetIsDescendant(event, parent) {
31 |     let node = event.target;
32 |     while (node !== null) {
33 |       if (node === parent) {
34 |         return true;
35 |       }
36 |       node = node.parentNode;
37 |     }
38 |     return false;
39 |   }
40 | };
41 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | import events from "./events";
2 | import prefixer from "./prefixer";
3 | // import time from './time';
4 | import utils from "./utils";
5 | 
6 | export { events, prefixer, utils };
7 | 


--------------------------------------------------------------------------------
/src/utils/messages.js:
--------------------------------------------------------------------------------
 1 | const messages = {
 2 |   requiredMessage: "This field is required",
 3 |   selectOne: "Select One",
 4 |   onSubmitAction: "Pass either onSubmit or action",
 5 |   missingRequired: "Required input value is empty",
 6 |   expandAll: "Expand All"
 7 | };
 8 | 
 9 | export default messages;
10 | 


--------------------------------------------------------------------------------
/src/utils/polyfills.js:
--------------------------------------------------------------------------------
1 | import "core-js/fn/array/from";
2 | import "core-js/fn/array/iterator";
3 | import "core-js/fn/map";
4 | import "core-js/fn/string/starts-with";
5 | import "core-js/fn/symbol";
6 | 


--------------------------------------------------------------------------------
/src/utils/prefixer.js:
--------------------------------------------------------------------------------
 1 | const WEBKIT = "Webkit";
 2 | const MICROSOFT = "Ms";
 3 | 
 4 | const properties = {
 5 |   transform: [WEBKIT, MICROSOFT]
 6 | };
 7 | 
 8 | function capitalize(string) {
 9 |   return string.charAt(0).toUpperCase() + string.substr(1);
10 | }
11 | 
12 | function getPrefixes(property, value) {
13 |   return properties[property].reduce(function(acc, item) {
14 |     acc[`${item}${capitalize(property)}`] = value;
15 |     return acc;
16 |   }, {});
17 | }
18 | 
19 | function addPrefixesTo(style, property, value) {
20 |   const vendor = getPrefixes(property, value);
21 |   for (const prefix in vendor) {
22 |     style[prefix] = vendor[prefix];
23 |   }
24 | 
25 |   return style;
26 | }
27 | 
28 | function prefixer(style, defaultValue = {}) {
29 |   const _style = defaultValue;
30 |   for (const property in style) {
31 |     _style[property] = style[property];
32 |     if (properties[property]) {
33 |       addPrefixesTo(_style, property, style[property]);
34 |     }
35 |   }
36 | 
37 |   return _style;
38 | }
39 | 
40 | export default prefixer;
41 | 


--------------------------------------------------------------------------------
/src/utils/propsVerification.js:
--------------------------------------------------------------------------------
 1 | export function verifyPropsDefaultValue(component, expectedProps) {
 2 |   //Compares each property value of the component with the expected value
 3 | 
 4 |   let result = true;
 5 |   let partialResult;
 6 | 
 7 |   for (let [compPropName, compPropValue] of expectedProps.entries()) {
 8 |     partialResult = component.props()[compPropName] === compPropValue;
 9 | 
10 |     if (!partialResult) {
11 |       console.log(
12 |         "[" +
13 |           compPropName +
14 |           "] -> Got: " +
15 |           component.props()[compPropName] +
16 |           " - expected: " +
17 |           compPropValue
18 |       );
19 |       result = false;
20 |     }
21 |   }
22 |   return result;
23 | }
24 | 


--------------------------------------------------------------------------------