@vcita/design-system 1.3.13 → 1.3.15

package/src/components/page/elements/VcPageHeader.vue

@@ -11,6 +11,19 @@
           </template>
         </VcButton>
         {{ title }}
+        <span v-if="chipLabel"
+              :data-qa="`${dataQa}-titleChip`"
+              class="title-chip" :class="`title-chip--${chipFlavor}`"
+        >{{ chipLabel }}</span>
+        <VcButton v-if="buttonLabel || buttonPrependIcon" flavor="secondary"
+                  class="title-button"
+                  :data-qa="`${dataQa}-titleButton`"
+                  @click="$emit('onTitleButtonClick')">
+          <template #prepend v-if="buttonPrependIcon">
+            <VcIcon color="black" size="var(--font-size-small)" class="me-2">{{ buttonPrependIcon }}</VcIcon>
+          </template>
+          {{ buttonLabel }}
+        </VcButton>
       </span>
       <span v-if="subtitle && subtitle.length > 0" class="VcHeader--subtitle">
         {{ subtitle }}
@@ -35,10 +48,11 @@ import VcBreadcrumbs from "@/components/VcBreadcrumbs/VcBreadcrumbs.vue";
 import VcLayout from "@/components/VcLayout/VcLayout.vue";
 import VcIcon from "@/components/VcIcon/VcIcon.vue";
 import VcButton from "@/components/VcButton/VcButton.vue";
