@madgex/design-system 1.3.2 → 1.3.4

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.
Files changed (35) hide show
  1. package/dist/_tokens/css/_tokens.css +54 -0
  2. package/dist/_tokens/js/_tokens-module.js +834 -0
  3. package/dist/_tokens/scss/_tokens.scss +125 -0
  4. package/dist/_tokens/sketch/_tokens.sketchpalette +7 -0
  5. package/dist/assets/icons.json +1 -0
  6. package/dist/assets/icons.svg +1 -0
  7. package/dist/js/common.js +1 -0
  8. package/package.json +17 -16
  9. package/src/components/Section-title/01-section-title.njk +7 -0
  10. package/src/components/Section-title/02-section-title-with-action.njk +10 -0
  11. package/src/components/Section-title/_macro.njk +3 -0
  12. package/src/components/Section-title/_template.njk +17 -0
  13. package/src/components/Section-title/section-title-with-action.config.js +11 -0
  14. package/src/components/Section-title/section-title.config.js +7 -0
  15. package/src/components/Section-title/section-title.scss +3 -0
  16. package/src/components/button/_template.njk +3 -3
  17. package/src/components/card/_macro.njk +3 -0
  18. package/src/components/card/_template.njk +5 -0
  19. package/src/components/card/card.config.js +18 -0
  20. package/src/components/card/card.njk +7 -0
  21. package/src/components/card/card.scss +4 -0
  22. package/src/scss/index.scss +2 -0
  23. package/src/scss/utilities/_mixins.scss +0 -7
  24. package/src/tokens/size.json +4 -1
  25. package/src/components/similar-jobs-item/_macro.njk +0 -3
  26. package/src/components/similar-jobs-item/_template.njk +0 -18
  27. package/src/components/similar-jobs-item/similar-jobs-item.config.js +0 -9
  28. package/src/components/similar-jobs-item/similar-jobs-item.njk +0 -8
  29. package/src/components/similar-jobs-item/similar-jobs-item.scss +0 -5
  30. package/src/patterns/similar-jobs/_macro.njk +0 -3
  31. package/src/patterns/similar-jobs/_template.njk +0 -19
  32. package/src/patterns/similar-jobs/similar-jobs.config.js +0 -30
  33. package/src/patterns/similar-jobs/similar-jobs.njk +0 -3
  34. package/src/patterns/similar-jobs/similar-jobs.scss +0 -0
  35. package/webpack.config.js +0 -117
