@madgex/design-system 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -4
- package/package.json +1 -1
- package/src/components/icon/icon.config.js +10 -33
- package/src/template.njk +47 -0
package/README.md
CHANGED
|
@@ -4,20 +4,27 @@ A work-in progress Design System for building a UI for Madgex products.
|
|
|
4
4
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
7
|
+
NOTE: Right now you'll need to be authenticated on npm under the Madgex account.
|
|
8
|
+
|
|
7
9
|
```bash
|
|
8
10
|
npm install @madgex/design-system --save
|
|
9
11
|
```
|
|
10
12
|
|
|
11
13
|
## Importing styles
|
|
12
14
|
|
|
13
|
-
You'll need to import the Madgex DS styles into your
|
|
15
|
+
You'll need to import the Madgex DS styles into your project scss file.
|
|
16
|
+
|
|
17
|
+
Use the DS tokens to change DS variables.
|
|
14
18
|
|
|
15
|
-
|
|
19
|
+
e.g. import the Madgex DS to your Sass file & overload variables:
|
|
16
20
|
|
|
17
21
|
```scss
|
|
18
|
-
|
|
22
|
+
$mds-color-primary: #ff0000; // my primary brand colour is RED
|
|
23
|
+
$mds-size-font-md: 20px; // my base font-size is 20px
|
|
24
|
+
|
|
25
|
+
@import 'node_modules/@madgex/design-system/src/scss/index.scss';
|
|
19
26
|
```
|
|
20
27
|
|
|
21
28
|
## Releases
|
|
22
29
|
|
|
23
|
-
With every commit to `master` the build server attempts to create a new version using [semantic-release](https://semantic-release.gitbook.io/semantic-release/) and deploys to
|
|
30
|
+
With every commit to `master` the build server attempts to create a new version using [semantic-release](https://semantic-release.gitbook.io/semantic-release/) and deploys to [npm](https://npmjs.org) as [@madgex/design-system](https://www.npmjs.com/package/@madgex/design-system).
|
package/package.json
CHANGED
|
@@ -1,43 +1,20 @@
|
|
|
1
|
-
// module.exports = {
|
|
2
|
-
// title: 'Icons',
|
|
3
|
-
// context: {
|
|
4
|
-
// id: 'bike',
|
|
5
|
-
// },
|
|
6
|
-
// variants: [
|
|
7
|
-
// {
|
|
8
|
-
// name: 'camera',
|
|
9
|
-
// context: {
|
|
10
|
-
// id: 'camera',
|
|
11
|
-
// },
|
|
12
|
-
// },
|
|
13
|
-
// ],
|
|
14
|
-
// };
|
|
15
|
-
|
|
16
1
|
/**
|
|
17
2
|
* Icon Pattern Config
|
|
18
3
|
* Loads icons from `assets` and creates the variants
|
|
19
4
|
*/
|
|
20
5
|
|
|
21
|
-
const
|
|
22
|
-
const glob = require('glob');
|
|
23
|
-
|
|
24
|
-
const iconsGlob = './src/icons/**/*.svg'; // TODO: Load from global config
|
|
25
|
-
const variants = [];
|
|
26
|
-
|
|
27
|
-
// Collect Icon Names
|
|
28
|
-
const files = glob.sync(iconsGlob) || [];
|
|
29
|
-
files.forEach((file) => {
|
|
30
|
-
const name = path.basename(file, '.svg');
|
|
31
|
-
variants.push({
|
|
32
|
-
name,
|
|
33
|
-
context: {
|
|
34
|
-
icon: name,
|
|
35
|
-
},
|
|
36
|
-
});
|
|
37
|
-
});
|
|
6
|
+
const iconList = require('../../../dist/assets/icons.json');
|
|
38
7
|
|
|
39
8
|
module.exports = {
|
|
40
9
|
title: 'Icon',
|
|
41
10
|
status: 'ready',
|
|
42
|
-
|
|
11
|
+
default: iconList[0].name,
|
|
12
|
+
variants: iconList.map((item) => {
|
|
13
|
+
return {
|
|
14
|
+
name: item.name,
|
|
15
|
+
context: {
|
|
16
|
+
icon: item.name,
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
}),
|
|
43
20
|
};
|
package/src/template.njk
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="{{ htmlLang | default('en') }}" class="mds-template {{ htmlClasses }}">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>{% block pageTitle %}Madgex - A leading provider of recruitment technology creating best-fit connections between talented people and employers{% endblock %}</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
7
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
8
|
+
{% block headIcons %}
|
|
9
|
+
{#
|
|
10
|
+
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon" />
|
|
11
|
+
<link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/mds-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}">
|
|
12
|
+
<link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/mds-apple-touch-icon-180x180.png">
|
|
13
|
+
<link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/mds-apple-touch-icon-167x167.png">
|
|
14
|
+
<link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/mds-apple-touch-icon-152x152.png">
|
|
15
|
+
<link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/mds-apple-touch-icon.png">
|
|
16
|
+
#}
|
|
17
|
+
{% endblock %}
|
|
18
|
+
{% block head %}{% endblock %}
|
|
19
|
+
</head>
|
|
20
|
+
<body class="mds-template__body {{ bodyClasses }}">
|
|
21
|
+
<script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
|
|
22
|
+
{% block bodyStart %}{% endblock %}
|
|
23
|
+
|
|
24
|
+
{% block header %}
|
|
25
|
+
{#
|
|
26
|
+
{{ mdsHeader({}) }}
|
|
27
|
+
#}
|
|
28
|
+
{% endblock %}
|
|
29
|
+
|
|
30
|
+
{% block main %}
|
|
31
|
+
<div class="mds-width-container">
|
|
32
|
+
{% block beforeContent %}{% endblock %}
|
|
33
|
+
<main class="mds-main-wrapper {{ mainClasses }}" id="main-content" role="main">
|
|
34
|
+
{% block content %}{% endblock %}
|
|
35
|
+
</main>
|
|
36
|
+
</div>
|
|
37
|
+
{% endblock %}
|
|
38
|
+
|
|
39
|
+
{% block footer %}
|
|
40
|
+
{#
|
|
41
|
+
{{ mdsFooter({}) }}
|
|
42
|
+
#}
|
|
43
|
+
{% endblock %}
|
|
44
|
+
|
|
45
|
+
{% block bodyEnd %}{% endblock %}
|
|
46
|
+
</body>
|
|
47
|
+
</html>
|