@mrfylke/contact-form 0.1.5 → 0.1.7

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 (40) hide show
  1. package/README.md +17 -0
  2. package/lib/components/button/button.module.css +151 -139
  3. package/lib/components/checkbox/checkbox.module.css +40 -37
  4. package/lib/components/error-message/error-message.module.css +2 -2
  5. package/lib/components/external-link-page.module.css +15 -15
  6. package/lib/components/form/fieldset/fieldset.module.css +15 -15
  7. package/lib/components/form/form-component-label/form-component-label.module.css +4 -4
  8. package/lib/components/form/form.module.css +324 -308
  9. package/lib/components/loading/loading.module.css +9 -9
  10. package/lib/components/section-card/section-card.module.css +10 -10
  11. package/lib/contact.module.css +37 -36
  12. package/lib/error-content/error-content.module.css +7 -7
  13. package/lib/layouts/container.module.css +10 -10
  14. package/lib/layouts/layout.module.css +46 -45
  15. package/lib/modules/config/types.d.ts +2 -32
  16. package/lib/modules/config/types.d.ts.map +1 -1
  17. package/lib/modules/transport-mode/filter/filter.module.css +51 -49
  18. package/lib/modules/transport-mode/icon/icon.module.css +14 -14
  19. package/lib/success-content/success-content.module.css +7 -7
  20. package/lib/translations/modules/index.d.ts +0 -1
  21. package/lib/translations/modules/index.d.ts.map +1 -1
  22. package/lib/translations/modules/index.js +1 -3
  23. package/package.json +2 -3
  24. package/lib/layouts/contact-form-footer.d.ts +0 -5
  25. package/lib/layouts/contact-form-footer.d.ts.map +0 -1
  26. package/lib/layouts/contact-form-footer.js +0 -75
  27. package/lib/layouts/contact-form-header.d.ts +0 -9
  28. package/lib/layouts/contact-form-header.d.ts.map +0 -1
  29. package/lib/layouts/contact-form-header.js +0 -50
  30. package/lib/layouts/footer.module.css +0 -109
  31. package/lib/layouts/header.module.css +0 -39
  32. package/lib/translations/modules/layout.d.ts +0 -73
  33. package/lib/translations/modules/layout.d.ts.map +0 -1
  34. package/lib/translations/modules/layout.js +0 -106
  35. package/lib/utils/use-localstorage.d.ts +0 -2
  36. package/lib/utils/use-localstorage.d.ts.map +0 -1
  37. package/lib/utils/use-localstorage.js +0 -40
  38. package/lib/utils/user-media-query.d.ts +0 -2
  39. package/lib/utils/user-media-query.d.ts.map +0 -1
  40. package/lib/utils/user-media-query.js +0 -36
package/lib/components/checkbox/checkbox.module.css CHANGED
@@ -4,93 +4,96 @@
4
4
 
5
5
  /* Checkbox */
6
6
  .checkbox {
7
- display: block;
8
- transition: border 150ms ease-in-out,
7
+ display: block;
8
+ transition:
9
+ border 150ms ease-in-out,
9
10
  background-color 100ms ease;
10
- cursor: pointer;
11
- padding: token('spacing.medium');
12
- border-radius: token('border.radius.small');
11
+ cursor: pointer;
12
+ padding: token('spacing.medium');
13
+ border-radius: token('border.radius.small');
13
14
  }
14
15
 
15
16
  .checkbox:not(.checkbox--readonly) {
16
- background-color: token('color.interactive.2.default.background');
17
- color: token('color.interactive.2.default.foreground.primary');
17
+ background-color: token('color.interactive.2.default.background');
18
+ color: token('color.interactive.2.default.foreground.primary');
18
19
  }
19
20
 
20
21
  .checkbox:not(.checkbox--readonly):hover {
21
- background-color: token('color.interactive.2.hover.background');
22
- color: token('color.interactive.2.hover.foreground.primary');
22
+ background-color: token('color.interactive.2.hover.background');
23
+ color: token('color.interactive.2.hover.foreground.primary');
23
24
  }
24
25
 
25
26
  .checkbox:not(.checkbox--readonly):active {
26
- background-color: token('color.interactive.2.active.background');
27
- color: token('color.interactive.2.active.foreground.primary');
27
+ background-color: token('color.interactive.2.active.background');
28
+ color: token('color.interactive.2.active.foreground.primary');
28
29
  }
29
30
 
30
31
  .checkbox:not(.checkbox--readonly):disabled {
31
- background-color: token('color.interactive.2.disabled.background');
32
- color: token('color.interactive.2.disabled.foreground.primary');
32
+ background-color: token('color.interactive.2.disabled.background');
33
+ color: token('color.interactive.2.disabled.foreground.primary');
33
34
  }
34
35
 
35
36
  .checkbox:not(.checkbox--readonly):focus-within {
36
- outline: 0;
37
- box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.2.outline.background');
37
+ outline: 0;
38
+ box-shadow: inset 0 0 0 token('border.width.slim')
39
+ token('color.interactive.2.outline.background');
38
40
  }
39
41
 
40
42
  .checkbox--expand {
41
- display: flex;
42
- flex: 1;
43
- flex-grow: 1;
43
+ display: flex;
44
+ flex: 1;
45
+ flex-grow: 1;
44
46
  }
45
47
 
46
48
  .checkbox--disabled {
47
- cursor: not-allowed;
49
+ cursor: not-allowed;
48
50
  }
49
51
 
50
52
  .checkbox--disabled > * {
51
- opacity: 0.2;
53
+ opacity: 0.2;
52
54
  }
53
55
 
54
56
  .checkbox--error {
55
- border-color: token('color.status.error.primary.background');
57
+ border-color: token('color.status.error.primary.background');
56
58
  }
57
59
 