@@ -0,0 +1,125 @@
1
+
2
+ /*
3
+ Do not edit directly
4
+ Generated on Mon, 10 Jun 2019 11:11:26 GMT
5
+ */
6
+
7
+ $mds-color-base: #71767a !default; // Base colour
8
+ $mds-color-white: #ffffff !default;
9
+ $mds-color-black: #000000 !default;
10
+ $mds-color-primary: #2c608a !default;
11
+ $mds-color-secondary: #d83933 !default;
12
+ $mds-color-destructive: #ff0000 !default;
13
+ $mds-color-text-primary: #000000 !default;
14
+ $mds-color-accent-warm: #fa9441 !default;
15
+ $mds-color-accent-cool: #00bde3 !default;
16
+ $mds-color-neutral-15: #262626 !default;
17
+ $mds-color-neutral-20: #323232 !default;
18
+ $mds-color-neutral-30: #4d4d4d !default;
19
+ $mds-color-neutral-53: #888888 !default;
20
+ $mds-color-neutral-95: #f3f1f1 !default;
21
+ $mds-font-family-base: "Helvetica", Arial, sans-serif !default;
22
+ $mds-size-font-xs: 12px !default;
23
+ $mds-size-font-sm: 14px !default;
24
+ $mds-size-font-md: 16px !default;
25
+ $mds-size-font-lg: 20px !default;
26
+ $mds-size-font-xl: 26px !default;
27
+ $mds-size-font-xxl: 46px !default;
28
+ $mds-size-font-base: 16px !default;
29
+ $mds-size-space-none: 0px !default;
30
+ $mds-size-space-xxs: 4px !default;
31
+ $mds-size-space-xs: 8px !default;
32
+ $mds-size-space-sm: 12px !default;
33
+ $mds-size-space-md: 16px !default;
34
+ $mds-size-space-lg: 24px !default;
35
+ $mds-size-space-xl: 32px !default;
36
+ $mds-size-space-xxl: 48px !default;
37
+ $mds-size-space-xxxl: 64px !default;
38
+ $mds-size-space-default: 16px !default;
39
+ $mds-size-space-inset-none: 0px !default;
40
+ $mds-size-space-inset-xxs: 4px !default;
41
+ $mds-size-space-inset-xs: 8px !default;
42
+ $mds-size-space-inset-sm: 12px !default;
43
+ $mds-size-space-inset-md: 16px !default;
44
+ $mds-size-space-inset-lg: 24px !default;
45
+ $mds-size-space-inset-xl: 32px !default;
46
+ $mds-size-space-inset-xxl: 48px !default;
47
+ $mds-size-space-inset-xxxl: 64px !default;
48
+ $mds-size-space-inset-default: 16px !default;
49
+ $mds-size-breakpoint-sm: 0px !default;
50
+ $mds-size-breakpoint-md: 768px !default;
51
+ $mds-size-breakpoint-lg: 1024px !default;
52
+ $mds-size-border-width: 1px !default;
53
+ $mds-size-border-radius: 3px !default;
54
+
55
+ $tokens: (
56
+ 'color': (
57
+ 'base': $mds-color-base,
58
+ 'white': $mds-color-white,
59
+ 'black': $mds-color-black,
60
+ 'primary': $mds-color-primary,
61
+ 'secondary': $mds-color-secondary,
62
+ 'destructive': $mds-color-destructive,
63
+ 'text': (
64
+ 'primary': $mds-color-text-primary
65
+ ),
66
+ 'accent-warm': $mds-color-accent-warm,
67
+ 'accent-cool': $mds-color-accent-cool,
68
+ 'neutral': (
69
+ '15': $mds-color-neutral-15,
70
+ '20': $mds-color-neutral-20,
71
+ '30': $mds-color-neutral-30,
72
+ '53': $mds-color-neutral-53,
73
+ '95': $mds-color-neutral-95
74
+ )
75
+ ),
76
+ 'font': (
77
+ 'family': (
78
+ 'base': $mds-font-family-base
79
+ )
80
+ ),
81
+ 'size': (
82
+ 'font': (
83
+ 'xs': $mds-size-font-xs,
84
+ 'sm': $mds-size-font-sm,
85
+ 'md': $mds-size-font-md,
86
+ 'lg': $mds-size-font-lg,
87
+ 'xl': $mds-size-font-xl,
88
+ 'xxl': $mds-size-font-xxl,
89
+ 'base': $mds-size-font-base
90
+ ),
91
+ 'space': (
92
+ 'none': $mds-size-space-none,
93
+ 'xxs': $mds-size-space-xxs,
94
+ 'xs': $mds-size-space-xs,
95
+ 'sm': $mds-size-space-sm,
96
+ 'md': $mds-size-space-md,
97
+ 'lg': $mds-size-space-lg,
98
+ 'xl': $mds-size-space-xl,
99
+ 'xxl': $mds-size-space-xxl,
100
+ 'xxxl': $mds-size-space-xxxl,
101
+ 'default': $mds-size-space-default,
102
+ 'inset': (
103
+ 'none': $mds-size-space-inset-none,
104
+ 'xxs': $mds-size-space-inset-xxs,
105
+ 'xs': $mds-size-space-inset-xs,
106
+ 'sm': $mds-size-space-inset-sm,
107
+ 'md': $mds-size-space-inset-md,
108
+ 'lg': $mds-size-space-inset-lg,
109
+ 'xl': $mds-size-space-inset-xl,
110
+ 'xxl': $mds-size-space-inset-xxl,
111
+ 'xxxl': $mds-size-space-inset-xxxl,
112
+ 'default': $mds-size-space-inset-default
113
+ )
114
+ ),
115
+ 'breakpoint': (
116
+ 'sm': $mds-size-breakpoint-sm,
117
+ 'md': $mds-size-breakpoint-md,
118
+ 'lg': $mds-size-breakpoint-lg
119
+ ),
120
+ 'border': (
121
+ 'width': $mds-size-border-width,
122
+ 'radius': $mds-size-border-radius
123
+ )
124
+ )
125
+ );
@@ -0,0 +1,7 @@
1
+ {
2
+ "compatibleVersion": "1.0",
3
+ "pluginVersion": "1.1",
4
+ "colors": [
5
+ "#71767a"
6
+ ]
7
+ }
@@ -0,0 +1 @@
1
+ [{"name":"bike"},{"name":"camera"}]
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="bike" viewBox="0 0 100 100"><path d="M72.918 41.668c-2.082 0-3.957.418-5.625 1.043L62.5 34.793l1.457-3.543h.625c1.25 0 2.082-.832 2.082-2.082s-.832-2.082-2.082-2.082h-6.25c-1.25 0-2.082.832-2.082 2.082s.832 2.082 2.082 2.082h1.043l-.832 2.082H39.582V25H29.164v4.168h6.25V35l-3.75 7.5c-1.457-.625-2.914-.832-4.582-.832-8.125 0-14.582 6.457-14.582 14.582s6.457 14.582 14.582 14.582 14.582-6.457 14.582-14.582c0-5-2.5-9.375-6.25-11.875l2.5-4.793 13.125 18.957h7.5c1.043 7.082 7.082 12.5 14.375 12.5 8.125 0 14.582-6.457 14.582-14.582.004-8.332-6.453-14.789-14.578-14.789zM37.5 56.25c0 5.832-4.582 10.418-10.418 10.418-5.832 0-10.418-4.582-10.418-10.418 0-5.832 4.582-10.418 10.418-10.418.832 0 1.875.207 2.707.418l-4.582 9.168c-.207.207-.207.414-.207.832 0 1.25.832 2.082 2.082 2.082.832 0 1.457-.418 1.875-1.25l4.582-9.168c2.293 2.086 3.96 5.004 3.96 8.336zM63.75 45c-2.707 2.293-4.582 5.418-5.207 9.168h-3.332l5.418-14.375zm2.082 3.543l3.332 5.625h-6.457c.418-2.293 1.668-4.168 3.125-5.625zm-14.375 3.332l-10-14.375h15.625zm21.461 14.793c-5 0-9.168-3.543-10.207-8.332l10.207-.004c1.25 0 2.082-.832 2.082-2.082 0-.418-.207-.832-.418-1.043l-5.207-8.75c1.043-.418 2.293-.625 3.543-.625 5.832 0 10.418 4.582 10.418 10.418-.004 5.832-4.586 10.418-10.418 10.418z"/></symbol><symbol id="camera" viewBox="0 0 100 100"><path d="M56.25 56.25c0 3.453-2.797 6.25-6.25 6.25s-6.25-2.797-6.25-6.25S46.547 50 50 50s6.25 2.797 6.25 6.25"/><path d="M81.25 33.332H64.582L60.414 25H39.582l-4.168 8.332H18.75c-3.543 0-6.25 2.707-6.25 6.25v33.332c0 3.332 2.707 6.25 6.25 6.25h62.5c3.543 0 6.25-2.918 6.25-6.25V39.582c0-3.54-2.707-6.25-6.25-6.25zM50 70.832c-8.125 0-14.582-6.457-14.582-14.582S41.875 41.668 50 41.668s14.582 6.457 14.582 14.582S58.125 70.832 50 70.832z"/></symbol></svg>
@@ -0,0 +1 @@
1
+ !function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("MDS bundle loaded.")}]);
package/package.json CHANGED
@@ -1,16 +1,17 @@
1
1
  {
2
2
  "name": "@madgex/design-system",
3
- "version": "1.3.2",
3
+ "version": "1.3.4",
4
4
  "scripts": {
5
5
  "clean": "rimraf dist public tokens/build",
6
6
  "commit": "commit",
7
- "semantic-release": "semantic-release --prepare && npm run build && semantic-release --publish",
7
+ "semantic-release": "semantic-release --prepare && semantic-release --publish",
8
8
  "tokens": "style-dictionary --config ./src/tokens/_config.js build",
9
9
  "start": "gulp dev",
10
10
  "build": "gulp build",
11
11
  "build:icons": "svgo -f src/icons ./dist/assets/icons",
12
12
  "build:webpack": "NODE_ENV=production webpack",
13
13
  "build:fractal": "NODE_ENV=production fractal build",
14
+ "prepublishOnly": "npm run build",
14
15
  "lint": "eslint .",
15
16
  "lint-fix": "eslint . --fix"
16
17
  },
@@ -20,16 +21,16 @@
20
21
  },
