Merge branch 'develop'

Author: birdofpreyru

.eslintignore

@@ -1 +1,3 @@
-dist
+__coverage__
+dist
+node_modules

.gitignore

@@ -1,3 +1,4 @@
+__coverage__
 .build-info
 .sass-cache
 dist

CHANGELOG.md

@@ -1,4 +1,7 @@
 # Topcoder React UI Kit Changelog
 
+### v0.1.0
+The first release.
+
 ### v0.0.x
 Pre-release drafts of the initial package version. A big journey starts here.

README.md

@@ -1,3 +1,8 @@
+![Dev Build Status](https://img.shields.io/circleci/project/github/topcoder-platform/topcoder-react-ui-kit/develop.svg?label=develop)
+![Master Build Status](https://img.shields.io/circleci/project/github/topcoder-platform/topcoder-react-ui-kit/master.svg?label=master)
+![Latest NPM Release](https://img.shields.io/npm/v/topcoder-react-ui-kit.svg)
+![NPM Downloads](https://img.shields.io/npm/dm/topcoder-react-ui-kit.svg)
+
 # Topcoder React UI Kit
 
 The [Topcoder](https://www.topcoder.com) UI Kit for internal ReactJS projects.
@@ -12,18 +17,34 @@ Import its global stylesheet into the root ReactJS component of your app:
 ```jsx
 import 'topcoder-react-ui-kit/dist/style.css';
 ```
+**NOTE:** This will automatically import all
+[global styles from `topcoder-react-utils`](https://github.com/topcoder-platform/topcoder-react-utils/blob/master/docs/global-styles.md)
+— no need do include those separately!
 
 ### Global Styles
 The import of `topcoder-react-ui-kit/dist/style.css` stylesheet provides you with
 (assuming that your Webpack config properly parses that stylesheet, and bundles
 all assets referenced from there into your bundle):
+- [**Global styles inherited from `topcoder-react-utils`**](https://github.com/topcoder-platform/topcoder-react-utils/blob/HEAD/docs/global-styles.md)
+—
+[Eric Meyer's "Reset CSS" 2.0](https://meyerweb.com/eric/tools/css/reset/);
+`geometryPrecision` of text rendering;
 - [**`Fonts`**](docs/fonts.md) — Declaration of standard Topcoder fonts;
 
 ### Style Mixins
 To use any of the style mixins in your SCSS code you should import them as
 ```scss
 @import "~topcoder-react-ui-kit/src/styles/mixins";
 ```
+**NOTE:** It will automatically include all
+[SCSS mixins from `topcoder-react-utils`](https://github.com/topcoder-platform/topcoder-react-utils/blob/master/docs/scss-mixins.md)
+— no need to include those separately!
+
+- [**Mixins inherited from `topcoder-react-utils`**](https://github.com/topcoder-platform/topcoder-react-utils/blob/HEAD/docs/scss-mixins.md)
+—
+[font definition](https://github.com/topcoder-platform/topcoder-react-utils/blob/HEAD/docs/scss-mixins.md#font-mixins),
+[media conditions](https://github.com/topcoder-platform/topcoder-react-utils/blob/HEAD/docs/scss-mixins.md#media-mixins);
+
 - [**`Typography`**](docs/typography-mixins.md) — Standard mixins for
   body text, fonts, headings, labels, and titles;
 
@@ -36,10 +57,22 @@ Note that most of these components are inherited from their
 counterparts, and `topcoder-react-ui-kit` just takes care about their proper
 theming according to the TC UI Kit design specs.
 
-- [**`Buttons`**](docs/buttons.md) — Themed buttons.
+- [**`Avatar`**](docs/avatar.md) — Themed avatar;
+- [**`Buttons`**](docs/buttons.md) — Themed buttons;
+- [**`Tags`**](docs/tags.md) — Small tags for technologies, event types,
+  etc. Technically, they are buttons styled in a different way.
 
 ### Development
-*To be written*
+To develop inside a host package just `$ npm link` it.
+
+CI/CD with CircleCI 2.0 is set up. Commits to the protected `master` branch will
+do testing and release to NPM (be sure to properly bump the version with
+`$ npm version TYPE`, where `TYPE` is one of `major`/`minor`/`patch`; and
+keep in mind that `patch` updates should never break backward compatibility;
+if your `minor` or `major` updates includes breaking changes, don't forget
+to document those in the [CHANGELOG](CHANGELOG.md)).
+
+*To be written in a better way*
 
 ### License
 UNLICENSED — for internal Topcoder projects only.

__tests__/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["topcoder-react-utils/config/babel/node-ssr"]
+}

__tests__/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../node_modules/topcoder-react-utils/config/eslint/jest.json"
+}

__tests__/index.js

@@ -0,0 +1,21 @@
+import iface from '../src';
+
+test('Package exports expected interface', () => {
+  expect(iface).toHaveProperty('Avatar');
+
+  /* components/buttons */
+  expect(iface).toHaveProperty('Button');
+  expect(iface).toHaveProperty('DangerButton');
+  expect(iface).toHaveProperty('GhostButton');
+  expect(iface).toHaveProperty('PrimaryButton');
+  expect(iface).toHaveProperty('SecondaryButton');
+
+  /* components/tags */
+  expect(iface).toHaveProperty('Tag');
+  expect(iface).toHaveProperty('DataScienceTrackTag');
+  expect(iface).toHaveProperty('DataScienceTrackEventTag');
+  expect(iface).toHaveProperty('DesignTrackTag');
+  expect(iface).toHaveProperty('DesignTrackEventTag');
+  expect(iface).toHaveProperty('DevelopmentTrackTag');
+  expect(iface).toHaveProperty('DevelopmentTrackEventTag');
+});

__tests__/shared/components/Avatar.jsx

@@ -0,0 +1,7 @@
+import Avatar from 'components/Avatar';
+import React from 'react';
+import { snapshot } from 'topcoder-react-utils/jest-utils';
+
+test('Snapshots', () => {
+  snapshot(<Avatar />);
+});

__tests__/shared/components/__snapshots__/Avatar.jsx.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshots 1`] = `
+<svg
+  className="style__avatar___3QhkH"
+  height="141"
+  viewBox="0 0 141 141"
+  width="141"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlnsXlink="http://www.w3.org/1999/xlink"
+>
+  <title>
+    ico-user-default
+  </title>
+  <defs>
+    <rect
+      height="140"
+      id="a"
+      rx="306"
+      width="140"
+      x=".8"
+      y=".5"
+    />
+  </defs>
+  <g
+    fill="none"
+    fillRule="evenodd"
+  >
+    <mask
+      fill="#fff"
+      id="b"
+    >
+      <use
+        xlinkHref="#a"
+      />
+    </mask>
+    <use
+      fill="#F0F0F0"
+      xlinkHref="#a"
+    />
+    <path
+      d="M118 137.143c0 4.345-3.501 7.857-7.833 7.857H31.833C27.51 145 24 141.488 24 137.143c0-15.714 15.142-30.376 30.62-36.174-8.937-5.54-14.953-15.377-14.953-26.683v-7.857C39.667 49.072 53.697 35 71 35c17.304 0 31.333 14.072 31.333 31.429v7.857c0 11.306-6.016 21.143-14.946 26.683 15.471 5.798 30.613 20.46 30.613 36.174z"
+      fill="#A3A3AE"
+      mask="url(#b)"
+      opacity=".2"
+      stroke="#A3A3AE"
+      strokeWidth="3"
+    />
+  </g>
+</svg>
+`;

config/jest/default.js

@@ -0,0 +1,3 @@
+const config = require('topcoder-react-utils/config/jest/default');
+
+module.exports = config;