Adds typography mixins and standard themed buttons

Author: birdofpreyru

.babelrc

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

README.md

@@ -24,9 +24,20 @@ 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";
 ```
+- [**`Typography`**](docs/typography-mixins.md) — Standard mixins for
+  body text, fonts, headings, labels, and titles;
+
 - [**`Variables`**](docs/variables.md) — Standard colors, design break
   points and other global style constants;
 
+### Themed Components
+Note that most of these components are inherited from their
+[`topcoder-react-utils`](https://www.npmjs.com/package/topcoder-react-utils)
+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.
+
 ### Development
 *To be written*
 

config/webpack/development.js

@@ -5,6 +5,7 @@ const path = require('path');
 const standardConfig = configFactory({
   context: path.resolve(__dirname, '../..'),
   entry: './src',
+  library: 'topcoder-react-ui-kit',
 });
 
 module.exports = standardConfig;

config/webpack/production.js

@@ -5,6 +5,7 @@ const path = require('path');
 const standardConfig = configFactory({
   context: path.resolve(__dirname, '../..'),
   entry: './src',
+  library: 'topcoder-react-ui-kit',
 });
 
 module.exports = standardConfig;

docs/buttons.md

@@ -0,0 +1,39 @@
+# Buttons
+Themed buttons and button-like links.
+
+[Live demo](https://community-app.topcoder-dev.com/examples/buttons/)
+
+[Examples](#examples)
+
+All these buttons are inherited from the `topcoder-react-utils`'s
+[Button](https://github.com/topcoder-platform/topcoder-react-utils/blob/HEAD/docs/button.md).
+Check Button's documentation for the details of the programmatical interface all
+these buttons provide. `topcoder-react-ui-kit` just takes care about their
+proper styling matching the TC UI Kit design specs.
+
+The following buttons types are provided:
+- **`Button`**;
+- **`DangerButton`**;
+- **`GhostButton`**;
+- **`PrimaryButton`**;
+- **`SecondaryButton`**.
+
+In some cases you may want to access corresponding SCSS stylesheets directly,
+to further use them for your custom styling, you can find them in the
+[`src/shared/components/buttons/themes`](../src/shared/components/buttons/themes)
+folder.
+
+### <a name="examples">Examples</a>
+
+```jsx
+import { PrimaryButton } from 'topcoder-react-ui-kit`;
+import React from 'react';
+
+export default function() {
+  return (
+    <PrimaryButton
+      onClick={() => console.log('PrimaryButton was clicked!')}
+    >Click Me!</PrimaryButton>
+  );
+}
+```

docs/typography-mixins.md

@@ -0,0 +1,48 @@
+# Typography
+
+Standard mixins for body text, fonts, headings, labels, and titles.
+
+[Live demo](https://community-app.topcoder-dev.com/examples/typography)
+
+All these mixins use fonts from Roboto family. In majority of cases it is easy
+to figure out which mixin you need for a specific element just by its font size
+/ line height.
+
+### Body Text Mixins
+- 20/25px — **`tc-body-lg`**;
+- 15/25px — **`tc-body-md`**;
+- 13/25px — **`tc-body-sm`**;
+- 11/20px — **`tc-body-xs`**.
+
+### Heading Mixins
+- 36/45px — **`tc-heading-xl`**;
+- 28/35px — **`tc-heading-lg`**;
+- 20/30px — **`tc-heading-md`**;
+- 15/25px — **`tc-heading-sm`**;
+- 13/25px — **`tc-heading-xs`**.
+
+### Label Mixins
+- 20/25px — **`tc-label-xl`**;
+- 15/20px — **`tc-label-lg`**;
+- 13/20px — **`tc-label-md`**;
+- 12/15px — **`tc-label-sm`**;
+- 11/15px — **`tc-label-xs`**.
+
+### Title Mixins
+- 42/50px — **`tc-title`**.
+
+### Font Mixins
+In some cases you may want to only include into a component the font-family
+and the correct font weight. Here are some standard mixins for that (the numbers
+in the list specify the weight):
+
+##### font-family: Roboto, Helvetica, Arial, sans-serif
+- 100 — **`roboto-thin`**;
+- 300 — **`roboto-light`**;
+- 400 — **`roboto-regular`**;
+- 500 — **`roboto-medium`**;
+- 700 — **`roboto-bold`**;
+- 900 — **`roboto-black`**.
+
+##### font-family: Roboto Mono, monospace
+- 400 — **`roboto-mono-regular`**.

package-lock.json

@@ -14,7 +14,7 @@
     "UI Kit"
   ],
   "license": "UNLICENSED",
-  "main": "dist",
+  "main": "dist/index.js",
   "name": "topcoder-react-ui-kit",
   "repository": {
     "type": "git",
@@ -26,9 +26,10 @@
     "clean": "rimraf dist",
     "prepublishOnly": "npm run build"
   },
-  "version": "0.0.3",
+  "version": "0.0.4",
   "dependencies": {
-    "topcoder-react-utils": "0.0.34"
+    "react-css-super-themr": "^2.2.0",
+    "topcoder-react-utils": "0.0.37"
   },
   "devDependencies": {
     "autoprefixer": "^7.2.5",
@@ -41,6 +42,7 @@
     "babel-plugin-module-resolver": "^3.0.0",
     "babel-plugin-react-css-modules": "^3.3.3",
     "babel-plugin-transform-assets": "^0.2.0",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
@@ -61,6 +63,7 @@
     "nodelist-foreach-polyfill": "^1.2.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "postcss-loader": "^2.0.10",
+    "postcss-scss": "^1.0.3",
     "postcss-url": "^7.3.0",
     "react-hot-loader": "^3.1.3",
     "resolve-url-loader": "^2.2.1",

package.json

@@ -1,2 +1,5 @@
 import 'styles/global';
-// import './assets/test.png';
+
+import * as buttons from 'components/buttons';
+
+module.exports = buttons;

src/index.js

@@ -0,0 +1,20 @@
+/**
+ * Standard themed buttons for TC UI Kit.
+ */
+
+import { themr } from 'react-css-super-themr';
+import { Button as ProtoButton } from 'topcoder-react-utils';
+
+import dangerTheme from './themes/danger.scss';
+import defaultTheme from './themes/default.scss';
+import ghostTheme from './themes/ghost.scss';
+import primaryTheme from './themes/primary.scss';
+import secondaryTheme from './themes/secondary.scss';
+
+export const Button = themr('DefaultButton', defaultTheme)(ProtoButton);
+export const DangerButton = themr('DangerButton', dangerTheme)(ProtoButton);
+export const GhostButton = themr('GhostButton', ghostTheme)(ProtoButton);
+export const PrimaryButton = themr('PrimaryButton', primaryTheme)(ProtoButton);
+
+export const SecondaryButton =
+  themr('SecondaryButton', secondaryTheme)(ProtoButton);