21
22
  "dependencies": {},
22
23
  "devDependencies": {
23
- "@babel/core": "^7.4.4",
24
- "@babel/preset-env": "^7.4.4",
25
- "@commitlint/cli": "^7.6.1",
26
- "@commitlint/config-conventional": "^7.6.0",
27
- "@commitlint/prompt-cli": "^7.6.1",
24
+ "@babel/core": "^7.4.5",
25
+ "@babel/preset-env": "^7.4.5",
26
+ "@commitlint/cli": "^8.0.0",
27
+ "@commitlint/config-conventional": "^8.0.0",
28
+ "@commitlint/prompt-cli": "^8.0.0",
28
29
  "@frctl/fractal": "^1.1.7",
29
30
  "@frctl/mandelbrot": "^1.2.1",
30
31
  "@frctl/nunjucks": "^2.0.1",
31
32
  "@madgex/eslint-config-madgex": "^1.2.0",
32
- "autoprefixer": "^9.5.1",
33
+ "autoprefixer": "^9.6.0",
33
34
  "babel-loader": "^8.0.6",
34
35
  "commitizen": "^3.1.1",
35
36
  "concurrently": "^4.1.0",
@@ -37,7 +38,7 @@
37
38
  "cssnano": "^4.1.10",
38
39
  "cz-conventional-changelog": "^2.1.0",
39
40
  "del": "^4.1.1",
40
- "file-loader": "^3.0.1",
41
+ "file-loader": "^4.0.0",
41
42
  "flat": "^4.1.0",
42
43
  "glob": "^7.1.4",
43
44
  "gulp": "^4.0.2",
@@ -46,24 +47,24 @@
46
47
  "gulp-svgmin": "^2.2.0",
47
48
  "gulp-svgstore": "^7.0.1",
48
49
  "gulp-tap": "^1.0.1",
49
- "husky": "^2.3.0",
50
- "lint-staged": "^8.1.7",
51
- "mini-css-extract-plugin": "^0.6.0",
50
+ "husky": "^2.4.0",
51
+ "lint-staged": "^8.2.0",
52
+ "mini-css-extract-plugin": "^0.7.0",
52
53
  "node-sass": "^4.12.0",
53
- "postcss": "^7.0.16",
54
+ "postcss": "^7.0.17",
54
55
  "postcss-cli": "^6.1.2",
55
56
  "postcss-loader": "^3.0.0",
56
57
  "rimraf": "^2.6.3",
57
58
  "sass-loader": "^7.1.0",
58
59
  "semantic-release": "^15.13.12",
59
- "style-dictionary": "^2.7.0",
60
+ "style-dictionary": "^2.8.0",
60
61
  "style-loader": "^0.23.1",
61
62
  "svg-sprite-loader": "^4.1.6",
62
63
  "svgo": "^1.2.2",
63
64
  "svgo-loader": "^2.2.0",
64
- "webpack": "^4.31.0",
65
+ "webpack": "^4.33.0",
65
66
  "webpack-cli": "^3.3.2",
66
- "webpack-dev-server": "^3.4.0",
67
+ "webpack-dev-server": "^3.7.0",
67
68
  "webpack-stream": "^5.2.1"
68
69
  },
