@mozaic-ds/vue 1.0.0-beta.1 → 1.0.0-beta.4

package/src/components/Contributing.mdx

@@ -0,0 +1,118 @@
+import { Meta } from '@storybook/blocks';
+import { Mermaid } from 'mdx-mermaid/Mermaid';
+
+<Meta title="Contributing" />
+
+# Be part of something bigger!
+
+**Mozaic-Vue** is made possible by an incredible community that finds issues and creates pull requests.<br/>
+It is our job to enable you to create amazing applications.
+
+Most of the time, you find something that can be made better. You could find a bug, or you have an idea for additional functionality.<br/>
+That's great! It's as easy as cloning the [Mozaic-Vue repository](https://github.com/adeo/mozaic-vue) to get started working in the development environment.
+
+Hopefully this document makes the process for contributing clear and answers some questions that you may have.<br/>
+If you have any questions, please reach out to us on our [slack channel](https://adeo-tech-community.slack.com/archives/CN4K3A99R).
+
+## Contribution model
+
+The contribution process can be summarized as follows:
+
+<Mermaid
+  chart={`flowchart TD;
+  A((I have a need <br/>fix or new feature));
+  A --> B{An issue already exists?};
+  B --> |YES| I;
+  I([The issue corresponds to my needs <br/>or I complete it]);
+  I --> D;
+  B --> |NO| C;
+  C([I create an issue <br/>]);
+  C --> D;
+  D{I can contribute?};
+  D --> |YES| E;
+  D --> |NO| J;
+  E([I clone the repo <br/>& create a PR associated to the issue]);
+  E --> F;
+  F([The PR is ready <br/>and I assign it to reviewers]);
+  F --> G;
+  G{The proofreading is OK <br/>and the PR is validated?};
+  G --> |YES| H;
+  G --> |NO| K;
+  H([The PR is merged and will be released soon]);
+  H;
+  J([In this case, I wait for the issue <br/>to be traited and delivered.]);
+  K([I make the requested changes]);
+  K --> F;
+  click B "https://github.com/adeo/mozaic-vue/issues" _blank;
+  click C "https://github.com/adeo/mozaic-vue/issues/new/choose" _blank;
+`}
+/>
+
+You can now discover the details of each of these steps below.
+
+## Reporting issues
+
+### Where to find known issues
+
+We are using [GitHub Issues](https://github.com/adeo/mozaic-vue/issues) for our bugs.<br/>
+We keep a close eye on this and try to make it clear when we have an internal fix in progress.<br/>
+
+**Before filing a new task, try to make sure your problem doesn't already exist.**
+
+### Reporting new issue
+
+The best way to get your bug fixed is to provide a reduced test case.
+
+Once you've gathered all information, please fill out an issue [here](https://github.com/adeo/mozaic-vue/issues/new/choose).
+
+## Proposing a change
+
+If you intend to add a new component, or make any non-trivial changes, we recommend filing an issue.
+
+This will lets us prepare an agreement on your proposal before you put significant effort into it.
+
+If you’re only fixing a bug, it should be fine to submit a pull request but we still recommend to submit an issue detailing what you’re looking to fix.
+
+## Setup Dev Environment
+
+### Project setup
+
+```bash
+// Clone mozaic-vue repo
+git clone git@github.com:adeo/mozaic-vue.git
+
+// Go to the cloned directory
+cd mozaic-vue
+
+// Checkout the branch you are working on
+git checkout <branch name>
+
+// Install dependencies
+npm install
+```
+
+## Submitting Changes/ Pull Requests
+
+Working on your first Pull Request? You can learn how from this video series:
+[How to contribute to an open source project on Github](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
+
+Mozaic's team is keeping an eye on pull requests. We will check your pull request, either merge it, request changes or close it with explanation.
+
+Before submitting please make sure to run:
+
+```
+// Pull down the latest
+$ git pull origin master
+
+// Create your working branch
+$ git branch - b type-id-description
+
+// Resolve bugs or implement new pattern
+// Add Tests and documentation
+
+// Run linter
+$ npm run lint
+
+// Run formatter
+$ npm run format
+```

package/src/components/GettingStarted.mdx

@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs';
+
+<Meta title="Getting Started" />
+
+# Getting Started
+
+**Mozaic-Vue** is the [Vue.js](https://vuejs.org/) implementation of ADEO Design system.
+
+## 📦 Installation
+
+In order to use **Mozaic-Vue** in your **Vue.js** project, you must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/vue):
+
+<Source
+  language="bash"
+  dark
+  code="npm install @mozaic-ds/vue --save --save-exact"
+/>
+
+Or with **Yarn**:
+
+<Source language="bash" dark code="yarn add @mozaic-ds/vue -E" />
+
+## 📝 Usage
+
+Now you can import any components in your Vue files and use it directly.
+
+<Source
+  language='html'
+  dark
+  code={`
+<script setup>
+  import { MButton } from '@mozaic-ds/vue'
+</script>
+
+<template>
+  <MButton label="This is a Mozaic Button" />
+</template>
+`} />

package/src/components/Introduction.mdx

@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs';
+import logo from '../../.storybook/assets/logo.svg';
+
+<Meta title="Introduction" />
+
+<h1>
+  <img
+    src={logo}
+    alt="Mozaic-Vue logo"
+    style={{ height: '48px', marginRight: '8px', verticalAlign: 'middle' }}
+  />
+  <span style={{ fontSize: '32px' }}>Vue.js library</span>
+</h1>
+
+This project contains **Vue.js** components that implements the **ADEO Design system** guidelines.
+
+## 🪄 Introduction
+
+ADEO Design system is a global and collaborative design system
+that facilitates the designer and developer experience,
+enabling them to create universal interfaces
+perfectly aligned with the business strategy of Adeo.
+
+## 🎨 Getting Started
+
+Ready to begin using Mozaic in your project?\
+Our Getting Started guide will walk you through the basics, \
+from setting up the system to implementing core components in your application.
+
+Whether you're new to Mozaic or just need a refresher, \
+this guide has everything you need to hit the ground running.
+
+Read how to **[Setup your application](/docs/getting-started--docs)**!
+
+## 🤝 Contributing
+
+Be part of something bigger!
+
+**Mozaic-Vue** is made possible by an incredible community that finds issues and creates pull requests.\
+It is our job to enable you to create amazing applications.
+
+To do so, see our **[contributing process](/docs/contributing--docs)**.
+
+## ℹ️ Support
+
+If you have any questions or need assistance,\
+we are here to help.
+
+Whether you're troubleshooting, looking for documentation,\
+or need to get in touch with our team,\
+you'll find all the resources you need to get the most out of **Mozaic-Vue**.
+
+Visit our **[Support page](/docs/support--docs)** for more information.

package/src/components/Support.mdx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Support" />
+
+# Support
+
+Need help?
+
+Any feedback, ideas or questions?
+
+The **Mozaic Design System team** would welcome any feedback, ideas, or requirements that you have.<br/>
+Our goal is to make your lives easier.
+
+If you want to get more detailed information on the components or any other topic related to **Mozaic-Vue**, you can contact us through the channels below:
+
+- Join the [#mozaic-vue](https://app.slack.com/client/T4R6RCZFA/CN4K3A99R/) channel on **Slack**
+- Join the [#mozaic-support](https://app.slack.com/client/T4R6RCZFA/CKQJZL7C4/) channel on **Slack**
+- Join our [Workplace group](https://adeo.workplace.com/groups/427492661454646/)

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

@@ -0,0 +1,16 @@
+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');
+  });
+});

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MBadge from './MBadge.vue';
+
+const meta: Meta<typeof MBadge> = {
+  title: 'Indicators/Badge (number)',
+  component: MBadge,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A badge indicates the status of an entity and can evolve at any time.',
+      },
+    },
+  },
+  args: { label: 99 },
+  render: (args) => ({
+    components: { MBadge },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MBadge v-bind="args"></MBadge>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MBadge>;
+
+export const Standard: Story = {};
+
+export const Accent: Story = {
+  args: { appearance: 'accent' },
+};
+
+export const Danger: Story = {
+  args: { appearance: 'danger' },
+};
+
+export const Inverse: Story = {
+  parameters: {
+    backgrounds: {
+      default: 'Inverse',
+    },
+  },
+  args: { appearance: 'inverse' },
+};
+
+export const Size: Story = {
+  args: { size: 'm' },
+};

package/src/components/badge/MBadge.vue

@@ -1,43 +1,45 @@
 <template>
-  <component :is="htmlTag" class="mc-badge" :class="setClasses">
-    <slot />
-  </component>
+  <span class="mc-badge" :class="classObject">
+    {{ label }}
+  </span>
 </template>
 
-<script>
-export default {
-  name: 'MBadge',
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A badge indicates the status of an entity and can evolve at any time.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Content of the badge
+     */
+    label: number;
+    /**
+     * Allows to define the Badge style
+     */
+    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
 
-  props: {
-    type: {
-      type: String,
-      default: null,
-      validator: (value) =>
-        ['information', 'success', 'warning', 'danger', 'neutral'].includes(
-          value
-        ),
-    },
-    htmlTag: {
-      type: String,
-      default: 'span',
-    },
+    /**
+     * Allows to define the Badge size
+     */
+    size?: 's' | 'm';
+  }>(),
+  {
+    appearance: 'standard',
+    size: 's',
   },
+);
 
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.type) {
-        classes.push(`mc-badge--${this.type}`);
-      }
-
-      return classes;
-    },
-  },
-};
+const classObject = computed(() => {
+  return {
+    [`mc-badge--${props.appearance}`]:
+      props.appearance && props.appearance != 'standard',
+    [`mc-badge--${props.size}`]: props.size && props.size != 's',
+  };
+});
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.badge';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/badge';
 </style>

