@dictu/form-field 1.0.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 (7) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +21 -0
  3. package/dist/index.css +1 -0
  4. package/dist/index.css.map +1 -0
  5. package/package.json +37 -0
  6. package/src/_mixin.scss +68 -0
  7. package/src/index.scss +42 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,7 @@
1
+ # @dictu/form-field
2
+
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 34a7da2: Added Form field component
package/README.md ADDED
@@ -0,0 +1,21 @@
1
+ <!-- @license CC0-1.0 -->
2
+
3
+ ## De Form field component implementeren
4
+
5
+ Je kunt de CSS zo in je project installeren:
6
+
7
+ ```console
8
+ npm install --save-dev @dictu/form-field
9
+ ```
10
+
11
+ Je kunt de CSS uit `node_modules/` importeren:
12
+
13
+ ```html
14
+ <link rel="stylesheet" href="node_modules/@dictu/form-field/dist/index.css" />
15
+ ```
16
+
17
+ Als je CSS imports gebruikt vanuit JavaScript:
18
+
19
+ ```javascript
20
+ import "@dictu/form-field/dist/index.css";
21
+ ```
package/dist/index.css ADDED
@@ -0,0 +1 @@
1
+ .dictu-form-field{border-style:solid;border-width:0;display:flex;flex-direction:column;row-gap:var(--govnl-form-field-row-gap)}.dictu-form-field--inline{align-items:center;flex-direction:row;row-gap:var(--govnl-form-field-row-gap)}.dictu-form-field__label{align-items:baseline;color:var(--govnl-label-color);column-gap:var(--govnl-label-column-gap);display:inline-flex;font-family:var(--govnl-fieldset-legend-font-family);font-size:var(--govnl-fieldset-legend-font-size);font-weight:var(--govnl-fieldset-legend-regular-font-weight)}.dictu-form-field__label--strong{font-weight:var(--govnl-fieldset-legend-strong-font-weight)}.dictu-form-field__legend-required{color:var(--govnl-label-required-color);font-family:var(--govnl-label-required-font-family);font-size:var(--govnl-label-required-font-size);font-weight:var(--govnl-label-required-font-weight)}.dictu-form-field--error{border-color:var(--govnl-form-field-error-border-color);border-inline-start-width:var(--govnl-form-field-error-border-inline-start-width);padding-inline-start:var(--govnl-form-field-error-padding-inline-start)}.dictu-form-field__error-message{align-items:center;color:var(--govnl-form-field-error-message-color);column-gap:var(--govnl-form-field-error-message-column-gap);display:flex;font-family:var(--govnl-form-field-error-message-font-family);font-size:var(--govnl-form-field-error-message-font-size);font-weight:var(--govnl-form-field-error-message-font-weight)}.dictu-form-field__error-icon{block-size:var(--govnl-form-field-error-message-icon-size);color:var(--govnl-form-field-error-message-icon-color);inline-size:var(--govnl-form-field-error-message-icon-size)}.dictu-form-field__description{color:var(--govnl-form-field-description-color);font-family:var(--govnl-form-field-description-font-family);font-size:var(--govnl-form-field-description-font-size);font-weight:var(--govnl-form-field-description-font-weight)}/*# sourceMappingURL=index.css.map */
package/dist/index.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../src/index.scss","../src/_mixin.scss"],"names":[],"mappings":"AAOA,kBCDE,mBACA,eACA,aACA,sBACA,wCDCF,0BCGE,mBACA,mBACA,wCDDF,yBCKE,qBACA,+BACA,yCACA,oBACA,qDACA,iDACA,6DDPF,iCCWE,4DDPF,mCCWE,wCACA,oDACA,gDACA,oDDVF,yBCqBE,wDACA,kFACA,wEDnBF,iCCuBE,mBACA,kDACA,4DACA,aACA,8DACA,0DACA,8DDzBF,8BC6BE,2DACA,uDACA,4DD3BF,+BCEE,gDACA,4DACA,wDACA","file":"index.css"}
package/package.json ADDED
@@ -0,0 +1,37 @@
1
+ {
2
+ "name": "@dictu/form-field",
3
+ "version": "1.0.0",
4
+ "author": "Dienst ICT Uitvoering",
5
+ "description": "Form field CSS component.",
6
+ "license": "EUPL-1.2",
7
+ "keywords": [
8
+ "nl-design-system",
9
+ "css",
10
+ "form field"
11
+ ],
12
+ "repository": {
13
+ "type": "git+ssh",
14
+ "url": "git@github.com:drupalgovnl/govnl-nlds.git",
15
+ "directory": "components/form-field"
16
+ },
17
+ "files": [
18
+ "src/",
19
+ "dist/",
20
+ "*.md"
21
+ ],
22
+ "exports": {
23
+ "./dist/*": "./dist/*"
24
+ },
25
+ "publishConfig": {
26
+ "access": "public",
27
+ "provenance": true
28
+ },
29
+ "scripts": {
30
+ "build": "npx sass --pkg-importer=node --style=compressed ./src/:./dist/",
31
+ "watch": "npx sass --pkg-importer=node --style=compressed --watch ./src/:./dist/",
32
+ "clean": "rimraf ./dist/"
33
+ },
34
+ "devDependencies": {
35
+ "@dictu/utility-focus-ring": "*"
36
+ }
37
+ }
package/src/_mixin.scss ADDED
@@ -0,0 +1,68 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021-2025 dictu
4
+ */
5
+
6
+ @mixin dictu-form-field {
7
+ border-style: solid;
8
+ border-width: 0;
9
+ display: flex;
10
+ flex-direction: column;
11
+ row-gap: var(--govnl-form-field-row-gap);
12
+ }
13
+
14
+ @mixin dictu-form-field--inline {
15
+ align-items: center;
16
+ flex-direction: row;
17
+ row-gap: var(--govnl-form-field-row-gap);
18
+ }
19
+
20
+ @mixin dictu-form-field__label {
21
+ align-items: baseline;
22
+ color: var(--govnl-label-color);
23
+ column-gap: var(--govnl-label-column-gap);
24
+ display: inline-flex;
25
+ font-family: var(--govnl-fieldset-legend-font-family);
26
+ font-size: var(--govnl-fieldset-legend-font-size);
27
+ font-weight: var(--govnl-fieldset-legend-regular-font-weight);
28
+ }
29
+
30
+ @mixin dictu-form-field__label--strong {
31
+ font-weight: var(--govnl-fieldset-legend-strong-font-weight);
32
+ }
33
+
34
+ @mixin dictu-form-field__label-required {
35
+ color: var(--govnl-label-required-color);
36
+ font-family: var(--govnl-label-required-font-family);
37
+ font-size: var(--govnl-label-required-font-size);
38
+ font-weight: var(--govnl-label-required-font-weight);
39
+ }
40
+
41
+ @mixin dictu-form-field__description {
42
+ color: var(--govnl-form-field-description-color);
43
+ font-family: var(--govnl-form-field-description-font-family);
44
+ font-size: var(--govnl-form-field-description-font-size);
45
+ font-weight: var(--govnl-form-field-description-font-weight);
46
+ }
47
+
48
+ @mixin dictu-form-field--error {
49
+ border-color: var(--govnl-form-field-error-border-color);
50
+ border-inline-start-width: var(--govnl-form-field-error-border-inline-start-width);
51
+ padding-inline-start: var(--govnl-form-field-error-padding-inline-start);
52
+ }
53
+
54
+ @mixin dictu-form-field__error-message {
55
+ align-items: center;
56
+ color: var(--govnl-form-field-error-message-color);
57
+ column-gap: var(--govnl-form-field-error-message-column-gap);
58
+ display: flex;
59
+ font-family: var(--govnl-form-field-error-message-font-family);
60
+ font-size: var(--govnl-form-field-error-message-font-size);
61
+ font-weight: var(--govnl-form-field-error-message-font-weight);
62
+ }
63
+
64
+ @mixin dictu-form-field__error-icon {
65
+ block-size: var(--govnl-form-field-error-message-icon-size);
66
+ color: var(--govnl-form-field-error-message-icon-color);
67
+ inline-size: var(--govnl-form-field-error-message-icon-size);
68
+ }
package/src/index.scss ADDED
@@ -0,0 +1,42 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021-2025 dictu
4
+ */
5
+
6
+ @use "mixin" as mixin;
7
+
8
+ .dictu-form-field {
9
+ @include mixin.dictu-form-field;
10
+ }
11
+
12
+ .dictu-form-field--inline {
13
+ @include mixin.dictu-form-field--inline;
14
+ }
15
+
16
+ .dictu-form-field__label {
17
+ @include mixin.dictu-form-field__label;
18
+ }
19
+
20
+ .dictu-form-field__label--strong {
21
+ @include mixin.dictu-form-field__label--strong;
22
+ }
23
+
24
+ .dictu-form-field__legend-required {
25
+ @include mixin.dictu-form-field__label-required;
26
+ }
27
+
28
+ .dictu-form-field--error {
29
+ @include mixin.dictu-form-field--error;
30
+ }
31
+
32
+ .dictu-form-field__error-message {
33
+ @include mixin.dictu-form-field__error-message;
34
+ }
35
+
36
+ .dictu-form-field__error-icon {
37
+ @include mixin.dictu-form-field__error-icon;
38
+ }
39
+
40
+ .dictu-form-field__description {
41
+ @include mixin.dictu-form-field__description;
42
+ }