58
60
  .checkbox__checkbox {
59
- position: absolute;
60
- opacity: 0;
61
- width: 1px;
62
- height: 1px;
61
+ position: absolute;
62
+ opacity: 0;
63
+ width: 1px;
64
+ height: 1px;
63
65
  }
64
66
 
65
67
  .checkbox__checkbox:focus {
66
- outline: 0;
68
+ outline: 0;
67
69
  }
68
70
 
69
71
  .checkbox__checkbox[readonly] {
70
- color: token('color.foreground.dynamic.secondary');
72
+ color: token('color.foreground.dynamic.secondary');
71
73
  }
72
74
 
73
75
  :global(.dark) .checkbox__checkbox::-webkit-calendar-picker-indicator {
74
- filter: invert(1);
76
+ filter: invert(1);
75
77
  }
76
78
 
77
79
  .checkbox__content {
78
- display: flex;
79
- gap: token('spacing.medium');
80
+ display: flex;
81
+ gap: token('spacing.medium');
80
82
  }
81
83
 
82
84
  .checkbox__label {
83
- flex: 1;
85
+ flex: 1;
84
86
  }
85
87
 
86
88
  .checkbox__description {
87
- flex: 1;
88
- opacity: 0.6;
89
- margin-top: token('spacing.small');
90
- composes: typo-body__s from '@atb-as/theme/lib/generated/typography.module.css';
89
+ flex: 1;
90
+ opacity: 0.6;
91
+ margin-top: token('spacing.small');
92
+ composes: typo-body__s from '@atb-as/theme/lib/generated/typography.module.css';
91
93
  }
92
94
 
93
95
  .checkbox__checkbox:not(:checked) + .checkbox__icon {
94
- border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
95
- border-radius: token('border.radius.small');
96
+ border: token('border.width.slim') solid
97
+ token('color.foreground.dynamic.primary');
98
+ border-radius: token('border.radius.small');
96
99
  }
package/lib/components/error-message/error-message.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* error message */
2
2
 
3
3
  .errorMessage {
4
- display: flex;
5
- gap: token('spacing.small');
4
+ display: flex;
5
+ gap: token('spacing.small');
6
6
  }
package/lib/components/external-link-page.module.css CHANGED
@@ -1,29 +1,29 @@
1
1
  .externalLinkPage {
2
- display: flex;
3
- flex-direction: column;
4
- align-items: center;
5
- justify-content: center;
6
- min-height: 400px;
7
- padding: var(--spacer-large);
2
+ display: flex;
3
+ flex-direction: column;
4
+ align-items: center;
5
+ justify-content: center;
6
+ min-height: 400px;
7
+ padding: var(--spacer-large);
8
8
  }
9
9
 
10
10
  .externalLinkPage__content {
11
- display: flex;
12
- flex-direction: column;
13
- align-items: center;
14
- gap: var(--spacer-medium);
15
- max-width: 600px;
16
- text-align: center;
11
+ display: flex;
12
+ flex-direction: column;
13
+ align-items: center;
14
+ gap: var(--spacer-medium);
15
+ max-width: 600px;
16
+ text-align: center;
17
17
  }
18
18
 
19
19
  .externalLinkPage__title {
20
- margin-bottom: var(--spacer-small);
20
+ margin-bottom: var(--spacer-small);
21
21
  }
22
22
 
23
23
  .externalLinkPage__description {
24
- margin-bottom: var(--spacer-medium);
24
+ margin-bottom: var(--spacer-medium);
25
25
  }
26
26
 
27
27
  .externalLinkPage__button {
28
- margin-top: var(--spacer-medium);
28
+ margin-top: var(--spacer-medium);
29
29
  }
package/lib/components/form/fieldset/fieldset.module.css CHANGED
@@ -1,26 +1,26 @@
1
1
  .fieldset {
2
- position: relative;
3
- display: flex;
4
- flex-direction: column;
5
- padding: token('spacing.large');
6
- border: none;
7
- border-radius: token('border.radius.regular');
8
- color: token('color.background.neutral.0.foreground.primary');
9
- background-color: token('color.background.neutral.0.background');
10
- gap: token('spacing.xSmall');
2
+ position: relative;
3
+ display: flex;
4
+ flex-direction: column;
5
+ padding: token('spacing.large');
6
+ border: none;
7
+ border-radius: token('border.radius.regular');
8
+ color: token('color.background.neutral.0.foreground.primary');
9
+ background-color: token('color.background.neutral.0.background');
10
+ gap: token('spacing.xSmall');
11
11
  }
12
12
 
13
13
  .fieldset > * + * {
14
- margin-top: token('spacing.xLarge');
14
+ margin-top: token('spacing.xLarge');
15
15
  }
16
16
 
17
17
  .legend {
18
- position: absolute;
19
- top: token('spacing.medium');
18
+ position: absolute;
19
+ top: token('spacing.medium');
20
20
  }
21
21
 
22
22
  .required::after {
23
- content: '*';
24
- color: token('color.status.error.primary.background');
25
- margin-left: token('spacing.small');
23
+ content: '*';
24
+ color: token('color.status.error.primary.background');
25
+ margin-left: token('spacing.small');
26
26
  }
package/lib/components/form/form-component-label/form-component-label.module.css CHANGED
@@ -1,10 +1,10 @@
1
1
  .required::after {
2
- content: '*';
3
- color: token('color.status.error.primary.background');
4
- margin-left: token('spacing.small');
2
+ content: '*';
3
+ color: token('color.status.error.primary.background');
4
+ margin-left: token('spacing.small');
5
5
  }
6
6
 
7
7
  .disabled,
8
8
  .disabled::after {
9
- color: token('color.foreground.dynamic.disabled');
9
+ color: token('color.foreground.dynamic.disabled');
10
10
  }