@utrecht/heading-5-css 1.0.0 → 1.1.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.
Files changed (9) hide show
  1. package/dist/index.css +32 -0
  2. package/dist/index.js +1 -0
  3. package/package.json +12 -4
  4. package/src/_mixin.scss +28 -0
  5. package/src/html/_mixin.scss +13 -0
  6. package/src/html/index.scss +8 -0
  7. package/src/index.scss +16 -0
  8. package/src/story-template.jsx +47 -0
  9. package/src/tokens.json +74 -0
package/dist/index.css ADDED
@@ -0,0 +1,32 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021 Gemeente Utrecht
4
+ * Copyright (c) 2021 Robbert Broersma
5
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
6
+ */
7
+ /**
8
+ * @license EUPL-1.2
9
+ * Copyright (c) 2021 Gemeente Utrecht
10
+ * Copyright (c) 2021 Robbert Broersma
11
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
12
+ */
13
+ /**
14
+ * @license EUPL-1.2
15
+ * Copyright (c) 2021-2022 Frameless B.V.
16
+ */
17
+ .utrecht-heading-5 {
18
+ break-inside: avoid-column;
19
+ page-break-inside: avoid;
20
+ color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
21
+ font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
22
+ font-size: var(--utrecht-heading-5-font-size, revert);
23
+ font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
24
+ line-height: var(--utrecht-heading-5-line-height);
25
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
26
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
27
+ page-break-after: avoid;
28
+ }
29
+
30
+ .utrecht-heading-5--distanced {
31
+ --utrecht-space-around: 1;
32
+ }
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ var undefined$1 = undefined;export{undefined$1 as default};
package/package.json CHANGED
@@ -1,18 +1,26 @@
1
1
  {
2
- "version": "1.0.0",
2
+ "version": "1.1.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Heading 5 component for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
6
6
  "name": "@utrecht/heading-5-css",
7
7
  "files": [
8
- "dist/"
8
+ "dist/",
9
+ "src/"
9
10
  ],
10
- "devDependencies": {},
11
+ "main": "dist/index.css",
12
+ "devDependencies": {
13
+ "rollup": "3.29.4",
14
+ "@utrecht/heading-css": "1.1.0"
15
+ },
11
16
  "keywords": [
12
17
  "nl-design-system"
13
18
  ],
14
19
  "publishConfig": {
15
20
  "access": "public"
16
21
  },
17
- "scripts": {}
22
+ "scripts": {
23
+ "build": "rollup -c ../rollup.config.mjs",
24
+ "clean": "rimraf dist"
25
+ }
18
26
  }