package/src/components/button/MButton.spec.ts

@@ -0,0 +1,191 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MButton from './MButton.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import MLoader from '../loader/MLoader.vue';
+
+describe('MButton component', () => {
+  it('renders with a label', () => {
+    const wrapper = mount(MButton, {
+      slots: {
+        default: 'Click Me',
+      },
+    });
+    expect(wrapper.text()).toContain('Click Me');
+  });
+
+  it('applies the correct appearance class based on the appearance prop', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        appearance: 'accent',
+      },
+      slots: {
+        default: 'Styled Button',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--accent');
+  });
+
+  it('applies the correct size class based on the size prop', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        label: 'Sized Button',
+        size: 'l',
+      },
+      slots: {
+        default: 'Sized Button',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--l');
+  });
+
+  it('disables the button when the disabled prop is true', async () => {
+    const wrapper = mount(MButton, {
+      props: {
+        disabled: true,
+      },
+      slots: {
+        default: 'Disabled Button',
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('disabled')).toBeDefined();
+  });
+
+  it('applies the correct ghost class when ghost prop is true', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        ghost: true,
+      },
+      slots: {
+        default: 'Ghost Button',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--ghost');
+  });
+
+  it('applies the outlined class when outlined prop is true', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        outlined: true,
+      },
+      slots: {
+        default: 'Outlined Button',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--outlined');
+  });
+
+  it('has type="button" by default', () => {
+    const wrapper = mount(MButton, {
+      slots: {
+        default: 'Default Button',
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('type')).toBe('button');
+  });
+
+  it('can have type="submit" when the type prop is "submit"', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        type: 'submit',
+      },
+      slots: {
+        default: 'Submit Button',
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('type')).toBe('submit');
+  });
+
+  it('renders with an icon in the left position', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        iconPosition: 'left',
+      },
+      slots: {
+        default: 'Button with Icon',
+        icon: ChevronRight24,
+      },
+    });
+
+    const icon = wrapper.findComponent(ChevronRight24);
+    expect(icon.exists()).toBe(true);
+  });
+
+  it('renders with an icon in the right position', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        iconPosition: 'right',
+      },
+      slots: {
+        default: 'Button with Icon',
+        icon: ChevronRight24,
+      },
+    });
+
+    const icon = wrapper.findComponent(ChevronRight24);
+    expect(icon.exists()).toBe(true);
+  });
+
+  it('renders with only an icon when iconPosition is "only"', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        iconPosition: 'only',
+      },
+      slots: {
+        default: 'Icon Only Button',
+        icon: ChevronRight24,
+      },
+    });
+
+    const icon = wrapper.findComponent(ChevronRight24);
+    expect(icon.exists()).toBe(true);
+
+    const label = wrapper.find('.mc-button__label');
+    expect(label.exists()).toBe(false);
+  });
+
+  it('renders loader when isLoading prop is true', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        isLoading: true,
+      },
+      slots: {
+        default: 'Loading Button',
+      },
+    });
+
+    const loader = wrapper.findComponent(MLoader);
+    expect(loader.exists()).toBe(true);
+
+    const label = wrapper.find('.mc-button__label');
+    expect(label.attributes('style')).toContain('visibility: hidden');
+  });
+
+  it('does not render loader when isLoading prop is false', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        isLoading: false,
+      },
+      slots: {
+        default: 'Normal Button',
+      },
+    });
+
+    const loader = wrapper.findComponent(MLoader);
+    expect(loader.exists()).toBe(false);
+
+    const label = wrapper.find('.mc-button__label');
+    expect(label.exists()).toBe(true);
+    expect(label.text()).toBe('Normal Button');
+  });
+});

package/src/components/button/MButton.stories.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import MButton from './MButton.vue';
+import Download24 from '@mozaic-ds/icons-vue/src/components/Download24/Download24.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+
+const meta: Meta<typeof MButton> = {
+  title: 'Action/Button',
+  component: MButton,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.',
+      },
+    },
+  },
+  args: { default: 'Button Label' },
+  argTypes: {
+    $slots: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MButton, Download24, ChevronRight24 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MButton 
+        v-bind="args"
+      >
+        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
+        <template v-if="${'default' in args}" v-slot>${args.default}</template>
+      </MButton>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MButton>;
+
+export const Filled: Story = {};
+
+export const Outline: Story = {
+  args: { outlined: true },
+};
+
+export const Ghost: Story = {
+  args: { ghost: true },
+};
+
+export const Icon: Story = {
+  args: {
+    iconPosition: 'left',
+    icon: '<ChevronRight24/>',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+    ariaLabel: 'Loading button',
+  },
+};