@vcita/design-system 1.20.11 → 1.20.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "1.20.11",
+  "version": "1.20.13",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {

package/src/components/VcMiniBanner/VcMiniBanner.spec.js

@@ -69,4 +69,12 @@ describe('VcMiniBanner.vue', () => {
     const text = within(title).getByText(baseProps.subtitle);
     expect(text).toBeInTheDocument();
   });
+
+  it('computed buttonProps', () => {
+    const buttonProps = VcMiniBanner.computed.buttonProps;
+    const primaryButtonProps = buttonProps.bind({ buttonType: 'primary' });
+    expect(primaryButtonProps()).toEqual({ flavor: 'primary', small: true, pill: true });
+    const secondaryButtonProps = buttonProps.bind({ buttonType: 'secondary' });
+    expect(secondaryButtonProps()).toEqual({ flavor: 'secondary', small: true, outlined: true });
+  });
 });

package/src/components/VcMiniBanner/VcMiniBanner.stories.js

@@ -23,6 +23,7 @@ const Template = (args, { argTypes }) => ({
               :subtitle="subtitle" 
               :ctaLabel="ctaLabel" 
               :gradientHue="gradientHue" 
+              :button-type="buttonType"
               @onAction="onAction" />
 
         </div>
@@ -38,6 +39,7 @@ Playground.args = {
     'Get creative freedom for your campaigns with a growing collection of templates for every occasion.',
   ctaLabel: 'Install app',
   gradientHue: '#f1f9fe',
+  buttonType: 'primary',
 };
 
 export const LongSubtitle = Template.bind({});
@@ -48,6 +50,7 @@ LongSubtitle.args = {
     'Zapier empowers you to automate your work across 5,000+ apps—so you can move forward, faster. From side hustlers to enterprise leaders, Zapier connects your work apps so you get more focus and less frustration.',
   ctaLabel: 'Read more',
   gradientHue: '#fefef3',
+  buttonType: 'primary',
 };
 
 export const WithoutHue = Template.bind({});
@@ -57,12 +60,19 @@ WithoutHue.args = {
   subtitle:
     'Connect your day-to-day business activity with your accounting platform to save time and automate your reporting process',
   ctaLabel: 'Connect',
+  buttonType: 'primary',
 };
 
 export default {
   title: 'Content display / VcMiniBanner',
   id: 'VcMiniBanner',
   component: VcMiniBanner,
+  argTypes: {
+    buttonType: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
   parameters: {
     design: {
       type: 'figma',

package/src/components/VcMiniBanner/VcMiniBanner.vue

@@ -24,7 +24,7 @@
       </h4>
     </div>
     <div class="vc-mini-banner__cta">
-      <VcButton pill small class="primary-cta" :data-qa="`${dataQa}-button`">
+      <VcButton v-bind="buttonProps" class="primary-cta" :data-qa="`${dataQa}-button`">
         {{ ctaLabel }}
       </VcButton>
     </div>
@@ -61,6 +61,21 @@ export default {
     gradientHue: {
       type: String,
     },
+    buttonType: {
+      type: String,
+      default: 'primary',
+      validator: (type) => ['primary', 'secondary'].includes(type),
+    },
+  },
+  computed: {
+    buttonProps() {
+      const props = {
+        primary: { flavor: 'primary', small: true, pill: true },
+        secondary: { flavor: 'secondary', small: true, outlined: true },
+      };
+
+      return props[this.buttonType];
+    },
   },
 };
 </script>

package/src/components/table/elements/VcDataTable/VcDataTable.spec.js

@@ -82,7 +82,7 @@ describe('VcDataTable.vue', () => {
         thresholds: {
           sm: 960,
         },
-        smAndDown: true,
+        mdAndDown: true,
       };
 
       vuetify.framework.breakpoint = breakpoint;

package/src/components/table/elements/VcDataTable/VcDataTable.vue

@@ -275,7 +275,7 @@ export default {
   }),
   computed: {
     isMobile() {
-      return this.showMobileOnBreakpoint && this.$vuetify.breakpoint.smAndDown;
+      return this.showMobileOnBreakpoint && this.$vuetify.breakpoint.mdAndDown;
     },
     headersWithClasses() {
       const updatedHeaders = this.headers.map((headerItem, index) => ({