package/src/_mixin.scss ADDED
@@ -0,0 +1,28 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021 Gemeente Utrecht
4
+ * Copyright (c) 2021 Robbert Broersma
5
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
6
+ */
7
+
8
+ @import "~@utrecht/heading-css/src/mixin";
9
+
10
+ @mixin utrecht-heading-5 {
11
+ @include utrecht-heading;
12
+
13
+ color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
14
+ font-family: var(
15
+ --utrecht-heading-5-font-family,
16
+ var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
17
+ );
18
+ font-size: var(--utrecht-heading-5-font-size, revert);
19
+ font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
20
+ line-height: var(--utrecht-heading-5-line-height);
21
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
22
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
23
+ page-break-after: avoid;
24
+ }
25
+
26
+ @mixin utrecht-heading-5--distanced {
27
+ --utrecht-space-around: 1;
28
+ }
package/src/html/_mixin.scss ADDED
@@ -0,0 +1,13 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021 Robbert Broersma
4
+ */
5
+
6
+ @import "../mixin";
7
+
8
+ @mixin utrecht-html-h5 {
9
+ h5 {
10
+ @include utrecht-heading-5;
11
+ @include utrecht-heading-5--distanced;
12
+ }
13
+ }
package/src/html/index.scss ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021 Robbert Broersma
4
+ */
5
+
6
+ @import "./mixin";
7
+
8
+ @include utrecht-html-h5;
package/src/index.scss ADDED
@@ -0,0 +1,16 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021 Gemeente Utrecht
4
+ * Copyright (c) 2021 Robbert Broersma
5
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
6
+ */
7
+
8
+ @import "./mixin";
9
+
10
+ .utrecht-heading-5 {
11
+ @include utrecht-heading-5;
12
+ }
13
+
14
+ .utrecht-heading-5--distanced {
15
+ @include utrecht-heading-5--distanced;
16
+ }
package/src/story-template.jsx ADDED
@@ -0,0 +1,47 @@
1
+ /*
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2020-2022 Gemeente Utrecht
4
+ * Copyright (c) 2020-2022 Frameless B.V.
5
+ */
6
+
7
+ import clsx from 'clsx';
8
+ import React from 'react';
9
+
10
+ export const argTypes = {
11
+ textContent: {
12
+ description: 'De content van de header',
13
+ control: 'text',
14
+ },
15
+ distanced: {
16
+ description: 'Zet afstand tussen de header en nabije content',
17
+ control: 'boolean',
18
+ },
19
+ };
20
+
21
+ export const defaultArgs = {
22
+ textContent: '',
23
+ distanced: false,
24
+ };
25
+
26
+ export const exampleArgs = {
27
+ textContent: 'The Quick Brown Fox Jumps Over The Lazy Dog',
28
+ };
29
+
30
+ export const Heading5 = ({
31
+ children,
32
+ textContent = defaultArgs.textContent,
33
+ distanced = defaultArgs.distanced,
34
+ ...restProps
35
+ }) => (
36
+ <h5
37
+ className={clsx('utrecht-heading-5', {
38
+ 'utrecht-heading-5--distanced': distanced,
39
+ })}
40
+ {...restProps}
41
+ >
42
+ {children}
43
+ {textContent}
44
+ </h5>
45
+ );
46
+
47
+ export default Heading5;
package/src/tokens.json ADDED
@@ -0,0 +1,74 @@
1
+ {
2
+ "utrecht": {
3
+ "heading-5": {
4
+ "color": {
5
+ "$extensions": {
6
+ "nl.nldesignsystem.css.property": {
7
+ "syntax": "<color>",
8
+ "inherits": true
9
+ },
10
+ "nl.nldesignsystem.fallback": ["utrecht.heading.color", "utrecht.document.color"]
11
+ },
12
+ "type": "color"
13
+ },
14
+ "font-family": {
15
+ "$extensions": {
16
+ "nl.nldesignsystem.css.property": {
17
+ "syntax": "*",
18
+ "inherits": true
19
+ },
20
+ "nl.nldesignsystem.fallback": ["utrecht.heading.font-family", "utrecht.document.font-family"]
21
+ },
22
+ "type": "fontFamilies"
23
+ },
24
+ "font-size": {
25
+ "$extensions": {
26
+ "nl.nldesignsystem.css.property": {
27
+ "syntax": "<length>",
28
+ "inherits": true
29
+ }
30
+ },
31
+ "type": "fontSizes"
32
+ },
33
+ "font-weight": {
34
+ "$extensions": {
35
+ "nl.nldesignsystem.css.property": {
36
+ "syntax": "<number>",
37
+ "inherits": true
38
+ },
39
+ "nl.nldesignsystem.fallback": ["utrecht.heading.font-weight"]
40
+ },
41
+ "type": "fontWeights"
42
+ },
43
+ "line-height": {
44
+ "$extensions": {
45
+ "nl.nldesignsystem.css.property": {
46
+ "syntax": "<length>",
47
+ "inherits": true
48
+ }
49
+ },
50
+ "type": "lineHeights"
51
+ },
52
+ "margin-block-end": {
53
+ "$extensions": {
54
+ "nl.nldesignsystem.css.property": {
55
+ "syntax": "<length>",
56
+ "inherits": true
57
+ },
58
+ "nl.nldesignsystem.figma.supports-token": false
59
+ },
60
+ "type": "spacing"
61
+ },
62
+ "margin-block-start": {
63
+ "$extensions": {
64
+ "nl.nldesignsystem.css.property": {
65
+ "syntax": "<length>",
66
+ "inherits": true
67
+ },
68
+ "nl.nldesignsystem.figma.supports-token": false
69
+ },
70
+ "type": "spacing"
71
+ }
72
+ }
73
+ }
74
+ }