Initial migration from private repo

.browserslistrc

@@ -0,0 +1,6 @@
+Explorer > 9
+last 2 Chrome versions
+last 2 Firefox versions
+last 2 Safari versions
+last 2 iOS versions
+Android 4

.dockerignore

@@ -0,0 +1,14 @@
+# Dev dependencies
+# --------------
+node_modules
+
+# Test dependencies
+# --------------
+.travis.yml
+
+# Gitignore referenced things
+# --------------
+.jest
+.tscache
+build
+.DS_Store

.eslintrc.json

@@ -0,0 +1,12 @@
+{
+    "extends": "airbnb",
+    "plugins": [
+        "react",
+        "jsx-a11y",
+        "import"
+    ],
+    "rules": {
+      "global-require": "off",
+      "import/no-extraneous-dependencies": "off"
+    }
+}

.gitignore

@@ -1,59 +1,7 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Typescript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
+/.jest
+/.tscache
+/build
+/dist
+/node_modules
 
+.DS_Store

.npmignore

@@ -0,0 +1,3 @@
+# Only need to publish the dist/ directory, ignore everything else
+*
+!dist/**

.travis.yml

@@ -0,0 +1,12 @@
+language: node-js
+
+node_js:
+  - "6"
+
+before_install:
+  - nvm install 6
+  - nvm use 6
+  - npm install -g yarn
+  - yarn install
+
+script: yarn run test

CONTRIBUTING

@@ -0,0 +1,6 @@
+This project has adopted the [Microsoft Open Source Code of
+Conduct](https://opensource.microsoft.com/codeofconduct/).
+For more information see the [Code of Conduct
+FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
+contact [opencode@microsoft.com](mailto:opencode@microsoft.com)
+with any additional questions or comments.

Dockerfile

@@ -0,0 +1,26 @@
+FROM quay.io/travisci/travis-node-js:latest
+
+RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
+RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
+RUN apt-get update && sudo apt-get install yarn
+RUN su - travis -c "nvm install 6.10.3"
+
+ENV APP_ROOT /usr/src/yamui
+RUN mkdir -p $APP_ROOT
+WORKDIR $APP_ROOT
+
+# Only cause Docker cache miss on dependency changes
+COPY ./package.json $APP_ROOT/package.json
+COPY ./yarn.lock $APP_ROOT/yarn.lock
+
+# Put local node_modules binaries in global path
+# TODO: Sort out "travis" user's path/nvm so we don't need to include the node path manually
+#       For public Github let's use Docker container to match the public Travis container
+ENV PATH $APP_ROOT/node_modules/.bin:/home/travis/.nvm/versions/node/v6.10.3/bin:$PATH
+
+RUN yarn install
+
+# Copy over the app
+COPY . $APP_ROOT
+
+CMD ["yarn", "test"]

LICENSE

@@ -1,21 +1,13 @@
-    MIT License
-
-    Copyright (c) Microsoft Corporation. All rights reserved.
-
-    Permission is hereby granted, free of charge, to any person obtaining a copy
-    of this software and associated documentation files (the "Software"), to deal
-    in the Software without restriction, including without limitation the rights
-    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-    copies of the Software, and to permit persons to whom the Software is
-    furnished to do so, subject to the following conditions:
-
-    The above copyright notice and this permission notice shall be included in all
-    copies or substantial portions of the Software.
-
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-    SOFTWARE
+YamUI
+
+Copyright (c) 2017 - present Microsoft Corporation
+
+All rights reserved. 
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,14 +1,82 @@
-
-# Contributing
-
-This project welcomes contributions and suggestions.  Most contributions require you to agree to a
-Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
-the rights to use your contribution. For details, visit https://cla.microsoft.com.
-
-When you submit a pull request, a CLA-bot will automatically determine whether you need to provide
-a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions
-provided by the bot. You will only need to do this once across all repos using our CLA.
-
-This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
-For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
-contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
+# YamUI
+UI Component Framework for Yammer.com. This is built with React on top of [Fabric](https://dev.office.com/fabric#/components/) components. Unit tests with [Jest](https://facebook.github.io/jest/), isolated development environment + documentation with [ReactStorybook](https://github.com/storybooks/storybook), visual diff regression with [BackstopJS](https://garris.github.io/BackstopJS/). Visual diff tasks run within a [Docker](https://www.docker.com/) container to ensure consistency between local dev environments and CI.
+
+## Installation
+* `git clone https://github.int.yammer.com/yammer/yamui.git`
+* `cd yamui`
+* `yarn install`
+
+To run visual diff regression tests:
+* Install docker from https://docs.docker.com/docker-for-mac/install/
+* Create an alias `y` in your `~/.zshrc` or `~/.bashrc` file for the `yarn-docker` executable, like this: `alias y="./yarn-docker"`. Visual-diff tasks `test` and `test:visual` need to run in Docker via the `y` alias -- `y test` and `y test:visual`.
+
+## Development
+### Start up the dev server:
+* `yarn start:dev` and visit http://localhost:5555/
+
+### Build some components
+* Develop components in the `/src/components` directory.
+* Create "stories" for the Storybook app in `/stories`. These stories are important because they document how components should be used and what options/configurations they accept. These stories will also be used in visual diff regression tests to ensure new changes are deliberate and approved before PRs are merged.
+* Include a README.md file in your component's directory, and include it in the stories.
+* The dev tasks will copy and compile individual files into the `/dist` directory, then Storybook will pick up those changes and automatically update the app in your browser using Hot Module Replacement.
+
+### Focus on unit tests
+* `yarn start:test` will start Jest in watch mode, showing passing status and a covereage report. The CLI task remains active and will re-test automatically as you make changes.
+* `yarn report:unit` will open the latest test coverage report in your browser. The reports let you browse into specific tests and get details about each line, which can be helpful when you're having trouble getting test coverage.
+
+### Run visual diff regression tests with BackstopJS
+* `y test:visual` will compile the components, build+export a static version of the Storybook app, start a dev server, take screenshots of each Storybook story, and fail if there are visual changes from the last approved screenshots. This will fail on brand new stories because they won't have reference images. Unless you're developing on a Linux computer, this task must run within the Docker container via the `y` shortcut. Running via `yarn` on Mac or Windows will use your OS version of PhantomJS Webkit and will fail with suble visual differences. Running in the Docker Linux container ensures consistent screenshots between all development evironments and CI.
+* `yarn report:visual` will open the most recent visual test you've run in your browser. This is helpful if you have failing visual tests and want to see exactly what is wrong.
+* `yarn visual:approve` will approve your latest test images and overwrite the previous reference images. Use this when you are deliberately changing a component or its story and you have manually verified that the new visual changes are correct.
+
+### Test all the things
+* `y test` will run all validations - linting, unit tests and visual diff regression tests. If this passes you should be all good to go.
+* `yarn report` will open latest results from both Jest unit tests and Backstop visual diff regression tests.
+
+### Adding icons
+1. Put clean SVG(s) in the src/components/Icon/icons folder
+2. Export from src/components/Icon/icons/index.ts using the filename as the label
+3. Use the icon via it's label `<Icon icon="plus" />`
+
+
+## Using YamUI in your own app
+### Importing the baseline CSS
+Import `yamui/dist/yamui-base.css` into your app. You could link to it directly before your own CSS, or import it through JS/CSS and include it at the top of your CSS bundle. This file is currently about 4kb minified+gzipped. This is a requirement as YamUI expects to own the baseline styles of the page.
+
+### Using components
+Each component is compiled from its TypeScript source into `yamui/dist/components`. This allows you to import the individual components you need and keep your bundle size smaller. Note that each component may import its own CSS and other JS dependencies so you may need to adjust your build process to accommodate.
+
+Example importing a Button component:
+```
+import Button, { ButtonSize, ButtonColor } from 'yamui/dist/components/Button';
+```
+
+Example using a Button component:
+```
+<Button size={ButtonSize.SMALL} color={ButtonColor.SECONDARY} text="Click me!" />
+```
+
+
+## Roadmap
+
+The YamUI project is currently in a pre-release state. We are building out the components and features we need for Yammer.com to meet our specific UX Design guidelines.
+
+## Contributing
+
+This project welcomes contributions and suggestions.  Most contributions require you to agree to a
+Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
+the rights to use your contribution. For details, visit https://cla.microsoft.com.
+
+When you submit a pull request, a CLA-bot will automatically determine whether you need to provide
+a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions
+provided by the bot. You will only need to do this once across all repos using our CLA.
+
+This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
+For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
+contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
+
+## Licenses
+
+All files on the YamUI GitHub repository are subject to the MIT license. Please read the LICENSE file at the root of the project.
+
+Note that we depend on [Fabric](https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react) for fonts. Usage of the fonts and icons referenced in YamUI is subject to the terms of the [assets license agreement](https://static2.sharepointonline.com/files/fabric/assets/license.txt).

assets/README.md

@@ -0,0 +1,25 @@
+# YamUI Components
+
+Yammer UX will put graphics for all YamUI components here, linked to a spec reference or redlines (Zeplin).
+
+If a component needs to be modified, Yammer UX will update the graphic and indicate all changes in git comments.
+
+## Design Foundation
+
++ [Color](https://app.zeplin.io/project/5907d6451d2b06c6b36b2852/screen/5914ae1f79393dc15ff114e4)
+
++ [Typeramp](https://app.zeplin.io/project/5907d6451d2b06c6b36b2852/screen/5914b0049fdbc6c59b7fd0ea)
+
+
+## Components
+
++ [Avatar](https://zpl.io/Z2hSoji)
+
++ [Button](https://app.zeplin.io/project/5907d6451d2b06c6b36b2852/screen/5931e13d7908f752ad96cd07)
+
++ [Text](https://app.zeplin.io/project/5907d6451d2b06c6b36b2852/screen/5914b0049fdbc6c59b7fd0ea)
+
+
+## Modules
+
++ [Hovercards](https://app.zeplin.io/project/5907d6451d2b06c6b36b2852/screen/5914ae1e1aec3c7a2c81dde9)

config/backstop/config.js

@@ -0,0 +1,59 @@
+const getStories = require('./get-stories.js');
+
+const scenarioBase = {
+  label: '',
+  url: '',
+  hideSelectors: [],
+  removeSelectors: [],
+  selectorExpansion: true,
+  selectors: [
+    'body',
+  ],
+  readyEvent: null,
+  delay: 350,
+  misMatchThreshold: 0.001,
+};
+function getScenarios() {
+  const storybook = getStories.getAllStories();
+  const storybookScenarios = [];
+  const kinds = Object.keys(storybook);
+  kinds.forEach((kind) => {
+    storybook[kind].forEach((story) => {
+      storybookScenarios.push(Object.assign({}, scenarioBase, {
+        label: `${kind} - ${story}`,
+        url: `http://localhost:5555/iframe.html?selectedKind=${kind}&selectedStory=${story}&dataId=0`,
+      }));
+    });
+  });
+
+  return storybookScenarios;
+}
+
+const config = {
+  id: 'storybook_tests',
+  debug: false,
+  viewports: [
+    // We can test more widths when we start building responsive components
+    {
+      name: 'phone_portrait',
+      width: 375,
+      height: 625,
+    },
+  ],
+  scenarios: getScenarios(),
+  paths: {
+    casper_scripts: 'config/backstop/scripts',
+    bitmaps_reference: 'config/backstop/reference',
+    bitmaps_test: 'build/visualdiff/test',
+    html_report: 'build/visualdiff/html_report',
+    ci_report: 'build/visualdiff/ci_report',
+  },
+  casperFlags: [
+    '--log-level=error',
+  ],
+  engine: 'phantomjs',
+  report: ['browser', 'CI'],
+  openReport: false,
+};
+
+module.exports = config;