@mozaic-ds/vue 1.0.0-beta.5 → 1.0.0-beta.7

package/src/components/numberbadge/MNumberBadge.spec.ts

@@ -0,0 +1,56 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MNumberBadge from './MNumberBadge.vue';
+
+describe('MNumberBadge component', () => {
+  it('renders the label correctly', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: { label: 42 },
+    });
+    expect(wrapper.text()).toBe('42');
+  });
+
+  it('applies no modifier class by default', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: { label: 1 },
+    });
+    expect(wrapper.classes()).toContain('mc-number-badge');
+    expect(wrapper.classes()).not.toContain('mc-number-badge--standard');
+    expect(wrapper.classes()).not.toContain('mc-number-badge--s');
+  });
+
+  it('applies appearance modifier class when set to danger', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: {
+        label: 5,
+        appearance: 'danger',
+      },
+    });
+    expect(wrapper.classes()).toContain('mc-number-badge');
+    expect(wrapper.classes()).toContain('mc-number-badge--danger');
+  });
+
+  it('applies size modifier class when size is m', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: {
+        label: 10,
+        size: 'm',
+      },
+    });
+    expect(wrapper.classes()).toContain('mc-number-badge');
+    expect(wrapper.classes()).toContain('mc-number-badge--m');
+  });
+
+  it('applies both appearance and size modifier classes when set', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: {
+        label: 3,
+        appearance: 'accent',
+        size: 'm',
+      },
+    });
+    expect(wrapper.classes()).toContain('mc-number-badge');
+    expect(wrapper.classes()).toContain('mc-number-badge--accent');
+    expect(wrapper.classes()).toContain('mc-number-badge--m');
+  });
+});

package/src/components/{badge/MBadge.stories.ts → numberbadge/MNumberBadge.stories.ts}

@@ -1,30 +1,30 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
-import MBadge from './MBadge.vue';
+import MNumberBadge from './MNumberBadge.vue';
 
-const meta: Meta<typeof MBadge> = {
-  title: 'Indicators/Badge (number)',
-  component: MBadge,
+const meta: Meta<typeof MNumberBadge> = {
+  title: 'Indicators/Number Badge',
+  component: MNumberBadge,
   parameters: {
     docs: {
       description: {
         component:
-          'A Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.',
+          'A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.',
       },
     },
   },
   args: { label: 99 },
   render: (args) => ({
-    components: { MBadge },
+    components: { MNumberBadge },
     setup() {
       return { args };
     },
     template: `
-      <MBadge v-bind="args"></MBadge>
+      <MNumberBadge v-bind="args"></MNumberBadge>
     `,
   }),
 };
 export default meta;
-type Story = StoryObj<typeof MBadge>;
+type Story = StoryObj<typeof MNumberBadge>;
 
 export const Standard: Story = {};
 

package/src/components/{badge/MBadge.vue → numberbadge/MNumberBadge.vue}

@@ -1,5 +1,5 @@
 <template>
-  <span class="mc-badge" :class="classObject">
+  <span class="mc-number-badge" :class="classObject">
     {{ label }}
   </span>
 </template>
@@ -33,13 +33,13 @@ const props = withDefaults(
 
 const classObject = computed(() => {
   return {
-    [`mc-badge--${props.appearance}`]:
+    [`mc-number-badge--${props.appearance}`]:
       props.appearance && props.appearance != 'standard',
-    [`mc-badge--${props.size}`]: props.size && props.size != 's',
+    [`mc-number-badge--${props.size}`]: props.size && props.size != 's',
   };
 });
 </script>
 
 <style lang="scss" scoped>
-@use '@mozaic-ds/styles/components/badge';
+@use '@mozaic-ds/styles/components/number-badge';
 </style>

package/src/main.ts

@@ -1,47 +1,22 @@
-import MBadge from './components/badge/MBadge.vue';
-import MBreadcrumb from './components/breadcrumb/MBreadcrumb.vue';
-import MButton from './components/button/MButton.vue';
-import MCheckbox from './components/checkbox/MCheckbox.vue';
-import MCheckboxGroup from './components/checkboxgroup/MCheckboxGroup.vue';
-import MField from './components/field/MField.vue';
-import MFieldGroup from './components/fieldgroup/MFieldGroup.vue';
-import MIconButton from './components/iconbutton/MIconButton.vue';
-import MLink from './components/link/MLink.vue';
-import MLoader from './components/loader/MLoader.vue';
-import MOverlay from './components/overlay/MOverlay.vue';
-import MPasswordInput from './components/passwordinput/MPasswordInput.vue';
-import MQuantitySelector from './components/quantityselector/MQuantitySelector.vue';
-import MRadio from './components/radio/MRadio.vue';
-import MRadioGroup from './components/radiogroup/MRadioGroup.vue';
-import MSelect from './components/select/MSelect.vue';
-import MStatusBadge from './components/statusbadge/MStatusBadge.vue';
-import MStatusNotification from './components/statusnotification/MStatusNotification.vue';
-import MTextArea from './components/textarea/MTextArea.vue';
-import MTextInput from './components/textinput/MTextInput.vue';
-import MToggle from './components/toggle/MToggle.vue';
-import MToggleGroup from './components/togglegroup/MToggleGroup.vue';
-
-export {
-  MBadge,
-  MBreadcrumb,
-  MButton,
-  MCheckbox,
-  MCheckboxGroup,
-  MField,
-  MFieldGroup,
-  MIconButton,
-  MLink,
-  MLoader,
-  MOverlay,
-  MPasswordInput,
-  MQuantitySelector,
-  MRadio,
-  MRadioGroup,
-  MSelect,
-  MStatusBadge,
-  MStatusNotification,
-  MTextArea,
-  MTextInput,
-  MToggle,
-  MToggleGroup,
-};
+export { default as MBreadcrumb } from './components/breadcrumb/MBreadcrumb.vue';
+export { default as MButton } from './components/button/MButton.vue';
+export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
+export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.vue';
+export { default as MField } from './components/field/MField.vue';
+export { default as MFieldGroup } from './components/fieldgroup/MFieldGroup.vue';
+export { default as MIconButton } from './components/iconbutton/MIconButton.vue';
+export { default as MLink } from './components/link/MLink.vue';
+export { default as MLoader } from './components/loader/MLoader.vue';
+export { default as MNumberBadge } from './components/numberbadge/MNumberBadge.vue';
+export { default as MOverlay } from './components/overlay/MOverlay.vue';
+export { default as MPasswordInput } from './components/passwordinput/MPasswordInput.vue';
+export { default as MQuantitySelector } from './components/quantityselector/MQuantitySelector.vue';
+export { default as MRadio } from './components/radio/MRadio.vue';
+export { default as MRadioGroup } from './components/radiogroup/MRadioGroup.vue';
+export { default as MSelect } from './components/select/MSelect.vue';
+export { default as MStatusBadge } from './components/statusbadge/MStatusBadge.vue';
+export { default as MStatusNotification } from './components/statusnotification/MStatusNotification.vue';
+export { default as MTextArea } from './components/textarea/MTextArea.vue';
+export { default as MTextInput } from './components/textinput/MTextInput.vue';
+export { default as MToggle } from './components/toggle/MToggle.vue';
+export { default as MToggleGroup } from './components/togglegroup/MToggleGroup.vue';

package/src/components/badge/MBadge.spec.ts

@@ -1,16 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import MBadge from './MBadge.vue';
-
-describe('MBadge component', () => {
-  it('renders properly', () => {
-    const wrapper = mount(MBadge, {
-      props: {
-        label: 99,
-      },
-    });
-
-    expect(wrapper.text()).toContain('99');
-  });
-});