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

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

Diff for: ‎CHANGELOG.md

+3
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.

Diff for: ‎README.md

+35-2
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.

Diff for: ‎docs/avatar.md

+45
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+
```

Diff for: ‎docs/tags.md

+24
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+
```

Diff for: ‎docs/variables.md

-16
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

Diff for: ‎package-lock.json

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

Diff for: ‎package.json

+1-1
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",

Diff for: ‎src/assets/images/default-user-avatar.svg

+20
Loading

Diff for: ‎src/assets/test.png

-5.15 KB
Binary file not shown.

Diff for: ‎src/index.js

+8-1
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+
};

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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import DefaultUserAvatar from 'assets/images/default-user-avatar.svg';
2+
import React from 'react';
3+
import { themr } from 'react-css-super-themr';
4+
import { Avatar } from 'topcoder-react-utils';
5+
6+
import theme from './style.scss';
7+
8+
export default themr('Avatar', theme)(props =>
9+
<Avatar DefaultAvatar={DefaultUserAvatar} {...props} />);

Diff for: ‎src/shared/components/Avatar/style.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.avatar {
2+
border-radius: 16px;
3+
height: 32px;
4+
width: 32px;
5+
}

Diff for: ‎src/shared/components/tags/default.scss

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* Challenge tag button, default style with white text on light blue background.
3+
*/
4+
@import "~styles/mixins";
5+
6+
.button {
7+
@include roboto-bold;
8+
9+
align-items: center;
10+
background-color: $tc-gray-neutral-dark;
11+
border: none;
12+
border-radius: 3px;
13+
color: $tc-gray-80;
14+
cursor: pointer;
15+
display: inline-flex;
16+
font-size: 10px;
17+
font-weight: bold;
18+
line-height: 100%;
19+
margin-bottom: 2px;
20+
margin-right: 5px;
21+
min-height: 20px;
22+
outline: none;
23+
padding: 0 7px;
24+
text-align: center;
25+
26+
&:active,
27+
&:focus,
28+
&:hover {
29+
color: $tc-gray-80;
30+
background-color: $tc-dark-blue-30;
31+
}
32+
33+
&:visited {
34+
color: $tc-gray-80;
35+
}
36+
}
37+
38+
.disabled {
39+
cursor: not-allowed;
40+
opacity: 0.3;
41+
}

Diff for: ‎src/shared/components/tags/event/data-science.scss

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* Event tag, colored with colors of data science track (orange).
3+
*/
4+
5+
@import "../default";
6+
7+
.button {
8+
color: $tc-orange;
9+
background-color: $tc-orange-10;
10+
11+
&:active,
12+
&:focus,
13+
&:hover {
14+
color: $tc-orange;
15+
background-color: $tc-orange-10;
16+
}
17+
18+
&:visited {
19+
color: $tc-orange;
20+
}
21+
}

Diff for: ‎src/shared/components/tags/event/design.scss

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* Event tag, colored with colors of design track (blue).
3+
*/
4+
5+
@import "../default";
6+
7+
.button {
8+
color: $tc-light-blue;
9+
background-color: $tc-light-blue-10;
10+
11+
&:active,
12+
&:focus,
13+
&:hover {
14+
color: $tc-light-blue;
15+
background-color: $tc-light-blue-10;
16+
}
17+
18+
&:visited {
19+
color: $tc-light-blue;
20+
}
21+
}

Diff for: ‎src/shared/components/tags/event/development.scss

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* Event tag, colored with colors of develop track (green).
3+
*/
4+
5+
@import "../default";
6+
7+
.button {
8+
color: $tc-green;
9+
background-color: $tc-green-10;
10+
11+
&:active,
12+
&:focus,
13+
&:hover {
14+
color: $tc-green;
15+
background-color: $tc-green-10;
16+
}
17+
18+
&:visited {
19+
color: $tc-green;
20+
}
21+
}

0 commit comments

Comments
 (0)