@mrfylke/contact-form 0.1.5 → 0.1.7

package/README.md

@@ -0,0 +1,17 @@
+# @mrfylke/contact-form
+
+A configurable contact form package for public transportation organizations.
+
+## Installation
+
+```bash
+npm install @mrfylke/contact-form
+```
+
+## Usage
+
+See [INTEGRATION.md](./INTEGRATION.md) for detailed integration instructions.
+
+## License
+
+EUPL-1.2

package/lib/components/button/button.module.css

@@ -1,40 +1,40 @@
 /* Button */
 .button {
-    composes: typo-body__m from '@atb-as/theme/lib/generated/typography.module.css';
-    cursor: pointer;
-    text-align: left;
-    border: 0;
-    text-decoration: none;
-    align-items: center;
+  composes: typo-body__m from '@atb-as/theme/lib/generated/typography.module.css';
+  cursor: pointer;
+  text-align: left;
+  border: 0;
+  text-decoration: none;
+  align-items: center;
 
-    display: flex;
+  display: flex;
 
-    flex-wrap: nowrap;
-    gap: token('spacing.small');
+  flex-wrap: nowrap;
+  gap: token('spacing.small');
 
-    background: transparent;
-    color: currentColor;
+  background: transparent;
+  color: currentColor;
 
-    transition: all 100ms ease-in;
+  transition: all 100ms ease-in;
 }
 
 .button--display_inline {
-    display: inline-flex;
+  display: inline-flex;
 }
 
 .button--disabled,
 .button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
 .button--state_loading {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .button__text {
-    display: block;
-    flex: 1;
+  display: block;
+  flex: 1;
 }
 
 .button--transparent,
@@ -42,358 +42,370 @@
 }
 
 .button--transparent:hover {
-    color: token('color.foreground.dynamic.secondary');
+  color: token('color.foreground.dynamic.secondary');
 }
 
 .button--transparent:active {
-    background-color: token('color.interactive.0.active.background');
-    color: token('color.interactive.0.active.foreground.primary');
+  background-color: token('color.interactive.0.active.background');
+  color: token('color.interactive.0.active.foreground.primary');
 }
 
 .button--transparent:disabled,
 .button--transparent.button--disabled {
-    opacity: 0.6;
+  opacity: 0.6;
 }
 
 .button--transparent:focus {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.1.outline.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.medium')
+    token('color.interactive.1.outline.background');
 }
 
 .button--transparent--underline,
 .button--transparent--underline:visited {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 .button--transparent--underline:hover {
-    color: token('color.foreground.dynamic.secondary');
+  color: token('color.foreground.dynamic.secondary');
 }
 
 .button--transparent--underline:active {
-    background-color: token('color.interactive.0.active.background');
-    color: token('color.interactive.0.active.foreground.primary');
+  background-color: token('color.interactive.0.active.background');
+  color: token('color.interactive.0.active.foreground.primary');
 }
 
 .button--transparent--underline:disabled,
 .button--transparent--underline.button--disabled {
-    opacity: 0.6;
+  opacity: 0.6;
 }
 
 .button--transparent--underline:focus {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.1.outline.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.medium')
+    token('color.interactive.1.outline.background');
 }
 
 /* Primary */
 .button--primary,
 .button--primary:visited {
-    color: token('color.foreground.inverse.primary');
-    background-color: token('color.interactive.0.default.background');
+  color: token('color.foreground.inverse.primary');
+  background-color: token('color.interactive.0.default.background');
 }
 
 .button--primary:not(:disabled):hover,
 .button--primary:not(:disabled):active,
 .button--primary.button--state_active {
-    color: token('color.foreground.dynamic.primary');
-    background-color: token('color.interactive.0.active.background');
+  color: token('color.foreground.dynamic.primary');
+  background-color: token('color.interactive.0.active.background');
 }
 
 .button--primary:disabled,
 .button--primary.button--disabled {
-    opacity: 0.2;
+  opacity: 0.2;
 }
 
 /* Secondary */
 .button--secondary,
 .button--secondary:visited {
-    color: token('color.foreground.dynamic.primary');
-    border: 2px solid token('color.foreground.dynamic.primary');
+  color: token('color.foreground.dynamic.primary');
+  border: 2px solid token('color.foreground.dynamic.primary');
 }
 
 .button--secondary:not(:disabled):hover,
 .button--secondary:not(:disabled):active,
 .button--secondary.button--state_active {
-    background-color: token('color.interactive.0.active.background');
-    border: 2px solid token('color.interactive.0.outline.background');
+  background-color: token('color.interactive.0.active.background');
+  border: 2px solid token('color.interactive.0.outline.background');
 }
 
 .button--secondary:disabled,
 .button--secondary.button--disabled {
-    opacity: 0.2;
+  opacity: 0.2;
 }
 
 /* Interactive button 0 */
 .button--interactive_0,
 .button--interactive_0:visited {
-    background-color: token('color.interactive.0.default.background');
-    color: token('color.interactive.0.default.foreground.primary');
+  background-color: token('color.interactive.0.default.background');
+  color: token('color.interactive.0.default.foreground.primary');
 }
 
 .button--interactive_0:hover {
-    background-color: token('color.interactive.0.hover.background');
-    color: token('color.interactive.0.hover.foreground.primary');
+  background-color: token('color.interactive.0.hover.background');
+  color: token('color.interactive.0.hover.foreground.primary');
 }
 
 .button--interactive_0:active {
-    background-color: token('color.interactive.0.active.background');
-    color: token('color.interactive.0.active.foreground.primary');
+  background-color: token('color.interactive.0.active.background');
+  color: token('color.interactive.0.active.foreground.primary');
 }
 
 .button--interactive_0:disabled,
 .button--interactive_0.button--disabled {
-    background-color: token('color.interactive.0.disabled.background');
-    color: token('color.interactive.0.disabled.foreground.primary');
+  background-color: token('color.interactive.0.disabled.background');
+  color: token('color.interactive.0.disabled.foreground.primary');
 }
 
 .button--interactive_0:focus {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.0.outline.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.medium')
+    token('color.interactive.0.outline.background');
 }
 
 /* Interactive button 0 bordered */
 .button--interactive_0--bordered,
 .button--interactive_0--bordered:visited {
-    background-color: token('color.interactive.0.default.background');
-    color: token('color.interactive.0.default.foreground.primary');
-    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.0.default.foreground.primary');
+  background-color: token('color.interactive.0.default.background');
+  color: token('color.interactive.0.default.foreground.primary');
+  box-shadow: inset 0 0 0 token('border.width.slim')
+    token('color.interactive.0.default.foreground.primary');
 }
 
 .button--interactive_0--bordered:hover {
-    background-color: token('color.interactive.0.hover.background');
-    color: token('color.interactive.0.hover.foreground.primary');
+  background-color: token('color.interactive.0.hover.background');
+  color: token('color.interactive.0.hover.foreground.primary');
 }
 
 .button--interactive_0--bordered:active {
-    background-color: token('color.interactive.0.active.background');
-    color: token('color.interactive.0.active.foreground.primary');
+  background-color: token('color.interactive.0.active.background');
+  color: token('color.interactive.0.active.foreground.primary');
 }
 
 .button--interactive_0--bordered:disabled,
 .button--interactive_0--bordered.button--disabled {
-    background-color: token('color.interactive.0.disabled.background');
-    color: token('color.interactive.0.disabled.foreground.primary');
+  background-color: token('color.interactive.0.disabled.background');
+  color: token('color.interactive.0.disabled.foreground.primary');
 }
 
 .button--interactive_0--bordered:focus {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.0.outline.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.medium')
+    token('color.interactive.0.outline.background');
 }
 
 .button--interactive_0--bordered-light-outline,
 .button--interactive_0--bordered-light-outline:visited {
-    background-color: token('color.interactive.0.default.background');
-    color: token('color.interactive.0.default.foreground.primary');
-    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.0.default.foreground.primary');
+  background-color: token('color.interactive.0.default.background');
+  color: token('color.interactive.0.default.foreground.primary');
+  box-shadow: inset 0 0 0 token('border.width.slim')
+    token('color.interactive.0.default.foreground.primary');
 }
 
 .button--interactive_0--bordered-light-outline:hover {
-    background-color: token('color.interactive.0.hover.background');
-    color: token('color.interactive.0.hover.foreground.primary');
+  background-color: token('color.interactive.0.hover.background');
+  color: token('color.interactive.0.hover.foreground.primary');
 }
 
 .button--interactive_0--bordered-light-outline:active {
-    background-color: token('color.interactive.1.hover.background');
-    color: token('color.interactive.1.active.foreground.primary');
+  background-color: token('color.interactive.1.hover.background');
+  color: token('color.interactive.1.active.foreground.primary');
 }
 
 .button--interactive_0--bordered-light-outline:disabled,
 .button--interactive_0--bordered-light-outline.button--disabled {
-    background-color: token('color.interactive.0.disabled.background');
-    color: token('color.interactive.0.disabled.foreground.primary');
+  background-color: token('color.interactive.0.disabled.background');
+  color: token('color.interactive.0.disabled.foreground.primary');
 }
 
 .button--interactive_0--bordered-light-outline:focus {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.0.active.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.medium')
+    token('color.interactive.0.active.background');
 }
 
 /* Interactive button 1 */
 
 .button--interactive_1,
 .button--interactive_1:visited {
-    background-color: token('color.interactive.1.default.background');
-    color: token('color.interactive.1.default.foreground.primary');
+  background-color: token('color.interactive.1.default.background');
+  color: token('color.interactive.1.default.foreground.primary');
 }
 
 .button--interactive_1:hover {
-    background-color: token('color.interactive.1.hover.background');
-    color: token('color.interactive.1.hover.foreground.primary');
+  background-color: token('color.interactive.1.hover.background');
+  color: token('color.interactive.1.hover.foreground.primary');
 }
 
 .button--interactive_1:active {
-    background-color: token('color.interactive.1.active.background');
-    color: token('color.interactive.1.active.foreground.primary');
+  background-color: token('color.interactive.1.active.background');
+  color: token('color.interactive.1.active.foreground.primary');
 }
 
 .button--interactive_1:disabled,
 .button--interactive_1.button--disabled {
-    background-color: token('color.interactive.1.disabled.background');
-    color: token('color.interactive.1.disabled.foreground.primary');
+  background-color: token('color.interactive.1.disabled.background');
+  color: token('color.interactive.1.disabled.foreground.primary');
 }
 
 .button--interactive_1:focus {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.1.outline.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.medium')
+    token('color.interactive.1.outline.background');
 }
 
 /* Interactive button 2 */
 
 .button--interactive_2,
 .button--interactive_2:visited {
-    background-color: token('color.interactive.2.default.background');
-    color: token('color.interactive.2.default.foreground.primary');
+  background-color: token('color.interactive.2.default.background');
+  color: token('color.interactive.2.default.foreground.primary');
 }
 
 .button--interactive_2:hover {
-    background-color: token('color.interactive.2.hover.background');
-    color: token('color.interactive.2.hover.foreground.primary');
+  background-color: token('color.interactive.2.hover.background');
+  color: token('color.interactive.2.hover.foreground.primary');
 }
 
 .button--interactive_2:active {
-    background-color: token('color.interactive.2.active.background');
-    color: token('color.interactive.2.active.foreground.primary');
+  background-color: token('color.interactive.2.active.background');
+  color: token('color.interactive.2.active.foreground.primary');
 }
 
 .button--interactive_2:disabled,
 .button--interactive_2.button--disabled {
-    background-color: token('color.interactive.2.disabled.background');
-    color: token('color.interactive.2.disabled.foreground.primary');
+  background-color: token('color.interactive.2.disabled.background');
+  color: token('color.interactive.2.disabled.foreground.primary');
 }
 
 .button--interactive_2:focus {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.2.outline.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.medium')
+    token('color.interactive.2.outline.background');
 }
 
 /* Interactive button 2 alternative */
 
 .button--interactive_2--light-outline,
 .button--interactive_2--light-outline:visited {
-    background-color: token('color.interactive.2.default.background');
-    color: token('color.interactive.2.default.foreground.primary');
+  background-color: token('color.interactive.2.default.background');
+  color: token('color.interactive.2.default.foreground.primary');
 }
 
 .button--interactive_2--light-outline:hover {
-    background-color: token('color.interactive.2.hover.background');
-    color: token('color.interactive.2.hover.foreground.primary');
+  background-color: token('color.interactive.2.hover.background');
+  color: token('color.interactive.2.hover.foreground.primary');
 }
 
 .button--interactive_2--light-outline:active {
-    background-color: token('color.interactive.2.active.background');
-    color: token('color.interactive.2.active.foreground.primary');
+  background-color: token('color.interactive.2.active.background');
+  color: token('color.interactive.2.active.foreground.primary');
 }
 
 .button--interactive_2--light-outline:disabled,
 .button--interactive_2--light-outline.button--disabled {
-    background-color: token('color.interactive.2.disabled.background');
-    color: token('color.interactive.2.disabled.foreground.primary');
+  background-color: token('color.interactive.2.disabled.background');
+  color: token('color.interactive.2.disabled.foreground.primary');
 }
 
 .button--interactive_2--light-outline:focus {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.1.active.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.medium')
+    token('color.interactive.1.active.background');
 }
 
 /* Interactive button 3 */
 
 .button--interactive_3,
 .button--interactive_3:visited {
-    background-color: token('color.interactive.3.default.background');
-    color: token('color.interactive.3.default.foreground.primary');
+  background-color: token('color.interactive.3.default.background');
+  color: token('color.interactive.3.default.foreground.primary');
 }
 
 .button--interactive_3:hover {
-    background-color: token('color.interactive.3.hover.background');
-    color: token('color.interactive.3.hover.foreground.primary');
+  background-color: token('color.interactive.3.hover.background');
+  color: token('color.interactive.3.hover.foreground.primary');
 }
 
 .button--interactive_3:active {
-    background-color: token('color.interactive.3.active.background');
-    color: token('color.interactive.3.active.foreground.primary');
+  background-color: token('color.interactive.3.active.background');
+  color: token('color.interactive.3.active.foreground.primary');
 }
 
 .button--interactive_3:disabled,
 .button--interactive_3.button--disabled {
-    background-color: token('color.interactive.3.disabled.background');
-    color: token('color.interactive.3.disabled.foreground.primary');
+  background-color: token('color.interactive.3.disabled.background');
+  color: token('color.interactive.3.disabled.foreground.primary');
 }
 
 .button--interactive_3:focus {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.3.outline.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.medium')
+    token('color.interactive.3.outline.background');
 }
 
 /* Interactive button, destructive */
 
 .button--destructive,
 .button--destructive:visited {
-    background-color: var(
-            --interactive-interactive_destructive-default-background
-    );
-    color: token('color.interactive.destructive.default.foreground.primary');
+  background-color: var(
+    --interactive-interactive_destructive-default-background
+  );
+  color: token('color.interactive.destructive.default.foreground.primary');
 }
 
 .button--destructive:hover {
-    background-color: token('color.interactive.destructive.hover.background');
-    color: token('color.interactive.destructive.hover.foreground.primary');
+  background-color: token('color.interactive.destructive.hover.background');
+  color: token('color.interactive.destructive.hover.foreground.primary');
 }
 
 .button--destructive:active {
-    background-color: token('color.interactive.destructive.active.background');
-    color: token('color.interactive.destructive.active.foreground.primary');
+  background-color: token('color.interactive.destructive.active.background');
+  color: token('color.interactive.destructive.active.foreground.primary');
 }
 
 .button--destructive:disabled,
 .button--destructive.button--disabled {
-    background-color: token('color.interactive.destructive.disabled.background');
-    color: token('color.interactive.destructive.disabled.foreground.primary');
+  background-color: token('color.interactive.destructive.disabled.background');
+  color: token('color.interactive.destructive.disabled.foreground.primary');
 }
 
 .button--destructive:focus {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.destructive.outline.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.medium')
+    token('color.interactive.destructive.outline.background');
 }
 
 .button--size_medium {
-    padding: token('spacing.xLarge');
+  padding: token('spacing.xLarge');
 }
 
 .button--size_small {
-    padding: token('spacing.medium');
+  padding: token('spacing.medium');
 }
 
 .button--size_compact {
-    padding: 0;
+  padding: 0;
 }
 
 .button--size_pill {
-    padding: token('spacing.xSmall') token('spacing.medium');
+  padding: token('spacing.xSmall') token('spacing.medium');
 }
 
 .button--radius_top-bottom {
-    border-radius: token('border.radius.regular');
+  border-radius: token('border.radius.regular');
 }
 
 .button--radius_top {
-    border-top-left-radius: token('border.radius.regular');
-    border-top-right-radius: token('border.radius.regular');
+  border-top-left-radius: token('border.radius.regular');
+  border-top-right-radius: token('border.radius.regular');
 }
 
 .button--radius_bottom {
-    border-bottom-left-radius: token('border.radius.regular');
-    border-bottom-right-radius: token('border.radius.regular');
+  border-bottom-left-radius: token('border.radius.regular');
+  border-bottom-right-radius: token('border.radius.regular');
 }
 
 .button--radius_top-bottom.button--radiusSize_circular {
-    border-radius: token('border.radius.circle');
+  border-radius: token('border.radius.circle');
 }
 
 .button--radius_top.button--radiusSize_circular {
-    border-top-left-radius: token('border.radius.circle');
-    border-top-right-radius: token('border.radius.circle');
+  border-top-left-radius: token('border.radius.circle');
+  border-top-right-radius: token('border.radius.circle');
 }
 
 .button--radius_bottom.button--radiusSize_circular {
-    border-bottom-left-radius: token('border.radius.circle');
-    border-bottom-right-radius: token('border.radius.circle');
+  border-bottom-left-radius: token('border.radius.circle');
+  border-bottom-right-radius: token('border.radius.circle');
 }