Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit a5172b1

Browse files
birdofpreyrubirdofpreyru
committed
Adds typography mixins and standard themed buttons
1 parent d185e09 commit a5172b1

18 files changed

+608
-9
lines changed

Diff for: ‎.babelrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"presets": ["topcoder-react-utils/config/babel/lib-compile"]
2+
"presets": ["topcoder-react-utils/config/babel/node-ssr"]
33
}

Diff for: ‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,20 @@ To use any of the style mixins in your SCSS code you should import them as
2424
```scss
2525
@import "~topcoder-react-ui-kit/src/styles/mixins";
2626
```
27+
- [**`Typography`**](docs/typography-mixins.md) — Standard mixins for
28+
body text, fonts, headings, labels, and titles;
29+
2730
- [**`Variables`**](docs/variables.md) — Standard colors, design break
2831
points and other global style constants;
2932

33+
### Themed Components
34+
Note that most of these components are inherited from their
35+
[`topcoder-react-utils`](https://www.npmjs.com/package/topcoder-react-utils)
36+
counterparts, and `topcoder-react-ui-kit` just takes care about their proper
37+
theming according to the TC UI Kit design specs.
38+
39+
- [**`Buttons`**](docs/buttons.md) — Themed buttons.
40+
3041
### Development
3142
*To be written*
3243

Diff for: ‎config/webpack/development.js

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ const path = require('path');
55
const standardConfig = configFactory({
66
context: path.resolve(__dirname, '../..'),
77
entry: './src',
8+
library: 'topcoder-react-ui-kit',
89
});
910

1011
module.exports = standardConfig;

Diff for: ‎config/webpack/production.js

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ const path = require('path');
55
const standardConfig = configFactory({
66
context: path.resolve(__dirname, '../..'),
77
entry: './src',
8+
library: 'topcoder-react-ui-kit',
89
});
910

1011
module.exports = standardConfig;

Diff for: ‎docs/buttons.md

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Buttons
2+
Themed buttons and button-like links.
3+
4+
[Live demo](https://community-app.topcoder-dev.com/examples/buttons/)
5+
6+
[Examples](#examples)
7+
8+
All these buttons are inherited from the `topcoder-react-utils`'s
9+
[Button](https://github.com/topcoder-platform/topcoder-react-utils/blob/HEAD/docs/button.md).
10+
Check Button's documentation for the details of the programmatical interface all
11+
these buttons provide. `topcoder-react-ui-kit` just takes care about their
12+
proper styling matching the TC UI Kit design specs.
13+
14+
The following buttons types are provided:
15+
- **`Button`**;
16+
- **`DangerButton`**;
17+
- **`GhostButton`**;
18+
- **`PrimaryButton`**;
19+
- **`SecondaryButton`**.
20+
21+
In some cases you may want to access corresponding SCSS stylesheets directly,
22+
to further use them for your custom styling, you can find them in the
23+
[`src/shared/components/buttons/themes`](../src/shared/components/buttons/themes)
24+
folder.
25+
26+
### <a name="examples">Examples</a>
27+
28+
```jsx
29+
import { PrimaryButton } from 'topcoder-react-ui-kit`;
30+
import React from 'react';
31+
32+
export default function() {
33+
return (
34+
<PrimaryButton
35+
onClick={() => console.log('PrimaryButton was clicked!')}
36+
>Click Me!</PrimaryButton>
37+
);
38+
}
39+
```

Diff for: ‎docs/typography-mixins.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Typography
2+
3+
Standard mixins for body text, fonts, headings, labels, and titles.
4+
5+
[Live demo](https://community-app.topcoder-dev.com/examples/typography)
6+
7+
All these mixins use fonts from Roboto family. In majority of cases it is easy
8+
to figure out which mixin you need for a specific element just by its font size
9+
/ line height.
10+
11+
### Body Text Mixins
12+
- 20/25px &mdash; **`tc-body-lg`**;
13+
- 15/25px &mdash; **`tc-body-md`**;
14+
- 13/25px &mdash; **`tc-body-sm`**;
15+
- 11/20px &mdash; **`tc-body-xs`**.
16+
17+
### Heading Mixins
18+
- 36/45px &mdash; **`tc-heading-xl`**;
19+
- 28/35px &mdash; **`tc-heading-lg`**;
20+
- 20/30px &mdash; **`tc-heading-md`**;
21+
- 15/25px &mdash; **`tc-heading-sm`**;
22+
- 13/25px &mdash; **`tc-heading-xs`**.
23+
24+
### Label Mixins
25+
- 20/25px &mdash; **`tc-label-xl`**;
26+
- 15/20px &mdash; **`tc-label-lg`**;
27+
- 13/20px &mdash; **`tc-label-md`**;
28+
- 12/15px &mdash; **`tc-label-sm`**;
29+
- 11/15px &mdash; **`tc-label-xs`**.
30+
31+
### Title Mixins
32+
- 42/50px &mdash; **`tc-title`**.
33+
34+
### Font Mixins
35+
In some cases you may want to only include into a component the font-family
36+
and the correct font weight. Here are some standard mixins for that (the numbers
37+
in the list specify the weight):
38+
39+
##### font-family: Roboto, Helvetica, Arial, sans-serif
40+
- 100 &mdash; **`roboto-thin`**;
41+
- 300 &mdash; **`roboto-light`**;
42+
- 400 &mdash; **`roboto-regular`**;
43+
- 500 &mdash; **`roboto-medium`**;
44+
- 700 &mdash; **`roboto-bold`**;
45+
- 900 &mdash; **`roboto-black`**.
46+
47+
##### font-family: Roboto Mono, monospace
48+
- 400 &mdash; **`roboto-mono-regular`**.

Diff for: ‎package-lock.json

+46-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+6-3
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"UI Kit"
1515
],
1616
"license": "UNLICENSED",
17-
"main": "dist",
17+
"main": "dist/index.js",
1818
"name": "topcoder-react-ui-kit",
1919
"repository": {
2020
"type": "git",
@@ -26,9 +26,10 @@
2626
"clean": "rimraf dist",
2727
"prepublishOnly": "npm run build"
2828
},
29-
"version": "0.0.3",
29+
"version": "0.0.4",
3030
"dependencies": {
31-
"topcoder-react-utils": "0.0.34"
31+
"react-css-super-themr": "^2.2.0",
32+
"topcoder-react-utils": "0.0.37"
3233
},
3334
"devDependencies": {
3435
"autoprefixer": "^7.2.5",
@@ -41,6 +42,7 @@
4142
"babel-plugin-module-resolver": "^3.0.0",
4243
"babel-plugin-react-css-modules": "^3.3.3",
4344
"babel-plugin-transform-assets": "^0.2.0",
45+
"babel-plugin-transform-export-extensions": "^6.22.0",
4446
"babel-plugin-transform-runtime": "^6.23.0",
4547
"babel-polyfill": "^6.26.0",
4648
"babel-preset-env": "^1.6.1",
@@ -61,6 +63,7 @@
6163
"nodelist-foreach-polyfill": "^1.2.0",
6264
"optimize-css-assets-webpack-plugin": "^3.2.0",
6365
"postcss-loader": "^2.0.10",
66+
"postcss-scss": "^1.0.3",
6467
"postcss-url": "^7.3.0",
6568
"react-hot-loader": "^3.1.3",
6669
"resolve-url-loader": "^2.2.1",

Diff for: ‎src/index.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
import 'styles/global';
2-
// import './assets/test.png';
2+
3+
import * as buttons from 'components/buttons';
4+
5+
module.exports = buttons;

Diff for: ‎src/shared/components/buttons/index.jsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* Standard themed buttons for TC UI Kit.
3+
*/
4+
5+
import { themr } from 'react-css-super-themr';
6+
import { Button as ProtoButton } from 'topcoder-react-utils';
7+
8+
import dangerTheme from './themes/danger.scss';
9+
import defaultTheme from './themes/default.scss';
10+
import ghostTheme from './themes/ghost.scss';
11+
import primaryTheme from './themes/primary.scss';
12+
import secondaryTheme from './themes/secondary.scss';
13+
14+
export const Button = themr('DefaultButton', defaultTheme)(ProtoButton);
15+
export const DangerButton = themr('DangerButton', dangerTheme)(ProtoButton);
16+
export const GhostButton = themr('GhostButton', ghostTheme)(ProtoButton);
17+
export const PrimaryButton = themr('PrimaryButton', primaryTheme)(ProtoButton);
18+
19+
export const SecondaryButton =
20+
themr('SecondaryButton', secondaryTheme)(ProtoButton);

Diff for: ‎src/shared/components/buttons/themes/danger.scss

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* Danger button (red background, white text).
3+
*/
4+
5+
@import "default";
6+
7+
.button {
8+
background: $tc-red-70;
9+
border-color: transparent;
10+
color: $tc-white;
11+
}
12+
13+
.disabled {
14+
background-color: $tc-gray-20;
15+
opacity: 1;
16+
}
17+
18+
.link,
19+
.regular {
20+
&:focus {
21+
box-shadow: 0 0 2px 1px #ffd4d1;
22+
border-color: $tc-red;
23+
outline: none;
24+
}
25+
26+
&:hover {
27+
background-image: linear-gradient(to bottom, #ff5b52, #f22f24);
28+
border-color: transparent;
29+
color: $tc-white;
30+
}
31+
32+
&:active {
33+
background-color: $tc-red;
34+
background-image: none;
35+
box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.38);
36+
border-color: transparent;
37+
}
38+
}
39+
40+
.link:visited {
41+
color: $tc-white;
42+
}

0 commit comments

Comments
 (0)