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

Commit 81d5ab7

Browse files
birdofpreyrubirdofpreyru
committed
Merge branch 'develop'
2 parents c18fe8e + 2b12ff7 commit 81d5ab7

32 files changed

+2495
-659
lines changed

‎.eslintignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
dist
1+
__coverage__
2+
dist
3+
node_modules

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
__coverage__
12
.build-info
23
.sass-cache
34
dist

‎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.

‎__tests__/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["topcoder-react-utils/config/babel/node-ssr"]
3+
}

‎__tests__/.eslintrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "../node_modules/topcoder-react-utils/config/eslint/jest.json"
3+
}

‎__tests__/index.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import iface from '../src';
2+
3+
test('Package exports expected interface', () => {
4+
expect(iface).toHaveProperty('Avatar');
5+
6+
/* components/buttons */
7+
expect(iface).toHaveProperty('Button');
8+
expect(iface).toHaveProperty('DangerButton');
9+
expect(iface).toHaveProperty('GhostButton');
10+
expect(iface).toHaveProperty('PrimaryButton');
11+
expect(iface).toHaveProperty('SecondaryButton');
12+
13+
/* components/tags */
14+
expect(iface).toHaveProperty('Tag');
15+
expect(iface).toHaveProperty('DataScienceTrackTag');
16+
expect(iface).toHaveProperty('DataScienceTrackEventTag');
17+
expect(iface).toHaveProperty('DesignTrackTag');
18+
expect(iface).toHaveProperty('DesignTrackEventTag');
19+
expect(iface).toHaveProperty('DevelopmentTrackTag');
20+
expect(iface).toHaveProperty('DevelopmentTrackEventTag');
21+
});

‎__tests__/shared/components/Avatar.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Avatar from 'components/Avatar';
2+
import React from 'react';
3+
import { snapshot } from 'topcoder-react-utils/jest-utils';
4+
5+
test('Snapshots', () => {
6+
snapshot(<Avatar />);
7+
});

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Snapshots 1`] = `
4+
<svg
5+
className="style__avatar___3QhkH"
6+
height="141"
7+
viewBox="0 0 141 141"
8+
width="141"
9+
xmlns="http://www.w3.org/2000/svg"
10+
xmlnsXlink="http://www.w3.org/1999/xlink"
11+
>
12+
<title>
13+
ico-user-default
14+
</title>
15+
<defs>
16+
<rect
17+
height="140"
18+
id="a"
19+
rx="306"
20+
width="140"
21+
x=".8"
22+
y=".5"
23+
/>
24+
</defs>
25+
<g
26+
fill="none"
27+
fillRule="evenodd"
28+
>
29+
<mask
30+
fill="#fff"
31+
id="b"
32+
>
33+
<use
34+
xlinkHref="#a"
35+
/>
36+
</mask>
37+
<use
38+
fill="#F0F0F0"
39+
xlinkHref="#a"
40+
/>
41+
<path
42+
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"
43+
fill="#A3A3AE"
44+
mask="url(#b)"
45+
opacity=".2"
46+
stroke="#A3A3AE"
47+
strokeWidth="3"
48+
/>
49+
</g>
50+
</svg>
51+
`;

‎config/jest/default.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const config = require('topcoder-react-utils/config/jest/default');
2+
3+
module.exports = config;

‎config/jest/setup.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('topcoder-react-utils/config/jest/setup');

‎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&nbsp;&times;&nbsp;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

0 commit comments

Comments
 (0)