Skip to content

Commit 0625f65

Browse files
birdofpreyrubirdofpreyru
committed
Moves components code into /src/components, and adds font mixins
1 parent d750d59 commit 0625f65

File tree

10 files changed

+84
-6
lines changed

10 files changed

+84
-6
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ and `<NavLink>` components; they help to handle external and internal links in
3838
the same uniform manner.
3939

4040
### Utilities
41-
*To be added*
41+
- [**SCSS Mixins**](docs/scss-mixins.md) &mdash; Collection of useful style
42+
mixins;
4243

4344
### Development
4445
*To be written*

‎docs/scss-mixins.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# SCSS Mixins
2+
Collection of useful style mixins.
3+
4+
**Why?** &mdash; Some pieces of SCSS code are often reused in different
5+
stylesheets of different apps, thus it is useful to have them all in one place,
6+
and implmented in a standard way.
7+
8+
To use, import the main mixins file into your SCSS, e.g.:
9+
```scss
10+
@import "topcoder-react-utils/src/styles/mixins";
11+
```
12+
13+
### Font Mixins
14+
- **`@mixin font-family($name, $weight, $style, $url, $file);`**
15+
The `font-family` mixins generates a `@font-face` declaration for
16+
inclusion of the specified font into the app. The font is assumed
17+
to be provided in the following formats: EOT, WOFF, TTF, SVG.
18+
- **`$name`** Font name (to reference the loaded font from SCSS in
19+
the SCSS stylesheets);
20+
- **`$weight`** Font weight;
21+
- **`$style`** Font style, *normal* or *italic*;
22+
- **`$url`** Path to the font files (without the filename);
23+
- **`$file`** Name of the font files (without extension). It is
24+
supposed that all files related to the font have the same name,
25+
and differs only be their extensions.
26+
27+
- **`font-family-ttf($name, $weight, $style, $url);`**
28+
Similar to the `font-family` mixins, but loads only fonts in TTF
29+
format.
30+
- **`$name`** Font name (to reference the loaded font from SCSS in
31+
the SCSS stylesheets);
32+
- **`$weight`** Font weight;
33+
- **`$style`** Font style, *normal* or *italic*;
34+
- **`$url`** Path to the font file, including the filename (without
35+
file extension).
36+

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,9 @@
7171
"url": "git+https://github.com/topcoder-platform/topcoder-react-utils.git"
7272
},
7373
"scripts": {
74-
"build": "babel src --out-dir dist",
75-
"build:dev": "babel --watch src --out-dir dist",
74+
"build": "npm run clean && babel src --out-dir dist",
75+
"build:dev": "npm run clean && babel --watch src --out-dir dist",
76+
"clean": "rm -rf dist",
7677
"lint": "npm run lint:js",
7778
"lint:js": "eslint --ext .js,.jsx .",
7879
"prepublishOnly": "npm run build",

‎src/Button.jsx renamed to ‎src/components/Button.jsx

File renamed without changes.

‎src/GenericLink.jsx renamed to ‎src/components/GenericLink.jsx

File renamed without changes.

‎src/Link.jsx renamed to ‎src/components/Link.jsx

File renamed without changes.

‎src/NavLink.jsx renamed to ‎src/components/NavLink.jsx

File renamed without changes.

‎src/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import Button from './Button';
2-
import Link from './Link';
3-
import NavLink from './NavLink';
1+
import Button from 'components/Button';
2+
import Link from 'components/Link';
3+
import NavLink from 'components/NavLink';
44

55
export {
66
Button,

‎src/styles/_mixins/_fonts.scss

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* Auxiliary mixins for fonts inclusion. */
2+
3+
/**
4+
* Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
5+
* SVG formats into the app.
6+
* $font-name {String}
7+
* $font-weight {Number}
8+
* $font-style {String}
9+
* $font-url {String} Path to the font file, without the filename itself.
10+
* $font-file {String} Font filename, without extension (should be the same for
11+
* each version of the font in different formats.
12+
*/
13+
@mixin font-family($font-name, $font-weight, $font-style, $font-url, $font-file) {
14+
@font-face {
15+
font-family: '#{$font-name}';
16+
src: url('#{$font-url}#{$font-file}.eot');
17+
src: url('#{$font-url}#{$font-file}.eot?#iefix') format('embedded-opentype'), url('#{$font-url}#{$font-file}.woff') format('woff'), url('#{$font-url}#{$font-file}.ttf') format('truetype'), url('#{$font-url}#{$font-file}.svg##{$font-name}') format('svg');
18+
font-weight: $font-weight;
19+
font-style: $font-style;
20+
}
21+
}
22+
23+
/**
24+
* Includes a font, provided in the TTF format only.
25+
* $font-name {String}
26+
* $font-weight {Number}
27+
* $font-style {String}
28+
* $font-url {String}
29+
*/
30+
@mixin font-family-ttf(
31+
$font-name, $font-weight, $font-style, $font-url) {
32+
@font-face {
33+
font-family: $font-name;
34+
font-style: $font-style;
35+
font-weight: $font-weight;
36+
src: url('#{$font-url}.ttf') format('truetype');
37+
}
38+
}

‎src/styles/mixins.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/* Collection of standard mixins, being used all around. */
2+
@import "_mixins/fonts";

0 commit comments

Comments
 (0)