Skip to content

Commit e770be2

Browse files
birdofpreyrubirdofpreyru
committed
Avatar, tags, and global styles and mixins from topcoder-react-utils
1 parent 66d103e commit e770be2

23 files changed

+366
-37
lines changed

‎CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
# Topcoder React UI Kit Changelog
22

3+
### v0.1.0
4+
The first release.
5+
36
### v0.0.x
47
Pre-release drafts of the initial package version. A big journey starts here.

‎README.md

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
![Dev Build Status](https://img.shields.io/circleci/project/github/topcoder-platform/topcoder-react-ui-kit/develop.svg?label=develop)
2+
![Master Build Status](https://img.shields.io/circleci/project/github/topcoder-platform/topcoder-react-ui-kit/master.svg?label=master)
3+
![Latest NPM Release](https://img.shields.io/npm/v/topcoder-react-ui-kit.svg)
4+
![NPM Downloads](https://img.shields.io/npm/dm/topcoder-react-ui-kit.svg)
5+
16
# Topcoder React UI Kit
27

38
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:
1217
```jsx
1318
import 'topcoder-react-ui-kit/dist/style.css';
1419
```
20+
**NOTE:** This will automatically import all
21+
[global styles from `topcoder-react-utils`](https://github.com/topcoder-platform/topcoder-react-utils/blob/master/docs/global-styles.md)
22+
— no need do include those separately!
1523

1624
### Global Styles
1725
The import of `topcoder-react-ui-kit/dist/style.css` stylesheet provides you with
1826
(assuming that your Webpack config properly parses that stylesheet, and bundles
1927
all assets referenced from there into your bundle):
28+
- [**Global styles inherited from `topcoder-react-utils`**](https://github.com/topcoder-platform/topcoder-react-utils/blob/HEAD/docs/global-styles.md)
29+
—
30+
[Eric Meyer's "Reset CSS" 2.0](https://meyerweb.com/eric/tools/css/reset/);
31+
`geometryPrecision` of text rendering;
2032
- [**`Fonts`**](docs/fonts.md) — Declaration of standard Topcoder fonts;
2133

2234
### Style Mixins
2335
To use any of the style mixins in your SCSS code you should import them as
2436
```scss
2537
@import "~topcoder-react-ui-kit/src/styles/mixins";
2638
```
39+
**NOTE:** It will automatically include all
40+
[SCSS mixins from `topcoder-react-utils`](https://github.com/topcoder-platform/topcoder-react-utils/blob/master/docs/scss-mixins.md)
41+
— no need to include those separately!
42+
43+
- [**Mixins inherited from `topcoder-react-utils`**](https://github.com/topcoder-platform/topcoder-react-utils/blob/HEAD/docs/scss-mixins.md)
44+
—
45+
[font definition](https://github.com/topcoder-platform/topcoder-react-utils/blob/HEAD/docs/scss-mixins.md#font-mixins),
46+
[media conditions](https://github.com/topcoder-platform/topcoder-react-utils/blob/HEAD/docs/scss-mixins.md#media-mixins);
47+
2748
- [**`Typography`**](docs/typography-mixins.md) — Standard mixins for
2849
body text, fonts, headings, labels, and titles;
2950

@@ -36,10 +57,22 @@ Note that most of these components are inherited from their
3657
counterparts, and `topcoder-react-ui-kit` just takes care about their proper
3758
theming according to the TC UI Kit design specs.
3859

39-
- [**`Buttons`**](docs/buttons.md) — Themed buttons.
60+
- [**`Avatar`**](docs/avatar.md) — Themed avatar;
61+
- [**`Buttons`**](docs/buttons.md) — Themed buttons;
62+
- [**`Tags`**](docs/tags.md) — Small tags for technologies, event types,
63+
etc. Technically, they are buttons styled in a different way.
4064

4165
### Development
42-
*To be written*
66+
To develop inside a host package just `$ npm link` it.
67+
68+
CI/CD with CircleCI 2.0 is set up. Commits to the protected `master` branch will
69+
do testing and release to NPM (be sure to properly bump the version with
70+
`$ npm version TYPE`, where `TYPE` is one of `major`/`minor`/`patch`; and
71+
keep in mind that `patch` updates should never break backward compatibility;
72+
if your `minor` or `major` updates includes breaking changes, don't forget
73+
to document those in the [CHANGELOG](CHANGELOG.md)).
74+
75+
*To be written in a better way*
4376

4477
### License
4578
UNLICENSED — for internal Topcoder projects only.

‎docs/avatar.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Avatar
2+
Themed avatar.
3+
4+
[Example](#example)
5+
6+
This is the themed version of
7+
[Avatar from `topcoder-react-utils`](https://github.com/topcoder-platform/topcoder-react-utils/blob/HEAD/docs/avatar.md).
8+
By default, it is rendered as a round-shaped image of 32px × 32p
9+
size with this default userpic:
10+
![Default Userpic](../src/assets/images/default-user-avatar.svg).
11+
You can further customize the styling via
12+
[`react-css-super-themr`](https://www.npmjs.com/package/react-css-super-themr) mechanics.
13+
14+
### Example
15+
```scss
16+
// style.scss
17+
18+
/* Just to demonstrate ad-hoc styling in action. */
19+
.largeAvatar {
20+
border-radius: 128px;
21+
height: 256px;
22+
width: 256px;
23+
}
24+
```
25+
```jsx
26+
import React from 'react';
27+
import { Avatar } from 'topcoder-react-ui-kit';
28+
29+
import style from './style.scss';
30+
31+
export default function Example() {
32+
return (
33+
<div>
34+
{/* Avatar with the default userpic and style. */}
35+
<Avatar />
36+
37+
{/* Large avatar with the specified userpic. */}
38+
<Avatar
39+
theme={{ avatar: style.largeAvatar }}
40+
url="URL/OF/THE/USERPIC/TO/USE"
41+
/>
42+
</div>
43+
);
44+
}
45+
```

‎docs/tags.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Tags
2+
Small tags for technologies, event types, etc. Technically, they are
3+
[buttons](buttons.md), styled in a different way.
4+
5+
[Live demo](https://community-app.topcoder-dev.com/examples/tags/)
6+
7+
The following tag types are provided:
8+
- **`Tag`**
9+
- **`DataScienceTrackTag`**
10+
- **`DataScienceTrackEventTag`**
11+
- **`DesignTrackTag`**
12+
- **`DesignTrackEventTag`**
13+
- **`DevelopmentTrackTag`**
14+
- **`DevelopmentTrackEventTag`**
15+
16+
### Example
17+
```jsx
18+
import React from 'react';
19+
import { Tag } from 'topcoder-react-ui-kit';
20+
21+
export default function Example() {
22+
return <Tag to="REDIRECTION/URL">I am tagged!</Tag>;
23+
}
24+
```

‎docs/variables.md

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,6 @@ numbers directly into your SCSS code.
1515
- **`$corner-radius`** &mdash; *2px* &mdash; All corner radii (`border-radius`
1616
CSS prop) in Topcoder designs are multiples of this value.
1717

18-
### Design Break Points
19-
Each of the following constants specifies the maximal size of the corresponding
20-
screen size; i.e. XS-screen (extra-small) is any screen with the width smaller
21-
or equal to `$tc-screen-xs`, SM-screen (small) is any screen with the width
22-
larger than `$tc-screen-xs` and smaller or equal to `$tc-screen-sm`, and so on.
23-
The screen size wider than `$tc-screen-lg` we call XL for extra-large.
24-
25-
We assume that mobile devices have SM screen size, tablets have MD screen size,
26-
and desktops have LG or XL screen size. Whenever you need to restric the maximal
27-
width of the main page part, rely on `$tc-screen-lg` as the maximal width.
28-
29-
- **`$tc-screen-xs`** &mdash; *320px*;
30-
- **`$tc-screen-sm`** &mdash; *768px*;
31-
- **`$tc-screen-md`** &mdash; *1024px*;
32-
- **`$tc-screen-lg`** &mdash; *1280px*.
33-
3418
### Colors
3519
[**LIVE DEMO**](https://community-app.topcoder-dev.com/examples/color-mixins) of
3620
mixins for the standard color pallete being used in Topcoder designs. Always use

‎package-lock.json

Lines changed: 17 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"dependencies": {
3535
"react": "^16.2.0",
3636
"react-css-super-themr": "^2.2.0",
37-
"topcoder-react-utils": "0.0.39"
37+
"topcoder-react-utils": "^0.1.1"
3838
},
3939
"devDependencies": {
4040
"autoprefixer": "^7.2.5",

‎src/assets/images/default-user-avatar.svg

Lines changed: 20 additions & 0 deletions
Loading

‎src/assets/test.png

-5.15 KB
Binary file not shown.

‎src/index.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1+
import 'topcoder-react-utils/dist/style.css';
12
import 'styles/global.scss';
23

4+
import Avatar from 'components/Avatar';
35
import * as buttons from 'components/buttons';
6+
import * as tags from 'components/tags';
47

5-
module.exports = buttons;
8+
module.exports = {
9+
Avatar,
10+
...buttons,
11+
...tags,
12+
};

0 commit comments

Comments
 (0)