+import VcChip from "@/components/VcChip/VcChip.vue";
 
 export default {
   name: "VcPageHeader",
-  components: {VcButton, VcIcon, VcLayout, VcBreadcrumbs},
+  components: {VcChip, VcButton, VcIcon, VcLayout, VcBreadcrumbs},
   props: {
     breadcrumbs: {
       type: Array,
@@ -63,12 +77,29 @@ export default {
     dataQa: {
       type: String,
       default: 'VcPageHeader'
+    },
+    chipLabel: {
+      type: String,
+      default: ''
+    },
+    chipFlavor: {
+      type: String,
+      default: 'beta',
+      validator: (type) => ['beta'].includes(type)
+    },
+    buttonLabel: {
+      type: String,
+      default: ''
+    },
+    buttonPrependIcon: {
+      type: String,
+      default: ''
     }
   },
   computed: {
     saveButtonLabel() {
       return this.buttonData.save?.label || this.$dst('ds.page.saveButton.label')
-    },
+    }
   },
 }
 </script>
@@ -85,6 +116,24 @@ export default {
   line-height: var(--size-value8);
   color: var(--gray-darken-5);
   margin-top: var(--size-value1);
+
+  .title-chip {
+    padding: var(--size-value1) var(--size-value2);
+    margin-inline-start: var(--size-value3);
+    border-radius: var(--size-value6);
+    font-weight: var(--font-weight-large2);
+    font-size: var(--font-size-xx-small);
+    height: var(--size-value5);
+
+    &--beta {
+      background-color: var(--orange);
+      color: white;
+    }
+  }
+
+  .title-button {
+    margin-inline-start: var(--size-value3);
+  }
 }
 
 .VcHeader--subtitle {

package/styles/vuetify-variables.scss

@@ -41,4 +41,7 @@ $color-picker-swatch-color-height: 24px;
 $color-picker-swatch-color-margin: 5px;
 $color-picker-controls-padding: 8px;
 $color-picker-swatch-color-border-radius: 50%;
-$color-picker-border-radius: 4px;
+$color-picker-border-radius: 4px;
+
+// VcMenuItem - skeleton
+$skeleton-loader-text-border-radius: 4px;

package/src/components/page/layouts/innerScrollPage/InnerScrollPageLayout.stories.js

@@ -1,166 +0,0 @@
-import VcLayout from "@/components/VcLayout/VcLayout";
-import VcPageHeader from "@/components/page/elements/VcPageHeader";
-import VcImage from "@/components/VcImage/VcImage";
-import VcButton from "@/components/VcButton/VcButton";
-
-const Template = (args, {argTypes}) => ({
-    components: {VcLayout, VcPageHeader, VcImage, VcButton},
-    props: Object.keys(argTypes),
-    template: `
-      <div :style="{maxHeight: '80%', overflow: 'hidden'}">
-      <VcLayout justify-center align-start :style="{margin: 'var(--size-value5)' }">
-        <VcLayout column fill-height
-                  :style="{minWidth: 'var(--centered-layout-min-width)', 
-                          maxWidth: 'var(--centered-layout-max-width)', 
-                          flexBasis: 'var(--centered-layout-min-width)'}">
-          <VcPageHeader :title="title"
-                        :subtitle="subtitle"
-                        :show-back-button="showBackButton"
-                        :breadcrumbs="breadcrumbs"
-                        :button-data="headerButtonData"
-                        @onSaveClicked="onSaveClicked"
-                        @onBackClicked="onBackClicked"/>
-          <VcLayout fill-height column
-                    :style="{ maxHeight: '100vh', backgroundColor: 'var(--green-lighten-2)', padding: '20px'}">
-            <VcLayout id="header" :style="{height: '50px'}">title</VcLayout>
-            <VcLayout id="content" column justify-center
-                      :style="{backgroundColor: 'var(--red-lighten-2)', flexGrow: 0, overflowY: 'auto'}">
-              <div :style="{width:'100%', minHeight: '1000px'}"> Your overflowing content goes here</div>
-              <!--              <div :style="{width:'100%', minHeight: '20px', backgroundColor: 'var(&#45;&#45;green-lighten-2)'}"> last item </div>-->
-            </VcLayout>
-          </VcLayout>
-        </VcLayout>
-      </VcLayout>
-      </div>`,
-})
-
-// export const InnerScrollPage = Template.bind({});
-
-// Set default values
-InnerScrollPage.args = {
-    breadcrumbs: [{text: 'Settings', href: 'settings'}, {text: 'Payments', href: 'payments'}],
-    title: 'Payments',
-    subtitle: '',
-    showBackButton: true,
-    headerButtonData: {save: {disabled: false}},
-}
-
-InnerScrollPage.parameters = {
-    docs: {
-        source: {
-            code: `
-              <template>
-                  <VcLayout justify-center align-start class="LayoutContainer">
-                      <VcLayout column class="MainLayout">
-                          <VcPageHeader :title="$t([YourPageTitle])" 
-                                        :subtitle="$t([YourPageSubtitle])"
-                                        :breadcrumbs="breadcrumbs"
-                                        :button-data="headerButtonData"
-                                        @onSaveClicked="onSaveClicked"
-                                        @onBackClicked="onBackClicked"/>
-                          <VcLayout>
-                            <!--   Set the content for your page   -->
-                            Your content goes here
-                          </VcLayout>
-                      </VcLayout>
-                  </VcLayout>
-              </template>
-
-             <script>
-
-            /**
-             To get this code running: 
-             1. [YourPageTitle] [[YourPageSubtitle] - set your page title and subtitle
-             2. [SettingsPageName] - Name the page
-             3. breadcrumbs data - set the breadcrumbs leading to this page
-             4. menu navigation groups - set the content
-             5. populate the content for the page
-             4. Mapping to YourStoreModule for data to display
-             5. Mapping to YourStoreModule for save action
-             6. Handle the logic to enable/disable the header save button 
-             */
-             
-               import {mapActions, mapGetters} from "vuex";
-               
-               export default {
-                name: "[SettingsPageName]",
-                data() {
-                    return {
-                        selectedIdx: '0',
-                        isSaveEnabled: false,
-                        breadcrumbs: [
-                            {
-                                text: 'item 1',
-                                disabled: false,
-                                href: 'item_1',
-                            },
-                        ],
-                        navGroups: [
-                        {
-                            id: 1,
-                            label: '[Group 1]',
-                            items: [
-                                {id: '0', label: 'item 1'},
-                                {id: '1', label: 'item 2'},
-                            ]
-                        },
-                        ],
-                    };
-                },
-                computed: {
-                    ...mapGetters("[YourStoreModule]", ["data"]),
-                    headerButtonData() {
-                        return {save: { disabled: !this.isSaveEnabled }};
-                    }
-                },
-                methods: {
-                    ...mapActions("YourStoreModule", ["SaveAction"]),
-                    onSaveClicked() {
-                        // Your save logic, probably sending action to store
-                    },
-                    onBackClicked() {
-                        this.$router.go(-1); // Or other logic
-                    },
-                },
-            }   
-            </script>
-            
-             <style lang="scss" scoped>
-                .LayoutContainer {
-                    margin: var(--size-value5);
-                    height: 100%;
-                }
-                
-                .MainLayout {
-                    // Need to get the actual values from Slavko
-                    min-width: var(--centered-layout-min-width); 
-                    max-width: var(--centered-layout-max-width);
-                    flex-basis: var(--centered-layout-min-width);
-                }
-             </style>
-
-            `,
-            type: "auto",
-        }
-    }
-}
-
-export default {
-    title: 'Page / layouts', // This will control the story sidebar position
-    id: 'CenteredPage', // This will be the permanent link to this component
-    component: VcPageHeader,
-    argTypes: {
-        buttonData: {table: {disable: true}},
-        buttons: {table: {disable: true}},
-        dataQa: {table: {disable: true}},
-    },
-    parameters: {
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/SD2qQZXfTJVxKHEqQgp2wt/New-settings-layout?node-id=43%3A101625',
-        },
-        status: {
-            type: 'pattern',
-        },
-    },
-};