add action buttons

ripe-tech · Nov 2, 2023 · 737f130 · 737f130
1 parent 58ea1a9
commit 737f130
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/vue/components/ui/organisms/details-expandable/details-expandable.stories.js b/vue/components/ui/organisms/details-expandable/details-expandable.stories.js
@@ -41,6 +41,7 @@ storiesOf("Components/Organisms/Details Expandable", module)
             <details-expandable-ripe
                 v-bind:data="data"
                 v-bind:label-font-size="fontSize"
+                v-bind:style="'margin-top: 25px'"
             >
             <template v-slot:customer-address>
                 <input-ripe v-bind:style="'width: 50%'" v-bind:value="data.customer.address.city"></input-ripe>

diff --git a/vue/components/ui/organisms/details-expandable/details-expandable.vue b/vue/components/ui/organisms/details-expandable/details-expandable.vue
@@ -12,6 +12,23 @@
             </div>
             <icon class="details-expandable-caret" v-bind:icon="isExpanded[sectionName] ? 'chevron-up' : 'chevron-down'" />
         </div>
+        <div class="details-expandable-btn-container">
+            <button-color
+                class="details-expandable-btn-discard"
+                v-bind:size="'small'"
+                v-bind:text="'Discard changes'"
+                v-bind:secondary="true"
+                v-bind:icon="'close'"
+                v-on:click="event => onDiscardHandler(event)"
+            />
+            <button-color
+                class="details-expandable-btn-save"
+                v-bind:size="'small'"
+                v-bind:text="'Save changes'"
+                v-bind:icon="'save'"
+                v-on:click="event => onSaveHandler(event)"
+            />
+        </div>
     </div>
 </template>
 
@@ -28,16 +45,34 @@
     width: 24px;
 }
 
+.details-expandable-btn-container {
+    height: 25px;
+    float: right;
+    margin-top: 50px;
+}
+
+.details-expandable-btn-discard {
+    margin-right: 6px;
+}
+
+.button-color.button-color-small {
+    min-width: 125px;
+}
+
 .details-expandable-section-hide {
     height: 25px;
     overflow: hidden;
     position: relative;
+    padding-bottom: 25px;
+    border-top: 1px solid var(--dividers-border-bottom-header, #E4E8F0);
 }
 
 .details-expandable-section-show {
     height: auto;
     overflow: visible;
     position: relative;
+    margin-bottom: 35px;
+    transition: opacity 0.1s ease-in-out;
 }
 
 .details-expandable-header {
@@ -91,6 +126,12 @@ export const DetailsExpandable = {
         },
         toggleSection(sectionName) {
             this.isExpanded[sectionName] = !this.isExpanded[sectionName];
+        },
+        onSaveHandler(event) {
+            this.$emit("save-button:click", event);
+        },
+        onDiscardHandler(event) {
+            this.$emit("discard-button:click", event);
         }
     }
 };