69
70
  "config": {
@@ -0,0 +1,7 @@
1
+ {% from "./section-title/_macro.njk" import SectionTitle %}
2
+
3
+ {{ SectionTitle({
4
+ title: title,
5
+ headingTag: headingTag,
6
+ classes: classes
7
+ }) }}
@@ -0,0 +1,10 @@
1
+ {% from "./section-title/_macro.njk" import SectionTitle %}
2
+
3
+ {{ SectionTitle({
4
+ title: title,
5
+ headingTag: headingTag,
6
+ actionText: actionText,
7
+ actionHref: actionHref,
8
+ actionElement: actionElement,
9
+ classes: classes
10
+ }) }}
@@ -0,0 +1,3 @@
1
+ {% macro SectionTitle(params) %}
2
+ {%- include "./_template.njk" -%}
3
+ {% endmacro %}
@@ -0,0 +1,17 @@
1
+ {% from "../button/_macro.njk" import Button %}
2
+
3
+ <div class="mds-section-title{% if params.classes %} {{ params.classes }}{% endif %}">
4
+ <{{ params.headingTag | default("h2") }} class="mds-section-title__header">{{ params.title }}</{{ params.headingTag | default("h2") }}>
5
+ {% if params.actionText -%}
6
+ <div class="mds-section-title__action">
7
+ {%- if params.actionHref -%}
8
+ {{ Button({
9
+ text: params.actionText,
10
+ element: params.actionElement,
11
+ href: params.actionHref,
12
+ classes: params.classes
13
+ }) }}
14
+ {%- endif -%}
15
+ </div>
16
+ {% endif -%}
17
+ </div>
@@ -0,0 +1,11 @@
1
+ module.exports = {
2
+ title: 'SectionTitle',
3
+ context: {
4
+ title: 'Similar jobs',
5
+ headingTag: 'h3',
6
+ actionText: 'View all',
7
+ actionHref: '/job/similar',
8
+ actionElement: 'a',
9
+ classes: '',
10
+ },
11
+ };
@@ -0,0 +1,7 @@
1
+ module.exports = {
2
+ title: 'SectionTitle',
3
+ context: {
4
+ title: 'Similar jobs',
5
+ classes: '',
6
+ },
7
+ };
@@ -0,0 +1,3 @@
1
+ .mds-section-title {
2
+ border-bottom: $mds-border-width solid $mds-color-base;
3
+ }
@@ -1,14 +1,14 @@
1
1
  {# Determine type of element to use, if not explicitly set -#}
2
2
 
3
- {% if params.element %}
3
+ {%- if params.element -%}
4
4
  {% set element = params.element | lower %}
5
- {% else %}
5
+ {%- else -%}
6
6
  {% if params.href %}
7
7
  {% set element = 'a' %}
8
8
  {% else %}
9
9
  {% set element = 'button' %}
10
10
  {% endif %}
11
- {% endif %}
11
+ {%- endif -%}
12
12
 
13
13
  {#- Define common attributes that we can use across all element types #}
14
14
 
@@ -0,0 +1,3 @@
1
+ {% macro Card(params) %}
2
+ {%- include "./_template.njk" -%}
3
+ {% endmacro %}
@@ -0,0 +1,5 @@
1
+ {% if params.inList %}
2
+ <li class="mds-card mds-card--list-item{% if params.classes %} {{ params.classes }}{% endif %}">{{ params.content | safe }}</li>
3
+ {% else %}
4
+ <div class="mds-card{% if params.classes %} {{ params.classes }}{% endif %}">{{ params.content | safe }}</div>
5
+ {% endif %}
@@ -0,0 +1,18 @@
1
+ module.exports = {
2
+ title: 'Card',
3
+ context: {
4
+ inList: false,
5
+ classes: '',
6
+ content: '<h4>Card Title</h4><p>paragraph</p>',
7
+ },
8
+ variants: [
9
+ {
10
+ name: 'card-in-list',
11
+ context: {
12
+ inList: true,
13
+ classes: '',
14
+ content: '<h4>Card used in list (li instead of div)</h4><p>paragraph</p>',
15
+ },
16
+ },
17
+ ],
18
+ };
@@ -0,0 +1,7 @@
1
+ {% from "./card/_macro.njk" import Card %}
2
+
3
+ {{ Card({
4
+ inList: inList,
5
+ classes: classes,
6
+ content: content
7
+ }) }}
@@ -0,0 +1,4 @@
1
+ .mds-card {
2
+ padding: $mds-size-space-sm $mds-size-space-md;
3
+ border: $mds-border-width solid $mds-color-base;
4
+ }
@@ -29,3 +29,5 @@ body {
29
29
  }
30
30
 
31
31
  @import '../components/button/button';
32
+ @import '../components/card/card';
33
+ @import '../components/section-title/section-title';
@@ -4,10 +4,3 @@
4
4
  -moz-user-select: none;
5
5
  user-select: none;
6
6
  }
7
-
8
- @mixin mds-focusable {
9
- &:focus {
10
- outline: $mds-size-focus-width solid $mds-size-focus-width;
11
- outline-offset: 0;
12
- }
13
- }
@@ -42,8 +42,11 @@
42
42
  "md": { "value": "768px" },
43
43
  "lg": { "value": "1024px" }
44
44
  },
45
- "focus": {
45
+ "border": {
46
46
  "width": {
47
+ "value": "1px"
48
+ },
49
+ "radius": {
47
50
  "value": "3px"
48
51
  }
49
52
  }
@@ -1,3 +0,0 @@
1
- {% macro SimilarJobsItem(params) %}
2
- {%- include "./_template.njk" -%}
3
- {% endmacro %}
@@ -1,18 +0,0 @@
1
- <div class="mds-similar-job{% if params.classes %} {{ params.classes }}{% endif %}">
2
- <h3 class="mds-similar-job__header">
3
- {%- if params.href %}
4
- <a href="{{ params.href }}" class="mds-similar-job__link">
5
- {{- params.title | safe -}}
6
- </a>
7
- {% else -%}
8
- {{ params.title | safe }}
9
- {%- endif -%}
10
- </h3>
11
- {%- if params.meta -%}
12
- <ul class="mds-similar-job__meta">
13
- {%- for item in params.meta -%}
14
- <li class="mds-similar-job-meta__item">{{ item | safe }}</li>
15
- {%- endfor -%}
16
- </ul>
17
- {%- endif -%}
18
- </div>
@@ -1,9 +0,0 @@
1
- module.exports = {
2
- title: 'SimilarJobsItem',
3
- context: {
4
- title: 'Science Teacher',
5
- href: '/job/science-teacher',
6
- classes: 'mds-similar-job--premium-job',
7
- meta: ['London City', 'Science Recruiter'],
8
- },
9
- };
@@ -1,8 +0,0 @@
1
- {% from "./similar-jobs-item/_macro.njk" import SimilarJobsItem %}
2
-
3
- {{ SimilarJobsItem({
4
- title: title,
5
- href: href,
6
- classes: classes,
7
- meta: meta
8
- }) }}
@@ -1,5 +0,0 @@
1
- .mds-similar-job {
2
- &--premium-job {
3
- background-color: #eee;
4
- }
5
- }
@@ -1,3 +0,0 @@
1
- {% macro SimilarJobs(params) %}
2
- {%- include "./_template.njk" -%}
3
- {% endmacro %}
@@ -1,19 +0,0 @@
1
- {% from "../../components/similar-jobs-item/_macro.njk" import SimilarJobsItem %}
2
- {%- if params.items -%}
3
- <div class="mds-similar-jobs">
4
- {%- if params.title -%}
5
- <h2 class="mds-similar-jobs__header">{{params.title}}</h2>
6
- {%- endif -%}
7
- {%- if params.items -%}
8
- <ul class="mds-similar-jobs__content">
9
- {%- for item in params.items -%}
10
- {%- if item.title -%}
11
- <li class="mds-similar-jobs-content__item">
12
- {{ SimilarJobsItem({title: item.title, href: item.href, classes: item.classes, meta: item.meta}) }}
13
- </li>
14
- {%- endif -%}
15
- {%- endfor -%}
16
- </ul>
17
- {%- endif -%}
18
- </div>
19
- {%- endif -%}
@@ -1,30 +0,0 @@
1
- module.exports = {
2
- title: 'SimilarJobs',
3
- context: {
4
- title: 'Similar Jobs',
5
- items: [
6
- {
7
- title: 'Marketing Manager',
8
- href: '/job/marketing-manager',
9
- classes: 'mds-similar-job--premium-job',
10
- meta: ['London City', 'Market Rate', 'Apple Inc'],
11
- },
12
- {
13
- title: 'Head of Marketing',
14
- href: '/job/head-of-marketing',
15
- classes: 'mds-similar-job--promoted-job',
16
- meta: ['London (Hackney)', 'Marketers Ltd'],
17
- },
18
- {
19
- title: 'Marketing Advisor',
20
- href: '/job/marketing-advisor',
21
- classes: 'mds-similar-job--premium-job',
22
- },
23
- {
24
- title: 'Marketing Researcher',
25
- classes: '',
26
- meta: ['London (Central)', '100K+'],
27
- },
28
- ],
29
- },
30
- };
@@ -1,3 +0,0 @@
1
- {% from "./similar-jobs/_macro.njk" import SimilarJobs %}
2
-
3
- {{ SimilarJobs({title: title, items: items}) }}
File without changes
package/webpack.config.js DELETED
@@ -1,117 +0,0 @@
1
- const path = require('path');
2
- const webpack = require('webpack');
3
- const glob = require('glob');
4
- const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5
- const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
6
-
7
- const entry = {
8
- common: path.resolve(__dirname, 'src/scripts/common.js'),
9
- };
10
-
11
- // Skip icons if there’s none or Webpack will throw an error
12
- const icons = glob.sync('./src/icons/**/*.svg');
13
- if (icons.length) {
14
- entry.icons = icons;
15
- }
16
-
17
- module.exports = {
18
- mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
19
- resolve: {
20
- modules: [path.resolve(__dirname, 'src/scripts'), path.resolve(__dirname, 'src'), 'node_modules'],
21
- extensions: ['.js'],
22
- },
23
- entry,
24
- output: {
25
- path: path.resolve(__dirname, 'dist'),
26
- publicPath: '/',
27
- filename: '[name].js',
28
- },
29
- module: {
30
- rules: [
31
- {
32
- test: /\.js$/,
33
- exclude: /node_modules/,
34
- loader: 'babel-loader',
35
- },
36
- {
37
- test: /\.scss$/,
38
- use: [
39
- {
40
- loader: process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
41
- },
42
- 'css-loader',
43
- {
44
- loader: 'postcss-loader',
45
- options: {
46
- plugins: [require('autoprefixer')(), require('cssnano')()],
47
- },
48
- },
49
- {
50
- loader: 'sass-loader',
51
- options: {
52
- includePaths: ['node_modules'],
53
- },
54
- },
55
- ],
56
- },
57
- {
58
- test: /\.(svg|png|jpe?g|gif|woff|woff2|eot|ttf|otf)$/,
59
- exclude: path.resolve('./src/icons'),
60
- use: [
61
- {
62
- loader: 'file-loader',
63
- options: {
64
- name: '[name].[ext]',
65
- outputPath: 'assets/',
66
- },
67
- },
68
- ],
69
- },
70
- {
71
- test: /\.svg$/,
72
- include: path.resolve('./src/icons'),
73
- use: [
74
- {
75
- loader: 'svg-sprite-loader',
76
- options: {
77
- extract: true,
78
- spriteFilename: 'assets/icons/icon-sprite.svg',
79
- // esModule: false,
80
- },
81
- },
82
- 'svgo-loader',
83
- ],
84
- },
85
- ],
86
- },
87
- plugins: [
88
- new MiniCssExtractPlugin({
89
- filename: '[name].css',
90
- }),
91
- new SpriteLoaderPlugin(),
92
- ],
93
- devServer: {
94
- historyApiFallback: true,
95
- compress: true,
96
- proxy: {
97
- '**': 'http://localhost:4000',
98
- },
99
- port: 3000,
100
- stats: {
101
- colors: true,
102
- },
103
- overlay: true,
104
- },
105
- optimization: {
106
- splitChunks: {
107
- cacheGroups: {
108
- styles: {
109
- name: 'styles',
110
- test: /\.css$/,
111
- chunks: 'all',
112
- enforce: true,
113
- },
114
- },
115
- },
116
- },
117
- };