@internetstiftelsen/styleguide 2.25.2 → 2.25.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.
package/package.json
CHANGED
package/src/base/_normalize.scss
CHANGED
|
@@ -12,6 +12,7 @@ html {
|
|
|
12
12
|
color: $color-cyberspace;
|
|
13
13
|
font-family: sans-serif;
|
|
14
14
|
font-size: percentage(math.div($size-base, 16px));
|
|
15
|
+
font-variant-ligatures: no-common-ligatures;
|
|
15
16
|
-ms-overflow-style: scrollbar;
|
|
16
17
|
-webkit-text-size-adjust: 100%;
|
|
17
18
|
-ms-text-size-adjust: 100%;
|
|
@@ -9,15 +9,16 @@ error/success states and set validation rules.
|
|
|
9
9
|
|
|
10
10
|
## Success
|
|
11
11
|
|
|
12
|
-
The success
|
|
13
|
-
You can use template tags that will be replaced with the data received from the API.
|
|
12
|
+
The success response is handled via an EJS template and a `data-form-success` element.
|
|
14
13
|
|
|
15
14
|
Like this:
|
|
16
15
|
|
|
17
|
-
```
|
|
18
|
-
<div data-form-success>
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
```html
|
|
17
|
+
<div role="alert" data-form-success="locations" class="m-alert m-alert--success is-hidden"></div>
|
|
18
|
+
|
|
19
|
+
<script type="iis/template" id="locations">
|
|
20
|
+
<% locations.forEach(function (location) { %><li><%- location.city %> (<%- location.country %>)</li><% }); %>
|
|
21
|
+
</script>
|
|
21
22
|
```
|
|
22
23
|
|
|
23
24
|
## Error
|
|
@@ -41,3 +42,28 @@ __Available rules__:
|
|
|
41
42
|
| ---- | ---- | ----------- |
|
|
42
43
|
| required | - | The field must exist |
|
|
43
44
|
| min | numeric | Checks if the value of the field is at least N characters |
|
|
45
|
+
|
|
46
|
+
## Events
|
|
47
|
+
|
|
48
|
+
All form elements (`data-form`) has the actual form component attached to it. You can access it like this:
|
|
49
|
+
|
|
50
|
+
```javascript
|
|
51
|
+
const form = document.querySelector('[data-form]').form;
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
The form component has a few events you can listen to:
|
|
55
|
+
|
|
56
|
+
| Name | Description |
|
|
57
|
+
| ---- | ----------- |
|
|
58
|
+
| success | The form was successfully submitted |
|
|
59
|
+
| error | The form failed to submit |
|
|
60
|
+
|
|
61
|
+
You can listen to these events like this:
|
|
62
|
+
|
|
63
|
+
```javascript
|
|
64
|
+
form.events.on('success', (data) => {
|
|
65
|
+
console.log('Form was successfully submitted', data);
|
|
66
|
+
});
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
This can be used for tracking and other things.
|