add button text props

ripe-tech · Nov 2, 2023 · 22d8c25 · 22d8c25
1 parent b367e51
commit 22d8c25
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 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
@@ -62,7 +62,3 @@ storiesOf("Components/Organisms/Details Expandable", module)
             </details-expandable-ripe>
         `
     }));
-
-
-
-
diff --git a/vue/components/ui/organisms/details-expandable/details-expandable.vue b/vue/components/ui/organisms/details-expandable/details-expandable.vue
@@ -18,15 +18,15 @@
             <button-color
                 class="details-expandable-btn-discard"
                 v-bind:size="'small'"
-                v-bind:text="'Discard changes'"
+                v-bind:text="discardButtonText"
                 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:text="saveButtonText"
                 v-bind:icon="'save'"
                 v-on:click="event => onSaveHandler(event)"
             />
@@ -48,8 +48,8 @@
 }
 
 .details-expandable-btn-container {
-    height: 25px;
     float: right;
+    height: 25px;
     margin-top: 50px;
 }
 
@@ -64,22 +64,24 @@
 
 .details-expandable-section {
     cursor: pointer;
+    display: flex;
 }
+
 .details-expandable-section-hide {
+    border-bottom: 1px solid #e4e8f0;
     height: 25px;
+    margin-top: 25px;
     overflow: hidden;
-    position: relative;
     padding-bottom: 25px;
-    margin-top: 25px;
-    border-bottom: 1px solid var(--dividers-border-bottom-header, #E4E8F0);
+    position: relative;
 }
 
 .details-expandable-section-show {
     height: auto;
-    overflow: visible;
-    position: relative;
     margin-top: 25px;
+    overflow: visible;
     padding-bottom: 25px;
+    position: relative;
 }
 
 .details-expandable-header {
@@ -114,6 +116,14 @@ export const DetailsExpandable = {
         labelFontSize: {
             type: Number,
             default: null
+        },
+        discardButtonText: {
+            type: String,
+            default: "Discard changes"
+        },
+        saveButtonText: {
+            type: String,
+            default: "Save changes"
         }
     },
     data: function() {