From 5ae27f530e2c3794e0de28badf9674f5a37b96f8 Mon Sep 17 00:00:00 2001
From: baldo <baldo@toppoint.de>
Date: Tue, 23 Aug 2022 15:11:09 +0200
Subject: [PATCH] Allow specifying alignment for ButtonGroup.

---
 frontend/src/components/form/ButtonGroup.vue | 23 +++++++++++++++++---
 frontend/src/scss/_variables.scss            |  3 +++
 frontend/src/types/index.ts                  |  7 ++++++
 frontend/src/views/HomeView.vue              |  5 +++--
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/form/ButtonGroup.vue b/frontend/src/components/form/ButtonGroup.vue
index 09d44e8..ba5faea 100644
--- a/frontend/src/components/form/ButtonGroup.vue
+++ b/frontend/src/components/form/ButtonGroup.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import type {ButtonSize} from "@/types";
+import type {ButtonSize, ComponentAlignment} from "@/types";
 
 interface Props {
     buttonSize: ButtonSize;
+    align: ComponentAlignment;
 }
 
 const props = defineProps<Props>()
 </script>
 
 <template>
-    <div :class="['button-group', buttonSize]">
+    <div :class="['button-group', buttonSize, align]">
         <slot></slot>
     </div>
 </template>
@@ -20,8 +21,17 @@ const props = defineProps<Props>()
 
 .button-group {
     display: flex;
-    justify-content: center;
     flex-wrap: wrap;
+    margin: {
+        left: -$button-margin;
+        right: -$button-margin;
+    }
+
+    @each $align in (left, center, right) {
+        &.#{$align} {
+            justify-content: $align;
+        }
+    }
 
     button {
         margin: $button-margin;
@@ -32,15 +42,22 @@ const props = defineProps<Props>()
     .button-group {
         flex-direction: column;
 
+        margin: {
+            left: 0;
+            right: 0;
+        }
+
         button {
             margin: $button-margin 0;
             width: 100%;
         }
     }
 }
+
 @include page-breakpoint(smaller) {
     .button-group {
         align-items: center;
+
         button {
             flex-grow: 1;
             max-width: 80%;
diff --git a/frontend/src/scss/_variables.scss b/frontend/src/scss/_variables.scss
index 559b1db..18b82a2 100644
--- a/frontend/src/scss/_variables.scss
+++ b/frontend/src/scss/_variables.scss
@@ -11,6 +11,7 @@ $white: #ffffff;
 // Colors
 $variant-colors: (
     primary: #e5287a,
+    secondary: $gray-light,
     success: #4ba74b,
     warning: #fdbc41,
     danger: #ef5652,
@@ -18,6 +19,7 @@ $variant-colors: (
 );
 $variant-text-colors: (
     primary: $black,
+    secondary: $black,
     success: $black,
     warning: $black,
     danger: $black,
@@ -25,6 +27,7 @@ $variant-text-colors: (
 );
 
 $variant-color-primary: map-get($variant-colors, primary);
+$variant-color-secondary: map-get($variant-colors, secondary);
 $variant-color-success: map-get($variant-colors, success);
 $variant-color-warning: map-get($variant-colors, warning);
 $variant-color-danger: map-get($variant-colors, danger);
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 7c8c93e..27c38fc 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -6,8 +6,15 @@ export enum ButtonSize {
     LARGE = "large",
 }
 
+export enum ComponentAlignment {
+    LEFT = "left",
+    CENTER = "center",
+    RIGHT = "right",
+}
+
 export enum ComponentVariant {
     PRIMARY = "primary",
+    SECONDARY = "secondary",
     SUCCESS = "success",
     WARNING = "warning",
     DANGER = "danger",
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 2bb8a21..d5c0d35 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -2,7 +2,8 @@
 import ActionButton from "@/components/form/ActionButton.vue";
 import ButtonGroup from "@/components/form/ButtonGroup.vue";
 import PageContainer from "@/components/page/PageContainer.vue";
-import {ButtonSize, ComponentVariant} from "@/types";</script>
+import {ButtonSize, ComponentAlignment, ComponentVariant} from "@/types";
+</script>
 
 <template>
     <PageContainer>
@@ -12,7 +13,7 @@ import {ButtonSize, ComponentVariant} from "@/types";</script>
             Knoten in Betrieb und möchtest seine Daten ändern? Oder Du möchtest einen Knoten, der nicht mehr in Betrieb
             ist löschen? Dann bist Du hier richtig!</p>
 
-        <ButtonGroup :button-size="ButtonSize.LARGE">
+        <ButtonGroup class="actions" :align="ComponentAlignment.CENTER" :button-size="ButtonSize.LARGE">
             <ActionButton
                 :variant="ComponentVariant.INFO"
                 :size="ButtonSize.LARGE"